<script setup>
import Avatar from "../../static/images/Avatar.png";
import user_BG from '../../static/images/user_bg.png';
import XNav from "../../components/XNav.vue";
import CreditScore from "../../components/CreditScore.vue";
</script>

<template>
    <!--我的-->
    <x-nav></x-nav>

    <view class="!w-full !h-[484rpx] overflow-hidden relative">
        <image class="!w-[1200rpx] !h-[480rpx] !absolute left-[-200rpx]" :src="user_BG" mode="aspectFill"></image>

        <view class="test !w-full relative z-10 p-[20rpx] !flex gap-[34rpx] relative">
            <image class="!size-[132rpx]" :src="Avatar" mode="aspectFill"></image>
            <view class="!flex flex-col items-start justify-between box-border py-[4rpx]">
                <view class="user_name">用户名称</view>
                <view class="user_phone">手机号：1570****061</view>
                <view class="user_phone">uid：38578</view>
            </view>

            <credit-score></credit-score>

            <view
                class="bg-[rgba(0,0,0,.8)] text-[#fff] absolute right-0 py-[7rpx] w-[120rpx] rounded-l-full !flex items-center justify-center gap-[4rpx]"
                style="font-size: 22rpx">
                <tui-icon name="edit" size="16"></tui-icon>
                <view class="!mt-[2rpx]">编辑</view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.user_name {
    color: rgb(29, 33, 41);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0;
    text-align: center;
}

.user_phone {
    color: rgb(134, 144, 156);
    font-size: 22rpx;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
}
</style>
