shop

components/shop/list/index.vue

@@ -1,15 +1,54 @@
 <template>
     <view class="list">
-        
+        <view class="top">
+            商品推荐
+        </view>
+        <view class="label">
+            <text>asd</text>
+            <text>sda</text>
+            <text>w3eq</text>
+        </view>
+        <view class="item">
+            <item></item>
+            <item></item>
+            <item></item>
+            <item></item>
+            <item></item>
+        </view>
     </view>    
 </template>
 <script>
+import item from "./item"
 export default {
-    name:"list"
+    name:"list",
+    components:{
+        item
+    }
 }
 </script>
 <style lang="scss" scoped>
 .list{
+    .top{
+        font-size: 30rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        text-align: center;
+        color: #333;
+    }
+    .label{
+        display: flex;
+        color: #999;
 
+        >text{
+            margin-right: 34rpx;
+        }
+    }
+    .item{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin-top: 20rpx;
+
+    }
 }
 </style>

components/shop/list/item.vue

@@ -0,0 +1,49 @@
+<template>
+    <view class="item">
+        <image class="img"></image>
+        <view class="info">
+            <text class="title"></text>
+            <text class="jianjie"></text>
+            <text class="price"></text>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    name:"item"    
+}
+</script>
+<style lang="scss" scoped>
+.item{
+    
+    width: 330rpx;
+    height: 469rpx;
+    margin-bottom: 27rpx;
+    background-color: #f8f8f8;
+    border-radius: 10rpx;
+    overflow: hidden;
+    .img{
+        width: 100%;
+        height: 272rpx;
+        
+    }
+    .info{
+        padding: 0 12rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        .title{
+            font-size: 30rpx;
+            color: #333;
+        }
+        .jianjie{
+            font-size: 26rpx;
+            color: #666;
+        }
+        .price{
+            color: #FF3131;
+            font-size: 26rpx;
+        }
+    }
+}
+</style>

pages/shop/index.vue

@@ -45,6 +45,7 @@
         <image class="lingquan"></image>
         <youhq></youhq>
         <view class="hr" style="margin-top:40rpx"></view>
+        <list></list>
     </view>
 </template>
 <script>
@@ -53,6 +54,7 @@ import recommend from "@/components/shop/recommend/index"
 import seckill from "@/components/shop/seckill/index"
 import group from "@/components/shop/group/index"
 import youhq from "@/components/shop/youhq/index"
+import list from "../../components/shop/list/index"
 
 export default {
     name:"shop",
@@ -61,7 +63,8 @@ export default {
         recommend,
         seckill,
         group,
-        youhq
+        youhq,
+        list
     },
     data(){
         return {