111

11

src/components/headerSection.vue

@@ -5,8 +5,7 @@
         <router-link :to="{ path: '/' }"
                      class="logo">
           <img src="../assets/images/logo.png"
-               width="136px"
-               height="40px"
+               width="100%"
                alt="">
         </router-link>
         <div class="menu">
@@ -103,6 +102,7 @@ export default {
   width: 100%;
   top: 0px;
   z-index: 1000;
+  border-bottom: 1px solid #dedede;
   .header-container {
     margin: 0 auto;
     // overflow: hidden;

src/views/aboutUs/index.vue

@@ -1,14 +1,12 @@
 <template>
-  <div>
+  <div class="container">
     <div class="topBanner">
-      <h2 class="msg">关于我们</h2>
+      <!-- <h2 class="msg">关于我们</h2> -->
     </div>
     <div class="msgWrap">
       <div class="msgInfo">
-        <h3>什么是酷乐秀</h3>
-        <p>酷乐秀是武汉景明云乐科技有限公司研发的专为全国音乐等级考试和音乐比赛提供线上服务，是全国首家拥有音乐类专业直播技术的服务平台。独有“音乐演奏模式”高保真还原乐器演奏的现场感及音色，为远程视频直播、录播考级提供技术支持，考生可通过酷乐秀实现考级完整生命周期。同步还原线下考级场景，为合作机构和考生提供公平公正，省时省力的考试体验。</p>
-        <p>酷乐秀提供全流程线上考级方案，考生可通过酷乐秀APP实现线上报名缴费，远程视频直播录播考试，查询考试结果流程。合作机构通过管理后台完成前期推广，线上考试，数据统计等，让合作机构轻松运营。 </p>
-        <p>景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才 ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行二十多万课时。</p>
+        <p>酷乐秀是武汉市景明云乐科技有限公司专为全国音乐等级考试和音乐类比赛研发的服务平台。为合作机构提供远程视频直播、录播考级提供技术支持，我们是全国首家拥有音乐类专业直播技术，独创“音乐演奏模式”，高保真还原乐器演奏的现场感及音色。同步还原线下考级场景，让合作机构和考生公平公正，省时省力的通过酷乐秀实现考级完整生命周期。</p>
+        <p>景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才 ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行二十多万课时。 </p>
         <img src='@/assets/images/aboutUs/about.png'
              width="100%"
              style="margin-top:50px"
@@ -33,12 +31,15 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.container {
+  background-color: #f6f7f9;
+}
 .topBanner {
   background: url("../../assets/images/aboutUs/about-banner.png") center;
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
-  height: 458px;
+  height: 470px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -57,7 +58,7 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 370px;
+  padding-bottom: 200px;
   .msgInfo {
     width: 950px;
     h3 {

src/views/consult/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="container">
     <div class="topBanner">
-      <h2 class="msg">资讯中心</h2>
     </div>
     <div class="infoWrap">
       <div class="infoList">
@@ -11,18 +10,21 @@
                width="100%"
                alt />
           <!-- <p class="time"></p> -->
-          <h2>承办单位和定点机构有什么区别</h2>
-          <p class="info">承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+          <div class="textwarp">
+            <h2>承办单位和定点机构有什么区别</h2>
+            <p class="info">承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+          </div>
         </div>
         <div class="infoItem"
              @click="gotoDetail(2)">
           <img src="@/assets/images/consult/infoMsg2.png"
                width="100%"
                alt />
-          <!-- <p class="time"></p> -->
-          <h2>乐器演奏不清晰不连贯的原因有哪些</h2>
-          <p class="info"> 你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？
-            答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
+          <div class="textwarp">
+            <h2>乐器演奏不清晰不连贯的原因有哪些</h2>
+            <p class="info"> 你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？
+              答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
+          </div>
         </div>
         <div class="infoItem"
              @click="gotoDetail(3)">
@@ -30,8 +32,10 @@
                width="100%"
                alt />
           <!-- <p class="time"></p> -->
-          <h2>十级琴霸的备考建议</h2>
-          <p class="info">考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
+          <div class="textwarp">
+            <h2>十级琴霸的备考建议</h2>
+            <p class="info">考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
+          </div>
         </div>
         <div class="infoItem"
              @click="gotoDetail(4)">
@@ -39,8 +43,10 @@
                width="100%"
                alt />
           <!-- <p class="time"></p> -->
-          <h2>音乐等艺术等科目纳入“新中考”</h2>
-          <p class="info">2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
+          <div class="textwarp">
+            <h2>音乐等艺术等科目纳入“新中考”</h2>
+            <p class="info">2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
+          </div>
         </div>
       </div>
     </div>
@@ -66,12 +72,15 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.container {
+  background-color: #f6f7f9;
+}
 .topBanner {
   background: url("../../assets/images/consult/consultBanner.png") center;
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
-  height: 458px;
+  height: 470px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -91,55 +100,54 @@ export default {
   align-items: center;
 
   .infoList {
-    width: 900px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    margin-top: 56px;
+    width: 988px;
+    margin-top: 60px;
     text-align: left;
-    flex-wrap: wrap;
+
     .infoItem {
-      &:nth-child(3n) {
-        margin-right: 0 !important;
-      }
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      background-color: #fff;
+      width: 988px;
       img {
-        width: 250px;
-        height: 160px;
+        width: 304px;
+        height: 210px;
       }
-      width: 250px;
       margin-bottom: 56px;
       cursor: pointer;
-      margin-right: 74px;
-
-      h2 {
-        margin-top: 20px;
-        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;
+      .textwarp {
+        margin-left: 24px;
+        width: 660px;
+        h2 {
+          margin-top: 20px;
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #1a1a1a;
+          line-height: 33px;
+          height: 57px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .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: 2;
+          -webkit-box-orient: vertical;
+          padding-right: 34px;
+        }
       }
     }
   }

src/views/index/index.vue

@@ -117,9 +117,8 @@
             <div class="suggestImg"
                  v-show="mapIndex ===1">
               <img src="@/assets/images/map1.png"
-                   style="margin-top: 73px;"
                    alt=""
-                   width="100%">
+                   width="1092">
             </div>
           </div>
         </div>

src/views/project/index.vue

@@ -1,8 +1,42 @@
 <template>
-  <div>
+  <div class="container">
     <div class="topBanner">
-      <img class="msg animated fadeInDown"
-           src='@/assets/images/project/projectTitle.png' />
+      <div class="width1200">
+        <div class="btnWrap">
+          <img src="@/assets/images/project/ios.png"
+               @click="openIos"
+               width="136px"
+               height="40px"
+               alt="">
+          <img src="@/assets/images/project/ard.png"
+               width="136px"
+               height="40px"
+               @click="openArd"
+               alt="">
+          <el-popover placement="top"
+                      trigger="hover"
+                      popper-class="Mopopver">
+            <div>
+              <div class="code-item">
+                <img src="@/assets/images/download.png"
+                     width="111px"
+                     height="111px"
+                     alt />
+                <p>扫码下载APP</p>
+              </div>
+            </div>
+            <div class="silderItem"
+                 slot="reference">
+              <img src="@/assets/images/project/2code.png"
+                   width="23px"
+                   height="23px"
+                   alt="">
+            </div>
+          </el-popover>
+
+        </div>
+      </div>
+
     </div>
     <!-- <div class="projectWrap">
       <div class="tab width1200">
@@ -195,91 +229,109 @@ export default {
     change (num) {
       this.activeNum = num;
     },
-    changeStatus () { }
+    changeStatus () { },
+    openIos () {
+      window.open('https://apps.apple.com/cn/app/%E9%85%B7%E4%B9%90%E7%A7%80/id1528132269', '_blank')
+    },
+    openArd () {
+      window.open('https://sj.qq.com/myapp/detail.htm?apkName=com.jinmingyunle.colexiu', '_blank')
+    }
+
   }
 }
 </script>
 <style lang="less">
+.container {
+  background-color: #f6f7f9;
+}
 .topBanner {
   background: url("../../assets/images/project/projectBanner.png") center;
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
-  height: 720px;
+  height: 470px;
   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 {
+
+  .btnWrap {
+    width: 320px;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
-    height: 76px;
-    line-height: 76px;
-    border-bottom: 1px solid #ccc;
-    font-size: 18px;
-    .tabItem {
+    align-items: center;
+    top: 257px;
+    position: relative;
+    img {
       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;
-      }
     }
   }
 }
+// .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;
@@ -326,6 +378,12 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
+  section {
+    border-top: 1px solid #dedede;
+    &:nth-child(1) {
+      border-top: none;
+    }
+  }
 }
 .projectList {
   display: flex;
@@ -333,9 +391,9 @@ export default {
   justify-content: flex-start;
   margin: 80px 0 60px;
   .left {
+    background-color: #fff;
     margin-right: 50px;
     width: 220px;
-    border: 1px solid #dedede;
     border-top: none;
     .title {
       height: 70px;
@@ -351,6 +409,9 @@ export default {
       flex-direction: row;
       justify-content: space-between;
       font-weight: 600;
+      &:nth-child(1) {
+        border-top: none;
+      }
       .el-icon-arrow-right {
         line-height: 70px;
       }
@@ -369,9 +430,9 @@ export default {
     }
   }
   .right {
+    background-color: #fff;
     width: 800px;
     padding: 0 30px 30px;
-    border: 1px solid #dedede;
     h2 {
       color: #1a1a1a;
       margin-bottom: 50px;