完成特产商城页面制作

components/category-bar/category-bar.vue

@@ -59,7 +59,7 @@
                                 <li class="nav ">
                                     <a href="/">首页</a>
                                 </li>
-                                <li class="nav" @click="navTo('/pages/index/self-support/self-support')">
+                                <li class="nav" @click="navTo('/pages/index/self-support/self-support')" :class="[currentPage.includes('self-support') ? 'active' : '']">
                                     <a href="javascript:;">金久信自营</a>
                                 </li>
                                 <li @click="navTo('/pages/spot/goods/goods')" class="nav"
@@ -88,7 +88,7 @@
                                     :class="[currentPage.includes('article')  ? 'active' : '']">
                                     <a href="javascript:;">金久信学堂</a>
                                 </li>
-                                <li class="nav " @click="navTo('/pages/index/shop/shop')">>
+                                <li class="nav " @click="navTo('/pages/index/shop/shop')" :class="[currentPage.includes('shop')  ? 'active' : '']">
                                     <a href="javascript:;">特产商城</a>
                                 </li>
                             </ul>

pages.json

@@ -200,6 +200,14 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/index/shop/detail",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "商品详情",
+        		"enablePullDownRefresh" : false
+        	}
         }
     ],
 	"globalStyle": {

pages/index/self-support/self-support.vue

@@ -31,7 +31,7 @@
         <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -39,7 +39,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -47,7 +47,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -55,7 +55,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -63,7 +63,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -71,7 +71,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -79,7 +79,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -87,7 +87,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -97,7 +97,7 @@
         <u-gap height="5" bg-color="#f3f3f3" /><el-row class="wrap" type="flex" :gutter="0" justify="space-between">
         <el-col :span="6">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
             <view class="comments">
               主营：架子管 扣件 建筑材料租赁
             </view>
@@ -105,7 +105,7 @@
         </el-col>
         <el-col :span="6">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
             <view class="comments">
               主营：架子管 扣件 建筑材料租赁
             </view>
@@ -113,7 +113,7 @@
         </el-col>
         <el-col :span="6">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
             <view class="comments">
               主营：架子管 扣件 建筑材料租赁
             </view>
@@ -121,7 +121,7 @@
         </el-col>
         <el-col :span="6">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
             <view class="comments">
               主营：架子管 扣件 建筑材料租赁
             </view>
@@ -129,7 +129,7 @@
         </el-col>
         <el-col :span="6">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
             <view class="comments">
               主营：架子管 扣件 建筑材料租赁
             </view>
@@ -137,7 +137,7 @@
         </el-col>
         <el-col :span="6">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
             <view class="comments">
               主营：架子管 扣件 建筑材料租赁
             </view>
@@ -145,7 +145,7 @@
         </el-col>
         <el-col :span="6">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
             <view class="comments">
               主营：架子管 扣件 建筑材料租赁
             </view>
@@ -153,7 +153,7 @@
         </el-col>
         <el-col :span="6">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
             <view class="comments">
               主营：架子管 扣件 建筑材料租赁
             </view>
@@ -164,7 +164,7 @@
         <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -172,7 +172,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -180,7 +180,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -188,7 +188,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -196,7 +196,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -204,7 +204,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -212,7 +212,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>
@@ -220,7 +220,7 @@
           </el-col>
           <el-col :span="6">
             <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
               <view class="comments">
                 主营：架子管 扣件 建筑材料租赁
               </view>

pages/index/shop/detail.vue

@@ -0,0 +1,259 @@
+<template>
+  <view>
+    <top-bar></top-bar>
+    <common-header></common-header>
+    <category-bar></category-bar>
+    <view class="w-1200">
+      <u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
+      <view class="tool-bar">
+        <view class="search">
+          <text>地区：</text>
+          <el-cascader :options="options">
+            <template slot-scope="{ node, data }">
+              <span>{{ data.label }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </view>
+        <view class="buy-btn">
+          <image src="https://oss.wsdns.cn/20231204/bcc976f4396e437abf19deb11c1f06b4.png" mode="widthFix" />
+        </view>
+      </view>
+      <view class="tool-bar">
+        <view class="item">分类：</view>
+        <view class="item">全部</view>
+        <view class="item">果蔬农产品</view>
+        <view class="item">特产食品粮油肉蛋禽</view>
+        <view class="item">茶类</view>
+        <view class="item">酒类</view>
+        <view class="item">工艺类</view>
+        <view class="item">旅游户外商用</view>
+        <view class="item">日用美容洗涤</view>
+        <view class="item">电子产品</view>
+      </view>
+    </view>
+
+    <view class="goods-list">
+      <el-row class="wrap" type="flex" :gutter="10" justify="space-between">
+        <el-col :span="5">
+          <div class="grid-content bg-purple" @click="navTo('/pages/goods-detail/goods-detail?id=1')">
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
+            <view class="comments">
+              <view class="goods-name">
+                <el-tag
+                    type="danger"
+                    size="mini">
+                  自营
+                </el-tag>
+                商品名称
+              </view>
+              <view class="goods-price">￥139.00</view>
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="grid-content bg-purple">
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
+            <view class="comments">
+              <view class="goods-name">商品名称</view>
+              <view class="goods-price">￥139.00</view>
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="grid-content bg-purple">
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
+            <view class="comments">
+              <view class="goods-name">商品名称</view>
+              <view class="goods-price">￥139.00</view>
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="grid-content bg-purple">
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
+            <view class="comments">
+              <view class="goods-name">商品名称</view>
+              <view class="goods-price">￥139.00</view>
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="grid-content bg-purple">
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
+            <view class="comments">
+              <view class="goods-name">商品名称</view>
+              <view class="goods-price">￥139.00</view>
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="grid-content bg-purple">
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
+            <view class="comments">
+              <view class="goods-name">商品名称</view>
+              <view class="goods-price">￥139.00</view>
+            </view>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="pagination">
+        <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="1000">
+        </el-pagination>
+      </div>
+    </view>
+    <!-- 现货市场 end -->
+    <gap height="50"/>
+    <common-footer></common-footer>
+  </view>
+</template>
+
+<script>
+import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
+
+export default {
+  components: {UGap},
+  data() {
+    return {
+      list: [{
+        image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+        title: '昨夜星辰昨夜风，画楼西畔桂堂东'
+      },
+        {
+          image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+          title: '身无彩凤双飞翼，心有灵犀一点通'
+        },
+        {
+          image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+        }
+      ],
+      options: [{
+        value: 'zhinan',
+        label: '广西',
+        children: [{
+          value: 'shejiyuanze',
+          label: '南宁市',
+          children: [{
+            value: 'yizhi',
+            label: '良庆区'
+          }, {
+            value: 'fankui',
+            label: 'XXX'
+          }, {
+            value: 'xiaolv',
+            label: 'XXX'
+          }, {
+            value: 'kekong',
+            label: 'XXX'
+          }]
+        }, {
+          value: 'daohang',
+          label: '北海市',
+          children: [{
+            value: 'cexiangdaohang',
+            label: 'XXX'
+          }, {
+            value: 'dingbudaohang',
+            label: 'XXX'
+          }]
+        }]
+      }]
+    };
+  },
+  onLoad(options) {
+    console.log(options);
+    if (options && options.menu) {
+      this.currMenu = options.menu
+    }
+  },
+  methods: {
+    menuSelect(e) {
+      this.currMenu = e
+    },
+    navTo(url) {
+      vk.navigateTo(url);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.w-1200 {
+  width: 1200px;
+  margin: 20px auto;
+  background-color: #fff;
+  .test{
+    height: 50px;
+    color: #ffffff;
+    font-size: 18px;
+    background-color: #bf2b28;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text{
+      margin: 0 20px;
+    }
+  }
+  .tool-bar{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    font-size: 16px;
+    .search{
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.wrap{
+  flex-wrap: wrap;
+}
+.goods-list{
+  width: 1200px;
+  margin: 20px auto;
+  .grid-content{
+    display: flex;
+    justify-content: center;
+    background-color: #fff;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    flex-direction: column;
+    .comments{
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      line-height: 2em;
+      .goods-name{
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+      }
+      .goods-price{
+        color: #bf2b28;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+  .bg-purple{
+    border-top: 1px solid #f3f3f3;
+    border-right: 1px solid #f3f3f3;
+    image{
+      width: 180px;
+      height: 180px;
+    }
+  }
+}
+.pagination{
+  width: 1200px;
+  margin: 20px auto;
+  display: flex;
+  justify-content: center;
+}
+</style>

pages/index/shop/shop.vue

@@ -5,14 +5,9 @@
     <category-bar></category-bar>
     <view class="w-1200">
       <u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
-      <view class="test">
-        <text @click="navTo('/pages/index/self-support/self-support')">自营钢城</text>
-        <text @click="navTo('/pages/index/server/server')">平台服务</text>
-        <text @click="navTo('/pages/index/shop/shop')">特产商城</text>
-      </view>
       <view class="tool-bar">
         <view class="search">
-          <text>交易区域：</text>
+          <text>地区：</text>
           <el-cascader :options="options">
             <template slot-scope="{ node, data }">
               <span>{{ data.label }}</span>
@@ -21,214 +16,94 @@
           </el-cascader>
         </view>
         <view class="buy-btn">
-          <u-button type="error" plain>下单询价</u-button>
+          <image src="https://oss.wsdns.cn/20231204/bcc976f4396e437abf19deb11c1f06b4.png" mode="widthFix" />
         </view>
       </view>
-      <!-- 合作单位/联营单位-->
+      <view class="tool-bar">
-      <view class="cooperate">
+        <view class="item">分类：</view>
-        <view class="title">合作单位/联营单位</view>
+        <view class="item">全部</view>
-        <u-gap height="5" bg-color="#f3f3f3" />
+        <view class="item">果蔬农产品</view>
-        <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+        <view class="item">特产食品粮油肉蛋禽</view>
-          <el-col :span="6">
+        <view class="item">茶类</view>
-            <div class="grid-content bg-purple">
+        <view class="item">酒类</view>
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+        <view class="item">工艺类</view>
-              <view class="comments">
+        <view class="item">旅游户外商用</view>
-                主营：架子管 扣件 建筑材料租赁
+        <view class="item">日用美容洗涤</view>
-              </view>
+        <view class="item">电子产品</view>
-            </div>
+      </view>
-          </el-col>
+    </view>
-          <el-col :span="6">
+
-            <div class="grid-content bg-purple">
+    <view class="goods-list">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+      <el-row class="wrap" type="flex" :gutter="10" justify="space-between">
-              <view class="comments">
+        <el-col :span="5">
-                主营：架子管 扣件 建筑材料租赁
+          <div class="grid-content bg-purple" @click="navTo('/pages/goods-detail/goods-detail?id=1')">
-              </view>
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-        </el-row>
-        <u-gap height="5" bg-color="#f3f3f3" /><el-row class="wrap" type="flex" :gutter="0" justify="space-between">
-        <el-col :span="6">
-          <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
             <view class="comments">
-              主营：架子管 扣件 建筑材料租赁
+              <view class="goods-name">
+                <el-tag
+                    type="danger"
+                    size="mini">
+                  自营
+                </el-tag>
+                商品名称
+              </view>
+              <view class="goods-price">￥139.00</view>
             </view>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="5">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
             <view class="comments">
-              主营：架子管 扣件 建筑材料租赁
+              <view class="goods-name">商品名称</view>
+              <view class="goods-price">￥139.00</view>
             </view>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="5">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
             <view class="comments">
-              主营：架子管 扣件 建筑材料租赁
+              <view class="goods-name">商品名称</view>
+              <view class="goods-price">￥139.00</view>
             </view>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="5">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
             <view class="comments">
-              主营：架子管 扣件 建筑材料租赁
+              <view class="goods-name">商品名称</view>
+              <view class="goods-price">￥139.00</view>
             </view>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="4">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
             <view class="comments">
-              主营：架子管 扣件 建筑材料租赁
+              <view class="goods-name">商品名称</view>
+              <view class="goods-price">￥139.00</view>
             </view>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="5">
           <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
             <view class="comments">
-              主营：架子管 扣件 建筑材料租赁
+              <view class="goods-name">商品名称</view>
-            </view>
+              <view class="goods-price">￥139.00</view>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-            <view class="comments">
-              主营：架子管 扣件 建筑材料租赁
-            </view>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="grid-content bg-purple">
-            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-            <view class="comments">
-              主营：架子管 扣件 建筑材料租赁
             </view>
           </div>
         </el-col>
       </el-row>
-        <u-gap height="5" bg-color="#f3f3f3" />
+      <div class="pagination">
-        <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+        <el-pagination
-          <el-col :span="6">
+            background
-            <div class="grid-content bg-purple">
+            layout="prev, pager, next"
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            :total="1000">
-              <view class="comments">
+        </el-pagination>
-                主营：架子管 扣件 建筑材料租赁
+      </div>
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bg-purple">
-              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
-              <view class="comments">
-                主营：架子管 扣件 建筑材料租赁
-              </view>
-            </div>
-          </el-col>
-        </el-row>
-        <u-gap height="5" bg-color="#f3f3f3" />
-      </view>
     </view>
     <!-- 现货市场 end -->
     <gap height="50"/>
@@ -334,33 +209,51 @@ export default {
       align-items: center;
     }
   }
-  .cooperate{
+}
-    .title{
+.wrap{
-      text-align: center;
+  flex-wrap: wrap;
-      color: #bf2b28;
+}
-      font-size: 28px;
+.goods-list{
-      line-height: 3em;
+  width: 1200px;
-    }
+  margin: 20px auto;
-    .wrap{
+  .grid-content{
-      flex-wrap: wrap;
+    display: flex;
-    }
+    justify-content: center;
-    .grid-content{
+    background-color: #fff;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    flex-direction: column;
+    .comments{
       display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 10px;
       flex-direction: column;
-      .comments{
+      justify-content: start;
-        line-height: 2em;
+      line-height: 2em;
+      .goods-name{
+        font-size: 16px;
+        display: flex;
+        align-items: center;
       }
-    }
+      .goods-price{
-    .bg-purple{
+        color: #bf2b28;
-      border-top: 1px solid #f3f3f3;
+        font-size: 20px;
-      border-right: 1px solid #f3f3f3;
+        font-weight: 600;
-      .image{
-        width: 140px;
       }
     }
   }
+  .bg-purple{
+    border-top: 1px solid #f3f3f3;
+    border-right: 1px solid #f3f3f3;
+    image{
+      width: 180px;
+      height: 180px;
+    }
+  }
+}
+.pagination{
+  width: 1200px;
+  margin: 20px auto;
+  display: flex;
+  justify-content: center;
 }
 </style>