You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
7.8 KiB
309 lines
7.8 KiB
<template>
|
|
<view class="lf-w-100 lf-h-100">
|
|
<view class="head-top">
|
|
<view class="lf-row-between pic-top">
|
|
<view class="lf-row-round">
|
|
<view>
|
|
<!-- <lf-image style="width: 160rpx;height: 160rpx;" src="../../static/logo.png"></lf-image> -->
|
|
<image src="../../static/logo.png" mode="widthFix" class="head-pic"></image>
|
|
</view>
|
|
<view class="head-left">
|
|
<view class="head-name" @click="$url('/pages/my/editInfo')">编号：73894 <u-icon name="arrow-right lf-m-l-20"></u-icon></view>
|
|
<view class="head-text">资料审核中</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-bg-white span-btn1" @click="$url('/pages/my/exclusiveMatch')">
|
|
获得红线
|
|
</view>
|
|
</view>
|
|
<view class="lf-row-between" style="height: 98rpx;padding: 0 32rpx;">
|
|
<view class="lf-row-round lf-flex-column" @click="showRedthread()">
|
|
<view class="lf-font-32 lf-color-white">0</view>
|
|
<view class="lf-font-24 lf-color-white lf-p-t-20">红线</view>
|
|
</view>
|
|
<view class="lf-row-round lf-flex-column" @click="showPeachblossom()">
|
|
<view class="lf-font-32 lf-color-white">5</view>
|
|
<view class="lf-font-24 lf-color-white lf-p-t-20">桃花</view>
|
|
</view>
|
|
<view class="lf-row-round lf-flex-column">
|
|
<view class="lf-font-32 lf-color-white">0</view>
|
|
<view class="lf-font-24 lf-color-white lf-p-t-20">谁看过我</view>
|
|
</view>
|
|
<view class="lf-row-round lf-flex-column">
|
|
<view class="lf-font-32 lf-color-white">0</view>
|
|
<view class="lf-font-24 lf-color-white lf-p-t-20">谁收藏我</view>
|
|
</view>
|
|
<view class="lf-row-round lf-flex-column">
|
|
<view class="lf-font-32 lf-color-white">70%</view>
|
|
<view class="lf-font-24 lf-color-white lf-p-t-20">资料完整</view>
|
|
</view>
|
|
</view>
|
|
<view class="head-top-wrap lf-w-100 lf-h-100">
|
|
<view class="lf-w-100 tips-wrap">
|
|
<view class="tips">
|
|
<view class="lf-row-round lf-w-100 lf-h-100 lf-p-b-12">
|
|
<view class="lf-color-white lf-font-28">VIP会员｜拥有专属权益</view>
|
|
<view class="lf-bg-white span-btn" @click="$url('/pages/my/memberVip')">
|
|
了解详情
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="adv">
|
|
<view>
|
|
<!-- <image src="../../static/logo.png" mode="widthFix" class="adv-pic"></image> -->
|
|
<view class="logo-my">
|
|
<text class="lf-iconfont icon-dingzhi" style="font-size: 60rpx;color: white;"></text>
|
|
</view>
|
|
</view>
|
|
<view class="adv-content">
|
|
<view class="lf-color-222 lf-font-32 lf-m-b-15">
|
|
专属服务定制
|
|
</view>
|
|
<view class="lf-color-777">促成您和心仪对象线下见面 <u-icon class="lf-m-l-20" name="arrow-right"></u-icon></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="classify lf-m-t-30">
|
|
<view class="card" v-for="(item,index) in list" @click="$url(item.path)">
|
|
<view class="lf-row-center" style="align-content: center;">
|
|
<!-- <u-icon class="classify-icon" :name="item.icon"></u-icon> -->
|
|
<image class="classify-icon" :src="item.pic" mode="aspectFill"></image>
|
|
</view>
|
|
<view>
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
<view style="height: 10rpx;"></view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [
|
|
{name: '我的红娘',icon:'github-circle-fill',path: '/pages/my/exclusiveMatch',pic: '../../static/my/red.png'},
|
|
{name: '实名认证',icon:'email',path: '/pages/my/authentication',pic: '../../static/my/authen.png'},
|
|
{name: '我的收藏',icon:'qzone',path: '/pages/my/collect',pic: '../../static/my/collect.png'},
|
|
{name: '我的动态',icon:'moments',pic: '../../static/my/qzone.png'},
|
|
{name: '福利中心',icon:'red-packet',path:'/pages/my/welfare',pic: '../../static/my/welhare.png'},
|
|
{name: '公众号',icon:'google-circle-fill',path:'/pages/my/officialAccount',pic: '../../static/my/public.png'},
|
|
{name: '联系客服',icon:'kefu-ermai',path: '/pages/my/service',pic: '../../static/my/service.png'},
|
|
{name: '设置',icon:'setting',path: '/pages/my/setting',pic: '../../static/my/setting.png'}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
showRedthread() {
|
|
uni.showModal({
|
|
title: '红线说明',
|
|
content: '红线可以用来联系其他会员，对方不接受则24小时后退还红线',
|
|
showCancel: false,
|
|
cancelText: '我知道了',
|
|
confirmColor: '#E21196',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
showPeachblossom() {
|
|
uni.showModal({
|
|
title: '桃花说明',
|
|
content: '桃花可以用来发布动态、评论等，签到可以获得桃花',
|
|
showCancel: false,
|
|
cancelText: '我知道了',
|
|
confirmColor: '#E21196',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.logo-my {
|
|
width: 135rpx;
|
|
height: 135rpx;
|
|
background: linear-gradient(180deg, #FE3EA5 0%, #FE7251 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.head-top {
|
|
width: 100%;
|
|
height: 562rpx;
|
|
/* background-color: red; */
|
|
}
|
|
|
|
.head-top-wrap {
|
|
width: 100%;
|
|
height: 656rpx;
|
|
/* z-index: -1; */
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.head-top::after {
|
|
content: '';
|
|
width: 100%;
|
|
height: 525rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
border-radius: 0 586px 586px/0 0 200rpx 200rpx;
|
|
background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
|
|
}
|
|
|
|
.tips-wrap {
|
|
overflow: hidden;
|
|
height: 656rpx;
|
|
border-radius: 0 586px 586px/0 0 200rpx 200rpx;
|
|
position: absolute;
|
|
top: -494rpx;
|
|
}
|
|
|
|
.tips {
|
|
width: 686rpx;
|
|
height: 121rpx;
|
|
background-color: #314177;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
bottom: -536rpx;
|
|
left: 0;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.span-btn {
|
|
border-radius: 25rpx;
|
|
width: 149rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #314177;
|
|
}
|
|
|
|
.head-pic {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border: 5rpx solid #FFFFFF;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.adv-pic {
|
|
width: 135rpx;
|
|
height: 135rpx;
|
|
border-radius: 50%;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.head-text {
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 400;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.pic-top {
|
|
padding: 48rpx 32rpx 40rpx 48rpx;
|
|
}
|
|
|
|
.span-btn1 {
|
|
border-radius: 25rpx;
|
|
width: 149rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #E21196;
|
|
font-weight: 400;
|
|
line-height: 33rpx;
|
|
}
|
|
|
|
.head-name {
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 45rpx;
|
|
letter-spacing: 1rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.head-left {
|
|
padding: 20rpx;
|
|
height: 160rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.adv {
|
|
width: 686rpx;
|
|
height: 195rpx;
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
padding: 0 0 0 30rpx;
|
|
/* justify-content: space-around; */
|
|
align-items: center;
|
|
}
|
|
|
|
.adv-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.classify {
|
|
width: 686rpx;
|
|
display: flex;
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto;
|
|
flex-wrap: wrap;
|
|
padding: 38rpx 30rpx;
|
|
}
|
|
.card {
|
|
width: 116rpx;
|
|
height: 116rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-right: 54rpx;
|
|
// margin-bottom: 68rpx;
|
|
&:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
&:nth-child(n + 5) {
|
|
margin-top: 68rpx;
|
|
}
|
|
}
|
|
.classify-icon {
|
|
height: 48rpx;
|
|
width: 45rpx;
|
|
font-size: 48rpx;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
</style>
|