|
|
|
@ -3,7 +3,56 @@ |
|
|
|
<view class="head-box"></view> |
|
|
|
<uv-navbar title=" " bgColor="transparent" height="100rpx"></uv-navbar> |
|
|
|
<view class="content"> |
|
|
|
123 |
|
|
|
<view class="search-box"> |
|
|
|
<view class="search-box-l"> |
|
|
|
<image class="address-img" src="@/static/image/home/address-icon.png" mode="widthFix"></image> |
|
|
|
<view>成都</view> |
|
|
|
<image class="sjx-img" src="@/static/image/home/sjx-icon.png" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
<view class="search-box-r"> |
|
|
|
<uv-search placeholder="请输入搜索内容" v-model="keyword" shape="square" :showAction="false" color="#fff" placeholderColor="#BDABAC" :clearabled="false" searchIconColor="#fff" searchIconSize="50rpx" bgColor="#FFB9B9" height="63rpx"></uv-search> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="swipe-box"> |
|
|
|
<uv-swiper :list="list" height="336rpx" radius="30rpx" bgColor="transparent" indicator indicatorMode="dot"></uv-swiper> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="ydsk-box"> |
|
|
|
<view class="ydsk-box-title">悦动时刻</view> |
|
|
|
<view class="ydsk-box-gird"> |
|
|
|
<view class="gird-l"> |
|
|
|
<view class="left-box"> |
|
|
|
<view class="title-box"> |
|
|
|
<view>活动签到</view> |
|
|
|
<view>签到有好礼</view> |
|
|
|
</view> |
|
|
|
<view class="btn-box">立即查看</view> |
|
|
|
</view> |
|
|
|
<image class="hdqd-img" src="@/static/image/home/hdqd-img.png" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
<view class="gird-r"> |
|
|
|
<view class="hd-box"> |
|
|
|
<view class="left-box"> |
|
|
|
<view class="title-box"> |
|
|
|
活动 |
|
|
|
</view> |
|
|
|
<view class="btn-box">立即查看</view> |
|
|
|
</view> |
|
|
|
<image class="hdqd-img" src="@/static/image/home/hd-img.png" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
<view class="hd-box lx-box"> |
|
|
|
<view class="left-box"> |
|
|
|
<view class="title-box"> |
|
|
|
旅行 |
|
|
|
</view> |
|
|
|
<view class="btn-box">立即查看</view> |
|
|
|
</view> |
|
|
|
<image class="hdqd-img" src="@/static/image/home/lx-img.png" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
@ -20,7 +69,12 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
keyword:'', |
|
|
|
list: [ |
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -42,7 +96,180 @@ |
|
|
|
} |
|
|
|
.content { |
|
|
|
color: #fff; |
|
|
|
padding: 0 30rpx; |
|
|
|
padding-top: calc(var(--status-bar-height) + 100rpx); |
|
|
|
|
|
|
|
.search-box { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 32rpx; |
|
|
|
&-l { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-right: 30rpx; |
|
|
|
view { |
|
|
|
font-weight: 400; |
|
|
|
font-size: 27rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
margin: 0 18rpx 0 15rpx; |
|
|
|
} |
|
|
|
.address-img { |
|
|
|
width: 26rpx; |
|
|
|
} |
|
|
|
.sjx-img { |
|
|
|
width: 13rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
&-r { |
|
|
|
flex:1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.swipe-box { |
|
|
|
margin-bottom: 41rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.ydsk-box { |
|
|
|
&-title { |
|
|
|
width: 250rpx; |
|
|
|
background: url('@/static/image/home/title-bg.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
text-align: center; |
|
|
|
height: 31rpx; |
|
|
|
line-height: 31rpx; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 35rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
margin: 0 auto 33rpx; |
|
|
|
} |
|
|
|
&-gird { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
.gird-l { |
|
|
|
box-sizing: border-box; |
|
|
|
width: 378rpx; |
|
|
|
height: 278rpx; |
|
|
|
padding: 36rpx 0 24rpx 26rpx; |
|
|
|
background: url('@/static/image/home/hdqd-bg.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: relative; |
|
|
|
.hdqd-img { |
|
|
|
position: absolute; |
|
|
|
right: 34rpx; |
|
|
|
top: 48rpx; |
|
|
|
width: 200rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.left-box { |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
.title-box { |
|
|
|
view { |
|
|
|
font-weight: bold; |
|
|
|
font-size: 29rpx; |
|
|
|
color: #060504; |
|
|
|
&:nth-child(2) { |
|
|
|
font-weight: 400; |
|
|
|
font-size: 21rpx; |
|
|
|
color: #4C4C4C; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.btn-box { |
|
|
|
width: 108rpx; |
|
|
|
height: 41rpx; |
|
|
|
background: url('@/static/image/home/hdqd-btn.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 17rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
text-align: center; |
|
|
|
line-height: 41rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.gird-r { |
|
|
|
.hd-box { |
|
|
|
width: 288rpx; |
|
|
|
height: 130rpx; |
|
|
|
padding: 25rpx 0 24rpx 26rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: url('@/static/image/home/hd-bg.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: relative; |
|
|
|
.left-box { |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
.title-box { |
|
|
|
font-weight: bold; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #57270F; |
|
|
|
} |
|
|
|
.btn-box { |
|
|
|
width: 98rpx; |
|
|
|
height: 35rpx; |
|
|
|
background: url('@/static/image/home/hd-btn.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 16rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
text-align: center; |
|
|
|
line-height: 35rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.hdqd-img { |
|
|
|
position: absolute; |
|
|
|
right: 22rpx; |
|
|
|
top: 25rpx; |
|
|
|
width: 123rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.lx-box { |
|
|
|
width: 288rpx; |
|
|
|
height: 130rpx; |
|
|
|
padding: 25rpx 0 24rpx 26rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: url('@/static/image/home/lx-bg.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: relative; |
|
|
|
margin-top: 18rpx; |
|
|
|
.left-box { |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
.title-box { |
|
|
|
font-weight: bold; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #57270F; |
|
|
|
} |
|
|
|
.btn-box { |
|
|
|
width: 98rpx; |
|
|
|
height: 35rpx; |
|
|
|
background: url('@/static/image/home/lx-btn.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 16rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
text-align: center; |
|
|
|
line-height: 35rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.hdqd-img { |
|
|
|
position: absolute; |
|
|
|
right: 22rpx; |
|
|
|
top: 25rpx; |
|
|
|
width: 123rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
