test

zhiyangdu
1 parent 16f30c82
Showing 3 changed files with 283 additions and 131 deletions
src/pages/test/item.vue
src/pages/test/test.less
src/pages/test/test.vue
+<template>
+<div>
+  <!-- item -->
+    <div class="item_box">
+      <!-- 用户信息 -->
+      <div class="user_info">
+        <img class="pic" src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
+        <div class="name">陕西省-张三-20100759</div>
+      </div>
+      <!-- 描述 -->
+      <div class="desc">
+        纯天然无污染无添加，一年取一次原生态放养土蜂蜜百花蜜纯天然无污染无添加
+      </div>
+      <!-- 图片库 -->
+      	<div class="img-box" >
+                <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)">
+                <!--<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)">-->
+                    <van-image
+                        v-if="index < 9"
+                        class="img"
+                        fit="cover"
+                        lazy-load
+                        :src="(item.img || item) + (item.v === true ? '' : SIGN.BIG)"
+                    >
+                    <template v-slot:error>
+                        <img class="img" src="static/img/x.jpg" alt=""/>
+                    </template>
+                    </van-image>
+                    <div v-if="index < 8 && item.v === true" class="play_box">
+                    <img src="static/img/play.png" />
+                    </div>
+                    <div v-if="grids.list.length>9 && index == 8" class="title">共{{grids.list.length}}张</div>
+                </div>
+			</div>
+      <!-- 地址信息 -->
+      <div class="address_info">
+        <div class="left">
+            <img src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
+            陕西省 西安市 西安区
+        </div>
+        <div class="right">
+          2020-09-23
+        </div>
+      </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      grids:{
+        list:[
+          {img:"http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"},
+          {img:"http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"},
+          {img:"http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"}
+          ]
+      }
+    }
+  },
+//部件
+ components: {
+ },
+//静态
+ props: [
+],
+//对象内部的属性监听，也叫深度监听
+ watch: {
+ },
+//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
+ computed: { 
+ },
+//方法表示一个具体的操作，主要书写业务逻辑；
+ methods: { 
+    
+ },
+//请求数据
+ created() {
+},
+ mounted() {
+}
+}
+</script>
+
+<style scoped lang="less" rel="stylesheet/less">
+// 页面信息
+.item_box{
+    margin: 20px;
+    padding: 30px 20px 20px 20px;
+    background-color: #fff;
+    border-radius: 16px;
+    .user_info{
+      display:flex;
+      .pic{
+        display:block;
+        width:80px;
+        height:80px;
+        border-radius: 50%;
+        margin-right: 90px;
+      }
+      .name{
+        flex: 1;
+        height: 80px;
+        font-size: 30px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 80px;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+      }
+    }
+    .desc{
+    height: 74px;
+    font-size: 26px;
+    font-weight: 400;
+    color: #666660;
+    line-height: 37px;
+    margin-top: 30px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    }
+    .img-box {
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            //justify-content: space-around;
+            list-style: none;
+            .item{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding:0 5px;
+                box-sizing: border-box;
+                position: relative;
+                .title{
+                    position: absolute;
+                    flex: 1;
+                    font-size:28px;
+                    color: #fff;
+                }
+                .img {
+                    display: block;
+                    width: 100%;
+                    height: 340px;
+                }
+                .play_box{
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    left: 0;
+                    top:0;
+                    //background-color: #000;
+                    z-index: 1;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    img{
+                        width: 86px;
+                        height: 86px;
+                    }
+                }
+            }
+            .two{
+                width: calc(calc(100% / 2));
+                margin-top: 10px;
+                .img {
+                    height: 340px;
+                }
+            }
+            .three{
+                width: calc(calc(100% / 3));
+                margin-top: 10px;
+                .img {
+                    height: 222px;
+                }
+            }
+		}
+    .address_info{
+      margin-top:30px;
+      font-size:24px;
+      font-weight: 300;
+      color: #9A9A9A;
+      line-height: 33px;
+      overflow: hidden;
+      .left{
+        display:flex;
+        align-items: center;
+        float:left;
+        img{
+          display:block;
+          width:22px;
+          height:22px;
+          margin-right: 10px;
+        }
+      }
+      .right{
+        float:right;
+      }
+    }
+  }
+</style>
+
-@charset "UTF-8";
-
-.search-box {
-    background-color: #ffffff;
-    min-height: 100vh;
-    .nav {
-        position: fixed;
-        top: 0;
-        background-color: #FAFBFD;
-    }
-    .pl {
-        background-color: transparent;
-        width: 750px;
-        height: 104px;
-    }
-    .pages-box {
-        .infinite-box {
-            .list-com + .list-com {
-                /deep/ .spacing-box {
-                    background-color: #F9F9F9;
-                    width: 100%;
-                    height: 14px;
-                }
-            }
-        }
-    }
-}
@@ -56,49 +56,14 @@
         </div>
   </div>
   <!-- item -->
-  <div class="item_box">
-    <!-- 用户信息 -->
-    <div class="user_info">
-      <img class="pic" src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
-      <div class="name">陕西省-张三-20100759</div>
-    </div>
-    <!-- 描述 -->
-    <div class="desc">
-      纯天然无污染无添加，一年取一次原生态放养土蜂蜜百花蜜纯天然无污染无添加
-    </div>
-    <!-- 图片库 -->
-    <div class="img_box">
-      <van-image
-            class="img"
-            fit="cover"
-            lazy-load
-            src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>
-       <van-image
-            class="img"
-            fit="cover"
-            lazy-load
-            src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>
-         <van-image
-            class="img"
-            fit="cover"
-            lazy-load
-            src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>          
-    </div>
-    <!-- 地址信息 -->
-    <div class="address_info">
-      <div class="left">
-           <img src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
-           陕西省 西安市 西安区
-      </div>
-      <div class="right">
-        2020-09-23
-      </div>
-    </div>
+  <div class="list_box">
+    <item></item>
   </div>
 </div>
 </template>
 <script>
+  import item from "./item";
 export default {
   data(){
     return{
@@ -107,6 +72,7 @@ export default {
   },
 //部件
  components: {
+   item
  },
 //静态
  props: [
@@ -250,6 +216,7 @@ export default {
 .classification_box{
   display: flex;
   align-items: center;
+  padding-bottom: 20px;
   .item{
     flex: 1;
     display: flex;
@@ -263,76 +230,81 @@ export default {
   }
 }
 // 页面信息
-.item_box{
-  margin: 20px;
-  padding: 30px 20px 20px 20px;
-  background-color: #fff;
-  border-radius: 16px;
-  .user_info{
-    display:flex;
-    .pic{
-      display:block;
-      width:80px;
-      height:80px;
-      border-radius: 50%;
-      margin-right: 90px;
-    }
-    .name{
-      flex: 1;
-      height: 80px;
-      font-size: 30px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #333333;
-      line-height: 80px;
-      overflow: hidden;
-      text-overflow:ellipsis;
-      white-space: nowrap;
-    }
-  }
-  .desc{
-  height: 74px;
-  font-size: 26px;
-  font-weight: 400;
-  color: #666660;
-  line-height: 37px;
-  margin-top: 30px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  }
-  .img_box{
-    width: 100%;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    list-style: none;
-    .img{
-      padding: 5px;
-      flex:1
-    }
-  }
-  .address_info{
-    margin-top:30px;
-    font-size:24px;
-    font-weight: 300;
-    color: #9A9A9A;
-    line-height: 33px;
-    .left{
+.list_box{
+  padding: 20px 0;
+  background-color: #F3F3F3;
+    .item_box{
+    margin: 20px;
+    padding: 30px 20px 20px 20px;
+    background-color: #fff;
+    border-radius: 16px;
+    .user_info{
       display:flex;
-      align-items: center;
-      float:left;
-      img{
+      .pic{
         display:block;
-        width:22px;
-        height:22px;
-        margin-right: 10px;
+        width:80px;
+        height:80px;
+        border-radius: 50%;
+        margin-right: 90px;
+      }
+      .name{
+        flex: 1;
+        height: 80px;
+        font-size: 30px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 80px;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
       }
     }
-    .right{
-      float:right;
+    .desc{
+    height: 74px;
+    font-size: 26px;
+    font-weight: 400;
+    color: #666660;
+    line-height: 37px;
+    margin-top: 30px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    }
+    .img_box{
+      width: 100%;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      list-style: none;
+      .img{
+        padding: 5px;
+        flex:1
+      }
+    }
+    .address_info{
+      margin-top:30px;
+      font-size:24px;
+      font-weight: 300;
+      color: #9A9A9A;
+      line-height: 33px;
+      overflow: hidden;
+      .left{
+        display:flex;
+        align-items: center;
+        float:left;
+        img{
+          display:block;
+          width:22px;
+          height:22px;
+          margin-right: 10px;
+        }
+      }
+      .right{
+        float:right;
+      }
     }
   }
 }