09/07 16:25

111

src/components/headerSection.vue

@@ -23,7 +23,8 @@
           <router-link :class="checkActive==4?'active':''"
                        @click.native="change(4)"
                        :to="{ path: '/aboutUs' }">关于我们</router-link>
-          <div class="bandBtn">合作机构</div>
+          <div class="bandBtn"
+               @click="goKu">合作机构</div>
         </div>
       </div>
     </div>
@@ -65,6 +66,9 @@ export default {
   methods: {
     change (num) {
       this.checkActive = num;
+    },
+    goKu () {
+      window.open('https://kj.colexiu.com/#/login?returnUrl=%2F', '_blank');
     }
   }
 }

src/views/aboutUs/index.vue

@@ -9,13 +9,24 @@
         <p>酷乐秀是武汉市景明云乐科技有限公司研发的专为为全国音乐等级考试和音乐比赛提供线上服务，是全国首家拥有音乐类专业直播技术的服务平台。独有“音乐演奏模式”高保真还原乐器演奏的现场感及音色，为远程视频直播、录播考级提供技术支持，考生可通过酷乐秀实现考级完整生命周期。同步还原线下考级场景，为合作机构和考生提供公平公正，省时省力的考试体验。</p>
         <p>酷乐秀提供全流程线上考级方案，考生可通过酷乐秀APP实现线上报名缴费，远程视频直播录播考试，查询考试结果流程。合作机构通过管理后台完成前期推广，线上考试，数据统计等，让合作机构轻松运营。 </p>
         <p>景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才 ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行二十多万课时。</p>
-        <img src='@/assets/images/aboutUs/about.png' width="100%" alt />
+        <img src='@/assets/images/aboutUs/about.png'
+             width="100%"
+             alt />
       </div>
     </div>
+    <silder :showForm='showForm' />
   </div>
 </template>
 <script>
-export default {};
+import silder from '@/components/silder.vue'
+export default {
+  components: { silder },
+  data () {
+    return {
+      showForm: false
+    }
+  }
+};
 </script>
 <style lang="less" scoped>
 .topBanner {
@@ -53,8 +64,8 @@ export default {};
       line-height: 50px;
       margin-bottom: 78px;
     }
-    p{
-         font-size: 16px;
+    p {
+      font-size: 16px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #1a1a1a;

src/views/consult/index.vue

@@ -44,11 +44,13 @@
         </div>
       </div>
     </div>
-
+    <silder :showForm='showForm' />
   </div>
 </template>
 <script>
+import silder from '@/components/silder.vue'
 export default {
+  components: { silder },
   data () {
     return {};
   },

src/views/index/index.vue

@@ -4,10 +4,11 @@
       <!-- <img src="@/assets/images/topBanner.png"
            alt=""
            width="100%"> -->
-           <div class="width1200 goinWrap" >
-             <div class="goinBox" @click="showForm = true">立即入驻</div>
-           </div>
-      
+      <div class="width1200 goinWrap">
+        <div class="goinBox"
+             @click="showForm = true">立即入驻</div>
+      </div>
+
     </div>
     <div class="inner width1200">
       <div class="goodList">
@@ -39,19 +40,19 @@
         <div class="suggestList">
           <div class="suggestItem "
                :class="suggestIndex ===1?'active':''"
-               @click="suggestIndex=1">
+               @mouseover="suggestIndex=1">
             <div class="suggestTitle">在线报名</div>
             <div class="msg">考生在线报名，考级信息一手掌握</div>
           </div>
           <div class="suggestItem"
                :class="suggestIndex ===2?'active':''"
-               @click="suggestIndex=2">
+               @mouseover="suggestIndex=2">
             <div class="suggestTitle">高品质直播考场</div>
             <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div>
           </div>
           <div class="suggestItem"
                :class="suggestIndex ===3?'active':''"
-               @click="suggestIndex=3">
+               @mouseover="suggestIndex=3">
             <div class="suggestTitle">在线录播</div>
             <div class="msg">录播考试兼容各种考试场景</div>
           </div>
@@ -79,7 +80,7 @@
       </div>
     </div>
     <div class="inner2">
-      <div class="width1200" >
+      <div class="width1200">
         <div class="titleWrap">
           <img src="@/assets/images/title2.png"
                width="100%"
@@ -89,13 +90,13 @@
           <div class="suggestList">
             <div class="suggestItem "
                  :class="mapIndex ===1?'active':''"
-                 @click="mapIndex=1">
+                 @mouseover="mapIndex=1">
               <div class="suggestTitle">生源拓展</div>
               <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
             </div>
             <div class="suggestItem"
                  :class="mapIndex ===2?'active':''"
-                 @click="mapIndex=2">
+                 @mouseover="mapIndex=2">
               <div class="suggestTitle">考级生命周期</div>
               <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
             </div>
@@ -128,13 +129,13 @@
         <div class="suggestList">
           <div class="suggestItem "
                :class="onlineIndex ===1?'active':''"
-               @click="onlineIndex=1">
+               @mouseover="onlineIndex=1">
             <div class="suggestTitle">直播互动</div>
             <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
           </div>
           <div class="suggestItem"
                :class="onlineIndex ===2?'active':''"
-               @click="onlineIndex=2">
+               @mouseover="onlineIndex=2">
             <div class="suggestTitle">在线评审</div>
             <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
           </div>
@@ -194,8 +195,9 @@
       </div>
 
     </div>
-    <silder :showForm='showForm' @changeStatus='changeStatus'/>
-    
+    <silder :showForm='showForm'
+            @changeStatus='changeStatus' />
+
   </div>
 </template>
 <script>
@@ -209,12 +211,12 @@ export default {
       suggestIndex: 1,
       mapIndex: 1,
       onlineIndex: 1,
-      showForm:false
-     
+      showForm: false
+
     }
   },
-  methods:{
-    changeStatus(val){
+  methods: {
+    changeStatus (val) {
       this.showForm = val;
     }
   }
@@ -230,25 +232,24 @@ img {
   background-repeat: no-repeat;
   position: relative;
   height: 465px;
-.goinWrap { position: relative;
-height: 465px;
-.goinBox {
-    width: 150px;
-    height: 44px;
-    background: #2dc7aa;
-    border-radius: 4px;
-    line-height: 44px;
-    font-size: 16px;
-    color: #ffffff;
-    position: absolute;
-    left: 0;
-    bottom: 147px;
-    cursor: pointer;
+  .goinWrap {
+    position: relative;
+    height: 465px;
+    .goinBox {
+      width: 150px;
+      height: 44px;
+      background: #2dc7aa;
+      border-radius: 4px;
+      line-height: 44px;
+      font-size: 16px;
+      color: #ffffff;
+      position: absolute;
+      left: 0;
+      bottom: 147px;
+      cursor: pointer;
+    }
   }
 }
-  
- 
-}
 .inner {
   display: flex;
   flex-direction: column;

src/views/project/index.vue

@@ -32,6 +32,7 @@
                    width="352"
                    height="640"
                    autoplay
+                   controls
                    loop></video>
           </div>
           <div class="infoItem">
@@ -39,6 +40,7 @@
                    width="352"
                    height="640"
                    autoplay
+                   controls
                    loop></video>
             <h3>考级曲谱提前练习</h3>
           </div>
@@ -48,6 +50,7 @@
                    width="352"
                    height="640"
                    autoplay
+                   controls
                    loop></video>
           </div>
           <div class="infoItem">
@@ -55,6 +58,7 @@
                    width="352"
                    height="640"
                    autoplay
+                   controls
                    loop></video>
             <h3>录播考试满足多种场景</h3>
           </div>
@@ -64,16 +68,80 @@
                    width="352"
                    height="640"
                    autoplay
+                   controls
+                   loop></video>
+          </div>
+        </div>
+      </div>
+      <div class="serverList  width1200 videoList"
+           v-show='activeNum=== 2'>
+        <h2>为机构提供客制化平台，可自主设置考试相关基础维度。对考级项目，分支机构进行管理，将全流程数据及信息形成数据分析报表，方便管理促进经营</h2>
+        <div class="serversList">
+          <div class="serverItem">
+            <h3>基础维度配置</h3>
+            <video src="@/assets/video/base.mp4"
+                   width="704px"
+                   autoplay
+                   controls
+                   loop></video>
+          </div>
+          <div class="serverItem">
+            <h3>考级项目维护</h3>
+            <video src="@/assets/video/maintain.mp4"
+                   width="704px"
+                   autoplay
+                   controls
+                   loop></video>
+          </div>
+          <div class="infoItem">
+            <h3>考生在线报名</h3>
+            <video src="@/assets/video/onlineSign.mp4"
+                   width="352"
+                   height="640"
+                   autoplay
+                   controls
+                   loop></video>
+          </div>
+          <div class="serverItem">
+            <h3>考生信息查询</h3>
+            <video src="@/assets/video/info.mp4"
+                   width="704px"
+                   autoplay
+                   controls
+                   loop></video>
+          </div>
+          <div class="serverItem">
+            <h3>考试结果维护</h3>
+            <video src="@/assets/video/result.mp4"
+                   width="704px"
+                   autoplay
+                   controls
+                   loop></video>
+          </div>
+        </div>
+      </div>
+      <div class="serverList  width1200 videoList"
+           v-show='activeNum=== 3'>
+        <h2>为机构提供客制化平台，可自主设置考试相关基础维度。对考级项目，分支机构进行管理，将全流程数据及信息形成数据分析报表，方便管理促进经营</h2>
+        <div class="serversList">
+          <div class="serverItem">
+            <h3>基础维度配置</h3>
+            <video src="@/assets/video/base.mp4"
+                   width="1280px"
+                   autoplay
+                   controls
                    loop></video>
           </div>
         </div>
       </div>
     </div>
-
+    <silder :showForm='showForm' />
   </div>
 </template>
 <script>
+import silder from '@/components/silder.vue'
 export default {
+  components: { silder },
   data () {
     return {
       activeNum: 1
@@ -180,18 +248,31 @@ export default {
     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%;
-      }
+
+  .infoItem {
+    margin-top: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 704px;
+    h3 {
+      text-align: center;
+      width: 100%;
+    }
+  }
+}
+.serversList {
+  .serverItem {
+    margin-top: 30px;
+    h3 {
+      margin-bottom: 30px;
+      height: 40px;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #000000;
+      line-height: 40px;
     }
   }
 }