优化工具箱详情页面样式及交互功能

pages/toolbox-detail/index.vue

@@ -1,92 +1,43 @@
 <!-- 工具箱详情页面 -->
 <template>
   <KlNavTab />
-  <div class="toolbox-detail">
+  <div class="toolbox-detail w-[1019px] min-h-[374px] bg-[#FFFFFF] rounded-[12px] border border-solid border-[#EEEEEE] pa-[37px] pt-[20px] box-border ma-auto mt-[30px]">
-    <div class="content-card">
+    <div class="w-[100%]">
-      <div class="header">
+      <h1 class="font-[Microsoft_YaHei] font-bold text-[24px] text-[#333333] leading-[21px]">工具箱使用详情</h1>
-        <img src="~/assets/images/avatar.png" alt="头像" class="avatar" />
+      <div class="flex items-center w-[100%] mt-[30px]">
-        <div class="user-info">
+        <img :src="userStore.userInfoRes.avatar" alt="头像" class="w-[49px] h-[50px] rounded-[50%] mr-[16px]" />
-          <h2 class="title">工具箱使用详情</h2>
+        <div class="flex flex-col items-start w-[100%]">
-          <p class="nickname">用户昵称</p>
+          <p class="font-[Microsoft_YaHei] font-normal text-[16px] text-[#333333] leading-[8px]">{{ userStore.userInfoRes.nickname || '用户昵称' }}</p>
-          <p class="time">2024-06-15 14:30</p>
+          <div class="flex items-center justify-between mt-[8px] w-[100%]">
+            <p class="font-[Microsoft_YaHei] font-normal text-[12px] text-[#999999] leading-[8px]">{{ new Date().toLocaleString('zh-CN') }}</p>
+            <div class="flex items-center justify-between font-[Microsoft_YaHei] font-normal text-[14px] text-[#666666] leading-[8px]">
+              <div class="mr-[9px] flex items-center">
+                <img src="~/assets/images/look.png" alt="" srcset="" class="mr-[2px] h-[17px]" />
+                <span class="color-[#666]">1</span>
+              </div>
+              <div class="mr-[9px] flex items-center">
+                <img src="~/assets/images/add.png" alt="" srcset="" class="mr-[2px] h-[22px]" />
+                <span class="color-[#666]">2</span>
+              </div>
+              <div class="flex items-center">
+                <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
+                <span class="color-[#666]">3</span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="body">
+    </div>
-        <p class="text">
+    <div class="w-[938px] h-[1px] bg-[#EEEEEE] rounded-[1px] my-[20px]"></div>
-          这里是工具箱的详细使用说明和描述内容。您可以在这里添加关于该工具箱功能的详细介绍，
+    <div class="body">
-          使用方法，注意事项等。内容支持多行文本，会自动适配容器宽度并保持良好的阅读体验。
+      <p class="font-[Microsoft_YaHei] font-normal text-[14px] text-[#333333] leading-[26px]">
-        </p>
+        这里是工具箱的详细使用说明和描述内容。您可以在这里添加关于该工具箱功能的详细介绍，
-      </div>
+        使用方法，注意事项等。内容支持多行文本，会自动适配容器宽度并保持良好的阅读体验。
+      </p>
     </div>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
-<style scoped lang="scss">
+  import useUserStore from '~/stores/user'
-  .toolbox-detail {
+  const userStore = useUserStore()
-    height: 100%;
+</script>
-    background-color: #f5f7fa;
-    padding: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .content-card {
-      width: 100%;
-      max-width: 600px;
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-      overflow: hidden;
-
-      .header {
-        display: flex;
-        align-items: center;
-        padding: 24px;
-        gap: 16px;
-        border-bottom: 1px solid #f0f0f0;
-
-        .avatar {
-          width: 50px;
-          height: 50px;
-          border-radius: 50%;
-          object-fit: cover;
-          border: 2px solid #f0f0f0;
-        }
-
-        .user-info {
-          flex: 1;
-
-          .title {
-            margin: 0 0 8px 0;
-            font-size: 20px;
-            font-weight: 600;
-            color: #1a1a1a;
-          }
-
-          .nickname {
-            margin: 0 0 4px 0;
-            font-size: 14px;
-            color: #666;
-          }
-
-          .time {
-            margin: 0;
-            font-size: 12px;
-            color: #999;
-          }
-        }
-      }
-
-      .body {
-        padding: 24px;
-
-        .text {
-          margin: 0;
-          font-size: 14px;
-          line-height: 1.6;
-          color: #333;
-        }
-      }
-    }
-  }
-</style>

pages/toolbox/index.vue

@@ -28,7 +28,7 @@
         </el-form-item>
       </el-form>
       <div class="box-border border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px] py-[17px]">
-        <div @click="handleClick(item)" v-for="item in pageRes?.list" :key="item.id" class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px]">
+        <div @click="handleClick(item)" v-for="item in pageRes?.list" :key="item.id" class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px] cursor-pointer">
           <div class="h-[142px] w-[200px] text-center">
             <el-image :src="item.iconUrl" alt="" srcset="" class="max-w-[100%] rd-[4px]" fit="cover" />
           </div>