提交测试

1

src/components/Mheader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id='headerSection'>
     <van-nav-bar
       :fixed="true"
       :border="false"

src/router/index.js

@@ -3,6 +3,11 @@ import Router from 'vue-router'
 import Index from '@/views/index'
 import aboutUs from '@/views/aboutUs'
 import project from '@/views/project'
+import level from  '@/views/level'
+import detile1 from '@/views/level/detile1.vue'
+import detile2 from '@/views/level/detile2.vue'
+import detile3 from '@/views/level/detile3.vue'
+import detile4 from '@/views/level/detile4.vue'
 //detile1
 
 Vue.use(Router)
@@ -30,6 +35,31 @@ export default new Router({
       name: 'project',
       component: project
     },
+    {
+      path: '/level',
+      name: 'level',
+      component: level
+    },
+    {
+      path: '/detile1',
+      name: 'detile1',
+      component: detile1
+    },
+    {
+      path: '/detile2',
+      name: 'detile2',
+      component: detile2
+    },
+    {
+      path: '/detile3',
+      name: 'detile3',
+      component: detile3
+    },
+    {
+      path: '/detile4',
+      name: 'detile4',
+      component: detile4
+    },
   ]
 })
 

src/views/index/blocks/banner.vue

@@ -126,6 +126,7 @@
 <script>
 import Bus from "./eventBus";
 import Parallax from 'parallax-js'
+
 export default {
   name: "banner",
   mounted(){

src/views/index/blocks/minMoreLogin.vue

@@ -46,7 +46,6 @@
 import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
 import Swiper2, { Navigation, Pagination } from "swiper";
 Swiper2.use([Navigation, Pagination]);
-// import 'swiper/swiper.scss'
 import "swiper/swiper-bundle.css";
 export default {
   components: {

src/views/index/blocks/recommend.vue

@@ -4,85 +4,122 @@
     <div class="recommendDetail width1200">
       <el-tabs v-model="activeName" stretch>
         <el-tab-pane label="器乐练习云教练" name="1">
-          <div class="commendItem" >
+          <div class="commendItem" @click="openVideo">
             <div class="commendItemLeft animate__animated animate__slideInLeft">
-              <h4 class="commendTitle">器乐练习云教练</h4>
+              <h4 class="commendTitle">
+                器乐练习云教练
+                <img class="player" src="../images/player.png" alt="" />
+              </h4>
               <p>
                 拥有完全自主知识产权的器乐练习云教练，具有五线谱自动转化，五线谱跟播，演奏指法跟播，演奏速度自定义，原音/伴奏一键切换等辅助练习功能。智能评测功能，通过演奏音频采集与标准曲谱比对，实时提供智能点评报告，自动提示练习对错，让学生和家长能够及时发现乐器练习过程中存在的问题，提高练习效率，可谓是学生学习乐器的“随身教练”。
               </p>
             </div>
-            <div class="commendItemRight animate__animated animate__slideInRight">
+            <div
+              class="commendItemRight animate__animated animate__slideInRight"
+            >
               <img src="../images/commendItem1.png" alt="" />
             </div>
           </div>
         </el-tab-pane>
         <el-tab-pane label="器乐直播云教室" name="2">
-               <div class="commendItem" >
+          <div class="commendItem">
             <div class="commendItemLeft animate__animated animate__slideInLeft">
               <h4 class="commendTitle">器乐直播云教室</h4>
               <p>
                 全国首家线教学场景，高保真技术，智能降噪音质高度还原。白板互动教学，内置白板书写工具；自有教学资源共享教学，本地曲谱上传，能够为学员提供线下教学体验不到的便利。
               </p>
             </div>
-            <div class="commendItemRight animate__animated animate__slideInRight">
+            <div
+              class="commendItemRight animate__animated animate__slideInRight"
+            >
               <img src="../images/commendItem2.png" alt="" />
             </div>
           </div>
         </el-tab-pane>
         <el-tab-pane label="器乐直播云考场" name="3">
-               <div class="commendItem" >
+          <div class="commendItem" @click="gotoXiu">
             <div class="commendItemLeft animate__animated animate__slideInLeft">
-              <h4 class="commendTitle">器乐直播云考场</h4>
+              <h4 class="commendTitle">
+                器乐直播云考场<img
+                  class="player"
+                  src="../images/arrow2.png"
+                  alt=""
+                />
+              </h4>
               <p>
                 器乐考级监考评分一体化平台，线上考级全流程覆盖，信息化赋能打造全流程线上考级模式。随时随地保证用户数据安全，打破时间空间限制将考级生命周期（招考-排考-考核-统计-制证-结算）完整呈现。
               </p>
             </div>
-            <div class="commendItemRight animate__animated animate__slideInRight">
+            <div
+              class="commendItemRight animate__animated animate__slideInRight"
+            >
               <img src="../images/commendItem3.png" alt="" />
             </div>
           </div>
         </el-tab-pane>
         <el-tab-pane label="客制化教材汇编" name="4">
-               <div class="commendItem" >
+          <div class="commendItem">
             <div class="commendItemLeft animate__animated animate__slideInLeft">
               <h4 class="commendTitle">客制化教材汇编</h4>
               <p>
-                客制化各机构的教学教案，汇编成电子文本教材 ，多媒体教材，音视频动态指法联动展示。提高机构教学质量，增强教学特色；
+                客制化各机构的教学教案，汇编成电子文本教材
+                ，多媒体教材，音视频动态指法联动展示。提高机构教学质量，增强教学特色；
               </p>
             </div>
-            <div class="commendItemRight animate__animated animate__slideInRight">
+            <div
+              class="commendItemRight animate__animated animate__slideInRight"
+            >
               <img src="../images/commendItem4.png" alt="" />
             </div>
           </div>
         </el-tab-pane>
         <el-tab-pane label="全闭环网校平台" name="5">
-               <div class="commendItem" >
+          <div class="commendItem">
             <div class="commendItemLeft animate__animated animate__slideInLeft">
               <h4 class="commendTitle">全闭环网校平台</h4>
               <p>
                 为器乐教学机构打造保护私域流量的独立网校平台，覆盖前端招生、课前、授课、课后服务等全流程管理，能够极大地提升运营及管理的效率以及服务质量；总览招生、教务、财务、员工概况及变化趋势，多维度衡量招生情况、续费率，精准统计课时及学费消耗，实时了解机构日常经营情况；
               </p>
             </div>
-            <div class="commendItemRight animate__animated animate__slideInRight">
+            <div
+              class="commendItemRight animate__animated animate__slideInRight"
+            >
               <img src="../images/commendItem5.png" alt="" />
             </div>
           </div>
         </el-tab-pane>
         <el-tab-pane label="全流程教务管理" name="6">
-               <div class="commendItem" >
+          <div class="commendItem">
             <div class="commendItemLeft animate__animated animate__slideInLeft">
               <h4 class="commendTitle">全流程教务管理</h4>
               <p>
-                学员到期、欠费、剩余课时等信息一目了然.智能检测排课冲突，自动生成对应课程表.即时通讯自动生成群组 ，实时跟进教学进度，促进回款转化。
+                学员到期、欠费、剩余课时等信息一目了然.智能检测排课冲突，自动生成对应课程表.即时通讯自动生成群组
+                ，实时跟进教学进度，促进回款转化。
               </p>
             </div>
-            <div class="commendItemRight animate__animated animate__slideInRight">
+            <div
+              class="commendItemRight animate__animated animate__slideInRight"
+            >
               <img src="../images/commendItem6.png" alt="" />
             </div>
           </div>
         </el-tab-pane>
       </el-tabs>
     </div>
+
+    <div class="fiedxVideoWrap" v-if="dialogVisible">
+      <van-icon name="cross" size="30" class='close-i' @click="()=>{ dialogVisible=false}"/>
+
+      <video
+        poster="../images/videoBG.png"
+        src="https://daya.ks3-cn-beijing.ksyun.com/202108/Sf6bUfZ.mp4"
+        controls="controls"
+        class="video"
+      ></video>
+    </div>
+    <!-- <el-dialog :visible.sync="dialogVisible" width="840px" title="乐器云教练">
+
+    </el-dialog> -->
   </div>
 </template>
 <script>
@@ -90,16 +127,34 @@ export default {
   data() {
     return {
       activeName: "1",
+      dialogVisible: false,
     };
   },
+  methods: {
+    gotoXiu() {
+      //
+      // window.open("https://www.colexiu.com/#/");
+      this.$router.push("/level");
+    },
+    openVideo() {
+      console.log("点击");
+      this.dialogVisible = true;
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
+/deep/.el-dialog {
+  text-align: left;
+  .el-dialog__body {
+    padding-top: 0px;
+  }
+}
 .recommend {
   position: relative;
   background-color: #f4f5f7;
- padding-top: 40px;
- padding-bottom: 30px;
+  padding-top: 40px;
+  padding-bottom: 30px;
   .bg {
     width: 100%;
     height: 830px;
@@ -128,12 +183,34 @@ export default {
   /deep/.el-tabs__active-bar {
     background-color: #01c1b5;
   }
+  .fiedxVideoWrap {
+    position: fixed;
+    width: 800px;
+    height: 450px;
+    top:50%;
+    left: 50%;
+    margin-top: -225px;
+    margin-left: -400px;
+    z-index: 2500;
+    .close-i {
+      color: #fff;
+      position: absolute;
+      right: 12px;
+      top: 12px;
+       z-index: 2501;
+       &:hover {
+         opacity: .8;
+       }
+    }
+  }
+  .video {
+    width: 800px;
+  }
   .recommendDetail {
     // position: absolute;
     // left: 50%;
     // margin-left: -590px;
 
-
     top: 60px;
     .commendItem {
       margin-top: 60px;
@@ -141,6 +218,8 @@ export default {
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
+
+
       .commendItemLeft {
         width: 492px;
         text-align: left;
@@ -151,6 +230,17 @@ export default {
           color: #000000;
           line-height: 41px;
           margin-bottom: 30px;
+          display: flex;
+          align-items: center;
+          .player {
+            width: 30px;
+            height: 27px;
+            margin-left: 10px;
+            cursor: pointer;
+            &:hover {
+                  opacity: .8;
+            }
+          }
         }
         p {
           font-size: 14px;

src/views/index/index.vue

@@ -19,6 +19,7 @@
 }
 </style>
 <script>
+
 import { isMobile } from "@/util";
 import helpList from "./blocks/helpList.vue";
 import banner from "./blocks/banner";

src/views/index/minIndex.vue

@@ -31,8 +31,11 @@
     <div class="cloundList">
       <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
         <swiper-slide class="swiper-slide">
-          <div class="cloundItem">
-            <h4>器乐练习云教练</h4>
+          <div class="cloundItem" @click="openVideo">
+            <h4>
+              器乐练习云教练
+              <img class="player" src="./images/player.png" alt="" />
+            </h4>
             <img src="./images/commendItem1.png" alt="" />
             <p class="concat">
               你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
@@ -49,8 +52,14 @@
           </div>
         </swiper-slide>
         <swiper-slide class="swiper-slide">
-          <div class="cloundItem">
-            <h4>器乐直播云考场</h4>
+          <div class="cloundItem" @click="gotoXiu">
+            <h4>
+              器乐直播云考场<img
+                class="player"
+                src="./images/arrow2.png"
+                alt=""
+              />
+            </h4>
             <img src="./images/commendItem3.png" alt="" />
             <p class="concat">
               器乐考级监考评分一体化平台，线上考级全流程覆盖，信息化赋能打造全流程线上考级模式。随时随地保证用户数据安全，打破时间空间限制将考级生命周期（招考-排考-考核-统计-制证-结算）完整呈现。
@@ -95,6 +104,33 @@
       <h2>了解<span>更多</span></h2>
       <minForm />
     </div>
+
+    <van-overlay
+      z-index="2500"
+      :show="showVideo"
+      @click="showVideo = false"
+      class-name="videoWrap"
+    >
+      <div class="wrapper">
+        <div class="block" @click.stop>
+          <i
+            role="button"
+            @click="showVideo = false"
+            tabindex="0"
+            class="
+              van-icon van-icon-cross
+              van-popup__close-icon van-popup__close-icon--top-right
+            "
+          ></i>
+          <video
+            poster="./images/videoBG.png"
+            src="https://daya.ks3-cn-beijing.ksyun.com/202108/Sf6bUfZ.mp4"
+            controls="controls"
+            class="video"
+          ></video>
+        </div>
+      </div>
+    </van-overlay>
   </div>
 </template>
 <script>
@@ -126,9 +162,20 @@ export default {
           delay: 1000,
         },
       },
+      showVideo: false,
     };
   },
   mounted() {},
+  methods: {
+    gotoXiu() {
+      //
+      this.$router.push("/level");
+      // window.open("https://www.colexiu.com/#/");
+    },
+    openVideo() {
+      this.showVideo = true;
+    },
+  },
   computed: {
     swiper() {
       return this.$refs.oneSwiper.$swiper;
@@ -144,6 +191,25 @@ export default {
   background-color: #c8c8c8 !important;
   opacity: 1;
 }
+.videoWrap {
+  .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+  .block {
+    width: 100%;
+    position: relative;
+    // /deep/.van-popup__close-icon{
+    //   color: #fff;
+    // }
+    .video {
+      width: 100%;
+      display: block;
+    }
+  }
+}
 img {
   display: block;
 }
@@ -207,7 +273,7 @@ img {
 .cloundList {
   background-color: #f4f5f7;
   .cloundItem {
-    padding: 0.5rem .5rem .8rem;
+    padding: 0.5rem 0.5rem 0.8rem;
     h4 {
       width: 100%;
       font-size: 0.38rem;
@@ -215,6 +281,18 @@ img {
       color: #000000;
       line-height: 53px;
       text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .player {
+        width: 0.3rem;
+        height: 0.27rem;
+        margin: 0 0 0 0.1rem;
+        cursor: pointer;
+      }
+      .player.active {
+        opacity: 0.8;
+      }
     }
     img {
       width: 6.5rem;

src/views/level/blocks/aboutUs.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="aboutWrap">
+    <h2>关于酷乐秀</h2>
+    <div class="detailWrap">
+      <div class="text">
+        <p>酷乐秀是武汉市景明云乐网络科技有限公司专为全国音乐等级考试和音乐类比赛研发的服务平台。为合作机构提供远程视频直播、录播考级的技术支持，独创“音乐演奏模式”高度还原乐器演奏的现场感及音色。同步还原线下考级场景，让合作机构和考生公平公正，省时省力的通过酷乐秀实现考级完整生命周期。 </p>
+        <p>景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才 ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行三十多万课时。</p>
+      </div>
+      <img src="../images/about.png"
+           width="400px"
+           height="237px"
+           alt="">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.aboutWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #fff;
+  padding-bottom: 200px;
+  h2 {
+    height: 48px;
+    line-height: 48px;
+    color: #2c2c2c;
+    margin: 73px 0 87px;
+    font-weight: 500;
+    font-size: 34px;
+  }
+  .detailWrap {
+    width: 1000px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .text {
+      width: 540px;
+      color: #626262;
+      line-height: 28px;
+      font-size: 15px;
+      p {
+        text-align: left;
+        text-indent: 30px;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+</style>

src/views/level/blocks/banner.vue

@@ -0,0 +1,131 @@
+<template>
+  <header class="banner">
+    <div class="content width1200">
+      <div>
+        <img
+          class="animate__animated animate__fadeInDown"
+          src="../images/topTitle.png"
+          width="959"
+          alt=""
+        />
+      </div>
+      <div>
+        <img
+          class="animate__animated animate__fadeInDown delay-300ms"
+          src="../images/bottomTitle.png"
+          width="628"
+          alt=""
+        />
+      </div>
+      <div class="buttonWrap">
+        <!-- <div class="animate__animated animate__fadeInDown delay-600ms button join "
+             @click="joinIn">立即入驻</div> -->
+        <div
+          class="
+            animate__animated animate__fadeInDown
+            delay-600ms
+            button
+            goinBox
+          "
+          @click="gotoDetail"
+        >
+          考生指引
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+<style lang="less" scoped>
+.delay-300ms {
+  animation-delay: 0.3s;
+}
+.delay-600ms {
+  animation-delay: 0.6s;
+}
+.banner {
+  background: url("../images/banner.png") no-repeat center;
+  background-color: #2a2c41;
+  background-size: cover;
+  height: 763px;
+  .content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    color: rgba(255, 255, 255, 0.8);
+    > div {
+      padding-top: 30px;
+      overflow: hidden;
+      margin-top: -6px;
+    }
+    h3 {
+      margin-top: 30px;
+    }
+    .buttonWrap {
+      padding-top: 0;
+    }
+    .join {
+      display: inline-block;
+      width: 150px;
+      height: 46px;
+      // margin: 0 auto;
+      margin-top: 56px;
+      margin-right: 8px;
+      line-height: 46px;
+      font-size: 16px;
+      background: #2dc7aa;
+      border: 1px solid #2dc7aa;
+      width: 184px;
+      height: 46px;
+      color: #ffffff;
+      cursor: pointer;
+      &:hover {
+        background-color: #2ac0a3;
+      }
+    }
+    .goinBox {
+      display: inline-block;
+      width: 150px;
+      height: 46px;
+      // margin: 0 auto;
+      margin-top: 56px;
+      margin-right: 12px;
+      line-height: 46px;
+      font-size: 16px;
+      width: 184px;
+      height: 46px;
+      border: 1px solid #c5c5c5;
+      color: #ffffff;
+      cursor: pointer;
+      &:hover {
+        background-color: #2dc7aa;
+        border: 1px solid #2dc7aa;
+      }
+    }
+  }
+}
+</style>
+<script>
+import Bus from "./eventBus";
+import { scrollAnimation } from "@/util/scroll";
+export default {
+  name: "banner",
+  methods: {
+    joinIn() {
+      Bus.$emit("joinIn", true);
+    },
+    gotoDetail() {
+      // Bus.$emit('gotoDetail')
+      let url = this.$route.path;
+      let top = document.getElementById("detail").offsetTop - 70;
+      const currentY =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      scrollAnimation(currentY, top);
+      // scrollTo(0, top);
+    },
+  },
+};
+</script>

src/views/level/blocks/consult.vue

@@ -0,0 +1,518 @@
+<template>
+  <div class="consult">
+    <div class="mask">
+      <h2>行业资讯</h2>
+      <div class="maskCore">
+        <!-- <div class="client-love-work">
+          <div class="swiper">
+            <swiper ref="mySwiper"
+                    class="current-swiper"
+                    :options="swiperOptions">
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(1)">
+                  <img src="../images/consult1.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>承办单位和定点机构有什么区别</h4>
+                    <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(2)">
+                  <img src="../images/consult2.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
+                    <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(3)">
+                  <img src="../images/consult3.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>十级琴霸的备考建议</h4>
+                    <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(4)">
+                  <img src="../images/consult4.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>音乐等艺术等科目纳入“新中考”</h4>
+                    <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+            </swiper>
+            <div class="swiper-button-next swiper-button-white"
+                 @click="onNext"
+                 slot="button-next"></div>
+            <div class="swiper-button-prev swiper-button-white"
+                 @click="onPrev"
+                 slot="button-prev"></div>
+
+            <swiper ref="leftSwiper"
+                    class="left-swiper"
+                    :options="leftOptions">
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(4)">
+                  <img src="../images/consult4.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>音乐等艺术等科目纳入“新中考”</h4>
+                    <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(1)">
+                  <img src="../images/consult1.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>承办单位和定点机构有什么区别</h4>
+                    <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(2)">
+                  <img src="../images/consult2.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
+                    <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(3)">
+                  <img src="../images/consult3.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>十级琴霸的备考建议</h4>
+                    <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+            </swiper>
+
+            <swiper ref="rightSwiper"
+                    class="right-swiper"
+                    :options="rightOptions">
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(2)">
+                  <img src="../images/consult2.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
+                    <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(3)">
+                  <img src="../images/consult3.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>十级琴霸的备考建议</h4>
+                    <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(4)">
+                  <img src="../images/consult4.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>音乐等艺术等科目纳入“新中考”</h4>
+                    <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+              <swiper-slide>
+                <div class="textItem"
+                     @click="gotoDetail(1)">
+                  <img src="../images/consult1.png"
+                       alt=""
+                       width="369px">
+                  <div class="textWrap">
+                    <h4>承办单位和定点机构有什么区别</h4>
+                    <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+                  </div>
+                </div>
+              </swiper-slide>
+            </swiper>
+          </div>
+        </div> -->
+        <swiper ref="rightSwiper"
+                class="right-swiper"
+                :options="rightOptions">
+          <swiper-slide class="swiper-slide">
+            <div class="textItem"
+                 @click="gotoDetail(2)">
+              <img src="../images/consult2.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
+                <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
+              </div>
+            </div>
+          </swiper-slide>
+          <swiper-slide class="swiper-slide">
+            <div class="textItem"
+                 @click="gotoDetail(3)">
+              <img src="../images/consult3.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>十级琴霸的备考建议</h4>
+                <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
+              </div>
+            </div>
+          </swiper-slide>
+          <swiper-slide class="swiper-slide">
+            <div class="textItem"
+                 @click="gotoDetail(4)">
+              <img src="../images/consult4.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>音乐等艺术等科目纳入“新中考”</h4>
+                <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
+              </div>
+            </div>
+          </swiper-slide>
+          <swiper-slide class="swiper-slide">
+            <div class="textItem"
+                 @click="gotoDetail(1)">
+              <img src="../images/consult1.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>承办单位和定点机构有什么区别</h4>
+                <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+              </div>
+            </div>
+          </swiper-slide>
+          <!-- <swiper-slide class="swiper-slide">
+            <div class="textItem"
+                 @click="gotoDetail(5)">
+              <img src="../images/consult5.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>收好你的考级证书，它可能是你考入名校的垫脚石！</h4>
+                <p>2020年暑期考级刚刚结束，相信很多琴童都已经拿到了考级证书，记得把你们的证书收好，它们将在你高考时有大用处！</p>
+              </div>
+            </div>
+          </swiper-slide> -->
+        </swiper>
+        <div class="prev"
+             @click="onPrev"></div>
+        <!--    -->
+        <div class="next"
+             @click="onNext"></div>
+      </div>
+
+    </div>
+  </div>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
+// import 'swiper/swiper.scss'
+import 'swiper/swiper-bundle.css'
+export default {
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  data () {
+    return {
+      // swiperOptions: {
+      //   loop: true,
+      //   allowTouchMove: false
+      // },
+      // leftOptions: {
+      //   loop: true,
+      //   allowTouchMove: false
+      // },
+      rightOptions: {
+        watchSlidesProgress: true,
+        slidesPerView: "auto",
+        centeredSlides: true,
+        allowTouchMove: false,
+        loop: true,
+        autoplay: false,
+
+        on: {
+          progress: function () {
+            for (let i = 0; i < this.slides.length; i++) {
+              let modify = 1;
+              var slide = this.slides.eq(i);
+              var slideProgress = this.slides[i].progress;
+              if (Math.abs(slideProgress) > 1) {
+                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
+              }
+              let translate = slideProgress * modify * 130 + "px";
+              let scale = 1 - Math.abs(slideProgress) / 9;
+              let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
+              slide.transform(
+                "translateX(" + translate + ") scale(" + scale + ")"
+              );
+              slide.css("zIndex", zIndex);
+              slide.css("opacity", 1);
+              if (Math.abs(slideProgress) > 1) {
+                slide.css("opacity", 0);
+              }
+            }
+          },
+          setTransition: function (swiper, transition) {
+            for (var i = 0; i < this.slides.length; i++) {
+              var slide = this.slides.eq(i);
+              slide.transition(transition);
+            }
+          }
+        }
+      }
+    }
+  },
+  mounted () {
+  },
+  computed: {
+    // swiper () {
+    //   return this.$refs.mySwiper.$swiper
+    // },
+    // leftSwiper () {
+    //   return this.$refs.leftSwiper.$swiper
+    // },
+    rightSwiper () {
+      return this.$refs.rightSwiper.$swiper
+    }
+  },
+  methods: {
+    onNext () {
+      // this.swiper.slideNext();
+      // this.leftSwiper.slideNext()
+      this.rightSwiper.slideNext()
+    },
+    onPrev () {
+      // this.swiper.slidePrev();
+      // this.leftSwiper.slidePrev();
+      this.rightSwiper.slidePrev();
+    },
+    gotoDetail (num) {
+      let newpage = this.$router.resolve({
+        name: `detile${num}`,
+      });
+      window.open(newpage.href, '_blank');
+    },
+    prev () {
+      this.$refs.carousel.prev();
+    },
+    next () {
+      this.$refs.carousel.next();
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.consult {
+  background: url("../images/consult_bg.png") no-repeat center;
+  background-size: cover;
+  background-position: top center;
+  background-attachment: fixed;
+  .mask {
+    padding: 101px 0 252px 0;
+    background-color: rgba(0, 0, 0, 0);
+    overflow: hidden;
+    height: 745px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    h2 {
+      height: 48px;
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 48px;
+      margin-bottom: 78px;
+    }
+    .maskCore {
+      width: 960px;
+      position: relative;
+      .swiper-slide {
+        width: 369px;
+      }
+      .textItem {
+        width: 369px;
+        height: 414px;
+        background-color: #fff;
+        cursor: pointer;
+        .textWrap {
+          padding: 24px 24px 48px;
+          h4 {
+            width: 100%;
+            height: 25px;
+            font-size: 18px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 600;
+            color: #1a1a1a;
+            line-height: 25px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin-bottom: 24px;
+            overflow: hidden;
+          }
+          p {
+            text-align: left;
+            color: #808080;
+            line-height: 20px;
+            height: 63px;
+            font-size: 14px;
+            overflow: hidden;
+          }
+        }
+      }
+      .prev {
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        background: url("../images/arrow.png") no-repeat center;
+        background-size: 40px 40px;
+        left: -115px;
+        top: 190px;
+        transform: rotate(180deg);
+        cursor: pointer;
+        &:hover {
+          background: url("../images/active-arrow.png") no-repeat center;
+          background-size: 40px 40px;
+        }
+      }
+      .next {
+        cursor: pointer;
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        background: url("../images/arrow.png") no-repeat center;
+        background-size: 40px 40px;
+        right: -115px;
+        top: 190px;
+        &:hover {
+          background: url("../images/active-arrow.png") no-repeat center;
+          background-size: 40px 40px;
+        }
+      }
+    }
+  }
+}
+
+// .client-love-work {
+//   .swiper {
+//     max-width: 1200px;
+//     margin: 0 auto 40px;
+//     position: relative;
+//     .swiper-container {
+//       width: 369px;
+//       height: 414px;
+//       // border-radius: 8px;
+//       position: relative;
+//       z-index: 99;
+//       box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+//     }
+//     .left-swiper,
+//     .right-swiper {
+//       position: absolute;
+//       z-index: 1;
+//       transform: scale(0.85);
+//       opacity: 0.7;
+//       .swiper-slide {
+//         .swiper-box {
+//           background: rgba(0, 0, 0, 0.7);
+//         }
+//       }
+//     }
+//     .left-swiper {
+//       left: 0;
+//       top: 0;
+//       // img {
+//       //     left: 0;
+//       // }
+//     }
+//     .right-swiper {
+//       top: 0;
+//       right: 0;
+//       // img {
+//       //     right: 0;
+//       // }
+//     }
+//   }
+//   .swiper-slide {
+//     position: relative;
+//     overflow: hidden;
+//     .swiper-box {
+//       position: absolute;
+//       top: 0;
+//       left: 0;
+//       width: 100%;
+//       height: 100%;
+//       text-align: center;
+//       background: rgba(0, 92, 185, 0.7);
+//     }
+//   }
+//   .swiper-button-prev,
+//   .swiper-button-next {
+//     cursor: pointer;
+//     position: absolute;
+//     width: 40px;
+//     height: 40px;
+//     background: url("../images/arrow.png") no-repeat center;
+//     background-size: 40px 40px;
+//     right: -115px;
+//     top: 190px;
+//     &:hover {
+//       background: url("../images/active-arrow.png") no-repeat center;
+//       background-size: 40px 40px;
+//     }
+//     &::after {
+//       content: "";
+//     }
+//   }
+//   .swiper-button-prev {
+//     left: -115px;
+//     top: 190px;
+//     transform: rotate(180deg);
+//   }
+// }
+</style>

src/views/level/blocks/detail.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="container">
+    <ol class="detail items width1200">
+      <h2>考生指引</h2>
+      <li>1.考前请确认下载“酷乐秀”最新版本APP。</li>
+      <li>2.打开“酷乐秀”APP后需要允许“酷乐秀”APP使用手机权限。</li>
+      <li>3.已通过H5链接报名的考生首次登录“酷乐秀”APP请使用短信验证码登录。</li>
+      <li>4.请使用“网络检测”、“设备检测”功能确保您所使用的考试网络环境与手机设备处在能够完成直播考试的状态。</li>
+      <li>5.考试当天请确保考试时保证网络通畅、手机不要开启其他应用，保证手机中有至少2G存储空间。</li>
+      <li>6.考生需在考试当天通过“准考证”进入考场进行签到。</li>
+      <li>7.进入考场后，点击【设备检查及考试引导】再次对网络、手机进行检测，并仔细阅读【考试引导】。</li>
+      <li>8.签到完成后请仔细阅读【考试注意事项】，底部按钮会显示当前您还需要等待多少位考生和预计等待时间，请随时注意底部按钮的文字和颜色变化。</li>
+      <li>9.当您的网络出现波动，影响直播考试时，评委会切换到下一位考生继续考试，您需要根据系统提示点击【确定】，再次进行设备检查及【考试引导】，确认网络状况正常后重新进行【签到】，重新排队等待考试。</li>
+      <li>10.直播考试若网络状况较差时，评审会要求您使用【录播】完成考试，系统会提示您【当前状态无法正常完成在线直播考试，主考官建议您录播上传考试视频】，请根据提示点击【去录播】。</li>
+      <li>11.进入录播界面后仔细阅读系统指引，在录播规定时间内完成视频录制并上传，点击【完成考试】后不可继续录制视频，请确认完成所有考级曲目录制后点击【完成考试】，考试结束。</li>
+    </ol>
+    <div class="width1200">
+      <div class="otherWrap">
+        <a :href="src"
+           target="_blank">查看更多 ></a>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+<script>
+
+export default {
+
+  data () {
+    return {
+      src: require('@/assets/matters.pdf'), // pdf文件地址
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+<style lang="less" scoped>
+.container {
+  background: url("../images/detail.png") no-repeat center;
+  background-size: cover;
+  background-attachment: fixed;
+  color: #fff;
+  height: 847px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  .otherWrap {
+    width: 100%;
+    margin-top: 25px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-left: 100px;
+    a {
+      // color: #2dc7aa;
+      color: #fff;
+      text-decoration: none;
+      &:hover {
+        // color: #25ab92;
+        color: #cecece;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+.detail {
+  width: 1084px;
+  margin: 75px auto 0;
+
+  h2 {
+    text-align: center;
+    font-size: 34px;
+    line-height: 48px;
+    margin-bottom: 42px;
+    font-weight: 500;
+  }
+  &.items {
+    padding-left: 40px;
+    li {
+      display: block;
+      text-align: left;
+      font-size: 15px;
+      line-height: 34px;
+      margin-bottom: 20px;
+      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
+    }
+  }
+  a {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+}
+</style>

src/views/level/blocks/eventBus.js

@@ -0,0 +1,2 @@
+import Vue from 'Vue'
+export default new Vue

src/views/level/blocks/infos.vue

@@ -0,0 +1,182 @@
+<template>
+  <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>
+      </header>
+      <div class="content">
+        <transition name="fade">
+          <template v-if="active === 0">
+            <div>
+              <p class="desc first">信息化赋能打造<strong>全流程线上考级模式</strong><br />随时随地保证用户数据安全，<strong>打破时间空间限制</strong>将考级生命周期完整呈现</p>
+              <lifecycle />
+            </div>
+          </template>
+        </transition>
+        <transition name="fade">
+          <template v-if="active === 1">
+            <div>
+              <p class="desc">招考<strong>不受地域限制</strong>，支持多层级代理单位，拓展生源</p>
+              <viewmap />
+            </div>
+          </template>
+        </transition>
+        <transition name="fade">
+          <template v-if="active === 2">
+            <div>
+              <p class="desc">考级全流程节点跟进，<strong>极大提升管理效率</strong></p>
+              <efficient />
+            </div>
+          </template>
+        </transition>
+        <transition name="fade">
+          <template v-if="active === 3">
+            <div>
+              <p class="desc">线上化招考流程极大<strong>节省考级成本</strong></p>
+              <safe />
+            </div>
+          </template>
+        </transition>
+        <transition name="fade">
+          <template v-if="active === 4">
+            <div>
+              <p class="desc"><strong>零投入</strong>，平台研发完善可立即使用</p>
+              <zero />
+            </div>
+          </template>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import viewmap from '@/components/map'
+import lifecycle from '@/components/lifecycle'
+import safe from '@/components/safe'
+import efficient from '@/components/efficient'
+import zero from '@/components/zero'
+
+export default {
+  name: 'infos',
+  components: {
+    viewmap,
+    lifecycle,
+    safe,
+    efficient,
+    zero,
+  },
+  data () {
+    return {
+      active:  0
+    }
+  },
+  methods: {
+    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 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;
+  }
+  &.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 {
+      margin-left: 50px;
+      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: 12%;
+        width: 80%;
+        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 {
+  // }
+}
+</style>

src/views/level/blocks/minConsult.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="minConsult">
+    <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
+      <swiper-slide class="swiper-slide">
+        <div class="minMoreLogin" >
+          <h2>行业资讯</h2>
+          <div class="textItem"  @click="gotoDetail(1)">
+            <img src="../images/consult1.png" />
+            <div class="textWrap">
+              <h4>承办单位和定点机构有什么区别</h4>
+              <p>
+                “承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。
+              </p>
+            </div>
+          </div>
+        </div>
+      </swiper-slide>
+      <swiper-slide class="swiper-slide">
+        <div class="minMoreLogin">
+          <h2>行业资讯</h2>
+          <div class="textItem"  @click="gotoDetail(2)">
+            <img src="../images/consult2.png" />
+            <div class="textWrap">
+              <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
+              <p>
+                你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
+              </p>
+            </div>
+          </div>
+        </div>
+      </swiper-slide>
+      <swiper-slide class="swiper-slide">
+        <div class="minMoreLogin">
+          <h2>行业资讯</h2>
+          <div class="textItem" @click="gotoDetail(3)">
+            <img src="../images/consult3.png" />
+            <div class="textWrap">
+              <h4>十级琴霸的备考建议</h4>
+              <p>
+                考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告，
+                赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。
+              </p>
+            </div>
+          </div>
+        </div>
+      </swiper-slide>
+      <swiper-slide class="swiper-slide">
+        <div class="minMoreLogin">
+          <h2>行业资讯</h2>
+          <div class="textItem" @click="gotoDetail(4)">
+            <img src="../images/consult4.png" />
+            <div class="textWrap">
+              <h4>音乐等艺术等科目纳入“新中考”</h4>
+              <p>
+                2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。
+              </p>
+            </div>
+          </div>
+        </div>
+      </swiper-slide>
+      <div class="swiper-pagination" slot="pagination"></div>
+    </swiper>
+  </div>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import Swiper2, { Navigation, Pagination } from "swiper";
+Swiper2.use([Navigation, Pagination]);
+import "swiper/swiper-bundle.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  data() {
+    return {
+      swiperOptions: {
+        pagination: {
+          el: ".swiper-pagination",
+        },
+        loop: true,
+        autoplay: {
+          disableOnInteraction: true,
+          delay: 1000,
+        },
+      },
+    };
+  },
+  methods:{
+        gotoDetail (num) {
+      // let newpage = this.$router.resolve({
+      //   name: `detile${num}`,
+      // });
+      // window.open(newpage.href, '_blank');
+      this.$router.push(`/detile${num}`)
+    },
+  },
+  computed: {
+    swiper() {
+      return this.$refs.oneSwiper.$swiper;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.minConsult {
+  background: url("../images/minConsult.png") no-repeat center;
+  background-size: 7.5rem 8.72rem;
+  height: 8.72rem;
+  padding-top: 0.5rem;
+  .minMoreLogin {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 1.5rem;
+
+    h2 {
+      text-align: center;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 0.64rem;
+      font-size: 0.38rem;
+      margin-bottom: 0.3rem;
+    }
+    .textItem {
+      background-color: #fff;
+      width: 5.13rem;
+      min-height: 5.3rem;
+      img {
+        width: 100%;
+        display: block;
+      }
+      .textWrap {
+        padding: 0.3rem 0.25rem 0.43rem;
+        h4 {
+          font-size: 0.26rem;
+          color: #1a1a1a;
+          line-height: 0.4rem;
+          text-align: center;
+          margin-bottom: 0.2rem;
+        }
+        p {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          font-size: 0.22rem;
+              color: grey;
+              line-height: .38rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/level/blocks/minDetail.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="minDetali">
+    <h2>考生指引</h2>
+    <ol class="detail items">
+      <li>1.考前请确认下载“酷乐秀”最新版本APP。</li>
+      <li>2.打开“酷乐秀”APP后需要允许“酷乐秀”APP使用手机权限。</li>
+      <li>3.已通过H5链接报名的考生首次登录“酷乐秀”APP请使用短信验证码登录。</li>
+      <li>
+        4.请使用“网络检测”、“设备检测”功能确保您所使用的考试网络环境与手机设备处在能够完成直播考试的状态。
+      </li>
+      <li>
+        5.考试当天请确保考试时保证网络通畅、手机不要开启其他应用，保证手机中有至少2G存储空间。
+      </li>
+      <li>6.考生需在考试当天通过“准考证”进入考场进行签到。</li>
+      <li>
+        7.进入考场后，点击【设备检查及考试引导】再次对网络、手机进行检测，并仔细阅读【考试引导】。
+      </li>
+      <li>
+        8.签到完成后请仔细阅读【考试注意事项】，底部按钮会显示当前您还需要等待多少位考生和预计等待时间，请随时注意底部按钮的文字和颜色变化。
+      </li>
+      <li>
+        9.当您的网络出现波动，影响直播考试时，评委会切换到下一位考生继续考试，您需要根据系统提示点击【确定】，再次进行设备检查及【考试引导】，确认网络状况正常后重新进行【签到】，重新排队等待考试。
+      </li>
+      <li>
+        10.直播考试若网络状况较差时，评审会要求您使用【录播】完成考试，系统会提示您【当前状态无法正常完成在线直播考试，主考官建议您录播上传考试视频】，请根据提示点击【去录播】。
+      </li>
+      <li>
+        11.进入录播界面后仔细阅读系统指引，在录播规定时间内完成视频录制并上传，点击【完成考试】后不可继续录制视频，请确认完成所有考级曲目录制后点击【完成考试】，考试结束。
+      </li>
+    </ol>
+    <div class="otherWrap">
+      <a :href="src" target="_blank">查看更多 ></a>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      src: require("@/assets/matters.pdf"),
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+.minDetali {
+  height: 8.42rem;
+  background: url("../images/minDetailBg.png") no-repeat;
+  background-size: 7.5rem 8.42rem;
+  padding-top: 0.5rem;
+  padding: 0.5rem 0.34rem 1.5rem;
+  position: relative;
+  h2 {
+    margin-bottom: 0.3rem;
+    font-size: 0.38rem;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 0.53rem;
+    text-align: center;
+  }
+  .detail {
+    padding-top: 0.2rem;
+    height: 5.8rem;
+    overflow: scroll;
+    padding-bottom: 0.2rem;
+    li {
+      margin-bottom: 0.46rem;
+      font-size: 0.22rem;
+      line-height: 0.42rem;
+      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
+      color: #fff;
+      &:nth-last-child(1) {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .otherWrap {
+    position: absolute;
+    bottom: 0.74rem;
+    left: 0.34rem;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 0.15rem;
+    font-size: 0.22rem;
+    a {
+      // color: #2dc7aa;
+      color: #fff;
+      text-decoration: none;
+      :active {
+        opacity: .8;
+      }
+    }
+
+  }
+}
+</style>

src/views/level/blocks/minLife.vue

@@ -0,0 +1,182 @@
+<template>
+  <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
+    <swiper-slide class="swiper-slide">
+      <div class="minLife">
+        <h2>考级生命周期</h2>
+        <p class="subTitle">
+          信息化赋能打造<strong>全流程线上考级模式，</strong
+          ><br />随时随地保证用户数据安全，<br /><strong
+            >打破时间空间限制</strong
+          >将考级生命周期完整呈现
+        </p>
+        <div class="cloundItem">
+          <img src="../images/life.png" alt="" />
+        </div>
+      </div>
+    </swiper-slide>
+    <swiper-slide class="swiper-slide">
+      <div class="minLife">
+        <h2>生源拓展</h2>
+        <p class="subTitle one get">
+          招考<strong>不受地域限制， </strong>
+          支持多层级代理单位，拓展生源
+        </p>
+        <div class="cloundItem">
+          <img src="../images/life2.png" alt="" />
+        </div>
+      </div>
+    </swiper-slide>
+    <swiper-slide class="swiper-slide">
+      <div class="minLife">
+        <h2>高效管理</h2>
+        <p class="subTitle one height">
+          考级全流程节点跟进，<strong>极大提升管理效率 </strong>
+        </p>
+        <div class="cloundItem">
+          <img src="../images/life3.png" alt="" />
+        </div>
+      </div>
+    </swiper-slide>
+    <swiper-slide class="swiper-slide">
+      <div class="minLife">
+        <h2>节省成本</h2>
+        <p class="subTitle one cost">
+          线上化招考流程极大<strong>节省考级成本</strong>
+        </p>
+        <div class="cloundItem">
+          <img src="../images/life4.png" alt="" />
+        </div>
+      </div>
+    </swiper-slide>
+    <swiper-slide class="swiper-slide">
+      <div class="minLife">
+        <h2>零投入使用</h2>
+        <p class="subTitle one cost">
+          <strong>零投入</strong>
+          ，平台研发完善可立即使用
+        </p>
+        <div class="cloundItem">
+          <img src="../images/life5.png" alt="" />
+        </div>
+      </div>
+    </swiper-slide>
+    <div class="swiper-pagination" slot="pagination"></div>
+  </swiper>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import Swiper2, { Navigation, Pagination } from "swiper";
+Swiper2.use([Navigation, Pagination]);
+import "swiper/swiper-bundle.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  data() {
+    return {
+      swiperOptions: {
+        pagination: {
+          el: ".swiper-pagination",
+        },
+        loop: true,
+        autoplay: {
+          disableOnInteraction: true,
+          delay: 1000,
+        },
+      },
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.oneSwiper.$swiper;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.swiper-pagination {
+  bottom: 0.6rem !important;
+}
+.minLife {
+  background-color: #fff;
+  height: 9.85rem;
+  padding-top: 0.5rem;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  h2 {
+    font-size: 0.38rem;
+    font-weight: 600;
+    color: #000000;
+    line-height: 0.53rem;
+    text-align: center;
+  }
+  .subTitle.one {
+    line-height: 0.42rem;
+  }
+
+  .height.subTitle,
+  .cost.subTitle {
+    &::before {
+      top: 0;
+      left: -0.13rem;
+      position: absolute;
+      display: block;
+      content: "";
+      background: url("../images/icon.png") no-repeat center;
+      background-size: cover;
+      width: 0.4rem;
+      height: 0.4rem;
+    }
+  }
+  .get.subTitle {
+    &::before {
+      top: 0;
+      left: -.08rem;
+      position: absolute;
+      display: block;
+      content: "";
+      background: url("../images/icon.png") no-repeat center;
+      background-size: cover;
+      width: 0.4rem;
+      height: 0.4rem;
+    }
+  }
+  .subTitle {
+    max-width: 4.6rem;
+    // height: 1.28rem;
+    position: relative;
+    font-size: 0.22rem;
+    line-height: 0.42rem;
+    color: #696969;
+    display: inline-block;
+    margin: 0.4rem auto 0.3rem;
+    text-align: center;
+    > strong {
+      color: #2dc7aa;
+      font-weight: normal;
+    }
+    &::before {
+      top: 0;
+      left: 0.1rem;
+      position: absolute;
+      display: block;
+      content: "";
+      background: url("../images/icon.png") no-repeat center;
+      background-size: cover;
+      width: 0.4rem;
+      height: 0.4rem;
+    }
+  }
+  .cloundItem {
+    img {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/level/blocks/showApp.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="showApp">
+    <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
+      <swiper-slide class="swiper-slide">
+        <div class="appItem">
+          <p class="msg">
+            <span>信息提醒：</span>
+            考生通过H5报名链接完成考级报名后，便可使用报名时填写的手机号码登录“酷乐秀”APP，登陆后进入“考级曲库”可查看报考项目中您所报名考试的制定曲目及相关曲谱，便于在考前准备时进行练习。
+          </p>
+          <div class="cloundItem">
+            <video
+              class="videoH"
+              src="@/assets/video/student-remind.mp4"
+                poster="@/assets/video/student-remind.jpg"
+              controls
+            ></video>
+          </div>
+        </div>
+      </swiper-slide>
+      <swiper-slide class="swiper-slide">
+        <div class="appItem">
+          <p class="msg">
+            <span>曲谱查询：</span>
+            考生通过H5报名链接完成考级报名后，便可使用报名时填写的手机号码登录“酷乐秀”APP，登陆后进入“考级曲库”可查看报考项目中您所报名考试的制定曲目及相关曲谱，便于在考前准备时进行练习。
+          </p>
+          <div class="cloundItem">
+            <video
+              class="videoH"
+              src="@/assets/video/text.mp4"
+                poster="@/assets/video/student-remind.jpg"
+              controls
+            ></video>
+          </div>
+        </div>
+      </swiper-slide>
+      <swiper-slide class="swiper-slide">
+        <div class="appItem">
+          <p class="msg">
+            <span>直播考试：</span>
+            考试当天通过“准考证”进入等待考试界面，点击“签到”按钮进行考试签到。签到后考生需排队等待考试呼叫，请注意观察还是等待人数及预计等待时间。当系统呼叫您进入考场时，按钮会变为绿色闪烁状态，请及时点击按钮进入考场，不要让评委等待多时。
+          </p>
+          <div class="cloundItem">
+            <video
+              class="videoH"
+               poster="@/assets/video/replay.jpg"
+              src="@/assets/video/replay.mp4"
+              controls
+            ></video>
+          </div>
+        </div>
+      </swiper-slide>
+      <swiper-slide class="swiper-slide">
+        <div class="appItem">
+          <p class="msg">
+            <span>录播考试：</span>
+            当直播考试时出现网络状态不稳定的情况，评委会要求考生过同录播视频完成考试，请根据屏幕上的提示信息进入录播考试界面，按照录播考试要求一次完成曲目的录制与上传。
+          </p>
+          <div class="cloundItem">
+            <video
+              class="videoH"
+                poster="@/assets/video/onlineText.jpg"
+              src="@/assets/video/onlineText.mp4"
+              controls
+            ></video>
+          </div>
+        </div>
+      </swiper-slide>
+            <swiper-slide class="swiper-slide">
+        <div class="appItem">
+          <p class="msg">
+            <span>结果查询：</span>
+            完成考试后，请等待主办方统计考试结果。考试结果确认后，系统会发送消息推送提醒您考试结果已经生成，请登录“酷乐秀”APP，在首页中点击“考试记录”查看您的考试结果。也可通过该界面回顾您的考试视频。
+          </p>
+          <div class="cloundItem">
+            <video
+            poster="@/assets/video/query.jpg"
+              class="videoH"
+              src="@/assets/video/query.mp4"
+              controls
+            ></video>
+          </div>
+        </div>
+      </swiper-slide>
+      <div class="swiper-pagination" slot="pagination"></div>
+    </swiper>
+  </div>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import Swiper2, { Navigation, Pagination } from "swiper";
+Swiper2.use([Navigation, Pagination]);
+import "swiper/swiper-bundle.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  data() {
+    return {
+      swiperOptions: {
+        pagination: {
+          el: ".swiper-pagination",
+        },
+        loop: true,
+        autoplay: {
+          disableOnInteraction: true,
+          delay: 1000,
+        },
+      },
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.oneSwiper.$swiper;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.showApp {
+  padding-top: 0.58rem;
+    /deep/.swiper-pagination {
+      bottom:.4rem;
+    }
+  .appItem {
+    padding-bottom: 1.5rem;
+    .msg {
+      font-size: 0.22rem;
+      font-weight: 400;
+      color: #808080;
+      line-height: 0.42rem;
+      padding: 0 0.6rem;
+      height:2.1rem;
+      span {
+        font-weight: bold;
+        color: #000;
+      }
+    }
+    .cloundItem {
+      .videoH {
+        width: 3.4rem;
+        display: block;
+        margin: 0.3rem auto 0;
+      }
+    }
+  }
+}
+</style>

src/views/level/blocks/videoList.vue

@@ -0,0 +1,301 @@
+<template>
+  <div style="min-height:850px;background-color: #f6f7f9;">
+    <div class='projectWrap'
+         v-if="activeRow">
+      <div class="projectList width1200">
+        <div class="left">
+          <el-menu @open="changeType"
+                   class="projectInfoWrap"
+                   default-active="1-0"
+                   unique-opened>
+            <el-submenu index="1">
+              <template slot="title">
+                <p class="title">酷乐秀考生APP </p>
+              </template>
+              <el-menu-item v-for="(item,index) in vaidoJson.app"
+                            class="subtitle"
+                            :index="'1-'+index"
+                            :key="index"
+                            :class="activeRow.id===item.id?'active':''"
+                            @click='activeRow = item'>{{item.title}} </el-menu-item>
+
+            </el-submenu>
+            <!-- <el-submenu index="2">
+              <template slot="title">
+                <p class="title">酷乐秀管理端 </p>
+              </template>
+              <el-menu-item v-for="(item,index) in vaidoJson.admin"
+                            class="subtitle"
+                            :index="'2'+index"
+                            :key="index"
+                            :class="activeRow.id===item.id?'active':''"
+                            @click='activeRow = item'>{{item.title}} </el-menu-item>
+            </el-submenu> -->
+            <el-submenu index=3>
+              <template slot="title">
+                <p class="title">酷乐秀评委端 </p>
+              </template>
+              <el-menu-item v-for="(item,index) in vaidoJson.teacher"
+                            :index="'3'+index"
+                            :key="index"
+                            class="subtitle"
+                            :class="activeRow.id===item.id?'active':''"
+                            @click='activeRow = item'>{{item.title}} </el-menu-item>
+            </el-submenu>
+          </el-menu>
+          <!-- <el-collapse @change='changeType'
+                       class="projectInfoWrap"
+                       v-model="activeList"
+                       accordion>
+            <el-collapse-item name="app">
+              <template slot="title">
+                <p class="title">酷乐秀考生APP </p>
+              </template>
+              <p v-for="(item,index) in vaidoJson.app"
+                 :key="index"
+                 :class="activeRow.id===item.id?'active':''"
+                 @click='activeRow = item'>{{item.title}} </p>
+
+            </el-collapse-item>
+            <el-collapse-item name="admin">
+              <template slot="title">
+                <p class="title">酷乐秀管理端 </p>
+              </template>
+              <p v-for="(item,index) in vaidoJson.admin"
+                 :key="index"
+                 :class="activeRow.id===item.id?'active':''"
+                 @click='activeRow = item'>{{item.title}} </p>
+            </el-collapse-item>
+            <el-collapse-item name="teacher">
+              <template slot="title">
+                <p class="title">酷乐秀评委端 </p>
+              </template>
+              <p v-for="(item,index) in vaidoJson.teacher"
+                 :key="index"
+                 :class="activeRow.id===item.id?'active':''"
+                 @click='activeRow = item'>{{item.title}} </p>
+            </el-collapse-item>
+          </el-collapse> -->
+        </div>
+        <div class="right">
+          <h2>{{activeRow.title}}</h2>
+          <div class="videoWrap"
+               v-if="activeRow.width <= 352">
+            <div class="textWrap">{{activeRow.text}}</div>
+            <plyr :width='activeRow.width'
+                  :height="activeRow.height"
+                  :src="activeRow.src" />
+          </div>
+          <div v-else
+               class="videoWrap1">
+            <p>{{activeRow.text}}</p>
+            <plyr :width='activeRow.width'
+                  :height="activeRow.height"
+                  :src="activeRow.src" />
+            <!-- <video playsinline
+                   controls
+                   :src="activeRow.src"
+                   :width="activeRow.width"
+                   :height="activeRow.height"
+                   autoplay
+                   loop></video> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { vaidoJson } from '../../project/video'
+import plyr from '@/components/video'
+import { scrollAnimation } from '@/util/scroll'
+export default {
+  components: {
+    plyr
+  },
+  data () {
+    return {
+      activeNum: 1,
+      vaidoJson,
+      activeRow: null,
+      activeList: '1'
+    }
+  },
+  mounted () {
+    this.activeRow = vaidoJson.app[0]
+  },
+  methods: {
+    changeType (val) {
+      // const currentY = document.documentElement.scrollTop || document.body.scrollTop;
+      // let top = (document.getElementById('videoList').offsetTop - 76) + (document.getElementById('videoList').scrollTop)
+      // scrollAnimation(currentY, top)
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+/deep/.el-collapse-item__wrap {
+  border-bottom: none !important;
+}
+/deep/.el-menu-item,
+/deep/.el-submenu__title {
+  height: 70px;
+  line-height: 70px;
+}
+.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;
+  }
+
+  .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;
+    }
+  }
+}
+// 新版本
+.projectWrap {
+  background-color: #f6f7f9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 790px;
+  section {
+    border-top: 1px solid #e9e9e9;
+    &:nth-child(1) {
+      border-top: none;
+    }
+  }
+}
+.projectList {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin: 80px 0 60px;
+  min-height: 790px;
+  .left {
+    background-color: #fff;
+    margin-right: 20px;
+    width: 220px;
+
+    border-top: none;
+    .title {
+      height: 70px;
+      line-height: 70px;
+      // border-top: 1px solid #e9e9e9;
+      border-bottom: none;
+      cursor: pointer;
+      font-size: 20px;
+      font-weight: 500;
+      text-align: left;
+      width: 100%;
+      // padding: 0 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      font-weight: 600;
+      color: #1a1a1a;
+      &:nth-child(1) {
+        border-top: none;
+      }
+      .el-icon-arrow-right {
+        line-height: 70px;
+      }
+    }
+    .active {
+      background-color: #2dc7aa;
+      color: #fff;
+      font-size: 16px;
+    }
+    .subtitle {
+      height: 60px;
+      line-height: 60px;
+      cursor: pointer;
+      padding-left: 30px;
+      text-align: left;
+      font-size: 16px;
+    }
+  }
+  .right {
+    background-color: #fff;
+    width: 800px;
+    padding: 0 30px 30px;
+    h2 {
+      color: #1a1a1a;
+      margin-bottom: 50px;
+      line-height: 70px;
+      text-align: left;
+      font-size: 20px;
+      border-bottom: 1px solid #e9e9e9;
+    }
+    .videoWrap {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-items: flex-start;
+      .textWrap {
+        width: 315px;
+        margin-right: 73px;
+        min-height: 450px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #808080;
+        line-height: 25px;
+        text-align: left;
+      }
+    }
+    .videoWrap1 {
+      p {
+        margin-bottom: 30px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #808080;
+        line-height: 25px;
+        text-align: left;
+      }
+    }
+  }
+  /deep/.el-collapse {
+    border-top: none !important;
+  }
+  /deep/.el-collapse-item__header {
+    height: 70px !important;
+    line-height: 70px !important;
+  }
+  /deep/.el-collapse-item__content {
+    padding-bottom: 0 !important;
+  }
+}
+</style>

src/views/level/detile1.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="container" :class="isPhone ? 'min' : ''">
+    <div class="wall" v-if="isPhone"></div>
+    <div class="msgWrap">
+      <h2>承办单位和定点机构有什么区别？</h2>
+      <p>
+        “承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。
+      </p>
+      <p>
+        “定点机构”是指与文化和旅游部艺术发展中心考级中心在各地的艺术考级承办单位合作的艺术相关机构，悬挂牌匾由文化和旅游部艺术发展中心考级中心统一规制，各地承办单位按照统一的编号规则颁发。
+      </p>
+      <p>
+        目前，文化和旅游部艺术发展中心在各地的艺术考级相关机构悬挂牌匾只有“考级办公室或考级委员会”和“定点机构”两种规制。
+      </p>
+      <p class="bottom">来源：文化和旅游部艺术发展中心考级中心</p>
+    </div>
+  </div>
+</template>
+<script>
+import { isMobile } from "@/util";
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    isPhone() {
+      return isMobile();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .msgWrap {
+    width: 1000px;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 70px auto 244px;
+    padding: 66px 75px;
+    text-align: left;
+    h2 {
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 48px;
+      margin-bottom: 90px;
+    }
+    p {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 36px;
+      margin-bottom: 30px;
+      text-indent: 32px;
+    }
+    .bottom {
+      text-align: right;
+    }
+  }
+}
+
+.min.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .wall {
+    height: 1rem;
+    width: 100%;
+    background-color: #002F33;
+  }
+  .msgWrap {
+    width: 100%;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 0 auto 0;
+    padding: 0.33rem 0.38rem;
+    text-align: left;
+    h2 {
+      font-size: .38rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: .64rem;
+      margin-bottom: .5rem;
+    }
+    p {
+      font-size: .28rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: .5rem;
+      margin-bottom: .3rem;
+      text-indent: .56rem;
+    }
+    .bottom {
+      text-align: right;
+    }
+  }
+}
+</style>

src/views/level/detile2.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="container" :class="isPhone ? 'min' : ''">
+       <div class="wall" v-if="isPhone"></div>
+    <div class="msgWrap">
+      <h2>乐器演奏不清晰不连贯的原因有哪些？</h2>
+      <p>
+        你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？
+        <br />答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
+        <br />不管你学的是管乐、弦乐还是弹拨乐，演奏不清晰不流畅的根本原因都一样，主要有以下几个方面：
+        <br />
+      </p>
+      <h4>一、不善于慢练</h4>
+      <p>
+        很多快速的跑动乐句没经过一音一句的慢练过程。这是造成旋律含混不清，导致音乐磕磕碰碰的重要原因。我们都知道慢工出细活，可编编有人性子急不愿意慢，把原本慢的曲子也弹得快，快的曲子则弹得更快，怎么会不出现问题？乐曲也好，练习曲也罢，首要任务是把每个音都交代清楚，如果中板速度奏不清楚，就要减速为慢板，慢板还弹不清就再减为甚慢板……总之不要怕慢，要敢于慢条斯理，不管它原始速度多少，不然弹得乱七八糟，弹得定型就难得改过来了。
+      </p>
+      <h4>二、不注意指法</h4>
+      <p>
+        甚至自己瞎编乱造。指法也是乐句连贯的保证，要穿指的时候你不穿，你去跳；该扩指的地方你不扩，也去跳，那不结巴才怪呢！你是初学者，没资格无能力编制个人指法，必须尊重科学，老老实实按曲谱标注指法演奏才是。
+      </p>
+      <h4>三、不练练习曲</h4>
+      <p>
+        或练习曲练得很少，致使手指独立性灵活性差。乐曲弹得顺，旋律拉得畅，显然和手指机能密切相关，而手指功能良好与否，有赖于基本功训练，大量练习曲的练习。许多乐器学习者，喜欢一味弹奏流行歌曲，不重视基本功，不重视手指机能，以致于老是给听众呈现混浊的曲调还蒙在鼓里。
+      </p>
+      <p>
+        虽然还有其他原因，如音位调性不熟悉，双手配合不协调，大脑反映较迟钝等等，但上述三条才是最主要最常见的原因。希望广大乐器自学者和初学者，对照以上条目，查找影响自己演奏清晰度、流畅性和连贯性的毛病与陋习，有针对性地进行整改，促使个人的技能训练尽可能正规，从而不断提高个人的演奏水平。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isMobile } from "@/util";
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    isPhone() {
+      return isMobile();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .msgWrap {
+    width: 1000px;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 70px auto 244px;
+    padding: 66px 75px;
+    text-align: left;
+    h2 {
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 48px;
+      margin-bottom: 90px;
+    }
+    p {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 36px;
+      margin-bottom: 30px;
+      text-indent: 32px;
+    }
+    .bottom {
+      text-align: right;
+    }
+  }
+}
+
+.min.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .wall {
+    height: 1rem;
+    width: 100%;
+    background-color: #002f33;
+  }
+  .msgWrap {
+    width: 100%;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 0 auto 0;
+    padding: 0.33rem 0.38rem;
+    text-align: left;
+    h2 {
+      font-size: 0.38rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 0.64rem;
+      margin-bottom: 0.5rem;
+    }
+    h4,
+    h5 {
+      font-size: 0.34rem;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 0.45rem;
+      margin-bottom: 0.3rem;
+    }
+    p {
+      font-size: 0.28rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 0.5rem;
+      margin-bottom: 0.3rem;
+      text-indent: 0.56rem;
+    }
+    .bottom {
+      text-align: right;
+    }
+  }
+}
+</style>

src/views/level/detile3.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="container" :class="isPhone ? 'min' : ''">
+     <div class="wall" v-if="isPhone"></div>
+    <div class="msgWrap">
+      <h2>十级琴霸的备考建议，考级琴童人手一份！</h2>
+      <p>
+        考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告，
+        赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。
+      </p>
+      <h5>正在备战考级的同学们注意啦！</h5>
+      <p>
+        >如果考级曲目中还有一首没练好，建议在未来的一个月中每天坚持3、4小时以上的练琴时间。
+        <br />如果有两首，那么请你沉迷于练琴，不可自拔
+        <br />曲子都已经练好了的同学，每天也需要两个小时的巩固练习
+      </p>
+      <img src="./images/consult3.png" alt="" width="100%" />
+      <p>
+        如果考级前仅剩的一个多月的宝贵时间，最重要的是制定合理的练琴计划，规划好练琴时间和进度。我们先来做一个粗略的计算：
+      </p>
+      <p></p>
+      <h5>
+        考
+        1-3级的孩子把考级曲目加上基本练习从头到尾演奏一遍的时间大概在需要15分钟，
+        4-7级的孩子需要20-25分钟，8-10级则要30分钟。
+      </h5>
+      <p>
+        甚至自己瞎编乱造。指法也是乐句连贯的保证，要穿指的时候你不穿，你去跳；该扩指的地方你不扩，也去跳，那不结巴才怪呢！你是初学者，没资格无能力编制个人指法，必须尊重科学，老老实实按曲谱标注指法演奏才是。
+      </p>
+      <p>
+        在考级之前，提高练琴效率是关键，尤其每周回课后的总结十分必要。<span
+          >课后先花20分钟的时间整理一下思路，才能达到事半功倍的效果！</span
+        >
+        这二十分钟要做些什么？下面这张思维导图告诉你。
+      </p>
+      <img src="./images/infoImg.jpg" alt="" width="100%" />
+      <p>
+        除了提高练琴效率外，还要保证大量的练琴时间，并明确考级的要求，不能盲目练习。
+      </p>
+      <h4>一、完整性</h4>
+      <p>
+        完整性指的是考级的所有曲目都能从头到尾完整地演奏下来，几乎没有不连贯、忘谱的情况出现。
+        完整性是演奏音乐最基本的要求。
+        演奏时出现中途间断、不连贯的情况有以下几个原因：第一是技术不过关，在演奏难点片段的时候习惯性中断；第二是背谱不熟练，在演奏中忘谱也是造成不连贯的因素之一；第三是因为紧张的情绪造成思维反应迟钝甚至混乱，从而影响到手指的运动。
+      </p>
+      <h4>二、准确性</h4>
+      <p>
+        准确性不仅仅指的是音高和节奏，它还包括速度、音乐风格、情感把握等方面的准确性。
+        准确性首先要求在练习的过程中不能粗心大意，其次在老师的纠正和引导下做出正确的练习，最后在考试过程中牢记自己经常会出现的错误，尽量避免。
+      </p>
+      <h4>三、技巧性</h4>
+      <p>
+        每首考级作品都会有需要考察的技术难点，
+        技术难点是在考试中的一个重要评分项，也是钢琴技术水平的重要体现。
+        在练习一首作品时，一定要明确作品的技术难点。
+        慢练，是解决技术难点最有效的方法，
+        在慢练的过程中要注意指法、手型、手指触键方式等的正确性，然后慢慢加速，最终克服技术难点。
+      </p>
+      <h4>四、音乐性</h4>
+      <p>
+        音乐性包括对乐句乐段的划分，强弱起伏以及风格的把握等方面。对于音乐性最好的训练方法就多听。孩子对音乐的理解层面还比较浅显，甚至只能做出最基本的强弱变化，多欣赏音乐家们的演奏可以提升他们对音乐的认知。但对于即将面临考级的孩子来说，就需要非常有针对性地多听考试曲目，结合老师上课所传授的内容，理解音乐中的情感。
+      </p>
+      <img src="./images/infoImg1.png" alt="" width="100%" />
+      <p>
+        但是，音乐性的表现是建立在一定的技术水平上的，没有好的技术，也无法表现出音乐。当考级进入冲刺阶段时，希望每个备考的孩子都能准备充分、从容应对！
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+import { isMobile } from "@/util";
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    isPhone() {
+      return isMobile();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .msgWrap {
+    width: 1000px;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 70px auto 244px;
+    padding: 66px 75px;
+    text-align: left;
+    h2 {
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 48px;
+      margin-bottom: 90px;
+    }
+    p {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 36px;
+      margin-bottom: 30px;
+      text-indent: 32px;
+    }
+    .bottom {
+      text-align: right;
+    }
+  }
+}
+
+.min.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .wall {
+    height: 1rem;
+    width: 100%;
+    background-color: #002f33;
+  }
+  .msgWrap {
+    width: 100%;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 0 auto 0;
+    padding: 0.33rem 0.38rem;
+    text-align: left;
+    h2 {
+      font-size: 0.38rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 0.64rem;
+      margin-bottom: 0.5rem;
+    }
+    h4,
+    h5 {
+      font-size: 0.34rem;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 0.45rem;
+      margin-bottom: 0.3rem;
+    }
+    p {
+      font-size: 0.28rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 0.5rem;
+      margin-bottom: 0.3rem;
+      text-indent: 0.56rem;
+    }
+    .bottom {
+      text-align: right;
+    }
+  }
+}
+</style>
+

src/views/level/detile4.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="container" :class="isPhone ? 'min' : ''">
+     <div class="wall" v-if="isPhone"></div>
+    <div class="msgWrap">
+      <h2>武汉中考改革定了，音乐等艺术等科目纳入“新中考”</h2>
+      <p> <span>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</span> 2023年，形成基于初中学业水平考试成绩、学生综合素质评价结果的“新中考”招生录取模式、管理机制。</p>
+      <h3>学业水平考试有哪些科目</h3>
+      <p>
+        武汉市初中学业水平考试的科目为： <span> 语文、数学、外语、物理、化学、生物、道德与法治、历史、地理、体育与健康、音乐、美术、综合实践活动（信息技术教育）、生命安全教育、心理健康教育，共15科。</span>综合实践活动（研究性学习、社区服务与社会实践以及劳动与技术教育）的学习情况，统一记入学生综合素质评价的相关内容。
+      </p>
+        <img src="./images/infoImg2.jpg" alt="" width="100%">
+      <p>含地理、生物、音乐、美术、综合实践活动（信息技术教育）、生命安全教育、心理健康教育等，<span>只进行学业水平考试，不纳入高中阶段学校招生录取计分，其结果以等级形式呈现，纳入学生综合素质评价内容，并作为初中学生毕业及普通高中招生录取的依据之一。</span> <p>
+
+          <h5>具体为：</h5>
+      <p>语文、数学、外语、物理和化学、道德与法治和历史，均以卷面原始分计入招生录取总分。理化生实验操作、体育与健康，以原始得分计入招生录取总分。 </p>
+      <p>生物和地理（合卷）、音乐、美术、生命安全教育和心理健康教育（合卷）、综合实践活动（信息技术教育）按80分及以上、79－70分、69－60分、59分以下为A、B、C、D四个等级呈现。以等级方式纳入高中阶段学校招生录取依据。</p>
+      <p>综合素质各维度评定为C等或以上、所有科目学业考试成绩合格的毕业年级学生，方可授予初中毕业证书。学业考试成绩不合格的学生，按科目种类申请参加由区教育局7月10日前组织的一次补考。</p>
+      <p>报考普通高中学校的学生，其以等级形式呈现的成绩中，最多只允许有一个最低等级（D等）成绩的科目。</p>
+      <p>可以看出，此次改革重点在思想品德、学业水平、身心健康、艺术素养和社会实践5个方面，设定评价内容和要求，反映学生的全面发展情况和个性特长，注重考查学生的日常行为规范养成和突出表现。
+近年来，国家政策的支持推动了艺术教育的蓬勃发展。自2013年以来，国家一直着力于对学生艺术素质提升的推动工作。
+</p>
+  <img src="./images/infoImg4.png" alt="" width="100%">
+       <img src="./images/infoImg3.png" alt="" width="100%">
+       <p>家长务必要重视孩子的音乐教育，学习乐器的孩子们也一定要抓住这个机会，巩固乐理知识不仅能辅助乐器的学习，还能成为高中招生录取的“垫脚石”。从小从早学好相关科目的基础知识，不管是对提高素质教育水平，还是对升学考试都有直接的帮助。</p>
+
+    </div>
+  </div>
+</template>
+<script>
+import { isMobile } from "@/util";
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    isPhone() {
+      return isMobile();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .msgWrap {
+    width: 1000px;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 70px auto 244px;
+    padding: 66px 75px;
+    text-align: left;
+    h2 {
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 48px;
+      margin-bottom: 90px;
+    }
+    p {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 36px;
+      margin-bottom: 30px;
+      text-indent: 32px;
+    }
+    .bottom {
+      text-align: right;
+    }
+  }
+}
+
+.min.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .wall {
+    height: 1rem;
+    width: 100%;
+    background-color: #002f33;
+  }
+  .msgWrap {
+    width: 100%;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 0 auto 0;
+    padding: 0.33rem 0.38rem;
+    text-align: left;
+    h2 {
+      font-size: 0.38rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 0.64rem;
+      margin-bottom: 0.5rem;
+    }
+    h3,h4,
+    h5 {
+      font-size: 0.34rem;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 0.45rem;
+      margin-bottom: 0.3rem;
+    }
+    p {
+      font-size: 0.28rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 0.5rem;
+      margin-bottom: 0.3rem;
+      text-indent: 0.56rem;
+    }
+    .bottom {
+      text-align: right;
+    }
+  }
+}
+</style>
+

src/views/level/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="container" v-if="!isPhone">
+      <banner id="banner" />
+      <infos id="infos" />
+      <detail id="detail" />
+      <videoList id="videoList" />
+      <consult id="consult" />
+      <!-- <aboutUs id='aboutUs' /> -->
+      <!-- <silder :showForm='showForm'
+            @changeStatus='changeStatus' /> -->
+    </div>
+    <div v-else>
+        <minLevel />
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.container {
+  min-height: 1000px;
+}
+</style>
+<script>
+import banner from "./blocks/banner";
+import infos from "./blocks/infos";
+import detail from "./blocks/detail";
+import videoList from "./blocks/videoList";
+import consult from "./blocks/consult";
+import aboutUs from "./blocks/aboutUs";
+import minLevel from './minLevel.vue'
+import { isMobile } from "@/util";
+export default {
+  name: "indexpage",
+  components: {
+    banner,
+    infos,
+    detail,
+    videoList,
+    consult,
+    aboutUs,
+    minLevel
+  },
+  data() {
+    return {
+      showForm: false,
+    };
+  },
+  methods: {
+    changeStatus(val) {
+      this.showForm = val;
+    },
+  },
+  computed: {
+    isPhone() {
+      return isMobile();
+    },
+  },
+};
+</script>

src/views/level/minLevel.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div class="banner">
+      <img src="./images/minBanner.png" alt="" />
+      <div class="goinBox" @click="gotoDetail">考生指引</div>
+    </div>
+    <minLife />
+    <minDetail class="detail" id="detail" />
+    <div class="showApp">
+      <van-tabs v-model="isShowApp">
+        <van-tab title="酷乐秀考生APP" name="a">
+          <showApp />
+        </van-tab>
+        <van-tab title="酷乐秀评委端" name="b">
+          <div class="manager">
+            <div class="appItem">
+              <p class="msg">
+                <span>在线直播评审：</span>
+                考试当天评委登录“酷乐秀”评委端进行考级评审，通过在线直播视频对报考考生进行考核，评委端可查看考生准考证、报考曲目等信息，保证考试的次序与规范并对考生进行专业点评。
+              </p>
+              <div class="cloundItem">
+                <video
+                  class="videoH"
+                  poster="@/assets/video/Invigilator.jpg"
+                  src="@/assets/video/Invigilator.mp4"
+                  controls
+                ></video>
+              </div>
+            </div>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+    <minConsult />
+  </div>
+</template>
+<script>
+import { scrollAnimation } from "@/util/scroll";
+import minLife from "./blocks/minLife.vue";
+import minDetail from "./blocks/minDetail";
+import showApp from "./blocks/showApp";
+import minConsult from "./blocks/minConsult";
+export default {
+  components: {
+    minLife,
+    minDetail,
+    showApp,
+    minConsult,
+  },
+  data() {
+    return {
+      isShowApp: "a",
+    };
+  },
+  methods: {
+    gotoDetail() {
+      // Bus.$emit('gotoDetail')
+      let url = this.$route.path;
+      let tops = document.querySelector(".headerSection").offsetHeight;
+      let top = document.getElementById("detail").offsetTop - tops;
+      const currentY =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      scrollAnimation(currentY, top);
+      // scrollTo(0, top);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+img {
+  display: block;
+  width: 100%;
+}
+.banner {
+  position: relative;
+  .goinBox {
+    position: absolute;
+    display: inline-block;
+    text-align: center;
+    bottom: 2.4rem;
+    left: 50%;
+    margin-left: -1.4rem;
+    width: 2.8rem;
+    height: 0.65rem;
+    // margin: 0 auto;
+    line-height: 0.65rem;
+    font-size: 0.28rem;
+    border: 1px solid #c5c5c5;
+    color: #ffffff;
+    cursor: pointer;
+    &:active {
+      background-color: #2dc7aa;
+      border: 1px solid #2dc7aa;
+    }
+  }
+}
+.showApp {
+  padding-top: 0.5rem;
+  /deep/.van-tabs__wrap {
+    overflow:visible;
+  }
+  /deep/.van-tabs__nav {
+     height: 0.68rem;
+    line-height: 0.68rem;
+    border-bottom: 1px solid #eaeaea;
+    padding-bottom:.1rem;
+  }
+  /deep/.van-tab--active {
+    color: #2dc7aa;
+  }
+  /deep/.van-tabs__line {
+    position: absolute;
+    bottom:0;
+    left: 0;
+    z-index: 1;
+    width: 1.8rem;
+    height: 2px;
+    background-color: #2dc7aa;
+    border-radius: 2px;
+  }
+}
+.manager {
+  padding-top: 0.58rem;
+
+  .appItem {
+
+    padding-bottom: 1.5rem;
+    .msg {
+      font-size: 0.22rem;
+      font-weight: 400;
+      color: #808080;
+      line-height: 0.42rem;
+      padding: 0 0.6rem;
+      span {
+        font-weight: bold;
+        color: #000;
+      }
+    }
+    .cloundItem {
+      .videoH {
+        width: 6.3rem;
+        display: block;
+        margin: 0.3rem auto 0;
+      }
+    }
+  }
+}
+</style>

src/views/project/index.vue

@@ -416,8 +416,9 @@ img {
       filter: blur(0px);
       padding: 30px;
       overflow: hidden;
+     position: relative;
       &:hover {
-        //
+        transition: all 1s ease 0s;
         background: url("./images/teacherItemBg.png") no-repeat center;
         background-size: cover;
         background-color: #fff;