|
|
@@ -1,39 +1,84 @@
|
|
|
<template>
|
|
|
<view class="like-me flex-common-css box-sizing-border iPhone-bottom">
|
|
|
<Nav title='谁喜欢我' titleColor='#333' bgckgroundBox='#fff'></Nav>
|
|
|
- <view class="info-box box-sizing-border" :class="true?'info-box-y':'info-box-n'">
|
|
|
- <view class="card">
|
|
|
- <view class="car-home">
|
|
|
- <view class="car-info">
|
|
|
- <view class="sys-size-40 sys-weight-600 sys-color-white">10000</view>
|
|
|
- <view class="sys-size-24 sys-color-gray-9">最近收到</view>
|
|
|
+
|
|
|
+ <scroll-view scroll-y="true" class="info-box box-sizing-border"
|
|
|
+ @scrolltolower="scrolltolower()" >
|
|
|
+ <view class="" :class="true?'flex-box':''">
|
|
|
+ <view class="card">
|
|
|
+ <view class="car-home">
|
|
|
+ <view class="car-info">
|
|
|
+ <view class="sys-size-40 sys-weight-600 sys-color-white">10000</view>
|
|
|
+ <view class="sys-size-24 sys-color-gray-9">最近收到</view>
|
|
|
+ </view>
|
|
|
+ <view class="car-info-xian"></view>
|
|
|
+ <view class="car-info">
|
|
|
+ <view class="sys-size-40 sys-weight-600 sys-color-white">100</view>
|
|
|
+ <view class="sys-size-24 sys-color-gray-9">收到的喜欢</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="card-b-img" src="@/static/img/wallet/jiasu.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info-title">
|
|
|
+ <view class="title-box">
|
|
|
+ <image src="@/static/img/wallet/xd-black.png" mode="aspectFill"></image>
|
|
|
+ <text class="sys-size-32 sys-color-gray-3 sys-weight-600">心动擦亮</text>
|
|
|
</view>
|
|
|
- <view class="car-info-xian"></view>
|
|
|
- <view class="car-info">
|
|
|
- <view class="sys-size-40 sys-weight-600 sys-color-white">100</view>
|
|
|
- <view class="sys-size-24 sys-color-gray-9">收到的喜欢</view>
|
|
|
+ <view class="title-box" @click="to(1)">
|
|
|
+ <text class="sys-size-24 sys-color-gray-9">全部</text>
|
|
|
+ <uni-icons type="forward" size="12" color="#999"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <image class="card-b-img" src="@/static/img/wallet/jiasu.png" mode="aspectFill"></image>
|
|
|
- </view>
|
|
|
- <view class="info-title">
|
|
|
- <view class="title-box">
|
|
|
- <image src="@/static/img/wallet/xd-black.png" mode="aspectFill"></image>
|
|
|
- <text class="sys-size-32 sys-color-gray-3 sys-weight-600">心动擦亮</text>
|
|
|
+ <scroll-view scroll-x="true" class="x-scroll" @scrolltoupper="scrolltoupper">
|
|
|
+ <view class="x-box" v-for="(item,i) in 10" :key="i">
|
|
|
+ <image src="@/static/img/circle/1.png" mode="aspectFill"></image>
|
|
|
+ <view class="box-text sys-size-24 sys-color-white">24/处女座</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="info-title">
|
|
|
+ <view class="title-box">
|
|
|
+ <image src="@/static/img/wallet/like-black.png" mode="aspectFill"></image>
|
|
|
+ <text class="sys-size-32 sys-color-gray-3 sys-weight-600">新的喜欢</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="title-box">
|
|
|
- <text class="sys-size-24 sys-color-gray-9">全部</text>
|
|
|
- <uni-icons type="forward" size="12" color="#999"></uni-icons>
|
|
|
+ <!-- <view class="y-list">
|
|
|
+ <view class="y-box" v-for="(item,i) in 10" :key="i">
|
|
|
+ <image src="@/static/img/circle/1.png" mode="aspectFill"></image>
|
|
|
+ <view class="list-info box-sizing-border">
|
|
|
+ <view class="">
|
|
|
+ <view class="info-name sys-size-36 sys-color-white sys-weight-600 sys-webkit-box">仰看辉煌仰看辉煌仰看辉煌</view>
|
|
|
+ <view class="sys-size-24 sys-color-white">18/女/处女座</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-right" @click="to(2)">
|
|
|
+ <image src="@/static/img/wallet/s-xin.png" mode="aspectFill"></image>
|
|
|
+ <image src="@/static/img/wallet/n-xin.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="n-list y-list">
|
|
|
+ <view class="y-box" v-for="(item,i) in 4" :key="i">
|
|
|
+ <image class="image-1" src="@/static/img/circle/1.png" mode="aspectFill"></image>
|
|
|
+ <view class="list-info box-sizing-border">
|
|
|
+ <view class="">
|
|
|
+ <view class="info-name-1"></view>
|
|
|
+ <view class="info-name-1"></view>
|
|
|
+ </view>
|
|
|
+ <image class="image-2" src="@/static/img/wallet/n-xin.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-m">
|
|
|
+ <view class="list-m-b box-sizing-border">
|
|
|
+ <view class="b-view sys-size-32 sys-color-gray-3">
|
|
|
+ <uni-icons type="locked-filled" size="14" color="#333"></uni-icons>
|
|
|
+ 立即解锁
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <scroll-view scroll-x="true" class="list-x-scroll" @scrolltoupper="scrolltoupper">
|
|
|
- <view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
-
|
|
|
- </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -45,22 +90,68 @@
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
-
|
|
|
+ scrolltoupper(){
|
|
|
+ // x 轴触底
|
|
|
+ },
|
|
|
+ scrolltolower(){
|
|
|
+ // y 轴触底
|
|
|
+ console.log('触底');
|
|
|
+ },
|
|
|
+ to(type,item){
|
|
|
+ if(type === 1){
|
|
|
+ // 更多心动擦亮
|
|
|
+ uni.navigateTo({
|
|
|
+ 'url':'/pages/wallet/like-user?isUrlType=2'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.like-me{
|
|
|
- .info-box-y{
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- .info-box-n{
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
+ .flex-box{
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .n-list{
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .list-m{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(255,255,255,0.6);
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 110;
|
|
|
+ .list-m-b{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 130;
|
|
|
+ width: 100%;
|
|
|
+ height: 190rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
|
|
|
+ padding-top: 70rpx;
|
|
|
+ .b-view{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 590rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #FFC107;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.info-box{
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
padding: 32rpx;
|
|
|
.info-title{
|
|
|
display: flex;
|
|
|
@@ -75,7 +166,87 @@
|
|
|
margin-right: 8rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
+ .y-list{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-flow: row wrap;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ .y-box{
|
|
|
+ width: 334rpx;
|
|
|
+ height: 440rpx;
|
|
|
+ margin-bottom: 18rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ .image-1{
|
|
|
+ width: 334rpx;
|
|
|
+ height: 440rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .list-info{
|
|
|
+ width: 334rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ z-index: 14;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .info-name{
|
|
|
+ width: 200rpx;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ }
|
|
|
+ .info-name-1{
|
|
|
+ margin-top: 16rpx;
|
|
|
+ width: 154rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ background: #D9D9D9;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ }
|
|
|
+ .info-right{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ image{
|
|
|
+ width: 52rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ margin-top: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .image-2{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .x-scroll{
|
|
|
+ width: 100%;
|
|
|
+ height: 212rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: flex;
|
|
|
+ padding: 36rpx 0;
|
|
|
+ .x-box{
|
|
|
+ display: inline-block;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 212rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ position: relative;
|
|
|
+ .box-text{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 8rpx;
|
|
|
+ left: 8rpx;
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ width: 160rpx;
|
|
|
+ height: 212rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.card{
|
|
|
@@ -91,7 +262,7 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.car-info{
|
|
|
- width: 120rpx;
|
|
|
+ min-width: 120rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.car-info-xian{
|