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-08 01:56:10 +08:00
parent 50d0bdd624
commit 6c1591f26d
1 changed files with 269 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/index.vue
+269 -82
View File
@@ -188,31 +188,41 @@
<view class="" style="height: 20px;"></view> <view class="" style="height: 20px;"></view>
<view class="server-card2"> <view class="server-card2">
<view class="item b1"> <view class="item b1">
<i class="el-icon-lock"></i> <image src="http://jyx.gxwebsoft.com/public/index/images/icon9.png" mode="widthFix" style="width: 40px;"></image>
<!-- <i class="el-icon-lock"></i> -->
<view class="text">交易安全</view>
<view class="p4"> <view class="p4">
<el-button plain round size="mini">交易安全</el-button> <el-button plain round size="mini">交易安全</el-button>
</view> </view>
</view> </view>
<view class="item b2"> <view class="item b2">
<i class="el-icon-lock"></i> <image src="http://jyx.gxwebsoft.com/public/index/images/icon10.png" mode="widthFix" style="width: 40px;"></image>
<!-- <i class="el-icon-lock"></i> -->
<view class="text">代检代查</view>
<view class="p4"> <view class="p4">
<el-button plain round size="mini">代检代查</el-button> <el-button plain round size="mini">代检代查</el-button>
</view> </view>
</view> </view>
<view class="item b3"> <view class="item b3">
<i class="el-icon-lock"></i> <image src="http://jyx.gxwebsoft.com/public/index/images/icon11.png" mode="widthFix" style="width: 40px;"></image>
<!-- <i class="el-icon-lock"></i> -->
<view class="text">优势资源匹配</view>
<view class="p4"> <view class="p4">
<el-button plain round size="mini">优势资源匹配</el-button> <el-button plain round size="mini">优势资源匹配</el-button>
</view> </view>
</view> </view>
<view class="item b4"> <view class="item b4">
<i class="el-icon-lock"></i> <image src="http://jyx.gxwebsoft.com/public/index/images/icon12.png" mode="widthFix" style="width: 40px;"></image>
<!-- <i class="el-icon-lock"></i> -->
<view class="text">交易模式多元化</view>
<view class="p4"> <view class="p4">
<el-button plain round size="mini">交易模式多元化</el-button> <el-button plain round size="mini">交易模式多元化</el-button>
</view> </view>
</view> </view>
<view class="item b5"> <view class="item b5">
<i class="el-icon-lock"></i> <image src="http://jyx.gxwebsoft.com/public/index/images/icon13.png" mode="widthFix" style="width: 40px;"></image>
<!-- <i class="el-icon-lock"></i> -->
<view class="text">电子合同</view>
<view class="p4"> <view class="p4">
<el-button plain round size="mini">电子合同</el-button> <el-button plain round size="mini">电子合同</el-button>
</view> </view>
@@ -326,8 +336,43 @@
<el-button style="float: right; color: #BD3124;" size="mini">马上开通</el-button> <el-button style="float: right; color: #BD3124;" size="mini">马上开通</el-button>
</div> </div>
<div class="jrfw-img"> <div class="jrfw-img">
<image src="https://oss.wsdns.cn/20231207/a3ea8ffd7242453eb2242ffaaa89116d.png" <el-row :gutter="20" justify="space-between" class="jrfw-row">
mode="widthFix"></image> <el-col :span="12">
<el-card shadow="hover">
<div class="jrfw-img-item">
<div class="info">
<div class="title">·买家采购更放心</div>
<div class="desc">先收货后付款，账期最长<text>60</text>天</div>
<gap height="20"></gap>
<div class="title">·卖家销售无压力</div>
<div class="desc">账期交易未到期，资金提前放。</div>
</div>
<div class="pic">
<image src="http://jyx.gxwebsoft.com/public/index/images/gg1.png"
mode="aspectFit"></image>
</div>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<div class="jrfw-img-item">
<div class="info">
<div class="title">利率低至年化4.35%</div>
<div class="desc">赊销卖钢材，回款不担心</div>
</div>
<div class="pic">
<image src="http://jyx.gxwebsoft.com/public/index/images/gg2.png"
mode="aspectFit"></image>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- <image src="https://oss.wsdns.cn/20231207/a3ea8ffd7242453eb2242ffaaa89116d.png"
mode="widthFix"></image> -->
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@@ -336,15 +381,16 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span class="card-title">最新入驻</span> <span class="card-title">最新入驻</span>
</div> </div>
<ul class="news-list" style="line-height: 2em;"> <div class="news-list">
<li>广西聚钱财实业有限公司</li> <el-link :underline="false">广西聚钱财实业有限公司</el-link>
<li>广西聚钱财实业有限公司2</li> <el-link :underline="false">广西聚钱财实业有限公司</el-link>
<li>广西聚钱财实业有限公司3</li> <el-link :underline="false">广西聚钱财实业有限公司</el-link>
<li>广西聚钱财实业有限公司4</li> <el-link :underline="false">广西聚钱财实业有限公司</el-link>
<li>广西聚钱财实业有限公司5</li> <el-link :underline="false">广西聚钱财实业有限公司</el-link>
<li>广西聚钱财实业有限公司5</li> <el-link :underline="false">广西聚钱财实业有限公司</el-link>
<li>广西聚钱财实业有限公司5</li> <el-link :underline="false">广西聚钱财实业有限公司</el-link>
</ul> <el-link :underline="false">广西聚钱财实业有限公司</el-link>
</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@@ -368,22 +414,22 @@
<div class="tabs"> <div class="tabs">
<el-tabs type="card" v-model="buyerTabs" @tab-click="handleClick1"> <el-tabs type="card" v-model="buyerTabs" @tab-click="handleClick1">
<el-tab-pane label="常见问题" name="first"> <el-tab-pane label="常见问题" name="first">
<ul class="news-list"> <div class="news-list">
<li>常见问题常见问题常见见问题常问题常见问题常见问题常见问题1</li> <el-link class="ellipsis">常见问题1</el-link>
<li>常见问题2</li> <el-link>常见问题2</el-link>
<li>常见问题3</li> <el-link>常见问题3</el-link>
<li>常见问题4</li> <el-link>常见问题4</el-link>
<li>常见问题5</li> <el-link>常见问题5</el-link>
</ul> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="如何采购" name="second"> <el-tab-pane label="如何采购" name="second">
<ul class="news-list"> <div class="news-list">
<li>如何采购</li> <el-link>如何采购1</el-link>
<li>如何采购</li> <el-link>如何采购2</el-link>
<li>如何采购</li> <el-link>如何采购3</el-link>
<li>如何采购</li> <el-link>如何采购4</el-link>
<li>如何采购</li> <el-link>如何采购5</el-link>
</ul> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@@ -404,22 +450,22 @@
<div class="tabs"> <div class="tabs">
<el-tabs type="card" v-model="sellerTabs" @tab-click="handleClick2"> <el-tabs type="card" v-model="sellerTabs" @tab-click="handleClick2">
<el-tab-pane label="常见问题" name="first"> <el-tab-pane label="常见问题" name="first">
<ul class="news-list"> <div class="news-list">
<li>常见问题常见问题常见见问题常问题常见问题常见问题常见问题1</li> <el-link :underline="false" class="ellipsis">常见问题11</el-link>
<li>常见问题2</li> <el-link :underline="false">常见问题2</el-link>
<li>常见问题3</li> <el-link :underline="false">常见问题3</el-link>
<li>常见问题4</li> <el-link :underline="false">常见问题4</el-link>
<li>常见问题5</li> <el-link :underline="false">常见问题5</el-link>
</ul> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="店铺管理" name="second"> <el-tab-pane label="店铺管理" name="second">
<ul class="news-list"> <div class="news-list">
<li>如何采购</li> <el-link :underline="false">如何采购1</el-link>
<li>如何采购</li> <el-link :underline="false">如何采购2</el-link>
<li>如何采购</li> <el-link :underline="false">如何采购3</el-link>
<li>如何采购</li> <el-link :underline="false">如何采购4</el-link>
<li>如何采购</li> <el-link :underline="false">如何采购5</el-link>
</ul> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@@ -443,13 +489,13 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>市场信息</span> <span>市场信息</span>
</div> </div>
<ul class="news-list"> <div class="news-list">
<li>新闻资讯</li> <el-link :underline="false">市场信息市场信息</el-link>
<li>新闻资讯</li> <el-link :underline="false">市场信息</el-link>
<li>新闻资讯</li> <el-link :underline="false">市场信息</el-link>
<li>新闻资讯</li> <el-link :underline="false">市场信息</el-link>
<li>新闻资讯</li> <el-link :underline="false">市场信息</el-link>
</ul> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@@ -457,13 +503,13 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>期货信息</span> <span>期货信息</span>
</div> </div>
<ul class="news-list"> <div class="news-list">
<li>新闻资讯</li> <el-link :underline="false">期货信息</el-link>
<li>新闻资讯</li> <el-link :underline="false">期货信息</el-link>
<li>新闻资讯</li> <el-link :underline="false">期货信息</el-link>
<li>新闻资讯</li> <el-link :underline="false">期货信息</el-link>
<li>新闻资讯</li> <el-link :underline="false">期货信息</el-link>
</ul> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@@ -471,13 +517,13 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>行情分析</span> <span>行情分析</span>
</div> </div>
<ul class="news-list"> <div class="news-list">
<li>新闻资讯</li> <el-link :underline="false">行情分析</el-link>
<li>新闻资讯</li> <el-link :underline="false">行情分析</el-link>
<li>新闻资讯</li> <el-link :underline="false">行情分析</el-link>
<li>新闻资讯</li> <el-link :underline="false">行情分析</el-link>
<li>新闻资讯</li> <el-link :underline="false">行情分析</el-link>
</ul> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@@ -485,13 +531,13 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>行业动态</span> <span>行业动态</span>
</div> </div>
<ul class="news-list"> <div class="news-list">
<li>新闻资讯</li> <el-link :underline="false">行业动态</el-link>
<li>新闻资讯</li> <el-link :underline="false">行业动态</el-link>
<li>新闻资讯</li> <el-link :underline="false">行业动态</el-link>
<li>新闻资讯</li> <el-link :underline="false">行业动态</el-link>
<li>新闻资讯</li> <el-link :underline="false">行业动态</el-link>
</ul> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@@ -887,6 +933,14 @@
font-weight: 500; font-weight: 500;
} }
.news-list {
width: 330px;
display: flex;
flex-direction: column;
align-items: self-start;
line-height: 1.8em;
}
.news-card { .news-card {
.news-img { .news-img {
image { image {
@@ -902,24 +956,69 @@
} }
.news-list { .news-list {
ul {} width: 330px;
display: flex;
li { flex-direction: column;
width: 330px; align-items: self-start;
overflow: hidden; line-height: 1.8em;
white-space: nowrap; // .ellipsis {
text-overflow: ellipsis; // width: 320px;
} // display: flex;
// flex-direction: column;
// align-items: self-start;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
// }
} }
} }
} }
.jrfw-img { .jrfw-img {
display: flex;
justify-content: space-between;
flex: 1;
.jrfw-row {
width: 100%;
}
height: 184px;
image { image {
width: 100%; width: 100%;
} }
} }
.jrfw-img-item {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
.info {
.title{
font-weight: 400;
font-size: 17px;
}
.desc{
color: #666666;
text{
font-size: 20px;
color: #BD3124;
}
}
}
.pic {
width: 156px;
image {
width: 156px;
height: 136px;
}
}
}
.transaction-card { .transaction-card {
.item { .item {
display: flex; display: flex;
@@ -957,6 +1056,27 @@
} }
} }
.transaction-card:hover {
background-color: #BD3124;
.p1 {
color: #ffffff;
}
.p2 {
.line {
width: 40px;
height: 3px;
border-radius: 100px;
background-color: #ffffff;
}
}
.p3 {
color: #ffffff;
}
}
.server-card2 { .server-card2 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -968,14 +1088,21 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
i { i {
font-size: 30px;
color: #ffffff; color: #ffffff;
font-size: 24px;
} }
.p4 { .p4 {
margin-top: 20px; margin-top: 20px;
} }
.text{
display: none;
}
} }
.b1 { .b1 {
@@ -984,28 +1111,88 @@
background-size: 150%; background-size: 150%;
} }
.b1:hover {
width: 380px;
/* 添加过渡属性效果 */
transition: width .1s linear;
.text{
display: block;
color: #ffffff;
font-size: 24px;
padding-top: 10px;
}
}
.b2 { .b2 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god2hover.jpg'); background: url('http://jyx.gxwebsoft.com/public/index/images/god2hover.jpg');
background-position: center; background-position: center;
background-size: 150%; background-size: 150%;
} }
.b2:hover {
width: 380px;
/* 添加过渡属性效果 */
transition: width .1s linear;
.text{
display: block;
color: #ffffff;
font-size: 24px;
padding-top: 10px;
}
}
.b3 { .b3 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god3hover.jpg'); background: url('http://jyx.gxwebsoft.com/public/index/images/god3hover.jpg');
background-position: center; background-position: center;
background-size: 150%; background-size: 150%;
} }
.b3:hover {
width: 380px;
/* 添加过渡属性效果 */
transition: width .1s linear;
.text{
display: block;
color: #ffffff;
font-size: 24px;
padding-top: 10px;
}
}
.b4 { .b4 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god4hover.jpg'); background: url('http://jyx.gxwebsoft.com/public/index/images/god4hover.jpg');
background-position: center; background-position: center;
background-size: 150%; background-size: 150%;
} }
.b4:hover {
width: 380px;
/* 添加过渡属性效果 */
transition: width .1s linear;
.text{
display: block;
color: #ffffff;
font-size: 24px;
padding-top: 10px;
}
}
.b5 { .b5 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god5hover.jpg'); background: url('http://jyx.gxwebsoft.com/public/index/images/god5hover.jpg');
background-position: center; background-position: center;
background-size: 150%; background-size: 150%;
} }
.b5:hover {
width: 380px;
/* 添加过渡属性效果 */
transition: width .1s linear;
.text{
display: block;
color: #ffffff;
font-size: 24px;
padding-top: 10px;
}
}
} }
</style> </style>