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.
157 lines
3.5 KiB
157 lines
3.5 KiB
<template>
|
|
<view class="lf-w-100 lf-h-100">
|
|
<view class="head-top">
|
|
<view class="head-top-wrap lf-w-100 lf-h-100">
|
|
<view class="lf-w-100 tips-wrap">
|
|
<view class="tips">
|
|
<view class="lf-flex lf-w-100 lf-h-100 lf-p-b-12 lf-p-l-30">
|
|
<view>
|
|
<image src="../../static/logo.png" mode="aspectFill" class="vip-head"></image>
|
|
</view>
|
|
<view class="lf-p-l-20">
|
|
<view class="lf-font-32 lf-color-white">编号：73894</view>
|
|
<view class="lf-color-white lf-font-28 lf-m-t-20">尚未加入会员</view>
|
|
</view>
|
|
</view>
|
|
<view class="banner-flag">
|
|
<view class="lf-m-b-22">
|
|
限时特惠
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="vip-content">
|
|
<view class="lf-font-36 lf-color-222 lf-m-l-32 lf-m-b-30" style="font-weight: 500;">
|
|
VIP会员专属特权
|
|
</view>
|
|
<view class="vip-tag">
|
|
<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 个人形象升级</view>
|
|
<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 专属会员身份标识</view>
|
|
<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 免费上头条N次</view>
|
|
<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 免费朋友圈转发N次</view>
|
|
<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 解锁访客记录/收藏我</view>
|
|
<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 发表更多动态/评论</view>
|
|
<view class="lf-color-222 lf-font-32 lf-p-t-30 lf-p-l-30">· 每月系统自动推送4名异性</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
</script>
|
|
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
.vip-content {
|
|
position: relative;
|
|
top: -130px;
|
|
}
|
|
|
|
.vip-tag {
|
|
width: 686rpx;
|
|
height: 100%;
|
|
padding: 0 30rpx 30rpx 0;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.banner-flag {
|
|
width: 82rpx;
|
|
height: 134rpx;
|
|
background: #FE7B43;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 0;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.banner-flag::after {
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 40rpx solid transparent;
|
|
border-right: 40rpx solid transparent;
|
|
border-bottom: 26rpx solid #314177;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.vip-head {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border: 5rpx solid #FFFFFF;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.head-top {
|
|
width: 100%;
|
|
height: 562rpx;
|
|
position: relative;
|
|
z-index: 9;
|
|
/* background-color: red; */
|
|
}
|
|
|
|
.head-top-wrap {
|
|
width: 100%;
|
|
height: 656rpx;
|
|
/* z-index: -1; */
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.head-top::after {
|
|
content: '';
|
|
width: 100%;
|
|
height: 272rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
border-radius: 0 586px 586px/0 0 320rpx 320rpx;
|
|
background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
|
|
}
|
|
|
|
.tips-wrap {
|
|
overflow: hidden;
|
|
height: 754rpx;
|
|
border-radius: 0 586px 586px/0 0 320rpx 320rpx;
|
|
position: absolute;
|
|
top: -481rpx;
|
|
}
|
|
|
|
.tips {
|
|
width: 686rpx;
|
|
height: 242rpx;
|
|
background-color: #314177;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
bottom: -510rpx;
|
|
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;
|
|
}
|
|
</style>
|