11

11

src/components/footerSection.vue

@@ -38,16 +38,13 @@
               <div class="item-Wrap">
                 <div class="friendship-item">
                   <a target="view_window"
-                     href="http://www.key-in.com.cn/index.aspx">key官网</a>
+                     href="http://www.chnmusic.org/">中国音乐家协会</a>
                 </div>
                 <div class="friendship-item">
                   <a target="view_window"
-                     href="http://www.key-in.com.cn/index.aspx">key官网</a>
-                </div>
-                <div class="friendship-item">
-                  <a target="view_window"
-                     href="http://www.key-in.com.cn/index.aspx">key官网</a>
+                     href="https://www.cnorch.com/leaderInfo/list?leaderType=2">中国音协管乐学会低音铜管专业委员会</a>
                 </div>
+
               </div>
             </div>
             <div class="hotLine">
@@ -115,7 +112,7 @@ export default {
       }
     }
     .friend-ship {
-      width: 378px;
+      width: 500px;
       .item-Wrap {
         display: flex;
         flex-direction: row;
@@ -125,7 +122,7 @@ export default {
             font-size: 12px;
             color: #fff;
             line-height: 37px;
-            width: 126px;
+            margin-right: 30px;
             display: inline-block;
             text-align: left;
             &:hover,

src/components/headerSection.vue

@@ -15,11 +15,11 @@
                        :to="{ path: '/' }">首页</router-link>
           <router-link :class="checkActive==2?'active':''"
                        @click.native="change(2)"
-                       :to="{ path: '/brand' }">产品</router-link>
+                       :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>
@@ -40,6 +40,28 @@ export default {
       checkActive: 1
     }
   },
+  mounted () {
+    let url = this.$route
+    console.log(url)
+    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
+      }
+    }
+  },
   methods: {
     change (num) {
       this.checkActive = num;

src/router/index.js

@@ -7,6 +7,7 @@ import detile2 from '@/views/consult/detile2.vue'
 import detile3 from '@/views/consult/detile3.vue'
 import detile4 from '@/views/consult/detile4.vue'
 import aboutUs from '@/views/aboutUs'
+import project from '@/views/project'
 //detile1
 
 Vue.use(Router)
@@ -49,5 +50,10 @@ export default new Router({
       name: 'aboutUs',
       component: aboutUs
     },
+    {
+      path: '/project',
+      name: 'project',
+      component: project
+    },
   ]
 })

src/views/consult/index.vue

@@ -12,34 +12,35 @@
                alt />
           <!-- <p class="time"></p> -->
           <h2>承办单位和定点机构有什么区别</h2>
-          <!-- <p class="info"></p> -->
+          <p class="info">承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
         </div>
         <div class="infoItem"
              @click="gotoDetail(2)">
-          <img src="@/assets/images/consult/infoMsg.png"
+          <img src="@/assets/images/consult/infoMsg2.png"
                width="100%"
                alt />
           <!-- <p class="time"></p> -->
           <h2>乐器演奏不清晰不连贯的原因有哪些</h2>
-          <!-- <p class="info"></p> -->
+          <p class="info"> 你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？
+            答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
         </div>
         <div class="infoItem"
              @click="gotoDetail(3)">
-          <img src="@/assets/images/consult/infoMsg.png"
+          <img src="@/assets/images/consult/infoMsg1.png"
                width="100%"
                alt />
           <!-- <p class="time"></p> -->
           <h2>十级琴霸的备考建议</h2>
-          <!-- <p class="info"></p> -->
+          <p class="info">考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
         </div>
         <div class="infoItem"
              @click="gotoDetail(4)">
-          <img src="@/assets/images/consult/infoMsg.png"
+          <img src="@/assets/images/consult/infoMsg3.png"
                width="100%"
                alt />
           <!-- <p class="time"></p> -->
           <h2>音乐等艺术等科目纳入“新中考”</h2>
-          <!-- <p class="info"></p> -->
+          <p class="info">2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
         </div>
       </div>
     </div>
@@ -108,11 +109,34 @@ export default {
       margin-right: 74px;
 
       h2 {
+        margin-top: 10px;
         font-size: 24px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #1a1a1a;
         line-height: 33px;
+        height: 66px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .info {
+        margin-top: 10px;
+        height: 60px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #808080;
+        line-height: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
       }
     }
   }

src/views/project/index.vue

@@ -1,10 +1,198 @@
 <template>
   <div>
+    <div class="topBanner">
+      <img class="msg"
+           src='@/assets/images/project/projectTitle.png' />
+    </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
+                   loop></video>
+          </div>
+          <div class="infoItem">
+            <video src="@/assets/video/text.mp4"
+                   width="352"
+                   height="640"
+                   autoplay
+                   loop></video>
+            <h3>考级曲谱提前练习</h3>
+          </div>
+          <div class="infoItem">
+            <h3>在线高品质直播</h3>
+            <video src="@/assets/video/onlineText.mp4"
+                   width="352"
+                   height="640"
+                   autoplay
+                   loop></video>
+          </div>
+          <div class="infoItem">
+            <video src="@/assets/video/replay.mp4"
+                   width="352"
+                   height="640"
+                   autoplay
+                   loop></video>
+            <h3>录播考试满足多种场景</h3>
+          </div>
+          <div class="infoItem">
+            <h3>考试结果一键查询</h3>
+            <video src="@/assets/video/query.mp4"
+                   width="352"
+                   height="640"
+                   autoplay
+                   loop></video>
+          </div>
+        </div>
+      </div>
+    </div>
 
   </div>
 </template>
 <script>
 export default {
-
+  data () {
+    return {
+      activeNum: 1
+    }
+  },
+  methods: {
+    change (num) {
+      this.activeNum = num;
+    }
+  }
+}
+</script>
+<style lang="less">
+.topBanner {
+  background: url("../../assets/images/project/projectBanner.png") center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+  height: 720px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .msg {
+    margin-top: 258px;
+    width: 766px;
+    height: 140px;
+  }
+}
+.projectWrap {
+  margin: 24px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .tab {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    height: 76px;
+    line-height: 76px;
+    border-bottom: 1px solid #ccc;
+    font-size: 18px;
+    .tabItem {
+      cursor: pointer;
+      color: #808080;
+      text-decoration: none;
+      line-height: 76px;
+      height: 76px;
+      position: relative;
+      // display: block;
+      text-decoration: none;
+      text-transform: uppercase;
+      transition: 0.5s;
+      &::after {
+        position: absolute;
+        content: "";
+        top: 96%;
+        left: -10%;
+        width: 120%;
+        height: 2px;
+        background-color: #2dc7aa;
+        z-index: 100;
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.5s;
+      }
+      &:hover,
+      &.hover {
+        color: #1a1a1a;
+        font-weight: 600;
+      }
+      &:hover::after {
+        transform: scaleX(1);
+        transform-origin: left;
+      }
+    }
+    .tabItem.active {
+      color: #1a1a1a !important;
+      font-weight: 600;
+      &::after {
+        position: absolute;
+        content: "";
+        top: 96%;
+        left: -10%;
+        width: 120%;
+        height: 2px;
+        background-color: #2dc7aa;
+        z-index: 100;
+        transform: scaleX(1);
+        transform-origin: left;
+      }
+    }
+  }
+}
+.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;
+  }
+  .infoList {
+    .infoItem {
+      margin-top: 40px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 704px;
+      h3 {
+        text-align: center;
+        width: 100%;
+      }
+    }
+  }
 }
-</script>
+</style>