|
@@ -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
|
}
|