<template>
	<view class="myWrap" v-if="showLandHome" :style="{'padding-top':statusBarHeight+'rpx','background-image': 'url('+userInfo.bg_image+')'}">
		<!-- 导航栏区域 -->
		<view class="navBarWrap">
			<image @click="back" src="../../static/image/back_white.png" mode=""></image>
			<!-- <image @click="shareFlag = true" src="../../static/image/Group_365@2x.png" mode=""></image> -->
		</view>
		<!-- 地主信息区域 -->
		<view class="landItem" id="landItem">
			<view class="landInfo">
				<view class="userIcon">
					<image style="width: 130rpx;height: 130rpx;border-radius: 20rpx 0 20rpx 0;" :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="userInfo">
					<view class="userStar">
						<image v-for="(item,index) in userInfo.starList" style="width: 25rpx;height: 24rpx;margin-right: 5rpx;" src="../../static/image/xingji_2@2x.png" mode=""></image>
						<view style="display: flex;align-items: center;" v-if="userInfo.distance">
							<image style="width: 15rpx;height: 20rpx;margin: 0 5rpx 0 20rpx;" src="../../static/image/position_1@2x.png" mode=""></image>
							<text style="font-size: 20rpx;color: #fff;">{{userInfo.distance}}</text>
						</view>
					</view>
					<view class="nameAddress">
						<text style="font-size: 32rpx;">{{userInfo.nickname}}</text>
						<image v-if="userInfo.hometown == 1" style="width: 30rpx;height: 34rpx;margin-left: 10rpx;"src="../../static/image/Group_741.png" mode=""></image>
					</view>
				</view>
				<view class="followFansWrap">
					<view class="followItem">
						<view class="followTxt">
							{{userInfo.follow_num}}
						</view>
						<view class="followTxt" style="padding-top: 10rpx;">
							关注
						</view>
					</view>
					<view class="followItem">
						<view class="followTxt">
							{{userInfo.fans_num}}
						</view>
						<view class="followTxt" style="padding-top: 10rpx;">
							粉丝
						</view>
					</view>
					<view class="followItem">
						<view class="followTxt">
							{{userInfo.like_num + userInfo.collect_num}}
						</view>
						<view class="followTxt" style="padding-top: 10rpx;">
							赞/收藏
						</view>
					</view>
				</view>
			</view>
			<!-- 服务信息 -->
			<view class="serviceInfo">
				<view class="leftEmp"></view>
				<view class="service">
					<view class="serviceDesc">
						{{userInfo.bio}}
					</view>
				</view>
			</view>
			<view class="handleWrap">
				<view class="handleItem">
					<view class="handleBtn" @click="follow">
						{{userInfo.is_follow == 1 ? '取消关注' : '关注'}}
					</view>
					<view class="handleBtn" @click="showSendGift = true" v-if="plat == 'android' || (plat == 'ios' && switchTab == '1')">
						送礼物
					</view>
					<view class="handleBtn" @click="checkUserToRoom(userInfo.id)" v-if="userInfo.hometown == 0">
						发消息
					</view>
					<view v-if="userInfo.make_switch == '1' && userInfo.hometown == 1 && !loginUserInfo.landInList" @click="halfVisible = true" class="handleBtn appoint">
						<image src="../../static/image/Iconly_Light_Time_Square@2x.png" mode=""></image>
						预约
					</view>
					<view v-if="(userInfo.make_switch == '0' || loginUserInfo.landInList) && userInfo.hometown == 1" class="handleList">
						<image @click="checkUserToRoom(userInfo.id)" class="handleImg" src="../../static/image/xinxiduanxinsixinduihua-21@2x.png" mode=""></image>
						<image @click="phone(userInfo.phone != '' ? userInfo.phone : userInfo.mobile)" class="handleImg" src="../../static/image/Iconly_Bulk_Calling@2x.png" mode=""></image>
						<image @click="openLocation" class="handleImg" src="../../static/image/Iconly_Bulk_Send@2x.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>	
		<!-- 其他信息区域 -->
		<view class="otherInfoWrap" :style="{
			'height': 'calc(100vh - 350rpx - 24rpx - 88rpx - '+statusBarHeight+'rpx)',
			'background': '#fff'
		}">
			<view class="otherTabList">
				<view class="otherTabItem" :class="{active:otherTabIndex == 0}" @click="changeOtherTab(0)">
					动态
					<view class="otherTabLine" v-if="otherTabIndex == 0"></view>
				</view>
				<view class="otherTabItem" :class="{active:otherTabIndex == 1}"  @click="changeOtherTab(1)">
					赞过
					<view class="otherTabLine" v-if="otherTabIndex == 1"></view>
				</view>
				<view class="otherTabItem" :class="{active:otherTabIndex == 2}"  @click="changeOtherTab(2)">
					收藏
					<view class="otherTabLine" v-if="otherTabIndex == 2"></view>
				</view>
			</view>
			<scroll-view scroll-y @scrolltolower="scrolltolower">
				<view class="otherContent" :style="{
					height:'calc(100vh - 350rpx - 24rpx - '+statusBarHeight+'rpx - 88rpx - 88rpx)'
				}">
					<u-waterfall v-model="list" ref="uWaterfall" v-if="showList">
						<template v-slot:left="{ leftList }">
							<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
								<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
								<u-lazy-load @click="wapperLick(item)" threshold="-450" border-radius="20" :image="item.image" :index="index"></u-lazy-load>
								<view class="userInfo" :style="{height:'90rpx'}">
										  <view class="userDesc">
											  {{item.title}}
										  </view>
										  <view class="userIconLike">
											  <view class="userIcon">
												  <image :src="item.user.avatar" mode=""></image>
												  {{item.user.nickname}}
											  </view>
											  <view class="likeNum">
												  <image src="../../static/image/dianzan2.png" mode=""></image>
												   {{item.like_num}}
											  </view>
										  </view>
								</view>
								<view class="statusTxt" v-if="item.switch == '1'">
									精选 
								</view>
							</view>
						</template>
						<template v-slot:right="{ rightList }">
							<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
								<u-lazy-load @click="wapperLick(item)" threshold="-450" border-radius="20" :image="item.image" :index="index"></u-lazy-load>
								<view class="userInfo" :style="{height: '90rpx'}">
										  <view class="userDesc">
											  {{item.title}}
										  </view>
										  <view class="userIconLike">
											  <view class="userIcon">
												  <image :src="item.user.avatar" mode=""></image>
												  {{item.user.nickname}}
											  </view>
											  <view class="likeNum">
												  <image src="../../static/image/dianzan2.png" mode=""></image>
												   {{item.like_num}}
											  </view>
										  </view>
								</view>
								<view class="statusTxt" v-if="item.switch == '1'">
									精选 
								</view>
							</view>
						</template>
					</u-waterfall>
				</view>
			</scroll-view>
		</view>
		<!-- 项目列表弹框 -->
		<view class="projectListAlert" v-if="showProjectList">
			<view class="projectList">
				<view class="projectThList">
					<view class="projectItem">
						<image src="../../static/image/Group_134.png" mode=""></image>
						项目
					</view>
					<view class="projectItem">
						<image src="../../static/image/Group_135.png" mode=""></image>
						价格
					</view>
					<view class="projectDesc">
						<image src="../../static/image/Group_666.png" mode=""></image>
						介绍
					</view>
				</view>
				<scroll-view scroll-y class="projectTbList">
					<view class="projectTbItem">
						<view class="projectTb">
							<image src="../../static/image/Group_270_1.png" mode=""></image>
							<view class="projectName">加水停车</view>
						</view>
						<view class="projectTb price">
							¥{{userInfo.stop_money}}起
						</view>
						<view class="projectTbDesc">
							加水/停车：为房车补充生活用水并提供停车服务
						</view>
					</view>
					<view class="projectTbItem">
						<view class="projectTb">
							<image src="../../static/image/Group_269_1.png" mode=""></image>
							充电
						</view>
						<view class="projectTb price">
							¥{{userInfo.charge_money}}起
						</view>
						<view class="projectTbDesc">
							充电：为房车进行充电，保障旅程无忧
						</view>
					</view>
					<view class="projectTbItem" v-for="(item,index) in projectList" :key="index">
						<view class="projectTb">
							<image src="../../static/image/fuwuicon.png" mode=""></image>
							<view class="projectName" style="width: 90rpx;">{{item.name}}</view>
						</view>
						<view class="projectTb price">
							¥{{item.price}}起
						</view>
						<view class="projectTbDesc">
							{{item.describe}}
						</view>
					</view>
				</scroll-view>
				<view class="closeBtn" @click="showProjectList = false">
					<image src="../../static/image/guanbi-70_1@2x.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 送礼物弹框 -->
		<send-gift v-if="showSendGift" :toUserId="userInfo.id" @closeSendGift="showSendGift = false"></send-gift>
		<!-- 游侠付款弹框 -->
		<pay-type v-if="showPayAlert" @pay="pay" @changePayType="changePayType" :price="price" @closePayAlert="showPayAlert = false"></pay-type>
		<w-picker
			:visible.sync="halfVisible"
			:toUserInfo="userInfo"
			mode="half" 
			startYear="2017" 
			endYear="2030"
			value="2018-02-11 下午"
			:current="true"
			:themeColor="'#576b95'"
			@confirm="onConfirm($event,'half')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="half" 
		>选择预约时间</w-picker>
		<share v-if="shareFlag" @close="shareFlag = false"></share>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	import share from '@/components/share.vue'
	import sendGift from '@/components/sendGift.vue'
	import payType from '@/components/payType.vue'
	export default{
		data(){
			return{
				loginUserInfo:{},
				current_page:1,
				last_page:0,
				shareFlag:false,
				articleInfo:{
					user:{
						id:''
					}
				},
				showLandHome:false,
				halfVisible:false,//选择预约时间弹框
				showPayAlert:false,
				price:0,
				appointInfo:{},
				showList:false,
				projectList:[],//项目列表
				userInfo:{},
				param:{
					user_id:'',
					longitude:'',
					latitude:''
				},
				loginType:'land',//user：游侠；land：地主
				showSendGift:false,//展示送礼物弹框
				otherTabIndex:0,
				showProjectList:false,//展示项目列表弹框
				statusBarHeight:0,
				bottomH:0,
				topH:0,
				list: [],
				switchTab:'1',
				plat:'android'
			}
		},
		computed:{
			...mapState(["isLogin","isSDKReady"])
		},
		components:{
			sendGift,
			payType,
			share
		},
		created() {
			//获取状态栏高度
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight*2
				}
			})
		},
		onLoad(e) {
			this.$request('/common/getConfig',{type:'8'}).then((res)=>{
				this.switchTab = res.data.switch
				this.plat = plus.os.name.toLowerCase()
			})
			this.param.user_id = e.id
			if(e.id != undefined){
				this.current_page = 1
				this.last_page = 0
				this.param.page = 1
				this.list = []
			}
			uni.getLocation({
			    type: 'gcj02',
			    success: (res) => {
					this.param.longitude = res.longitude
					this.param.latitude = res.latitude
					
					
				},
				fail(err) {
					uni.showModal({
						title:'定位出错',
						content:err
					})
				}
			})
			this.getData()
		},
		methods:{
			getData(){
				//获取用户信息
				this.$request('/user/info').then((res)=>{
					this.loginUserInfo = res.data
					for(var i = 0; i < this.loginUserInfo.order_user_ids.length; i++){
						if(this.userInfo.id == this.loginUserInfo.order_user_ids[i]){
							this.loginUserInfo.landInList = true
							return
						}
					}
					this.loginUserInfo.landInList = false
					console.log('this.loginUserInfo.landInList',this.loginUserInfo)
				})
				this.$request('/user/userInfo',this.param).then((res)=>{
					this.userInfo = res.data
					console.log('this.userInfo',this.userInfo)
					let starList = []
					if(res.data.star > 0){
						for(let i = 0; i < res.data.star; i++){
							starList.push(i)
						}
						this.userInfo.starList = starList
					}
					this.showLandHome = true
				})
				
				//获取更多服务
				uni.request({
					url:this.apiUrl + '/user_project/lis',
					data:{
						user_id:this.param.user_id
					},
					method:'POST',
					success: (res) => {
						this.projectList = res.data.data
					}
				})
				this.getStoryList()
			},
			scrolltolower(){
				if(this.current_page == this.last_page){
					uni.showToast({
						title:'无更多数据',
						icon:'none'
					})
					return;
				}else{
					this.param.page++
					this.getData()
					
				}
			},
			//选择用户聊天
			checkUserToRoom(id) {
				uni.setStorageSync('toRoomType','toUserId')
				uni.setStorageSync('toUserId',id)
				// this.$store.commit('createConversationActive',id)
				this.$href('/pages/HM-chat/room')
			},
			//关注
			follow(){
				this.$request('/user_follow_log/follow',{to_user_id:this.userInfo.id}).then((res)=>{
					if(res.code == 1){
						this.$request('/user/userInfo',this.param).then((res)=>{
							let starList = []
							if(res.data.star > 0){
								for(let i = 0; i < res.data.star; i++){
									starList.push(i)
								}
								res.data.starList = starList
							}
							this.userInfo = res.data
						})
						uni.showToast({
							title:res.msg+'成功'
						})
					}
				})
			},
			//修改支付类型
			changePayType(e){
				this.appointInfo.pay_type = e
			},
			onConfirm(res,type){
				if(type == 'half'){
					this.appointInfo = res
					this.appointInfo.pay_type = 'wechat'
					this.price = res.price
					this.showPayAlert = true
				}else{
					this.param.star = res.value
					this.param.starName = res.result
					this.getData()
				}
			},
			onCancel(){
				
			},
			getStoryList(){
				if(this.otherTabIndex == 0){
					this.$request('/article/userList',this.param).then((res)=>{
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						this.list = this.list.concat(res.data.data)
						this.$store.commit('setArticleList',this.list)
						this.showList = true
					})
				}else if(this.otherTabIndex == 1){
					this.$request('/article/likeList',this.param).then((res)=>{
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						this.list = this.list.concat(res.data.data)
						this.$store.commit('setArticleList',this.list)
						this.showList = true
					})
				}else if(this.otherTabIndex == 2){
					this.$request('/article/collectList',this.param).then((res)=>{
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						this.list = this.list.concat(res.data.data)
						this.$store.commit('setArticleList',this.list)
						this.showList = true
					})
				}
			},
			pay(){
				this.payment()
			},
			async payment(){
				var orderInfo=await this.getOrderInfo();
				uni.requestPayment({
				    provider: this.appointInfo.pay_type == 'wechat' ? 'wxpay' : 'alipay',
				    orderInfo: this.appointInfo.pay_type == 'wechat' ? orderInfo.data : orderInfo.data.body, //微信、支付宝订单数据
				    success: (e) => {
						uni.showToast({
							title:'充值成功'
						})
				    },
				    fail: function (err) {
						uni.showToast({
							title:'充值失败,请联系客服人员',
							icon:'none'
						})
					}
				});
			},
			getOrderInfo(){
				return new Promise((reslove)=>{
					this.$request('/order/makeOrderPay',this.appointInfo).then((res)=>{
						reslove(res)
					})
				})
			},
			changeOtherTab(otherTabIndex){
				this.current_page = 1
				this.last_page = 0
				this.param.page = 1
				this.otherTabIndex = otherTabIndex
				this.showList = false
				this.list = []
				this.getStoryList()
			},
			wapperLick(e){
				if(e.type == '2'){
					this.$href('../findWonderful/postVideo?id='+e.id)
				}else{
					this.$href('../findWonderful/postImg?id='+e.id)
				}
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getHeight(e){
				this.topH = e.height*2
			},
			openLocation(){
				uni.openLocation({
					latitude: parseFloat(this.userInfo.latitude),
					longitude: parseFloat(this.userInfo.longitude),
					fail: (err) => {
						uni.showModal({
							title:'提示',
							content:err
						})
					}
				});
			},
			phone(phone){
				this.$request('/user/getMiddleNumber',{mobile:phone}).then((res)=>{
					if(res.code == 1){
						uni.makePhoneCall({
							phoneNumber:res.data
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$border-radius: 10px;
	.myWrap{
		width:100%;
		background-color: #35655f;
		background-repeat:repeat-y;
		background-size: 100%;
		/* 导航栏区域 */
		.navBarWrap{height: 88rpx;padding: 0 32rpx;display: flex;align-items: center;justify-content: space-between;}
		.navBarWrap image{width: 44rpx;height: 44rpx;}
		/* 地主信息区域 */
		.landItem{padding: 0 42rpx 0 32rpx;}
		.landInfo{height: 160rpx;display: flex;align-items: center;}
		.landInfo .userIcon{width: 140rpx;height: 160rpx;display: flex;justify-content: flex-end;align-items: flex-end;}
		.landInfo .userInfo{flex: 1;height: 100rpx;padding-left: 30rpx;}
		.userInfo.userActive{display: flex;justify-content: space-between;}
		.userInfo .userStar{display: flex;padding-top: 5rpx;align-items: center;}
		.userInfo .nameAddress{display: flex;color: #fff;padding-top: 10rpx;align-items: center;height:50rpx;}
		.userInfo .userServiceDesc{font-size: 22rpx;color: #fff;padding-top: 24rpx;}
		.userStar .starItem{width: 25rpx;height: 24rpx;margin-right: 9rpx;}
		.landInfo .followFansWrap{display: flex;width: 260rpx;}
		.userFollowFans{
			display: flex;width: 260rpx;padding: 20rpx 0 20rpx 130rpx;
			.followItem{
				flex: 1;font-size: 22rpx;color: #fff;
				.followTxt{text-align: center;width: 100%;}
			}
		}
		.followFansWrap .followItem{flex: 1;font-size: 22rpx;color: #fff;}
		.followItem .followTxt{text-align: center;width: 100%;}
		
		/* 服务信息 */
		.serviceInfo{display: flex;height: 120rpx;}
		.serviceInfo .leftEmp{width: 160rpx;}
		.serviceInfo .service{flex: 1;padding-left: 10rpx;}
		.service .serviceDesc{font-size: 26rpx;color: #fff;height: 75rpx;}
		.service .serviceList{padding-top: 15rpx;display: flex;justify-content: space-between;}
		.serviceList .serviceItem{width: 100rpx;color: #fff;}
		.serviceItem .serviceImg{display: flex;justify-content: center;}
		.serviceImg image{width: 44rpx;height: 44rpx;}
		.serviceItem .serviceTxt{text-align: center;padding-top: 5rpx;font-size: 22rpx;}
		.serviceInfo .rightEmp{width: 50rpx;}
		.landItem .handleWrap{height: 48rpx;padding: 0 24rpx 42rpx 84rpx;display: flex;}
		.handleWrap .handleItem{flex: 1;display: flex;justify-content: space-between;}
		.handleItem .handleBtn{width: 122rpx;height: 52rpx;border: 1rpx solid #ffffff;border-radius: 103rpx;text-align: center;line-height: 52rpx;font-size: 22rpx;color: #fff;}
		.handleBtn.appoint{background: #fff;color: #509d94;display: flex;align-items: center;justify-content: center;}
		.handleBtn image{width: 32rpx;height: 32rpx;margin-right: 5rpx;}
		.appointBtn{width: 122rpx;height: 52rpx;font-size: 22rpx;color: #fff;text-align: center;line-height: 52rpx;background: #509d94;border-radius: 102rpx;justify-content: center;align-items: center;flex-direction: row;}
		.handleItem .handleList{width: 240rpx;display: flex;}
		.handleList .handleImg{width: 48rpx;height: 48rpx;margin-left: 32rpx;}
		
		/* 其他信息区域 */
		.otherInfoWrap{border-radius: 60rpx 60rpx 0 0;}
		.otherInfoWrap .otherTabList{height: 88rpx;padding: 0 69rpx;display: flex;position: relative;}
		.otherTabList .otherTabItem{position: relative;width: 204rpx;text-align: center;line-height: 88rpx;color: #969799;font-size: 28rpx;font-weight: 600;}
		.otherTabItem.active{color: #35655f;}
		.otherTabItem .otherTabLine{position: absolute;width: 50rpx;height: 5rpx;background: #35655f;bottom: 18rpx;left: 78rpx;}
		.otherContent{padding: 0 20rpx;}
		/* 项目列表弹框 */
		.projectListAlert{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);padding: 0 32rpx;display: flex;align-items: center;}
		.projectListAlert .projectList{background: #fff;border-radius: 30rpx;}
		.projectList .projectThList{height: 112rpx;background: #35655f;border-radius: 30rpx 30rpx 0 0;display: flex;font-size: 28rpx;color: #fff;}
		.projectItem image{width: 39rpx;height: 39rpx;}
		.projectThList .projectItem{display: flex;justify-content: center;align-items: center;width: 206rpx;height: 112rpx;}
		.projectThList .projectDesc{flex: 1;display: flex;align-items: center;justify-content: center;}
		.projectDesc image{width: 39rpx;height: 39rpx;}
		.projectTbList{
			min-height: 200rpx;
			max-height: 600rpx;
		}
		.projectTbItem{display: flex;}
		.projectTbItem .projectTb{display: flex;justify-content: center;align-items: center;width: 206rpx;height: 112rpx;font-size: 28rpx;color: #646566;}
		.projectTb .projectName{width: 60rpx;}
		.projectTb.price{color: #fc432d;}
		.projectTb image{width: 48rpx;height: 48rpx;margin-right: 10rpx;}
		.projectTbItem .projectTbDesc{flex: 1;display: flex;align-items: center;font-size: 24rpx;color: #646566;}
		.projectList{
			position: relative;
			.closeBtn{
				position: absolute;
				right: 0;
				top: -80rpx;
				image{width: 48rpx;height: 48rpx;}
			}
		}
		/* 其他信息区域 */
		.otherInfoWrap{height: calc(100vh - 88rpx - 373rpx);border-radius: 60rpx 60rpx 0 0;background: #fff;}
		.otherInfoWrap .otherTabList{height: 88rpx;padding: 0 69rpx;display: flex;position: relative;}
		.otherTabList .otherTabItem{flex: 1;text-align: center;line-height: 88rpx;color: #969799;font-size: 28rpx;font-weight: 600;}
		.otherTabItem.active{color: #35655f;}
		.otherTabList .otherTabLine{position: absolute;width: 48rpx;height: 5rpx;background: #35655f;bottom: 18rpx;transition: 0.5s;}
		.otherContent{height: calc(100vh - 88rpx - 373rpx - 88rpx);padding: 0 20rpx;
			.demo-warter{
				border-radius: 8px;
				margin: 5px;
				background-color: #ffffff;
				position: relative;
				.userInfo{
					background: linear-gradient(135deg,rgba(0,0,0,0.00), rgba(0,0,0,0.60));
					border-radius: 0 0 $border-radius $border-radius;
					position:absolute;
					bottom: 0;
					width: 100%;
					.userDesc{
						font-size: 26rpx;
						color: #fff;
						padding: 0 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp:1;
						-webkit-box-orient:vertical;
						height: 45rpx;
						line-height: 45rpx;
					}
					.userIconLike{
						display: flex;
						justify-content: space-between;
						font-size: 20rpx;
						color: rgba(255,255,255,0.80);
						padding: 0 24rpx;
						.userIcon{
							display: flex;
							align-items: center;
							image{width: 38rpx;height: 38rpx;margin-right: 10rpx;border-radius: 100%;}
						}
						.likeNum{
							display: flex;
							align-items: center;
							image{width: 28rpx;height: 28rpx;margin-right: 5rpx;}
						}
					}
				}
				.statusTxt{
					width: 100rpx;
					height: 48rpx;
					background: rgba(0,53,46,0.50);
					text-align: center;
					line-height: 48rpx;
					font-size: 20rpx;
					color:#fff;
					position:absolute;
					top: 0;
					right: 0;
					border-radius: 0 $border-radius 0 0;
				}
			}
		}
	}
</style>