|
@@ -1,4 +1,3 @@
|
1
|
|
-
|
2
|
1
|
<template>
|
3
|
2
|
<div class="dynamic">
|
4
|
3
|
<div>
|
|
@@ -23,17 +22,17 @@
|
23
|
22
|
<el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">全部动态</el-button>
|
24
|
23
|
</div>
|
25
|
24
|
</div>
|
26
|
|
- <el-drawer :visible.sync="drawer" :direction="direction" :before-close="handleClose" :show-close="true" size="80%">
|
|
25
|
+ <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%">
|
27
|
26
|
<div>
|
28
|
|
- <el-row>
|
|
27
|
+ <el-row style="text-align: center;">
|
29
|
28
|
<el-col :span="24">
|
30
|
|
- <button type="button" class="btn-link" style="color:black;font-size: 24px;">全部动态</button>
|
|
29
|
+ <button type="button" class="btn-link" @click="() => filterCase()" style="color:black;font-size: 24px;">全部动态</button>
|
31
|
30
|
</el-col>
|
32
|
|
- <el-col :span="24" v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)">
|
33
|
|
- <button type="button" class="btn-link" style="color:black;font-size: 24px">{{cas.typeName}}</button>
|
|
31
|
+ <el-col :span="24" v-for="cas in casetype" :key="cas.id" >
|
|
32
|
+ <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px">{{cas.typeName}}</button>
|
34
|
33
|
</el-col>
|
35
|
34
|
<el-col :span="24">
|
36
|
|
- <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;position:fixed;bottom:100px;">返回</button>
|
|
35
|
+ <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;padding:auto 40px; margin-top:30px">返回</button>
|
37
|
36
|
</el-col>
|
38
|
37
|
</el-row>
|
39
|
38
|
</div>
|
|
@@ -42,7 +41,7 @@
|
42
|
41
|
<div class="contanier center-block dyn-main">
|
43
|
42
|
<div class="row">
|
44
|
43
|
<div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
|
45
|
|
- <router-link :to="{ name: 'details', params: { id: item.id }}">
|
|
44
|
+ <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
|
46
|
45
|
<case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
|
47
|
46
|
</router-link>
|
48
|
47
|
</div>
|
|
@@ -79,6 +78,9 @@ export default {
|
79
|
78
|
},
|
80
|
79
|
|
81
|
80
|
allLoaded: false,//数据全部加载
|
|
81
|
+ drawer: false,
|
|
82
|
+ navdrawer: false,
|
|
83
|
+ direction: 'rtl',
|
82
|
84
|
}
|
83
|
85
|
},
|
84
|
86
|
components: {
|
|
@@ -161,25 +163,48 @@ export default {
|
161
|
163
|
|
162
|
164
|
<style scoped>
|
163
|
165
|
|
164
|
|
-.btn-link{
|
165
|
|
- outline: none;
|
|
166
|
+.routelink{
|
166
|
167
|
text-decoration: none;
|
167
|
168
|
}
|
168
|
169
|
|
|
170
|
+.casecard{
|
|
171
|
+
|
|
172
|
+ width: 100%;
|
|
173
|
+
|
|
174
|
+ padding-bottom: 100%;
|
|
175
|
+ background-size: 100% 100% !important;
|
|
176
|
+ /* position: relative; */
|
|
177
|
+
|
|
178
|
+ margin: 0;
|
|
179
|
+
|
|
180
|
+}
|
|
181
|
+
|
169
|
182
|
.border-bottom {
|
170
|
183
|
/* display: none; */
|
171
|
184
|
border-bottom: 1px solid #bfbfbf;
|
172
|
|
- margin-top: 10px !important;
|
173
|
|
-}
|
174
|
|
-.btn1 {
|
175
|
|
- font-size: 24px !important;
|
176
|
|
- color: black !important;
|
177
|
|
- border: none !important;
|
|
185
|
+ margin-top: 10px !important;
|
178
|
186
|
}
|
179
|
|
-.btn1:hover {
|
180
|
|
- color: red !important;
|
181
|
|
- text-decoration: none;
|
|
187
|
+ .btn1 {
|
|
188
|
+ font-size: 24px !important;
|
|
189
|
+ color: black !important;
|
|
190
|
+ border: none !important;
|
|
191
|
+ }
|
|
192
|
+ .btn1:hover {
|
|
193
|
+ color: red !important;
|
|
194
|
+ text-decoration: none;
|
|
195
|
+ }
|
|
196
|
+.mobbtn{
|
|
197
|
+color: #e03723;
|
|
198
|
+
|
|
199
|
+ padding:12px 40px;
|
|
200
|
+
|
|
201
|
+ border-radius: 0px;
|
|
202
|
+
|
|
203
|
+ background-color: rgb(252, 151, 252);
|
|
204
|
+ border: 2px solid #bfbfbf;
|
|
205
|
+
|
182
|
206
|
}
|
|
207
|
+
|
183
|
208
|
.text-left {
|
184
|
209
|
color: #000;
|
185
|
210
|
}
|
|
@@ -194,7 +219,7 @@ export default {
|
194
|
219
|
}
|
195
|
220
|
|
196
|
221
|
@media (max-width: 992px) {
|
197
|
|
- .dynamic {
|
|
222
|
+ .case{
|
198
|
223
|
margin-top: 58px;
|
199
|
224
|
}
|
200
|
225
|
.comtype {
|
|
@@ -206,8 +231,8 @@ export default {
|
206
|
231
|
}
|
207
|
232
|
}
|
208
|
233
|
.row {
|
209
|
|
- margin: 0;
|
210
|
|
-}
|
|
234
|
+ margin: 0;
|
|
235
|
+ }
|
211
|
236
|
.marginTP {
|
212
|
237
|
margin-top: 3rem;
|
213
|
238
|
}
|
|
@@ -221,17 +246,18 @@ export default {
|
221
|
246
|
/* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
|
222
|
247
|
justify-content: center;
|
223
|
248
|
}
|
224
|
|
- .dynamic {
|
225
|
|
- margin-top: 116px;
|
226
|
|
- margin-bottom: -116px;
|
227
|
|
- padding-bottom: 116px;
|
228
|
|
- background-color: #fafafa;
|
229
|
|
- }
|
230
|
|
-
|
|
249
|
+ .case {
|
|
250
|
+ margin-top: 116px;
|
|
251
|
+ margin-bottom: -116px;
|
|
252
|
+ padding-bottom: 116px;
|
|
253
|
+ background-color: #fafafa;
|
|
254
|
+}
|
|
255
|
+
|
231
|
256
|
.mobtype {
|
232
|
257
|
display: none;
|
233
|
258
|
}
|
234
|
259
|
|
|
260
|
+
|
235
|
261
|
.btn {
|
236
|
262
|
font-size: 24px;
|
237
|
263
|
margin-top: 88px;
|
|
@@ -258,15 +284,8 @@ export default {
|
258
|
284
|
padding: 10px;
|
259
|
285
|
}
|
260
|
286
|
}
|
261
|
|
-
|
262
|
|
-.mobbtn {
|
263
|
|
- color: #e03723;
|
264
|
|
-
|
265
|
|
- padding: 12px 40px;
|
266
|
|
-
|
267
|
|
- border-radius: 0px;
|
268
|
|
-
|
269
|
|
- background-color: rgb(252, 151, 252);
|
270
|
|
- border: 2px solid #bfbfbf;
|
|
287
|
+.btn-link{
|
|
288
|
+ outline: none;
|
|
289
|
+ text-decoration: none
|
271
|
290
|
}
|
272
|
291
|
</style>
|