jjx-web/pages/index/shop/shop.vue

<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="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>
          <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">
          <u-button type="error" plain>下单询价</u-button>
        </view>
      </view>
      <!-- 合作单位/联营单位-->
      <view class="cooperate">
        <view class="title">合作单位/联营单位</view>
        <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>
            </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" /><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>
          </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" />
        <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>
            </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"/>
    <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;
    }
  }
  .cooperate{
    .title{
      text-align: center;
      color: #bf2b28;
      font-size: 28px;
      line-height: 3em;
    }
    .wrap{
      flex-wrap: wrap;
    }
    .grid-content{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      flex-direction: column;
      .comments{
        line-height: 2em;
      }
    }
    .bg-purple{
      border-top: 1px solid #f3f3f3;
      border-right: 1px solid #f3f3f3;
      .image{
        width: 140px;
      }
    }
  }
}
</style>