new

package-lock.json

@@ -107,6 +107,11 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npm.taobao.org/ansi-html/download/ansi-html-0.0.7.tgz",

package.json

@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^0.20.0",
     "element-ui": "^2.13.2",
     "qs": "^6.9.4",
@@ -66,4 +67,4 @@
     "last 2 versions",
     "not ie <= 8"
   ]
-}
+}

src/App.vue

@@ -9,6 +9,7 @@
 <script>
 import HeaderSection from '@/components/headerSection'
 import FooterSection from '@/components/footerSection'
+import 'animate.css'
 export default {
   components: {
     HeaderSection,

src/components/headerSection.vue

@@ -1,35 +1,31 @@
 <template>
-  <div>
-    <div class="headerSection">
-      <div class="header-container width1200">
-        <router-link :to="{ path: '/' }"
-                     class="logo">
-          <img src="../assets/images/logo.png"
-               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>
+  <div class="headerSection">
+    <div class="header-container width1200">
+      <router-link :to="{ path: '/' }"
+                    class="logo">
+        <img src="../assets/images/logoWhile.png"
+              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>
-          <div class="bandBtn"
-               @click="goKu">合作机构</div>
-        </div>
+        <router-link :class="checkActive==4?'active':''"
+                      @click.native="change(4)"
+                      :to="{ path: '/aboutUs' }">关于我们</router-link>
+        <div class="bandBtn"
+              @click="goKu">合作机构</div>
       </div>
     </div>
-    <div class="wall"></div>
   </div>
-
 </template>
 <script>
 export default {
@@ -88,7 +84,6 @@ export default {
   line-height: 30px;
   cursor: pointer;
   position: relative;
-  top: 8px;
   &:hover {
     background-color: #2ac0a3;
   }
@@ -97,20 +92,19 @@ export default {
   height: 82px;
 }
 .headerSection {
-  background-color: #fff;
+  background-color: rgba(0, 0, 0, .7);
   position: fixed;
   width: 100%;
   top: 0px;
   z-index: 1000;
-  border-bottom: 1px solid #dedede;
   .header-container {
     margin: 0 auto;
     // overflow: hidden;
     display: flex;
+    align-items: center;
     flex-direction: row;
     justify-content: space-between;
-    height: 80px;
-    padding-top: 17px;
+    height: 76px;
   }
   .logo {
     // float: left;
@@ -121,10 +115,10 @@ export default {
     display: flex;
     flex-direction: row;
     font-size: 16px;
+    align-items: center;
     a {
       margin-left: 80px;
-      color: #565757;
-      line-height: 48px;
+      color: #fff;
       text-decoration: none;
       position: relative;
       // display: block;
@@ -133,12 +127,12 @@ export default {
       transition: 0.5s;
       &::after {
         position: absolute;
-        content: "";
-        top: 60%;
+        content: '';
+        top: 140%;
         left: 0;
         width: 100%;
         height: 3px;
-        background-color: #000;
+        background-color: #2DC7AA;
         z-index: 100;
         transform: scaleX(0);
         transform-origin: right;
@@ -146,7 +140,7 @@ export default {
       }
       &:hover,
       &.hover {
-        color: #000000;
+        color: #2DC7AA;
         font-weight: 600;
       }
       &:hover::after {
@@ -156,16 +150,16 @@ export default {
     }
   }
   a.active {
-    color: #000 !important;
+    color: #2DC7AA !important;
     font-weight: 600;
     &::after {
       position: absolute;
       content: "";
-      top: 60%;
+      top: 140%;
       left: 0;
       width: 100%;
       height: 3px;
-      background-color: #000;
+      background-color: #2DC7AA;
       z-index: 100;
       transform: scaleX(1);
       transform-origin: left;

src/components/map.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="viewmap">
+    <img src="../assets/images/map.png"/>
+    <div class="icon">
+      <div class="dot"></div>
+      <div class="pluse"></div>
+      <div class="pluse-big"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'viewmap'
+}
+</script>
+<style lang="less" scoped>
+  .viewmap{
+    width: 628px;
+    img{
+      max-width: 100%;
+    }
+    .icon{
+      position: absolute;
+      width: 26px;
+      height: 26px;
+      .dot{
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        left: 9px;
+        top: 9px;
+        border-radius: 50%;
+        background: rgba(0, 153, 255, 0.7);
+        animation: shink 1.4s ease-out infinite;
+      }
+      .pluse{
+        position: absolute;
+        width: 26px;
+        height: 26px;
+        border: 2px solid #09f;
+        border-radius: 50%;
+        z-index: 100;
+        opacity: 0;
+        background: rgba(0, 153, 255, 0.6);
+        animation: warn 1.4s ease-out;
+        animation-iteration-count: infinite;
+        box-shadow: 1px 1px 30px rgb(0, 153, 255);
+      }
+      .pluse-big{
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        border: 2px solid #09f;
+        border-radius: 50%;
+        z-index: 100;
+        opacity: 0;
+        background: rgba(0, 153, 255, 0.6);
+        animation: warn1 1.4s ease-out;
+        animation-iteration-count: infinite;
+        box-shadow: 1px 1px 30px #EF2D02;
+      }
+    }
+  }
+</style>

src/views/index copy/index.vue

@@ -0,0 +1,440 @@
+<template>
+  <div>
+    <div class="topBanner">
+      <!-- <img src="@/assets/images/topBanner.png"
+           alt=""
+           width="100%"> -->
+      <div class="width1200 goinWrap">
+        <div class="goinBox"
+             @click="showForm = true">立即入驻</div>
+      </div>
+
+    </div>
+    <div class="inner width1200">
+      <div class="goodList">
+        <div class="listItem">
+          <img src="@/assets/images/good2.png"
+               alt="">
+          <p class="title">生源拓展</p>
+          <p class="subTitle">线上化招考全流程<br /> 不受地域限制扩张生源地</p>
+        </div>
+        <div class="listItem">
+          <img src="@/assets/images/good1.png"
+               alt="">
+          <p class="title">高效管理</p>
+          <p class="subTitle">覆盖考级生命周期<br /> 极大的提升管理效率</p>
+        </div>
+        <div class="listItem">
+          <img src="@/assets/images/good3.png"
+               alt="">
+          <p class="title">节省成本</p>
+          <p class="subTitle">全线上运营模式<br /> 节省支出成本</p>
+        </div>
+      </div>
+      <div class="titleWrap">
+        <img src="@/assets/images/title1.png"
+             width="100%"
+             alt="">
+      </div>
+      <div class="suggest">
+        <div class="suggestList">
+          <div class="suggestItem "
+               :class="suggestIndex ===1?'active':''"
+               @mouseover="suggestIndex=1">
+            <div class="suggestTitle">在线报名</div>
+            <div class="msg"
+                 style="width:200px">考生在线报名，考级信息一手掌握</div>
+          </div>
+          <div class="suggestItem"
+               :class="suggestIndex ===2?'active':''"
+               @mouseover="suggestIndex=2">
+            <div class="suggestTitle">高品质直播考场</div>
+            <div class="msg"
+                 style="width:200px">高保真、高品质的音视频输出， 最大限度还原真实考场</div>
+          </div>
+          <div class="suggestItem"
+               :class="suggestIndex ===3?'active':''"
+               @mouseover="suggestIndex=3">
+            <div class="suggestTitle">在线录播</div>
+            <div class="msg"
+                 style="width:200px">录播考试兼容各种考试场景</div>
+          </div>
+        </div>
+        <div class="suggestImgList">
+          <div class="suggestImg"
+               v-show="suggestIndex ===1">
+            <img src="@/assets/images/phone1.png"
+                 alt=""
+                 width="100%">
+          </div>
+          <div class="suggestImg"
+               v-show="suggestIndex ===2">
+            <img src="@/assets/images/phone2.png"
+                 alt=""
+                 width="100%">
+          </div>
+          <div class="suggestImg"
+               v-show="suggestIndex ===3">
+            <img src="@/assets/images/phone3.png"
+                 alt=""
+                 width="100%">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="inner2">
+      <div class="width1200">
+        <div class="titleWrap">
+          <img src="@/assets/images/title2.png"
+               width="100%"
+               alt="">
+        </div>
+        <div class="suggest">
+          <div class="suggestList"
+               style="width:700px;">
+            <div class="suggestItem"
+                 :class="mapIndex ===1?'active':''"
+                 @mouseover="mapIndex=1">
+              <div class="suggestTitle">考级生命周期</div>
+              <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
+            </div>
+            <div class="suggestItem "
+                 :class="mapIndex ===2?'active':''"
+                 @mouseover="mapIndex=2">
+              <div class="suggestTitle">生源拓展</div>
+              <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
+            </div>
+
+          </div>
+          <div class="suggestImgList">
+            <div class="suggestImg"
+                 v-show="mapIndex ===2">
+              <img src="@/assets/images/map.png"
+                   alt=""
+                   width="100%">
+              <p class="mapMsg">支持<span>多级下属合作单位</span>线上招生，打破生源地空间限制，将招考范围<span>推向全国</span></p>
+            </div>
+            <div class="suggestImg"
+                 v-show="mapIndex ===1">
+              <img src="@/assets/images/map1.png"
+                   alt=""
+                   width="1092">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="inner width1200 inner3">
+      <div class="titleWrap">
+        <img src="@/assets/images/title3.png"
+             width="100%"
+             alt="">
+      </div>
+      <div class="suggest"
+           style="margin-top:40px">
+        <div class="suggestList">
+          <div class="suggestItem "
+               :class="onlineIndex ===1?'active':''"
+               @mouseover="onlineIndex=1">
+            <div class="suggestTitle">直播互动</div>
+            <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
+          </div>
+          <div class="suggestItem"
+               :class="onlineIndex ===2?'active':''"
+               @mouseover="onlineIndex=2">
+            <div class="suggestTitle">在线评审</div>
+            <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
+          </div>
+        </div>
+        <div class="suggestImgList"
+             style="margin-top:40px">
+          <div class="suggestImg"
+               v-show="onlineIndex ===1">
+            <img src="@/assets/images/look.png"
+                 alt=""
+                 width="712px">
+            <p class="mapMsg">直播考试<span>视频互动</span>，还原线下考场真实氛围</p>
+          </div>
+          <div class="suggestImg"
+               v-show="onlineIndex ===2">
+            <img src="@/assets/images/look1.png"
+                 alt=""
+                 width="712px">
+            <p class="mapMsg">考官<span>在线评审</span>，考级视频<span>录像回放</span> ，最大限度保证考试公正</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="inner inner4">
+      <!-- <img src="@/assets/images/index-bg.png"
+           width="100%"
+           alt=""> -->
+      <div class="textwrap">
+        <h2>技术赋能考级，为行业带来崭新一页</h2>
+        <p class="desc">酷乐秀是武汉市景明云乐网络科技有限公司专为全国音乐等级考试和音乐类比赛研发的服务平台。为合作机构提供远程视频直播、录播考级的技术支持，独创“音乐演奏模式”高度还原乐器演奏的现场感及音色。同步还原线下考级场景，让合作机构和考生公平公正，省时省力的通过酷乐秀实现考级完整生命周期。</p>
+        <div class="cardList">
+          <div class="cardItem">
+            <img src="@/assets/images/card1.png"
+                 width="110px"
+                 height="88px"
+                 alt="">
+            <h4>技术保障</h4>
+            <p>资深技术团队开发</p>
+          </div>
+          <div class="cardItem">
+            <img src="@/assets/images/card2.png"
+                 width="110px"
+                 height="88px"
+                 alt="">
+            <h4>深度融合</h4>
+            <p>全面深入音乐教育行业</p>
+          </div>
+          <div class="cardItem">
+            <img src="@/assets/images/card3.png"
+                 width="110px"
+                 height="88px"
+                 alt="">
+            <h4>节省成本</h4>
+            <p>全线上运营模式节省支出成本</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <silder :showForm='showForm'
+            @changeStatus='changeStatus' />
+
+  </div>
+</template>
+<script>
+import silder from '@/components/silder.vue'
+export default {
+  components: {
+    silder
+  },
+  data () {
+    return {
+      suggestIndex: 1,
+      mapIndex: 1,
+      onlineIndex: 1,
+      showForm: false
+
+    }
+  },
+  methods: {
+    changeStatus (val) {
+      this.showForm = val;
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+img {
+  vertical-align: middle;
+}
+.topBanner {
+  background: url("../../assets/images/topBanner.png") center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+  height: 465px;
+  .goinWrap {
+    position: relative;
+    height: 465px;
+    .goinBox {
+      width: 150px;
+      height: 44px;
+      background: #2dc7aa;
+      border-radius: 4px;
+      line-height: 44px;
+      font-size: 16px;
+      color: #ffffff;
+      position: absolute;
+      left: 0;
+      bottom: 167px;
+      cursor: pointer;
+      &:hover {
+        background-color: #2ac0a3;
+      }
+    }
+  }
+}
+.inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .goodList {
+    margin-top: 92px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 1062px;
+    .listItem {
+      padding: 33px 80px 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 320px;
+      height: 350px;
+      background: #ffffff;
+      cursor: pointer;
+      border-radius: 8px;
+      border: 1px solid #dedede;
+      img {
+        border-radius: 4px;
+      }
+      &:hover {
+        box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.06);
+      }
+      .title {
+        margin: 13px 0;
+        height: 33px;
+        font-size: 24px;
+        font-weight: 500;
+        color: #2c2c2c;
+        line-height: 33px;
+        font-weight: 500;
+        width: 180px;
+      }
+      .subTitle {
+        font-weight: 400;
+        color: #788393;
+        line-height: 20px;
+        font-size: 14px;
+        width: 180px;
+      }
+    }
+  }
+  .titleWrap {
+    margin-top: 85px;
+  }
+}
+.suggest {
+  margin-top: 85px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // width: 740px;
+  .suggestList {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    // margin-bottom: 71px;
+    .suggestItem {
+      width: 220px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      .suggestTitle {
+        height: 38px;
+        line-height: 38px;
+        font-size: 22px;
+        color: #2c2c2c;
+        margin-bottom: 28px;
+        border-radius: 4px;
+        display: inline-block;
+        padding: 0 21px;
+      }
+      .msg {
+        color: #788393;
+        line-height: 24px;
+        font-size: 15px;
+      }
+    }
+    .suggestItem.active {
+      .suggestTitle {
+        height: 38px;
+        line-height: 38px;
+        font-size: 22px;
+        color: #fff;
+        margin-bottom: 28px;
+        background-color: #2dc7aa;
+      }
+    }
+  }
+}
+.inner2 {
+  background: #f6f7f9;
+  padding-bottom: 150px;
+  .width1200 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .titleWrap {
+    padding-top: 84px;
+  }
+}
+.mapMsg {
+  margin-top: 73px;
+  color: #333;
+  font-size: 16px;
+  span {
+    color: #2dc7aa;
+  }
+}
+.inner3 {
+  padding-bottom: 190px;
+}
+.inner4 {
+  background: url("../../assets/images/index-bg.png") center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  color: #fff;
+  position: relative;
+  height: 900px;
+  .textwrap {
+    position: absolute;
+    width: 1074px;
+    top: 132px;
+    left: 50%;
+    margin-left: -537px;
+    text-align: left;
+    h2 {
+      font-size: 34px;
+      margin-bottom: 66px;
+      text-align: center;
+      font-weight: 400;
+    }
+    .desc {
+      line-height: 44px;
+      font-size: 18px;
+      text-indent: 36px;
+    }
+    .cardList {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      margin-top: 100px;
+      width: 1020px;
+      .cardItem {
+        width: 312px;
+        height: 298px;
+        background: #ffffff;
+        box-shadow: 0px 7px 9px 0px rgba(107, 107, 107, 0.11);
+        border-radius: 6px;
+        border: 1px solid #d1d1d1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        img {
+          margin-top: 50px;
+        }
+        h4 {
+          color: #2c2c2c;
+          font-size: 24px;
+          line-height: 33px;
+          margin-bottom: 14px;
+          font-weight: 500;
+        }
+        p {
+          color: #788393;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/index/blocks/banner.vue

@@ -0,0 +1,56 @@
+<template>
+  <header class="banner">
+    <div class="content width1200">
+      <div>
+        <h1 class="animate__animated animate__fadeInDown">酷乐秀—全国首家在线直播考级平台</h1>
+      </div>
+      <div>
+        <h3 class="animate__animated animate__fadeInDown delay-300ms">拥有 <strong>200,000</strong> 多节在线直播课程经验，直播考级真实还原</h3>
+      </div>
+      <div>
+        <button class="animate__animated animate__fadeInDown delay-600ms button join">立即入驻</button>
+      </div>
+    </div>
+  </header>
+</template>
+<style lang="less" scoped>
+  .delay-300ms{
+    animation-delay: .3s;
+  }
+  .delay-600ms{
+    animation-delay: .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, .8);
+      >div{
+        padding-top: 30px;
+        overflow: hidden;
+      }
+      h3{
+        margin-top: 30px;
+      }
+      .join{
+        display: inline-block;
+        width: 200px;
+        margin: 0 auto;
+        margin-top: 30px;
+      }
+    }
+  }
+</style>
+<script>
+export default {
+  name: 'banner'
+}
+</script>

src/views/index/blocks/detail.vue

@@ -0,0 +1,30 @@
+<template>
+  <ol class="detail items width1200">
+    <li>考前请确认下载“酷乐秀”最新版本APP</li>
+    <li>打开“酷乐秀”APP后需要允许“酷乐秀”APP使用手机权限</li>
+    <li>已通过H5链接报名的考生首次登录“酷乐秀”APP请使用短信验证码登录</li>
+    <li>请使用“网络检测”、“设备检测”功能确保您所使用的考试网络环境与手机设备处在能够完成直播考试的状态</li>
+    <li>考试当天请确保考试时保证网络通畅、手机不要开启其他应用，保证手机中有至少2G存储空间</li>
+    <li>考生需在考试当天通过“准考证”进入考场进行签到</li>
+    <li>进入考场后，点击【设备检查及考试引导】再次对网络、手机进行检测，并仔细阅读【考试引导】</li>
+    <li>签到完成后请仔细阅读【考试注意事项】，底部按钮会显示当前您还需要等待多少位考生和预计等待时间，请随时注意底部按钮的文字和颜色变化</li>
+    <li>当您的网络出现波动，影响直播考试时，评委会切换到下一位考生继续考试，您需要根据系统提示点击【确定】，再次进行设备检查及考试引导】，确认网络状况正常后重新进行【签到】，重新排队等待考试</li>
+    <li>直播考试若网络状况较差时，评审会要求您使用【录播】完成考试，系统会提示您【当前状态无法正常完成在线直播考试，主考官建议您录播上传考试视频】，请根据提示点击【去录播】</li>
+    <li>进入录播界面后仔细阅读系统指引，在录播规定时间内完成视频录制并上传，点击【完成考试】后不可继续录制视频，请确认完成所有考级曲目录制后点击【完成考试】，考试结束</li>
+  </ol>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="less" scoped>
+  .detail{
+    &.items{
+      padding-left: 40px;
+      li{
+        text-align: left;
+      }
+    }
+  }
+</style>

src/views/index/blocks/infos.vue

@@ -0,0 +1,101 @@
+<template>
+  <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">
+          <p class="desc">信息化赋能打造全流程线上考级模式<br/>随时随地保证用户数据安全，打破时间空间限制将考级生命周期完整呈现</p>
+        </template>
+      </transition>
+      <transition name="fade">
+        <template v-if="active === 1">
+          <div>
+            <p class="desc">招考不受地域限制，支持多层级代理单位，拓展生源</p>
+            <viewmap />
+          </div>
+        </template>
+      </transition>
+      <transition name="fade">
+        <template v-if="active === 2">
+          <p class="desc">考级全流程节点跟进，极大提升管理效率</p>
+        </template>
+      </transition>
+      <transition name="fade">
+        <template v-if="active === 3">
+          <p class="desc">线上化招考流程极大节省考级成本</p>
+        </template>
+      </transition>
+      <transition name="fade">
+        <template v-if="active === 4">
+          <p class="desc">零投入，平台研发完善可立即使用</p>
+        </template>
+      </transition>
+    </div>
+  </div>
+</template>
+<script>
+import viewmap from '@/components/map'
+export default {
+  name: 'infos',
+  components: {
+    viewmap
+  },
+  data() {
+    return {
+      active: 1
+    }
+  },
+  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 .5s ease;
+  }
+  .fade-enter-to,
+  .fade-leave{
+    visibility: visible;
+    opacity: 1;
+  }
+  .infos{
+    min-height: 500px;
+    .headers{
+      display: flex;
+      justify-content: center;
+      padding: 20px 0;
+      >span{
+        cursor: pointer;
+        display: inline-block;
+        padding: 10px 15px;
+        border-radius: 8px;
+        font-weight: bold;
+        transition: all .5s ease;
+        &.active{
+          background-color: #2dc7aa;
+          color: #fff;
+        }
+      }
+    }
+    .content{
+
+    }
+  }
+</style>

src/views/index/index.vue

@@ -1,440 +1,27 @@
 <template>
-  <div>
-    <div class="topBanner">
-      <!-- <img src="@/assets/images/topBanner.png"
-           alt=""
-           width="100%"> -->
-      <div class="width1200 goinWrap">
-        <div class="goinBox"
-             @click="showForm = true">立即入驻</div>
-      </div>
-
-    </div>
-    <div class="inner width1200">
-      <div class="goodList">
-        <div class="listItem">
-          <img src="@/assets/images/good2.png"
-               alt="">
-          <p class="title">生源拓展</p>
-          <p class="subTitle">线上化招考全流程<br /> 不受地域限制扩张生源地</p>
-        </div>
-        <div class="listItem">
-          <img src="@/assets/images/good1.png"
-               alt="">
-          <p class="title">高效管理</p>
-          <p class="subTitle">覆盖考级生命周期<br /> 极大的提升管理效率</p>
-        </div>
-        <div class="listItem">
-          <img src="@/assets/images/good3.png"
-               alt="">
-          <p class="title">节省成本</p>
-          <p class="subTitle">全线上运营模式<br /> 节省支出成本</p>
-        </div>
-      </div>
-      <div class="titleWrap">
-        <img src="@/assets/images/title1.png"
-             width="100%"
-             alt="">
-      </div>
-      <div class="suggest">
-        <div class="suggestList">
-          <div class="suggestItem "
-               :class="suggestIndex ===1?'active':''"
-               @mouseover="suggestIndex=1">
-            <div class="suggestTitle">在线报名</div>
-            <div class="msg"
-                 style="width:200px">考生在线报名，考级信息一手掌握</div>
-          </div>
-          <div class="suggestItem"
-               :class="suggestIndex ===2?'active':''"
-               @mouseover="suggestIndex=2">
-            <div class="suggestTitle">高品质直播考场</div>
-            <div class="msg"
-                 style="width:200px">高保真、高品质的音视频输出， 最大限度还原真实考场</div>
-          </div>
-          <div class="suggestItem"
-               :class="suggestIndex ===3?'active':''"
-               @mouseover="suggestIndex=3">
-            <div class="suggestTitle">在线录播</div>
-            <div class="msg"
-                 style="width:200px">录播考试兼容各种考试场景</div>
-          </div>
-        </div>
-        <div class="suggestImgList">
-          <div class="suggestImg"
-               v-show="suggestIndex ===1">
-            <img src="@/assets/images/phone1.png"
-                 alt=""
-                 width="100%">
-          </div>
-          <div class="suggestImg"
-               v-show="suggestIndex ===2">
-            <img src="@/assets/images/phone2.png"
-                 alt=""
-                 width="100%">
-          </div>
-          <div class="suggestImg"
-               v-show="suggestIndex ===3">
-            <img src="@/assets/images/phone3.png"
-                 alt=""
-                 width="100%">
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="inner2">
-      <div class="width1200">
-        <div class="titleWrap">
-          <img src="@/assets/images/title2.png"
-               width="100%"
-               alt="">
-        </div>
-        <div class="suggest">
-          <div class="suggestList"
-               style="width:700px;">
-            <div class="suggestItem"
-                 :class="mapIndex ===1?'active':''"
-                 @mouseover="mapIndex=1">
-              <div class="suggestTitle">考级生命周期</div>
-              <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
-            </div>
-            <div class="suggestItem "
-                 :class="mapIndex ===2?'active':''"
-                 @mouseover="mapIndex=2">
-              <div class="suggestTitle">生源拓展</div>
-              <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
-            </div>
-
-          </div>
-          <div class="suggestImgList">
-            <div class="suggestImg"
-                 v-show="mapIndex ===2">
-              <img src="@/assets/images/map.png"
-                   alt=""
-                   width="100%">
-              <p class="mapMsg">支持<span>多级下属合作单位</span>线上招生，打破生源地空间限制，将招考范围<span>推向全国</span></p>
-            </div>
-            <div class="suggestImg"
-                 v-show="mapIndex ===1">
-              <img src="@/assets/images/map1.png"
-                   alt=""
-                   width="1092">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="inner width1200 inner3">
-      <div class="titleWrap">
-        <img src="@/assets/images/title3.png"
-             width="100%"
-             alt="">
-      </div>
-      <div class="suggest"
-           style="margin-top:40px">
-        <div class="suggestList">
-          <div class="suggestItem "
-               :class="onlineIndex ===1?'active':''"
-               @mouseover="onlineIndex=1">
-            <div class="suggestTitle">直播互动</div>
-            <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
-          </div>
-          <div class="suggestItem"
-               :class="onlineIndex ===2?'active':''"
-               @mouseover="onlineIndex=2">
-            <div class="suggestTitle">在线评审</div>
-            <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
-          </div>
-        </div>
-        <div class="suggestImgList"
-             style="margin-top:40px">
-          <div class="suggestImg"
-               v-show="onlineIndex ===1">
-            <img src="@/assets/images/look.png"
-                 alt=""
-                 width="712px">
-            <p class="mapMsg">直播考试<span>视频互动</span>，还原线下考场真实氛围</p>
-          </div>
-          <div class="suggestImg"
-               v-show="onlineIndex ===2">
-            <img src="@/assets/images/look1.png"
-                 alt=""
-                 width="712px">
-            <p class="mapMsg">考官<span>在线评审</span>，考级视频<span>录像回放</span> ，最大限度保证考试公正</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="inner inner4">
-      <!-- <img src="@/assets/images/index-bg.png"
-           width="100%"
-           alt=""> -->
-      <div class="textwrap">
-        <h2>技术赋能考级，为行业带来崭新一页</h2>
-        <p class="desc">酷乐秀是武汉市景明云乐网络科技有限公司专为全国音乐等级考试和音乐类比赛研发的服务平台。为合作机构提供远程视频直播、录播考级的技术支持，独创“音乐演奏模式”高度还原乐器演奏的现场感及音色。同步还原线下考级场景，让合作机构和考生公平公正，省时省力的通过酷乐秀实现考级完整生命周期。</p>
-        <div class="cardList">
-          <div class="cardItem">
-            <img src="@/assets/images/card1.png"
-                 width="110px"
-                 height="88px"
-                 alt="">
-            <h4>技术保障</h4>
-            <p>资深技术团队开发</p>
-          </div>
-          <div class="cardItem">
-            <img src="@/assets/images/card2.png"
-                 width="110px"
-                 height="88px"
-                 alt="">
-            <h4>深度融合</h4>
-            <p>全面深入音乐教育行业</p>
-          </div>
-          <div class="cardItem">
-            <img src="@/assets/images/card3.png"
-                 width="110px"
-                 height="88px"
-                 alt="">
-            <h4>节省成本</h4>
-            <p>全线上运营模式节省支出成本</p>
-          </div>
-        </div>
-      </div>
-
-    </div>
-    <silder :showForm='showForm'
-            @changeStatus='changeStatus' />
-
+  <div class="container">
+    <banner />
+    <infos />
+    <detail />
+    <demos />
   </div>
 </template>
+<style lang="less" scoped>
+  .container{
+    min-height: 1000px;
+  }
+</style>
 <script>
-import silder from '@/components/silder.vue'
+import banner from './blocks/banner'
+import infos from './blocks/infos'
+import detail from './blocks/detail'
+
 export default {
+  name: 'indexpage',
   components: {
-    silder
-  },
-  data () {
-    return {
-      suggestIndex: 1,
-      mapIndex: 1,
-      onlineIndex: 1,
-      showForm: false
-
-    }
-  },
-  methods: {
-    changeStatus (val) {
-      this.showForm = val;
-    }
+    banner,
+    infos,
+    detail,
   }
 }
 </script>
-<style lang="less" scoped>
-img {
-  vertical-align: middle;
-}
-.topBanner {
-  background: url("../../assets/images/topBanner.png") center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  position: relative;
-  height: 465px;
-  .goinWrap {
-    position: relative;
-    height: 465px;
-    .goinBox {
-      width: 150px;
-      height: 44px;
-      background: #2dc7aa;
-      border-radius: 4px;
-      line-height: 44px;
-      font-size: 16px;
-      color: #ffffff;
-      position: absolute;
-      left: 0;
-      bottom: 167px;
-      cursor: pointer;
-      &:hover {
-        background-color: #2ac0a3;
-      }
-    }
-  }
-}
-.inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .goodList {
-    margin-top: 92px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    width: 1062px;
-    .listItem {
-      padding: 33px 80px 50px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 320px;
-      height: 350px;
-      background: #ffffff;
-      cursor: pointer;
-      border-radius: 8px;
-      border: 1px solid #dedede;
-      img {
-        border-radius: 4px;
-      }
-      &:hover {
-        box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.06);
-      }
-      .title {
-        margin: 13px 0;
-        height: 33px;
-        font-size: 24px;
-        font-weight: 500;
-        color: #2c2c2c;
-        line-height: 33px;
-        font-weight: 500;
-        width: 180px;
-      }
-      .subTitle {
-        font-weight: 400;
-        color: #788393;
-        line-height: 20px;
-        font-size: 14px;
-        width: 180px;
-      }
-    }
-  }
-  .titleWrap {
-    margin-top: 85px;
-  }
-}
-.suggest {
-  margin-top: 85px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  // width: 740px;
-  .suggestList {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    // margin-bottom: 71px;
-    .suggestItem {
-      width: 220px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      cursor: pointer;
-      .suggestTitle {
-        height: 38px;
-        line-height: 38px;
-        font-size: 22px;
-        color: #2c2c2c;
-        margin-bottom: 28px;
-        border-radius: 4px;
-        display: inline-block;
-        padding: 0 21px;
-      }
-      .msg {
-        color: #788393;
-        line-height: 24px;
-        font-size: 15px;
-      }
-    }
-    .suggestItem.active {
-      .suggestTitle {
-        height: 38px;
-        line-height: 38px;
-        font-size: 22px;
-        color: #fff;
-        margin-bottom: 28px;
-        background-color: #2dc7aa;
-      }
-    }
-  }
-}
-.inner2 {
-  background: #f6f7f9;
-  padding-bottom: 150px;
-  .width1200 {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .titleWrap {
-    padding-top: 84px;
-  }
-}
-.mapMsg {
-  margin-top: 73px;
-  color: #333;
-  font-size: 16px;
-  span {
-    color: #2dc7aa;
-  }
-}
-.inner3 {
-  padding-bottom: 190px;
-}
-.inner4 {
-  background: url("../../assets/images/index-bg.png") center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  color: #fff;
-  position: relative;
-  height: 900px;
-  .textwrap {
-    position: absolute;
-    width: 1074px;
-    top: 132px;
-    left: 50%;
-    margin-left: -537px;
-    text-align: left;
-    h2 {
-      font-size: 34px;
-      margin-bottom: 66px;
-      text-align: center;
-      font-weight: 400;
-    }
-    .desc {
-      line-height: 44px;
-      font-size: 18px;
-      text-indent: 36px;
-    }
-    .cardList {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-around;
-      margin-top: 100px;
-      width: 1020px;
-      .cardItem {
-        width: 312px;
-        height: 298px;
-        background: #ffffff;
-        box-shadow: 0px 7px 9px 0px rgba(107, 107, 107, 0.11);
-        border-radius: 6px;
-        border: 1px solid #d1d1d1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        img {
-          margin-top: 50px;
-        }
-        h4 {
-          color: #2c2c2c;
-          font-size: 24px;
-          line-height: 33px;
-          margin-bottom: 14px;
-          font-weight: 500;
-        }
-        p {
-          color: #788393;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-}
-</style>