.

src/main.js

   Toast,
   Card,
   NavBar,
-  Image, SwipeItem, Tag, Swipe, Divider, Picker, Popup, List
+  Image, SwipeItem, Tag, Swipe, Divider, Picker, Popup, List,ImagePreview 
 } from 'vant';
 Vue.config.productionTip = false
 
 Vue.use(Divider);
 Vue.use(Swipe);
 Vue.use(Tag);
+Vue.use(ImagePreview);
 Vue.use(NavBar);
 Vue.use(SwipeItem);
 Vue.use(Image);

src/util/formattingData.js

     .replace(/T/g, ' ')
     .replace(/\.[\d]{3}Z/, '')
 
-  console.log("🚀 ~ file: formattingData.js ~ line 6 ~ parseTime ~ time", aTime)
 
   if (arguments.length === 0 || !aTime) {
     return null

src/views/Course.vue

   }
 
   .course-list {
-    margin-top: 2em;
+    margin-top: 10vw;
   }
 
   .custom-indicator {
     text-align: center;
     left: 0;
     right: 0;
-    bottom: -1em;
     z-index: 10;
 
     & > span {

src/views/StrongPhoto.vue

 <template>
-  <!-- <h1>StrongPhoto 精彩集锦</h1> -->
   <div class="Photo-box">
-    <div>
-      <van-swipe :autoplay="3000">
-        <van-swipe-item v-for="(image, index) in photoBannerImages" :key="index">
-          <van-image width="100%" height="100%" :src="image.thumb" />
-        </van-swipe-item>
-      </van-swipe>
-    </div>
-    <div style="display: flex; aline-itme:center;margin-top: 30px;padding-left: 15px; ">
+    <van-swipe :autoplay="3000">
+      <van-swipe-item v-for="(image, index) in photoBannerImages" :key="index">
+        <van-image width="100%" height="100%" :src="image.thumb" />
+      </van-swipe-item>
+    </van-swipe>
+    <div style="display: flex; aline-itme:center;margin-top: 30px;position:relative ">
       <!-- <div :class="`${classStyle?'Zhedie-box Donghua':'Zhedie-box'}`"> -->
       <div :class="{'Zhedie-box': true, 'expand': classStyle}">
         <!-- :class="`${clickStyle?'clickStyle':''}`" -->
       </div>
       <van-icon
         v-show="iconShow"
-        style="left:0; top: 0.6vh;"
+        style="right:4vw; top: 0.6vh; position:absolute"
         :name="`${classStyle?'arrow-up ':'arrow-down'}`"
         @click="animations"
       />
           <div></div>
           <span>{{item.createDate}}</span>
         </div>
-        <span v-for="(image, index) in item.res" :key="index">
-          <van-image width="31vw" :src="image.url" style="padding:0 3px 0 2px" />
-        </span>
+        <van-image v-for="(image, index) in item.res" :key="index" width="31vw" :src="image.url" style="padding:0 3px 0 2px" @click="showBig(image.url)" />
+        <van-image-preview v-model="imageShow" :images="bigImg" />
       </div>
     </div>
   </div>
       classStyle: false,
       clickStyle: false,
       iconShow: true,
+      imageShow: false,
+      bigImg: [],
       activeNum: 0, //下标
       buttList: [],
       photoBannerImages: [],
       newArrImageList: []
     }
   },
-  watch: {},
+  watch: {
+    buttList: {
+      handler(val) {
+        if (val.length !== 0) {
+          this.SeePhotos(0,val[0].packId)
+        }
+      },
+      immediate: true
+    }
+  },
   mounted() {
     this.onBanner()
     this.onLoadSort()
     // }
   },
   methods: {
+    showBig(val) {
+      this.bigImg = [val]
+      this.imageShow = true
+    },
     parseTime,
     dataResort(arr) {
       var newArr = []
           newArr[index].res.push(oldData)
         }
       })
-      console.log(
-        '🚀 ~ file: StrongPhoto.vue ~ line 105 ~ dataResort ~ newArr',
-        newArr
-      )
-
       this.newArrImageList = newArr
     },
     onLoadSort() {
       getPhotoSotr().then((e) => {
         this.buttList = e.records
-        console.log(e.records)
       })
     },
     animations() {
       this.classStyle = !this.classStyle
+      if (this.classStyle === false) {
+        var item =this.buttList[this.activeNum]
+        this.buttList.splice(this.activeNum,1)
+        this.buttList.unshift(item)
+      }
     },
     SeePhotos(i, id) {
-      console.log('🚀 ~ file: StrongPhoto.vue ~ line 94 ~ SeePhotos ~ id', id)
       this.activeNum = i
       getPhotos(id).then((e) => {
         this.imageList = e.records
     onBanner() {
       getBanner('Wonderful').then((e) => {
         this.photoBannerImages = e.records
-        console.log(e)
+        // console.log(e)
       })
     }
   }
     border-radius: 10px;
     margin: 10px auto;
     box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);
-
     height: 33vh;
   }
   .Zhedie-box {
-    width: 90%;
+    padding: 0 4vw;
     overflow: hidden;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    height: 35px;
+    height: 7vw;
     transition: height 0.2s ease;
     &.expand {
       height: 50vh;
     }
 
     > div {
-      padding: 2px 10px;
+      padding: 1.5vw 3vw;
       color: rgb(128, 128, 128);
-      line-height: 28px;
+      margin-right: 1.5vw;
+      margin-bottom: 1vw;
       text-align: center;
       font-size: 10px;
     }

src/views/Tabber.vue

   },
   created() {
     //由于 vant 标签栏路由模式，无法自动加载页面，所以这里需要初始化
-    console.log(this.$route) //打印当前路由属性
+    // console.log(this.$route) //打印当前路由属性
     this.active = 0
 
     switch (this.$route.name) {
   },
   methods: {
     onChange(index) {
-      console.log(index)
+      // console.log(index)
       switch (index) {
         case 0:
           this.$router.push('/')

src/views/components/CourseCard.vue

   box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);
 
   & + & {
-    margin-top: 1.5em;
+    margin-top: 3vw;
   }
 
   .media-box, .card-footer {
   }
 
   .media-box {
-    padding: 1em;
+    padding: 5vw;
     .media-head {
       flex: none;
       width: 20vw;
   }
 
   .card-footer {
-    padding: 1em;
-    border-top: 1px solid rgb(238, 238, 238);
+    padding: 2.5vw 0;
+    margin: 0 5vw;
+    border-top: 2px solid rgb(239, 239, 239);
 
     & > div {
       color: rgb(133, 133, 133);