Merge branch 'master' of git.dayaedu.com:molingzhide/colexiu-website

package-lock.json

@@ -3133,6 +3133,11 @@
         "array-find-index": "^1.0.1"
       }
     },
+    "custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npm.taobao.org/custom-event-polyfill/download/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha1-m8mT3dqTfBowzNM1YUxsWMT4eu4="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz",
@@ -5397,6 +5402,11 @@
         }
       }
     },
+    "loadjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npm.taobao.org/loadjs/download/loadjs-4.2.0.tgz",
+      "integrity": "sha1-KgM2N2OXpqQ+35jJ7DIp3dWrtvY="
+    },
     "locate-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-2.0.0.tgz?cache=0&sync_timestamp=1597081764621&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flocate-path%2Fdownload%2Flocate-path-2.0.0.tgz",
@@ -6622,6 +6632,25 @@
         "find-up": "^2.1.0"
       }
     },
+    "plyr": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npm.taobao.org/plyr/download/plyr-3.6.2.tgz",
+      "integrity": "sha1-WlW2CKzRYSYt4cx1yoQ6pkNVoFE=",
+      "requires": {
+        "core-js": "^3.6.5",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.8"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-3.6.5.tgz",
+          "integrity": "sha1-c5XcJzrzf7LlDpvT2f6EEoUjHRo="
+        }
+      }
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.28.tgz?cache=0&sync_timestamp=1596019866852&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fportfinder%2Fdownload%2Fportfinder-1.0.28.tgz",
@@ -9137,6 +9166,11 @@
       "integrity": "sha1-PPNwI9GZ4cJNGlW4SADC8+ZGgDE=",
       "dev": true
     },
+    "rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/rangetouch/download/rangetouch-2.0.1.tgz",
+      "integrity": "sha1-wBEFEQ/Tr8oq3LGlgGkoN9iDy3A="
+    },
     "raw-body": {
       "version": "2.4.0",
       "resolved": "https://registry.npm.taobao.org/raw-body/download/raw-body-2.4.0.tgz",
@@ -10786,6 +10820,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-polyfill": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npm.taobao.org/url-polyfill/download/url-polyfill-1.1.10.tgz?cache=0&sync_timestamp=1595231728048&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Furl-polyfill%2Fdownload%2Furl-polyfill-1.1.10.tgz",
+      "integrity": "sha1-/Vu89myUkfpoKwy21qhV4WQ6koE="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "axios": "^0.20.0",
     "element-ui": "^2.13.2",
     "parallax-js": "^3.1.0",
+    "plyr": "^3.6.2",
     "qs": "^6.9.4",
     "swiper": "^6.2.0",
     "vue": "^2.5.2",

src/App.vue

@@ -37,4 +37,7 @@ export default {
   width: 1200px;
   margin: 0 auto;
 }
+:root {
+  --plyr-color-main: #2dc7aa !important;
+}
 </style>

src/components/video/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <video ref='plyr'
+           class='c-plyr'
+           :style="{'width':width+'px','height':height+'px'}"
+           controls
+           autoplay
+           :src="src"
+           loop>
+    </video>
+  </div>
+</template>
+<script>
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+export default {
+  props: ['width', 'height', 'src'],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    let plyr = new Plyr(this.$refs.plyr)
+    console.log(plyr)
+  },
+  watch: {
+    src (val) {
+      console.log(val)
+      console.log(this.width, this.height)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/.c-plyr {
+  --plyr-color-main: #2dc7aa !important;
+}
+</style>

src/views/index/blocks/infos.vue

@@ -12,8 +12,8 @@
         <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>
@@ -37,7 +37,7 @@
           <template v-if="active === 3">
             <div>
               <p class="desc">线上化招考流程极大<strong>节省考级成本</strong></p>
-              <safe/>
+              <safe />
             </div>
           </template>
         </transition>
@@ -69,99 +69,108 @@ export default {
     efficient,
     zero,
   },
-  data() {
+  data () {
     return {
       active: 4
     }
   },
   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-to,
-  .fade-leave{
-    visibility: visible;
-    opacity: 1;
+.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;
   }
-  .container{
-    height: 958px;
-    background-color: #F6F7F9;
+  &.first::before {
+    left: 105px;
   }
-  .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;
-    }
+  &::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

@@ -64,20 +64,23 @@
           <div class="videoWrap"
                v-if="activeRow.width <= 352">
             <div class="textWrap">{{activeRow.text}}</div>
-            <video :src="activeRow.src"
-                   :width="activeRow.width"
-                   autoplay
-                   controls
-                   loop></video>
+            <plyr :width='activeRow.width'
+                  :height="activeRow.height"
+                  :src="activeRow.src" />
           </div>
           <div v-else
                class="videoWrap1">
             <p>{{activeRow.text}}</p>
-            <video :src="activeRow.src"
+            <plyr :width='activeRow.width'
+                  :height="activeRow.height"
+                  :src="activeRow.src" />
+            <!-- <video playsinline
+                   controls
+                   :src="activeRow.src"
                    :width="activeRow.width"
+                   :height="activeRow.height"
                    autoplay
-                   controls
-                   loop></video>
+                   loop></video> -->
           </div>
         </div>
       </div>
@@ -86,7 +89,12 @@
 </template>
 <script>
 import { vaidoJson } from '../../project/video'
+import plyr from '@/components/video'
+
 export default {
+  components: {
+    plyr
+  },
   data () {
     return {
       activeNum: 1,
@@ -198,6 +206,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: '考试当天评委登录“酷乐秀”评委端进行考级评审，通过在线直播视频对报考考生进行考核，评委端可查看考生准考证、报考曲目等信息，保证考试的次序与规范并对考生进行专业点评。' }],
 }