09/18 11:05

1111

src/components/footerSection.vue

@@ -34,6 +34,10 @@
             </div>
           </div>
           <div class="friend-ship">
+            <div class="hotLine">
+              <h2>咨询热线</h2>
+              <p>400 - 8851569<span>（周一至周五 09:00~21:00）</span></p>
+            </div>
             <div class="line-wrap">
               <h2>友情链接</h2>
               <div class="item-Wrap">
@@ -48,10 +52,7 @@
 
               </div>
             </div>
-            <div class="hotLine">
-              <h2>咨询热线</h2>
-              <p>400 - 8851569<span>（周一至周五 09:00~21:00）</span></p>
-            </div>
+
           </div>
 
         </div>
@@ -92,7 +93,7 @@ export default {
     flex-direction: row;
     justify-content: space-between;
     h2 {
-      color: #cecece;
+      color: #fff;
       font-size: 14px;
       line-height: 31px;
       text-align: left;
@@ -105,7 +106,7 @@ export default {
       .qrcode-item {
         display: inline-block;
         font-size: 0;
-        padding-right: 24px;
+        padding-right: 34px;
         p {
           font-size: 12px;
           color: #cecece;
@@ -146,6 +147,7 @@ export default {
       .hotLine {
         text-align: left;
         color: #cecece;
+        margin-right: 30px;
         p {
           font-size: 16px;
           line-height: 37px;

src/components/headerSection.vue

@@ -21,7 +21,7 @@
         <a :class="checkActive==6?'active':''"
            @click="change(6,'aboutUs')">关于我们</a>
         <div class="bandBtn"
-             @click="goKu">合作机构</div>
+             @click="goKu">合作机构登录</div>
       </div>
     </div>
   </div>
@@ -114,7 +114,7 @@ export default {
   width: 112px;
   height: 30px;
   background: #2dc7aa;
-  border-radius: 4px;
+  // border-radius: 4px;
   color: #fff;
   margin-left: 70px;
   line-height: 30px;
@@ -165,9 +165,9 @@ export default {
       &::after {
         position: absolute;
         content: "";
-        top: 140%;
-        left: 0;
-        width: 100%;
+        top: 180%;
+        left: 25%;
+        width: 50%;
         height: 3px;
         background-color: #2dc7aa;
         z-index: 100;
@@ -192,9 +192,9 @@ export default {
     &::after {
       position: absolute;
       content: "";
-      top: 140%;
-      left: 0;
-      width: 100%;
+      top: 180%;
+      left: 25%;
+      width: 50%;
       height: 3px;
       background-color: #2dc7aa;
       z-index: 100;

src/views/index/blocks/aboutUs.vue

@@ -8,6 +8,7 @@
       </div>
       <img src="../images/about.png"
            width="400px"
+           height="237px"
            alt="">
     </div>
   </div>
@@ -35,7 +36,8 @@ export default {
     font-weight: bold;
     margin: 73px 0 87px;
     font-weight: 400;
-    letter-spacing: 3px;
+    letter-spacing: 2px;
+    font-size: 34px;
   }
   .detailWrap {
     width: 1000px;

src/views/index/blocks/banner.vue

@@ -10,10 +10,10 @@
       <div>
         <img class="animate__animated animate__fadeInDown delay-300ms"
              src="../images/bottomTitle.png"
-             width="944"
+             width="628"
              alt="">
       </div>
-      <div>
+      <div class="buttonWrap">
         <div class="animate__animated animate__fadeInDown delay-600ms button join "
              @click="joinIn">立即入驻</div>
         <div class="animate__animated animate__fadeInDown delay-600ms button goinBox"
@@ -41,21 +41,26 @@
     align-items: center;
     justify-content: center;
     text-align: center;
+
     color: rgba(255, 255, 255, 0.8);
     > div {
       padding-top: 30px;
       overflow: hidden;
+      margin-top: -6px;
     }
     h3 {
       margin-top: 30px;
     }
+    .buttonWrap {
+      padding-top: 0;
+    }
     .join {
       display: inline-block;
       width: 150px;
       height: 46px;
       // margin: 0 auto;
       margin-top: 56px;
-      margin-right: 12px;
+      margin-right: 8px;
       line-height: 46px;
       font-size: 16px;
       background: #2dc7aa;

src/views/index/blocks/consult.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="consult">
     <div class="mask">
-      <h2>行业咨询</h2>
+      <h2>行业资讯</h2>
       <div class="maskCore">
         <!-- <div v-swiper:mySwiper="swiperOption"
              class="swiper-container"
@@ -104,14 +104,17 @@
           </el-carousel-item>
         </el-carousel> -->
 
-         <div class="client-love-work">
+        <div class="client-love-work">
           <div class="swiper">
-            <swiper ref="mySwiper" class="current-swiper" :options="swiperOptions">
+            <swiper ref="mySwiper"
+                    class="current-swiper"
+                    :options="swiperOptions">
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(1)">
+                <div class="textItem"
+                     @click="gotoDetail(1)">
                   <img src="../images/consult1.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>承办单位和定点机构有什么区别</h4>
                     <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
@@ -119,10 +122,11 @@
                 </div>
               </swiper-slide>
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(2)">
+                <div class="textItem"
+                     @click="gotoDetail(2)">
                   <img src="../images/consult2.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
                     <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
@@ -130,10 +134,11 @@
                 </div>
               </swiper-slide>
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(3)">
+                <div class="textItem"
+                     @click="gotoDetail(3)">
                   <img src="../images/consult3.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>十级琴霸的备考建议</h4>
                     <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
@@ -141,10 +146,11 @@
                 </div>
               </swiper-slide>
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(4)">
+                <div class="textItem"
+                     @click="gotoDetail(4)">
                   <img src="../images/consult4.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>音乐等艺术等科目纳入“新中考”</h4>
                     <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
@@ -152,15 +158,22 @@
                 </div>
               </swiper-slide>
             </swiper>
-            <div class="swiper-button-next swiper-button-white" @click="onNext" slot="button-next"></div>
-            <div class="swiper-button-prev swiper-button-white" @click="onPrev" slot="button-prev"></div>
+            <div class="swiper-button-next swiper-button-white"
+                 @click="onNext"
+                 slot="button-next"></div>
+            <div class="swiper-button-prev swiper-button-white"
+                 @click="onPrev"
+                 slot="button-prev"></div>
 
-            <swiper ref="leftSwiper" class="left-swiper" :options="leftOptions">
+            <swiper ref="leftSwiper"
+                    class="left-swiper"
+                    :options="leftOptions">
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(4)">
+                <div class="textItem"
+                     @click="gotoDetail(4)">
                   <img src="../images/consult4.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>音乐等艺术等科目纳入“新中考”</h4>
                     <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
@@ -168,10 +181,11 @@
                 </div>
               </swiper-slide>
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(1)">
+                <div class="textItem"
+                     @click="gotoDetail(1)">
                   <img src="../images/consult1.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>承办单位和定点机构有什么区别</h4>
                     <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
@@ -179,10 +193,11 @@
                 </div>
               </swiper-slide>
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(2)">
+                <div class="textItem"
+                     @click="gotoDetail(2)">
                   <img src="../images/consult2.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
                     <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
@@ -190,10 +205,11 @@
                 </div>
               </swiper-slide>
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(3)">
+                <div class="textItem"
+                     @click="gotoDetail(3)">
                   <img src="../images/consult3.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>十级琴霸的备考建议</h4>
                     <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
@@ -202,12 +218,15 @@
               </swiper-slide>
             </swiper>
 
-            <swiper ref="rightSwiper" class="right-swiper" :options="rightOptions">
+            <swiper ref="rightSwiper"
+                    class="right-swiper"
+                    :options="rightOptions">
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(2)">
+                <div class="textItem"
+                     @click="gotoDetail(2)">
                   <img src="../images/consult2.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
                     <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
@@ -215,10 +234,11 @@
                 </div>
               </swiper-slide>
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(3)">
+                <div class="textItem"
+                     @click="gotoDetail(3)">
                   <img src="../images/consult3.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>十级琴霸的备考建议</h4>
                     <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
@@ -226,10 +246,11 @@
                 </div>
               </swiper-slide>
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(4)">
+                <div class="textItem"
+                     @click="gotoDetail(4)">
                   <img src="../images/consult4.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>音乐等艺术等科目纳入“新中考”</h4>
                     <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
@@ -237,10 +258,11 @@
                 </div>
               </swiper-slide>
               <swiper-slide>
-                <div class="textItem" @click="gotoDetail(1)">
+                <div class="textItem"
+                     @click="gotoDetail(1)">
                   <img src="../images/consult1.png"
-                      alt=""
-                      width="369px">
+                       alt=""
+                       width="369px">
                   <div class="textWrap">
                     <h4>承办单位和定点机构有什么区别</h4>
                     <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
@@ -290,20 +312,20 @@ export default {
     swiper () {
       return this.$refs.mySwiper.$swiper
     },
-    leftSwiper() {
-        return this.$refs.leftSwiper.$swiper
+    leftSwiper () {
+      return this.$refs.leftSwiper.$swiper
     },
-    rightSwiper() {
-        return this.$refs.rightSwiper.$swiper
+    rightSwiper () {
+      return this.$refs.rightSwiper.$swiper
     }
   },
   methods: {
-    onNext() {
+    onNext () {
       this.swiper.slideNext();
       this.leftSwiper.slideNext()
       this.rightSwiper.slideNext()
     },
-    onPrev() {
+    onPrev () {
       this.swiper.slidePrev();
       this.leftSwiper.slidePrev();
       this.rightSwiper.slidePrev();
@@ -345,6 +367,7 @@ export default {
       color: #ffffff;
       line-height: 48px;
       margin-bottom: 78px;
+      letter-spacing: 2px;
     }
     .maskCore {
       width: 960px;
@@ -353,6 +376,7 @@ export default {
         width: 369px;
         height: 414px;
         background-color: #fff;
+        cursor: pointer;
         .textWrap {
           padding: 24px 24px 48px;
           h4 {
@@ -410,82 +434,81 @@ export default {
   }
 }
 
-
 .client-love-work {
-    .swiper {
-        max-width: 1200px;
-        margin: 0 auto 40px;
-        position: relative;
-        .swiper-container {
-            width: 369px;
-            height: 414px;
-            border-radius: 8px;
-            position: relative;
-            z-index: 99;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
-        }
-        .left-swiper,
-        .right-swiper {
-            position: absolute;
-            z-index: 1;
-            transform: scale(.85);
-            opacity: 0.7;
-            .swiper-slide {
-                .swiper-box {
-                    background: rgba(0, 0, 0, .7);
-                }
-            }
-        }
-        .left-swiper {
-            left: 0;
-            top: 0;
-            // img {
-            //     left: 0;
-            // }
-        }
-        .right-swiper {
-            top: 0;
-            right: 0;
-            // img {
-            //     right: 0;
-            // }
-        }
+  .swiper {
+    max-width: 1200px;
+    margin: 0 auto 40px;
+    position: relative;
+    .swiper-container {
+      width: 369px;
+      height: 414px;
+      // border-radius: 8px;
+      position: relative;
+      z-index: 99;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
     }
-    .swiper-slide {
-        position: relative;
-        overflow: hidden;
+    .left-swiper,
+    .right-swiper {
+      position: absolute;
+      z-index: 1;
+      transform: scale(0.85);
+      opacity: 0.7;
+      .swiper-slide {
         .swiper-box {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            text-align: center;
-            background: rgba(0, 92, 185, .7);
+          background: rgba(0, 0, 0, 0.7);
         }
+      }
+    }
+    .left-swiper {
+      left: 0;
+      top: 0;
+      // img {
+      //     left: 0;
+      // }
     }
-    .swiper-button-prev,
-    .swiper-button-next {
-      cursor: pointer;
+    .right-swiper {
+      top: 0;
+      right: 0;
+      // img {
+      //     right: 0;
+      // }
+    }
+  }
+  .swiper-slide {
+    position: relative;
+    overflow: hidden;
+    .swiper-box {
       position: absolute;
-      width: 40px;
-      height: 40px;
-      background: url("../images/arrow.png") no-repeat center;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      background: rgba(0, 92, 185, 0.7);
+    }
+  }
+  .swiper-button-prev,
+  .swiper-button-next {
+    cursor: pointer;
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    background: url("../images/arrow.png") no-repeat center;
+    background-size: 40px 40px;
+    right: -115px;
+    top: 190px;
+    &:hover {
+      background: url("../images/active-arrow.png") no-repeat center;
       background-size: 40px 40px;
-      right: -115px;
-      top: 190px;
-      &:hover {
-        background: url("../images/active-arrow.png") no-repeat center;
-        background-size: 40px 40px;
-      }
-        &::after {
-        content: '';
-      }
     }
-    .swiper-button-prev {
-      left: -115px;
-      top: 190px;
-      transform: rotate(180deg);
+    &::after {
+      content: "";
     }
+  }
+  .swiper-button-prev {
+    left: -115px;
+    top: 190px;
+    transform: rotate(180deg);
+  }
 }
 </style>

src/views/index/blocks/detail.vue

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

src/views/index/blocks/videoList.vue

@@ -109,6 +109,9 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+/deep/.el-collapse-item__wrap {
+  border-bottom: none !important;
+}
 .videoList {
   display: flex;
   flex-direction: column;
@@ -170,14 +173,14 @@ export default {
   margin: 80px 0 60px;
   .left {
     background-color: #fff;
-    margin-right: 50px;
+    margin-right: 20px;
     width: 220px;
     border-top: none;
     .title {
       height: 70px;
       line-height: 70px;
       // border-top: 1px solid #e9e9e9;
-      // border-bottom: 1px solid #e9e9e9;
+      border-bottom: none;
       cursor: pointer;
       font-size: 20px;
       font-weight: 500;
@@ -250,6 +253,9 @@ export default {
       }
     }
   }
+  /deep/.el-collapse {
+    border-top: none !important;
+  }
   /deep/.el-collapse-item__header {
     height: 70px !important;
     line-height: 70px !important;