youxi-app/pages/user/info.uvue

<script lang="ts" setup>
import Back from '@/components/back.uvue'
import user from './components/user.uvue'
import conversion from './components/conversion.uvue'
import setting from './components/set.uvue'
import { ref, computed } from 'vue'
const active = ref<'user' | 'conversion' | 'set'>('user')


</script>

<template>
  <cl-page>
    <Back />
    <img src="https://oss.xiaoxiongcode.com/static/个人中心/bg.png" alt="" class="w-full h-full object-cover">
    <view class="content">
      <view class="flex flex-row justify-between items-center">
        <view
          class="flex flex-row items-center justify-center gap-2 w-[120px] bg-[#B1E5FE] rounded-xl px-[10px] py-[5px] text-[#00A9FF]"
          :class="{ 'bg-[#00A9FF] !text-white': active === 'user' }" @click="active = 'user'">
          <cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/图层 506.png" mode="heightFix" height="20px"
            width="auto"></cl-image> 个人信息
        </view>
        <view
          class="flex flex-row items-center justify-center gap-2 w-[120px] bg-[#B1E5FE] rounded-xl px-[10px] py-[5px] text-[#00A9FF]"
          :class="{ 'bg-[#00A9FF] !text-white': active === 'conversion' }" @click="active = 'conversion'">
          <cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/图层 503.png" mode="heightFix" height="20px"
            width="auto"></cl-image> 兑换记录
        </view>
        <view
          class="flex flex-row items-center justify-center gap-2 w-[120px] bg-[#B1E5FE] rounded-xl px-[10px] py-[5px] text-[#00A9FF]"
          :class="{ 'bg-[#00A9FF] !text-white': active === 'set' }" @click="active = 'set'">
          <cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/图层 504.png" mode="heightFix" height="20px"
            width="auto"></cl-image> 设置
        </view>
      </view>
      <view class="w-full h-full">
        <user v-if="active === 'user'" />
        <conversion v-else-if="active === 'conversion'" />
        <setting v-else-if="active === 'set'" />
      </view>
    </view>
  </cl-page>
</template>

<style lang="scss" scoped>
.content {
  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#76DAF9] w-[80vw] h-[80vh] max-w-[1000px] max-h-[620px] rounded-[30px] p-[20px] text-white;

}
</style>