113 lines
3.4 KiB
Vue
113 lines
3.4 KiB
Vue
<template>
|
|
<div class="box-border">
|
|
<div class="flex items-center">
|
|
<div class="flex items-center">
|
|
<div class="box-border h-[100%] h-[55px] w-[221px] flex items-center rd-[2px] bg-[#1A65FF] pl-[24px] text-white">
|
|
<img src="~/assets/images/1.png" alt="" srcset="" />
|
|
<span class="ml-[12px] text-[16px]">全部资源分类</span>
|
|
</div>
|
|
<div class="item-center ml-[45px] w-[660px] flex justify-between">
|
|
<nuxt-link
|
|
v-for="(item, index) in tdkList"
|
|
:key="index"
|
|
:to="item.path"
|
|
class="parent-links relative rounded-lg px-3 py-2 text-[#1A65FF]"
|
|
>
|
|
{{ item.remark }}
|
|
<img v-if="item.path === '/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right-[-12px] top-[0px]" />
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
<div v-if="isLogin" class="flex flex-1 items-center justify-end">
|
|
<div class="h-[36px] w-[36px] cursor-pointer border-rd-[50%] bg-[#F5F5F5] text-center flex items-center justify-center" @click="handleUserCenter">
|
|
<img src="~/assets/images/user.png" alt="" srcset="" class="h-[19px] w-[17px]" />
|
|
</div>
|
|
<div class="ml-[8px] h-[36px] w-[36px] cursor-pointer border-rd-[50%] text-center line-height-[44px]" @click="handleMessageCenter">
|
|
<el-icon size="20px" color="#999999"><BellFilled /></el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import useUserStore from '~/stores/user'
|
|
import { getTDKList } from '~/api/home/index'
|
|
const userStore = useUserStore()
|
|
import { BellFilled } from '@element-plus/icons-vue'
|
|
import { ref, computed } from 'vue'
|
|
// const menuItems = ref([
|
|
// { name: '首页', path: '/' },
|
|
// { name: '图纸', path: '/drawe' },
|
|
// { name: '文本', path: '/text' },
|
|
// { name: '模型', path: '/model' },
|
|
// { name: '国外专区', path: '/foreign' },
|
|
// { name: '工具箱', path: '/toolbox' },
|
|
// { name: '交流频道', path: '/channel' },
|
|
// // { name: '牛人社区', path: '/community' },
|
|
// ])
|
|
|
|
const { data: tdkList } = await useAsyncData('get-tdk-list-home', async () => {
|
|
const res = await getTDKList()
|
|
// 添加首页
|
|
if (!res.data.find((c) => c.remark === '首页')) {
|
|
res.data.unshift({ remark: '首页', path: '/' })
|
|
}
|
|
return res.data
|
|
})
|
|
|
|
// 是否登录
|
|
const isLogin = computed(() => {
|
|
return !!userStore.token
|
|
})
|
|
|
|
// 用户中心
|
|
const handleUserCenter = () => {
|
|
navigateTo('/personal-center/info')
|
|
}
|
|
|
|
// 消息中心
|
|
const handleMessageCenter = () => {
|
|
navigateTo('/personal-center/message-center')
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
/* 覆盖默认的input number样式 */
|
|
input[type='number']::-webkit-inner-spin-button,
|
|
input[type='number']::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
/* 自定义滚动条样式 */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
|
|
.parent-links {
|
|
text-decoration: none;
|
|
font-size: 16px;
|
|
color: #1a65ff;
|
|
&:hover {
|
|
}
|
|
}
|
|
</style>
|