|
|
@@ -0,0 +1,161 @@
|
|
|
+<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'">兑换记录</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">
|
|
|
+ <view class="box-top">
|
|
|
+ <view class="box-1 sys-size-24">剩余0</view>
|
|
|
+ <image class="type-3" src="@/static/img/circle/1.png" mode="scaleToFill"></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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</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;
|
|
|
+ background: url('@/static/img/wallet/shop-bg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-bottom: 28rpx;
|
|
|
+ .box-top{
|
|
|
+ width: 313rpx;
|
|
|
+ height: 264rpx;
|
|
|
+ margin:2rpx 8rpx 10rpx 10rpx;
|
|
|
+ position: relative;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
