b2894lxlx/jjx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成特产商城页面制作

Browse Source
This commit is contained in:
gxwebsoft
2023-12-04 02:58:50 +08:00
parent fcd32fe59f
commit 2cc1345390
5 changed files with 390 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/shop/shop.vue
+97 -204
View File
@@ -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="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="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="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>
</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 class="goods-name">商品名称</view>
<view class="goods-price">￥139.00</view>
</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>
<div class="pagination">
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</view>
<!-- 现货市场 end -->
<gap height="50"/>
@@ -334,33 +209,51 @@ export default {
align-items: center;
}
}
.cooperate{
.title{
text-align: center;
color: #bf2b28;
font-size: 28px;
line-height: 3em;
}
.wrap{
flex-wrap: wrap;
}
.grid-content{
}
.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;
justify-content: center;
align-items: center;
padding: 10px;
flex-direction: column;
.comments{
line-height: 2em;
justify-content: start;
line-height: 2em;
.goods-name{
font-size: 16px;
display: flex;
align-items: center;
}
}
.bg-purple{
border-top: 1px solid #f3f3f3;
border-right: 1px solid #f3f3f3;
.image{
width: 140px;
.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>