|
|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="topBanner">
|
|
|
- <img src="@/assets/images/topBanner.png"
|
|
|
+ <!-- <img src="@/assets/images/topBanner.png"
|
|
|
alt=""
|
|
|
- width="100%">
|
|
|
+ width="100%"> -->
|
|
|
<div class="goinBox">立即入驻</div>
|
|
|
</div>
|
|
|
<div class="inner width1200">
|
|
|
@@ -34,27 +34,183 @@
|
|
|
</div>
|
|
|
<div class="suggest">
|
|
|
<div class="suggestList">
|
|
|
- <div class="suggestItem">
|
|
|
+ <div class="suggestItem "
|
|
|
+ :class="suggestIndex ===1?'active':''"
|
|
|
+ @click="suggestIndex=1">
|
|
|
<div class="suggestTitle">在线报名</div>
|
|
|
<div class="msg">考生在线报名，考级信息一手掌握</div>
|
|
|
</div>
|
|
|
- <div class="suggestItem">
|
|
|
- <div class="suggestTitle">在线报名</div>
|
|
|
- <div class="msg">考生在线报名，考级信息一手掌握</div>
|
|
|
+ <div class="suggestItem"
|
|
|
+ :class="suggestIndex ===2?'active':''"
|
|
|
+ @click="suggestIndex=2">
|
|
|
+ <div class="suggestTitle">高品质直播考场</div>
|
|
|
+ <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div>
|
|
|
</div>
|
|
|
- <div class="suggestItem">
|
|
|
- <div class="suggestTitle">在线报名</div>
|
|
|
- <div class="msg">考生在线报名，考级信息一手掌握</div>
|
|
|
+ <div class="suggestItem"
|
|
|
+ :class="suggestIndex ===3?'active':''"
|
|
|
+ @click="suggestIndex=3">
|
|
|
+ <div class="suggestTitle">在线录播</div>
|
|
|
+ <div class="msg">录播考试兼容各种考试场景</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="suggestImgList">
|
|
|
+ <div class="suggestImg"
|
|
|
+ v-show="suggestIndex ===1">
|
|
|
+ <img src="@/assets/images/phone1.png"
|
|
|
+ alt=""
|
|
|
+ width="100%">
|
|
|
+ </div>
|
|
|
+ <div class="suggestImg"
|
|
|
+ v-show="suggestIndex ===2">
|
|
|
+ <img src="@/assets/images/phone2.png"
|
|
|
+ alt=""
|
|
|
+ width="100%">
|
|
|
+ </div>
|
|
|
+ <div class="suggestImg"
|
|
|
+ v-show="suggestIndex ===3">
|
|
|
+ <img src="@/assets/images/phone3.png"
|
|
|
+ alt=""
|
|
|
+ width="100%">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inner2">
|
|
|
+ <div class="width1200">
|
|
|
+ <div class="titleWrap">
|
|
|
+ <img src="@/assets/images/title2.png"
|
|
|
+ width="100%"
|
|
|
+ alt="">
|
|
|
+ </div>
|
|
|
+ <div class="suggest">
|
|
|
+ <div class="suggestList">
|
|
|
+ <div class="suggestItem "
|
|
|
+ :class="mapIndex ===1?'active':''"
|
|
|
+ @click="mapIndex=1">
|
|
|
+ <div class="suggestTitle">生源拓展</div>
|
|
|
+ <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="suggestItem"
|
|
|
+ :class="mapIndex ===2?'active':''"
|
|
|
+ @click="mapIndex=2">
|
|
|
+ <div class="suggestTitle">考级生命周期</div>
|
|
|
+ <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="suggestImgList">
|
|
|
+ <div class="suggestImg"
|
|
|
+ v-show="mapIndex ===1">
|
|
|
+ <img src="@/assets/images/map.png"
|
|
|
+ alt=""
|
|
|
+ width="100%">
|
|
|
+ <p class="mapMsg">支持<span>多级下属合作单位</span>线上招生，打破生源地空间限制，将招考范围<span>推向全国</span></p>
|
|
|
+ </div>
|
|
|
+ <div class="suggestImg"
|
|
|
+ v-show="mapIndex ===2">
|
|
|
+ <img src="@/assets/images/map1.png"
|
|
|
+ style="margin-top: 73px;"
|
|
|
+ alt=""
|
|
|
+ width="100%">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inner width1200 inner3">
|
|
|
+ <div class="titleWrap">
|
|
|
+ <img src="@/assets/images/title3.png"
|
|
|
+ alt="">
|
|
|
+ </div>
|
|
|
+ <div class="suggest">
|
|
|
+ <div class="suggestList">
|
|
|
+ <div class="suggestItem "
|
|
|
+ :class="onlineIndex ===1?'active':''"
|
|
|
+ @click="onlineIndex=1">
|
|
|
+ <div class="suggestTitle">直播互动</div>
|
|
|
+ <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="suggestItem"
|
|
|
+ :class="onlineIndex ===2?'active':''"
|
|
|
+ @click="onlineIndex=2">
|
|
|
+ <div class="suggestTitle">在线评审</div>
|
|
|
+ <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="suggestImgList"
|
|
|
+ style="margin-top:118px">
|
|
|
+ <div class="suggestImg"
|
|
|
+ v-show="onlineIndex ===1">
|
|
|
+ <img src="@/assets/images/look.png"
|
|
|
+ alt=""
|
|
|
+ width="712px">
|
|
|
+ <p class="mapMsg">支持<span>多级下属合作单位</span>线上招生，打破生源地空间限制，将招考范围<span>推向全国</span></p>
|
|
|
+ </div>
|
|
|
+ <div class="suggestImg"
|
|
|
+ v-show="onlineIndex ===2">
|
|
|
+ <img src="@/assets/images/look1.png"
|
|
|
+ alt=""
|
|
|
+ width="712px">
|
|
|
+ <p class="mapMsg">支持<span>多级下属合作单位</span>线上招生，打破生源地空间限制，将招考范围<span>推向全国</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inner inner4">
|
|
|
+ <!-- <img src="@/assets/images/index-bg.png"
|
|
|
+ width="100%"
|
|
|
+ alt=""> -->
|
|
|
+ <div class="textwrap">
|
|
|
+ <h2>技术赋能考级，为行业带来崭新一页</h2>
|
|
|
+ <p class="desc">酷乐秀是武汉市景明云乐科技有限公司研发的专为为全国音乐等级考试提供线上考级服务，是全国首家拥有音乐类专业直播技术的服务平台。独有“音乐演奏模式”高保真还原乐器演奏的现场感及音色，为远程视频直播、录播考级提供技术支持，考生可通过酷乐秀实现考级完整生命周期。同步还原线下考级场景，为合作机构和考生提供公平公正，省时省力的考试体验。</p>
|
|
|
+ <div class="cardList">
|
|
|
+ <div class="cardItem">
|
|
|
+ <img src="@/assets/images/card1.png"
|
|
|
+ width="110px"
|
|
|
+ height="88px"
|
|
|
+ alt="">
|
|
|
+ <h4>技术保障</h4>
|
|
|
+ <p>资深技术团队开发</p>
|
|
|
+ </div>
|
|
|
+ <div class="cardItem">
|
|
|
+ <img src="@/assets/images/card2.png"
|
|
|
+ width="110px"
|
|
|
+ height="88px"
|
|
|
+ alt="">
|
|
|
+ <h4>深度融合</h4>
|
|
|
+ <p>全面深入音乐教育行业</p>
|
|
|
+ </div>
|
|
|
+ <div class="cardItem">
|
|
|
+ <img src="@/assets/images/card3.png"
|
|
|
+ width="110px"
|
|
|
+ height="88px"
|
|
|
+ alt="">
|
|
|
+ <h4>技术保障</h4>
|
|
|
+ <p>资深技术团队开发</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
+ <silder />
|
|
|
+ <el-dialog title="申请入驻"
|
|
|
+ :visible.sync="dialogTableVisible">
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import silder from '@/components/silder.vue'
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ silder
|
|
|
+ },
|
|
|
data () {
|
|
|
- return {}
|
|
|
+ return {
|
|
|
+ suggestIndex: 1,
|
|
|
+ mapIndex: 1,
|
|
|
+ onlineIndex: 1,
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -63,7 +219,12 @@ img {
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.topBanner {
|
|
|
+ background: url("../../assets/images/topBanner.png") center;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
position: relative;
|
|
|
+ height: 465px;
|
|
|
+
|
|
|
.goinBox {
|
|
|
width: 150px;
|
|
|
height: 44px;
|
|
|
@@ -73,10 +234,26 @@ img {
|
|
|
font-size: 16px;
|
|
|
color: #ffffff;
|
|
|
position: absolute;
|
|
|
- left: 365px;
|
|
|
+ left: 20%;
|
|
|
bottom: 147px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+ @media screen and (min-width: 1200px) and (max-width: 1500px) {
|
|
|
+ /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
|
|
|
+ .goinBox {
|
|
|
+ width: 150px;
|
|
|
+ height: 44px;
|
|
|
+ background: #2dc7aa;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ left: 5%;
|
|
|
+ bottom: 147px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.inner {
|
|
|
display: flex;
|
|
|
@@ -100,7 +277,6 @@ img {
|
|
|
border-radius: 8px;
|
|
|
border: 1px solid #cdcdcd;
|
|
|
img {
|
|
|
- border: 1px dotted #999;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
&:hover {
|
|
|
@@ -110,7 +286,6 @@ img {
|
|
|
margin: 13px 0;
|
|
|
height: 33px;
|
|
|
font-size: 24px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #2c2c2c;
|
|
|
line-height: 33px;
|
|
|
@@ -127,15 +302,121 @@ img {
|
|
|
}
|
|
|
}
|
|
|
.titleWrap {
|
|
|
- margin-top: 118px;
|
|
|
+ margin-top: 85px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.suggest {
|
|
|
+ margin-top: 85px;
|
|
|
+ width: 740px;
|
|
|
+ .suggestList {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+ // margin-bottom: 71px;
|
|
|
+ .suggestItem {
|
|
|
+ width: 220px;
|
|
|
+ cursor: pointer;
|
|
|
+ .suggestTitle {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #2c2c2c;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 21px;
|
|
|
+ }
|
|
|
+ .msg {
|
|
|
+ color: #788393;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .suggestItem.active {
|
|
|
+ .suggestTitle {
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 28px;
|
|
|
+ background-color: #2dc7aa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.inner2 {
|
|
|
+ background: #f6f7f9;
|
|
|
+ padding-bottom: 150px;
|
|
|
+ .width1200 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titleWrap {
|
|
|
+ padding-top: 84px;
|
|
|
}
|
|
|
- .suggest {
|
|
|
- margin-top: 118px;
|
|
|
- width: 740px;
|
|
|
- .suggestList {
|
|
|
+}
|
|
|
+.mapMsg {
|
|
|
+ margin-top: 73px;
|
|
|
+ color: #333;
|
|
|
+ font-size: 16px;
|
|
|
+ span {
|
|
|
+ color: #2dc7aa;
|
|
|
+ }
|
|
|
+}
|
|
|
+.inner3 {
|
|
|
+ padding-bottom: 190px;
|
|
|
+}
|
|
|
+.inner4 {
|
|
|
+ background: url("../../assets/images/index-bg.png") center;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ height: 900px;
|
|
|
+ .textwrap {
|
|
|
+ position: absolute;
|
|
|
+ width: 1074px;
|
|
|
+ top: 132px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -537px;
|
|
|
+ h2 {
|
|
|
+ margin-bottom: 66px;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .cardList {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: space-around;
|
|
|
+ margin-top: 100px;
|
|
|
+ .cardItem {
|
|
|
+ width: 312px;
|
|
|
+ height: 298px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 7px 9px 0px rgba(107, 107, 107, 0.11);
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #d1d1d1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ margin-top: 50px;
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ color: #2c2c2c;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 33px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ color: #788393;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
