09/22 16:56

111

build/webpack.base.conf.js

@@ -42,7 +42,7 @@ module.exports = {
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
       {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        test: /\.(png|jpe?g|gif|svg|pdf)(\?.*)?$/,
         loader: 'url-loader',
         options: {
           limit: 10000,

src/views/index/blocks/aboutUs.vue

@@ -35,7 +35,6 @@ export default {
     color: #2c2c2c;
     margin: 73px 0 87px;
     font-weight: 500;
-    letter-spacing: 2px;
     font-size: 34px;
   }
   .detailWrap {

src/views/index/blocks/consult.vue

@@ -3,108 +3,7 @@
     <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>  -->
-        <!-- <div @click='prev'
-             class="prev"></div>
-        <div @click='next'
-             class="next"></div>
-        <el-carousel :interval="4000"
-                     type="card"
-                     height="400px"
-                     arrow="never"
-                     ref="carousel"
-                     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 class="client-love-work">
+        <!-- <div class="client-love-work">
           <div class="swiper">
             <swiper ref="mySwiper"
                     class="current-swiper"
@@ -271,8 +170,65 @@
               </swiper-slide>
             </swiper>
           </div>
-        </div>
+        </div> -->
+        <swiper ref="rightSwiper"
+                class="right-swiper"
+                :options="rightOptions">
+          <swiper-slide class="swiper-slide">
+            <div class="textItem"
+                 @click="gotoDetail(2)">
+              <img src="../images/consult2.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
+                <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
+              </div>
+            </div>
+          </swiper-slide>
+          <swiper-slide class="swiper-slide">
+            <div class="textItem"
+                 @click="gotoDetail(3)">
+              <img src="../images/consult3.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>十级琴霸的备考建议</h4>
+                <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
+              </div>
+            </div>
+          </swiper-slide>
+          <swiper-slide class="swiper-slide">
+            <div class="textItem"
+                 @click="gotoDetail(4)">
+              <img src="../images/consult4.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>音乐等艺术等科目纳入“新中考”</h4>
+                <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
+              </div>
+            </div>
+          </swiper-slide>
+          <swiper-slide class="swiper-slide">
+            <div class="textItem"
+                 @click="gotoDetail(1)">
+              <img src="../images/consult1.png"
+                   alt=""
+                   width="369px">
+              <div class="textWrap">
+                <h4>承办单位和定点机构有什么区别</h4>
+                <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+              </div>
+            </div>
+          </swiper-slide>
 
+        </swiper>
+        <div class="prev"
+             @click="onPrev"></div>
+        <!--    -->
+        <div class="next"
+             @click="onNext"></div>
       </div>
 
     </div>
@@ -292,42 +248,76 @@ export default {
   },
   data () {
     return {
-      swiperOptions: {
-        loop: true,
-        allowTouchMove: false
-      },
-      leftOptions: {
-        loop: true,
-        allowTouchMove: false
-      },
+      // swiperOptions: {
+      //   loop: true,
+      //   allowTouchMove: false
+      // },
+      // leftOptions: {
+      //   loop: true,
+      //   allowTouchMove: false
+      // },
       rightOptions: {
+        watchSlidesProgress: true,
+        slidesPerView: "auto",
+        centeredSlides: true,
+        allowTouchMove: false,
         loop: true,
-        allowTouchMove: false
+        autoplay: false,
+
+        on: {
+          progress: function () {
+            for (let i = 0; i < this.slides.length; i++) {
+              let modify = 1;
+              var slide = this.slides.eq(i);
+              var slideProgress = this.slides[i].progress;
+              if (Math.abs(slideProgress) > 1) {
+                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
+              }
+              let translate = slideProgress * modify * 130 + "px";
+              let scale = 1 - Math.abs(slideProgress) / 9;
+              let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
+              slide.transform(
+                "translateX(" + translate + ") scale(" + scale + ")"
+              );
+              slide.css("zIndex", zIndex);
+              slide.css("opacity", 1);
+              if (Math.abs(slideProgress) > 1) {
+                slide.css("opacity", 0);
+              }
+            }
+          },
+          setTransition: function (swiper, transition) {
+            for (var i = 0; i < this.slides.length; i++) {
+              var slide = this.slides.eq(i);
+              slide.transition(transition);
+            }
+          }
+        }
       }
     }
   },
   mounted () {
   },
   computed: {
-    swiper () {
-      return this.$refs.mySwiper.$swiper
-    },
-    leftSwiper () {
-      return this.$refs.leftSwiper.$swiper
-    },
+    // swiper () {
+    //   return this.$refs.mySwiper.$swiper
+    // },
+    // leftSwiper () {
+    //   return this.$refs.leftSwiper.$swiper
+    // },
     rightSwiper () {
       return this.$refs.rightSwiper.$swiper
     }
   },
   methods: {
     onNext () {
-      this.swiper.slideNext();
-      this.leftSwiper.slideNext()
+      // this.swiper.slideNext();
+      // this.leftSwiper.slideNext()
       this.rightSwiper.slideNext()
     },
     onPrev () {
-      this.swiper.slidePrev();
-      this.leftSwiper.slidePrev();
+      // this.swiper.slidePrev();
+      // this.leftSwiper.slidePrev();
       this.rightSwiper.slidePrev();
     },
     gotoDetail (num) {
@@ -367,11 +357,13 @@ export default {
       color: #ffffff;
       line-height: 48px;
       margin-bottom: 78px;
-      letter-spacing: 2px;
     }
     .maskCore {
       width: 960px;
       position: relative;
+      .swiper-slide {
+        width: 369px;
+      }
       .textItem {
         width: 369px;
         height: 414px;
@@ -434,81 +426,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(0.85);
-      opacity: 0.7;
-      .swiper-slide {
-        .swiper-box {
-          background: rgba(0, 0, 0, 0.7);
-        }
-      }
-    }
-    .left-swiper {
-      left: 0;
-      top: 0;
-      // img {
-      //     left: 0;
-      // }
-    }
-    .right-swiper {
-      top: 0;
-      right: 0;
-      // img {
-      //     right: 0;
-      // }
-    }
-  }
-  .swiper-slide {
-    position: relative;
-    overflow: hidden;
-    .swiper-box {
-      position: absolute;
-      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;
-    }
-    &::after {
-      content: "";
-    }
-  }
-  .swiper-button-prev {
-    left: -115px;
-    top: 190px;
-    transform: rotate(180deg);
-  }
-}
+// .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(0.85);
+//       opacity: 0.7;
+//       .swiper-slide {
+//         .swiper-box {
+//           background: rgba(0, 0, 0, 0.7);
+//         }
+//       }
+//     }
+//     .left-swiper {
+//       left: 0;
+//       top: 0;
+//       // img {
+//       //     left: 0;
+//       // }
+//     }
+//     .right-swiper {
+//       top: 0;
+//       right: 0;
+//       // img {
+//       //     right: 0;
+//       // }
+//     }
+//   }
+//   .swiper-slide {
+//     position: relative;
+//     overflow: hidden;
+//     .swiper-box {
+//       position: absolute;
+//       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;
+//     }
+//     &::after {
+//       content: "";
+//     }
+//   }
+//   .swiper-button-prev {
+//     left: -115px;
+//     top: 190px;
+//     transform: rotate(180deg);
+//   }
+// }
 </style>

src/views/index/blocks/detail.vue

@@ -14,11 +14,28 @@
       <li>10.直播考试若网络状况较差时，评审会要求您使用【录播】完成考试，系统会提示您【当前状态无法正常完成在线直播考试，主考官建议您录播上传考试视频】，请根据提示点击【去录播】</li>
       <li>11.进入录播界面后仔细阅读系统指引，在录播规定时间内完成视频录制并上传，点击【完成考试】后不可继续录制视频，请确认完成所有考级曲目录制后点击【完成考试】，考试结束</li>
     </ol>
+    <div class="width1200">
+      <div class="otherWrap">
+        <a :href="src"
+           target="_blank">查看更多 ></a>
+      </div>
+
+    </div>
+
   </div>
 </template>
 <script>
+
 export default {
 
+  data () {
+    return {
+      src: require('@/assets/matters.pdf'), // pdf文件地址
+    }
+  },
+  methods: {
+
+  }
 }
 </script>
 <style lang="less" scoped>
@@ -29,6 +46,26 @@ export default {
   color: #fff;
   height: 847px;
   display: flex;
+  flex-direction: column;
+  position: relative;
+  .otherWrap {
+    width: 100%;
+    margin-top: 25px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-left: 100px;
+    a {
+      // color: #2dc7aa;
+      color: #fff;
+      text-decoration: none;
+      &:hover {
+        // color: #25ab92;
+        color: #cecece;
+        text-decoration: underline;
+      }
+    }
+  }
 }
 .detail {
   width: 1084px;
@@ -39,7 +76,6 @@ export default {
     font-size: 34px;
     line-height: 48px;
     margin-bottom: 42px;
-    letter-spacing: 2px;
     font-weight: 500;
   }
   &.items {
@@ -53,5 +89,10 @@ export default {
       text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
     }
   }
+  a {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
 }
 </style>