w-front-end / select_good · Commits

Commit a5c2e0cf675b3a6c00c11ac0d69629df4aa17311

Authored by zhiyangdu
1 parent 16f30c82

test

Inline Side-by-side
Showing 3 changed files with 283 additions and 131 deletions
src/pages/test/item.vue 0 → 100644
  View file @a5c2e0c
  1 +<template>
  2 +<div>
  3 + <!-- item -->
  4 + <div class="item_box">
  5 + <!-- 用户信息 -->
  6 + <div class="user_info">
  7 + <img class="pic" src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
  8 + <div class="name">陕西省-张三-20100759</div>
  9 + </div>
  10 + <!-- 描述 -->
  11 + <div class="desc">
  12 + 纯天然无污染无添加，一年取一次原生态放养土蜂蜜百花蜜纯天然无污染无添加
  13 + </div>
  14 + <!-- 图片库 -->
  15 + <div class="img-box" >
  16 + <div :class="['item',grids.list.length==1?'one':(grids.list.length==2 || grids.list.length==4? 'two':'three')]" v-for="(item, index) in grids.list" :key="index" @click="jump(item)">
  17 + <!--<div @click.stop="imagePreview(index)" :class="['item',grids.list.length==1?'one':(grids.list.length==2 || grids.list.length==4? 'two':'three')]" v-for="(item, index) in grids.list" :key="index" @click="jump(item)">-->
  18 + <van-image
  19 + v-if="index < 9"
  20 + class="img"
  21 + fit="cover"
  22 + lazy-load
  23 + :src="(item.img || item) + (item.v === true ? '' : SIGN.BIG)"
  24 + >
  25 + <template v-slot:error>
  26 + <img class="img" src="static/img/x.jpg" alt=""/>
  27 + </template>
  28 + </van-image>
  29 + <div v-if="index < 8 && item.v === true" class="play_box">
  30 + <img src="static/img/play.png" />
  31 + </div>
  32 + <div v-if="grids.list.length>9 && index == 8" class="title">共{{grids.list.length}}张</div>
  33 + </div>
  34 + </div>
  35 + <!-- 地址信息 -->
  36 + <div class="address_info">
  37 + <div class="left">
  38 + <img src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
  39 + 陕西省 西安市 西安区
  40 + </div>
  41 + <div class="right">
  42 + 2020-09-23
  43 + </div>
  44 + </div>
  45 + </div>
  46 +</div>
  47 +</template>
  48 +
  49 +<script>
  50 +export default {
  51 + data(){
  52 + return{
  53 + grids:{
  54 + list:[
  55 + {img:"http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"},
  56 + {img:"http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"},
  57 + {img:"http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"}
  58 + ]
  59 + }
  60 + }
  61 + },
  62 +//部件
  63 + components: {
  64 + },
  65 +//静态
  66 + props: [
  67 +],
  68 +//对象内部的属性监听，也叫深度监听
  69 + watch: {
  70 + },
  71 +//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  72 + computed: {
  73 + },
  74 +//方法表示一个具体的操作，主要书写业务逻辑；
  75 + methods: {
  76 +
  77 + },
  78 +//请求数据
  79 + created() {
  80 +},
  81 + mounted() {
  82 +}
  83 +}
  84 +</script>
  85 +
  86 +<style scoped lang="less" rel="stylesheet/less">
  87 +// 页面信息
  88 +.item_box{
  89 + margin: 20px;
  90 + padding: 30px 20px 20px 20px;
  91 + background-color: #fff;
  92 + border-radius: 16px;
  93 + .user_info{
  94 + display:flex;
  95 + .pic{
  96 + display:block;
  97 + width:80px;
  98 + height:80px;
  99 + border-radius: 50%;
  100 + margin-right: 90px;
  101 + }
  102 + .name{
  103 + flex: 1;
  104 + height: 80px;
  105 + font-size: 30px;
  106 + font-family: PingFangSC-Regular, PingFang SC;
  107 + font-weight: 400;
  108 + color: #333333;
  109 + line-height: 80px;
  110 + overflow: hidden;
  111 + text-overflow:ellipsis;
  112 + white-space: nowrap;
  113 + }
  114 + }
  115 + .desc{
  116 + height: 74px;
  117 + font-size: 26px;
  118 + font-weight: 400;
  119 + color: #666660;
  120 + line-height: 37px;
  121 + margin-top: 30px;
  122 + display: -webkit-box;
  123 + -webkit-box-orient: vertical;
  124 + -webkit-line-clamp: 2;
  125 + overflow: hidden;
  126 + }
  127 + .img-box {
  128 + width: 100%;
  129 + display: flex;
  130 + flex-wrap: wrap;
  131 + //justify-content: space-around;
  132 + list-style: none;
  133 + .item{
  134 + display: flex;
  135 + align-items: center;
  136 + justify-content: center;
  137 + padding:0 5px;
  138 + box-sizing: border-box;
  139 + position: relative;
  140 + .title{
  141 + position: absolute;
  142 + flex: 1;
  143 + font-size:28px;
  144 + color: #fff;
  145 + }
  146 + .img {
  147 + display: block;
  148 + width: 100%;
  149 + height: 340px;
  150 + }
  151 + .play_box{
  152 + width: 100%;
  153 + height: 100%;
  154 + position: absolute;
  155 + left: 0;
  156 + top:0;
  157 + //background-color: #000;
  158 + z-index: 1;
  159 + display: flex;
  160 + justify-content: center;
  161 + align-items: center;
  162 + img{
  163 + width: 86px;
  164 + height: 86px;
  165 + }
  166 + }
  167 + }
  168 + .two{
  169 + width: calc(calc(100% / 2));
  170 + margin-top: 10px;
  171 + .img {
  172 + height: 340px;
  173 + }
  174 + }
  175 + .three{
  176 + width: calc(calc(100% / 3));
  177 + margin-top: 10px;
  178 + .img {
  179 + height: 222px;
  180 + }
  181 + }
  182 + }
  183 + .address_info{
  184 + margin-top:30px;
  185 + font-size:24px;
  186 + font-weight: 300;
  187 + color: #9A9A9A;
  188 + line-height: 33px;
  189 + overflow: hidden;
  190 + .left{
  191 + display:flex;
  192 + align-items: center;
  193 + float:left;
  194 + img{
  195 + display:block;
  196 + width:22px;
  197 + height:22px;
  198 + margin-right: 10px;
  199 + }
  200 + }
  201 + .right{
  202 + float:right;
  203 + }
  204 + }
  205 + }
  206 +</style>
  207 +
... ...
src/pages/test/test.less
  View file @a5c2e0c
1   -@charset "UTF-8";
2   -
3   -.search-box {
4   - background-color: #ffffff;
5   - min-height: 100vh;
6   - .nav {
7   - position: fixed;
8   - top: 0;
9   - background-color: #FAFBFD;
10   - }
11   - .pl {
12   - background-color: transparent;
13   - width: 750px;
14   - height: 104px;
15   - }
16   - .pages-box {
17   - .infinite-box {
18   - .list-com + .list-com {
19   - /deep/ .spacing-box {
20   - background-color: #F9F9F9;
21   - width: 100%;
22   - height: 14px;
23   - }
24   - }
25   - }
26   - }
27   -}
src/pages/test/test.vue
  View file @a5c2e0c
... ... @@ -56,49 +56,14 @@
56 56 </div>
57 57 </div>
58 58 <!-- item -->
59   - <div class="item_box">
60   - <!-- 用户信息 -->
61   - <div class="user_info">
62   - <img class="pic" src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
63   - <div class="name">陕西省-张三-20100759</div>
64   - </div>
65   - <!-- 描述 -->
66   - <div class="desc">
67   - 纯天然无污染无添加，一年取一次原生态放养土蜂蜜百花蜜纯天然无污染无添加
68   - </div>
69   - <!-- 图片库 -->
70   - <div class="img_box">
71   - <van-image
72   - class="img"
73   - fit="cover"
74   - lazy-load
75   - src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>
76   - <van-image
77   - class="img"
78   - fit="cover"
79   - lazy-load
80   - src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>
81   - <van-image
82   - class="img"
83   - fit="cover"
84   - lazy-load
85   - src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>
86   - </div>
87   - <!-- 地址信息 -->
88   - <div class="address_info">
89   - <div class="left">
90   - <img src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
91   - 陕西省 西安市 西安区
92   - </div>
93   - <div class="right">
94   - 2020-09-23
95   - </div>
96   - </div>
  59 + <div class="list_box">
  60 + <item></item>
97 61 </div>
98 62 </div>
99 63 </template>
100 64  
101 65 <script>
  66 + import item from "./item";
102 67 export default {
103 68 data(){
104 69 return{
... ... @@ -107,6 +72,7 @@ export default {
107 72 },
108 73 //部件
109 74 components: {
  75 + item
110 76 },
111 77 //静态
112 78 props: [
... ... @@ -250,6 +216,7 @@ export default {
250 216 .classification_box{
251 217 display: flex;
252 218 align-items: center;
  219 + padding-bottom: 20px;
253 220 .item{
254 221 flex: 1;
255 222 display: flex;
... ... @@ -263,76 +230,81 @@ export default {
263 230 }
264 231 }
265 232 // 页面信息
266   -.item_box{
267   - margin: 20px;
268   - padding: 30px 20px 20px 20px;
269   - background-color: #fff;
270   - border-radius: 16px;
271   - .user_info{
272   - display:flex;
273   - .pic{
274   - display:block;
275   - width:80px;
276   - height:80px;
277   - border-radius: 50%;
278   - margin-right: 90px;
279   - }
280   - .name{
281   - flex: 1;
282   - height: 80px;
283   - font-size: 30px;
284   - font-family: PingFangSC-Regular, PingFang SC;
285   - font-weight: 400;
286   - color: #333333;
287   - line-height: 80px;
288   - overflow: hidden;
289   - text-overflow:ellipsis;
290   - white-space: nowrap;
291   - }
292   - }
293   - .desc{
294   - height: 74px;
295   - font-size: 26px;
296   - font-weight: 400;
297   - color: #666660;
298   - line-height: 37px;
299   - margin-top: 30px;
300   - display: -webkit-box;
301   - -webkit-box-orient: vertical;
302   - -webkit-line-clamp: 2;
303   - overflow: hidden;
304   - }
305   - .img_box{
306   - width: 100%;
307   - display: -ms-flexbox;
308   - display: flex;
309   - -ms-flex-wrap: wrap;
310   - flex-wrap: wrap;
311   - list-style: none;
312   - .img{
313   - padding: 5px;
314   - flex:1
315   - }
316   - }
317   - .address_info{
318   - margin-top:30px;
319   - font-size:24px;
320   - font-weight: 300;
321   - color: #9A9A9A;
322   - line-height: 33px;
323   - .left{
  233 +.list_box{
  234 + padding: 20px 0;
  235 + background-color: #F3F3F3;
  236 + .item_box{
  237 + margin: 20px;
  238 + padding: 30px 20px 20px 20px;
  239 + background-color: #fff;
  240 + border-radius: 16px;
  241 + .user_info{
324 242 display:flex;
325   - align-items: center;
326   - float:left;
327   - img{
  243 + .pic{
328 244 display:block;
329   - width:22px;
330   - height:22px;
331   - margin-right: 10px;
  245 + width:80px;
  246 + height:80px;
  247 + border-radius: 50%;
  248 + margin-right: 90px;
  249 + }
  250 + .name{
  251 + flex: 1;
  252 + height: 80px;
  253 + font-size: 30px;
  254 + font-family: PingFangSC-Regular, PingFang SC;
  255 + font-weight: 400;
  256 + color: #333333;
  257 + line-height: 80px;
  258 + overflow: hidden;
  259 + text-overflow:ellipsis;
  260 + white-space: nowrap;
332 261 }
333 262 }
334   - .right{
335   - float:right;
  263 + .desc{
  264 + height: 74px;
  265 + font-size: 26px;
  266 + font-weight: 400;
  267 + color: #666660;
  268 + line-height: 37px;
  269 + margin-top: 30px;
  270 + display: -webkit-box;
  271 + -webkit-box-orient: vertical;
  272 + -webkit-line-clamp: 2;
  273 + overflow: hidden;
  274 + }
  275 + .img_box{
  276 + width: 100%;
  277 + display: -ms-flexbox;
  278 + display: flex;
  279 + -ms-flex-wrap: wrap;
  280 + flex-wrap: wrap;
  281 + list-style: none;
  282 + .img{
  283 + padding: 5px;
  284 + flex:1
  285 + }
  286 + }
  287 + .address_info{
  288 + margin-top:30px;
  289 + font-size:24px;
  290 + font-weight: 300;
  291 + color: #9A9A9A;
  292 + line-height: 33px;
  293 + overflow: hidden;
  294 + .left{
  295 + display:flex;
  296 + align-items: center;
  297 + float:left;
  298 + img{
  299 + display:block;
  300 + width:22px;
  301 + height:22px;
  302 + margin-right: 10px;
  303 + }
  304 + }
  305 + .right{
  306 + float:right;
  307 + }
336 308 }
337 309 }
338 310 }
... ...