zcb_APP/pages/personalProfile/index.vue

<template>
  <view class="content pdx-48">
    <view class="w h-88 flex ai_center jc_center mgt-88 p-rel">
      <image
        @click="$navBack()"
        class="w-48 h-48 abs_left"
        src="/static/logo.png"
        mode="scaleToFill"
      />
      <view class="text-36 text-500 text-070202">个人资料</view>
    </view>

    <view class="mgt-16 w">
      <view
        class="w h-96 flex ai_center jc_between mgb-16 menu_border"
        v-for="item in menu"
        :key="item.name"
      >
        <view class="text-28 text-400 text-303030">{{ item.title }}</view>
        <view class="flex ai_center">
          <image
            class="w-64 h-64"
            v-if="item.name === 'avatar'"
            src="/static/logo.png"
            mode="scaleToFill"
          />
          <view v-else class="text-24 text-600 text-070202">
            {{ item.value }}
          </view>
          <image
            v-if="item.name === 'avatar' || item.name === 'name'"
            class="w-48 h-48 mgl-30"
            src="/static/logo.png"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>

    <view class="w mgt-48">
      <view class="mgb-16">
        <view class="text-32 text-600 text-303030">其他</view>
      </view>
      <view
        class="w h-96 flex ai_center jc_between mgb-16 menu_border"
        v-for="item in otherMenu"
        :key="item.name"
        @click="$navTo(item.pagePath)"
      >
        <view class="text-28 text-400 text-303030">{{ item.title }}</view>
        <view class="flex ai_center">
          <image
            class="w-64 h-64 mgr-24"
            v-if="item.name === 'weixin'"
            src="/static/logo.png"
            mode="scaleToFill"
          />
          <view class="text-24 text-600 text-070202">
            {{ item.value }}
          </view>
          <image
            class="w-48 h-48 mgl-30"
            src="/static/logo.png"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "个人资料",
      menu: [
        { title: "我的头像", name: "avatar", value: "", pagePath: "" },
        { title: "我的昵称", name: "name", value: "czh", pagePath: "" },
        { title: "用户ID", name: "id", value: "00001", pagePath: "" },
        {
          title: "注册时间",
          name: "time",
          value: "2025/05/02  18：00",
          pagePath: "",
        },
        { title: "我的邀请人", name: "invite", value: "2555885", pagePath: "" },
      ],
      otherMenu: [
        { title: "微信", name: "weixin", value: "czh", pagePath: "" },
        { title: "支付宝", name: "aliPay", value: "已绑定", pagePath: "" },
        {
          title: "实名认证",
          name: "realName",
          value: "未实名",
          pagePath: "/pages/personalProfile/realAuth",
        },
      ],
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.menu_border {
  border-bottom: 2rpx solid #f2f2f7;
}
</style>