布局调整、兼容微信小程序、app
This commit is contained in:
aihe
parent
4dd0ee2197
commit
c43bbf2bb7
@ -6,35 +6,49 @@
|
|||||||
</view>
|
</view>
|
||||||
<image class="hdbg" :src="getCdnUrl(`sdg/hdbg.png`)"/>
|
<image class="hdbg" :src="getCdnUrl(`sdg/hdbg.png`)"/>
|
||||||
<view class="pg-container">
|
<view class="pg-container">
|
||||||
<view class="header">
|
<view class="header" >
|
||||||
<view class="title1">探路物流 速运全球 </view>
|
<u-text size="40" :bold="true" text="探路物流 速运全球" color="#fff"></u-text>
|
||||||
<view class="desc">省钱，省时，省力</view>
|
<u-text margin="22rpx 0 0 0" size="24" :bold="true" text="省钱，省时，省力" color="#fff"></u-text>
|
||||||
<button type="primary" class="btn-ljyy">立即预约</button>
|
<button class="btn-ljyy" type="primary">立即预约</button>
|
||||||
<view class="btnlist1">
|
<view class="btnlist1">
|
||||||
<view v-for="mbItem in mainBtnlist" class="mbitem">
|
<u-row>
|
||||||
<image mode="aspectFit" class="tb1" :src="mbItem.icon"/>
|
<u-col v-for="mbItem in mainBtnlist" span="6" align="center" custom-style="">
|
||||||
<view class="neirong">
|
<view class="mb-item">
|
||||||
<view class="nr1">{{mbItem.title}}</view>
|
<u-row align="center">
|
||||||
<view class="nr2">{{mbItem.subTitle}}</view>
|
<image class="tb1" style="width: 92rpx;height: 73rpx;" :src="mbItem.icon"/>
|
||||||
</view>
|
<view class="neirong">
|
||||||
</view>
|
<u-text size="32" :bold="true" color="#fff" :text="mbItem.title"></u-text>
|
||||||
|
<u-text size="22" margin="15rpx 0 0 0" color="#999" :text="mbItem.subTitle"></u-text>
|
||||||
|
</view>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
</u-col>
|
||||||
|
</u-row>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="pbody">
|
<view class="pbody">
|
||||||
<view class="btnlist2">
|
<view class="btnlist2">
|
||||||
<view v-for="tlItem in toolBtnlist" class="tlitem">
|
<u-row gutter="20" custom-style="flex-wrap: wrap;">
|
||||||
<view class="neirong">
|
<u-col v-for="tlItem in toolBtnlist" span="6">
|
||||||
<view class="nr1">{{tlItem.title}}</view>
|
<view style="margin: 0 0 20rpx 0;background: #F6F6F6;padding: 30rpx 28rpx;border-radius: 20rpx;position: relative;">
|
||||||
<view class="nr2">{{tlItem.subTitle}}</view>
|
<u-row justify="between" >
|
||||||
</view>
|
<view class="neirong">
|
||||||
<image class="tb1" :src="tlItem.icon" mode="heightFix"/>
|
<u-text size="28" :bold="true" color="#0E0708" :text="tlItem.title"></u-text>
|
||||||
</view>
|
<u-text size="22" margin="15rpx 0 0 0" color="#999" :text="tlItem.subTitle"></u-text>
|
||||||
|
</view>
|
||||||
|
<image :src="tlItem.icon" style="height: 50rpx; width: 50rpx;" mode="aspectFit"/>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
</u-col>
|
||||||
|
</u-row>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="pfoot">
|
<view class="pfoot" >
|
||||||
<view class="flw-dec">关注探路者官方公众号，实时接收物流信息</view>
|
<u-row justify="between">
|
||||||
<view class="btn-login">去登录</view>
|
<u-text size="24" color="#fff" text="关注探路者官方公众号，实时接收物流信息"></u-text>
|
||||||
|
<u-button type="primary" custom-style="width: 130rpx;border-radius: 30rpx;margin: 0;" size="mini">去登录</u-button>
|
||||||
|
</u-row>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -84,7 +98,6 @@
|
|||||||
@import '../../../common/uni-nvue.scss';
|
@import '../../../common/uni-nvue.scss';
|
||||||
</style>
|
</style>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
.hdbg{
|
.hdbg{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -99,17 +112,6 @@
|
|||||||
}
|
}
|
||||||
.header{
|
.header{
|
||||||
padding: 0 28rpx;
|
padding: 0 28rpx;
|
||||||
.title1{
|
|
||||||
font-size: 40rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #FFF;
|
|
||||||
text-shadow: 3rpx 4rpx 0rpx rgba(92,15,12,0.2);
|
|
||||||
}
|
|
||||||
.desc{
|
|
||||||
margin-top: 22rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #FFF;
|
|
||||||
}
|
|
||||||
.btn-ljyy{
|
.btn-ljyy{
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
width: 144rpx;
|
width: 144rpx;
|
||||||
@ -126,98 +128,27 @@
|
|||||||
|
|
||||||
.btnlist1 {
|
.btnlist1 {
|
||||||
margin-top: 38rpx;
|
margin-top: 38rpx;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-direction: row;
|
|
||||||
background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
|
background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
|
||||||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||||||
padding: 36rpx 24rpx 22rpx 24rpx;
|
padding: 36rpx 24rpx 22rpx 24rpx;
|
||||||
.mbitem{
|
|
||||||
display: flex;
|
}
|
||||||
flex-direction: row;
|
}
|
||||||
align-items: center;
|
.mb-item{
|
||||||
position: relative;
|
position: relative;
|
||||||
.tb1 {
|
border-right: 2rpx solid rgba(255,255,255,0.5);
|
||||||
width: 92rpx;
|
&:last-child{
|
||||||
height: 73rpx;
|
border-right: 0;
|
||||||
}
|
|
||||||
.neirong{
|
|
||||||
margin-left: 22rpx;
|
|
||||||
.nr1{
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.nr2{
|
|
||||||
margin-top: 15rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
content: ' ';
|
|
||||||
right: -40rpx;
|
|
||||||
display: block;
|
|
||||||
background: #FFF;
|
|
||||||
opacity: 0.5;
|
|
||||||
width: 1rpx;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
&::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbody{
|
.pbody{
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
padding: 40rpx 28rpx 100rpx 28rpx;
|
padding: 40rpx 28rpx 100rpx 28rpx;
|
||||||
.btnlist2{
|
.btnlist2{
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
.neirong{
|
||||||
justify-content: space-between;
|
margin-left: 22rpx;
|
||||||
flex-wrap: wrap;
|
|
||||||
.tlitem {
|
|
||||||
box-sizing: content-box;
|
|
||||||
margin: 0 0 20rpx 0;
|
|
||||||
width: 40%;
|
|
||||||
background: #F6F6F6;
|
|
||||||
padding: 30rpx 28rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
position: relative;
|
|
||||||
&:nth-child(2n) {
|
|
||||||
/* 去除第2n个的margin-right */
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.tb1 {
|
|
||||||
width: auto;
|
|
||||||
height: 50rpx;
|
|
||||||
}
|
|
||||||
.neirong{
|
|
||||||
margin-left: 22rpx;
|
|
||||||
.nr1{
|
|
||||||
font-weight: 600;
|
|
||||||
color: #0E0708;
|
|
||||||
font-size: 28rpx
|
|
||||||
}
|
|
||||||
.nr2{
|
|
||||||
margin-top: 15rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -226,28 +157,8 @@
|
|||||||
bottom: 20rpx;
|
bottom: 20rpx;
|
||||||
left: 28rpx;
|
left: 28rpx;
|
||||||
right: 28rpx;
|
right: 28rpx;
|
||||||
padding: 0 8rpx 0 26rpx;
|
padding: 20rpx 8rpx 20rpx 26rpx;
|
||||||
height: 72rpx;
|
|
||||||
background: #0E0708;
|
background: #0E0708;
|
||||||
border-radius: 36rpx;
|
border-radius: 36rpx;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: row;
|
|
||||||
.flw-dec{
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #FFF;
|
|
||||||
}
|
|
||||||
.btn-login{
|
|
||||||
text-align: center;
|
|
||||||
width: 130rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
line-height: 60rpx;
|
|
||||||
background: #B12D29;
|
|
||||||
border-radius: 30rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user