个人中心

src/pages/home/wode/index.vue

@@ -1,15 +1,73 @@
 <template>
   <div>
     <van-nav-bar title="个人中心"></van-nav-bar>
+    <div class="relative my-30px">
+      <div class="text-center">
+        <div class="w-100px h-100px bg-hex-cccccc rounded-50px m-auto"></div>
+        <div class="text-white mt-10px">名称</div>
+      </div>
+      <div class="absolute right-20px top-0">
+        <img class="w-22px" :src="editImg" alt="" />
+      </div>
+    </div>
+    <div class="px-20px">
+      <div class="flex items-center p-4px box-border bg-hex-1A1B22 rounded-12px text-14px">
+        <div class="tab_item" :class="activeTab==index?'active':''" v-for="(item, index) in tabData" :key="index" @click="handleClick(index)">{{item}}</div>
+      </div>
+      <div class="mt-20px flex">
+        <div class="flex-1 mr-15px">
+          <template v-if="activeTab==0">
+            <img class="w-full max-h-190px" :src="syImg" alt="" />
+          </template>
+          <template v-else>
+            <img class="w-full max-h-190px" :src="xxImg" alt="" />
+          </template>
+        </div>
+        <div class="write-vertical-right rounded-5px text-white text-12px bg-white bg-opacity-10 w-30px flex items-center justify-center my-20px tracking-8px" @click="lookMore">查看更多</div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script>
-export default {
+<script setup>
+import editImg from "~/assets/wode/edit.png";
+import syImg from "~/assets/wode/sy.png";
+import xxImg from "~/assets/wode/xx.png";
 
+const router = useRouter()
+
+const tabData = $ref(["我的声音", "我的形象"]);
+let activeTab = $ref("");
+
+handleClick(0);
+function handleClick(index) {
+  activeTab = index;
 }
-</script>
 
-<style>
+function lookMore() {
+  let uri = "";
+  if (activeTab == 0) {
+    uri = "wdsy";
+  } else if (activeTab == 1) {
+    uri = "wdxx";
+  }
+  router.push({
+    path: `/home/wode/${uri}`
+  })
+}
 
+</script>
+
+<style lang="scss" scoped>
+.tab_item {
+  flex: 1;
+  color: #808080;
+  text-align: center;
+  line-height: 40px;
+  &.active {
+    color: #fff;
+    background: #db664d;
+    border-radius: 8px;
+  }
+}
 </style>

src/pages/home/wode/wdsy.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <van-nav-bar title="我的声音" @click-left="back">
+      <template #left>
+        <van-icon name="arrow-left" color="#ffffff" size="18px" />
+      </template>
+    </van-nav-bar>
+    <div class="px-20px">
+      <div class="flex items-center p-4px box-border bg-hex-1A1B22 rounded-12px text-14px">
+        <div class="type_item" :class="activeType==index?'active':''" v-for="(item, index) in typeData" :key="index" @click="handleClick(index)">{{item}}</div>
+      </div>
+      <div class="mt-15px grid grid-cols-2 gap-12px">
+        <div class="" v-for="i in 6" :key="i">
+          <img class="w-full" :src="voiceImg" alt="" />
+          <div class="text-center text-white mb-10px">声音{{i}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import voiceImg from "~/assets/wode/voice.png";
+const router = useRouter()
+
+function back() {
+  router.back();
+}
+
+
+const typeData = $ref(["通过", "不通过", "待审核"]);
+let activeType = $ref("");
+
+handleClick(0);
+function handleClick(index) {
+  activeType = index;
+}
+</script>
+
+<style lang="scss" scoped>
+.type_item {
+  flex: 1;
+  color: #808080;
+  text-align: center;
+  line-height: 40px;
+  &.active {
+    color: #fff;
+    background: #db664d;
+    border-radius: 8px;
+  }
+}
+</style>

src/pages/home/wode/wdxx.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <van-nav-bar title="我的形象" @click-left="back">
+      <template #left>
+        <van-icon name="arrow-left" color="#ffffff" size="18px" />
+      </template>
+    </van-nav-bar>
+  </div>
+</template>
+
+<script setup>
+const router = useRouter()
+
+function back() {
+  router.back();
+}
+</script>
+
+<style>
+
+</style>