<template>
    <div class="users">
        <div class="userinfo">
            <div class="f-row-e-s pd"><van-icon name="envelop-o" color="#7a8dff" /></div>
            <div class="tpinfo f-row-s-c">
                <van-image round width="60px" height="60px" :src="txpng" class="tximg" />
                <div class="f-row-s-c f-z ">
                    <div class="f-z">
                        <div>晴空下的她*</div>
                    </div>
                    <van-icon name="arrow" color="#7a8dff" />
                </div>
            </div>
            <div class="vipcard f-row-c-c ">
                <div class="vipnr f-row-b-c">
                    <div class="vipwz f-row-b-c">
                        <div>VIP</div>
                        <div>定制专属服务</div>
                        <van-icon name="arrow"  />
                    </div>
                </div>
            </div>
        </div>


        <div class="content">
            <van-cell-group inset>
                <van-cell v-for="(item,index) in  list " :key="index"  center >
                    <template #title>
                        <van-icon :name="item.icon" color="#4c5c86" size="15" />
                        <span class="custom-title">{{item.name}}</span>
                    </template>
                    <template #right-icon>
                        <van-icon name="arrow" color="#4c5c86"/>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

    </div>
</template>

<script setup lang="ts">
import { newImg } from '@/utils/common';
const txpng = newImg('user', 'tx.png')

const list =[
    {name:'阅读历史',icon:'clock-o',},
    {name:'我的下载',icon:'down',},
    {name:'意见反馈',icon:'chat-o',},
    {name:'用户协议',icon:'orders-o',},
    {name:'关于我们',icon:'info-o',},
    {name:'个人设置',icon:'setting-o',},
]
</script>

<style scoped lang="scss">
.users{
    height: calc(100vh - 50px);
    background-color: #f7f8fa;
}
.userinfo {
    position: relative;
    background: linear-gradient(90deg, rgba(205, 218, 252), rgba(255, 240, 230, ));
    height: 200px;

    .pd {
        padding: 10px;
    }
    .tpinfo {
        padding: 20px;

        .tximg {
            border: 1px solid #7a8DFF;
            margin-right: 10px;
        }
    }
}

.userinfo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f7f8fa);
}

.vipcard {
    .vipnr {
        width: 90%;
        z-index: 999 !important;
        height: 70px;
        border-radius: 50px;
        background: linear-gradient(90deg, rgba(97, 107, 239, .6), rgba(205, 218, 252), );
        .vipwz {
            width: 100%;
            padding: 0 20px;
            font-weight: 900;
            color: #fff;
            font-size: 19px;
            font-style:oblique;
        }
    }

}

.content{
    margin-top: 30px;
    .custom-title{
        padding: 0 10px;
        color: #4c5c86;
    }
}

 .van-cell{
    padding:16px;
}
</style>