<template>
	<view v-if="!loding">
		<!-- 专属客服弹出 start -->
		<view class="customerBack" v-if="customer.customerShow"></view>
		<view class="customerCont" v-if="customer.customerShow">
			<image class="customerCont-code" :src="customer.customerCode" mode="aspectFill"></image>
			<view class="customerCont-text">
				扫描上方微信二维码，添加您的专属VIP客服
			</view>
			<image class="customerClose" src="/static/user/user-customer-close.png" mode="aspectFill"
				@click="custEject"></image>
		</view>
		<!-- 专属客服弹出 end -->
		<!-- 消息列表弹出 start -->
		<view class="newBack" v-if="newState"></view>
		<view class="newCont" v-if="newState">
			<view class="newCont-title">
				<view class="newCont-title-text">{{newList[newPopIndex].title}}</view>
			</view>
			<view class="newCont-text">
				<rich-text :nodes="newList[newPopIndex].content"></rich-text>
			</view>
			<view class="newCont-btn" v-if="!newnextShow" @click="newNext()">
				下一条
			</view>
			<image class="newCont-close" src="/static/user/order-cancelPay.png" mode="aspectFill" @click="newEject()">
			</image>
		</view>
		<!-- 消息列表弹出 end -->
		<!-- ios安全区 -->
		<view class="ios-top"></view>
		<!-- header -->
		<view class="header">
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="user-portrait">
					<image class="user-portrait-head"
						:src="userData.avatar ? userData.avatar : '/static/user/user-portrait.png'" mode="aspectFill">
					</image>
				</view>
				<view class="user-head">
					<view class="user-name">
						{{userData.nickname}}
						<image v-if="userData.identity" class="user-name-identity" :src="userData.identity.cover">
						</image>
					</view>
					<view class="user-status">
						邀请码：{{userData.invite}}
						<view class="user-status-copy" @click="copyCenter(userData.invite)">
							<text>复制</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 会员卡 -->
			<view class="userVip" :class="{ animated: animatedShow }">
				<view class="userVip-top">
					<view class="userVip-top-name" v-if="userIdentity.right">
						{{ userData.identity.id == 1 ? '开通' + userIdentity.right.name : '到期时间：' + userIdentity.times.ended_at}}
					</view>
					<view class="userVip-top-btn" v-if="userData.identity.id != 5"
						@click="openVip(userIdentity.right.identity_id)">
						{{ userData.identity.id == 1 ? '去开通' : '去升级'}}
						<image class="userVip-top-arrow" src="/static/user/userVip_arrow.png"></image>
					</view>
					<view class="userVip-top-btn" v-else>
						已达成满级
					</view>
				</view>
				<!-- 已认证后显示 -->
				<view class="userVip-rights">
					<view class="userVip-rightst-title">
						<view class="userVip-rightst-title-name">查看会员专属权益</view>
						<!-- <view class="userVip-rightst-more"	@click="$Router.push({name: 'vipIndex', params:{identity_id: userIdentity.right.identity_id}})">
							全部更多 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png">
							</image>
						</view> -->
						<view class="userVip-rightst-more"	@click="openVip(userIdentity.right.identity_id)">
							全部更多 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png">
							</image>
						</view>
					</view>
					<view class="userVip-rightst-list" v-if="userIdentity.right">
						<view v-for="(item, index) in userIdentity.right.rights" :key="index"
							class="userVip-rightst-label">
							<block v-if="index <= 3">
								<image class="userVip-rightst-img" :src="item.cover"></image>
								<view class="nowrap userVip-rightst-name">{{item.name}}</view>
							</block>
						</view>
						<view class="userVip-rightst-label">
							<image class="userVip-rightst-img" src="/static/user/userRightst_icon_more.png"></image>
							<view class="nowrap userVip-rightst-name">敬请期待</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- mian -->
		<view class="mian" :class="{'shoeCard': shoeCardType}">
			<!-- 消息中心  -->
			<view class="userNew">
				<image class="userNew-icon" src="/static/user/userNew_icon.png"></image>
				<swiper class="userNew-banner" disable-touch circular autoplay interval="3000" vertical>
					<swiper-item class="ellipsis" v-for="(item, index) in newList" :key="index"
						@click="newEject(index)">
						{{item.title}}
					</swiper-item>
				</swiper>
			</view>
			<!-- 我的资产 -->
			<view class="userAssets">
				<view class="userAssets-top">
					<view class="withdraw-name" v-if="userData.account">
						当前通证价值<view class="withdraw-number">￥{{userData.account.stone_value || 0}}</view>
					</view>
					<view class="withdraw-btn" @click="$Router.push({name: 'Extract'})">
						去提现
					</view>
				</view>
				<view class="userAssets-show">
					<view class="assets-title">
						我的资产
					</view>
					<view class="assets-list" v-if="userData.account">
						<view class="assets-label" @click="$Router.push({name:'walletProperty'})">
							<view class="assets-label-name">通证钱包
								<image @click.stop="showHelp('wallet')" class="assets-label-icon"
									src="/static/user/userAssets_tips.png" />
							</view>
							<view class="assets-label-number">{{userData.account.stone || 0}}</view>
						</view>
						<view class="assets-label" @click="$Router.push({name:'walletRedProperty'})">
							<view class="assets-label-name">现金红包
								<image @click.stop="showHelp('wallet')" class="assets-label-icon"
									src="/static/user/userAssets_tips.png" />
							</view>
							<view class="assets-label-number">{{userData.account.cash || 0}}</view>
						</view>
						<view class="assets-label" @click="$Router.push({name:'Fragment'})">
							<view class="assets-label-name">积分
								<image @click.stop="showHelp('chip')" class="assets-label-icon"
									src="/static/user/userAssets_tips.png" />
							</view>
							<view class="assets-label-number">{{userData.account.score || 0}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 我的伙伴 -->
			<view class="userPartner">
				<view class="partner-title">
					我的伙伴
				</view>
				<view class="partner-list" v-if="userData.relation_count">
					<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:''}})">
						<view class="partner-label-name">伙伴总数</view>
						<view class="partner-label-number">{{userData.relation_count.all || 0}}</view>
					</view>
					<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:1}})">
						<view class="partner-label-name">直接伙伴</view>
						<view class="partner-label-number">{{userData.relation_count.one || 0}}</view>
					</view>
					<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:2}})">
						<view class="partner-label-name">间接伙伴</view>
						<view class="partner-label-number">{{userData.relation_count.two || 0}}</view>
					</view>
				</view>
			</view>
			<!-- 企业工具 -->
			<view class="userPartner" v-if="userData.is_company">
				<view class="partner-title">
					企业工具
				</view>
				<view class="tool-list">
					<view class="tool-label" @click="$Router.push({name: 'goodsManagement'})">
						<image class="tool-label-img" src="/static/user/userTool-00.png" mode=""></image>
						<view class="tool-label-name">商品权证</view>
					</view>
					<view class="tool-label" @click="$Router.push({name: 'couponsManagement'})">
						<image class="tool-label-img" src="/static/user/userTool-01.png" mode=""></image>
						<view class="tool-label-name">优惠券管理</view>
					</view>
					<view class="tool-label" @click="$Router.push({name: 'instrumentSpread'})">
						<image class="tool-label-img" src="/static/user/userTool-02.png" mode=""></image>
						<view class="tool-label-name">营销推广码</view>
					</view>
					<view class="tool-label" @click="$Router.push({name: 'instrumentBasics'})">
						<image class="tool-label-img" src="/static/user/userTool-03.png" mode=""></image>
						<view class="tool-label-name">基础信息</view>
					</view>
					<view class="tool-label" @click="$Router.push({name: 'shopLists'})">
						<image class="tool-label-img" src="/static/user/userTool-04.png" mode=""></image>
						<view class="tool-label-name">门店管理</view>
					</view>
					<view class="tool-label" @click="$Router.push({name: 'employeesList'})">
						<image class="tool-label-img" src="/static/user/userTool-05.png" mode=""></image>
						<view class="tool-label-name">员工管理</view>
					</view>
					<view class="tool-label" @click="$Router.push({name: 'verificationIndex'})">
						<image class="tool-label-img" src="/static/user/userTool-05.png" mode=""></image>
						<view class="tool-label-name">扫码核销</view>
					</view>
				</view>
			</view>
			<!-- 我的服务 -->
			<view class="userPartner">
				<view class="partner-title">
					我的服务
				</view>
				<view class="tool-list">
					<view class="tool-label" @click="custEject">
						<image class="tool-label-img" src="/static/user/userServe-00.png" mode=""></image>
						<view class="tool-label-name">专属客服</view>
					</view>
					<view class="tool-label" @click="$Router.push({name: 'userCode'})">
						<image class="tool-label-img" src="/static/user/userServe-01.png" mode=""></image>
						<view class="tool-label-name">邀请好友</view>
					</view>
					<view class="tool-label" @click="$Router.push({name: 'userHelp'})">
						<image class="tool-label-img" src="/static/user/userServe-02.png" mode=""></image>
						<view class="tool-label-name">帮助中心</view>
					</view>
					<view class="tool-label" @click="$Router.push({name: 'userClause'})">
						<image class="tool-label-img" src="/static/user/userServe-03.png" mode=""></image>
						<view class="tool-label-name">服务条款</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userIndex,
		userNotice,
		userCustomer
	} from '@/apis/interfaces/user'
	import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy'
	export default {
		data() {
			return {
				loding: true, // 加载
				userData: '', // 用户信息
				userIdentity: '', // 用户身份
				helpDoc: '', // 资产说明
				classStyle: false, // 下拉vip时改变样式
				animatedShow: false, // vip上下跳动效果
				newList: [],
				newState: false, // 消息 显示状态
				newnextShow: false, // 消息 下一条按钮状态
				newPopIndex: '', // 消息列表选择index
				customer: {
					customerShow: false, // 专属客服弹出
					customerCode: '', // 专属客服二维码
				},
				shoeCardType: false
			}
		},
		onShow() {
			// 添加vip模块跳动样式
			this.animatedShow = true

			// 获取用户信息
			this.userInfo();

			// 获取专属客服二维码
			this.customerInfo();

			// 获取公告列表
			this.newInfo();
		},
		onHide() {
			// 移除vip模块跳动样式
			this.animatedShow = false
		},
		onPageScroll(e) {
			if (e.scrollTop <= -60 && !this.shoeCardType) {
				this.shoeCardType = true
				return
			}
			if (e.scrollTop >= 1 && this.shoeCardType) {
				this.shoeCardType = false
			}
		},
		onNavigationBarButtonTap(e){
			switch(e.index){
				case 0:
					this.$Router.push({name: 'news'})
					break
				case 1:
					this.$Router.push({name: 'setting'})
					break
			}
		},
		methods: {
			// 开通VIP
			openVip(identityId) {
				if (!this.userData.certification) {
					uni.showModal({
						title: '提示',
						content: '为了保障您的用户权益，未个人认证无法开通节点',
						cancelColor: '#555',
						cancelText: '稍后开通',
						confirmColor: '#8b64fd',
						confirmText: '去认证',
						success: res => {
							if (res.confirm) {
								this.$Router.push({
									name: 'Personal'
								})
							}
						}
					})
					return
				}
				this.$Router.push({
					name: 'vipIndex',
					params: {
						identity_id: identityId
					}
				})
			},
			// 用户信息
			userInfo() {
				// 读取配置信息
				userIndex().then(res => {
					res.account = {
						stone: res.stone,
						stone_value: res.stone_value,
						...res.account
					}
					this.userData = res
					this.helpDoc = res.help_doc
					this.userIdentity = res.identityShow
					this.loding = false
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 公告列表
			newInfo() {
				userNotice().then(res => {
					this.newList = res
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 专属客服二维码
			customerInfo() {
				userCustomer().then(res => {
					this.customer.customerCode = res.code
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 专属客服弹出
			custEject() {
				this.customer.customerShow = !this.customer.customerShow
			},
			// 复制邀请码
			copyCenter(e) {
				let copyNo = e
				uni.setClipboardData({
					data: copyNo,
					success() {
						uni.showToast({
							title: '邀请码已复制',
							icon: 'none'
						})
					}
				})
			},
			// 友情提示信息
			showHelp(type) {
				let title = '通证',
					content = this.helpDoc.energy_ball.description
				if (type == 'chip') title = '积分'
				if (type == 'chip') content = this.helpDoc.energy_shard.description
				uni.showModal({
					title: title,
					confirmColor: '#8b64fd',
					content: content,
					showCancel: false
				})
			},
			// 消息列表查看
			newEject(index) {
				this.newPopIndex = index
				this.newState = !this.newState
				if (index === this.newList.length - 1) {
					this.newnextShow = true
				} else {
					this.newnextShow = false
				}
			},

			// 消息列表 -下一条
			newNext() {
				this.newPopIndex = this.newPopIndex + 1
				if (this.newPopIndex === this.newList.length - 1) {
					this.newnextShow = true
				} else {
					this.newnextShow = false
				}
			}
		}
	};
</script>

<style lang="scss">
	.content-scroll {
		height: calc(100vh - 60px);
	}

	// 专属客服
	.customerBack {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 1001;
		background: rgba($color: #000000, $alpha: .5);
	}

	.customerCont {
		position: fixed;
		padding: $padding 0;
		box-sizing: border-box;
		background-color: $uni-bg-color;
		border-radius: $radius;
		left: 21%;
		right: 21%;
		top: 30%;
		z-index: 1002;
		font-size: $uni-font-size-sm;
		text-align: center;
		color: $text-gray;

		&.active {
			opacity: 0;
		}

		.customerCont-code {
			margin: $margin 0 $margin;
			width: 300rpx;
			height: 300rpx;
		}

		.customerCont-text {
			width: 80%;
			margin: 0 auto;
		}

		.customerClose {
			width: $uni-img-size-base;
			height: $uni-img-size-base;
			position: absolute;
			top: 110%;
			left: 45%;
			z-index: 1002;
		}
	}

	.btns {
		padding: 30rpx 0;

		.item {
			background: white;
			margin: $margin;
			border-radius: $radius/2;
			line-height: 90rpx;
			text-align: center;
			font-weight: bold;
		}
	}

	// 消息列表弹出
	.newBack {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 1001;
		background: rgba($color: #000000, $alpha: .5);
	}

	.newCont {
		position: fixed;
		background-color: $uni-bg-color;
		border-radius: $radius;
		left: 80rpx;
		right: 80rpx;
		top: 30%;
		z-index: 1002;
		font-size: $uni-font-size-sm;
		text-align: center;
		color: $text-gray;

		.newCont-title {
			padding: 25rpx 40rpx;
			border-bottom: 1rpx solid #eaeaea;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 600;
			text-align: center;

			.newCont-title-text {
				padding: 0 50rpx;
				box-sizing: border-box;
			}
		}

		.newCont-text {
			padding: 20rpx 40rpx 40rpx;
			box-sizing: border-box;
			line-height: 48rpx;
			text-align: justify;
			max-height: 400rpx;
			overflow: hidden;
			overflow-y: scroll;
		}

		.newCont-btn {
			color: #7e54fe;
			font-size: 30rpx;
			line-height: 90rpx;
			border-top: 2rpx solid #eaeaea;
		}

		.newCont-close {
			position: absolute;
			top: 28rpx;
			right: 20rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}

	// 会员卡
	.userVip {
		background-image: linear-gradient(to right, #4721bd, #885efe, #5d39b9);
		margin: 20px 40rpx 0;
		border-radius: 30rpx 30rpx 0 0;
		border: 3rpx solid #b197ff;
		color: #f6e9fa;
		box-sizing: border-box;
		padding-bottom: 40rpx;

		.userVip-top {
			display: flex;
			padding: 15px 30rpx;

			.userVip-top-name {
				font-size: 30rpx;
				flex: 1;
				line-height: 24px;
			}

			.userVip-top-btn {
				font-size: 26rpx;
				background-color: #977ae8;
				border-radius: 40rpx;
				padding: 0 20rpx 0 25rpx;
				height: 24px;
				line-height: 24px;
				display: flex;

				.userVip-top-arrow {
					width: 20rpx;
					height: 20rpx;
					margin: 14rpx 0 0 10rpx;
				}
			}
		}

		.userVip-tips {
			margin-top: 40rpx;
			font-size: 28rpx;

			.userVip-tips-title {
				margin-bottom: 20rpx;
				font-weight: 600;
			}

			.userVip-tips-text {
				line-height: 48rpx;
			}
		}

		.userVip-rights {
			border-radius: 10rpx;
			margin: 0 30rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-image: linear-gradient(to bottom, #dbceff, #bb9fff);
			color: #5723af;

			.userVip-rightst-title {
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				display: flex;
				line-height: 40rpx;

				.userVip-rightst-title-name {
					font-weight: 600;
					flex: 1;
				}

				.userVip-rightst-more {
					font-size: 28rpx;
					display: flex;

					.userVip-rightst-more-img {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.userVip-rightst-list {
				margin-top: 30rpx;
				display: flex;

				.userVip-rightst-label {
					display: inline-block;
					width: 25%;
					text-align: center;
					font-size: 26rpx;
					line-height: 40rpx;

					.userVip-rightst-img {
						width: 90rpx;
						height: 90rpx;
						vertical-align: top;
						margin-bottom: 15rpx;
					}
				}
			}
		}
	}

	// 会员信息
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-image: linear-gradient(to right, #7c52fc, #976dff);
		overflow: hidden;
		@extend .ios-top;
		// 用户信息
		.user-info {
			position: relative;
			width: 100%;
			height: 70px;
			box-sizing: border-box;
			margin-top: 40px;
			padding-left: $padding;
			padding-right: $padding;
			color: $uni-text-color-inverse;

			.user-portrait {
				width: 70px;
				height: 70px;
				border-radius: $uni-border-radius-circle;
				position: relative;

				.user-portrait-head {
					border-radius: $uni-border-radius-circle;
					border: 4rpx solid #bfaaff;
					position: absolute;
					left: 4px;
					top: 7px;
					width: calc(100% - 12px);
					height: calc(100% - 12px);
				}

				.user-portrait-tips {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
				}

				.user-portrait-name {
					position: absolute;
					z-index: 2;
					position: absolute;
					left: 50%;
					bottom: -10px;
					transform: translate(-50%, -50%);
					background: linear-gradient(to right, #211d1e, #4b403c);
					color: $uni-text-color-inverse;
					font-size: $uni-font-size-sm;
					border-radius: $radius;
					height: 15px;
					line-height: 15px;
					width: 64rpx;
					text-align: center;

					text {
						display: block;
						transform: scale(.8);
						font-weight: 700;
						background-image: linear-gradient(to bottom, #dfd6cf, #f7ceba);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}

			.user-head {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				padding: 0 0 0 calc(#{$uni-img-size-lg + 20} + 35px);
				box-sizing: border-box;

				.user-name {
					display: flex;
					margin: 15px 0 2.5px;
					font-size: 36rpx;

					.user-name-identity {
						vertical-align: top;
						width: 90rpx;
						height: 32rpx;
						margin: 5px 0 0 5px;
					}
				}

				.user-status {
					opacity: .7;
					font-size: $title-size-sm;
					display: flex;
					line-height: 23px;

					.user-status-copy {
						font-size: $title-size !important;
						border: 1rpx solid #FFFFFF;
						border-radius: $radius * 3;
						line-height: 22px;
						height: 23px;
						transform: scale(.6);
						padding: 0 $padding + 5;
					}
				}
			}
		}

		// 会员卡
		.card {
			height: 100px;
			margin: 0 15px;
			background: #555555;
		}
	}

	// 按钮内容
	.mian {
		position: relative;
		z-index: 1;
		margin-top: 184px;
		padding: 15px 30rpx 5px;
		background: #F5F5F5;
		transition: margin .6s;

		&.shoeCard {
			margin-top: 320px;
		}

		// 我的资产模块
		.userAssets {
			margin-bottom: 15px;
			background-color: #FFFFFF;
			overflow: hidden;
			border-radius: 15rpx;

			.userAssets-top {
				background-color: #fff3dc;
				color: #654c2d;
				font-size: 28rpx;
				padding: 10px;
				box-sizing: border-box;
				height: 94rpx;
				position: relative;

				.withdraw-name {
					display: flex;
					width: calc(100% - 160rpx);
					line-height: 54rpx;

					.withdraw-number {
						font-size: 32rpx;
						font-weight: 600;
						padding-left: 10rpx;
					}
				}

				.withdraw-btn {
					position: absolute;
					right: 10px;
					top: 10px;
					background-image: linear-gradient(to right, #f9c869, #eca824);
					color: #f7eedc;
					width: 140rpx;
					text-align: center;
					line-height: 27px;
					border-radius: 80rpx;
					font-size: 26rpx;
				}
			}

			.userAssets-show {
				padding: 30rpx;
				box-sizing: border-box;

				.assets-title {
					position: relative;
					padding-bottom: 30rpx;
					margin-bottom: 40rpx;
					font-weight: 600;
					font-size: 32rpx;

					&::after {
						position: absolute;
						content: '';
						left: 0;
						bottom: 0;
						width: 100%;
						height: 2rpx;
						background-color: #f2f2f2;
					}
				}

				.assets-list {
					display: flex;

					.assets-label {
						flex: 2;
						text-align: center;

						.assets-label-name {
							color: #9c9c9c;
							font-size: 28rpx;
							position: relative;

							.assets-label-icon {
								position: absolute;
								width: 26rpx;
								height: 26rpx;
								margin-left: 6rpx;
							}
						}

						.assets-label-number {
							font-size: 32rpx;
							color: #ee4c47;
							font-weight: 600;
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		// 我的伙伴
		.userPartner {
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			padding: 30rpx 0;
			box-sizing: border-box;
			border-radius: 15rpx;

			.partner-title {
				font-size: 32rpx;
				position: relative;
				padding: 0 30rpx 30rpx;
				margin-bottom: 30rpx;
				font-weight: 600;

				&::after {
					position: absolute;
					content: '';
					left: 0;
					bottom: 0;
					width: 100%;
					height: 2rpx;
					background-color: #f2f2f2;
				}
			}

			.partner-list {
				display: flex;
				margin-top: 40rpx;

				.partner-label {
					flex: 2;
					text-align: center;

					.partner-label-name {
						color: #9c9c9c;
						font-size: 28rpx;
					}

					.partner-label-number {
						font-size: 32rpx;
						font-weight: 600;
						margin-top: 10rpx;
					}
				}
			}
		}

		// 企业工具
		.userPartner {
			.partner-title {
				margin-bottom: 0;
			}

			.tool-list {
				.tool-label {
					display: inline-block;
					width: 25%;
					text-align: center;
					font-size: 28rpx;
					margin: 40rpx 0 20rpx;

					.tool-label-img {
						width: 44rpx;
						height: 44rpx;
						margin-bottom: 10rpx;
					}

					.tool-label-name {
						color: #5e5e5e;
					}
				}
			}
		}

		// 消息模块
		.userNew {
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			height: 90rpx;
			overflow: hidden;
			border-radius: 15rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;

			.userNew-banner {
				width: calc(100% - 70rpx);
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				color: #5e5e5e;
			}

			.userNew-icon {
				width: 40rpx;
				height: 40rpx;
				vertical-align: top;
				margin: 24rpx 20rpx 0 0;
			}
		}
	}

	.animated {
		animation-duration: 1s;
		/*动画时间*/
		animation-fill-mode: both;
		/*播放后的状态*/
		animation-name: container;
		/*动画的名称*/
	}

	@keyframes container {

		0%,
		100%,
		20%,
		50%,
		80% {
			transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
			/*贝塞尔曲线 ： X1 Y1 X2 Y2*/
			transform: translate3d(0, 0, 0);
			/*设置只在Z轴上移动*/
		}

		40%,
		43% {
			transition-timing-function: cubic-bezier(0.755, 0.50, 0.855, 0.060);
			transform: translate3d(0, -30rpx, 0);
		}

		70% {
			transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			transform: translate3d(0, -15rpx, 0);
		}

		90% {
			transform: translate3d(0, -4rpx, 0);
		}
	}
</style>
