update

src/pages/class3.vue

 <template>
   <div class="class3">
+    <page-back />
+
     <img class="img1" @click="change1" src="../../static/images/class3/more.png" />
     <img class="img2" @click="change2" src="../../static/images/class3/more.png" />
     <img class="img3" @click="change3" src="../../static/images/class3/more.png" />
     <img class="img4" @click="change4" src="../../static/images/class3/back.png" />
-    
+
     <!-- 搜索 -->
     <div class="class3-search">
         <div class="select-item">
@@ -45,7 +47,7 @@
     </div>
 
     <!-- 弹框 -->
-    <bullet-frame  
+    <bullet-frame
     :visible="visible"
     @beforeClose="closePopup"
     >
@@ -259,5 +261,5 @@ export default {
     height: 870px;
     margin:-27px 0px 0px -40px;
 }
- 
-</style>
\ No newline at end of file
+
+</style>

src/pages/growthRecord.vue

 <template>
     <div class="growthRecord">
+        <page-back />
         <div class="content">
 
             <div class="growthRecord-top">

src/pages/progress.vue

@@ -36,7 +36,13 @@
         </div>
 
         <!-- 轮播图 -->
-        <div class="carousel"></div>
+        <div class="carousel">
+            <swiper :options="swiperOption" v-if="activeImgs.length">
+                <swiper-slide class="swiper-slide" v-for="(item, key) in activeImgs" :key="key" >
+                    <img :src=item />
+                </swiper-slide>
+            </swiper>
+        </div>
 
         <!-- 视频 -->
         <div class="video-wrap">
@@ -56,6 +62,14 @@
 import Tab from 'components/Tab'
 import SelectItem from 'components/Select'
 import VideoPlayer from 'components/VideoPlayer'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+
+import img1 from '../../static/images/progress/img1.png'
+import img2 from '../../static/images/progress/img2.png'
+import img3 from '../../static/images/progress/img3.png'
+import img4 from '../../static/images/progress/img4.png'
+import img5 from '../../static/images/progress/img5.png'
 
 export default {
     data () {
@@ -153,6 +167,44 @@ export default {
                         type: 'video/mp4'
                     }
                 ]
+            },
+
+            activeImgs: [img1, img2, img3, img4, img5],
+            swiperOption: {
+                watchSlidesProgress: true,
+                slidesPerView: 'auto',
+                centeredSlides: true,
+                loop: true,
+                loopedSlides: 5,
+                spaceBetween: 0,
+                // autoplay: true,
+                on: {
+                    progress: function (progress) {
+                        for (var i = 0; i < this.slides.length; i++) {
+                            var slide = this.slides.eq(i)
+                            var slideProgress = this.slides[i].progress
+                            var modify = 1
+                            if (Math.abs(slideProgress) > 1) {
+                                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
+                            }
+                            var translate = slideProgress * modify * 570 + 'px'
+                            var scale = 1 - Math.abs(slideProgress) / 3
+                            var 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) > 3) {
+                                slide.css('opacity', 0)
+                            }
+                        }
+                    },
+                    setTransition: function (transition) {
+                        for (var i = 0; i < this.slides.length; i++) {
+                            var slide = this.slides.eq(i)
+                            slide.transition(transition)
+                        }
+                    }
+                }
             }
         }
     },
@@ -160,7 +212,9 @@ export default {
     components: {
         Tab,
         SelectItem,
-        VideoPlayer
+        VideoPlayer,
+        swiper,
+        swiperSlide
     },
 
     mounted () {
@@ -199,6 +253,35 @@ export default {
     left: 50% !important;
     transform: translate(-50%, -50%);
 }
+
+.carousel {
+    .swiper-container {
+        width: 100%;
+        height: 100%;
+
+        .swiper-slide {
+            width: 520px !important;
+            height: 337px;
+            background: rgba(0, 34, 36, 0.3);
+            border-radius: 10px;
+            overflow: hidden;
+
+            &.swiper-slide-prev, &.swiper-slide-next {
+                opacity: .5 !important;
+            }
+
+            &.swiper-slide-active {
+                z-index: 10;
+                opacity: 1 !important;
+            }
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
 </style>
 
 <style lang="less" scoped>
@@ -310,8 +393,8 @@ export default {
     position: absolute;
     top: 432px;
     left: 545px;
-    width: 812px;
-    height: 210px;
+    width: 520px;
+    height: 337px;
 }
 
 .video-wrap {

src/pages/sixthFormStudent.vue

 <template>
     <div class="sixth-page">
+        <page-back />
+
         <div class="left">
             <!-- 身心健康 -->
             <div class="left-top" @click="healthy"></div>
@@ -60,7 +62,7 @@
             </div>
             <div class="edit" @click="edit"></div>
         </div>
-        <bullet-frame  
+        <bullet-frame
             :visible="visible"
             @beforeClose="closePopup"
             :layout="{width: '1102px', height: '792px'}"
@@ -210,8 +212,8 @@ export default {
 }
 </script>
 <style lang="less">
-#swiper1 {
-    widows: 500px;
+.swiper1 {
+    width: 500px;
     height: 208px;
 
     .swiper-container {
@@ -236,6 +238,8 @@ export default {
             }
             img {
                 display: block;
+                width: 100%;
+                height: 100%;
             }
         }
     }
@@ -249,7 +253,7 @@ export default {
     overflow: hidden;
     background: url('@{imagePath}bg.png') no-repeat center;
     margin: 0 auto;
-    verflow: hidden;
+    overflow: hidden;
     .left{
         .left-top{
             width: 96px;