44 lines
2.4 KiB
Vue
44 lines
2.4 KiB
Vue
<!-- 工具箱详情页面 -->
|
||
<template>
|
||
<KlNavTab />
|
||
<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>
|
||
<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">
|
||
import useUserStore from '~/stores/user'
|
||
const userStore = useUserStore()
|
||
</script>
|