<template>
	<view>
        <!-- 专属客服弹出 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">
                {{newList[newPopIndex].title}}
            </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 -->
        
        <!-- 用户信息 start -->
        <view class="fileTool" :class="{ bigTool: scroll > 200 }">
            <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-tool">
                <view class="user-tool-name">
                    {{userData.nickname}}
                </view>
                <image class="user-tool-icon" src="/static/user/user-top-00.png" mode="aspectFill" @click="$Router.push({name: 'setting'})"></image>
                <image class="user-tool-icon" src="/static/user/user-top-01.png" mode="aspectFill" @click="$Router.push({name: 'news'})"></image>
            </view>
        </view>
        <view class="user-top" :class="[scroll > 0  ? 'bigTop' : 'refurnTop']">
            <!-- <image class="user-back" :class="[scroll > 0  ? 'bigSize' : 'refurnSize']" src="../../static/img/user-back.png" mode="aspectFill"></image> -->
            <view class="user-tool">
                <image class="user-tool-icon" src="/static/user/user-top-00.png" mode="aspectFill" @click="$Router.push({name: 'setting'})"></image>
                <image class="user-tool-icon" src="/static/user/user-top-01.png" mode="aspectFill" @click="$Router.push({name: 'news'})"></image>
            </view>
            <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">
                        开通{{userIdentity.right.name}}。
                    </view>
                    <view class="userVip-top-btn">
                        去开通<image class="userVip-top-arrow" src="/static/user/userVip_arrow.png"></image>
                    </view>
                </view>
                
                <!-- 未认证后显示 -->
                <!-- <view class="userVip-tips">
                    <view class="userVip-tips-title">
                        加入链商星球
                    </view>
                    <view class="userVip-tips-text">
                        和众多精英一样，用另一种方式改变你的生活姿态。
                        以人为本，锐意进取，追求卓越。
                        诚信立足创新致远。
                    </view>
                </view> -->
                
                <!-- 已认证后显示 -->
                <view class="userVip-rights">
                    <view class="userVip-rightst-title">
                        <view class="userVip-rightst-title-name">查看会员专属权益</view>
                        <view class="userVip-rightst-more">全部权益 <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">
                        <block v-for="(item, index) in userIdentity.right.rights" :key="index">
                            <view class="userVip-rightst-label" v-if="index <= 3">
                                <image class="userVip-rightst-img" :src="item.cover"></image>
                                <view class="userVip-rightst-name">{{item.name}}</view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </view>
        <!-- 用户信息 end -->
        
        <!-- 滑动内容 start -->
        <view class="slide" :class="{ bigSlide: classStyle }" @touchmove="move">
            <!-- 消息中心  -->
            <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">
                        当前能量球价值<view class="withdraw-number">￥0.00</view>
                    </view>
                    <view class="withdraw-btn">
                        去提现
                    </view>
                </view>
                <view class="userAssets-show">
                    <view class="assets-title">
                        我的资产
                    </view>
                    <view class="assets-list" v-if="userData.account">
                        <view class="assets-label">
                            <view class="assets-label-name">能量球钱包<image @click="showHelp('wallet')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
                            <view class="assets-label-number">{{userData.account.coins || 0}}</view>
                        </view>
                        <view class="assets-label">
                            <view class="assets-label-name">能量碎片<image @click="showHelp('chip')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></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">
                        <view class="partner-label-name">伙伴总数</view>
                        <view class="partner-label-number">{{userData.relation_count.all || 0}}</view>
                    </view>
                    <view class="partner-label">
                        <view class="partner-label-name">直接伙伴</view>
                        <view class="partner-label-number">{{userData.relation_count.one || 0}}</view>
                    </view>
                    <view class="partner-label">
                        <view class="partner-label-name">简接伙伴</view>
                        <view class="partner-label-number">{{userData.relation_count.two || 0}}</view>
                    </view>
                </view>
            </view>
            
            <!-- 企业工具 -->
            <view class="userPartner">
                <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">
                        <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">
                        <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: 'instrumentBasics'})">
                        <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>
                    <navigator hover-class="none" 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>
                    </navigator>
                    <navigator hover-class="none" 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>
                    </navigator>
                    <navigator hover-class="none" 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>
                    </navigator>
                </view>
            </view>
        </view>
        
		<!-- <view class="btns">
			<view class="item" @click="$Router.push({name: 'instrumentBasics'})">基础信息</view>
			<view class="item" @click="$Router.push({name: 'goodsManagement'})">商品权证</view>
			<view class="item" @click="$Router.push({name: 'couponsManagement'})">优惠券管理</view>
			<view class="item" @click="$Router.push({name: 'instrumentBasics'})">店员管理</view>
			<view class="item" @click="$Router.push({name: 'instrumentCustomer'})">成交客户</view>
			<view class="item" @click="$Router.push({name: 'instrumentBasics'})">店员管理</view>
            <view class="item" @click="$Router.push({name: 'Personal'})">个人认证</view>
            <view class="item" @click="$Router.push({name: 'companyApprove'})">企业认证</view>
            <view class="item" @click="$Router.push({name: 'companyApprove', params: { form_type: 'put' }})">编辑企业认证</view>
            <view class="item" @click="$Router.push({name: 'setting'})">设置中心</view>
		</view> -->
		</view>
	</view>
</template>

<script>
    import { userIndex, userNotice, userCustomer } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
                scroll          : 0,      // 回弹效果
                userData        : '',     // 用户信息
                userIdentity    : '',     // 用户身份
                classStyle      : false,  // 下拉vip时改变样式
                animatedShow    : false,  // vip上下跳动效果
                newList         : [],
                newState        : false,   // 消息 显示状态
                newnextShow     : false,   // 消息 下一条按钮状态
                newPopIndex     : '',      // 消息列表选择index
				customer        : {
				    customerShow: false,  // 专属客服弹出
				    customerCode: '',     // 专属客服二维码
				}
			};
		},
        onShow(){
            this.scroll = 0
            // 添加vip模块跳动样式
            this.animatedShow = true
            
            // 获取用户信息
            this.userInfo();
            
            // 获取公告列表
            this.newInfo();
            
            // 获取专属客服二维码
            this.customerInfo();
        },
        onHide() {
            // 移除vip模块跳动样式
            this.animatedShow = false
        },
        methods: {
            // 用户信息
            userInfo() {
                // 读取配置信息
                userIndex().then(res=>{
                    console.log(res)
                    this.userData = res
                    this.userIdentity = res.identityShow
                }).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'
                    })
                })
            },
            
            // 下拉回弹
            onPageScroll(e) {
                if(e.scrollTop > 0) this.classStyle = false
                this.scroll = e.scrollTop
            },
            
            // 手指触摸离开
            move() {
                this.classStyle = true
            },
            
            // 专属客服弹出
            custEject() {
                this.customer.customerShow = !this.customer.customerShow
            },
            
            // 复制邀请码
            copyCenter(e) {
                let copyNo = e
                uni.vibrateShort({
                    success: () => {
                        uni.setClipboardData({
                            data    : copyNo,   
                            success : res=> {
                                uni.showToast({
                                    title   : '复制成功',
                                    icon    :'none',
                                    duration: 3000
                                });
                            }
                        })
                    }
                })
            },
            
            // 友情提示信息
            showHelp(type) {
                let content = '能量球钱包'
                if(type == 'chip') content = '能量碎片'
            	uni.showModal({
            	    title: '友情提示',
            	    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">
    // 专属客服
    .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: 260rpx;
            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: 60rpx;
        right: 60rpx;
        top: 30%;
        z-index: 1002;
        font-size: $uni-font-size-sm;
        text-align: center;
        color: $text-gray;
        .newCont-title {
            padding: 80rpx 40rpx 0;
            box-sizing: border-box;
            font-size: 30rpx;
            margin-bottom: 30rpx;
            font-weight: 600;
        }
        .newCont-text {
            padding: 0 40rpx;
            box-sizing: border-box;
            line-height: 48rpx;
            text-align: justify;
            height: 260rpx;
            overflow: hidden;
            overflow-y: scroll;
        }
        .newCont-btn {
            color: #7e54fe;
            margin-top: 30rpx;
            font-size: 30rpx;
            line-height: 90rpx;
            border-top: 2rpx solid #eaeaea;
        }
        .newCont-close {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 34rpx;
            height: 34rpx;
        }
    }
    
    // 用户信息
    .fileTool {
        position: fixed;
        width: 100%;
        left: 0;
        height: 0;
        top: 0;
        background-image: linear-gradient(to left, #7c52fc, #976dff);
        transition: .5s;
        opacity: 0;
        text-align: right;
        padding-top: var(--status-bar-height);
        display: flex;
        &.bigTool {
            z-index: 999;
            height: 80rpx;
            opacity: 1;
        }
        .user-tool {
            display: flex;
            width: calc(100% - #{$margin*2 + 40});
            .user-tool-name {
                flex: 1;
                line-height: 80rpx;
                text-align: left;
                color: #fff;
                font-size: 28rpx;
            }
            .user-tool-icon {
                padding-right: $padding;
                margin-top: 20rpx;
                width: $uni-img-size-sm;
                height: $uni-img-size-sm;
            }
        }
        .user-portrait {
            width: 64rpx;
            height: 64rpx;
            flex: 1;
            margin-left: $margin;
            border-radius: $uni-border-radius-circle;
            position: relative;
            .user-portrait-head {
                border-radius: $uni-border-radius-circle;
                position: absolute;
                left: 0;
                top: 15rpx;
                width: 54rpx;
                height: 54rpx;
            }
            .user-portrait-tips {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                left: 0;
                top: 0;
            }
        }
    }
    
    .user-top {
        background-image: linear-gradient(to right, #7c52fc, #976dff);
        position: fixed;
        width: 100%;
        height: 420rpx;
        overflow: hidden;
        transition: .5s;
        &.bigTop {
            height: 420rpx;
        }
        &.refurnTop {
            height: 660rpx;
        }
        .user-tool {
            text-align: right;
            position: absolute;
            padding-top: var(--status-bar-height);
            top: 20rpx;
            margin-bottom: 20rpx;
            height: 50rpx;
            height: calc(50rpx - var(--status-bar-height));
            right: $padding + 10;
            z-index: 1;
            .user-tool-icon {
                padding-left: $padding;
                width: $uni-img-size-sm + 2;
                height: $uni-img-size-sm + 2;
            }
        }
        .user-back {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        .user-info {
            position: relative;
            width: 100%;
            height: 140rpx;
            box-sizing: border-box;
            padding-left: $padding;
            padding-right: $padding;
            color: $uni-text-color-inverse;
            margin-top: 100rpx;
            .user-portrait {
                width: 130rpx;
                height: 130rpx;
                border-radius: $uni-border-radius-circle;
                position: relative;
                .user-portrait-head {
                    border-radius: $uni-border-radius-circle;
                    border: 4rpx solid #b197ff;
                    position: absolute;
                    left: 8rpx;
                    top: 14rpx;
                    width: calc(100% - 16rpx);
                    height: calc(100% - 14rpx);
                }
                .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: -20rpx;
                    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: 30rpx;
                    line-height: 30rpx;
                    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%;
                padding: 0 0 0 calc(#{$uni-img-size-lg + 20} + (#{$padding * 2} + 10rpx));
                box-sizing: border-box;
                .user-name {
                    display: flex;
                    margin: 30rpx 0 5rpx;
                    font-size: 36rpx;
                    .user-name-identity {
                        width: 92rpx;
                        height: 36rpx;
                        margin: 6rpx 0 0 10rpx;
                    }
                }
                .user-status {
                    opacity: .7;
                    font-size: $title-size-sm;
                    display: flex;
                    line-height: 46rpx;
                    .user-status-copy {
                        font-size: $title-size !important;
                        border: 1rpx solid #FFFFFF;
                        border-radius: $radius * 3;
                        line-height: 44rpx;
                        height: 46rpx;
                        transform:scale(.6);
                        padding: 0 $padding + 5;
                    }
                }
            }
        }
        .userVip {
            background-image:linear-gradient(to right, #4721bd, #885efe, #5d39b9);
            margin: 40rpx 40rpx 0;
            height: 100%;
            border-radius: 30rpx 30rpx 0 0;
            border: 3rpx solid #b197ff;
            color: #f6e9fa;
            padding: 30rpx;
            box-sizing: border-box;
            .userVip-top {
                display: flex;
                .userVip-top-name {
                    font-size: 30rpx;
                    flex: 1;
                    line-height: 48rpx;
                }
                .userVip-top-btn {
                    font-size: 26rpx;
                    background-color: #977ae8;
                    border-radius: 40rpx;
                    padding: 0 20rpx 0 25rpx;
                    height: 48rpx;
                    line-height: 48rpx;
                    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 {
                margin-top: 40rpx;
                border-radius: 10rpx;
                padding: 20rpx;
                box-sizing: border-box;
                background-image:linear-gradient(to bottom, #dbceff, #bb9fff);
                color: #5723af;
                .userVip-rightst-title {
                    font-size: 30rpx;
                    display: flex;
                    .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;
                       flex: 4;
                       text-align: center;
                       font-size: 26rpx;
                       .userVip-rightst-img {
                           width: 80rpx;
                           height: 80rpx;
                           margin-bottom: 10rpx;
                       }
                    }
                }
            }
        }
    }
    
    // 消息模块
    .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: 46rpx;
            height: 46rpx;
            margin: 22rpx 20rpx 0 0;
        }
    }
    
    // 我的资产模块
    .userAssets {
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        overflow: hidden;
        border-radius: 15rpx;
        .userAssets-top {
            background-color: #fff3dc;
            color: #654c2d;
            font-size: 28rpx;
            padding: 20rpx;
            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: 20rpx;
                top: 20rpx;
                background-image:linear-gradient(to right, #f9c869, #eca824);
                color: #f7eedc;
                width: 140rpx;
                text-align: center;
                line-height: 54rpx;
                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;
                }
            }
        }
    }
    
    // 滑动内容部分
    .slide {
        position: absolute;
        padding: 30rpx 30rpx 120rpx;
        box-sizing: border-box;
        width: 100%;
        z-index: 99;
        left: 0;
        top: 196px;
        // padding-top: var(--status-bar-height);
        background-color: #F8F8F8;
        transition: .5s;
        &.bigSlide {
            top: 660rpx;
        }
        .list {
            margin: $margin + 10;
            padding: 0 $padding + 10;
            border-radius: $radius-lg;
            background-color: $uni-bg-color;
            .title {
                padding-top: $padding + 10;
                font-weight: 700;
                font-size: $title-size;
            }
            .label {
                height: 70rpx;
                line-height: 70rpx;
                padding: $padding 0;
                border-bottom: 1rpx solid #f4f4f4;
                font-size: $title-size - 2;
                display: flex;
                &:last-child {
                    border: none;
                }
                .label-name {
                    flex: 1;
                    display: flex;
                }
                .label-icon {
                    width: $uni-img-size-sm - 4;
                    height: $uni-img-size-sm - 4;
                    margin: 16rpx $margin 0 0;
                }
                .label-code {
                    flex: 1;
                    display: flex;
                    .code {
                        line-height: 40rpx;
                        text {
                            text-transform:uppercase;
                            display: block;
                            color: $uni-text-color-grey;
                            font-size: $uni-font-size-sm;
                        }
                    }
                }
                
                .label-number {
                    font-size: $uni-font-size-base;
                    display: flex;
                    line-height: 70rpx;
                    color: #009360;
                    text {
                        padding: 0 $padding - 5;
                        height: 30rpx;
                        line-height: 30rpx;
                        margin-top: 18rpx;
                        font-size: $uni-font-size-sm;
                        border-radius: $radius * 2;
                        border: 2rpx solid #009360;
                        display: inline-block;
                    }
                    .label-more {
                        width: $uni-img-size-sm - 18;
                        height: $uni-img-size-sm - 18;
                        margin: 24rpx 0 0 $margin - 5;
                    }
                }
            }
        }
    }
    
    // 动画效果
    .bigSize {
        animation: big .5s 1 alternate linear forwards;
    }
    
    .refurnSize {
        transform: scale(1.5);
        animation: refurn .5s 1 alternate linear forwards;
    }
    
    @keyframes big {
        100% {
            top: 10rpx;
            transform: scale(1.5);
        }
    }
    @keyframes refurn {
        100% {
            top: 0;
            transform: scale(1);
        }
    }
    
    .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>
