|
@@ -1,10 +1,198 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <div class="topBanner">
|
|
|
+ <img class="msg"
|
|
|
+ src='@/assets/images/project/projectTitle.png' />
|
|
|
+ </div>
|
|
|
+ <div class="projectWrap">
|
|
|
+ <div class="tab width1200">
|
|
|
+ <div class="tabItem"
|
|
|
+ :class="activeNum==1?'active':''"
|
|
|
+ @mouseover="change(1)">
|
|
|
+ 酷乐秀考生APP
|
|
|
+ </div>
|
|
|
+ <div class="tabItem"
|
|
|
+ :class="activeNum==2?'active':''"
|
|
|
+ @mouseover="change(2)">
|
|
|
+ 酷乐秀管理端
|
|
|
+ </div>
|
|
|
+ <div class="tabItem"
|
|
|
+ :class="activeNum==3?'active':''"
|
|
|
+ @mouseover="change(3)">
|
|
|
+ 酷乐秀评委端
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="studentList width1200 videoList"
|
|
|
+ v-show='activeNum=== 1'>
|
|
|
+ <h2>线上报名后考试相关信息即刻提醒,同时可在APP上查看考级曲谱,高保证的音视频处理,<br> 让考试就如同和评审老师面对面,考试结束后结果可在APP查询。让考生彻底摆脱时间空间限制, <br> 自主选择报名时间和考试地点。</h2>
|
|
|
+ <div class="infoList">
|
|
|
+ <div class="infoItem">
|
|
|
+ <h3>考生信息提醒</h3>
|
|
|
+ <video src="@/assets/video/student-remind.mp4"
|
|
|
+ width="352"
|
|
|
+ height="640"
|
|
|
+ autoplay
|
|
|
+ loop></video>
|
|
|
+ </div>
|
|
|
+ <div class="infoItem">
|
|
|
+ <video src="@/assets/video/text.mp4"
|
|
|
+ width="352"
|
|
|
+ height="640"
|
|
|
+ autoplay
|
|
|
+ loop></video>
|
|
|
+ <h3>考级曲谱提前练习</h3>
|
|
|
+ </div>
|
|
|
+ <div class="infoItem">
|
|
|
+ <h3>在线高品质直播</h3>
|
|
|
+ <video src="@/assets/video/onlineText.mp4"
|
|
|
+ width="352"
|
|
|
+ height="640"
|
|
|
+ autoplay
|
|
|
+ loop></video>
|
|
|
+ </div>
|
|
|
+ <div class="infoItem">
|
|
|
+ <video src="@/assets/video/replay.mp4"
|
|
|
+ width="352"
|
|
|
+ height="640"
|
|
|
+ autoplay
|
|
|
+ loop></video>
|
|
|
+ <h3>录播考试满足多种场景</h3>
|
|
|
+ </div>
|
|
|
+ <div class="infoItem">
|
|
|
+ <h3>考试结果一键查询</h3>
|
|
|
+ <video src="@/assets/video/query.mp4"
|
|
|
+ width="352"
|
|
|
+ height="640"
|
|
|
+ autoplay
|
|
|
+ loop></video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
-
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ activeNum: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change (num) {
|
|
|
+ this.activeNum = num;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+.topBanner {
|
|
|
+ background: url("../../assets/images/project/projectBanner.png") center;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: relative;
|
|
|
+ height: 720px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .msg {
|
|
|
+ margin-top: 258px;
|
|
|
+ width: 766px;
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.projectWrap {
|
|
|
+ margin: 24px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .tab {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 76px;
|
|
|
+ line-height: 76px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ font-size: 18px;
|
|
|
+ .tabItem {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #808080;
|
|
|
+ text-decoration: none;
|
|
|
+ line-height: 76px;
|
|
|
+ height: 76px;
|
|
|
+ position: relative;
|
|
|
+ // display: block;
|
|
|
+ text-decoration: none;
|
|
|
+ text-transform: uppercase;
|
|
|
+ transition: 0.5s;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ top: 96%;
|
|
|
+ left: -10%;
|
|
|
+ width: 120%;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #2dc7aa;
|
|
|
+ z-index: 100;
|
|
|
+ transform: scaleX(0);
|
|
|
+ transform-origin: right;
|
|
|
+ transition: transform 0.5s;
|
|
|
+ }
|
|
|
+ &:hover,
|
|
|
+ &.hover {
|
|
|
+ color: #1a1a1a;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ &:hover::after {
|
|
|
+ transform: scaleX(1);
|
|
|
+ transform-origin: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabItem.active {
|
|
|
+ color: #1a1a1a !important;
|
|
|
+ font-weight: 600;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ top: 96%;
|
|
|
+ left: -10%;
|
|
|
+ width: 120%;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #2dc7aa;
|
|
|
+ z-index: 100;
|
|
|
+ transform: scaleX(1);
|
|
|
+ transform-origin: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.videoList {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 60px;
|
|
|
+ h2 {
|
|
|
+ width: 820px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #788393;
|
|
|
+ line-height: 29px;
|
|
|
+ }
|
|
|
+ .infoList {
|
|
|
+ .infoItem {
|
|
|
+ margin-top: 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 704px;
|
|
|
+ h3 {
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</script>
|
|
|
+</style>
|