<template>
	<view class="content">
		<!-- 会员信息 -->
		<!-- :class="{active : startedAt == ''}" -->
		<view class="user active" style="height: 110px;">
            <image class="user-back" src="@/static/imgs/user_back.png"></image>
            <view class="user-cont" v-if="userLogin">
                <view class="user-head">
                    <image class="user-avatar" @click="updImg" :src="avatar ? avatar : '../../static/imgs/default_myHead.png'" mode="aspectFill"></image>
                    <image v-if="identity.order != '1'" class="user-ancrown" src="@/static/icons/ancrown.png" mode=""></image>
                </view>
                <view class="user-text">
                    <view class="user-top">
                        <view class="user-name">
                            {{nickName}}
                        </view>
                        <view class="user-icon">
                            <image v-if="userData.is_partner" src="@/static/icons/userIcon_01.png" mode="widthFix"></image>
                        </view>
                    </view>
                    <image v-if="identity.order == '2'" class="user-identity" src="@/static/icons/member_02.png" mode="widthFix"></image>
                    <image v-else-if="identity.order == '3'" class="user-identity" src="@/static/icons/member_03.png" mode="widthFix"></image>
                    <image v-else-if="identity.order == '4'" class="user-identity" src="@/static/icons/member_04.png" mode="widthFix"></image>
					<image v-else class="user-identity" src="@/static/icons/member_01.png" mode="widthFix"></image>
                </view>
            </view>
            <view class="user-cont" v-else @click="$Router.push({name: 'Login'})">
                <image class="user-head" src="@/static/imgs/default_myHead.png"></image>
                <view class="user-text">
                    <view class="not-sign">
                        请先登录
                    </view>
                </view>
            </view>
            
            <!-- <view class="user-member" :class="{active : startedAt == ''}">
                <view class="member-cont" @click="memberTab">
                    <view class="member-name">
                        <image src="@/static/icons/memberIcon.png"></image>
                        <view class="member-tips" v-if="userLogin">
                            <text class="tips-name">{{identity.name}}</text>
                            <text class="tips-text">锶享{{identity.name}}</text>
                        </view>
                        <view class="member-tips" v-else>
                            <text class="tips-name">开通会员</text>
                            <text class="tips-text">开通锶享会员</text>
                        </view>
                    </view>
                    <view class="member-btn" @click.stop="judge('UserTips')">
                        <text v-if="!userLogin">立即登录</text>
                        <text v-else-if="identity.order == '1'">立即开通</text>
                        <text v-else>查看权益</text>
                    </view>
                    <view class="member-see" v-if="startedAt != ''">
						<view class="member-number">
						    {{identityShow.times.serial}}
						</view>
						<view class="member-date">
						    有效期： {{identityShow.times.ended_at}}
						</view>
                    </view>
                </view>
            </view> -->
		</view>
		 <!-- :class="{active : startedAt == ''}" -->
        <view class="region active">
			<!-- 订单 -->
			<view class="orders">
				<view class="order-left" @click="$Router.push({name: 'OrderIndex', params: { listType: '' }})">
					<image class="order-line" src="@/static/icons/order_line.png"></image>
					<image src="@/static/icons/order_01.png" mode="widthFix"></image>
					<view class="text-text">全部订单</view>
					<!-- <view class="text-number" v-if="caseOrder.all">{{ caseOrder.all }}</view> -->
				</view>
				<view class="order-right">
					<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'unpay' }})">
						<image src="@/static/icons/order_04.png" mode="widthFix"></image>
						<view class="text-text">待支付</view>
						<view class="text-number" v-if="caseOrder.unpay">{{ caseOrder.unpay }}</view>
					</view>
					<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'paid' }})">
						<image src="@/static/icons/order_02.png" mode="widthFix"></image>
						<view class="text-text">待发货</view>
						<view class="text-number" v-if="caseOrder.paid">{{ caseOrder.paid }}</view>
					</view>
					<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'delivered' }})">
						<image src="@/static/icons/order_03.png" mode="widthFix"></image>
						<view class="text-text">已发货</view>
						<view class="text-number" v-if="caseOrder.delivered">{{ caseOrder.delivered }}</view>
					</view>
				</view>
			</view>
                    
			<!-- 操作按钮 -->
			<view class="tools">
				<view class="title">常用功能</view>
				<view class="tools-label">
					<view class="tools-item" @click="$Router.push({name: 'UserCode'})">
						<image src="@/static/icons/toolIcon_04.png" mode="widthFix"></image>
						<view class="tools-name">邀请码</view>
					</view>
					<!-- <view class="tools-item" @click="$Router.push({name: 'UserCensus'})">
						<image src="@/static/icons/toolIcon_14.png" mode="widthFix"></image>
						<view class="tools-name">统计数据</view>
					</view> -->
					<view class="tools-item" @click="$Router.push({name: 'Friend'})">
						<image src="@/static/icons/toolIcon_05.png" mode="widthFix"></image>
						<view class="tools-name">我的推荐</view>
					</view>
					<view class="tools-item" @click="$Router.push({name: 'UserProduct'})">
						<image src="@/static/icons/toolIcon_10.png" mode="widthFix"></image>
						<view class="tools-name">锶源昆仑</view>
					</view>
					<view class="tools-item" @click="outLogin">
						<image src="@/static/icons/toolIcon_12.png" mode="widthFix"></image>
						<view class="tools-name">退出登录</view>
					</view>
				</view>
			</view>
                        
            <view class="bottom-tips">
                锶源昆仑天然饮用水<text>-</text>昆仑山古海冰泉
            </view>
        </view>
	</view>
</template>

<script>
    import { userIndex, setting } from '@/apis/interfaces/user'
    import { uploads } from '@/apis/interfaces/uploading'
    import { openSee } from '@/apis/interfaces/member'
    import { authFollow } from '@/apis/interfaces/authUrl'
	export default {
		data() {
			return {
                popStatus   : false, //流程判断弹出层状态
				userData    : '',   //用户信息
                identity    : '',   //用户身份
                identityShow: '',
                userLogin   : '',   //登录状态
                avatar      : '',   //头像
                nickName    : '',   //昵称
                sign        : '',   //喝水打卡
                nowStatus   : '',   //判断状态
                identityData: '',   //会员身份信息
                caseOrder   : '',   //订单
                account     : '',   //账户
                inviteCount : '',   //激活码
                nameState   : false,
                memberType  : false,
                waterState  : false, //水滴状态
				startedAt   : '', //有效期
                serviceMobile: ''
			};
		},
        onShow() {
            // 存储环境-会员中心
            getApp().globalData.envType = 'userPage'
            
            if(this.$store.getters.getToken) {
                this.userLogin = true
                // 获取用户信息
                this.userInfo();
                
                // 获取会员身份信息
                this.identityInfo();
            }
        },
        
		methods:{
			// 退出登录
			outLogin(){
				this.$store.commit('setToken', '')
				this.$Router.replaceAll({name: 'Index'})
			},
            
            // 参加体验官活动
            joinClick(){
                this.waterState = false
                this.$Router.push({name: 'Index'})
            },
            
            // 用户信息
            userInfo() {
                userIndex().then(res => {
                    this.userData  = res
                    this.account   = res.account
                    this.avatar    = res.avatar
                    this.nickName  = res.nickname
                    this.sign      = res.sign
                    this.identity  = res.identity
                    this.identityShow  = res.identityShow
					this.startedAt  = res.identityShow.times.serial
                    this.nowStatus = res.nowStatus
                    this.caseOrder = res.count.orders
                    this.serviceMobile = res.service.mobile
                    this.inviteCount = res.invite_count
                }).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 会员身份信息
            identityInfo() {
                openSee().then(res => {
                    this.identityData = res.identity
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            },
            
            // 流程判断
            judge(name) {
                if(this.$store.getters.getToken) {
                    this.$Router.push({name: 'memberIndex'})
                }else {
                    // 去登录
                    this.$Router.push({name: 'Login'})
                }
            },
            
            // 建立档案跳转
            establish() {
                this.popStatus = false
                this.$Router.push({name: 'personalIndex'})
            },
            
            // 是否有档案
            reportClick(name) {
                if(this.userData.status.isCase) {
                    this.$Router.push({name, params: { caseid: this.caseOrder.case_id }})
                    return
                }
                this.popStatus = true
            },
            
            // 建立档案
            archives() {
                if(this.$store.getters.getToken) {
                    switch (this.nowStatus.value) {
                        // 关注公众号
                    	case 'isSubscribe':
                            // 获取微信授权信息
                            authFollow({
                                url: '/wechat'
                            }).then(res => {
                                window.location.href = res
                            }).catch(err => {
                                uni.showToast({
                                    title: err.message,
                                    icon: "none"
                                })
                            })
                    		break;
                        // 创建档案
                        default:
                            this.$Router.push({name: 'Attestation', params: { hasCase: this.userData.status.isCase }})
                            break;
                    }
                    return
                }
                // 去登录
                this.$Router.push({name: 'Login'})   
            },
            
            // 上传图片
            updImg(){
            	uni.chooseImage({
            		count	: 1,
            		success	: path => {
            			uploads([{
            				uri : path.tempFilePaths[0]
            			}]).then(res => {
                            this.avatar = res.url[0]
                            // 上传头像
                            this.settingInfo('avatar', res.path[0])
            			}).catch(err => {
            				uni.showToast({
            					title: err.message,
            					icon : 'none'
            				})
            			})
            		}
            	})
            },
            
            // 修改昵称弹出
            nameClick() {
                this.nameState = !this.nameState
            },
            
            // 输入昵称
            nameInput(val) {
                this.nickName = val.detail.value
            },
            
            // 修改提交
            nameSubmit() {
                // 上传头像
                this.settingInfo('nickname', this.nickName);
            },
            
            // 上传用户信息
            settingInfo(key, value) {
                setting(key, {
                    value: value
                }).then(res => {
                    this.nameState = false
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon : 'none'
                	})
                })
            },
            
            // 展示会员卡
            memberTab(){
                if(this.$store.getters.getToken) {
                    if(this.identity.order != 1)this.memberType = !this.memberType
                    return
                }
				this.$Router.push({ name: 'uricacidIndex' });
            },
            
            // 拨打电话
            phoneCall(){
                uni.makePhoneCall({
                    phoneNumber: this.serviceMobile
                });
            },
            
            // 查看版本信息
            edition(){
                uni.showToast({
                	title: '版本 V1.0.0',
                    icon: 'none'
                });
            },
            
            // 退出登录
            outLogin() {
            	this.$store.commit('setToken', '')
            	this.$Router.push({name: 'User'})
                this.userLogin = false
				this.startedAt = ''
            }
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		overflow: hidden;
        background-color: #f5f5f5;
		height: calc(100vh - 94rpx);
		// height: calc(100vh - 98rpx);
	}
	// 用户信息
	.user{
        position: relative;
		height: 420rpx;
		&.active {
			height: 340rpx;
		}
        .user-back {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
        }
        .user-cont {
            position: absolute;
            left: 0;
            top: 0;
            padding: $padding;
            box-sizing: border-box;
            width: 100%;
            z-index: 9;
            display: flex;
            height: 188rpx;
            .user-head {
                position: relative;
                width: 110rpx;
                height: 110rpx;
                border-radius: 50%;
                border: 6rpx solid #ffe0a8;
                margin-top: 10rpx;
				box-sizing: border-box;
                .user-avatar {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
                .user-ancrown {
                    position: absolute;
                    width: 48rpx;
                    height: 48rpx;
                    right: 0;
                    top: -34rpx;
                }
            }
            .user-text {
                height: 120rpx;
                width: calc(100% - 120rpx);
                padding-left: $padding;
                box-sizing: border-box;
                .not-sign {
                    background-color: rgba(0,0,0,.4);
                    display: inline-block;
                    color: #ffffff;
                    border-radius: 50rpx;
                    height: 70rpx;
                    line-height: 70rpx;
                    padding: 0 40rpx;
                    margin-top: 30rpx;
                }
                .user-sign {
                    height: 68rpx;
                    line-height: 68rpx;
                    font-size: $title-size + 2;
                    border: 2rpx solid #0d224b;
                    color: #0d224b;
                    display: inline-block;
                    padding: 0 $padding;
                    border-radius: $radius-m;
                    margin-top: $margin + 10;
                }
                .user-top {
                    display: flex;
                    line-height: 70rpx;
                    .user-name {
                        color: #ffffff;
                        font-size: $title-size + 8;
                        padding-right: 10rpx;
                    }
                    .user-icon{
                        & image {
                            width: 44rpx;
                            height: 44rpx;
                            margin: 14rpx 0 0 8rpx;
                        }
                    }
                }
                .user-identity {
                    margin-top: 5rpx;
                    width: 130rpx;
                }
            }
            .user-clock {
                position: absolute;
                right: 0;
                top: 50rpx;
                background-color: rgba(0, 0, 0, 0.2);
                color: #ffe8be;
                border: 2rpx solid #989dff;
                border-right: none;
                line-height: 60rpx;
                border-radius: 50rpx 0 0 50rpx;
                padding: 0 15rpx 0 20rpx;
                font-size: $title-size-m;
                display: flex;
                image {
                    width: 36rpx;
                    height: 36rpx;
                    margin: 12rpx 5rpx 0 0;
                }
            }
        }
        .account {
            position: absolute;
            left: 0;
            top: 100rpx;
            color: #ffffff;
            display: flex;
            height: 88rpx;
            width: 100%;
            padding: 10rpx 0;
            .account-label {
                flex: 4;
                text-align: center;
                font-size: $title-size-lg;
                .label-number {
                    font-size: $title-size + 2;
                    font-weight: 600;
                }
            }
        }
        .user-member {
            margin: 0 30rpx;
            position: relative;
            width: calc(100% - 60rpx);
			height: 180rpx;
            top: 200rpx;
            left: 0;
            background-image: linear-gradient(to right, #2a3353 , #4e4f7b);
            border-radius: $radius $radius 0 0;
			&.active {
				height: 140rpx;
			}
            .member-back {
                position: absolute;
                height: 100%;
                width: 100%;
                border-radius: $radius $radius 0 0;
            }
            .member-cont {
                height: 100%;
                width: 100%;
                padding: $padding $padding - 10;
                box-sizing: border-box;
                position: absolute;
                z-index: 9;
                .member-name {
                    font-size: $title-size + 5;
                    color: #FFFFFF;
                    display: flex;
                    & image {
                        width: 50rpx;
                        height: 50rpx;
                        vertical-align: -6rpx;
                        margin-right: 10rpx;
                    }
                    .member-tips {
                        font-size: $title-size;
                        line-height: 54rpx;
                        color: #ffeabb;
                        .tips-name {
                            font-size: $title-size;
                            font-weight: 600;
                            margin-right: 10rpx;
                            position: relative;
                            padding-right: 30rpx;
                            &::after {
                                position: absolute;
                                content: '';
                                right: 5rpx;
                                top: calc(50% - 5rpx);
                                width: 10rpx;
                                height: 10rpx;
                                border-radius: 50%;
                                background-color: #ffeabb;
                            }
                        }
                    }
                }
                .member-btn {
                    position: absolute;
                    top: $padding - 2;
                    right: $padding - 10;
                    background-image: linear-gradient(to right, #ffe8b9 , #ffedd5);
                    color: #414571;
                    z-index: 11;
                    font-size: $title-size-m;
                    padding: 0 $padding - 5;
                    line-height: 62rpx;
                    border-radius: $radius + 30;
                    font-weight: 600;
                }
                .tips-see {
                    margin-top: 30rpx;
                }
                .member-see {
                    width: 100%;
                    position: absolute;
                    bottom: 38rpx;
                    left: 0;
                    display: flex;
                    padding: 0 $padding;
                    box-sizing: border-box;
                    line-height: 40rpx;
                    color: #ffedd1;
					font-size: $title-size-sm;
                    .member-number {
                        flex: 1;
                    }
                }
            }
        }
	}
    
    // 内容区域
    .region {
        position: relative;
        z-index: 10;
		top: 100rpx;
        bottom: 0;
        width: 100%;
        transition: .5s;
        margin-top: -164rpx;
        &.active {
			top: 140rpx;
        }
        // &::after {
        //     content: '';
        //     border: 14rpx solid #3d4167;
        //     border-left: 14rpx solid transparent;
        //     border-bottom: 14rpx solid transparent;
        //     border-top-right-radius: 6rpx;
        //     transform: rotate(135deg);
        //     position: absolute;
        //     top: -14rpx;
        //     left: calc(50% - 7rpx);
        // }
        // &.active::after {
        //     opacity: 0;
        //     transition: .2s;
        // }
    }
    // 账户
    .water {
        background: #ffffff;
        border-radius: $radius * 2;
        padding: $padding 0;
        box-sizing: border-box;
        margin-bottom: $margin;
        .water-title {
            font-weight: 600;
            margin-bottom: $margin;
            padding: 0 $padding;
            box-sizing: border-box
        }
        .water-list {
            display: flex;
            .water-item {
                flex: 3;
                text-align: center;
                .water-number {
                    font-size: $title-size + 10;
                    position: relative;
                    .water-tips {
                        position: absolute;
                        right: 40rpx;
                        top: -5rpx;
                        width: 28rpx;
                        height: 28rpx;
                    }
                }
                .water-name {
                    font-size: $title-size-m;
                    color: #868686;
                    margin-top: 5rpx;
                }
                &:nth-child(2) {
                    position: relative;
                    &::after,
                    &::before {
                        position: absolute;
                        content: '';
                        width: 2rpx;
                        height: 75%;
                        background-color: #e9e9e9;
                        top: 15%;
                    }
                    &::after {
                        left: 0;
                    }
                    &::before {
                        right: 0;
                    }
                }
                &:last-child {
                    color: #f63e39;
                    .water-name {
                        color: #f63e39;
                    }
                }
            }
        }
    }
    
	// 订单
	.orders{
        background: #ffffff;
		border-radius: $radius * 2 $radius * 2 0 0;
        padding: $padding + 10 0 $padding;
        box-sizing: border-box;
        margin-bottom: $margin;
        display: flex;
        .order-left {
            width: 25%;
            text-align: center;
            padding: 10rpx 0rpx 10rpx 0;
            box-sizing: border-box;
            position: relative;
            image{
            	width: 50rpx;
            	height: 50rpx;
            }
            &:last-child {
                position: relative;
            }
            .text-text{
            	font-size: $title-size-m;
            	color: $text-color;
                margin-top: 10rpx;
            }
            .order-line {
                width: 20rpx;
                height: 100%;
                position: absolute;
                top: 0;
                right: -10rpx;
            }
            .text-number {
                position: absolute;
                top: -5rpx;
                left: 60%;
                background-color: #f3ad47;
                color: #FFFFFF;
                border-radius: $radius $radius $radius 0;
                font-size: $title-size-sm - 4;
                padding: 0 8rpx;
                text-align: center;
                line-height: 32rpx;
                height: 32rpx;
            }
        }
        .order-right {
            display: flex;
            width: 75%;
            .order-item {
            	width: 33.33%;
            	text-align: center;
                position: relative;
                padding: 10rpx 0;
            	image{
            		width: 50rpx;
            		height: 50rpx;
            	}
                &:last-child {
                    position: relative;
                }
            	.text-text{
            		font-size: $title-size-m;
            		color: $text-color;
                    margin-top: 10rpx;
            	}
                .text-number {
                    position: absolute;
                    top: -5rpx;
                    left: 65%;
                    background-color: #eb504c;
                    color: #FFFFFF;
                    border-radius: $radius $radius $radius 0;
                    font-size: $title-size-sm - 4;
                    padding: 0 8rpx;
                    text-align: center;
                    line-height: 32rpx;
                    height: 32rpx;
                }
            }
        }
	}
	// 操作按钮
	.tools{
        background: white;
        margin-bottom: 30rpx;
        .title {
            font-size: $title-size;
            font-weight: bold;
            color: $text-color;
            line-height: 110rpx;
            padding: 0 $padding;
        }
        .tools-label {
            overflow: hidden;
        }
		.tools-item {
			font-size: $title-size;
            margin: 10rpx 0 $margin + 10;
			color: $text-color;
            width: 25%;
            float: left;
            text-align: center;
			&:last-child{
				border: none;
			}
            .tools-name {
                font-size: $title-size-m;
                margin-top: 5rpx;
            }
            image {
                width: 46rpx;
                height: 46rpx;
                margin: 0 auto;
            }
		}
        .healthys-label {
            padding: $padding 0;
            .tools-item {
                margin: 0;
            }
        }
	}
    
    // 弹出
    .nameBack {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: .4);
        left: 0;
        top: 0;
        z-index: 99;
    }
    
    .namePop {
        position: fixed;
        left: 100rpx;
        right: 100rpx;
        top: 40%;
        background-color: #FFFFFF;
        z-index: 100;
        height: 100rpx;
        line-height: 100rpx;
        padding: 0 30rpx;
        border-radius: 100rpx;
        box-sizing: border-box;
        display: flex;
        .namePop-input {
            flex: 1;
            height: 100rpx;
            line-height: 100rpx;
            margin-right: 30rpx;
        }
        .namePop-btn {
            color: $mian-color;
            font-weight: 600;
        }
    }
    
    .nameClose {
        width: 54rpx;
        height: 54rpx;
        position: fixed;
        left: calc(50% - 27rpx);
        top: calc(40% + 140rpx);
        z-index: 101;
    }
    
    .bottom-tips {
        width: 100%;
        font-size: $title-size-sm;
        color: $text-gray;
        text-align: center;
        z-index: 1000;
        line-height: 100rpx;
        padding: 20rpx 0;
        clear: both;
        text {
            font-size: $title-size + 6;
            padding: 0 10rpx;
        }
    }
    
    // 未开通会员显示
    .noTools {
        overflow: hidden;
        padding: 0 $padding;
        box-sizing: border-box;
        .noTools-item {
            background: white;
            box-shadow: 0 0 5rpx 5rpx rgba($color: $border-color, $alpha: .5);
            border-radius: $radius;
            line-height: 100rpx;
            padding: 0 $padding;
            font-size: $title-size;
            margin-bottom: $margin;
            color: $text-color;
            display: flex;
            &:last-child{
                border: none;
            }
            .noTools-name {
                flex: 1;
                display: flex;
                font-weight: 600;
                image {
                    width: 42rpx;
                    height: 42rpx;
                    margin: 28rpx 20rpx 0 0;
                }
            }
        }
    }
    
    // 弹出层提示
    .publicBack {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,.5);
        z-index: 99;
    }
    .publicPop {
        left: 50%;
        top: 50%;
        width: 440rpx;
        height: 680rpx;
        margin-left: -220rpx;
        margin-top: -340rpx;
        position: fixed;
        z-index: 100;
        .publicPop-cont {
            height: 600rpx;
            background-color: #FFFFFF;
            border-radius: $radius;
            padding: $padding;
            box-sizing: border-box;
            .publicPop-img {
                width: 100%;
            }
            .publicPop-text {
                color: $text-gray;
                font-size: $title-size;
                text-align: center;
                text {
                    color: #000000;
                    font-size: $title-size + 8;
                    display: block;
                    font-weight: 600;
                    margin: 20rpx 0 10rpx;
                }
            }
            .publicPop-btn {
                background-color: #1d37e2;
                border-radius: $radius-m;
                text-align: center;
                line-height: 78rpx;
                color: #FFFFFF;
                margin-top: $margin;
                font-size: $title-size;
            }
        }
        .publicPop-close {
            text-align: center;
            margin-top: 22rpx;
            image {
                width: 58rpx;
                height: 58rpx;
            }
        }
    }
    
    // 赠送水滴提示弹出
    .waterBack {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: rgba(0,0,0,.4);
    }
    .waterCont {
        position: fixed;
        left: 50%;
        top: 50%;
        width: 500rpx;
        margin-left: -250rpx;
        margin-top: -300rpx;
        text-align: center;
        z-index: 1000;
        background-color: #ffffff;
        border-radius: $radius;
        overflow: hidden;
        .waterCont-name {
            line-height: 90rpx;
            font-weight: 600;
        }
        .waterCont-text {
            border-top: 2rpx solid #ececec;
            border-bottom: 2rpx solid #ececec;
            text-align: justify;
            padding: $padding - 10 $padding;
            box-sizing: border-box;
            line-height: 44rpx;
            color: #484848;
            font-size: $title-size-lg;
        }
        .waterCont-btn {
            line-height: 90rpx;
            display: flex;
            .waterCont-label {
                flex: 2;
                text-align: center;
                &:last-child {
                    border-left: 2rpx solid #ececec;
                    color: #f63e39;
                }
            }
        }
    }
</style>
