<template>
<div class="nav has-pe" :class="isDark ? 'dark' : ''">
<div class="header-bg">
<!-- <img :src="headerBg" style="width:100%;"/>-->
</div>
<!-- <div class="animate-blocks">-->
<!-- <div v-for="i in 3" class="animate-block-item"></div>-->
<!-- </div>-->
<div class="animate-1-con"><img :src="animate1Image" class="animate-1-img"/></div>
<div class="animate-2-con"><img :src="animate2Image" class="animate-2-img"/></div>
<!-- <div class="star"></div>-->
<div style="height:100%;display: flex;align-items: center;">
<div class="logo-con has-pe"
style="height:100%;">
<div class="logo-border">
<logo-svg class="logo-svg" />
</div>
<router-link :to="{name:'home'}" class="logo-text">
{{appStore.title}}
</router-link>
</div>
<div class="menu-con has-pe">
<template v-for="m in menus">
<a v-if="m.href" :href="m.href" target="_blank"
class="menu-item nav-ab t" :class="m.code">
<span class="mdi mgr-5" :class="m.icon"></span>
<span>{{m.text}}</span>
</a>
<router-link v-else :to="{name: m.code}"
@click="play"
class="menu-item nav-ab t" :class="m.code">
<span class="mdi mgr-5" :class="m.icon"></span>
<span>{{m.text}}</span>
</router-link>
</template>
</div>
<div class="right-side text-right mgr-10 mgt-5">
<div class="font-18">欢迎你，超级管理员</div>
<div class="font-ntf font-20 mgt-5 op-60">
<el-button size="small" type="primary" plain class="is-square" icon="Sunny" @click="appStore.toggleTheme()"></el-button>
<el-button size="small" type="primary" plain class="is-square" icon="FullScreen" @click="toggleFullscreen()"></el-button>
<el-button size="small" type="primary" plain class="is-square" icon="MoreFilled"></el-button>
<el-button size="small" type="danger" plain>退出</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import _ from "lodash"
import {computed, onMounted, ref, onUnmounted} from "vue";
import {useAppStore} from "@/services/store/app";
import {Howl} from 'howler';
import menuSound from "@/assets/medias/menu.mp3"
import {useNow, useDateFormat, useDark} from '@vueuse/core'
import animate1Image from "./images/animate-1.png"
import animate2Image from "./images/animate-2.png"
import logoSvg from "@/assets/images/logo.svg"
const appStore = useAppStore();
const now = useNow();
const nowTime = ref('')
const timer = ref()
const isDark = useDark();
//region sound
var sound = new Howl({
src: [menuSound],
volume: .4
});
const play = () => {
sound.play();
};
//endregion
const menus = [
{code:'home', text:'首页', icon:'mdi-home'},
{code:'network', text:'网络', icon:'mdi-lan'},
{code:'transfer', text:'数据', icon:'mdi-transfer'}/*,
{code:'stat', text:'检索统计', icon:'mdi-chart-bar-stacked', href: headerQueryMenuUrl},
{code:'manage', text:'后台管理', icon:'mdi-monitor-dashboard', href:headerManageMenuUrl}*/
];
import {usePageAnimate} from "@/services/hook/usePageAnimate";
import axios from "axios";
usePageAnimate("nav-ab");
onMounted(() => {
});
onUnmounted(()=> {
})
import { useFullscreen } from '@vueuse/core'
import {headerManageMenuUrl, headerQueryMenuUrl} from "@/services/config";
const { isFullscreen, enter, exit, toggle: toggleFullscreen } = useFullscreen()
</script>
<style lang="scss" scoped>
@use "sass:math";
@import "@/assets/css/_var";
$padding: 36px;
.nav {
position:absolute;
left:$padding;right:$padding;top:$padding;
z-index:10;
height:80px;
backdrop-filter: blur(3px);
//box-shadow: 0 1px 10px rgba(0,0,0,.3)
//background-color: rgba(red,.5);
}
.header-bg {
//height: 90px;
width:100%;
//background: url(./images/header-bg.png) no-repeat bottom center;
//background-size: contain;
position: absolute;
z-index:0;
top:0;left:0;right:0;bottom:0;
border-top: transparent solid 6px;
border-bottom: transparent solid 1px;
background: rgba($-primary-color, 0.3);
border-top-color:$-primary-color;
border-bottom-color: $-primary-color;
box-shadow: 0 0 6px #035f71;
&:after {
content:"";
position: absolute;top:0;bottom:0;left:0;right:0;
//background: linear-gradient(45deg , rgba($-primary-color , .5) 60%, $-primary-color);
}
}
.right-side {
position: relative;
}
.logo-con {
display: flex; align-items: center; justify-content: center;
}
.logo-border {
//background:rgba(255,255,255,.1);
padding:0 25px;display:flex;align-items:center;
height:100%;
position:relative;z-index:1;
border-top:transparent solid 6px;
border-bottom:transparent solid 6px;
box-shadow: 1px 0 10px rgba(0,0,0,.2);
border-color: rgba($-primary-color, 1);;
}
.logo-svg {
width:60px;margin-left1:10px;
//filter: drop-shadow( 0px 0px 6px rgba(#bcffff, .3));
//fill: #00c8e1;
:deep {
path {fill:#253223}
path.lightning {
fill:#ffcc00;
stroke-width: 0;
}
//.circle-middle {
// fill: #ffcc00;
//}
.dot {fill:#ffcc00;}
.circle-bg {fill:transparent}
}
}
.logo-text {
padding-left:20px;
font-family: shuhei;font-size:42px;
margin-top:3px;
text-shadow1: 5px 5px 1px rgba(255,255,255,.1);
filter: drop-shadow( 1px 1px 2px #253223);
background-image: -webkit-linear-gradient(90deg, rgb(245, 255, 250) , $-primary-color );
//background-image: linear-gradient(180deg,#fff,#2af1f8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.menu-con {
display: flex;
flex:1;
justify-content: center;
position:relative;z-index:1;
margin-top:6px;
}
.menu-item {
display: flex;
align-items: center;justify-content: center;
border:rgba(#253223,.9) solid 1px;
background: rgba($-primary-color,.4);
color:rgba(#253223, .8);
border-radius:2px;
width:150px;height:44px;
margin:0 15px;
background-size:cover;
text-align:center;
font-size:20px;
font-family: fzzzh;
font-weight: normal;
letter-spacing: 5px;
transition: all .3s;
span.mdi {opacity: .9}
&:after, &:before {
transition: all .3s;
content:'';
position: absolute;
width:3px;height:24px;
background: rgba(#253223,.6)
}
&:before {left:0;}
&:after {
right:0;
}
&:hover {
border-color:#253223;
color:#253223;
background: rgba(#fff, .8);
&:after, &:before {
height:28px;
background: rgba(#253223,.9)
}
&:after {right:3px}
&:before {left:3px}
}
&.router-link-active {
span.mdi {opacity: 1}
color: $-primary-color;
border-width:2px;
border-radius:4px;
border-color:$-primary-color;
background: rgba(14, 31, 14,.9);
font-weight:bold;
box-shadow: 0 0 8px #253223;
&:after, &:before {
width:4px;
background: rgba($-primary-color,.8)
}
}
&.job, &.live, &.vehicle{
text-decoration: line-through;
}
}
.animate-blocks {
width: 55px;
height: 25px;
left: 662px;
top: 74px;
position: absolute;
visibility: visible;
pointer-events: none;
transition: transform 600ms;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.animate-block-item {
width:8px;height:10px;
background: linear-gradient(to right , rgba(120, 255, 255, .8) , transparent);
transform: skewX(-40deg);
border-radius:1px;
}
.animate-1-con {
position: absolute;
pointer-events: none;
left: 399px;
top: 0;
width: 120px;
height: 100%;
opacity:.3;
}
.animate-1-img {
width:100%;height:100%;
border-radius: unset;
cursor: pointer;
pointer-events: none;
animation-name: animate-1;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 5s;
animation-delay: 0s;
-webkit-user-drag: none;
filter: none;
}
@keyframes animate-1 {
0% {
opacity: 0;
transform: none;
}
15% {
opacity: 0.75;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(150px, 0px, 0px);
}
30% {
opacity: 1;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(300px, 0px, 0px);
}
45% {
opacity: 0.75;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(450px, 0px, 0px);
}
60% {
opacity: 0;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(600px, 0px, 0px);
}
100% {
opacity: 0;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(600px, 0px, 0px);
}
}
.animate-2-con {
position: absolute;
pointer-events: none;
left: 646px;
bottom: 0;
width: 120px;
height: 60%;
opacity:.3;
}
.animate-2-img {
width:100%;height:100%;
border-radius: unset;
cursor: pointer;
pointer-events: none;
animation-name: animate-2;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 4s;
animation-delay: 0s;
-webkit-user-drag: none;
filter: none;
}
@keyframes animate-2 {
0% {
opacity: 0;
transform: none;
}
50% {
opacity: .78;
transform: translateX(450px);
}
100% {
opacity: 0;
transform: translateX(900px);
}
}
$star-width: math.div(1120px, 1.5);
$star-height: math.div(660px, 1.5);
.star {
position:absolute;top:-113px;left:-10px;
width:$star-width;height:$star-height;
background: url(./images/star.png) no-repeat bottom center;
background-size: cover;
animation-name: star-animate;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 10s;
animation-delay: 10s;
-webkit-user-drag: none;
//filter: brightness(150%);
}
@keyframes star-animate {
0% {
opacity: 1;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
div.nav.dark {
.header-bg {
border-top-color:rgb(71, 128, 76);
border-bottom-color:rgba(6, 253, 253, .15);
background: rgba($-primary-color, 0.3);
//background-color: rgba(106, 211, 137, 0.12);
&:after {
background: linear-gradient(-45deg , rgba(0,0,0,.4), transparent);
}
}
.logo-border {
border-color: rgb(71, 128, 76);
}
.logo-text {
background-image: -webkit-linear-gradient(90deg, rgb(150, 248, 140) 0%, rgb(245, 255, 250) 90%);
}
.logo-svg {
:deep {
path {fill:rgba(113, 228, 102,.6)}
path.lightning {
fill:#ffcc00;
stroke-width: 0;
}
//.dot {fill:rgba(#fff,.7);}
.circle-bg {fill:transparent}
}
}
$-menu-color: #71e466; //7cffff
.menu-item {
border:rgba($-menu-color,.3) solid 1px;
background: rgba(0,0,0,.2);
color:rgba($-menu-color, .5);
&:after, &:before {
background: rgba($-menu-color,.3)
}
&:hover {
border-color:$-menu-color;
color:$-menu-color;
background: rgba($-menu-color, .1);
&:after, &:before {
background: rgba($-menu-color,.6)
}
}
&.router-link-active {
color: $-menu-color;
border-color:$-menu-color;
&:after, &:before {
background: rgba($-menu-color,.8)
}
}
}
}
</style>
最新发布
博客对事件（component events）进行了简单介绍。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
