<template>
<div class="nav has
-pe"
:class="isDark ? 'dark'
: ''">
<div class="header
-bg">
<!
-- <img
:src="headerBg" style="width
:1
00%;"/>
-->
</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
:1
00%;display
: flex;align
-items
: center;">
<div class="logo
-con has
-pe"
style="height
:1
00%;">
<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
-1
0 mgt
-5">
<div class="font
-18">欢迎你，超级管理员</div>
<div class="font
-ntf font
-2
0 mgt
-5 op
-6
0">
<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 {use
Now, 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 = use
Now
();
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
: headerQueryMenu
Url},
{code
:'manage', text
:'后台管理', icon
:'mdi
-monitor
-dashboard', href
:headerManageMenu
Url}*/
];
import {usePageAnimate} from "@/services/hook/usePageAnimate";
import axios from "axios";
usePageAnimate
("nav
-ab"
);
onMounted
(() => {
}
);
onUnmounted
(()=> {
}
)
import { useFullscreen } from '@vueuse/core'
import {headerManageMenu
Url, headerQueryMenu
Url} from "@/services/config";
const { isFullscreen, enter, exit, toggle
: toggleFullscreen } = useFullscreen
()
</script>
<style lang="s
css" scoped>
@use "sass
:math";
@import "@/assets/
css/_var";
$padding
: 36px;
.nav {
position
:absolute;
left
:$padding;right
:$padding;top
:$padding;
z
-index
:1
0;
height
:8
0px;
backdrop
-filter
: blur
(3px
);
//box
-shadow
: 0 1px 1
0px rgba
(0,
0,
0,
.3
)
//
background-color
: rgba
(red,
.5
);
}
.header
-bg {
//height
: 9
0px;
width
:1
00%;
//
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
) 6
0%, $
-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
:1
00%;
position
:relative;z
-index
:1;
border
-top
:transparent solid 6px;
border
-bottom
:transparent solid 6px;
box
-shadow
: 1px
0 1
0px rgba
(0,
0,
0,
.2
);
border
-color
: rgba
($
-primary
-color, 1
);;
}
.logo
-svg {
width
:6
0px;margin
-left1
:1
0px;
//filter
: drop
-shadow
( 0px
0px 6px rgba
(#bcffff,
.3
));
//fill
: #
00c8e1;
:deep {
path {fill
:#253223}
path
.lightning {
fill
:#ffcc
00;
stroke
-width
: 0;
}
//
.circle
-middle {
// fill
: #ffcc
00;
//}
.dot {fill
:#ffcc
00;}
.circle
-bg {fill
:transparent}
}
}
.logo
-text {
padding
-left
:2
0px;
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
(9
0deg, rgb
(245, 255, 25
0) , $
-primary
-color
);
//
background-image
: linear
-gradient
(18
0deg,#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
:15
0px;height
:44px;
margin
:0 15px;
background-size
:cover;
text
-align
:center;
font
-size
:2
0px;
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 6
00ms;
display
: flex;
align
-items
: center;
justify
-content
: space
-evenly;
}
.animate
-block
-item {
width
:8px;height
:1
0px;
background: linear
-gradient
(to right , rgba
(12
0, 255, 255,
.8
) , transparent
);
transform
: skewX
(-4
0deg
);
border
-radius
:1px;
}
.animate
-1
-con {
position
: absolute;
pointer
-events
: none;
left
: 399px;
top
: 0;
width
: 12
0px;
height
: 1
00%;
opacity
:.3;
}
.animate
-1
-img {
width
:1
00%;height
:1
00%;
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
(15
0px,
0px,
0px
);
}
3
0% {
opacity
: 1;
transform
: rotateX
(0deg
) rotateY
(0deg
) rotateZ
(0deg
) scaleX
(1
) scaleY
(1
) translate3d
(3
00px,
0px,
0px
);
}
45% {
opacity
: 0.75;
transform
: rotateX
(0deg
) rotateY
(0deg
) rotateZ
(0deg
) scaleX
(1
) scaleY
(1
) translate3d
(45
0px,
0px,
0px
);
}
6
0% {
opacity
: 0;
transform
: rotateX
(0deg
) rotateY
(0deg
) rotateZ
(0deg
) scaleX
(1
) scaleY
(1
) translate3d
(6
00px,
0px,
0px
);
}
1
00% {
opacity
: 0;
transform
: rotateX
(0deg
) rotateY
(0deg
) rotateZ
(0deg
) scaleX
(1
) scaleY
(1
) translate3d
(6
00px,
0px,
0px
);
}
}
.animate
-2
-con {
position
: absolute;
pointer
-events
: none;
left
: 646px;
bottom
: 0;
width
: 12
0px;
height
: 6
0%;
opacity
:.3;
}
.animate
-2
-img {
width
:1
00%;height
:1
00%;
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;
}
5
0% {
opacity
: .78;
transform
: translateX
(45
0px
);
}
1
00% {
opacity
: 0;
transform
: translateX
(9
00px
);
}
}
$star
-width
: math
.div
(112
0px, 1
.5
);
$star
-height
: math
.div
(66
0px, 1
.5
);
.star {
position
:absolute;top
:-113px;left
:-1
0px;
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
: 1
0s;
animation
-delay
: 1
0s;
-webkit
-user
-drag
: none;
//filter
: brightness
(15
0%
);
}
@keyframes star
-animate {
0% {
opacity
: 1;
}
5
0% {
opacity
: .5;
}
1
00% {
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
(1
06, 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
(9
0deg, rgb
(15
0, 248, 14
0) 0%, rgb
(245, 255, 25
0) 9
0%
);
}
.logo
-svg {
:deep {
path {fill
:rgba
(113, 228, 1
02,
.6
)}
path
.lightning {
fill
:#ffcc
00;
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>
本文详细解释了CSS中background-position属性的用法，包括如何通过不同单位（如百分比和像素）来设定背景图像的位置，以及预设的关键字定位方式。
扫一扫
6511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
