sugarpark-mini-program/pages/friends/user.vue

<template>
	<view class="container" ref="container">
		<!-- @touchmove.stop.prevent="moveStop" -->
		<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" @click="back">
				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
			</view>
		</view>
		<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="vippopup" type="center">
			<VipPopup :swiperIndex="vipPopupIndex" @closePopup="closeVipPopup"></VipPopup>
		</uni-popup>
		<uni-popup ref="paypopup" type="bottom" :safe-area="false">
			<PayPopup :swiperIndex="payPopupIndex" @closePopup="closePayPopup"></PayPopup>
		</uni-popup>
		<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'" 
			:enable-progress-gesture="false"
			@touchstart="touchStart" @touchend="touchEnd"
			:style="{'height':`${cover.isFullScreen?'100vh':'680rpx'}`,'position':`${cover.isFullScreen?'fixed':'relative'}`}">
				<view class="video-inner flex-center" v-if="!cover.isFullScreen">
					<view class="head-box">
						<image :src="userInfo.iconThumbnail" mode="aspectFill" class="head-img"></image>
						<view class="head-active" style="background-color: #38E825;" v-if="userInfo.lastActiveTime<=30"></view>
						<view class="head-active" style="background-color: #0ABDEF;" v-else-if="userInfo.lastActiveTime>30&&userInfo.lastActiveTime<=1440"></view>
					</view>
					
					<view class="name-box flex-center">
						<view class="name fw600 font44">
							{{userInfo.nick}}
						</view>
					</view>
					<view class="age-box fw600 font28">
						{{userInfo.ageInfo.age}}岁&nbsp;丨&nbsp;{{userInfo.career}}
					</view>
					<view class="city-box flex-center" >
						<image :src="`${assetsUrl}user-pos.png`" mode="aspectFit" class="city-pos"></image> 
						<view class="city font24 fw500">
							{{userInfo.currCity}}<text v-if="userInfo.distance&&userInfo.distance!=='NaNm'">&nbsp;·&nbsp;{{userInfo.distance}}</text>
						</view>
					</view>
					<view class="video-edit flex-start" v-if="likeNum>0" @click="likeAction">
						<image :src="`${assetsUrl}user-heart${isLiked?'3':'2'}.png`" mode="aspectFill" class="video-edit-img"></image>
						<view class="video-edit-text font22 fw400">
							{{likeNum}}
						</view>
					</view>
				</view>
			</video>
			<view class="m-video" v-else>
				<view class="video-inner flex-center" v-if="!cover.isFullScreen">
					<view class="head-box">
						<image :src="userInfo.iconThumbnail" mode="aspectFill" class="head-img"></image>
						<view class="head-active" style="background-color: #38E825;" v-if="userInfo.lastActiveTime<=30"></view>
						<view class="head-active" style="background-color: #0ABDEF;" v-else-if="userInfo.lastActiveTime>30&&userInfo.lastActiveTime<=1440"></view>
					</view>
					<view class="name-box flex-center">
						<view class="name fw600 font44" >
							{{userInfo.nick}}
						</view>
					</view>
					<view class="age-box fw600 font28">
						{{userInfo.ageInfo.age}}岁&nbsp;丨&nbsp;{{userInfo.career}}
					</view>
					<view class="city-box flex-center">
						<image :src="`${assetsUrl}user-pos.png`" mode="aspectFit" class="city-pos"></image> 
						<view class="city font24 fw500">
							{{userInfo.currCity}}<text v-if="userInfo.distance&&userInfo.distance!=='NaNm'">&nbsp;·&nbsp;{{userInfo.distance}}</text>
						</view>
					</view>
					<view class="video-edit flex-start" v-if="likeNum>0"  @click="likeAction">
						<image :src="`${assetsUrl}user-heart${isLiked?'3':'2'}.png`" mode="aspectFill" class="video-edit-img"></image>
						<view class="video-edit-text font22 fw400">
							{{likeNum}}
						</view>
					</view>
				</view>
				<image :src="cover.url" 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="tag-box flex-start">
				<view class="tag flex-center">
					<image :src="`${assetsUrl}user-height.png`" mode="aspectFill" class="tag-img"></image>
					<view class="tag-text font28 fw400">
						{{userInfo.height}}cm
					</view>
				</view>
				<view class="tag flex-center">
					<image :src="`${assetsUrl}user-weight.png`" mode="aspectFill" class="tag-img"></image>
					<view class="tag-text font28 fw400">
						{{userInfo.weight}}kg
					</view>
				</view>
				<view class="tag flex-center">
					<image :src="`${assetsUrl}user-constellation.png`" mode="aspectFill" class="tag-img"></image>
					<view class="tag-text font28 fw400">
						{{userInfo.ageInfo.astro}}
					</view>
				</view>
				<!-- <view class="tag flex-center">
					<image :src="`${assetsUrl}user-education.png`" mode="aspectFill" class="tag-img"></image>
					<view class="tag-text font28 fw400">
						本科
					</view>
				</view> -->
			</view>
			<view class="live-box flex-start">
				<view class="live-inner flex-start">
					<image :src="`${assetsUrl}user-city.png`" mode="aspectFill" class="live-img"></image>
					<span class="live font28 fw400">常驻:</span><span class="live font28 fw400" v-for="(item,index) in userInfo.cities" :key="index">{{item}}</span>
				</view>
				
			</view>
			<view class="desc-box font28 fw400" v-if="userInfo.desc">
				<image :src="`${assetsUrl}user-desc.png`" mode="aspectFill" class="desc-img"></image>
				{{userInfo.desc}}
			</view>
			<view class="tab-box flex-start">
				<view class="tab-item" @click="tabClick(0)" >
					<view class="tab-item-text fw700" :style="{
					'font-size':`${tabIndex===0?'44rpx':'36rpx'}`,
					'color':`${tabIndex===0?'#ffffff':''}`,
					'font-weight':`${tabIndex===0?'#ffffff':''}`}">关于{{userInfo.sex==='Famale'?'她':'他'}}</view>
				</view>
				<!-- <view class="tab-item" @click="tabClick(1)" 
					style="margin-left: 72rpx;">
					<view class="tab-item-text fw700" :style="{
					'font-size':`${tabIndex===1?'44rpx':'36rpx'}`,
					'color':`${tabIndex===1?'#ffffff':''}`,
					'font-weight':`${tabIndex===1?'#ffffff':''}`}">动态</view>
				</view> -->
				<image :src="`${assetsUrl}friends-circle.png`" mode="aspectFill" class="tab-item-bg" :style="{'left':`${tabIndex*195+15}rpx`}" ></image>
			</view>
			<view class="cup-box flex-start">
				<view class="cup-item flex-center"  v-if="userInfo.realMan">
					<image :src="`${assetsUrl}friends-real.png`" mode="aspectFit" class="cup-img" style="width: 76rpx;height: 40rpx;"></image>
					<view class="cup-text font24" >
						{{userInfo.sex==='Famale'?'她':'他'}}已完成真人认证
					</view>
				</view>
				<view class="cup-item flex-center"  v-if="userInfo.vip">
					<image :src="`${assetsUrl}friends-vip.png`" mode="aspectFit" class="cup-img" style="width: 76rpx;height: 40rpx;"></image>
					<view class="cup-text font24" >
						{{userInfo.sex==='Famale'?'她':'他'}}是尊贵的vip用户
					</view>
				</view>
<!-- 				<view class="cup-item flex-center">
					<image :src="`${assetsUrl}user-cup.png`" mode="aspectFit" class="cup-img" style="width: 40rpx;height: 40rpx;"></image>
					<view class="cup-text font24">
						重庆市魅力榜第3名
					</view>
				</view> -->
				<view class="cup-item flex-center" v-if="userInfo.goddess&&userInfo.realMan">
					<image :src="`${assetsUrl}user-charm.png`" mode="aspectFit" class="cup-img" style="width: 76rpx;height: 42rpx;"></image>
					<view class="cup-text font24">
						{{userInfo.sex==='Famale'?'她':'他'}}已完成真人认证且颜值较高
					</view>
				</view>
				<view class="cup-item flex-center" v-if="!userInfo.realMan">
					<image :src="`${assetsUrl}user-no-real.png`" mode="aspectFit" class="cup-img" style="width: 76rpx;height: 42rpx;"></image>
					<view class="cup-text font24">
						{{userInfo.sex==='Famale'?'她':'他'}}未完成真人认证、交友谨慎
					</view>
				</view>
			</view>
			<view class="photo-album">
				<view class="pics-box flex-center">
					<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>
			<view class="hopes-box"  v-if="userInfo.hobbysStr.length>0">
				<view class="title">
					{{userInfo.sex==='Famale'?'她':'他'}}的标签
				</view>
				<view class="hopes flex-start">
					<view class="hopes-item font28"  v-for="(item,index) in userInfo.hobbysStr" :key="index">
						{{item}}
					</view>
				</view>
			</view>
			<view class="hopes-box" v-if="userInfo.hopesStr.length>0">
				<view class="title">
					{{userInfo.sex==='Famale'?'她':'他'}}喜欢的
				</view>
				<view class="hopes flex-start">
					<view class="hopes-item font28"  v-for="(item,index) in userInfo.hopesStr" :key="index">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box flex-between">
			<view class="talk-btn flex-center" :style="{'width':`${isLiked?'100%':'320rpx'}`}" @click="toTalk">
				<image :src="`${assetsUrl}user-talk.png`" mode="aspectFit" class="btn-icon"></image>
				<text class="btn-text font32 fw600">聊一聊</text>
			</view>
			<view class="like-btn flex-center" style="width: 320rpx;" @click="likeAction" v-if="!isLiked">
				<image :src="`${assetsUrl}user-heart1.png`" mode="aspectFit" class="btn-icon"></image>
				<text class="btn-text font32 fw600">喜欢TA</text>
			</view>
		</view>
	</view>
</template>

<script>
	import TabBar from '@/components/TabBar/TabBar.vue';
	import wxMap from '@/static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js';
	import Popup from '@/components/Popup/Popup.vue';
	import PayPopup from '@/components/Popup/PayPopup.vue';
	import VipPopup from '@/components/Popup/VipPopup.vue';
	/**
	 * 腾讯位置服务，手机账号：18996226740
	 */
	const wxMapSdk=new wxMap({key:'E5SBZ-T2YC3-CBL3F-YGFQQ-26PP2-ERFII'})
	export default {
		components:{TabBar,Popup,PayPopup,VipPopup},
		data() {
			return {
				scrollHeight:0,
				topNavAlpha:0,
				assetsUrl:this.$util.assetsUrl,
				startTime:0,
				startPosition:0,
				endPosition:0,
				currentPic:null,
				currentIndex:0,
				pics:[],
				userInfo:null,//用户信息
				cover:{
					url:'',
					cate:'video',
					isFullScreen:false
				},
				labels:[],
				hopes:[],
				liveCitys:['1','2'],
				tabIndex:0,
				id:null,
				latitude: 0,
				longitude: 0,
				hobbysEnums:[],
				hopesEnums:[],
				likeNum:0,
				isLiked:false,
				popup:{
					content1:'',
					content2:'',
					tip1:'',
					tip2:'',
					btntext:''
				},
				payPopupIndex:-1,
				vipPopupIndex:-1,
				scrollTop:0
			};
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight;
			},
			platForm(){
				return this.$store.state.platform
			},
			mineInfo(){
				return this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))
			}
		},
		onLoad(options) {
		
			this.getConfig();
			this.id=options.id;
			this.getUserDetail();
			this.likeInit();
			this.getLikeData();
			this.getMineDetail()
		},
		mounted() {
			
			
		},
		onPageScroll(e) {
			this.topNavAlpha=e.scrollTop/250;
			this.scrollTop=e.scrollTop;
		},
		onShareAppMessage(){
			return {
				title: '糖果公园',
				path: `/pages/login/login?share=${this.userInfo.inviteCode}`,
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			moveStop(){
				return false
			},
			closePopup(){
				this.$refs.popup.close();
				
			},
			closePayPopup(){
				this.payPopupIndex=-1;
				this.$refs.paypopup.close();
			},
			closeVipPopup(){
				this.vipPopupIndex=-1;
				this.$refs.vippopup.close();
			},
			likeInit(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.isLike({
					completeUser:user,
					opte:'Fav',
					rdtn:'Do',
					uurd:this.id
				}).then(res=>{
					if(res.data.msg==='该用户已被收藏'){
						this.isLiked=true;
					}else{
						this.$api.public.isLike({
							completeUser:user,
							opte:'Fav',
							rdtn:'Cancel',
							uurd:this.id
						}).then(result=>{})
					}
				})
			},
			toService(){
				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'
				         })
				     }
				 })
			},
			likeAction(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.isLike({
					completeUser:user,
					opte:'Fav',
					rdtn:this.isLiked?'Cancel':'Do',
					uurd:this.id
				}).then(res=>{
					if(res.data.succ){
						this.isLiked=!this.isLiked;
						if(this.isLiked){
							this.likeNum++;
						}else{
							this.likeNum--;
						}
					}
				})
			},
			preview(){
				let arr=[],obj={};
				for(let i=0;i<this.pics.length;i++){
					console.log(this.pics[i])
					obj={url:'',type:'',width:'',height:''};
					if(this.pics[i].cate==='Img'){
						obj.type='image';
					}
					if(this.pics[i].cate==='Vdo'){
						obj.type='video';
						obj.width=686;
						obj.height=this.pics[i].h/(this.pics[i].w/343)*2
					}
					obj.url=this.pics[i].url;
					arr.push(obj)
				}
				console.log(arr)
				uni.previewMedia({
					sources:arr,
					current:this.currentIndex,
					showmenu:true
				})
			},
			tabClick(index){
				this.tabIndex=index;
			},
			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;
				}
			},
			getUserDetail(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				let user=JSON.parse(uni.getStorageSync('user'));
				this.userInfo=prevPage.$vm.otherInfo;
				this.pics=this.userInfo.medias;
				if(user.sex==='Male'){
					this.$api.public.seeMaleDetail({completeUser:user,jsjf:this.id}).then(()=>{})
				}else if(user.sex==='Famale'){
					this.$api.public.seeFamaleDetail({completeUser:user,pusd:this.id}).then(()=>{})
				}
				
				this.userInfo.lastActiveTime=this.$moment(new Date()).diff(this.userInfo.lastActive,'minutes');
				this.currentPic=this.userInfo.medias[0];
				if(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;
				}
				wxMapSdk.calculateDistance({
					mode:'straight',
					from:{
						latitude: this.$store.state.latitude,
						longitude: this.$store.state.longitude
					},
					to:[{
						latitude: this.userInfo.geo.lat,
						longitude: this.userInfo.geo.lon
					}],
					success:dists=>{
							this.userInfo.distance=(dists.result.elements[0].distance>1000?`${Math.floor(dists.result.elements[0].distance/100)/10}km`:`${dists.result.elements[0].distance}m`)
						
					}
				});
				if(this.userInfo.hobbies){
					let arr=[];
					this.userInfo.hobbies.forEach((item,index)=>{
						this.hobbysEnums.forEach((sitem,sindex)=>{
							if(item===sitem.key&&!arr.includes(sitem.desc)){
								arr.push(sitem.desc)
							}
						})
					})
					this.userInfo.hobbysStr=arr;
				}
				if(this.userInfo.wanteds){
					let arr=[];
					this.userInfo.wanteds.forEach((item,index)=>{
						this.hopesEnums.forEach((sitem,sindex)=>{
							if(item===sitem.key&&!arr.includes(sitem.desc)){
								arr.push(sitem.desc)
							}
						})
					})
					this.userInfo.hopesStr=arr;
				}
				// this.$api.public.userDetail({getAlbum:true,completeUser:user,uponUserId:this.id}).then(res=>{
				// 	if(res.status==='Succ'){
						
						
						
				// 	}
				// })
			},
			picItemClick(index){
				this.currentIndex=index;
				this.currentPic=this.pics[index];
				this.currentPic.height=this.currentPic.h/(this.currentPic.w/343);
				this.$nextTick(()=>{
					setTimeout(() => { uni.pageScrollTo({scrollTop: this.scrollTop, duration: 0});}, 50);
				});
			},
			getConfig(){
				this.$api.public.config({tscsj:['Hobbys','Hopes']}).then(res=>{
					this.hobbysEnums=res.data.hobbys;
					this.hopesEnums=res.data.hopes;
				}).catch(err=>{
					console.log(err)
				})
			},
			getLikeData(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.userData({
					completeUser:user,
					listType:'FavsForMe',
					page:{
						index:1,
						size:20,
						sortValues:[]
					},
					uponUserId:this.id
				}).then(res=>{
					this.likeNum=res.data;
				})
			},
			toTalk(){
				console.log(this.userInfo,this.mineInfo);
				if(this.mineInfo.sex==='Male'&&!this.mineInfo.vip){
					if(this.platForm==='ios'){
						this.vipPopupIndex=0;
						this.$refs.vippopup.open();
					}else{
						this.payPopupIndex=0;
						this.$refs.paypopup.open();
					}
					
					return;
				}
				if(this.mineInfo.sex==='Famale'&&!this.mineInfo.realMan){
					this.popup={
						content1:'认证后才能开启私聊哦',
						content2:'给客服回复关键词「真人认证」',
						tip1:'',
						tip2:'',
						btntext:'联系客服去认证'
					}
					this.$refs.popup.open();
					return;
				}
				uni.navigateTo({
					url:`/pagesSub/chatting/chatting?conversationid=C2C${this.userInfo.id}`
				})
			},
			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));//正式环境删除
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	background-color: $bgcolor1;
	position: relative;
	.topnav {
		padding: 0 10rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 100;
		backdrop-filter: blur(10px);
		.nav-item {
			width: 40rpx;
			height: 40rpx;
			margin-left: 16rpx;
			.nav-img{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
		.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;
			position: relative;
			.video-inner{
				flex-direction: column;
				height: 680rpx;
				transform: translateY(30rpx);
				position: relative;
				z-index: 10;
				.head-box{
					position: relative;
					width: 168rpx;
					height: 168rpx;
					border-radius: 72rpx;
					.head-img{
						width: 168rpx;
						height: 168rpx;
						border-radius: 72rpx;
						border: 4rpx solid #FFFFFF;
					}
					.head-active{
						width: 24rpx;
						height: 24rpx;
						border-radius: 24rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}

				.name-box{
					height: 60rpx;
					margin-top: 24rpx;
					.name{
						color:  $fontcolor5;
						height: 60rpx;
						line-height: 60rpx;
					}
				}
				.age-box{
					color: $fontcolor5;
					height: 40rpx;
					line-height: 40rpx;
				}
				.city-box{
					height: 34rpx;
					.city-pos{
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}
					.city{
						height: 34rpx;
						line-height: 34rpx;
						color: $fontcolor5;
					}
				}
				.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{
						margin-left: 16rpx;
						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;
		padding-bottom: 300rpx;
		background-color: $bgcolor1;
		transition: top .3s;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.tag-box{
			margin: 48rpx 32rpx;
			.tag{
				width: 164rpx;
				height: 96rpx;
				background-color: $bgcolor3;
				border-radius: 24rpx;
				margin-right: 10rpx;
				.tag-img{
					width: 32rpx;
					height: 32rpx;
				}
				.tag-text{
					color: $fontcolor5;
					margin-left: 4rpx;
				}
			}
		}
		.live-box{
			margin: 24rpx 32rpx 0rpx 32rpx;
			
			
			.live-inner{
				padding: 28rpx;
				background-color: $bgcolor3;
				max-width: 100%;
				border-radius: 24rpx;
				flex-wrap: wrap;
				.live-img{
					width: 32rpx;
					height: 32rpx;
					display: inline;
				}
				.live{
					padding: 2rpx 16rpx;
					color: $fontcolor5;
				}
			}
			
		}
		.desc-box{
			padding: 56rpx 48rpx 56rpx 72rpx;
			margin: 56rpx 32rpx 0rpx 32rpx;
			position: relative;
			background: linear-gradient(180deg, #1F1A30 0%, #151126 100%);
			color: $fontcolor5;
			.desc-img{
				position: absolute;
				left: 0;
				top: -40rpx;
				width: 88rpx;
				height: 88rpx;
			}
		}
		.tab-box{
			margin: 66rpx 32rpx 0rpx 32rpx;
			position: relative;
			align-items: baseline;
			min-height: 76rpx;
			.tab-item{
				width: 144rpx;
				.tab-item-text{
					height: 100%;
					line-height: 70rpx;
					position: relative;
					z-index: 1;
					color: $fontcolor3;
					transition: all 0.3s;
				}
			}
			.tab-item-bg{
				position: absolute;
				left: 0;
				bottom: 10rpx;
				width: 96rpx;
				height: 68rpx;
				padding: 0rpx 5rpx;
				z-index: 0;
				transition: all .3s;
			}
		}
		.cup-box{
			flex-wrap: wrap;
			margin: 24rpx 32rpx 0rpx 32rpx;
			.cup-item{
				height: 56rpx;
				background-color: $bgcolor4;
				border-radius: 28rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;
				padding: 0rpx 20rpx;
				.cup-img{
				}
				.cup-text{
					display: inline;
					color: $fontcolor5;
					margin-left: 8rpx;
				}
			}
		}
		.photo-album{
			margin: 56rpx 32rpx 0rpx 32rpx;
			.pa-box{
				.pa-title{
					color: $fontcolor5;
				}
				.pa-tip{
					color: $fontcolor3;
				}
			}
			.pics-box{
				width: 100%;
				border-radius: 16rpx;
				margin-top: 26rpx;
				position: relative;
				margin-bottom: 30rpx;
				overflow: hidden;
				
				.self{
					position: absolute;
					width: 72rpx;
					height: 40rpx;
					right: 24rpx;
					top: 24rpx;
					z-index: 100;
				}
				.big-pic{
					width: 100%;
					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(10rpx);
						&: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;
					}
				}
			}
			
		}
		.hopes-box{
			margin: 56rpx 32rpx;
			.title{
				color: $fontcolor5;
				margin-bottom: 12rpx;
			}
			.hopes{
				flex-wrap: wrap;
				.hopes-item{
					padding: 12rpx 20rpx;
					border-radius: 16rpx;
					color: $fontcolor3;
					background-color: $bgcolor3;
					margin-left: 20rpx;
					margin-top: 20rpx;
					&:nth-of-type(1){
						margin-left: 0rpx;
					}
				}
			}
		}
	}
	.btn-box{
		padding: 0rpx 32rpx;
		width: 100vw;
		box-sizing: border-box;
		position: fixed;
		z-index:20;
		bottom: 100rpx;
		.talk-btn{
			
			margin-right: 12rpx;
			height: 104rpx;
			background: $primary;
			border-radius: 52rpx;
		}
		.like-btn{
			margin-left: 12rpx;
			height: 104rpx;
			background: linear-gradient(133deg, #FA5C74 0%, #BC55BF 53%, #8A4FFF 100%);
			border-radius: 52rpx;
		}
		.btn-icon{
			width: 40rpx;
			height: 40rpx;
		}
		.btn-text{
			color: $fontcolor5;
			margin-left: 8rpx;
		}
	}
}
</style>