|
|
@@ -3,7 +3,7 @@
|
|
|
<Nav class='nav-view' :title="isScroll?'波点兑换中心':''" :titleColor="isScroll?'#333':'#fff'"
|
|
|
:bgckgroundBox="isScroll?'#fff':'transparent'" :rightShow='true' :rightType='2'>
|
|
|
<template v-slot:right>
|
|
|
- <view class="nav-right-box sys-size-24" :class="isScroll?'view-n':'view-s'">兑换记录</view>
|
|
|
+ <view class="nav-right-box sys-size-24" :class="isScroll?'view-n':'view-s'" @click="to(1)">兑换记录</view>
|
|
|
</template>
|
|
|
</Nav>
|
|
|
<image class="bg-img" src="@/static/img/wallet/bd-bg.png" mode="aspectFill"></image>
|
|
|
@@ -17,9 +17,38 @@
|
|
|
<scroll-view scroll-y="true" class="list-scroll" @scrolltolower="scrolltolower">
|
|
|
<view class="list-home">
|
|
|
<view class="list-box" v-for="(item,i) in 10" :key="i">
|
|
|
- <view class="box-top">
|
|
|
+ <image v-if="i%2===0" class="box-bg" src="@/static/img/wallet/shop-bg.png" mode="aspectFill"></image>
|
|
|
+ <image v-else class="box-bg" src="@/static/img/wallet/shop-bg-right.png" mode="aspectFill"></image>
|
|
|
+
|
|
|
+ <view class="box-top" v-if="navId === 3">
|
|
|
<view class="box-1 sys-size-24">剩余0</view>
|
|
|
<image class="type-3" src="@/static/img/circle/1.png" mode="scaleToFill"></image>
|
|
|
+ <view class="box-san-left" v-if="i%2===0"></view>
|
|
|
+ <view class="box-san-right" v-else></view>
|
|
|
+ </view>
|
|
|
+ <view class="box-top" v-else>
|
|
|
+ <view class="box-2">
|
|
|
+ <view class="box-2-c">
|
|
|
+ <text class="sys-size-28 sys-color-gray-3 sys-weight-600">3天</text>
|
|
|
+ <image v-if="navId===2" src="@/static/img/wallet/fj.png" mode="aspectFill"></image>
|
|
|
+ <!-- <image src="@/static/img/wallet/vip-shop.png" mode="aspectFill"></image> -->
|
|
|
+ <!-- <image src="@/static/img/wallet/x-shop.png" mode="aspectFill"></image> -->
|
|
|
+ <image v-else src="@/static/img/wallet/svip-shop.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="box-name sys-size-32 sys-color-white sys-weight-500 sys-webkit-box">
|
|
|
+ 速度与激情速度与激情速度与激情
|
|
|
+ </view>
|
|
|
+ <view class="box-name-xian"><view></view></view>
|
|
|
+ <view class="box-b">
|
|
|
+ <view class="box-b-left">
|
|
|
+ <text class="sys-size-36 sys-color-00E7EA sys-weight-600">20K</text>
|
|
|
+ <text class="sys-size-24 sys-color-gray-9">波点</text>
|
|
|
+ </view>
|
|
|
+ <!-- <image src="@/static/img/wallet/dh.png" mode="aspectFill"></image> -->
|
|
|
+ <image src="@/static/img/wallet/yqg.png" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -49,6 +78,13 @@
|
|
|
this.navLeft = i * 250 + 110;
|
|
|
}
|
|
|
},
|
|
|
+ to(type,item){
|
|
|
+ if(type === 1){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/wallet/bill'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
@@ -126,14 +162,62 @@
|
|
|
.list-box{
|
|
|
width: 333rpx;
|
|
|
height: 444rpx;
|
|
|
- background: url('@/static/img/wallet/shop-bg.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
margin-bottom: 28rpx;
|
|
|
+ .box-bg{
|
|
|
+ width: 333rpx;
|
|
|
+ height: 444rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
.box-top{
|
|
|
width: 313rpx;
|
|
|
height: 264rpx;
|
|
|
margin:2rpx 8rpx 10rpx 10rpx;
|
|
|
position: relative;
|
|
|
+ .box-2{
|
|
|
+ width: 313rpx;
|
|
|
+ height: 264rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 118rpx;
|
|
|
+ .box-2-c{
|
|
|
+ width: 128rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 0rpx 16rpx 16rpx 0rpx;
|
|
|
+ margin: 0 78rpx 0 128rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 60rpx;
|
|
|
+ position: relative;
|
|
|
+ image{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: -50rpx;
|
|
|
+ top: -28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-san-left{
|
|
|
+ position: absolute;
|
|
|
+ top: -20rpx;
|
|
|
+ left: -8rpx;
|
|
|
+ border-top: 25rpx solid transparent;
|
|
|
+ border-bottom: 25rpx solid transparent;
|
|
|
+ border-right: 25rpx solid #081432;
|
|
|
+ transform:rotate(45deg);
|
|
|
+ }
|
|
|
+ .box-san-right{
|
|
|
+ position: absolute;
|
|
|
+ top: -20rpx;
|
|
|
+ right: -8rpx;
|
|
|
+ border-top: 25rpx solid transparent;
|
|
|
+ border-bottom: 25rpx solid transparent;
|
|
|
+ border-left: 25rpx solid #081432;
|
|
|
+ transform:rotate(-45deg);
|
|
|
+ }
|
|
|
.type-3{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -153,6 +237,37 @@
|
|
|
background: #182137;
|
|
|
}
|
|
|
}
|
|
|
+ .box-name{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 18rpx 35rpx 0 35rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .box-name-xian{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 35rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ position: relative;
|
|
|
+ view{
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 2rpx dashed #274077;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-b{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 18rpx 35rpx 0 35rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ .box-b-left{
|
|
|
+ text{
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ width: 108rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
