6-7修改

src/assets/styles/index.scss

@@ -205,7 +205,7 @@ button, input, optgroup, select, textarea {
 }
 
 .buttonBg1 {
-  background: linear-gradient(270deg, #5ea1f9, #d287f1);
+  // background: linear-gradient(270deg, #5ea1f9, #d287f1);
 }
 
 .fontH5 {
@@ -218,4 +218,5 @@ button, input, optgroup, select, textarea {
   --bg-color3: rgba(109, 94, 227, 0.9);
   --bg-color4: #9387ff;
   --color1: #e2e2e2;
+  --color2: #8f8f8f;
 }

src/router/index.js

@@ -87,6 +87,12 @@ export const constantRoutes = [
     component: () => import("@/views/vip/index"),
     name: "vip",
   },
+  // 个人中心
+  {
+    path: "/profile",
+    component: () => import("@/views/profile/index"),
+    name: "profile",
+  },
   
 ];
 

src/views/chat/index.vue

@@ -55,7 +55,7 @@
                     创作人
                   </div>
                   <div class="text-sm max-h-48">
-                    {{ info.prologue }}
+                    {{ info.author }}
                   </div>
                 </div>
                 <div class="flex justify-between items-center  mt-5 text-base pb-3 border-b border-gray-200">
@@ -64,7 +64,7 @@
                     创建时间
                   </div>
                   <div class="text-sm max-h-48">
-                    2024-06-20
+                    {{ info.createTime }}
                   </div>
                 </div>
                 <div class="mt-5 text-base">

src/views/components/NavMenu.vue

@@ -24,7 +24,7 @@
           <i class="icon el-icon-plus"></i>
           <div class="text">创建</div>
         </div>
-        <div v-if="haveToken" class="menu">
+        <div v-if="haveToken" class="menu" :class="$route.path == '/profile' && 'menuActive'" @click="routeTo('/profile')">
           <i class="icon el-icon-files"></i>
           <div class="text">个人中心</div>
         </div>
@@ -53,14 +53,25 @@ import 'vue-awesome/icons/crown'
 export default {
   data() {
     return {
+      haveToken: false,
       getToken, 
     }
   },
+  created() {
+    if (this.getToken()) {
+      this.haveToken = true
+    }
+  },
   mounted() {
   },
-  computed: {
-    haveToken() {
-      return this.$store.state.user.token != null
+  watch: {
+    '$store.state.user.token': function(newVal, oldVal) {
+      console.log(newVal, '登录状态变化');
+      if (newVal) {
+        this.haveToken = true
+      } else {
+        this.haveToken = false
+      }
     }
   },
   methods: {

src/views/profile/index.vue

@@ -0,0 +1,139 @@
+<!-- 个人中心 -->
+<template>
+  <div class=" h-full w-full">
+    <div class="h-72 bg-blue-500 relative text-white">
+      <div class="flex absolute bottom-0 w-full px-28 justify-between items-end">
+        <div class=" h-36 ">
+          <div class="flex justify-center">
+            <div class="w-24 h-24">
+              <img class="w-full h-full rounded-full" src="@/assets/images/default_avatar_user.png" alt="">
+            </div>
+            <div class="flex flex-col justify-center ml-3">
+              <div class="font-medium text-2xl ">用户名称</div>
+              <div class=" text-base">UID:1231235 <i class="el-icon-copy-document text-base"></i></div>
+            </div>
+          </div>
+          <div class="flex mt-3">
+            <div class=" text-sm">
+              关注: 15
+            </div>
+            <div class=" text-sm ml-4">
+              粉丝: 6
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center h-20">
+          <div class=" w-10 h-10 rounded-full button flex justify-center items-center cursor-pointer mr-4">
+            <i class="el-icon-share text-xl"></i>
+          </div>
+          <div class="w-32 h-10 flex justify-center items-center rounded-full button cursor-pointer">
+            <i class="el-icon-edit"></i>
+            编辑资料
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="px-28 py-10">
+      <div class="h-18 flex justify-between pb-4 border-b border-gray-200">
+        <div class="flex justify-center">
+          <div 
+            class="labelButton flex justify-center items-center rounded-full mr-4 w-28 h-10 cursor-pointer"
+            :class="active == 1 && 'buttonBg1'"
+          >
+            公开内容
+          </div>
+          <div 
+            class="labelButton flex justify-center items-center rounded-full w-28 h-10 cursor-pointer"
+            :class="active == 2 && 'buttonBg1'"
+          >
+            <i class="el-icon-lock"></i>
+            非公开
+          </div>
+        </div>
+        <div class="flex justify-center">
+          <div class="text-gray-800 cursor-pointer">
+            <i class="el-icon-question"></i>
+            操作指南
+          </div>
+          <div class=" text-gray-800 cursor-pointer ml-4">
+            <i class="el-icon-plus"></i>
+            创建
+          </div>
+        </div>
+      </div>
+      <div class="grid grid-cols-5 gap-4 mt-4">
+        <div
+          class="box2 relative rounded-lg overflow-hidden shadow-lg cursor-pointer"
+          @click="toDetail(item)"
+        > 
+          <div class="w-full overflow-hidden" style="height: 250px;">
+            <img :src="baseApi + item.picture" class="w-full img" />
+          </div>
+          <div class="p-2">
+            <h3 class="text-lg font-bold">{{ item.characterName }}</h3>
+            <p class="prologue text-sm">
+              {{ item.prologue }}
+            </p>
+
+            <div class="labels flex my-1 flex-wrap">
+              <div v-for="(item2, index2) in item.labelArr" :key="index2" class="m-0.5 tag px-2 py-1 rounded flex items-center text-xs text-gray-500">
+                <!-- <i class="fas fa-smile text-yellow-400 mr-2"></i> -->
+                {{ item2 }}
+              </div>
+            </div>
+          </div>
+          <div class="absolute w-full bottom-0 flex items-center justify-between mt-3 px-3 pb-3">
+            <div class="flex items-center box1">
+              <v-icon name="heart" scale="1"/>
+              <span class="ml-1">{{ item.likeNum }}</span>
+            </div>
+            <div class="flex items-center box1">
+              <!-- <i class="fas fa-comment mr-1"></i> -->
+              <v-icon name="star" scale="1"/>
+              <span class="ml-1">{{ item.collections }}</span>
+            </div>
+            <!-- <div class="flex items-center">
+              <v-icon name="share" scale="1.5"/>
+              <span>{{ item.likeNum }}</span>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: 1
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.button {
+  // background-color: #fff;
+  color: #fff;
+  border: 1px solid #fff;
+}
+.labelButton {
+  // border: solid 1px #e6e6e6;
+  background: var(--bg-color2);
+  color: var(--color2);
+} 
+.buttonBg1 {
+  background: var(--bg-color1);
+  color: #fff;
+}
+</style>