|
|
@@ -7,8 +7,8 @@
|
|
7
|
7
|
|
|
8
|
8
|
<div class="border-bottom">
|
|
9
|
9
|
<div id="bs-example-navbar-collapse-2">
|
|
10
|
|
- <button type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">全部案例</button>
|
|
11
|
|
- <button v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)" type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
|
|
|
10
|
+ <button type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px" @click="() => filterCase()">全部案例</button>
|
|
|
11
|
+ <button v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)" type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
|
|
12
|
12
|
</div>
|
|
13
|
13
|
</div>
|
|
14
|
14
|
|
|
|
@@ -20,13 +20,13 @@
|
|
20
|
20
|
<el-button class="btn-link" @click="drawer = true" type="button" style="margin-left: 16px;">全部案例</el-button>
|
|
21
|
21
|
</div>
|
|
22
|
22
|
</div>
|
|
23
|
|
- <el-drawer :visible.sync="drawer" :direction="direction" :before-close="handleClose" :show-close="true" size="80%">
|
|
|
23
|
+ <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%">
|
|
24
|
24
|
<div>
|
|
25
|
25
|
<el-row>
|
|
26
|
26
|
<el-col :span="24" :offset="6">
|
|
27
|
27
|
<button type="button" class="btn-link" style="color:black;font-size: 24px;">全部案例</button>
|
|
28
|
28
|
</el-col>
|
|
29
|
|
- <el-col :span="24" :offset="6" v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)">
|
|
|
29
|
+ <el-col :span="24" :offset="6" v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)">
|
|
30
|
30
|
<button type="button" class="btn-link" style="color:black;font-size: 24px">{{cas.typeName}}</button>
|
|
31
|
31
|
</el-col>
|
|
32
|
32
|
<el-col :span="24" :offset="6">
|
|
|
@@ -38,28 +38,15 @@
|
|
38
|
38
|
|
|
39
|
39
|
<div class="contanier center-block dyn-main">
|
|
40
|
40
|
<div class="row">
|
|
41
|
|
- <div v-for="(item,index) in caselist" :key="index">
|
|
42
|
|
- <div class="col-md-6 col-xs-6 ph">
|
|
43
|
|
- <div class="ph-houver">
|
|
44
|
|
- <a href="/details" style="text-decoration:none;">
|
|
45
|
|
- <div :style="{background: `url(${item.caseCoverImg})`}" class="case-ph"></div>
|
|
46
|
|
- <div class="text-left">
|
|
47
|
|
- <h2>{{item.caseTitle}}</h2>
|
|
48
|
|
- <P>{{item.caseSummary}}</P>
|
|
49
|
|
- </div>
|
|
50
|
|
- </a>
|
|
51
|
|
- </div>
|
|
52
|
|
- </div>
|
|
|
41
|
+ <div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
|
|
|
42
|
+ <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
|
|
53
|
43
|
</div>
|
|
54
|
44
|
</div>
|
|
55
|
45
|
</div>
|
|
56
|
46
|
|
|
57
|
47
|
<div>
|
|
58
|
|
- <button type="button" v-show="!allLoaded" class="btn btn-default" @click="add(++num)">加载更多</button>
|
|
59
|
|
- </div>
|
|
60
|
|
-
|
|
61
|
|
- <div v-show="allLoaded">
|
|
62
|
|
- <p>已经到底了~更多案例尽请期待~</p>
|
|
|
48
|
+ <button type="button" v-if="!allLoaded" class="btn btn-default" @click="more">加载更多</button>
|
|
|
49
|
+ <p v-else>已经到底了~更多案例尽请期待~</p>
|
|
63
|
50
|
</div>
|
|
64
|
51
|
</div>
|
|
65
|
52
|
</template>
|
|
|
@@ -70,60 +57,51 @@
|
|
70
|
57
|
|
|
71
|
58
|
import request from '../../utils/request'
|
|
72
|
59
|
import apis from '../config/api'
|
|
|
60
|
+import CaseCard from '../components/CaseCard'
|
|
73
|
61
|
|
|
74
|
62
|
export default {
|
|
75
|
|
- name: 'case',
|
|
|
63
|
+ name: 'Case',
|
|
|
64
|
+ components: {
|
|
|
65
|
+ CaseCard,
|
|
|
66
|
+ },
|
|
76
|
67
|
data () {
|
|
77
|
68
|
return {
|
|
78
|
69
|
cover: {},
|
|
79
|
70
|
casetype: [],
|
|
80
|
71
|
caselist: [],
|
|
81
|
|
- num: 1,
|
|
|
72
|
+
|
|
|
73
|
+ conditions: {
|
|
|
74
|
+ pageNum: 0,
|
|
|
75
|
+ pageSize: 8,
|
|
|
76
|
+ caseType: '',
|
|
|
77
|
+ },
|
|
82
|
78
|
|
|
83
|
79
|
allLoaded: false,//数据全部加载
|
|
84
|
80
|
drawer: false,
|
|
85
|
81
|
direction: 'rtl',
|
|
86
|
82
|
}
|
|
87
|
83
|
},
|
|
88
|
|
- components: {
|
|
89
|
|
-
|
|
90
|
|
- },
|
|
91
|
84
|
|
|
92
|
85
|
created () {
|
|
93
|
86
|
// window.console.log(this.cover, "543");
|
|
94
|
87
|
// 封面
|
|
95
|
88
|
request({
|
|
96
|
89
|
...apis.case.cover,
|
|
97
|
|
-
|
|
|
90
|
+ params: { type: 'case' }
|
|
98
|
91
|
}).then(data => {
|
|
99
|
92
|
this.cover = data[0];
|
|
100
|
93
|
})
|
|
101
|
94
|
|
|
102
|
|
-
|
|
103
|
|
- // axios.get('http://localhost:8080/pc/case/cover')
|
|
104
|
|
-
|
|
105
|
95
|
// 分类
|
|
106
|
96
|
// axios.get('http://localhost:8080/pc/caseType/list')
|
|
107
|
97
|
request({
|
|
108
|
98
|
...apis.caseType.list,
|
|
109
|
99
|
})
|
|
110
|
100
|
.then(res => {
|
|
111
|
|
-
|
|
112
|
|
- this.casetype = res.records;
|
|
113
|
|
-
|
|
|
101
|
+ this.casetype = (res.records || []).filter(x => x.type === 'case');
|
|
114
|
102
|
})
|
|
115
|
|
- // 内容http://localhost:8080/pc/case/{case}/list
|
|
116
|
|
- request({
|
|
117
|
|
- ...apis.case.list,
|
|
118
|
|
- urlData: { type: 'case' },
|
|
119
|
|
- params: { pageNum: this.num, pageSize: 8 }
|
|
120
|
|
- }).then(con => {
|
|
121
|
|
- // console.log(con,"124")
|
|
122
|
|
- this.caselist = con.records;
|
|
123
|
|
- // window.console.log(this.caselist, "543");
|
|
124
|
|
- }).catch()
|
|
125
|
|
-
|
|
126
|
103
|
|
|
|
104
|
+ this.getCaseList()
|
|
127
|
105
|
},
|
|
128
|
106
|
|
|
129
|
107
|
computed: {
|
|
|
@@ -131,39 +109,43 @@ export default {
|
|
131
|
109
|
},
|
|
132
|
110
|
|
|
133
|
111
|
methods: {
|
|
134
|
|
- add (a) {
|
|
135
|
|
-
|
|
136
|
|
- console.log(this.num, "124")
|
|
137
|
|
- request({
|
|
138
|
|
- ...apis.case.list,
|
|
139
|
|
- urlData: { type: 'case' },
|
|
140
|
|
- params: { pageNum: a, pageSize: 8 }
|
|
141
|
|
- }).then(con => {
|
|
142
|
|
- console.log(con, "124")
|
|
143
|
|
- this.caselist = this.caselist.concat(con.records);
|
|
144
|
|
- if (con.total % 8) this.allLoaded = true;
|
|
145
|
|
-
|
|
146
|
|
- // this.caselist = con.records;
|
|
147
|
|
-
|
|
|
112
|
+ getCaseList(filters = {}) {
|
|
|
113
|
+ const params = {
|
|
|
114
|
+ ...this.conditions,
|
|
|
115
|
+ ...filters
|
|
|
116
|
+ }
|
|
|
117
|
+
|
|
|
118
|
+ return new Promise((resolve, reject) => {
|
|
|
119
|
+ request({
|
|
|
120
|
+ ...apis.case.list,
|
|
|
121
|
+ params,
|
|
|
122
|
+ urlData: { type: 'case' },
|
|
|
123
|
+ }).then(con => {
|
|
|
124
|
+ if (con.current > 1) {
|
|
|
125
|
+ this.caselist = this.caselist.concat(con.records);
|
|
|
126
|
+ } else {
|
|
|
127
|
+ this.caselist = con.records;
|
|
|
128
|
+ }
|
|
|
129
|
+
|
|
|
130
|
+ this.conditions.pageNum = con.current
|
|
|
131
|
+ this.allLoaded = con.current >= con.pages
|
|
|
132
|
+ resolve(con)
|
|
|
133
|
+ }).catch((err) => {
|
|
|
134
|
+ window.console.error(err)
|
|
|
135
|
+ reject(err)
|
|
|
136
|
+ })
|
|
148
|
137
|
})
|
|
149
|
138
|
},
|
|
150
|
139
|
|
|
151
|
|
- classification (Type) {
|
|
152
|
|
- request({
|
|
153
|
|
- ...apis.case.list,
|
|
154
|
|
- urlData: { type: 'case' },
|
|
155
|
|
- params: { pageNum: a, pageSize: 8 }
|
|
156
|
|
- }).then(con => {
|
|
157
|
|
- console.log(con, "124")
|
|
158
|
|
- this.caselist = this.caselist.concat(con.records);
|
|
159
|
|
-
|
|
160
|
|
-
|
|
161
|
|
-
|
|
162
|
|
-
|
|
163
|
|
- })
|
|
|
140
|
+ more () {
|
|
|
141
|
+ if (!this.allLoaded) {
|
|
|
142
|
+ this.getCaseList({ pageNum: this.conditions.pageNum + 1 })
|
|
|
143
|
+ }
|
|
164
|
144
|
},
|
|
165
|
145
|
|
|
166
|
|
-
|
|
|
146
|
+ filterCase (caseType) {
|
|
|
147
|
+ this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' })
|
|
|
148
|
+ },
|
|
167
|
149
|
}
|
|
168
|
150
|
|
|
169
|
151
|
|
|
|
@@ -183,12 +165,10 @@ export default {
|
|
183
|
165
|
display: none;
|
|
184
|
166
|
}
|
|
185
|
167
|
|
|
186
|
|
-.ph {
|
|
187
|
|
- padding: 4%;
|
|
188
|
|
-}
|
|
189
|
168
|
.text-left {
|
|
190
|
169
|
color: #000;
|
|
191
|
170
|
}
|
|
|
171
|
+
|
|
192
|
172
|
.case-ph {
|
|
193
|
173
|
bottom: 0;
|
|
194
|
174
|
width: 100%;
|
|
|
@@ -198,6 +178,12 @@ export default {
|
|
198
|
178
|
background-size: 100% 100% !important;
|
|
199
|
179
|
}
|
|
200
|
180
|
|
|
|
181
|
+
|
|
|
182
|
+
|
|
|
183
|
+ .marginTP {
|
|
|
184
|
+ margin-top: 3rem;
|
|
|
185
|
+ }
|
|
|
186
|
+
|
|
201
|
187
|
@media (min-width: 992px) {
|
|
202
|
188
|
.main {
|
|
203
|
189
|
display: -webkit-flex; /* Safari */
|
|
|
@@ -225,16 +211,7 @@ export default {
|
|
225
|
211
|
color: #e03723;
|
|
226
|
212
|
border: 1px solid #e03723;
|
|
227
|
213
|
}
|
|
228
|
|
- .ph {
|
|
229
|
|
- padding: 12px 34px 0 34px;
|
|
230
|
|
- }
|
|
231
|
|
-
|
|
232
|
|
- .ph:hover .ph-houver {
|
|
233
|
|
- transform: translate3d(0, -20px, 0);
|
|
234
|
|
- /* margin-top: -20px; */
|
|
235
|
|
- box-shadow: 0 20px 5px #888888;
|
|
236
|
|
- }
|
|
237
|
|
-
|
|
|
214
|
+
|
|
238
|
215
|
.dyn-main {
|
|
239
|
216
|
padding-top: 55px;
|
|
240
|
217
|
width: 80%;
|
