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-07 23:21:43 +08:00
parent c971520e6b
commit 50d0bdd624
2 changed files with 973 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/category-bar/category-bar.vue
+4 -1
View File
@@ -6,7 +6,7 @@
<div class="clearfix navigation-bottom"> <div class="clearfix navigation-bottom">
<div class="classification" id="bannerAllPro"> <div class="classification" id="bannerAllPro">
<div class="classification-text"> <div class="classification-text">
<i class="icon-nav icon-nav-menu"></i> 全部商品分类 <i class="el-icon-menu"></i> 全部商品分类
</div> </div>
<!--全部商品分类开始--> <!--全部商品分类开始-->
<div v-show="alwaysShowCategory || showCategory" class="banner-left" style=""> <div v-show="alwaysShowCategory || showCategory" class="banner-left" style="">
@@ -368,4 +368,7 @@ export default {
} }
} }
} }
.el-icon-menu{
padding: 0 4px;
}
</style> </style>
pages/index/index.vue
+671 -14
View File
@@ -8,8 +8,7 @@
<view class="banner-outer"> <view class="banner-outer">
<el-carousel height="365px"> <el-carousel height="365px">
<el-carousel-item v-for="item in 4" :key="item"> <el-carousel-item v-for="item in 4" :key="item">
<image class="carousel-img" <image class="carousel-img" src="/static/images/336a76fbf9fe44a07b5cfd4caf6f8bb9.jpg"
src="/static/images/336a76fbf9fe44a07b5cfd4caf6f8bb9.jpg"
mode="scaleToFill"></image> mode="scaleToFill"></image>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
@@ -55,15 +54,39 @@
</div> </div>
</div> </div>
<view class="register">
<view class="left">
<view class="text">
<text>免费注册！！</text>
<el-divider class="divider" direction="vertical" />
<view class="ad-text2">
<text class="yellow">成为平台会员 免费询价</text>
<text class="white">企业专享价 续重免运费 增值权益 免息账期 采购管家</text>
</view>
</view>
</view>
<view class="right">
<el-button type="warning" round>
立即注册
<i class="el-icon-arrow-right"></i>
</el-button>
</view>
</view>
<!-- <gap height="100" />-->
<div style="clear:both;width: 100%;"></div> <div style="clear:both;width: 100%;"></div>
<!-- 询价列表 start --> <!-- 询价列表 start -->
<view class="enquiry-outer"> <view class="enquiry-outer">
<view class="" style="height: 40px;"></view> <view class="" style="height: 20px;"></view>
<el-divider> <el-divider>
<view class="divider-text">最新询价信息</view> <view class="divider-text">最新询价信息</view>
</el-divider> </el-divider>
<view class="" style="height: 40px;"></view> <view class="" style="height: 20px;"></view>
<div class="mod-inner2Listcenter clearfix sliper"> <div class="mod-inner2Listcenter clearfix sliper">
<ul class="clearfix"> <ul class="clearfix">
<li v-for="(item, index) in enquirySheetData" class="inli-mask" :key="index" <li v-for="(item, index) in enquirySheetData" class="inli-mask" :key="index"
@@ -88,19 +111,19 @@
</a> </a>
</li> </li>
<div style="clear:both;width: 100%;"></div> <div class="show-more"><i class="el-icon-view"></i>查看更多</div>
</ul> </ul>
</div> </div>
</view> </view>
<!-- 询价列表 end --> <!-- 询价列表 end -->
<!-- 现货市场 start --> <!-- 现货市场 start -->
<view class="" style="height: 40px;"></view> <view class="" style="height: 20px;"></view>
<view class="spot-outer"> <view class="spot-outer">
<el-divider> <el-divider>
<view class="spot-divider-text">现货市场</view> <view class="spot-divider-text">现货市场</view>
</el-divider> </el-divider>
<view class="" style="height: 40px;"></view> <view class="" style="height: 20px;"></view>
<view class="goods-list"> <view class="goods-list">
<view v-for="(item, index) in spotGoodsData" :key="index" class="goods" <view v-for="(item, index) in spotGoodsData" :key="index" class="goods"
:style="{marginRight:( index % 4 === 0 && index > 0) ? 0 : '25px'}"> :style="{marginRight:( index % 4 === 0 && index > 0) ? 0 : '25px'}">
@@ -115,17 +138,403 @@
<view v-if="item.user.accountType === 2" class="goods-company">{{ item.user.company.companyName }} <view v-if="item.user.accountType === 2" class="goods-company">{{ item.user.company.companyName }}
</view> </view>
<el-button class="empty-bg-plain-btn" <el-button class="empty-bg-plain-btn"
@click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);" @click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);" type="primary" plain
type="primary" plain size="small">立即查看 size="small">立即查看
</el-button> </el-button>
</view> </view>
</view> </view>
<view class="text-center"> <div class="show-more"><i class="el-icon-view"></i>查看更多</div>
<el-button>查看更多</el-button>
</view>
</view> </view>
<!-- 现货市场 end --> <!-- 现货市场 end -->
<gap height="100"/> <gap height="50" />
<!-- 合作商家 start -->
<view class="" style="height: 20px;"></view>
<view class="spot-outer">
<el-divider>
<view class="spot-divider-text">合作商家</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<view class="goods-list">
<view v-for="(item, index) in spotGoodsData" :key="index" class="goods"
:style="{marginRight:( index % 4 === 0 && index > 0) ? 0 : '25px'}">
<view class="goods-title">{{ item.name }}</view>
<view class="goods-stock">库存：{{ item.stock }}吨</view>
<view class="goods-address">供货地：{{ item.addressStr }}</view>
<!-- <view class="goods-image">-->
<!-- <image :src="item.user.businessCard.logo" mode="aspectFit"></image>-->
<!-- </view>-->
<view v-if="item.user.accountType === 1" class="goods-company">{{ item.user.person.personName }}
</view>
<view v-if="item.user.accountType === 2" class="goods-company">{{ item.user.company.companyName }}
</view>
<el-button class="empty-bg-plain-btn"
@click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);" type="primary" plain
size="small">立即查看
</el-button>
</view>
</view>
<div class="show-more"><i class="el-icon-view"></i>查看更多</div>
</view>
<!-- 合作商家 end -->
<!-- 金久信服务商展示 start -->
<view class="w1200">
<view class="" style="height: 20px;"></view>
<el-divider>
<view class="divider-text">金久信服务商展示</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<view class="server-card2">
<view class="item b1">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">交易安全</el-button>
</view>
</view>
<view class="item b2">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">代检代查</el-button>
</view>
</view>
<view class="item b3">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">优势资源匹配</el-button>
</view>
</view>
<view class="item b4">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">交易模式多元化</el-button>
</view>
</view>
<view class="item b5">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">电子合同</el-button>
</view>
</view>
</view>
</view>
<!-- 合作商家 end -->
<!-- 交易模式 start -->
<view class="w1200">
<view class="" style="height: 20px;"></view>
<el-divider>
<view class="divider-text">交易模式</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="6">
<el-card shadow="hover" class="transaction-card">
<view class="item">
<view class="p1">
<i class="el-icon-lock"></i>
自主交易
</view>
<view class="p2">
<view class="line"></view>
</view>
<view class="p3">
<text>货款直付销售商</text>
<text>双方平台保证金</text>
</view>
<view class="p4">
<el-button plain round size="mini">交易流程</el-button>
</view>
</view>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="transaction-card">
<view class="item">
<view class="p1">
<i class="el-icon-key"></i>
金久信公正
</view>
<view class="p2">
<view class="line"></view>
</view>
<view class="p3">
<text>货款直付平台</text>
<text>交易成功后支付至销售商</text>
</view>
<view class="p4">
<el-button plain round size="mini">交易流程</el-button>
</view>
</view>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="transaction-card">
<view class="item">
<view class="p1">
<i class="el-icon-postcard"></i>
信誉采购
</view>
<view class="p2">
<view class="line"></view>
</view>
<view class="p3">
<text>平台接受信誉采购的销售商</text>
<text>进行交易、到期后结算</text>
</view>
<view class="p4">
<el-button plain round size="mini">交易流程</el-button>
</view>
</view>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="transaction-card">
<view class="item">
<view class="p1">
<i class="el-icon-medal"></i>
金久信自营
</view>
<view class="p2">
<view class="line"></view>
</view>
<view class="p3">
<text>货款直付平台</text>
<text>交易成功后支付至销售商</text>
</view>
<view class="p4">
<el-button plain round size="mini">交易流程</el-button>
</view>
</view>
</el-card>
</el-col>
</el-row>
</view>
<!-- 交易模式 end -->
<!-- 新闻资讯 start -->
<view class="w1200">
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="18">
<el-card shadow="hover" class="news-card">
<div slot="header" class="clearfix">
<span class="card-title">金久信·金融服务</span>
<el-button style="float: right; color: #BD3124;" size="mini">马上开通</el-button>
</div>
<div class="jrfw-img">
<image src="https://oss.wsdns.cn/20231207/a3ea8ffd7242453eb2242ffaaa89116d.png"
mode="widthFix"></image>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="news-card">
<div slot="header" class="clearfix">
<span class="card-title">最新入驻</span>
</div>
<ul class="news-list" style="line-height: 2em;">
<li>广西聚钱财实业有限公司</li>
<li>广西聚钱财实业有限公司2</li>
<li>广西聚钱财实业有限公司3</li>
<li>广西聚钱财实业有限公司4</li>
<li>广西聚钱财实业有限公司5</li>
<li>广西聚钱财实业有限公司5</li>
<li>广西聚钱财实业有限公司5</li>
</ul>
</el-card>
</el-col>
</el-row>
</view>
<!-- 新闻资讯 end -->
<!-- 买家入门 卖家入门 start -->
<view class="w1200">
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="12">
<el-card shadow="hover" class="news-card">
<div slot="header" class="clearfix">
<span class="card-title">买家入门</span>
<el-button style="float: right; padding: 3px 0; color: #999999;" type="text">更多></el-button>
</div>
<div class="content">
<div class="news-img">
<image src="http://jyx.gxwebsoft.com/public/index/images/xw1.jpg" mode="widthFix">
</image>
</div>
<div class="tabs">
<el-tabs type="card" v-model="buyerTabs" @tab-click="handleClick1">
<el-tab-pane label="常见问题" name="first">
<ul class="news-list">
<li>常见问题常见问题常见见问题常问题常见问题常见问题常见问题1</li>
<li>常见问题2</li>
<li>常见问题3</li>
<li>常见问题4</li>
<li>常见问题5</li>
</ul>
</el-tab-pane>
<el-tab-pane label="如何采购" name="second">
<ul class="news-list">
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
</ul>
</el-tab-pane>
</el-tabs>
</div>
</div>
</el-card>
</el-col>
<el-col :span="12" class="wrap" justify="space-between">
<el-card shadow="hover" class="news-card">
<div slot="header" class="clearfix">
<span class="card-title">卖家入门</span>
<el-button style="float: right; padding: 3px 0; color: #999999;" type="text">更多></el-button>
</div>
<div class="content">
<div class="news-img">
<image src="http://jyx.gxwebsoft.com/public/index/images/xw2.jpg" mode="widthFix">
</image>
</div>
<div class="tabs">
<el-tabs type="card" v-model="sellerTabs" @tab-click="handleClick2">
<el-tab-pane label="常见问题" name="first">
<ul class="news-list">
<li>常见问题常见问题常见见问题常问题常见问题常见问题常见问题1</li>
<li>常见问题2</li>
<li>常见问题3</li>
<li>常见问题4</li>
<li>常见问题5</li>
</ul>
</el-tab-pane>
<el-tab-pane label="店铺管理" name="second">
<ul class="news-list">
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
</ul>
</el-tab-pane>
</el-tabs>
</div>
</div>
</el-card>
</el-col>
</el-row>
</view>
<!-- 买家入门 卖家入门 end -->
<!-- 资讯中心 start -->
<view class="w1200">
<view class="" style="height: 20px;"></view>
<el-divider>
<view class="divider-text">资讯中心</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="6">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>市场信息</span>
</div>
<ul class="news-list">
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
</ul>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>期货信息</span>
</div>
<ul class="news-list">
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
</ul>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>行情分析</span>
</div>
<ul class="news-list">
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
</ul>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>行业动态</span>
</div>
<ul class="news-list">
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
</ul>
</el-card>
</el-col>
</el-row>
</view>
<!-- 资讯中心 end -->
<view class="ad-bottom">
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="12">
<view class="item">
<image src="http://jyx.gxwebsoft.com/uploads/20210506/8a6b689d22ffcb382dad758e15e933f9.jpg"
mode="widthFix" />
</view>
</el-col>
<el-col :span="12">
<view class="item">
<image src="http://jyx.gxwebsoft.com/uploads/20210506/13a1ee4c52fda80a7e03080198944671.jpg"
mode="widthFix" />
</view>
</el-col>
<el-col :span="12">
<view class="item">
<image src="http://jyx.gxwebsoft.com/uploads/20210521/41e761a2f98cdf5a7e873ead16fb47eb.jpg"
mode="widthFix" />
</view>
</el-col>
<el-col :span="12">
<view class="item">
<image src="http://jyx.gxwebsoft.com/uploads/20210506/8e24bf5d6b29858a8c5b1256b29ffadc.jpg"
mode="widthFix" />
</view>
</el-col>
</el-row>
</view>
<!-- <el-card class="register-count">
金久信已帮助6,157,952位企业解决产品供需难题
在线提交您的需求，即享专业服务
</el-card> -->
<gap height="50" />
<common-footer></common-footer> <common-footer></common-footer>
<right-bar></right-bar> <right-bar></right-bar>
</view> </view>
@@ -133,9 +542,13 @@
<script> <script>
import Gap from "../../components/gap/gap.vue";
var vk = uni.vk; var vk = uni.vk;
export default { export default {
components: {
Gap
},
data() { data() {
// 页面数据变量 // 页面数据变量
return { return {
@@ -146,6 +559,8 @@ export default {
// 表单请求数据 // 表单请求数据
form1: {}, form1: {},
scrollTop: 0, scrollTop: 0,
buyerTabs: 'first',
sellerTabs: 'first'
} }
}, },
onPageScroll(e) { onPageScroll(e) {
@@ -219,6 +634,12 @@ export default {
}, },
pageTo(path) { pageTo(path) {
vk.navigateTo(path); vk.navigateTo(path);
},
handleClick1() {
},
handleClick2() {
} }
}, },
// 监听器 // 监听器
@@ -228,9 +649,62 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.banner-outer { .w1200 {
width: 1200px;
margin: 20px auto;
} }
.register {
background-color: #3d5fda;
width: 1200px;
height: 88px;
margin: 20px auto;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
.text {
display: flex;
align-items: center;
font-size: 30px;
color: #ffffff;
padding-left: 50px;
.divider {
margin: 0 30px;
transform: translateX(-10%);
}
.ad-text2 {
display: flex;
flex-direction: column;
font-size: 18px;
// transform: rotate(0.1turn);
.yellow {
color: #fcb800;
font-size: 25px;
}
.white {
color: #ffffff;
}
}
}
}
.right {
padding-right: 50px;
display: flex;
}
}
.banner-outer {}
.carousel-img { .carousel-img {
width: 760px; width: 760px;
height: 365px; height: 365px;
@@ -264,6 +738,30 @@ export default {
.enquiry-outer { .enquiry-outer {
width: 1200px; width: 1200px;
margin: 0px auto; margin: 0px auto;
.inli-mask {
padding: 20px;
min-height: 120px;
}
}
.show-more {
clear: both;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
background-color: #BD3124;
text-align: center;
width: 150px;
margin: 0 auto;
height: 40px;
cursor: pointer;
.el-icon-view {
font-size: 18px;
padding-right: 5px;
}
} }
.enquiry-outer .mod-inner2Listcenter { .enquiry-outer .mod-inner2Listcenter {
@@ -351,4 +849,163 @@ export default {
} }
} }
.detail-num .company {
font-size: 15px !important;
line-height: 2em;
}
.ad-bottom {
width: 1200px;
margin: 40px auto;
.item {
margin: 3px 0;
image {
width: 100%;
height: 100%;
}
}
.wrap {
flex-wrap: wrap;
}
}
.register-count {
width: 1200px;
margin: auto;
}
.card-title {
color: #BD3124;
}
.clearfix {
font-size: 16px;
font-weight: 500;
}
.news-card {
.news-img {
image {
width: 200px;
}
}
.content {
display: flex;
.tabs {
padding: 0 20px;
}
.news-list {
ul {}
li {
width: 330px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
.jrfw-img {
image {
width: 100%;
}
}
.transaction-card {
.item {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 150px;
.p1 {
font-size: 20px;
font-weight: 500;
i {
font-size: 20px;
padding: 0 4px;
}
}
.p2 {
.line {
width: 40px;
height: 3px;
border-radius: 100px;
background-color: #BD3124;
}
}
.p3 {
display: flex;
flex-direction: column;
text-align: center;
font-size: 15px;
color: #666;
}
}
}
.server-card2 {
display: flex;
justify-content: space-between;
.item {
width: 240px;
height: 270px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
i {
font-size: 30px;
color: #ffffff;
}
.p4 {
margin-top: 20px;
}
}
.b1 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god1hover.jpg');
background-position: center;
background-size: 150%;
}
.b2 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god2hover.jpg');
background-position: center;
background-size: 150%;
}
.b3 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god3hover.jpg');
background-position: center;
background-size: 150%;
}
.b4 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god4hover.jpg');
background-position: center;
background-size: 150%;
}
.b5 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god5hover.jpg');
background-position: center;
background-size: 150%;
}
}
</style> </style>