transform: rotateZ(0deg);background-size: contain;background-repeat: no-repeat;background-position: 50% 0%;background-color: rgba(255, 255, 255, 0);display: block;pointer-events: none;width: 100%;background-image: url("https://mmbiz.qpic.cn/mmbiz_gif/cYLkibwyhDQ9UgVz0PM9Yhpr49xWqlE8R1ibHp8uibia2a2qhuWC2UOIpHdCmicEGUibuRzFJntHibtwgianbqmO8ibDEicw/640?wx_fmt=gif");max-width: none !important; 这都是什么意思

<template> <logo-svg class="logo-svg" /> <router-link :to="{name:'home'}" class="logo-text"> {{appStore.title}} </router-link> <template v-for="m in menus"> {{m.text}} <router-link v-else :to="{name: m.code}" @click="play" class="menu-item nav-ab t" :class="m.code"> {{m.text}} </router-link> </template> 欢迎你，超级管理员 <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> </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>