wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wangqiao
2025-09-18 22:44:00 +08:00
parent 06b60a4ff9
commit bf189f7f5b
2 changed files with 36 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
pages/toolbox-detail/index.vue
View File

@ -1,92 +1,43 @@
<!-- 工具箱详情页面 -->
<template>
<KlNavTab />
<div class="toolbox-detail">
<div class="content-card">
<div class="header">
<img src="~/assets/images/avatar.png" alt="头像" class="avatar" />
<div class="user-info">
<h2 class="title">工具箱使用详情</h2>
<p class="nickname">用户昵称</p>
<p class="time">2024-06-15 14:30</p>
<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="w-[100%]">
<h1 class="font-[Microsoft_YaHei] font-bold text-[24px] text-[#333333] leading-[21px]">工具箱使用详情</h1>
<div class="flex items-center w-[100%] mt-[30px]">
<img :src="userStore.userInfoRes.avatar" alt="头像" class="w-[49px] h-[50px] rounded-[50%] mr-[16px]" />
<div class="flex flex-col items-start w-[100%]">
<p class="font-[Microsoft_YaHei] font-normal text-[16px] text-[#333333] leading-[8px]">{{ userStore.userInfoRes.nickname || '用户昵称' }}</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">
<p class="text">
这里是工具箱的详细使用说明和描述内容。您可以在这里添加关于该工具箱功能的详细介绍，
使用方法，注意事项等。内容支持多行文本，会自动适配容器宽度并保持良好的阅读体验。
</p>
</div>
</div>
<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>
</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.toolbox-detail {
height: 100%;
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>
<script setup lang="ts">
import useUserStore from '~/stores/user'
const userStore = useUserStore()
</script>