09/17 10:02

111

package-lock.json

@@ -3411,6 +3411,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "3.0.0-alpha.9",
+      "resolved": "https://registry.npm.taobao.org/dom7/download/dom7-3.0.0-alpha.9.tgz?cache=0&sync_timestamp=1598357793228&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdom7%2Fdownload%2Fdom7-3.0.0-alpha.9.tgz",
+      "integrity": "sha1-ARDCEYG4utOh7nJEPgTTwuPx048=",
+      "requires": {
+        "ssr-window": "^3.0.0-alpha.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1597694993058&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz",
@@ -10069,6 +10077,11 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssr-window": {
+      "version": "3.0.0-alpha.4",
+      "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-3.0.0-alpha.4.tgz",
+      "integrity": "sha1-DGmhjEMF7MzdjhFZYVXKB7Y180U="
+    },
     "ssri": {
       "version": "5.3.0",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-5.3.0.tgz",
@@ -10328,6 +10341,15 @@
         "whet.extend": "~0.9.9"
       }
     },
+    "swiper": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npm.taobao.org/swiper/download/swiper-6.2.0.tgz",
+      "integrity": "sha1-+dr9wsy11t0r1yjHjbh2BTKctQ4=",
+      "requires": {
+        "dom7": "^3.0.0-alpha.7",
+        "ssr-window": "^3.0.0-alpha.4"
+      }
+    },
     "tapable": {
       "version": "0.2.9",
       "resolved": "https://registry.npm.taobao.org/tapable/download/tapable-0.2.9.tgz?cache=0&sync_timestamp=1589549557661&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftapable%2Fdownload%2Ftapable-0.2.9.tgz",
@@ -10835,6 +10857,11 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz",

package.json

@@ -14,7 +14,9 @@
     "axios": "^0.20.0",
     "element-ui": "^2.13.2",
     "qs": "^6.9.4",
+    "swiper": "^6.2.0",
     "vue": "^2.5.2",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-loader-plugin": "^1.3.0",
     "vue-router": "^3.0.1"
   },

src/components/headerSection.vue

@@ -2,27 +2,26 @@
   <div class="headerSection">
     <div class="header-container width1200">
       <router-link :to="{ path: '/' }"
-                    class="logo">
+                   class="logo">
         <img src="../assets/images/logoWhile.png"
-              width="100%"
-              alt="">
+             width="100%"
+             alt="">
       </router-link>
       <div class="menu">
-        <router-link :class="checkActive==1?'active':''"
-                      @click.native="change(1)"
-                      :to="{ path: '/' }">首页</router-link>
-        <router-link :class="checkActive==2?'active':''"
-                      @click.native="change(2)"
-                      :to="{ path: '/project' }">产品</router-link>
-        <router-link :class="checkActive==3?'active':''"
-                      @click.native="change(3)"
-                      :to="{ path: '/consult' }">资讯</router-link>
-
-        <router-link :class="checkActive==4?'active':''"
-                      @click.native="change(4)"
-                      :to="{ path: '/aboutUs' }">关于我们</router-link>
+        <a :class="checkActive==1?'active':''"
+           @click="change(1,'banner')">平台介绍</a>
+        <a :class="checkActive==2?'active':''"
+           @click="change(2,'infos')">产品优势</a>
+        <a :class="checkActive==3?'active':''"
+           @click="change(3,'detail')">考生指引</a>
+        <a :class="checkActive==4?'active':''"
+           @click="change(4,'videoList')">操作指南</a>
+        <a :class="checkActive==5?'active':''"
+           @click="change(5,'consult')">行业咨询</a>
+        <a :class="checkActive==6?'active':''"
+           @click="change(6,'aboutUs')">关于我们</a>
         <div class="bandBtn"
-              @click="goKu">合作机构</div>
+             @click="goKu">合作机构</div>
       </div>
     </div>
   </div>
@@ -33,42 +32,67 @@ export default {
   props: ['name'],
   data () {
     return {
-      checkActive: 1
+      checkActive: 1,
+      topList: []
     }
   },
   mounted () {
+    scrollTo(0, 0);
     let url = this.$route
-    // console.log(url)
-    if (url.path.indexOf('detile')) {
-      this.checkActive = 3
-    }
-    switch (url.path) {
-      case '/': {
-        this.change(1)
-        break
-      }
-      case '/project': {
-        this.change(2)
-        break
-      }
-      case '/consult': {
-        this.change(3)
-        break
-      }
-      case '/aboutUs': {
-        this.change(4)
-        break
-      }
+    if (url.path.indexOf('detile') != -1) {
+      this.checkActive = 5
     }
+    this.$nextTick(res => {
+      this.topList = this.getTop(['banner', 'infos', 'detail', 'videoList', 'consult', 'aboutUs'])
+    })
+
+    window.addEventListener('scroll', this.onContentScroll, true)
   },
   methods: {
-    change (num) {
-      this.checkActive = num;
-      scrollTo(0, 0);
+    getTop (nameList) {
+      let arr = []
+      nameList.forEach(item => {
+        let top = document.getElementById(item).offsetTop - 78
+        arr.push(top)
+      })
+      arr.sort(function (a, b) { return a - b });
+      return arr
+    },
+    change (num, name) {
+      let url = this.$route.path
+      if (url != '/') {
+        this.$router.push('/')
+        this.checkActive = num;
+        let top = document.getElementById(name).offsetTop - 76
+        scrollTo(0, top);
+      } else {
+        this.checkActive = num;
+        let top = document.getElementById(name).offsetTop - 76
+        scrollTo(0, top);
+      }
     },
     goKu () {
       window.open('https://kj.colexiu.com/#/login?returnUrl=%2F', '_blank');
-    }
+    },
+
+    onContentScroll (e) {
+      // this.topList = this.getTop(['banner', 'infos', 'detail', 'videoList', 'consult', 'aboutUs'])
+      let target = e.target || e.srcElement
+      this.scrollTop = target.scrollingElement.scrollTop
+      if (this.scrollTop < this.topList[1]) {
+        this.checkActive = 1
+      } else if (this.scrollTop >= this.topList[1] && this.scrollTop < this.topList[2]) {
+        this.checkActive = 2
+      } else if (this.scrollTop >= this.topList[2] && this.scrollTop < this.topList[3]) {
+        this.checkActive = 3
+      } else if (this.scrollTop >= this.topList[3] && this.scrollTop < this.topList[4]) {
+        this.checkActive = 4
+      } else if (this.scrollTop >= this.topList[4] && this.scrollTop < this.topList[5]) {
+        this.checkActive = 5
+      } else if (this.scrollTop >= this.topList[5]) {
+        this.checkActive = 6
+      }
+    },
   }
 }
 </script>
@@ -92,7 +116,7 @@ export default {
   height: 82px;
 }
 .headerSection {
-  background-color: rgba(0, 0, 0, .7);
+  background-color: rgba(0, 0, 0, 0.7);
   position: fixed;
   width: 100%;
   top: 0px;
@@ -117,7 +141,8 @@ export default {
     font-size: 16px;
     align-items: center;
     a {
-      margin-left: 80px;
+      cursor: pointer;
+      margin-left: 44px;
       color: #fff;
       text-decoration: none;
       position: relative;
@@ -127,12 +152,12 @@ export default {
       transition: 0.5s;
       &::after {
         position: absolute;
-        content: '';
+        content: "";
         top: 140%;
         left: 0;
         width: 100%;
         height: 3px;
-        background-color: #2DC7AA;
+        background-color: #2dc7aa;
         z-index: 100;
         transform: scaleX(0);
         transform-origin: right;
@@ -140,7 +165,7 @@ export default {
       }
       &:hover,
       &.hover {
-        color: #2DC7AA;
+        color: #2dc7aa;
         font-weight: 600;
       }
       &:hover::after {
@@ -150,7 +175,7 @@ export default {
     }
   }
   a.active {
-    color: #2DC7AA !important;
+    color: #2dc7aa !important;
     font-weight: 600;
     &::after {
       position: absolute;
@@ -159,7 +184,7 @@ export default {
       left: 0;
       width: 100%;
       height: 3px;
-      background-color: #2DC7AA;
+      background-color: #2dc7aa;
       z-index: 100;
       transform: scaleX(1);
       transform-origin: left;

src/components/silder.vue

@@ -107,6 +107,7 @@
 <script>
 import axios from "axios";
 import qs from 'qs'
+import Bus from '../views/index/blocks/eventBus'
 export default {
   props: ["showForm"],
   data () {
@@ -134,6 +135,12 @@ export default {
       },
     };
   },
+  created () {
+    Bus.$on('joinIn', (res => {
+      console.log(res)
+      this.visiable = res
+    }))
+  },
   mounted () {
     var vm = this;
     window.onscroll = function () {
@@ -173,10 +180,12 @@ export default {
   },
   watch: {
     showForm (val) {
+      console.log('调用')
       this.visiable = val;
     },
     visiable (val) {
       this.$emit("changeStatus", val);
+
       if (!val) {
         this.$nextTick(() => {
           this.$refs["form"].resetFields();

src/main.js

@@ -5,6 +5,9 @@ import App from './App'
 import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+
+
 Vue.use(ElementUI);
 Vue.config.productionTip = false
 

src/views/index/blocks/aboutUs.vue

@@ -0,0 +1,56 @@
+<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"
+           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;
+    font-weight: bold;
+    margin: 73px 0 87px;
+  }
+  .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/index/blocks/banner.vue

@@ -2,13 +2,21 @@
   <header class="banner">
     <div class="content width1200">
       <div>
-        <h1 class="animate__animated animate__fadeInDown">酷乐秀—全国首家在线直播考级平台</h1>
+        <img class="animate__animated animate__fadeInDown"
+             src="../images/topTitle.png"
+             width="1270"
+             alt="">
       </div>
       <div>
-        <h3 class="animate__animated animate__fadeInDown delay-300ms">拥有 <strong>200,000</strong> 多节在线直播课程经验，直播考级真实还原</h3>
+        <img class="animate__animated animate__fadeInDown delay-300ms"
+             src="../images/bottomTitle.png"
+             width="944"
+             alt="">
       </div>
       <div>
-        <button class="animate__animated animate__fadeInDown delay-600ms button join">立即入驻</button>
+        <div class="animate__animated animate__fadeInDown delay-600ms button join "
+             @click="joinIn">立即入驻</div>
+        <div class="animate__animated animate__fadeInDown delay-600ms button goinBox">考生指引</div>
       </div>
     </div>
   </header>
@@ -21,7 +29,7 @@
   animation-delay: 0.6s;
 }
 .banner {
-  background: url("../newImages/banner.png") no-repeat center;
+  background: url("../images/banner.png") no-repeat center;
   background-color: #2a2c41;
   background-size: cover;
   height: 763px;
@@ -42,15 +50,51 @@
     }
     .join {
       display: inline-block;
-      width: 200px;
-      margin: 0 auto;
-      margin-top: 30px;
+      width: 150px;
+      height: 46px;
+      // margin: 0 auto;
+      margin-top: 56px;
+      margin-right: 12px;
+      line-height: 46px;
+      font-size: 16px;
+      background: #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;
+      }
     }
   }
 }
 </style>
 <script>
+import Bus from './eventBus'
 export default {
-  name: 'banner'
+  name: 'banner',
+  methods: {
+    joinIn () {
+      Bus.$emit("joinIn", true);
+    }
+  }
 }
 </script>

src/views/index/blocks/consult.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="consult">
+    <div class="mask">
+      <h2>行业咨询</h2>
+      <div class="maskCore">
+        <!-- <div v-swiper:mySwiper="swiperOption"
+             class="swiper-container"
+             ref="mySwiper">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <div class="textItem">
+                <img src="../images/consult1.png"
+                     alt=""
+                     width="369px">
+                <div class="textWrap">
+                  <h4>承办单位和定点机构有什么区别</h4>
+                  <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="textItem">
+                <img src="../images/consult1.png"
+                     alt=""
+                     width="369px">
+                <div class="textWrap">
+                  <h4>承办单位和定点机构有什么区别</h4>
+                  <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="textItem">
+                <img src="../images/consult1.png"
+                     alt=""
+                     width="369px">
+                <div class="textWrap">
+                  <h4>承办单位和定点机构有什么区别</h4>
+                  <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-pagination"></div>
+        </div> -->
+
+        <el-carousel :interval="4000"
+                     type="card"
+                     height="400px"
+                     arrow="always"
+                     indicator-position="none">
+          <el-carousel-item>
+            <div class="textItem"
+                 @click="gotoDetail(1)">
+              <img src="../images/consult1.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>承办单位和定点机构有什么区别</h4>
+                <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+              </div>
+            </div>
+          </el-carousel-item>
+          <el-carousel-item>
+            <div class="textItem"
+                 @click="gotoDetail(2)">
+              <img src="../images/consult2.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>乐器演奏不清晰不连贯的原因有哪些</h4>
+                <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？
+                  答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
+              </div>
+            </div>
+          </el-carousel-item>
+          <el-carousel-item>
+            <div class="textItem"
+                 @click="gotoDetail(3)">
+              <img src="../images/consult3.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>十级琴霸的备考建议</h4>
+                <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
+              </div>
+            </div>
+          </el-carousel-item>
+          <el-carousel-item>
+            <div class="textItem"
+                 @click="gotoDetail(4)">
+              <img src="../images/consult4.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>音乐等艺术等科目纳入“新中考”</h4>
+                <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
+              </div>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </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 {
+      swiperOption: {
+        pagination: {
+          el: '.swiper-pagination'
+        },
+        centeredSlides: false, // 选中slide居中显示
+        initialSlide: 1, // 默认选中项索引
+        slidesPerView: 1, // 自动匹配每次显示的slide个数,loop='auto'模式下，还需要设置loopedSlides
+        effect: 'coverflow', // 切换效果-3d
+        coverflowEffect: {
+          rotate: 0,
+          stretch: 10,
+          depth: 160,
+          modifier: 2,
+          slideShadows: true
+        },
+
+        // ...
+      }
+    }
+  },
+  mounted () {
+    // var swiper = new Swiper(".swiper-container", {
+    //   effect: "coverflow",
+    //   grabCursor: true,
+    //   watchSlidesProgress: true,
+    //   centeredSlides: true,
+    //   loop: true,
+    //   loopedSlides: 3,
+    //   slidesPerView: 3,
+    //   autoplay: {
+    //     delay: 3000,//自动播放速度
+    //     disableOnInteraction: false//鼠标移上去时是否还继续播放
+    //   },
+    //   coverflowEffect: {
+    //     // rotate: 50,
+    //     // stretch: 0,
+    //     // depth: 500,
+    //     // modifier: 1,
+    //     // slideShadows : true
+    //     rotate: 30,
+    //     stretch: 0,
+    //     depth: 60,
+    //     modifier: 6,
+    //     slideShadows: true
+    //   },
+
+    // });
+  },
+  computed: {
+    swiper () {
+      return this.$refs.mySwiper.$swiper
+    }
+  },
+  methods: {
+    gotoDetail (num) {
+      let newpage = this.$router.resolve({
+        name: `detile${num}`,
+      });
+      window.open(newpage.href, '_blank');
+    },
+  }
+}
+</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: 740px;
+      // width: 1150px;
+      .textItem {
+        width: 369px;
+        background-color: #fff;
+        .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;
+          }
+          p {
+            text-align: left;
+            color: #808080;
+            line-height: 20px;
+            height: 63px;
+            font-size: 14px;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/index/blocks/eventBus.js

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

src/views/index/blocks/videoList.vue

@@ -0,0 +1,252 @@
+<template>
+  <div>
+    <div class='projectWrap'
+         v-if="activeRow">
+      <div class="projectList width1200">
+        <div class="left">
+          <el-collapse 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>
+            <!-- <section>
+              <p class="title">酷乐秀管理端 <i class="el-icon-arrow-right"></i></p>
+
+              <div v-if="activeList == 'admin'">
+                <p v-for="(item,index) in vaidoJson.admin"
+                   :key="index"
+                   :class="activeRow.id===item.id?'active':''"
+                   @click='activeRow = item'>{{item.title}}</p>
+              </div>
+
+            </section> -->
+            <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>
+            <!-- <section>
+              <p class="title"
+                 @click="activeList = 'teacher'">酷乐秀评委端 <i class="el-icon-arrow-right"></i></p>
+              <div v-if="activeList == 'teacher'">
+                <p v-for="(item,index) in vaidoJson.teacher"
+                   :key="index"
+                   :class="activeRow.id===item.id?'active':''"
+                   @click='activeRow = item'>{{item.title}}</p>
+              </div>
+            </section> -->
+
+          </el-collapse>
+        </div>
+        <div class="right">
+          <h2>{{activeRow.title}}</h2>
+          <div class="videoWrap"
+               v-if="activeRow.width <= 352">
+            <div class="textWrap">{{activeRow.text}}</div>
+            <video :src="activeRow.src"
+                   :width="activeRow.width"
+                   autoplay
+                   controls
+                   loop></video>
+          </div>
+          <div v-else
+               class="videoWrap1">
+            <p>{{activeRow.text}}</p>
+            <video :src="activeRow.src"
+                   :width="activeRow.width"
+                   autoplay
+                   controls
+                   loop></video>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { vaidoJson } from '../../project/video'
+export default {
+  data () {
+    return {
+      activeNum: 1,
+      vaidoJson,
+      activeRow: null,
+      activeList: 'app'
+    }
+  },
+  mounted () {
+    this.activeRow = vaidoJson.app[0]
+  }
+}
+</script>
+<style lang="less" scoped>
+.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;
+  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;
+  .left {
+    background-color: #fff;
+    margin-right: 50px;
+    width: 220px;
+    border-top: none;
+    .title {
+      height: 70px;
+      line-height: 70px;
+      // border-top: 1px solid #e9e9e9;
+      // border-bottom: 1px solid #e9e9e9;
+      cursor: pointer;
+      font-size: 20px;
+      font-weight: 500;
+      text-align: left;
+      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;
+    }
+    p {
+      height: 60px;
+      line-height: 60px;
+      cursor: pointer;
+      padding-left: 30px;
+      text-align: left;
+    }
+  }
+  .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-item__header {
+    height: 70px !important;
+    line-height: 70px !important;
+  }
+  /deep/.el-collapse-item__content {
+    padding-bottom: 0 !important;
+  }
+}
+</style>

src/views/index/index.vue

@@ -1,26 +1,49 @@
 <template>
   <div class="container">
-    <banner />
-    <infos />
-    <detail />
+    <banner id='banner' />
+    <infos id='infos' />
+    <detail id='detail' />
+    <videoList id='videoList' />
+    <consult id='consult' />
+    <aboutUs id='aboutUs' />
+    <silder :showForm='showForm'
+            @changeStatus='changeStatus' />
   </div>
 </template>
 <style lang="less" scoped>
-  .container{
-    min-height: 1000px;
-  }
+.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 silder from '@/components/silder.vue'
 export default {
   name: 'indexpage',
   components: {
     banner,
     infos,
     detail,
+    videoList,
+    consult,
+    aboutUs,
+    silder
+  },
+  data () {
+    return {
+      showForm: false
+    }
+  },
+  methods: {
+    changeStatus (val) {
+      console.log(val)
+      this.showForm = val;
+    }
   }
 }
 </script>

src/views/project/index.vue

@@ -39,137 +39,6 @@
       </div>
 
     </div>
-    <!-- <div class="projectWrap">
-      <div class="tab width1200">
-        <div class="tabItem"
-             :class="activeNum==1?'active':''"
-             @mouseover="change(1)">
-          酷乐秀考生APP
-        </div>
-        <div class="tabItem"
-             :class="activeNum==2?'active':''"
-             @mouseover="change(2)">
-          酷乐秀管理端
-        </div>
-        <div class="tabItem"
-             :class="activeNum==3?'active':''"
-             @mouseover="change(3)">
-          酷乐秀评委端
-        </div>
-      </div>
-      <div class="studentList  width1200 videoList"
-           v-show='activeNum=== 1'>
-        <h2>线上报名后考试相关信息即刻提醒，同时可在APP上查看考级曲谱，高保证的音视频处理，<br> 让考试就如同和评审老师面对面，考试结束后结果可在APP查询。让考生彻底摆脱时间空间限制， <br> 自主选择报名时间和考试地点。</h2>
-        <div class="infoList">
-          <div class="infoItem">
-            <h3>考生信息提醒</h3>
-            <video src="@/assets/video/student-remind.mp4"
-                   width="352"
-                   height="640"
-                   autoplay
-                   controls
-                   loop></video>
-          </div>
-          <div class="infoItem">
-            <video src="@/assets/video/text.mp4"
-                   width="352"
-                   height="640"
-                   autoplay
-                   controls
-                   loop></video>
-            <h3>考级曲谱提前练习</h3>
-          </div>
-          <div class="infoItem">
-            <h3>在线高品质直播</h3>
-            <video src="@/assets/video/onlineText.mp4"
-                   width="352"
-                   height="640"
-                   autoplay
-                   controls
-                   loop></video>
-          </div>
-          <div class="infoItem">
-            <video src="@/assets/video/replay.mp4"
-                   width="352"
-                   height="640"
-                   autoplay
-                   controls
-                   loop></video>
-            <h3>录播考试满足多种场景</h3>
-          </div>
-          <div class="infoItem">
-            <h3>考试结果一键查询</h3>
-            <video src="@/assets/video/query.mp4"
-                   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> -->
     <div class='projectWrap'
          v-if="activeRow">
       <div class="projectList width1200">

src/views/project/video.js

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