lcoco/pages/wallet/wave-point.vue

<template>
	<view class="wave-point flex-common-css box-sizing-border iPhone-bottom">
		<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'" @click="to(1)">兑换记录</view>
			</template>
		</Nav>
		<image class="bg-img" src="@/static/img/wallet/bd-bg.png" mode="aspectFill"></image>
		<view class="nav-box">
			<view :class="navId === item.id?'text-s':'text-n'" 
			v-for="(item,i) in navList" :key="i" @click="select(item,i)">
				{{item.name}}
			</view>
			<view class="nav-only" :style="{left:navLeft+'rpx',}"></view>
		</view>
		<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">
					<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>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				isScroll:false,
				navId:1,
				navIndex:0,
				navLeft:110, //差值250 起点110
				navList:[{name:'特权',id:1},{name:'道具',id:2},{name:'其他',id:3},],
			}
		},
		methods:{
			scrolltolower(){
				console.log('触底');
			},
			select(item,i){
				if(this.navId!=item.id){
					this.navId =item.id;
					this.navIndex = i;
					this.navLeft = i * 250 + 110;
				}
			},
			to(type,item){
				if(type === 1){
					uni.navigateTo({
						url:'/pages/wallet/bill'
					})
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.wave-point{
		position: relative;
		.bg-img{
			width: 100%;
			height: 690rpx;
		}
		.nav-view{
			position: absolute;
			top: 0;
			left: 0;
			.nav-right-box{
				width: 120rpx;
				height: 34rpx;
				background: rgba(235,235,235,0.14);
				border-radius: 200rpx;
				line-height: 34rpx;
				text-align: center;
			}
			.view-s{
				border: 1rpx solid #F9F9F9;
				color: #fff;
			}
			.view-n{
				border: 1rpx solid #333;
				color: #333;
			}
		}
		.nav-box{
			background-color: #081432;
			width: 100%;
			height: 116rpx;
			display: flex;
			align-items: center;
			position: relative;
			.nav-only{
				width: 36rpx;
				height: 4rpx;
				background-color: #fff;
				position: absolute;
				bottom: 20rpx;
				transition: left 0.5s;
			}
			view{
				flex: 1;
				text-align: center;
				line-height: 116rpx;
			}
			.text-s{
				color: #fff;
				font-weight: 600;
				font-size: 36rpx;
				transition: all 0.5; 
			}
			.text-n{
				color: #525A6E;
				font-size: 32rpx;
				transition: all 0.5; 
			}
		}
		.list-scroll{
			background-color: #081432;
			flex: 1;
			overflow: auto;
			.list-home{
				display: flex;
				justify-content: space-between;
				flex-flow: row wrap;
				box-sizing: border-box;
				padding: 0 32rpx;
				.list-box{
					width: 333rpx;
					height: 444rpx;
					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%;
						}
						.box-1{
							z-index: 100 !important;
							position: absolute;
							bottom: -2rpx;
							right: -2rpx;
							width: 84rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 10rpx 0rpx 0rpx 0rpx;
							border: 2rpx solid #1F3F7B;
							color: #5D6473;
							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;
						}
					}
				}
			}
			
		}
	}
</style>