frontend-uniapp/src/pages/userInfo/index.vue

<script setup lang="ts">
import avatar from '@/static/image/user-info/avatar.png'
import component from '@/static/image/user-info/Component.png'
import union from '@/static/image/user-info/union.png'
import ToolFun from '@/utils'

const titleName = ref<string>('个人信息')
const safeHeight = ToolFun.getSafeHeight()
</script>

<template>
  <TitleBar :title-name="titleName" />
  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
    <view class="flex justify-center items-center  p-[61px] w-full pb-[30px] ">
      <view class="relative h-[80px] w-[80px]">
        <image
          :src="avatar" class="h-[80px] w-[80px] "
        />
        <view class="flex justify-center items-center absolute h-[18px] w-[18px] bg-[#0052D9] rounded-full right-0 bottom-0">
          <image
            :src="union" class="h-[10px] w-[10px] "
          />
        </view>
      </view>
    </view>
    <uni-card>
      <uni-list class="text-[16px] font-normal relative felx items-center justify-center" :border="false">
        <uni-list-item show-arrow title="姓名" right-text="齐治然" />
      </uni-list>
    </uni-card>
    <uni-card class="mt-6">
      <uni-list :border="false" />
      <uni-list-item show-arrow title="年龄" right-text="50" class="text-[45px] font-normal" :border="false" />
      <uni-list-item show-arrow title="性别" right-text="男孩" />
      <uni-list-item show-arrow title="职业" right-text="太空人" />
      <uni-list-item show-arrow title="地址" right-text="杭州" />
    </uni-card>
    <view class=" w-full flex justify-center items-center mt-[80px]">
      <button class="w-[176px] h-[47px] font-normal bg-[#4545E5] text-[18px] rounded-[69px] text-[#fff] flex justify-center items-center">
        确认
      </button>
    </view>
    <view class="mt-[20px] flex justify-center items-center">
      <image
        :src="component" class="w-[138px] h-[38px]"
      />
    </view>
  </view>
</template>

<style  lang="scss" scoped>
        :deep .uni-list-item{
        height: 56px !important;
      }
      :deep .uni-list-item__content-title {
        color: var(--text-icon-font-gy-190, rgba(0, 0, 0, 0.90)) !important;
      font-size: 16px !important;
      font-family: "PingFang SC" !important;
      font-style: normal !important;
      font-weight: 400 !important;
     }
     :deep .uni-list-item__extra-text{
      color: var(--text-icon-font-gy-190, rgba(0, 0, 0, 0.90)) !important;
      font-size: 16px !important;
      font-style: normal !important;
      font-weight: 400 !important;
     }
</style>