sugarpark-mini-program/pages/mine/mine.vue

<template>
	<view class="container">
		<TabBar :tabIndex="tabIndex" v-if="!cover.isFullScreen"></TabBar>
		<uni-popup ref="popup" type="center">
			<Popup :content1="popup.content1" :content2="popup.content2" :tip1="popup.tip1" :tip2="popup.tip2" :btntext="popup.btntext" @closePopup="closePopup"  @toService="toService" :btnEvent="'toService'"></Popup>
		</uni-popup>
		<uni-popup ref="loginpopup" type="center">
			<Popup :content1="popup.content1" :content2="popup.content2" :tip1="popup.tip1" :tip2="popup.tip2" :btntext="popup.btntext" @closePopup="closeLoginPopup"  @toLogin="toLogin" :btnEvent="'toLogin'"></Popup>
		</uni-popup>
		<uni-popup ref="vippopup" type="center">
			<VipPopup :swiperIndex="vipPopupIndex" @closePopup="closeVipPopup"></VipPopup>
		</uni-popup>
		<view id="topnav" class="topnav flex-start" :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`,'background-color':`rgba(21, 17, 38,${topNavAlpha})`}" v-if="!cover.isFullScreen">
			<!-- <view class="nav-item">
				<image :src="`${assetsUrl}mine-home.png`" mode="widthFix" class="nav-img"></image>
			</view> -->
			<view class="nav-item" @click="toService">
				<image :src="`${assetsUrl}mine-service.png`" mode="widthFix" class="nav-img"></image>
			</view>
			<view class="nav-item" @click="toSetting">
				<image :src="`${assetsUrl}mine-setting.png`" mode="widthFix"  class="nav-img"></image>
			</view>
			<view class="nav-item nav-edit font20 fw400" @click="toEdit">
				编辑资料
			</view>
		</view>
		<scroll-view scroll-y="true" v-if="scrollHeight>0" :style="{'height':`${scrollHeight}px`}" @scroll="handleScroll">
		<!-- 'z-index':`${cover.isFullScreen?1011:10}` -->
			<view class="video-box"  :style="{'height':`${cover.isFullScreen?'100vh':'680rpx'}`,'position':`${cover.isFullScreen?'fixed':'relative'}`}" @click.prevent="videoAction">
				<video 
				:src="cover.url" 
				class="m-video" autoplay loop :controls="false" 
				muted 
				object-fit="cover" 
				v-if="cover.cate==='video'" 
				@touchstart="touchStart" @touchend="touchEnd"
				:enable-progress-gesture="false"
				:style="{'height':`${cover.isFullScreen?'100vh':'680rpx'}`,'position':`${cover.isFullScreen?'fixed':'relative'}`}">
					<view class="video-inner flex-center" v-if="!cover.isFullScreen">
						<image :src="userInfo.iconThumbnail||defaulHead" mode="aspectFill" class="head-img" ></image>
						<view class="name-box flex-center">
							<view class="name fw600 font44">
								{{userInfo.nick||'未登录'}}
							</view>
							<image :src="`${assetsUrl}friends-vip.png`" mode="aspectFit" class="name-img" v-if="userInfo.vip"></image>
							<image :src="`${assetsUrl}friends-godness.png`" mode="aspectFit" class="name-img" v-else-if="userInfo.goddess"></image>
							<image :src="`${assetsUrl}friends-realMan.png`" mode="aspectFit" class="name-img" v-else-if="userInfo.real"></image>
						</view>
						<view class="video-edit flex-start" @click="toEditVideo">
							<image :src="`${assetsUrl}mine-edit.png`" mode="aspectFill" class="video-edit-img"></image>
							<view class="video-edit-text font22 fw400">
								修改封面视频
							</view>
						</view>
					</view>
				</video>
				<view class="m-video" v-else>
					<view class="video-inner flex-center" v-if="!cover.isFullScreen">
						<image :src="userInfo.iconThumbnail||defaulHead" mode="aspectFill" class="head-img" @click="toLogin"></image>
						<view class="name-box flex-center">
							<view class="name fw600 font44">
								{{userInfo.nick||'未登录'}}
							</view>
							<image :src="`${assetsUrl}friends-vip.png`" mode="aspectFit" class="name-img" v-if="userInfo.vip"></image>
							<image :src="`${assetsUrl}friends-godness.png`" mode="aspectFit" class="name-img" v-else-if="userInfo.goddess"></image>
							<image :src="`${assetsUrl}friends-realMan.png`" mode="aspectFit" class="name-img" v-else-if="userInfo.real"></image>
						</view>
						<view class="video-edit flex-start" @click="toEditVideo">
							<image :src="`${assetsUrl}mine-edit.png`" mode="aspectFill" class="video-edit-img"></image>
							<view class="video-edit-text font22 fw400">
								修改封面视频
							</view>
						</view>
					</view>
					<image :src="cover.url||defaulHead" mode="widthFix" class="cover-inner"></image>
					<view class="cover-modal"></view>
				</view>
				
			</view>
			<view class="info-box" :style="{'top':`${cover.isFullScreen?'100vh':'648rpx'}`}" v-if="!cover.isFullScreen">
				<view class="tabs flex-between">
					<view class="tab-item flex-center" v-for="(item,index) in tabs" :key="index" @click="toPath(item.path,item.name)">
						<view class="tab-num font36 fw700">
							{{item.num}}
							<span class="tab-dot fw400 font22" v-if="item.dotnum>0">
								{{item.dotnum}}
							</span>
						</view>
						<view class="tab-text font20 fw400">
							{{item.name}}
						</view>
						
					</view>
				</view>
				<view class="vip-box flex-between" @click="toVip" v-if="userInfo.sex==='Male'">
					<view class="vip-left flex-start">
						<image :src="`${assetsUrl}mine-vip.png`" mode="aspectFill" class="vip-img"></image>
						<view class="vl-box flex-center">
							<image :src="`${assetsUrl}mine-vip-text.png`" mode="aspectFill" class="vl-img"></image>
							<view class="vl-text font24 fw400" v-if="userInfo.vip">
								有效期至{{userInfo.memExpire.split(' ')[0]}}
							</view>
							<view class="vl-text font24 fw400" v-else-if="userInfo.hisVip">
								您的VIP已经过期啦
							</view>
							<view class="vl-text font24 fw400" v-else>
								会员中心
							</view>
						</view>
					</view>
					<view class="vip-right font22 fw600">
							立即{{userInfo.vip?'续费':'开通'}}
					</view>
				</view>
				<view class="cards flex-center">
					<view class="card-item flex-center" :class="item.class" v-for="(item,index) in cards" :key="index" @click="toCardsPath(item.path)">
						<view class="ci-title font32 fw600">
							{{item.title}}
						</view>
						<view class="ci-tip font22 fw400">
							{{item.tip}}
						</view>
						<image :src="`${assetsUrl}${item.bgImg}`" mode="aspectFit" class="ci-bg"></image>
					</view>
				</view>
				<view class="photo-album">
					<view class="pa-box flex-between">
						<view class="pa-title font32 fw600">
							我的相册
						</view>
						<view class="pa-tip font22 fw600" @click="toAlbum">
							编辑相册
						</view>
					</view>
					<view class="pics-box flex-center" v-if="pics.length>0">
						<image :src="currentPic.url" mode="widthFix" class="big-pic" v-if="currentPic.cate==='Img'"  @click="preview"></image>
						<video :src="currentPic.url" class="big-pic" 
							autoplay 
							loop 
							:controls="false" 
							muted 
							object-fit="fill" 
							v-if="currentPic.cate==='Vdo'"  
							:style="{'height':`${currentPic.height}px`}"
							@click="preview">
						</video>
						<scroll-view scroll-x="true" class="pics-list flex-start" v-if="pics.length>1">
							<view class="pic-item flex-center"  v-for="(item,index) in pics" :key="index" @click="picItemClick(index)">
								<image :src="item.urlThumbnail" mode="aspectFill" class="pic-img" :class="currentIndex===index?'active-item':''"></image>
							</view>
						</scroll-view>
						<image :src="`${assetsUrl}user-self.png`" mode="aspectFill" class="self" v-if="currentPic.authStatus==='Succ'"></image>
					</view>
					<view class="no-pics-box" v-else>
						<view class="np-title font36 fw600">
							添加你的第一张照片吧！
						</view>
						<view class="np-tip font28 fw400">
							分享给懂你的人
						</view>
						<view class="np-btn" @click="toAlbum">
							添加照片
						</view>
						<image  :src="`${assetsUrl}mine-no-images.png`" mode="aspectFill" class="np-bg"></image>
					</view>
				</view>
				<!-- <view class="wechat-oa">
					<official-account></official-account>
				</view> -->
				
				<!-- <view class="null-box"></view> -->
			</view>
		
		</scroll-view>
	</view>
</template>

<script>
	import TabBar from '@/components/TabBar/TabBar.vue';
	import Popup from '@/components/Popup/Popup.vue';
	import VipPopup from '@/components/Popup/VipPopup.vue';
	
	export default {
		components:{TabBar,Popup,VipPopup},
		data() {
			return {
				scrollHeight:0,
				topNavAlpha:0,
				assetsUrl:this.$util.assetsUrl,
				defaulHead:`${this.$util.assetsUrl}default-head.png`,
				startTime:0,
				startPosition:0,
				endPosition:0,
				tabIndex:2,
				tabs:[
					{name:'异性访客',num:0,dotnum:0,path:'/pages/mine/guest?pagetype=VisitForMe&name=异性访客'},
					{name:'喜欢我的',num:0,dotnum:0,path:'/pages/mine/guest?pagetype=FavsForMe&name=喜欢我的'},
					{name:'我喜欢的',num:0,dotnum:0,path:'/pages/mine/guest?pagetype=MyFavs&name=我喜欢的'},
					{name:'我看过的',num:0,dotnum:0,path:'/pages/mine/guest?pagetype=MyVisit&name=我看过的'},
				],
				cards:[
					// {title:'邀请好友',tip:'领取vip时长',bgImg:'mine-gift.png',class:"card1",path:"/pages/webView/webView?url=https://promote.sugarpark.cn"},
					{title:'认证中心',tip:'提升人气秘密',bgImg:'mine-star.png',class:"card2",path:'/pages/auth/auth'},
					{title:'我的钱包',tip:'充糖果、看收益',bgImg:'mine-money.png',class:"card3",path:'/pages/wallet/wallet'}
				],
				currentPic:null,
				currentIndex:0,
				pics:[],
				cover:{
					url:'',
					cate:'image',
					isFullScreen:false
				},
				popup:{
					content1:'',
					content2:'',
					tip1:'',
					tip2:'',
					btntext:''
				},
				vipPopupIndex:-1,
				onshowIsNot:false
				
			};
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight;
			},
			platform(){
				return this.$store.state.platform;
			},
			userInfo(){
				return this.$store.state.userInfo||{}
			}
		},
		onLoad() {
			
			this.cards[1].path=`/pages/wallet/wallet`
		},
		onShow() {
			this.computedScollviewHeight();
			if(!uni.getStorageSync('token')){
				return;
			}
			if(!this.onshowIsNot){
				this.getMineData();
				this.getMineDetail();
				this.getPkgVideo();
			}
			
			
		},
		onShareAppMessage(){
			return {
				title: '糖果公园',
				path: `/pages/login/login?share=${this.userInfo.inviteCode}`,
			}
		},
		methods:{
			/**
			 * 计算scroll高度
			 */
			computedScollviewHeight() {
				let heightLeaf = this.$store.state.tabbarHeight/2;
				let sysInfo = uni.getSystemInfoSync();
				this.scrollHeight = sysInfo.windowHeight - heightLeaf;
			
			},
			toCardsPath(path){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.loginpopup.open();
					return;
				}
				switch(path){
					case '/pages/auth/auth':
						this.popup={
							content1:'进行认证流程需给客服回复关键词',
							content2:'「真人认证」',
							tip1:'',
							tip2:'',
							btntext:'联系客服去认证'
						}
						this.$refs.popup.open();
						return;
					break;
					case '/pages/wallet/wallet':
						this.popup={
							content1:'查看钱包和提现需给客服回复关键词',
							content2:'「钱包」',
							tip1:'',
							tip2:'',
							btntext:'联系客服查看'
						}
						this.$refs.popup.open();
						return;
						// uni.navigateTo({
						// 	url:path
						// })
					break;
				}
				
			},
			closePopup(){
				this.$refs.popup.close();
				
			},
			closeLoginPopup(){
				this.$refs.loginpopup.close();
			},
			closeVipPopup(){
				this.vipPopupIndex=-1;
				this.$refs.vippopup.close();
			},
			toEditVideo(){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.loginpopup.open();
					return;
				}
				uni.navigateTo({
					url:'/pagesSub/faceVideo/faceVideo'
				})
			},
			toLogin(){
				if(!uni.getStorageSync('token')){
					uni.reLaunch({
						url:'/pages/login/login'
					})
					return;
				}
			},
			toService(){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.loginpopup.open();
					return;
				}
				this.$refs.popup.close();
				uni.openCustomerServiceChat({
				     extInfo:{
				         url:'https://work.weixin.qq.com/kfid/kfca1b21d2f7e8a18e9',//客服链接
				     },
				     corpId:'wwa8f2a0d8a6dc0950',//企业ID
				     fail(res){
						 console.log(res)
				         wx.showToast({
				           title: '客服联系失败',
				           icon:'none'
				         })
				     }
				 })
			},
			toSetting(){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.loginpopup.open();
					return;
				}
				uni.navigateTo({
					url:'/pagesSub/setting/setting'
				})
			},
			handleScroll(e){
				this.topNavAlpha=e.detail.scrollTop/250;
			},
			toAlbum(){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.loginpopup.open();
					return;
				}
				uni.navigateTo({
					url:'/pages/mine/album'
				})
			},
			preview(){
				let arr=[],obj={};
				console.log(this.pics)
				this.onshowIsNot=true;
				for(let i=0;i<this.pics.length;i++){
					obj={url:'',type:''};
					if(this.pics[i].cate==='Img'){
						obj.type='image';
					}
					if(this.pics[i].cate==='Vdo'){
						obj.type='video';
					}
					obj.url=this.pics[i].url;
					arr.push(obj)
				}
				uni.previewMedia({
					sources:arr,
					current:this.currentIndex,
					showmenu:true,
					success: (res) => {
						console.log(res);
						this.onshowIsNot=true;
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			toPath(path,name){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.loginpopup.open();
					return;
				}
				switch(name)
				{
					
					case '异性访客':
						
						if(this.userInfo.sex==='Famale'){
							if(!this.userInfo.realMan){
								this.popup={
									content1:'进行认证流程需给客服回复关键词',
									content2:'「真人认证」',
									tip1:'',
									tip2:'',
									btntext:'联系客服去认证'
								}
								this.$refs.popup.open();
								return;
								
							}
						}
						else if(this.userInfo.sex==='Male'){
							if(!this.userInfo.vip){
								this.vipPopupIndex=3;
								this.$refs.vippopup.open();
								return;
								
							}
						}
						this.tabs[0].dotnum=0;
					break;
					case '喜欢我的':
						
						// if(this.userInfo.sex==='Famale'){
						// 	if(!this.userInfo.realMan){
						// 		this.popup={
						// 			content1:'进行认证流程需给客服回复关键词',
						// 			content2:'「真人认证」',
						// 			tip1:'',
						// 			tip2:'',
						// 			btntext:'联系客服去认证'
						// 		}
						// 		this.$refs.popup.open();
						// 		return;
								
						// 	}
						// }
						// else if(this.userInfo.sex==='Male'){
						// 	if(!this.userInfo.vip){
						// 		this.vipPopupIndex=3;
						// 		this.$refs.vippopup.open();
						// 		return;
								
						// 	}
						// }
						this.tabs[1].dotnum=0;
					break;
					case '我喜欢的':
						this.tabs[2].dotnum=0;
					break;
					case '我看过的':
						this.tabs[3].dotnum=0;
					break;
				}
				uni.navigateTo({
					url:path
				})
				
			},
			toEdit(){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.loginpopup.open();
					return;
				}
				uni.navigateTo({
					url:'/pages/info/editCenter'
				})
			},
			toVip(){
				if(!uni.getStorageSync('token')){
					this.popup={
						content1:'您还未登录',
						content2:'该功能登录后才能使用',
						tip1:'',
						tip2:'',
						btntext:'去登录'
					}
					this.$refs.loginpopup.open();
					return;
				}
				if(this.platform==='ios'){
					this.vipPopupIndex=0;
					this.$refs.vippopup.open();
					return;
				}
				uni.navigateTo({
					url:'/pages/vip/vip'
				})
			},
			touchStart(e){
				this.startTime = Date.now()
				this.startPosition = e.changedTouches[0].clientY
			},
			touchEnd(e){
				const endTime = Date.now()
				if (endTime - this.startTime <100){
					return;
				}
				if (Math.abs(this.endPosition - this.startPosition) > 10){
					this.endPosition = e.changedTouches[0].clientY;
					let elePosition = this.endPosition - this.startPosition > 0 ? "toBottom": "toTop"
					if(elePosition==='toBottom'){
						this.cover.isFullScreen=true;
					}
					else{
						this.cover.isFullScreen=false;
					}
				} else {
					return;
				}
			},
			videoAction(){
				if(this.cover.isFullScreen){
					this.cover.isFullScreen=false;
				}
			},
			getMineData(){
				this.$api.public.mine({}).then(res=>{
					this.tabs[0].dotnum=res.data.vmb;
					this.tabs[0].num=res.data.vme;
					this.tabs[1].dotnum=res.data.fmb;
					this.tabs[1].num=res.data.fm;
					this.tabs[2].num=res.data.fv;
					this.tabs[3].num=res.data.vbm;
				})
			},
			getMineDetail(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.mineDetail({
					getAlbum:true,
					completeUser:user
				}).then(res=>{
					this.$store.commit('setUserInfo',res.data);
					uni.setStorageSync('userInfo',JSON.stringify(res.data));//正式环境删除
					this.pics=this.userInfo.medias;
					this.currentPic=this.userInfo.medias[0];
					
				})
			},
			getPkgVideo(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.videoProcess({
					completeUser:user,
					pageHomeUserId:user.id,
					personalPageHomeVideoOperateEnum:'NONE'
				}).then(res=>{
				  if(res.status==='Succ'&&res.data.personalPageHomeVideoUrl){
					  this.cover.url=res.data.personalPageHomeVideoUrl;
					  this.cover.cate='video';
					  return;
				  }
				  
				  if(this.userInfo.bkg&&this.userInfo.bkg.indexOf('.mp4')!==-1){
				  	this.cover.cate='video';
				  	this.cover.url=this.userInfo.bkg;
				  }
				  else{
				  	this.cover.cate='img';
				  	this.cover.url=this.userInfo.bkg;
				  }
				})
			},
			picItemClick(index){
				this.currentIndex=index;
				this.currentPic=this.pics[index];
				this.currentPic.height=this.currentPic.h/(this.currentPic.w/343);
			},
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	background-color: $bgcolor1;
	position: relative;
	.popup{
		width: 590rpx;
		height: 668rpx;
		background-color: #171325;
		position: relative;
		flex-direction: column;
		border-radius: 40rpx;
		.close{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 32rpx;
			height: 32rpx;
		}
		.popop-img{
			width: 436rpx;
			height: 312rpx;
		}
		.content{
			margin-bottom: 16rpx;
			color: #ffffff;
		}
		.btn{
			width: 470rpx;
			height: 84rpx;
			background: #6C52F4;
			border-radius: 42rpx;
			line-height: 84rpx;
			text-align: center;
			color: #ffffff;
			margin-top: 68rpx;
		}
	}
	.topnav {
		padding: 0 10rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		backdrop-filter: blur(10px);
		.nav-item {
			width: 56rpx;
			height: 56rpx;
			margin-left: 16rpx;
			.nav-img{
				width: 56rpx;
				height: 56rpx;
			}
			
		}
		.nav-edit{
			width:120rpx;
			height: 56rpx;
			border-radius: 56rpx;
			color: $fontcolor5;
			line-height: 56rpx;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.5);
		}
	}
	.video-box{
		width: 100vw;
		transition: all 0.3s;
		.m-video{
			width: 100vw;
			height: 680rpx;
			position: relative;
			.video-inner{
				flex-direction: column;
				height: 100%;
				transform: translateY(30rpx);
				position: relative;
				z-index: 6;
				.head-img{
					width: 168rpx;
					height: 168rpx;
					border-radius: 72rpx;
					border: 4rpx solid #FFFFFF;
				}
				.name-box{
					height: 60rpx;
					margin-top: 24rpx;
					.name{
						color:  $fontcolor5;
						height: 60rpx;
						line-height: 60rpx;
					}
					.name-img{
						width: 76rpx;
						height: 42rpx;
						margin-left: 8rpx;
					}
				}
				.video-edit{
					position: absolute;
					bottom: 80rpx;
					right: 32rpx;
					height: 48rpx;
					background-color:rgba(0, 0, 0, 0.5);
					padding: 0 20rpx;
					border-radius: 48rpx;
					z-index: 6;
					.video-edit-img{
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}
					.video-edit-text{
						
						line-height: 48rpx;
						color: $fontcolor5;
					}
				}
			}
			.cover-inner{
				width: 100vw;
				height: 680rpx;
				position: absolute;
				top: 0;
				z-index: 4;
			}
			.cover-modal{
				position: absolute;
				top: 0;
				width: 100vw;
				height: 680rpx;
				z-index: 5;
				background: rgba(0,0,0,0.4);
				backdrop-filter: blur(20rpx);
			}
		}
	}
	.info-box{
		position: absolute;
		z-index: 20;
		left: 0;
		width: 100vw;
		transition: top .3s;
		.tabs{
			padding: 24rpx 32rpx 0rpx 32rpx;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			
			background-color: $bgcolor2;
			.tab-item{
				width: 172rpx;
				height: 144rpx;
				flex-direction: column;
				
				.tab-num{
					color: $fontcolor5;
					position: relative;
					.tab-dot{
						position: absolute;
						top: -25rpx;
						left: 40rpx;
						height: 32rpx;
						padding: 0rpx 12rpx;
						line-height: 32rpx;
						text-align: center;
						border-radius: 32rpx;
						color: $fontcolor5;
						background-color: $assist2;
					}
				}
				.tab-text{
					color: $fontcolor2;
					margin-top: 8rpx;
				}
				
			}
		}
		.vip-box{
			box-sizing: border-box;
			margin: 0rpx 32rpx;
			background: linear-gradient(133deg, #1B1A1D 0%, #000000 100%);
			border-radius: 16rpx;
			.vip-left{
				.vip-img{
					width: 164rpx;
					height: 140rpx;
					margin-left: 16rpx;
				}
				.vl-box{
					flex-direction: column;
					margin-left: 16rpx;
					align-items: flex-start !important;
					.vl-text{
						margin-top: 8rpx;
						color: $fontcolor5;
						text-align: left;
						width: 100%;
					}
					.vl-img{
						width: 124rpx;
						height: 36rpx;
					}
				}
			}
			.vip-right{
				width: 136rpx;
				height: 48rpx;
				border-radius: 32rpx;
				border: 1rpx solid #F2CEB9;
				margin-right: 32rpx;
				text-align: center;
				line-height: 48rpx;
				color: #F2CEB9;
			}
		}
		.cards{
			margin: 0rpx 32rpx;
			margin-top: 14rpx;
			.card-item{
				flex: 1;
				height: 136rpx;
				padding: 0 16rpx;
				border-radius: 16rpx;
				flex-direction: column;
				position: relative;
				margin-left: 12rpx;
				&:nth-of-type(1){
					margin-left: 0rpx;
				}
				.ci-title{
					color: $fontcolor5;
					width: 100%;
					text-align: left;
					position: relative;
					z-index: 10;
				}
				.ci-tip{
					color: $fontcolor5;
					margin-top: 10rpx;
					width: 100%;
					text-align: left;
					position: relative;
					z-index: 10;
				}
				.ci-bg{
					position: absolute;
					right: 0;
					bottom: 0;
					width: 88rpx;
					height: 118rpx;
					z-index: 1;
				}
			}
			.card1{
				background:linear-gradient(133deg, #FA5C74 0%, #F51D44 100%);
			}
			.card2{
				background:linear-gradient(133deg, #8C67FE 0%, #4A5BFE 100%);
			}
			.card3{
				background:linear-gradient(133deg, #FAA85C 0%, #FE884A 100%);
			}
		}
		.photo-album{
			margin: 56rpx 32rpx 0rpx 32rpx;
			.pa-box{
				.pa-title{
					color: $fontcolor5;
				}
				.pa-tip{
					color: $fontcolor3;
				}
			}
			.pics-box{
				width: 100%;
				margin-top: 26rpx;
				position: relative;
				margin-bottom: 30rpx;
				.self{
					position: absolute;
					width: 72rpx;
					height: 40rpx;
					right: 24rpx;
					top: 24rpx;
					z-index: 100;
				}
				.big-pic{
					width: 100%;
					height: 500rpx;
					border-radius: 40rpx;
				}
				.pics-list{
					width: 100%;
					height: 186rpx;
					position: absolute;
					bottom: -35rpx;
					white-space:nowrap;
					transform: translateY(-20rpx);
					.pic-item{
						display: inline-block;
						width: 96rpx;
						height: 128rpx;
						border-radius: 16rpx;
						margin-left: 16rpx;
						box-shadow:0rpx 0rpx 10rpx 1rpx #151126;
						transform: translateY(6rpx);
						&:nth-last-of-type(1){
							margin-right: 16rpx;
						}
						.pic-img{
							width: 96rpx;
							height: 128rpx;
							border-radius: 16rpx;
							box-sizing: border-box;
							border: 4rpx solid transparent;
							transition: all 0.3s;
						}
					}
					.active-item{
						border: 4rpx solid #ffffff !important;
					}
				}
			}
			.no-pics-box{
				margin: 16rpx 0rpx;
				background-color: $bgcolor3;
				border-radius: 20rpx;
				position: relative;
				padding: 0rpx 48rpx;
				padding-top: 64rpx;
				padding-bottom: 48rpx;
				.np-title{
					color: $fontcolor4;
				}
				.np-tip{
					color: $fontcolor4;
					margin-top: 24rpx;
				}
				.np-btn{
					margin-top: 86rpx;
					width: 240rpx;
					height: 72rpx;
					background: #6C52F4;
					border-radius: 36rpx;
					line-height: 72rpx;
					text-align: center;
					color: $fontcolor5;
				}
				.np-bg{
					position: absolute;
					width: 344rpx;
					height: 400rpx;
					right: 0;
					top: 0;
				}
			}
		}
		.wechat-oa{
			margin: 32rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-top: 60rpx;
		}
	}
	
}
</style>