Skip to content

dev / lilejia-f2mb-pro

Go to a project
Toggle navigation
Toggle navigation pinning
7a3ca91c by joe
Options

1

1 parent 53687232
Inline Side-by-side
Showing 7 changed files with 65 additions and 44 deletions
...@@ -9,20 +9,22 @@ ...@@ -9,20 +9,22 @@
9 <van-row> 9 <van-row>
10 <van-list v-model="isLoading" :finished="!hasMore" finished-text @load="refreshMore"> 10 <van-list v-model="isLoading" :finished="!hasMore" finished-text @load="refreshMore">
11 <van-cell v-for="(itemList,index1) in worksList" :key="index1"> 11 <van-cell v-for="(itemList,index1) in worksList" :key="index1">
12 <van-col span="12" v-for="(item,index2) in itemList" :key="index2"> 12 <div class="cell">
13 <div class="worksItem" @click="toWorksViewHandler(item.worksCode)"> 13 <div v-for="(item,index2) in itemList" :key="index2">
14 <div 14 <div class="worksItem" @click="toWorksViewHandler(item.worksCode)">
15 class="worksThumb" 15 <div
16 v-bind:style="{backgroundImage:'url(' + (item.worksList && item.worksList[0] ? item.worksList[0].worksUrl : '') + ')'}" 16 class="worksThumb"
17 ></div> 17 v-bind:style="{backgroundImage:'url(' + (item.worksList && item.worksList[0] ? item.worksList[0].worksUrl : '') + ')'}"
18 <div class="worksDescription"> 18 ></div>
19 <div class="worksNo">{{item.worksNo}}</div> 19 <div class="worksDescription">
20 <div class="worksName">{{item.name}}</div> 20 <div class="worksNo">{{item.worksNo}}</div>
21 <div class="worksPriaseNo">{{item.praiseNumber}}</div> 21 <div class="worksName">{{item.name}}</div>
22 <div class="worksPraise"></div> 22 <div class="worksPriaseNo">{{item.praiseNumber}}</div>
23 <div class="worksPraise"></div>
24 </div>
23 </div> 25 </div>
24 </div> 26 </div>
25 </van-col> 27 </div>
26 </van-cell> 28 </van-cell>
27 29
28 <van-col span="24" v-if="worksList.length == 0 && !isLoading"> 30 <van-col span="24" v-if="worksList.length == 0 && !isLoading">
...@@ -33,6 +35,8 @@ ...@@ -33,6 +35,8 @@
33 <div class="empty-message">没有搜到任何作品 ！</div> 35 <div class="empty-message">没有搜到任何作品 ！</div>
34 </div> 36 </div>
35 </van-col> 37 </van-col>
38
39 <div class="bottom-line"></div>
36 </van-list> 40 </van-list>
37 </van-row> 41 </van-row>
38 </div> 42 </div>
...@@ -175,10 +179,10 @@ export default { ...@@ -175,10 +179,10 @@ export default {
175 179
176 .input-panel { 180 .input-panel {
177 width: 450px; 181 width: 450px;
178 height: 52px; 182 height: 55px;
179 border: 2px solid #82acae; 183 border: 2px solid #82acae;
180 background-color: #e8e8e8; 184 background-color: #e8e8e8;
181 line-height: 54px; 185 line-height: 55px;
182 border-radius: 26px; 186 border-radius: 26px;
183 display: flex; 187 display: flex;
184 input { 188 input {
...@@ -212,19 +216,25 @@ export default { ...@@ -212,19 +216,25 @@ export default {
212 .van-cell { 216 .van-cell {
213 padding: 0; 217 padding: 0;
214 } 218 }
219 .cell {
220 padding: 0;
221 margin: 0;
222 display: flex;
223 justify-content: space-between;
224 }
215 225
216 .worksItem { 226 .worksItem {
217 margin: 0 auto 20px auto; 227 margin: 0 auto 30px auto;
218 width: 300px; 228 width: 298px;
219 height: 275px; 229 height: 215px;
220 border: solid 1px #d1d0d0; 230 border: solid 1px #d1d0d0;
221 box-shadow: 2px 2px 2px #d1d0d0; 231 box-shadow: 0 0 2px #d1d0d0;
222 border-radius: 20px; 232 border-radius: 20px;
223 overflow: hidden; 233 overflow: hidden;
224 234
225 .worksThumb { 235 .worksThumb {
226 width: 300px; 236 width: 300px;
227 height: 215px; 237 height: 168px;
228 background-size: cover; 238 background-size: cover;
229 } 239 }
230 .worksDescription { 240 .worksDescription {
...@@ -234,30 +244,33 @@ export default { ...@@ -234,30 +244,33 @@ export default {
234 244
235 div { 245 div {
236 font-size: 22px; 246 font-size: 22px;
237 height: 60px; 247 height: 47px;
238 line-height: 60px; 248 line-height: 47px;
239 text-align: left; 249 text-align: left;
240 text-overflow: ellipsis; 250 text-overflow: ellipsis;
241 overflow: hidden; 251 overflow: hidden;
242 font-weight: 600; 252 font-weight: 400;
243 } 253 }
244 254
245 .worksNo { 255 .worksNo {
256 padding-left: 10px;
246 width: 55px; 257 width: 55px;
247 } 258 }
248 .worksName { 259 .worksName {
249 width: 133px; 260 flex: 1;
261 padding: 0 10px;
250 } 262 }
251 .worksPriaseNo { 263 .worksPriaseNo {
252 width: 60px; 264 width: 60px;
253 text-align: right; 265 text-align: right;
254 padding-right: 5px; 266 padding-right: 10px;
255 } 267 }
256 .worksPraise { 268 .worksPraise {
257 width: 28px; 269 width: 28px;
258 height: 24px; 270 height: 24px;
259 background: url(../../../assets/imgs/list-heart-red.png) no-repeat; 271 background: url(../../../assets/imgs/list-heart-red.png) no-repeat;
260 background-size: 100%; 272 background-size: 100%;
273 margin-right: 10px;
261 } 274 }
262 } 275 }
263 } 276 }
...@@ -274,4 +287,7 @@ export default { ...@@ -274,4 +287,7 @@ export default {
274 color: #a1a1a1; 287 color: #a1a1a1;
275 } 288 }
276 } 289 }
290 .bottom-line {
291 height: 200px;
292 }
277 </style> 293 </style>
......
...@@ -160,20 +160,20 @@ export default { ...@@ -160,20 +160,20 @@ export default {
160 160
161 .swipe { 161 .swipe {
162 width: 630px; 162 width: 630px;
163 height: 451px; 163 height: 320px;
164 margin: auto; 164 margin: auto;
165 border: 2px solid #82acae; 165 border: 2px solid #82acae;
166 border-radius: 30px; 166 border-radius: 30px;
167 overflow: hidden; 167 overflow: hidden;
168 168
169 .img { 169 .img {
170 height: 451px; 170 height: 320px;
171 width: 630px; 171 width: 630px;
172 background-size: cover; 172 background-size: cover;
173 } 173 }
174 174
175 video { 175 video {
176 height: 451px; 176 height: 320px;
177 width: 630px; 177 width: 630px;
178 } 178 }
179 } 179 }
...@@ -292,10 +292,11 @@ export default { ...@@ -292,10 +292,11 @@ export default {
292 292
293 .btn-tips { 293 .btn-tips {
294 width: 640px; 294 width: 640px;
295 text-align: left; 295 text-align: center;
296 font-size: 24px; 296 font-size: 24px;
297 color: #303531; 297 color: #303531;
298 margin: auto; 298 margin: auto;
299 margin-top: 18px;
299 } 300 }
300 301
301 .btn-back { 302 .btn-back {
......
...@@ -200,8 +200,8 @@ export default { ...@@ -200,8 +200,8 @@ export default {
200 } 200 }
201 201
202 .swipe { 202 .swipe {
203 width: 265px; 203 width: 293px;
204 height: 200px; 204 height: 196px;
205 border: 2px solid #45a402; 205 border: 2px solid #45a402;
206 border-radius: 20px; 206 border-radius: 20px;
207 margin: 32px; 207 margin: 32px;
...@@ -209,21 +209,21 @@ export default { ...@@ -209,21 +209,21 @@ export default {
209 209
210 div { 210 div {
211 line-height: 200px; 211 line-height: 200px;
212 height: 200px;
213 text-align: center; 212 text-align: center;
214 width: 265px; 213 width: 293px;
214 height: 196px;
215 } 215 }
216 .img { 216 .img {
217 margin: auto; 217 margin: auto;
218 // width: 235px; 218 // width: 235px;
219 height: 190px; 219 width: 293px;
220 width: 265px; 220 height: 196px;
221 background-size: cover; 221 background-size: cover;
222 } 222 }
223 223
224 video { 224 video {
225 height: 190px; 225 width: 293px;
226 width: 265px; 226 height: 196px;
227 } 227 }
228 } 228 }
229 229
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 5
6 <works-list-view 6 <works-list-view
7 v-model="formData" 7 v-model="formData"
8 v-if="init && listVisiabled" 8 v-if="init"
9 v-show="listVisiabled" 9 v-show="listVisiabled"
10 v-on:showRule="showRuleHandler" 10 v-on:showRule="showRuleHandler"
11 v-on:worksDetail="showWorksDetail" 11 v-on:worksDetail="showWorksDetail"
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 21
22 <biz-model v-model="model"></biz-model> 22 <biz-model v-model="model"></biz-model>
23 23
24 <div class="bottom-line"></div> 24 <!-- <div class="bottom-line"></div> -->
25 25
26 <!-- 分享蒙层 --> 26 <!-- 分享蒙层 -->
27 <div class="shareModel" v-if="shareModelVisiable" @click="shareModelVisiable = false"> 27 <div class="shareModel" v-if="shareModelVisiable" @click="shareModelVisiable = false">
......
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
12 12
13 <!-- 底部操作栏 --> 13 <!-- 底部操作栏 -->
14 <div class="action-bar"> 14 <div class="action-bar">
15 <div class="button" @click="_cancel">取消</div>
15 <div class="button" @click="_clipper">确认</div> 16 <div class="button" @click="_clipper">确认</div>
16 </div> 17 </div>
17 18
...@@ -70,7 +71,10 @@ ...@@ -70,7 +71,10 @@
70 height: 80px; 71 height: 80px;
71 line-height: 80px; 72 line-height: 80px;
72 border-top: 1px solid rgba(256, 256, 256, 0.3); 73 border-top: 1px solid rgba(256, 256, 256, 0.3);
74 display: flex;
75 justify-content: center;
73 .button { 76 .button {
77 width: 50%;
74 line-height: 80px; 78 line-height: 80px;
75 height: 80px; 79 height: 80px;
76 font-size: 26px; 80 font-size: 26px;
...@@ -189,7 +193,7 @@ export default { ...@@ -189,7 +193,7 @@ export default {
189 // } 193 // }
190 194
191 clipperWidth = clipperClientRect.width; 195 clipperWidth = clipperClientRect.width;
192 clipperHeight = clipperWidth / 1.375; 196 clipperHeight = clipperWidth / 1.96875;
193 197
194 // if (clipperHeight < 0 || clipperHeight > clipperClientRect.height) { 198 // if (clipperHeight < 0 || clipperHeight > clipperClientRect.height) {
195 // clipperHeight = 100 199 // clipperHeight = 100
...@@ -441,7 +445,7 @@ export default { ...@@ -441,7 +445,7 @@ export default {
441 // console.log("this.actionBarHeight===", this.actionBarHeight) 445 // console.log("this.actionBarHeight===", this.actionBarHeight)
442 446
443 if (w < maxW && h < maxH) { 447 if (w < maxW && h < maxH) {
444 if (w > 1.375 * h) { 448 if (w > 1.96875 * h) {
445 eH = maxH; 449 eH = maxH;
446 eW = (w / h) * maxH; 450 eW = (w / h) * maxH;
447 } else { 451 } else {
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 v-if="imageData.show" 21 v-if="imageData.show"
22 :img="imageData.data" 22 :img="imageData.data"
23 :clipper-img-width="750" 23 :clipper-img-width="750"
24 :clipper-img-height="537" 24 :clipper-img-height="380.95"
25 @ok="imageClipperHandler" 25 @ok="imageClipperHandler"
26 @cancel="imageData.show=false" 26 @cancel="imageData.show=false"
27 ></image-clipper> 27 ></image-clipper>
......
...@@ -166,7 +166,7 @@ export default { ...@@ -166,7 +166,7 @@ export default {
166 166
167 .swipe { 167 .swipe {
168 width: 630px; 168 width: 630px;
169 height: 451px; 169 height: 320px;
170 margin: auto; 170 margin: auto;
171 margin-top: 15px; 171 margin-top: 15px;
172 border: 2px solid #82acae; 172 border: 2px solid #82acae;
...@@ -174,13 +174,13 @@ export default { ...@@ -174,13 +174,13 @@ export default {
174 overflow: hidden; 174 overflow: hidden;
175 175
176 .img { 176 .img {
177 height: 451px; 177 height: 320px;
178 width: 630px; 178 width: 630px;
179 background-size: cover; 179 background-size: cover;
180 } 180 }
181 181
182 video { 182 video {
183 height: 451px; 183 height: 320px;
184 width: 630px; 184 width: 630px;
185 } 185 }
186 } 186 }
......