106 lines
3.2 KiB
Vue
106 lines
3.2 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 rounded-lg 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">
|
|
<router-link
|
|
v-for="(item, index) in menuItems"
|
|
:key="index"
|
|
target="_blank"
|
|
:to="item.path"
|
|
class="parent-links relative rounded-lg px3 py2 text-[#1A65FF]"
|
|
>
|
|
{{ item.name }}
|
|
<img v-if="item.path === '/communication/channel'" src="@/assets/images/hot.png" alt="火" class="absolute right--15px top--2px" />
|
|
</router-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 line-height-44px" @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 '@/store/user'
|
|
const userStore = useUserStore()
|
|
import { BellFilled } from '@element-plus/icons-vue'
|
|
import { ref, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
const menuItems = ref([
|
|
{ name: '首页', path: '/index' },
|
|
{ name: '图纸', path: '/drawe' },
|
|
{ name: '文本', path: '/text' },
|
|
{ name: '模型', path: '/model' },
|
|
{ name: '国外专区', path: '/foreign' },
|
|
{ name: '工具箱', path: '/toolbox' },
|
|
{ name: '交流频道', path: '/communication/channel' },
|
|
// { name: '牛人社区', path: '/community' },
|
|
])
|
|
|
|
// 是否登录
|
|
const isLogin = computed(() => {
|
|
return !!userStore.token
|
|
})
|
|
|
|
// 用户中心
|
|
const handleUserCenter = () => {
|
|
router.push('/personal/center/info')
|
|
}
|
|
|
|
// 消息中心
|
|
const handleMessageCenter = () => {
|
|
router.push('/personal/center/message')
|
|
}
|
|
</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>
|