<template>
	<view class="content">
		<view class="top-img">
			<image v-if="nowStar.photo" :src="'https://xyb.wlkjwl.cn/'+nowStar.photo" mode="aspectFill"></image>
			<image v-else :src="'https://xyb.wlkjwl.cn/'+nowStar.head" mode="aspectFill"></image>
		</view>
		<view class="top-name">
			<view class="left-name">{{nowStar.name}}</view>
			<view class="right-swiper">
				<swiper class="swiper" :vertical="true" :circular="true" :interval="3000" :indicator-dots="false" :autoplay="true">
					<swiper-item>
						<view class="swiper-item">
							<view>
								本月获支持
								<text class="text">{{lastStar.much}}</text>
								票
							</view>
							<view class="bgv">
								本月排名第
								<text class="text">{{lastStar.rankIngNum}}</text>
								名
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<view>
								本周获支持
								<text class="text">{{nowStar.much}}</text>
								票
							</view>
							<view class="bgv">
								本周排名第
								<text class="text">{{nowStar.rankIngNum}}</text>
								名
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="top-notice">
			【公告】
			<view>陪伴是最长情的告白</view>
		</view>
		<uni-list class="my-bottom">
			<uni-list-item @click="goLuck" rightText="立即抽奖" :showArrow="false" title="抽奖" note="100%中奖" thumb="/static/supprt/chou.png" />
			<uni-list-item @click="goSign" :isabled="sign.signStateId == 2?true:false" :rightText="sign.signStateId == 2?'已签到':'立即签到'" :showArrow="false"  title="每日签到" :note="'签到时间'+sign.signDate+'连续签到'+sign.signCount+'天'" thumb="/static/supprt/qian.png" />
			<uni-list-item @click="goAdd" rightText="看视频" :showArrow="false"  title="看视频(+10票)" note="每日可看到无视频为止" thumb="/static/supprt/kan.png" />
			<uni-list-item @click="goAddPiao" rightText="立即领取" :showArrow="false"  title="日常加票" note="更多加票" thumb="/static/supprt/ri.png" />
			<!-- <button class="share" open-type="share"></button> -->
			<uni-list-item @click="confirmShare" rightText="立即分享" :showArrow="false"  title="分享助力" note="每天最多助力4次,助力成功抽奖次数+1" thumb="/static/supprt/fen.png" />
			<cell class="gcontact" @tap="goContact" bind:startmessage='startmessage' bind:completemessage="completemessage" plugid='edc6797f8b36c85af0a284dca7a99aaf'>
				<!-- <uni-list-item rightText="立即联系" :showArrow="false"  title="联系我领20票" thumb="/static/supprt/lian.png" /> -->
			</cell>
		</uni-list>
		<view @tap.stop="dingyues" class="dingyue">订阅{{nowStar.name}}排名变化，您可以通知{{dingyue}}次哦</view>
		<view>
			
		</view>
		<view class="ad-view">
			<ad unit-id="adunit-f6387bd5404467fd" ad-type="video" ad-theme="white"></ad>
		</view>
		<view class="ziyuan">
			<view class="zi-item" @tap="gohelp(item)" v-for="(item,index) in aList" :key="index">
				<view class="item-header">资源活动 剩余 
					<uni-countdown class="time" :showColon="false" :splitorColor="'#fff'" :color="'#fff'" :day="time.days" :hour="time.hours" :minute="time.minutes" :second="time.seconds"/>
					<view class="right-click">参与活动</view>
				</view>
				<view class="item-bottom">
					<view class="item-content">{{item.title}}</view>
					<view class="cu-progress round margin-top">
						<view class="bg-blue" :style="[{ width:true?percent(item.completeCount,item.personNum):''}]"></view>
						<view class="text">{{percent(item.completeCount,item.personNum)}}</view>
					</view>
					<view class="cu-progress round margin-top">
						<view class="bg-red" :style="[{ width:true?percent(item.participateCount,item.personNum):''}]"></view>
						<view class="text">{{percent(item.participateCount,item.personNum)}}</view>
					</view>
				</view>
				<view class="item-text-flex">
					<view>
						目标人数：<text>{{item.personNum}}</text>
					</view>
					<view>
						参与人数：<text>{{item.participateCount}}</text>
					</view>
					<view>
						达成人数：<text>{{item.completeCount}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="show-wrap" v-if="isLogin">
			<view class="show-model">
				<view class="title">未登录</view>
				<view class="content">请允许微信授权登录</view>
				<view class="btn-group">
					<button @tap="hideIsLogin" class="button-default">取消</button>
					<button class="button-default button-blue getUserInfo" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">确认</button>
				</view>
			</view>
			<view class="show-model-mask">
			</view>
		</view>
		<view class="lijizhichi" @tap.stop="supprtPops">
			立即支持<text v-if="shengMuch>0">{{shengMuch}}票</text>
		</view>
		
		<view class="rongyu">
			<view class="ry-tit">
				<view @tap="changeRyActive(index)" :class="index==ryActive?'active':''" v-for="(item,index) in ry" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="ry-list">
				<view class="ry-list-item" v-for="(item,index) in rylist" :key="index">
					<view>{{item.rankingNum}}</view>
					<view><image :src="item.head" mode="aspectFill"></image></view>
					<view>{{item.nick}}</view>
					<view class="ry-blue">支持{{item.much}}票</view>
				</view>
				<ad unit-id="adunit-4a4d82f89b245c92"></ad>
			</view>
		</view>
		
		<view class="vote" v-if="vote"><!-- v-if="vote" -->
			<image src="../../static/star.png" mode="aspectFit"></image>
			<view class="pop">支持<text>{{nowStar.name}}</text></view>
			<view class="my-pop">
				我要支持<input type="number" placeholder="请输入票数" v-model="tMuch">票
			</view>
			<view @tap="goSupportStar" class="my-liji">
				立即支持
			</view>
		</view>
		<view @tap.stop="hidePop" class="vote-model" v-if="vote"></view>
		<uni-popup ref="popupShare" type="share" @change="change">
			<uni-popup-share title="分享到" @select="select"></uni-popup-share>
		</uni-popup>
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
let rewardedVideoAd = null;
import { mapState,mapMutations } from 'vuex';
export default {
	components:{
		uniCountdown,
		uniList,
		uniListItem,
		uniPopupMessage,
		uniPopupDialog,
		uniPopupShare
	},
	data() {
		return {
			vote:false,
			ry:[{name:"荣誉周榜"},{name:"荣誉月榜"}],
			ryActive:0,
			id:'',
			nowStar:'',//本周
			lastStar:'',//本月
			honList:'',
			shengMuch:0,
			tMuch:0,
			dingyue:0,
			isLogin:false,
			dataList:[
				{rightText:"立即抽奖","title":"抽奖","note":"100%中奖","thumb":"/static/supprt/chou.png","ev":'goLuck'},
				{rightText:"立即签到","title":"每日签到","note":"连续签到一天 + 50票","thumb":"/static/supprt/qian.png",'ev':'goSign'},
				{rightText:"看视频","title":"看视频(+10票)","note":"每日可看到无视频为止","thumb":"/static/supprt/kan.png",'ev':'goAdd'},
				{rightText:"立即领取","title":"日常加票","note":"更多加票","thumb":"/static/supprt/ri.png",'ev':'goRecire'},
				{rightText:"立即分享","title":"分享助力","note":"每天最多助力4次","thumb":"/static/supprt/fen.png",'ev':'goShare'},
				{rightText:"立即联系","title":"联系我领20票","thumb":"/static/supprt/lian.png",'ev':'goContact'},
			],
			sign:'',
			rylist:'',
			aList:'',
			cid:'',
			time:'',
			yaoQingMa:'',
			argeList:[
				{name:"+66票",number:66,text:"冲榜",rmb:2},
				{name:"+330票",number:330,text:"冲榜",rmb:10},
				{name:"+1800票",number:1800,text:"冲榜",rmb:50},
				{name:"+3344票",number:3344,text:"冲榜",rmb:88},
				{name:"+7788票",number:7788,text:"冲榜",rmb:188},
				{name:"+13140票",number:13140,text:"冲榜",rmb:288},
				{name:"+24000票",number:24000,text:"冲榜",rmb:520},
				{name:"+42000票",number:42000,text:"获取",rmb:888},
				{name:"+66666票",number:66666,text:"冲榜",rmb:1314},
			]
		};
	},
	onLoad(opt) {
		if(this.hasLogin){
			this.id = opt.id;
			this.getStarInfo();
			this.getSign();
			this.getHonour(this.id,(this.ryActive + 1))
			this.getActiveList();
			if(opt.cid){
				this.cid = opt.cid;
				this.updateCid(this.cid)
			}
		}else{
			this.isLogin = true;
		}
		this.loadgoAdd();
	},
	computed: {
		...mapState(['hasLogin','userInfo'])
	},
	onShareAppMessage(){
		let userInfo = uni.getStorageSync('userInfo') || '';
		let imgSrc = '';
		if(this.nowStar.photo){
			imgSrc = 'https://xyb.wlkjwl.cn/'+this.nowStar.photo
		}else{
			imgSrc = 'https://xyb.wlkjwl.cn/'+this.nowStar.head
		}
		if(userInfo.token){
			return {
				title:`给${this.nowStar.name}一起来打榜`,
				path:"/pages/support/support?cid="+userInfo.token+'&id='+this.id,
				imageUrl:imgSrc
			}
		}
	},
	onShow() {
		if(this.hasLogin){
			this.getUserInfo();
		}
	},
	methods:{
		...mapMutations(['login']),
		init(){
			this.getStarInfo();
			this.getSign();
			this.getHonour(this.id,(this.ryActive + 1))
			this.getActiveList();
		},
		confirmShare() {
			this.$refs.popupShare.open()
		},
		select(e, done) {
			uni.showModal({
			    title: '分享到群或者好友',
			    content: `将邀请码 ${this.yaoQingMa} 发送到群或者好友，如果有人复制你的邀请码并且进入明星权力榜小程序，那么你和他都将获得次数奖励！`,
			    success: (res)=> {
			        if (res.confirm) {
			            console.log('用户点击确定');
						uni.setClipboardData({
						    data: '复制我的邀请码'+this.yaoQingMa+'进入：明星权力榜，您可获得20票，为偶像 '+this.nowStar.name+' 提升排名！目前 '+this.nowStar.name+' 已获得 '+this.nowStar.much+' 次支持，排名第'+this.nowStar.rankIngNum,
						    success: function () {
						        console.log('success');
						    }
						});
						// 复制我的邀请码 qbb99631进入：星榜团APP，您可获得10票，为偶像许佳琪提升排名！目前许佳琪已获得50210次支持，排名第27
						
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
			// uni.showToast({
			// 	title: `您选择了第${e.index+1}项：${e.item.text}`,
			// 	icon: 'none'
			// })
			// done()
		},
		change(e) {
			console.log('popup ' + e.type + ' 状态', e.show)
		},
		dingyues(){
			let that = this;
			uni.requestSubscribeMessage({
			  tmplIds: ['3zrZxU3CYZYLWw3fGObzfw13jHbXYXUUQRTlJpvpPuw'],
			  success (res) {
				  console.log(res)
				  that.request({
				  	url:that.path+'/api/xyb/star/customerInfoAddDingyue',
				  	success:(res)=>{
				  		let d = res.data;
				  		if(d.code == 0){
				  			uni.showToast({
				  				title:'订阅成功！',
				  				icon:'none',
								success() {
									that.getUserInfo();
								}
				  			})
				  		}
				  	}
				  })
			  }
			})
		},
		goContact(){
			if(this.hasLogin){
				let userInfo = uni.getStorageSync('userInfo')
				this.request({
					url:this.path+'/api/xyb/wechat/sendTongyiMessage',
					data:{
						openid:userInfo.token
					},
					success:(res)=>{
						let d = res.data;
						console.log(d)
						if(d.code == 0){
							uni.showModal({
								title:'已经给你微信发送了一条服务消息，接受邀请后即可联系我！'
							})
						}
					}
				})
			}else{
				this.isLogin = true;
			}
		},
		changeTimeList(shijiancha){
			var days = Math.floor(shijiancha / 60 / 60 / 24);
			var daysRound = Math.floor(days);
			var hours = Math.floor(shijiancha / 60 / 60 - (24 * daysRound));
			var hoursRound = Math.floor(hours);
			var minutes = Math.floor(shijiancha /60 - (24 * 60 * daysRound) - (60 * hoursRound));
			var minutesRound = Math.floor(minutes);
			var seconds = Math.floor(shijiancha - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound));
			return {
				days:days,
				hours:hours,
				minutes:minutes,
				seconds:seconds
			}
		},
		updateCid(cid){
			if(this.hasLogin){
				this.updateRequest(cid)
			}else{
				this.isLogin = true;
			}
		},
		updateRequest(cid){
			this.request({
				url:this.path+'/api/xyb/star/customerInfoUpdate',
				data:{
					customerId:cid,
					type:1,
				},
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						console.log("助力成功")
						// this.getUserInfo();
					}
				}
			})
			this.request({
				url:this.path + "/api/xyb/star/getMuch",
				data:{
					typeId: 5,
					much: 20
				},
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						uni.showModal({
						    title: '恭喜',
						    content: '领取到来自好友 赠送的20票',
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
				}
			})
		},
		wxGetUserInfo(){
			//api/xyb/wechat/wxLogin
			let that = this;
			uni.showLoading({
			    title: '加载中'
			});
			uni.login({
				provider: 'weixin',
				success: loginRes => {//获取用户code
					// if(!that.hasLogin){
						//授权获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								that.request({
									url: that.path + '/api/xyb/wechat/wxLogin',
									data: {
										code: loginRes.code,
										sex:infoRes.userInfo.gender,
										head:infoRes.userInfo.avatarUrl,
										nick:infoRes.userInfo.nickName,
										encryptedData:infoRes.encryptedData,
										iv:infoRes.iv
									},
									success: function(res) {
										let d = res.data;
										if(d.code == 0){
											uni.hideLoading()
											infoRes.userInfo.token = d.data.openid;
											that.login(infoRes.userInfo)
											that.hideIsLogin();
											that.init();
											if(that.cid){
												this.updateRequest(that.cid)
											}
										}
									}
								});
								
							}
						});
						
					// }
				}
			});
		},
		hideIsLogin(){
			this.isLogin = false;
		},
		percent(a,b){
			return (a/b*100).toFixed(2)+'%'
		},
		getActiveList(){
			this.request({
				url:this.path+'/api/xyb/star/activeList',
				data:{
					starId:this.id
				},
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						this.aList = d.data.list;
						this.time = this.changeTimeList(d.data.timeDiff/1000)
					}
				}
			})
		},
		changeRyActive(index){
			this.ryActive = index;
			this.getHonour(this.id,(this.ryActive + 1))
		},
		//投票
		goSupportStar(){
			this.request({
				url:this.path+'/api/xyb/star/giveMuch',
				data:{
					starId:this.id,
					much:this.tMuch
				},
				success:(res)=>{
					let d = res.data;
					console.log(d)
					if(d.code == 0){
						uni.showToast({
							title:"投票成功",
							icon:"none"
						})
						this.hidePop();
						this.getUserInfo();
					}
				}
			})
		},
		//展示投票弹窗
		supprtPops(){
			if(this.shengMuch>0){
				this.tMuch = this.shengMuch;
				this.vote = true;
			}else{
				uni.showToast({
					title:"票数不足！",
					icon:"none"
				})
			}
		},
		hidePop(){
			this.vote = false;
		},
		//获取荣耀周榜
		getHonour(id,typeId){
			this.request({
				url:this.path+'/api/xyb/star/honorRankingList',
				data:{
					id:id,
					typeId:typeId
				},
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						this.rylist = d.rows;
					}
				}
			})
		},
		//获取用户信息
		getUserInfo(){
			this.request({
				url:this.path+'/api/xyb/star/customerInfo',
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						this.shengMuch = d.data.much
						this.dingyue = d.data.dingyueNum?d.data.dingyueNum:0
						this.yaoQingMa = d.data.yaoqingma;
					}
				}
			})
		},
		//获取明星信息
		getStarInfo(){
			this.request({
				url:this.path+'/api/xyb/banner/weekRankingList',
				data:{
					id:this.id,
					typeId:1,
					pageSize:10,
					pageNum:1
				},
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						this.nowStar = d.rows[0];
						uni.setNavigationBarTitle({
						    title: this.nowStar.name
						});
					}
				}
			})
			this.request({
				url:this.path+'/api/xyb/banner/monthRankingList',
				data:{
					id:this.id,
					typeId:1,
					pageSize:10,
					pageNum:1
				},
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						this.lastStar = d.rows[0];
					}
				}
			})
		},
		//签到
		goSign(){
			this.request({
				url:this.path+'/api/xyb/star/getMuch',
				data:{
					typeId:2,
					much:10
				},
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						this.getSign();
						this.getUserInfo();
					}
				}
			})
		},
		//获取签到状态
		getSign(){
			this.request({
				url:this.path+'/api/xyb/star/taskList',
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						this.sign = d.rows[1];
						this.dataList.rightText = this.sign.wayName;
					}
				}
			})
		},
		goLuck(){
			uni.navigateTo({
				url:'../luckdraw/luckdraw?id='+this.id
			})
		},
		//看视频加票
		addPiaoSeeVideo(num){
			this.request({
				url:this.path+'/api/xyb/star/getMuch',
				data:{
					typeId:3,
					much:num
				},
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						uni.showToast({
							title:'看视频奖励10票！',
							icon:"none"
						})
						this.getUserInfo();
					}
				}
			})
		},
		//展示激励视频
		goAdd(){
			rewardedVideoAd.show()
			.catch(() => {
			    rewardedVideoAd.load()
			    .then(() => rewardedVideoAd.show())
			    .catch(err => {
					uni.showToast({
						title:"暂无广告",
						icon:"none"
					})
			      console.log('激励视频 广告显示失败')
			    })
			})
		},
		loadgoAdd(){
			let that = this;
			if (uni.createRewardedVideoAd) {
				rewardedVideoAd = uni.createRewardedVideoAd({ adUnitId: 'adunit-5b9478bd6d85c51f' });
				rewardedVideoAd.onLoad(() => {
				  console.log('激励视频 广告加载成功')
				})
				rewardedVideoAd.onError(err => {
				  console.log(err)
				})
				rewardedVideoAd.onClose(res => {
				    // 用户点击了【关闭广告】按钮
				    // 小于 2.1.0 的基础库版本，res 是一个 undefined
					// rewardedVideoAd.offClose()
					console.log(res)
				    if (res && res.isEnded || res === undefined) {
				      // 正常播放结束，可以下发游戏奖励
					  that.addPiaoSeeVideo(10)
				    }
				    else {
				        // 播放中途退出，不下发游戏奖励
						
				    }
				})
			}
		},
		goAddPiao(){
			uni.navigateTo({
				url:'/pages/addpiao/addpiao'
			})
		},
		gohelp(item){
			uni.navigateTo({
				url:'/pages/help/help?id='+item.id+'&starId='+this.nowStar.id
			})
		}
	}
};
</script>

<style scoped lang="scss">

.vote-model{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9998;
	background-color: rgba(0,0,0,0.3);
}
.show-wrap{
		border-radius: 10rpx;
		.show-model-mask{
			width: 100vw;
			height: 100vh;
			z-index: 10;
			background-color: rgba(0,0,0,0.3);
			position: fixed;
			top: 0;
			left: 0;
		}
		.show-model{
			z-index: 11;
			position: fixed;
			top: 50%;
			left: 50%;
			width: 80vw;
			height: auto;
			margin: -40vw;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.title{
				background-color: #4A67D6;
				color: #FFFFFF;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
			}
			.content{
				background-color: #FFFFFF;
				font-size: 26rpx;
				padding: 15rpx 15rpx 25rpx;
				box-sizing: border-box;
				text-align: center;
				.text-item{
					margin-top: 10rpx;
					text-align: left;
					color: rgba(0,0,0,0.8);
					
				}
			}
			.btn-group{
				display: flex;
				align-items: center;
				text-align: center;
				box-shadow: 0 -4rpx 4rpx #F2F2F2;
				padding: 0 30rpx;
				.button-blue{
					color: #4A67D6;
				}
				.button-default{
					background-color: #FFFFFF;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					padding: 0 30rpx;
					font-size: 28rpx;
					flex: 1;
				}
				button{
					width: auto;
					height: auto;
					border: none;
					padding: 0;
					margin: 0;
					border-radius: 0;
					line-height: inherit;
					background-color: #FFFFFF;
					display: inline-block;
				}
				button::after{display: none;}
				button + button{
					border-left: 1px solid #F2F2F2;
				}
			}
		}
	}
.vote{
	position: fixed;
	width: 80vw;
	height: 400rpx;
	margin-top: -200rpx;
	border-radius: 30rpx;
	background-color: #FFFFFF;
	top: 50%;
	left: 10%;
	z-index: 9999;
	text-align: center;
	.pop{
		position: relative;
		top: -80rpx;
		margin-bottom: 30rpx;
		text{
			color: #FF488D;
		}
	}
	.my-liji{
		//FF7E62 FF498D
		width: 400rpx;
		margin: 0 auto;
		height: 68rpx;
		position: relative;
		top: -30rpx;
		line-height: 68rpx;
		text-align: center;
		border-radius: 50rpx;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #FF7E62 , #FF498D);
	}
	.my-pop{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: -80rpx;
		font-size: 26rpx;
		input{
			background-color: #FFEFF5;
			color: #FF488D;
			height: 60rpx;
			line-height: 60rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			margin: 0 15rpx;
			width: 200rpx;
			border-radius: 10rpx;
		}
	}
	&>image{
		width: 180rpx;
		height: 180rpx;
		position: relative;
		margin: 0 auto;
		top: -80rpx;
		left: 20rpx;
	}
}
.ry-blue{
	color: #4A67D6;
}
.ry-list-item{
	display: flex;
	// justify-content: space-around;
	align-items: center;
	font-size: 28rpx;
	padding-bottom: 15rpx;
	view{
		flex: 3;
	}
	view:nth-child(1){
		flex: 1;
		text-align: center;
	}
	view:nth-child(2){
		min-width: 100rpx;
		flex: 0;
		margin-right: 50rpx;
	}
	// view:nth-child(4){
	// 	flex: 3;
	// }
}
.ry-list-item:not(:last-child){
	border-bottom: 1px solid #F2F2F2;
	margin: 15rpx 0;
}
.ry-list-item image{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
.rongyu{
	padding-bottom: 150rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
}
.ry-list{
	padding: 30rpx;
	box-shadow: 0 10rpx 10rpx rgba(0,0,0,0.3);
	border-radius: 10rpx;
}
.ry-tit{
	display: flex;
}
.ry-tit view{
	flex: 1;
	padding: 10rpx;
	text-align: center;
	box-sizing: border-box;
	border-bottom: 2px solid grey;
	font-size: 32rpx;
}
.ry-tit view.active{
	border-color: #4A67D6;
	color: #4A67D6;
}
.lijizhichi{
	position: fixed;
	bottom: 30rpx;
	margin: 0 auto;
	left: calc(50vw - 250rpx);
	width: 500rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 32rpx;
	font-weight: 700;
	border-radius: 50rpx;
	text-align: center;
	background-color: #FF488D;
	color: #FFFFFF;
	z-index: 999;
}
.item-text-flex{
	display: flex;
	font-size: 24rpx;
	justify-content: left;
	padding: 30rpx;
	view:nth-child(1){
		color: grey;
	}
	view:nth-child(2){
		color: #5680E6;
		margin: 0 30rpx;
	}
	view:nth-child(3){
		color: #EB0909;
	}
}
.item-bottom{
	padding:30rpx 30rpx 0;
	.item-content{
		font-size: 32rpx;
		font-weight: 700;
	}
}
.item-header{
	display: flex;
	background-color: #5680E6;
	color: #FFFFFF;
	font-size: 24rpx;
	height: 80rpx;
	line-height: 80rpx;
	padding-left: 30rpx;
	position: relative;
	.right-click{
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		background-color: rgba(0,0,0,0.3);
		position: absolute;
		right: 30rpx;
		top: 16rpx;
		padding: 0 16rpx;
		border-radius: 30rpx;
	}
	.time{
		margin-top: 15rpx;
		margin-left: 20rpx;
	}
}
.bg-red {
	background-color: #e54d42;
	color: #ffffff;
}
.bg-blue{
	background-color: #4CD964;
	color: #FFFFFF;
}
.cu-progress {
	overflow: hidden;
	height: 28upx;
	background-color: #ebeef5;
	display: inline-flex;
	align-items: center;
	width: 100%;
	position: relative;
	.text{
		position: absolute;
		top: 0;
		left: 0;
	}
}

.cu-progress+view,
.cu-progress+text {
	line-height: 1;
}

.cu-progress.xs {
	height: 10upx;
}

.cu-progress.sm {
	height: 20upx;
}

.cu-progress view {
	
	height: 100%;
	align-items: center;
	display: flex;
	justify-items: flex-end;
	justify-content: space-around;
	font-size: 20upx;
	color: #ffffff;
	transition: width 0.6s ease;
}

.cu-progress text {
	align-items: center;
	display: flex;
	font-size: 20upx;
	color: #333333;
	text-indent: 10upx;
}

.cu-progress.text-progress {
	padding-right: 60upx;
}

.cu-progress.striped view {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-size: 72upx 72upx;
}

.cu-progress.active view {
	animation: progress-stripes 2s linear infinite;
}

@keyframes progress-stripes {
	from {
		background-position: 72upx 0;
	}

	to {
		background-position: 0 0;
	}
}
.content {
	.ad-view{
		padding: 0 30rpx;
		z-index: 1;
	}
	.ziyuan{
		border-radius: 10rpx;
		padding: 30rpx;
		
		.zi-item{
			box-shadow: 0 0 5rpx 5rpx #5680E6;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
		
	}
	.dingyue{
		padding: 0 30rpx;
		background-color: #5680E6;
		margin: 30rpx;
		font-size: 28rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		border-radius: 30rpx;
	}
	.my-bottom{
		margin-top: 30rpx;
		.share{
			padding: 0;
			margin: 0;
			border: none;
			background-color: transparent;
			line-height: initial;
			text-align: left;
		}
		.cell--nickname {
			font-size: 14px!important;
		}
		.gcontact{
			padding: 0 56rpx 0 30rpx;
			font-size: 14px;
		}
	}

	.top-notice {
		display: flex;
		font-size: 24rpx;
		padding: 20rpx;
		margin: 0 30rpx 10rpx;
		border-radius: 10rpx;
		color: #5680E6;
		view {
			color: #333333;
		}
		box-shadow: 0 0 10rpx #efdccd;
	}
	.top-img {
		background-image: linear-gradient(#5680E6,#ffffff);
		overflow: hidden;
		padding: 30rpx;
		image {
			width: 100%;
			border-radius: 10rpx;
			height: 360rpx;
			overflow: hidden;
			float: left;
		}
	}
	.top-name {
		display: flex;
		padding:0 30rpx 20rpx;
		.left-name {
			font-weight: 700;
			font-size: 40rpx;
			line-height: 100rpx;
		}
		.right-swiper {
			flex: 1;
			.swiper {
				width: 100%;
				height: 100rpx;
				.swiper-item {
					padding-left: 30rpx;
					text-align: right;
					font-size: 28rpx;
					color: #5680E6;	
					letter-spacing: 2rpx;
					word-spacing: 2rpx;
					text{
						font-size: 32rpx;
						font-weight: 700;
						color: #DD524D;
						margin: 0 20rpx;
					}
					.bgv{
						margin-left: 50rpx;
					}
				}
			}
		}
	}
}
</style>
