李志伟 3 anos atrás
pai
commit
551c40aaf1

+ 2
- 1
src/main.js Ver arquivo

@@ -19,7 +19,7 @@ import {
19 19
   Toast,
20 20
   Card,
21 21
   NavBar,
22
-  Image, SwipeItem, Tag, Swipe, Divider, Picker, Popup, List
22
+  Image, SwipeItem, Tag, Swipe, Divider, Picker, Popup, List,ImagePreview 
23 23
 } from 'vant';
24 24
 Vue.config.productionTip = false
25 25
 
@@ -30,6 +30,7 @@ Vue.use(List);
30 30
 Vue.use(Divider);
31 31
 Vue.use(Swipe);
32 32
 Vue.use(Tag);
33
+Vue.use(ImagePreview);
33 34
 Vue.use(NavBar);
34 35
 Vue.use(SwipeItem);
35 36
 Vue.use(Image);

+ 0
- 1
src/util/formattingData.js Ver arquivo

@@ -8,7 +8,6 @@ export function parseTime (time, pattern) {
8 8
     .replace(/T/g, ' ')
9 9
     .replace(/\.[\d]{3}Z/, '')
10 10
 
11
-  console.log("🚀 ~ file: formattingData.js ~ line 6 ~ parseTime ~ time", aTime)
12 11
 
13 12
   if (arguments.length === 0 || !aTime) {
14 13
     return null

+ 1
- 2
src/views/Course.vue Ver arquivo

@@ -121,7 +121,7 @@ export default {
121 121
   }
122 122
 
123 123
   .course-list {
124
-    margin-top: 2em;
124
+    margin-top: 10vw;
125 125
   }
126 126
 
127 127
   .custom-indicator {
@@ -130,7 +130,6 @@ export default {
130 130
     text-align: center;
131 131
     left: 0;
132 132
     right: 0;
133
-    bottom: -1em;
134 133
     z-index: 10;
135 134
 
136 135
     & > span {

+ 36
- 27
src/views/StrongPhoto.vue Ver arquivo

@@ -1,14 +1,11 @@
1 1
 <template>
2
-  <!-- <h1>StrongPhoto 精彩集锦</h1> -->
3 2
   <div class="Photo-box">
4
-    <div>
5
-      <van-swipe :autoplay="3000">
6
-        <van-swipe-item v-for="(image, index) in photoBannerImages" :key="index">
7
-          <van-image width="100%" height="100%" :src="image.thumb" />
8
-        </van-swipe-item>
9
-      </van-swipe>
10
-    </div>
11
-    <div style="display: flex; aline-itme:center;margin-top: 30px;padding-left: 15px; ">
3
+    <van-swipe :autoplay="3000">
4
+      <van-swipe-item v-for="(image, index) in photoBannerImages" :key="index">
5
+        <van-image width="100%" height="100%" :src="image.thumb" />
6
+      </van-swipe-item>
7
+    </van-swipe>
8
+    <div style="display: flex; aline-itme:center;margin-top: 30px;position:relative ">
12 9
       <!-- <div :class="`${classStyle?'Zhedie-box Donghua':'Zhedie-box'}`"> -->
13 10
       <div :class="{'Zhedie-box': true, 'expand': classStyle}">
14 11
         <!-- :class="`${clickStyle?'clickStyle':''}`" -->
@@ -22,7 +19,7 @@
22 19
       </div>
23 20
       <van-icon
24 21
         v-show="iconShow"
25
-        style="left:0; top: 0.6vh;"
22
+        style="right:4vw; top: 0.6vh; position:absolute"
26 23
         :name="`${classStyle?'arrow-up ':'arrow-down'}`"
27 24
         @click="animations"
28 25
       />
@@ -34,9 +31,8 @@
34 31
           <div></div>
35 32
           <span>{{item.createDate}}</span>
36 33
         </div>
37
-        <span v-for="(image, index) in item.res" :key="index">
38
-          <van-image width="31vw" :src="image.url" style="padding:0 3px 0 2px" />
39
-        </span>
34
+        <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)" />
35
+        <van-image-preview v-model="imageShow" :images="bigImg" />
40 36
       </div>
41 37
     </div>
42 38
   </div>
@@ -54,6 +50,8 @@ export default {
54 50
       classStyle: false,
55 51
       clickStyle: false,
56 52
       iconShow: true,
53
+      imageShow: false,
54
+      bigImg: [],
57 55
       activeNum: 0, //下标
58 56
       buttList: [],
59 57
       photoBannerImages: [],
@@ -62,7 +60,16 @@ export default {
62 60
       newArrImageList: []
63 61
     }
64 62
   },
65
-  watch: {},
63
+  watch: {
64
+    buttList: {
65
+      handler(val) {
66
+        if (val.length !== 0) {
67
+          this.SeePhotos(0,val[0].packId)
68
+        }
69
+      },
70
+      immediate: true
71
+    }
72
+  },
66 73
   mounted() {
67 74
     this.onBanner()
68 75
     this.onLoadSort()
@@ -75,6 +82,10 @@ export default {
75 82
     // }
76 83
   },
77 84
   methods: {
85
+    showBig(val) {
86
+      this.bigImg = [val]
87
+      this.imageShow = true
88
+    },
78 89
     parseTime,
79 90
     dataResort(arr) {
80 91
       var newArr = []
@@ -101,24 +112,22 @@ export default {
101 112
           newArr[index].res.push(oldData)
102 113
         }
103 114
       })
104
-      console.log(
105
-        '🚀 ~ file: StrongPhoto.vue ~ line 105 ~ dataResort ~ newArr',
106
-        newArr
107
-      )
108
-
109 115
       this.newArrImageList = newArr
110 116
     },
111 117
     onLoadSort() {
112 118
       getPhotoSotr().then((e) => {
113 119
         this.buttList = e.records
114
-        console.log(e.records)
115 120
       })
116 121
     },
117 122
     animations() {
118 123
       this.classStyle = !this.classStyle
124
+      if (this.classStyle === false) {
125
+        var item =this.buttList[this.activeNum]
126
+        this.buttList.splice(this.activeNum,1)
127
+        this.buttList.unshift(item)
128
+      }
119 129
     },
120 130
     SeePhotos(i, id) {
121
-      console.log('🚀 ~ file: StrongPhoto.vue ~ line 94 ~ SeePhotos ~ id', id)
122 131
       this.activeNum = i
123 132
       getPhotos(id).then((e) => {
124 133
         this.imageList = e.records
@@ -129,7 +138,7 @@ export default {
129 138
     onBanner() {
130 139
       getBanner('Wonderful').then((e) => {
131 140
         this.photoBannerImages = e.records
132
-        console.log(e)
141
+        // console.log(e)
133 142
       })
134 143
     }
135 144
   }
@@ -146,25 +155,25 @@ export default {
146 155
     border-radius: 10px;
147 156
     margin: 10px auto;
148 157
     box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);
149
-
150 158
     height: 33vh;
151 159
   }
152 160
   .Zhedie-box {
153
-    width: 90%;
161
+    padding: 0 4vw;
154 162
     overflow: hidden;
155 163
     display: flex;
156 164
     align-items: center;
157 165
     flex-wrap: wrap;
158
-    height: 35px;
166
+    height: 7vw;
159 167
     transition: height 0.2s ease;
160 168
     &.expand {
161 169
       height: 50vh;
162 170
     }
163 171
 
164 172
     > div {
165
-      padding: 2px 10px;
173
+      padding: 1.5vw 3vw;
166 174
       color: rgb(128, 128, 128);
167
-      line-height: 28px;
175
+      margin-right: 1.5vw;
176
+      margin-bottom: 1vw;
168 177
       text-align: center;
169 178
       font-size: 10px;
170 179
     }

+ 2
- 2
src/views/Tabber.vue Ver arquivo

@@ -22,7 +22,7 @@ export default {
22 22
   },
23 23
   created() {
24 24
     //由于 vant 标签栏路由模式,无法自动加载页面,所以这里需要初始化
25
-    console.log(this.$route) //打印当前路由属性
25
+    // console.log(this.$route) //打印当前路由属性
26 26
     this.active = 0
27 27
 
28 28
     switch (this.$route.name) {
@@ -41,7 +41,7 @@ export default {
41 41
   },
42 42
   methods: {
43 43
     onChange(index) {
44
-      console.log(index)
44
+      // console.log(index)
45 45
       switch (index) {
46 46
         case 0:
47 47
           this.$router.push('/')

+ 5
- 4
src/views/components/CourseCard.vue Ver arquivo

@@ -53,7 +53,7 @@ export default {
53 53
   box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);
54 54
 
55 55
   & + & {
56
-    margin-top: 1.5em;
56
+    margin-top: 3vw;
57 57
   }
58 58
 
59 59
   .media-box, .card-footer {
@@ -62,7 +62,7 @@ export default {
62 62
   }
63 63
 
64 64
   .media-box {
65
-    padding: 1em;
65
+    padding: 5vw;
66 66
     .media-head {
67 67
       flex: none;
68 68
       width: 20vw;
@@ -93,8 +93,9 @@ export default {
93 93
   }
94 94
 
95 95
   .card-footer {
96
-    padding: 1em;
97
-    border-top: 1px solid rgb(238, 238, 238);
96
+    padding: 2.5vw 0;
97
+    margin: 0 5vw;
98
+    border-top: 2px solid rgb(239, 239, 239);
98 99
 
99 100
     & > div {
100 101
       color: rgb(133, 133, 133);