172 lines
10 KiB
Vue
172 lines
10 KiB
Vue
<script setup lang="ts">
|
|
// import { Tools } from '@element-plus/icons-vue'
|
|
import { onMounted, ref, reactive } from 'vue';
|
|
import { useToolsStore } from '@/store/modules/tools'
|
|
import { useRouter, useRoute } from "vue-router"
|
|
const props = defineProps({
|
|
bgColor: String,
|
|
})
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const appName = ref(import.meta.env.VITE_APP_TITLE || '工具坊')
|
|
const appNet = ref(import.meta.env.VITE_APP_DESC || '')
|
|
//菜单选中
|
|
const defaultActive = ref('')
|
|
//默认展开的菜单
|
|
const defaultOpeneds = ['cate']
|
|
//store
|
|
const toolsStore = useToolsStore()
|
|
//获取分类
|
|
const getToolCates = async () => {
|
|
try {
|
|
await toolsStore.getToolCate()
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
const handleOpen = () => {
|
|
|
|
}
|
|
|
|
const handleClose = () => {
|
|
|
|
}
|
|
|
|
//跳转锚点
|
|
const query = reactive({ value: '' })
|
|
const gotoAnchor = (anchor: string) => {
|
|
console.log(route.path)
|
|
if (route.path === '/') {
|
|
document?.getElementById(anchor)?.scrollIntoView({
|
|
behavior: "smooth", //smooth:平滑，auto：直接定位
|
|
block: "start",
|
|
inline: "start",
|
|
});
|
|
} else {
|
|
query.value = anchor
|
|
router.push({
|
|
path: '/',
|
|
query: query
|
|
})
|
|
}
|
|
}
|
|
const gotoAbout = () => {
|
|
router.push('about')
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await getToolCates()
|
|
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- -->
|
|
<el-scrollbar>
|
|
<!-- logo -->
|
|
<div class="flex justify-center">
|
|
<router-link class="flex flex-row h-24" to="/">
|
|
<img class="h-12 w-auto rounded-lg mr-2 mt-auto mb-auto" src="@/assets/logo.png" :alt="appNet">
|
|
<div class="flex flex-col mt-auto mb-auto">
|
|
<div class="text-2xl">{{ appName }}</div>
|
|
<div class="text-sm text-gray-500">{{ appNet }}</div>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
<!-- menu -->
|
|
<!-- #f5f5fb -->
|
|
<div class="flex justify-center pl-8 pr-8">
|
|
<el-menu
|
|
class="w-[200px]"
|
|
:default-active="defaultActive"
|
|
:default-openeds="defaultOpeneds"
|
|
background-color="transparent"
|
|
:text-color="props.bgColor ?? '#f5f5fb'"
|
|
@open="handleOpen"
|
|
@close="handleClose"
|
|
>
|
|
<el-sub-menu index="cate">
|
|
<template #title>
|
|
<svg t="1702896224109" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4239" width="20" height="20">
|
|
<path fill="currentColor" d="M382.083 103.466c-63.464-1.533-127.026-1.561-190.487 0.056-53.88 1.372-85.947 33.283-87.526 87.481-1.798 61.735-1.627 123.592-0.105 185.34 1.405 57.042 33.666 88.862 89.987 91.055 30.847 1.2 61.778 0.214 92.673 0.214v0.084c29.177 0 58.354 0.006 87.532-0.01 3.43 0 6.875 0.043 10.292-0.216 48.928-3.716 81.464-31.602 83.804-80.677 3.181-66.767 3.15-133.886 0.34-200.68-2.194-52.18-34.273-81.385-86.51-82.647z m0.727 223.135c-1.853 39.629-13.76 53.399-51.558 55.395-30.725 1.622-61.703 1.765-92.399-0.15-32.22-2.01-46.292-15.941-48.33-48.552-2.025-32.392-2.108-65.126 0.084-97.498 2.219-32.758 16.121-45.288 49.214-46.935 29.033-1.446 58.217-1.13 87.29-0.204 42.456 1.353 53.884 13.188 55.727 55.78 0.592 13.67 0.092 27.387 0.092 41.083-0.02 13.695 0.518 27.415-0.12 41.081zM468.883 657.431c-4.914-60.1-41.873-98.957-102.147-102.763-52.991-3.346-106.533-3.413-159.516-0.013-61.945 3.977-100.908 45.842-103.178 107.37-1.834 49.716-1.806 99.605 0 149.324 2.232 61.528 42.13 104.63 102.68 108.128 53.034 3.063 106.506 2.894 159.565 0.06 58.998-3.15 97.39-42.913 102.53-102.565 2.2-25.551 0.367-51.451 0.367-77.191l0.08-0.001c0-27.46 1.85-55.071-0.381-82.349zM382.676 782.81c-2.191 34.758-12.473 47.623-45.629 49.797-34.02 2.23-68.343 1.291-102.466-0.024-25.612-0.987-42.22-15.758-43.434-41.638-1.677-35.784-2.509-71.85 0.088-107.519 2.16-29.666 15.98-40.487 47.82-41.924 30.705-1.386 61.557-1.324 92.274-0.118 37.12 1.456 48.88 13.204 51.308 49.153 1.033 15.313 0.173 30.753 0.173 46.135 0.027 15.382 0.832 30.817-0.134 46.138zM638.575 466.817c66.85 2.183 133.883 2.232 200.728-0.029 48.107-1.626 78.502-34.315 80.95-82.898 1.64-32.522 0.314-65.193 0.314-97.798h0.18c0-29.173 0.002-58.345-0.006-87.518 0-3.433 0.093-6.874-0.12-10.295-3.237-51.777-32.66-83.203-84.46-84.65-65.155-1.824-130.44-1.78-195.6 0.026-49.255 1.363-81.717 31.976-83.38 80.049-2.312 66.843-2.187 133.87-0.181 200.732 1.448 48.3 33.485 80.811 81.575 82.38zM741.2 188.405c93.184 0.015 94.452 1.293 94.464 95.22 0.013 96.831-1.987 98.873-96.789 98.868-94.393-0.003-95.62-3.049-97.83-98.688-2.4-103.803 20.564-97.124 100.155-95.4zM920.572 648.267c-1.48-60.79-30.968-91.401-92.039-94.662-29.17-1.558-58.49-0.269-87.743-0.269v0.082c-30.974 0-61.945-0.023-92.918 0.034-3.43 0.005-6.883 0.302-10.287 0.754-49.282 6.534-79.299 35.872-80.674 84.647a3477.609 3477.609 0 0 0 0.02 196.134c1.362 48.254 32.605 80.758 80.595 84.46 35.921 2.77 72.291 2.164 108.32 0.313 28.821-1.48 47.916-22.114 46.583-45.146-1.247-21.556-18.569-37.536-46.166-40.082-18.794-1.733-37.942 0.3-56.714-1.548-33.033-3.254-45.768-15.985-47.505-49.427a897.595 897.595 0 0 1 0.012-92.884c1.76-33.962 14.537-47.378 47.042-49.022 32.61-1.65 65.425-1.604 98.043-0.06 33.31 1.575 45.544 14.444 48.07 47.957 1.42 18.832-0.68 37.952 1.06 56.734 2.577 27.82 18.189 42.528 42.153 42.564 24.261 0.037 40.096-14.295 41.679-42.527 1.828-32.595 1.266-65.38 0.47-98.052z" p-id="4240"></path>
|
|
</svg>
|
|
<!-- <el-icon size="22px"><Menu /></el-icon> -->
|
|
<span class="ml-2">分类</span>
|
|
</template>
|
|
<el-menu-item-group>
|
|
<el-menu-item
|
|
@click="gotoAnchor('cate_' + item.id)"
|
|
:index="item.id.toString()"
|
|
v-for="(item,index) in toolsStore.cates"
|
|
:key="index"
|
|
>
|
|
{{ item.title }}
|
|
</el-menu-item>
|
|
</el-menu-item-group>
|
|
</el-sub-menu>
|
|
<el-menu-item index="about" @click="gotoAbout">
|
|
<template #title>
|
|
<svg t="1702896616706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5262" width="20" height="20">
|
|
<path fill="currentColor" d="M514.734921 246.750649C505.162698 257.386453 500.249969 270.276034 500.249969 285.16616 500.249969 297.397334 504.175087 308.083785 511.92403 316.364518 519.824913 324.771867 530.03022 329.102159 541.678957 329.102159 551.073917 329.102159 565.077726 326.189975 577.91666 311.780993 587.944704 300.891955 592.984049 287.774464 592.984049 273.162895 592.984049 261.210278 588.881668 250.726414 581.107402 242.622944 564.064792 224.896605 533.043698 226.795855 514.734921 246.750649ZM967.769518 511.708782C967.769518 765.87917 763.334174 972.618938 511.949353 972.618938 260.615179 972.618938 56.179835 765.87917 56.179835 511.708782 56.179835 257.411776 260.615179 50.722655 511.949353 50.722655 763.334174 50.722655 967.769518 257.411776 967.769518 511.708782ZM978.734525 312.084873C953.259243 251.080941 916.540396 196.230581 870.122709 149.382397 823.629053 102.331627 769.4371 65.38487 709.294161 39.529738 584.272819-13.851868 439.853797-13.851868 314.781809 39.529738 254.613547 65.38487 200.497564 102.35695 153.927937 149.382397 107.43428 196.331874 70.740757 251.258204 45.366768 312.084873 19.005169 375.418552 5.53315 442.37347 5.53315 511.607488 5.53315 580.79086 18.929199 647.771101 45.265475 711.02881 70.690111 771.906126 107.383634 826.705839 153.877291 873.857902 200.294977 920.832703 254.436284 957.855429 314.731162 983.634592 377.330465 1010.426688 443.626975 1023.84806 511.92403 1023.84806 580.322378 1023.84806 646.593565 1010.426688 709.218191 983.583945 769.487746 957.804783 823.629053 920.832703 870.072063 873.857902 916.540396 826.781809 953.183273 771.906126 978.633232 711.003487 1005.070801 647.771101 1018.416203 580.79086 1018.416203 511.607488 1018.46685 442.37347 1005.121448 375.418552 978.734525 312.084873ZM553.226402 633.311472C538.462893 647.568514 528.080322 656.457007 521.16705 662.104113 524.560378 643.618073 533.372901 607.000519 554.568539 534.904963 575.71353 463.493137 577.511487 451.00873 577.511487 444.880481 577.511487 434.19403 573.105225 424.7231 565.432253 418.164354 548.161733 403.780696 517.723075 406.61691 480.978905 427.635285 460.492321 439.258699 438.714247 458.200559 414.403838 485.144595L401.742167 499.401637 443.804239 532.144719 454.541336 521.407622C466.266043 509.936148 474.19225 502.440438 479.510152 497.45174 447.400153 604.164305 431.775651 670.511462 431.775651 700.19042 431.775651 713.662438 435.624799 724.855355 443.449712 733.313352 451.325271 742.024581 462.391572 746.582783 475.053243 746.582783 487.461681 746.582783 501.668076 741.746025 518.938596 731.844598 534.512451 722.905458 557.860573 703.406484 590.527685 672.334743L603.82244 659.521132 565.584193 621.890645 553.226402 633.311472Z" p-id="5263"></path>
|
|
</svg>
|
|
<span class="ml-2">关于本站</span>
|
|
</template>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
</el-scrollbar>
|
|
<!-- </div> -->
|
|
</template>
|
|
|
|
<style scoped>
|
|
.el-menu{
|
|
border: none !important;
|
|
list-style: none !important;
|
|
padding-left: 0 !important;
|
|
margin-top: 1rem;
|
|
background-color: none !important;
|
|
}
|
|
.el-menu:hover{
|
|
background-color: none !important;
|
|
}
|
|
.el-sub-menu{
|
|
border-radius: 10rem !important;
|
|
list-style: none !important;
|
|
margin: 0 !important;
|
|
padding-left: 0 !important;
|
|
background-color: none !important;
|
|
}
|
|
|
|
/* 深选择器获取menu__title */
|
|
.el-sub-menu :deep(.el-sub-menu__title){
|
|
/* padding-left: 0 !important; */
|
|
font-size: 1rem;
|
|
border-radius: 1rem;
|
|
}
|
|
.el-sub-menu :deep(.el-sub-menu__title:hover){
|
|
/* padding-left: 0 !important; */
|
|
color: #fff;
|
|
background-color: #409EFF;
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.el-menu-item{
|
|
background-color: transparent;
|
|
line-height: 38px!important;
|
|
height: 38px!important;
|
|
margin: 10px 0;
|
|
border-radius: 1rem !important;
|
|
}
|
|
.el-menu-item.is-active{
|
|
color: #fff;
|
|
background-color: #409EFF;
|
|
border-radius: 1rem;
|
|
}
|
|
.el-menu-item:hover{
|
|
color: #fff;
|
|
background-color: #409EFF;
|
|
border-radius: 1rem;
|
|
}
|
|
</style> |