<template>
|
<div class="header-container w-screen py-1">
|
<div class="header-content container h-16 flex items-center mx-auto">
|
<div class="head-item w-56">
|
<div class="logo-container flex items-center">
|
<svg t="1645066822185" class="icon" viewBox="0 0 1210 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
p-id="3196" width="50" height="50">
|
<path
|
d="M1052.079312 583.421799c16.988424 75.666705-1.067278 155.023037-49.058109 215.637823-47.994499 60.603782-120.712436 95.882636-197.585788 95.853295H193.808871c-67.72447-0.055014-130.273926-36.569857-164.086464-95.790946a192.825215 192.825215 0 0 1 0.151106-191.303152c33.913765-59.158739 96.517868-95.567221 164.243805-95.512206 2.006923 0 3.942693 0.234728 5.932378 0.297078 23.541731-117.45192 110.322063-211.686327 224.671542-243.970201 114.356447-32.290842 236.990716 2.824069 317.506017 90.902372 1.067278-80.33192 42.966189-154.466659 110.930888-196.293318a229.606693 229.606693 0 0 1 223.706591-9.626406c-48.306246 11.244928-82.294097 54.97765-81.600917 105.006212 0.685845 50.022693 35.862006 92.787163 84.457994 102.673971s97.448711-15.778842 117.294212-61.62008c33.423037 118.358189-30.012149 242.565868-144.937077 283.745925z m-552.307163-241.25616c-133.849857 0.006235-242.356447 109.515186-242.356447 244.598464 0 8.032092 0.410407 15.987163 1.157501 23.817536a115.155989 115.155989 0 0 0-130.677363 16.152206c-36.016046 32.227393-48.559312 83.559427-31.525777 129.001261 17.035003 45.434499 60.115622 75.527335 108.253158 75.619026 3.438029 0 6.826544-0.157708 10.191587-0.462121v0.462121H784.166877v-0.583152c3.498911 0.205387 6.953811 0.583152 10.504069 0.583152 59.760229 0 115.581433-30.092837 148.806418-80.225559a182.086785 182.086785 0 0 0 16.662006-169.433123c-0.722521-1.760458-1.551404-3.46957-2.32894-5.200688-1.423037-3.194499-2.897421-6.352321-4.50384-9.455129-0.935244-1.892493-1.965845-3.693295-2.996447-5.519771-1.646762-2.934097-3.388883-5.813181-5.19702-8.640916-1.085616-1.690774-2.149226-3.396218-3.282521-5.04298q-3.317364-4.797249-6.939141-9.363439c-0.861891-1.107622-1.6651-2.262923-2.556332-3.344871q-4.956791-6.018567-10.427049-11.575014c-1.096619-1.12596-2.284928-2.160229-3.418223-3.260516q-4.010544-3.900516-8.230144-7.558968c-1.492722-1.272665-3.02212-2.490315-4.547851-3.707966q-4.016046-3.212837-8.226475-6.201948c-1.580745-1.12596-3.172493-2.262923-4.804585-3.326533q-4.703725-3.097307-9.601834-5.890201c-1.35702-0.773868-2.670029-1.621089-4.045386-2.361948-4.687221-2.519656-9.370774-4.844928-14.285387-6.946476-0.935244-0.399771-1.94384-0.722521-2.893754-1.111289q-6.007564-2.475645-12.180172-4.511175c-1.74212-0.564814-3.524585-1.045272-5.285043-1.569742q-8.092607-2.360115-16.383266-3.968367c-3.744642-0.711519-7.489284-1.26533-11.307278-1.738453-1.74212-0.220057-3.458567-0.480458-5.226361-0.652837q-8.400688-0.825215-16.860057-0.861891c-5.18235 0-10.306017 0.407106-15.323324 0.850889-3.16149 0.311748-6.293639 0.66384-9.370774 1.107621a178.337009 178.337009 0 0 0-49.237822 14.369743c-39.162865-87.670831-125.612378-144.040711-220.908195-144.046946z m431.935817-117.110831a205.230946 205.230946 0 0 1 1.415702-23.148928c-75.575014 26.069822-119.945903 104.99961-103.35725 183.846876 79.488367 7.731347 150.687908 52.912779 192.036677 121.860402 44.084814-10.878166 81.424871-40.329169 102.535702-80.874728-107.490659-4.038052-192.583152-93.120917-192.630831-201.682522z m0 0"
|
fill="#0AC164" p-id="3197"></path>
|
</svg>
|
<h1 class="mt-1 ml-3 text-lg font-semibold">语音视频培训系统</h1>
|
</div>
|
</div>
|
<div class="head-item h-full grow flex justify-center">
|
<div class="menu-container flex items-center">
|
<div class="menu-item h-full mx-2" v-for="item in menuList">
|
<router-link :to="item.path" class="menu-link text-lg flex items-center h-full px-5"
|
:class="{ active: item.isActive }">
|
{{ item.name }}
|
</router-link>
|
</div>
|
</div>
|
</div>
|
<div class="head-item w-56"></div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watchEffect } from 'vue';
|
import { useRoute } from 'vue-router';
|
|
const route = useRoute();
|
|
const menuList = ref([
|
{
|
name: '首页',
|
path: '/index',
|
isActive: false
|
},
|
{
|
name: '菜单',
|
path: '/menu',
|
isActive: false
|
},
|
]);
|
const resetMenu = () => {
|
menuList.value.forEach(item => {
|
item.isActive = false;
|
});
|
};
|
|
watchEffect(() => {
|
const menu = menuList.value.find(item => item.path === route.path);
|
if (menu) {
|
resetMenu();
|
menu.isActive = true;
|
}
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
.header-container {
|
box-shadow: 0 1px 20px 0 rgb(0 0 0 / 0.1);
|
}
|
|
@media (min-width: 1836px) {
|
.container {
|
max-width: 1724px;
|
}
|
}
|
|
.menu-link {
|
position: relative;
|
&::after {
|
content: '';
|
position: absolute;
|
width: 7px;
|
height: 7px;
|
border: none;
|
background: #0AC164;
|
border-radius: 7px;
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
bottom: 5%;
|
opacity: 0;
|
}
|
}
|
|
.active {
|
font-weight: 600;
|
&::after {
|
opacity: 1;
|
}
|
}
|
</style>
|
