123456

src/views/index/blocks/infos.vue

@@ -2,18 +2,23 @@
   <div class="container">
     <div class="infos width1200">
       <header class="headers">
-        <span @click="setActive(0)" :class="{active: active === 0}">考级生命周期</span>
-        <span @click="setActive(1)" :class="{active: active === 1}">生源拓展</span>
-        <span @click="setActive(2)" :class="{active: active === 2}">高效管理</span>
-        <span @click="setActive(3)" :class="{active: active === 3}">节省成本</span>
-        <span @click="setActive(4)" :class="{active: active === 4}">零收入投入</span>
+        <span @click="setActive(0)"
+              :class="{active: active === 0}">考级生命周期</span>
+        <span @click="setActive(1)"
+              :class="{active: active === 1}">生源拓展</span>
+        <span @click="setActive(2)"
+              :class="{active: active === 2}">高效管理</span>
+        <span @click="setActive(3)"
+              :class="{active: active === 3}">节省成本</span>
+        <span @click="setActive(4)"
+              :class="{active: active === 4}">零收入投入</span>
       </header>
       <div class="content">
         <transition name="fade">
           <template v-if="active === 0">
             <div>
-              <p class="desc first">信息化赋能打造<strong>全流程线上考级模式</strong><br/>随时随地保证用户数据安全，<strong>打破时间空间限制</strong>将考级生命周期完整呈现</p>
-              <lifecycle/>
+              <p class="desc first">信息化赋能打造<strong>全流程线上考级模式</strong><br />随时随地保证用户数据安全，<strong>打破时间空间限制</strong>将考级生命周期完整呈现</p>
+              <lifecycle />
             </div>
           </template>
         </transition>
@@ -34,7 +39,7 @@
           <template v-if="active === 3">
             <div>
               <p class="desc">线上化招考流程极大<strong>节省考级成本</strong></p>
-              <safe/>
+              <safe />
             </div>
           </template>
         </transition>
@@ -59,99 +64,108 @@ export default {
     lifecycle,
     safe,
   },
-  data() {
+  data () {
     return {
       active: 3
     }
   },
   methods: {
-    setActive(index) {
+    setActive (index) {
       this.active = index
     }
   }
 }
 </script>
 <style lang="less" scoped>
-  .fade-enter{
-    visibility: hidden;
-    opacity: 0;
-  }
-  .fade-leave-to{
-    display: none;
-  }
-  .fade-enter-active,
-  .fade-leave-active{
-    transition: opacity .5s ease;
+.fade-enter {
+  visibility: hidden;
+  opacity: 0;
+}
+.fade-leave-to {
+  display: none;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.fade-enter-to,
+.fade-leave {
+  visibility: visible;
+  opacity: 1;
+}
+.container {
+  height: 958px;
+  background-color: #f6f7f9;
+}
+.desc {
+  position: relative;
+  font-size: 16px;
+  line-height: 30px;
+  color: #696969;
+  display: inline-block;
+  margin: 50px 0;
+  > strong {
+    color: #2dc7aa;
+    font-weight: normal;
   }
-  .fade-enter-to,
-  .fade-leave{
-    visibility: visible;
-    opacity: 1;
+  &.first::before {
+    left: 105px;
   }
-  .container{
-    height: 958px;
-    background-color: #F6F7F9;
+  &::before {
+    top: -8px;
+    left: -25px;
+    position: absolute;
+    display: block;
+    content: "";
+    background: url("../images/icon.png") no-repeat center;
+    background-size: cover;
+    width: 40px;
+    height: 40px;
   }
-  .desc{
-    position: relative;
-    font-size: 16px;
-    line-height: 30px;
-    color: #696969;
-    display: inline-block;
-    margin: 50px 0;
-    >strong{
-      color: #2DC7AA;
-      font-weight: normal;
-    }
-    &.first::before{
-      left: 105px;
-    }
-    &::before {
-      top: -8px;
-      left: -25px;
-      position: absolute;
-      display: block;
-      content: '';
-      background: url('../images/icon.png') no-repeat center;
-      background-size: cover;
-      width: 40px;
-      height: 40px;
-    }
-  }
-  .infos{
-    min-height: 500px;
-    .headers{
-      display: flex;
-      justify-content: center;
-      padding: 20px 0;
-      padding-top: 50px;
-      border-bottom: 2px solid #EAEAEA;
-      >span{
-        color: #242424;
-        cursor: pointer;
-        display: inline-block;
-        padding: 10px 15px;
-        border-radius: 8px;
-        font-size: 18px;
-        transition: all .5s ease;
-        &.active{
-          color: #2dc7aa;
-          position: relative;
-          &::after{
-            display: block;
-            position: absolute;
-            content: '';
-            border-bottom: 2px solid #2DC7AA;
-            width: 100%;
-            height: 0;
-            bottom: -22px;
-            left: 5px;
-          }
+}
+.infos {
+  min-height: 500px;
+  .headers {
+    display: flex;
+    justify-content: center;
+    padding: 20px 0;
+    padding-top: 50px;
+    border-bottom: 2px solid #eaeaea;
+    > span {
+      color: #242424;
+      cursor: pointer;
+      display: inline-block;
+      padding: 10px 15px;
+      text-decoration: none;
+      position: relative;
+      // display: block;
+      text-decoration: none;
+      text-transform: uppercase;
+      transition: 0.5s;
+      font-size: 18px;
+      &::after {
+        position: absolute;
+        content: "";
+        top: 145%;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #2dc7aa;
+        z-index: 100;
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.5s;
+      }
+      &.active {
+        color: #2dc7aa;
+        &::after {
+          transform: scaleX(1);
+          transform-origin: left;
         }
       }
     }
-    .content{
-
-    }
   }
+  .content {
+  }
+}
 </style>

src/views/index/blocks/videoList.vue

@@ -66,6 +66,7 @@
             <div class="textWrap">{{activeRow.text}}</div>
             <video :src="activeRow.src"
                    :width="activeRow.width"
+                   :height="activeRow.height"
                    autoplay
                    controls
                    loop></video>
@@ -75,6 +76,7 @@
             <p>{{activeRow.text}}</p>
             <video :src="activeRow.src"
                    :width="activeRow.width"
+                   :height="activeRow.height"
                    autoplay
                    controls
                    loop></video>
@@ -198,6 +200,7 @@ export default {
       cursor: pointer;
       padding-left: 30px;
       text-align: left;
+      font-size: 16px;
     }
   }
   .right {

src/views/project/video.js

@@ -1,13 +1,13 @@
 export const vaidoJson = {
-  app: [{ src: require('../../assets/video/student-remind.mp4'), width: '352', title: '信息提醒', father: 'app', id: 1, text: "平台会在考级生命周期中的每个关键节点对考生进行手机短信、APP消息推送，充分保障考生再关键节点获得相关信息提醒。考生及其家长需注意平台发送的短信和APP内消息推送，并仔细阅读相关内容，按照提示正常完成每一次考试。" },
-  { src: require('@/assets/video/text.mp4'), width: '352', title: '曲谱查询', father: 'app', id: 2, text: '考生通过H5报名链接完成考级报名后，便可使用报名时填写的手机号码登录“酷乐秀”APP，登陆后进入“考级曲库”可查看报考项目中您所报名考试的制定曲目及相关曲谱，便于在考前准备时进行练习。' },
-  { src: require('@/assets/video/onlineText.mp4'), width: '352', title: '直播考试', father: 'app', id: 3, text: '考试当天通过“准考证”进入等待考试界面，点击“签到”按钮进行考试签到。签到后考生需排队等待考试呼叫，请注意观察还是等待人数及预计等待时间。当系统呼叫您进入考场时，按钮会变为绿色闪烁状态，请及时点击按钮进入考场，不要让评委等待多时。' },
-  { src: require('@/assets/video/replay.mp4'), width: '352', title: '录播考试', father: 'app', id: 4, text: ' 当直播考试时出现网络状态不稳定的情况，评委会要求考生过同录播视频完成考试，请根据屏幕上的提示信息进入录播考试界面，按照录播考试要求一次完成曲目的录制与上传。' },
-  { src: require('@/assets/video/query.mp4'), width: '352', title: '结果查询', father: 'app', id: 5, text: '完成考试后，请等待主办方统计考试结果。考试结果确认后，系统会发送消息推送提醒您考试结果已经生成，请登录“酷乐秀”APP，在首页中点击“考试记录”查看您的考试结果。也可通过该界面回顾您的考试视频。' },],
-  admin: [{ src: require('@/assets/video/base.mp4'), width: '704', title: '基础维度配置', father: 'admin', id: 6, text: ' 入驻机构需根据平台提供的账号登录“酷乐秀”管理系统维护本机构考试相关的基础维度信息。可根据本机构自身需要配置系统使用角色，创建角色账号。配置考试相关参数，维护合作单位、考级评委、考级曲库、乐理等基础信息。' },
-  { src: require('@/assets/video/maintain.mp4'), width: '704', title: '考级项目维护', father: 'admin', id: 7, text: '维护完本机构考级的相关基础信息后，可创建考级项目，根据系统提示步骤设置考级项目信息、报名时间及考级相关专业、等级、考试曲目、乐理即可完成考级项目创建。创建考级项目后可添加考级项目合作单位和评委老师。' },
-  { src: require('@/assets/video/onlineSign.mp4'), width: '352', title: '考生在线报名', father: 'admin', id: 8, text: '创建考级项目后，可将该项目生成的报名链接发送给考生进行考级报名。考生通过链接打开H5页面，上传考生个人信息后根据自身专业水平选择报考声部和报考等级，确认报考曲目，完成以上报名信息后，根据系统提示支付报名费用完成报名。' },
-  { src: require('@/assets/video/info.mp4'), width: '704', title: '考生信息查询', father: 'admin', id: 9, text: '考生报名后，主办方可在“酷乐秀”管理系统中查看报考考生的个人信息及报考信息，对报考考生信息信息审核' },
-  { src: require('@/assets/video/result.mp4'), width: '704', title: '考试结果维护', father: 'admin', id: 10, text: ' 考试完成后，主办方可登录“酷乐秀”管理系统查看评委评审结果，确认评审结果后即可向报考考生发送考试结果，考生可在“酷乐秀”APP中查询结果。' },],
-  teacher: [{ src: require('@/assets/video/Invigilator.mp4'), width: '704', title: '在线直播评审', father: 'teacher', id: 11, text: '考试当天评委登录“酷乐秀”评委端进行考级评审，通过在线直播视频对报考考生进行考核，评委端可查看考生准考证、报考曲目等信息，保证考试的次序与规范并对考生进行专业点评。' }],
+  app: [{ src: require('../../assets/video/student-remind.mp4'), width: '352', height: '640', title: '信息提醒', father: 'app', id: 1, text: "平台会在考级生命周期中的每个关键节点对考生进行手机短信、APP消息推送，充分保障考生再关键节点获得相关信息提醒。考生及其家长需注意平台发送的短信和APP内消息推送，并仔细阅读相关内容，按照提示正常完成每一次考试。" },
+  { src: require('@/assets/video/text.mp4'), width: '352', height: '640', title: '曲谱查询', father: 'app', id: 2, text: '考生通过H5报名链接完成考级报名后，便可使用报名时填写的手机号码登录“酷乐秀”APP，登陆后进入“考级曲库”可查看报考项目中您所报名考试的制定曲目及相关曲谱，便于在考前准备时进行练习。' },
+  { src: require('@/assets/video/onlineText.mp4'), width: '352', height: '640', title: '直播考试', father: 'app', id: 3, text: '考试当天通过“准考证”进入等待考试界面，点击“签到”按钮进行考试签到。签到后考生需排队等待考试呼叫，请注意观察还是等待人数及预计等待时间。当系统呼叫您进入考场时，按钮会变为绿色闪烁状态，请及时点击按钮进入考场，不要让评委等待多时。' },
+  { src: require('@/assets/video/replay.mp4'), width: '352', height: '640', title: '录播考试', father: 'app', id: 4, text: ' 当直播考试时出现网络状态不稳定的情况，评委会要求考生过同录播视频完成考试，请根据屏幕上的提示信息进入录播考试界面，按照录播考试要求一次完成曲目的录制与上传。' },
+  { src: require('@/assets/video/query.mp4'), width: '352', height: '640', title: '结果查询', father: 'app', id: 5, text: '完成考试后，请等待主办方统计考试结果。考试结果确认后，系统会发送消息推送提醒您考试结果已经生成，请登录“酷乐秀”APP，在首页中点击“考试记录”查看您的考试结果。也可通过该界面回顾您的考试视频。' },],
+  admin: [{ src: require('@/assets/video/base.mp4'), width: '704', height: '414', title: '基础维度配置', father: 'admin', id: 6, text: ' 入驻机构需根据平台提供的账号登录“酷乐秀”管理系统维护本机构考试相关的基础维度信息。可根据本机构自身需要配置系统使用角色，创建角色账号。配置考试相关参数，维护合作单位、考级评委、考级曲库、乐理等基础信息。' },
+  { src: require('@/assets/video/maintain.mp4'), width: '704', height: '414', title: '考级项目维护', father: 'admin', id: 7, text: '维护完本机构考级的相关基础信息后，可创建考级项目，根据系统提示步骤设置考级项目信息、报名时间及考级相关专业、等级、考试曲目、乐理即可完成考级项目创建。创建考级项目后可添加考级项目合作单位和评委老师。' },
+  { src: require('@/assets/video/onlineSign.mp4'), width: '352', height: '640', title: '考生在线报名', father: 'admin', id: 8, text: '创建考级项目后，可将该项目生成的报名链接发送给考生进行考级报名。考生通过链接打开H5页面，上传考生个人信息后根据自身专业水平选择报考声部和报考等级，确认报考曲目，完成以上报名信息后，根据系统提示支付报名费用完成报名。' },
+  { src: require('@/assets/video/info.mp4'), width: '704', height: '414', title: '考生信息查询', father: 'admin', id: 9, text: '考生报名后，主办方可在“酷乐秀”管理系统中查看报考考生的个人信息及报考信息，对报考考生信息信息审核' },
+  { src: require('@/assets/video/result.mp4'), width: '704', height: '414', title: '考试结果维护', father: 'admin', id: 10, text: ' 考试完成后，主办方可登录“酷乐秀”管理系统查看评委评审结果，确认评审结果后即可向报考考生发送考试结果，考生可在“酷乐秀”APP中查询结果。' },],
+  teacher: [{ src: require('@/assets/video/Invigilator.mp4'), width: '704', height: '414', title: '在线直播评审', father: 'teacher', id: 11, text: '考试当天评委登录“酷乐秀”评委端进行考级评审，通过在线直播视频对报考考生进行考核，评委端可查看考生准考证、报考曲目等信息，保证考试的次序与规范并对考生进行专业点评。' }],
 }