git

src/views/ClassInfo.vue

@@ -1,17 +1,13 @@
 <template>
   <div class="class-box">
     <ratio-div class="thumb-banner" :ratio="0.6">
-      <img width="100%" :src="ClassContent.thumb" alt />
+      <img width="100%" :src="compressImage(ClassContent.thumb)" alt />
     </ratio-div>
 
     <div class="summary">
-      <div class="title">
-        {{ClassContent.title}}
-      </div>
+      <div class="title">{{ClassContent.title}}</div>
       <div class="flex" style="margin-top: 16px">
-        <div class="flex-1 subtitle">
-          {{dateStr}}
-        </div>
+        <div class="flex-1 subtitle">{{dateStr}}</div>
         <div class="flex-0" @click="handleFavor()">
           <span>
             <van-icon size="1.4em" :name="favor.icon" :color="favor.color" />
@@ -22,9 +18,9 @@
     </div>
 
     <div class="content-bar"></div>
-    
+
     <div class="class-box-body">
-      <img :src="ClassContent.content" alt />
+      <img :src=" compressImage(ClassContent.content)" alt />
     </div>
   </div>
 </template>
@@ -32,6 +28,7 @@
 <script>
 import { getCourseInfof, addCollection, deleteCollection } from '@/util/api'
 import { parseTime } from '@/util/formattingData'
+import { compressImage } from '../util/index'
 
 export default {
   components: {
@@ -49,7 +46,7 @@ export default {
   },
   computed: {
     dateStr() {
-      if (!this.startDate || !this.endDate) return '课程时间: 暂无';
+      if (!this.startDate || !this.endDate) return '课程时间: 暂无'
 
       const start = parseTime(this.startDate, '{y}-{m}-{d} {h}:{i}')
       const end = parseTime(this.endDate, '{y}-{m}-{d} {h}:{i}')
@@ -62,7 +59,7 @@ export default {
       return {
         icon: isFavored ? 'star' : 'star-o',
         color: isFavored ? '#2BB898' : '#000',
-        text: isFavored?'已收藏':'收藏',
+        text: isFavored ? '已收藏' : '收藏'
       }
     }
   },
@@ -75,8 +72,9 @@ export default {
     }
   },
   methods: {
+    compressImage,
     onloadClass(id) {
-      const courseId = id || this.$route.query.courseId;
+      const courseId = id || this.$route.query.courseId
 
       getCourseInfof(courseId).then((e) => {
         this.ClassContent = e
@@ -149,7 +147,7 @@ export default {
 
     .star-favor {
       display: inline-block;
-      margin-left: .6em;
+      margin-left: 0.6em;
       vertical-align: top;
     }
   }
@@ -157,7 +155,7 @@ export default {
   .content-bar {
     position: relative;
     margin-top: -1.5em;
-    box-shadow: 0 0 4px 4px rgba(0, 0, 0, .08);
+    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.08);
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
     height: 30px;

src/views/StrongPhoto.vue

@@ -29,7 +29,7 @@
           :key="index"
           width="31vw"
           height="13vh"
-          :src="image.url"
+          :src=" compressImage(image.url)"
           style="padding:0 3px 0 2px"
           @click="showBig(image.url)"
         />
@@ -40,9 +40,9 @@
 </template>
 
 <script>
-import { getPhotoSotr, getPhotos } from '@/util/api'
+import { getPhotoSotr, getPhotos, getBanner } from '@/util/api'
 import { parseTime } from '@/util/formattingData'
-import { getBanner } from '@/util/api'
+import { compressImage } from '../util/index'
 
 export default {
   components: {
@@ -79,6 +79,7 @@ export default {
     this.dataResort()
   },
   methods: {
+    compressImage,
     showBig(val) {
       this.bigImg = [val]
       this.imageShow = true
@@ -125,18 +126,20 @@ export default {
         this.buttList.unshift(item)
       }
     },
+    SeePhotoas(i, pos) {
+      console.log(i)
+      console.log(pos)
+    },
     SeePhotos(i, id) {
       this.activeNum = i
       getPhotos(id).then((e) => {
         this.imageList = e.records
         this.dataResort()
       })
-      // this.clickStyle = !this.clickStyle
     },
     onBanner() {
       getBanner('Wonderful').then((e) => {
         this.photoBannerImages = (e.records || []).map((x) => x.thumb)
-        // console.log(e)
       })
     }
   }

src/views/components/BannerSwipe.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="banner-swipe-box" >
-    <van-swipe class="banner-swipe" :autoplay="3000" @change="i => current = i" :show-indicators="false">
+  <div class="banner-swipe-box">
+    <van-swipe
+      class="banner-swipe"
+      :autoplay="3000"
+      @change="i => current = i"
+      :show-indicators="false"
+    >
       <van-swipe-item v-for="image in list" :key="image">
         <ration-div :ratio="0.6">
-          <van-image width="100%" height="100%" :src="image" />
+          <van-image width="100%" height="100%" :src=" compressImage(image)" />
         </ration-div>
       </van-swipe-item>
     </van-swipe>
@@ -14,21 +19,25 @@
 </template>
 
 <script>
+import { compressImage } from '../../util/index'
 export default {
   name: 'BannerSwipe',
   components: {
-    RationDiv: () => import('@/components/RatioDiv/index.vue'),
+    RationDiv: () => import('@/components/RatioDiv/index.vue')
   },
   props: {
     list: {
       type: Array,
-      default: () => ([])
+      default: () => []
     }
   },
   data() {
     return {
-      current: 0,
+      current: 0
     }
+  },
+  methods: {
+    compressImage
   }
 }
 </script>
@@ -60,11 +69,11 @@ export default {
       background: rgba(0, 0, 0, 0.2);
 
       & + span {
-        margin-left: .2em;
+        margin-left: 0.2em;
       }
     }
     .active {
-      background: rgba(0, 0, 0, .65);
+      background: rgba(0, 0, 0, 0.65);
     }
   }
 }

src/views/components/CourseCard.vue

@@ -2,7 +2,7 @@
   <div class="course-card">
     <div class="media-box">
       <div class="media-head">
-        <img :src="thumb" alt="">
+        <img :src="compressImage(thumb)" alt />
       </div>
       <div class="media-body">
         <div class="title">{{title}}</div>
@@ -10,9 +10,7 @@
       </div>
     </div>
     <div class="card-footer" @click="onDetail">
-      <div class="footer-body">
-        查看详情
-      </div>
+      <div class="footer-body">查看详情</div>
       <div class="footer-action">
         <van-icon name="arrow" />
       </div>
@@ -21,8 +19,8 @@
 </template>
 
 <script>
-import { parseTime } from "@/util/formattingData";
-
+import { parseTime } from '@/util/formattingData'
+import { compressImage } from '../../util/index'
 export default {
   name: 'CourseCard',
   props: {
@@ -34,7 +32,7 @@ export default {
   },
   computed: {
     dateStr() {
-      if (!this.startDate || !this.endDate) return '课程时间: 暂无';
+      if (!this.startDate || !this.endDate) return '课程时间: 暂无'
 
       const start = parseTime(this.startDate, '{y}-{m}-{d} {h}:{i}')
       const end = parseTime(this.endDate, '{y}-{m}-{d} {h}:{i}')
@@ -43,13 +41,16 @@ export default {
     }
   },
   // 组件加载完成执行
-  mounted() {
-  },
+  mounted() {},
   methods: {
+    compressImage,
     onDetail() {
-      this.$router.push({ name: 'ClassInfo', query: { courseId: this.courseId } })
+      this.$router.push({
+        name: 'ClassInfo',
+        query: { courseId: this.courseId }
+      })
     }
-  }  
+  }
 }
 </script>
 
@@ -65,7 +66,8 @@ export default {
     margin-top: 3vw;
   }
 
-  .media-box, .card-footer {
+  .media-box,
+  .card-footer {
     display: flex;
     justify-content: space-between;
   }