xyy-m/src/pages/profile/index.vue

<template>
  <div class="min-h-screen bg-[#f8f8f8]">
    <div
      class="h-250 relative w-full bg-[url('~/assets/img/profile/profile_banner.png')] bg-no-repeat bg-cover"
    >
      <div class="absolute left-20 bottom-10 right-20 text-black-3">
        <NuxtLink to="/profile/userInfo" class="flex items-center space-x-10">
          <van-image
            :src="userInfo.headImageUrl"
            class="shrink-0"
            width="75px"
            height="75px"
            fit="cover"
            radius="37.5px"
          />
          <span class="text-2xl flex-1 break-all font-semibold">
            {{ userInfo.showName }}</span
          >
        </NuxtLink>
        <div class="text-xl break-all font-semibold mt-15">
          个性签名：{{ userInfo.personalSign || "暂未填写" }}
        </div>
      </div>
    </div>
    <div class="bg-white rounded-xl mx-20 mt-20 p-20">
      <div class="text-xl font-semibold">常用功能</div>
      <div class="grid grid-cols-3 gap-y-15 mt-20">
        <NuxtLink
          :to="item.to"
          class="flex flex-col items-center"
          v-for="item in menuData"
          :key="item.to"
        >
          <img :src="item.icon" class="w-40 h-40" alt="" srcset="" />
          <div class="text-black-3 text-sm mt-5">{{ item.label }}</div>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
import profile_travel_order from "~/assets/img/profile/profile_travel_order.png";
import profile_labour_order from "~/assets/img/profile/profile_labour_order.png";
import profile_travel_note from "~/assets/img/profile/profile_travel_note.png";
import profile_colection from "~/assets/img/profile/profile_colection.png";
import profile_car_order from "~/assets/img/profile/profile_car_order.png";
import profile_visa_order from "~/assets/img/profile/profile_visa_order.png";

const userInfoStore = useUserInfoStore();
const { userInfo } = storeToRefs(userInfoStore);

onMounted(() => {
  userInfoStore.getUserInfo();
});

const menuData = [
  {
    icon: profile_travel_order,
    label: "旅游订单",
    to: "/profile/travel-orders",
  },
  {
    icon: profile_travel_note,
    label: "我的游记",
    to: "/profile/notes",
  },
  {
    icon: profile_colection,
    label: "我的收藏",
    to: "/profile/collection",
  },
];
</script>

<style lang="scss" scoped></style>