From 20cf1938a8aa04a3f911d6d3729e8aec08a7d658 Mon Sep 17 00:00:00 2001
From: 曹睿 <360930172@qq.com>
Date: 星期二, 25 二月 2025 09:08:51 +0800
Subject: [PATCH] feat: 完成检测单页面
---
src/layout/components/Navbar.vue | 149 ++++++++++++++++++++++++++-----------------------
1 files changed, 80 insertions(+), 69 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 5b45e3c..da89cf9 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,7 +1,7 @@
<template>
<div class="navbar">
-<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
-<!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>-->
+ <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
+ <!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>-->
<div class="logo">
<img src="@/assets/logo/ZTTlogo.png" />
</div>
@@ -10,56 +10,61 @@
</div>
<div class="right-menu">
<div class="avatar-wrapper">
- <img :src="avatar" class="user-avatar">
- <span class="userName">Admin</span>
- <img class="logoout" src="@/assets/images/logoout.png" @click="logout" title="閫�鍑鸿处鍙�" />
+ <img :src="avatar" class="user-avatar" />
+ <span class="userName">{{ nickName }}</span>
+ <img
+ class="logoout"
+ src="@/assets/images/logoout.png"
+ @click="logout"
+ title="閫�鍑鸿处鍙�"
+ />
</div>
-<!-- <template v-if="device!=='mobile'">-->
-<!-- <search id="header-search" class="right-menu-item" />-->
+ <!-- <template v-if="device!=='mobile'">-->
+ <!-- <search id="header-search" class="right-menu-item" />-->
-<!-- <el-tooltip content="婧愮爜鍦板潃" effect="dark" placement="bottom">-->
-<!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
-<!-- </el-tooltip>-->
+ <!-- <el-tooltip content="婧愮爜鍦板潃" effect="dark" placement="bottom">-->
+ <!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
+ <!-- </el-tooltip>-->
-<!-- <el-tooltip content="鏂囨。鍦板潃" effect="dark" placement="bottom">-->
-<!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
-<!-- </el-tooltip>-->
+ <!-- <el-tooltip content="鏂囨。鍦板潃" effect="dark" placement="bottom">-->
+ <!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
+ <!-- </el-tooltip>-->
-<!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
+ <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
-<!-- <el-tooltip content="甯冨眬澶у皬" effect="dark" placement="bottom">-->
-<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
-<!-- </el-tooltip>-->
+ <!-- <el-tooltip content="甯冨眬澶у皬" effect="dark" placement="bottom">-->
+ <!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
+ <!-- </el-tooltip>-->
-<!-- </template>-->
+ <!-- </template>-->
-<!-- <div class="avatar-container">-->
-<!-- <el-dropdown-menu slot="dropdown">-->
-<!-- <router-link to="/user/profile">-->
-<!-- <el-dropdown-item>涓汉涓績</el-dropdown-item>-->
-<!-- </router-link>-->
-<!-- <el-dropdown-item @click.native="setting = true">-->
-<!-- <span>甯冨眬璁剧疆</span>-->
-<!-- </el-dropdown-item>-->
-<!-- <el-dropdown-item divided @click.native="logout">-->
-<!-- <span>閫�鍑虹櫥褰�</span>-->
-<!-- </el-dropdown-item>-->
-<!-- </el-dropdown-menu>-->
-<!-- </div>-->
+ <!-- <div class="avatar-container">-->
+ <!-- <el-dropdown-menu slot="dropdown">-->
+ <!-- <router-link to="/user/profile">-->
+ <!-- <el-dropdown-item>涓汉涓績</el-dropdown-item>-->
+ <!-- </router-link>-->
+ <!-- <el-dropdown-item @click.native="setting = true">-->
+ <!-- <span>甯冨眬璁剧疆</span>-->
+ <!-- </el-dropdown-item>-->
+ <!-- <el-dropdown-item divided @click.native="logout">-->
+ <!-- <span>閫�鍑虹櫥褰�</span>-->
+ <!-- </el-dropdown-item>-->
+ <!-- </el-dropdown-menu>-->
+ <!-- </div>-->
</div>
</div>
</template>
<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import Search from "@/components/HeaderSearch";
+import RuoYiGit from "@/components/RuoYi/Git";
+import RuoYiDoc from "@/components/RuoYi/Doc";
export default {
components: {
@@ -70,53 +75,57 @@
SizeSelect,
Search,
RuoYiGit,
- RuoYiDoc
+ RuoYiDoc,
},
computed: {
- ...mapGetters([
- 'avatar',
- 'device'
- ]),
+ ...mapGetters(["avatar", "device", "nickName"]),
setting: {
get() {
- return this.$store.state.settings.showSettings
+ return this.$store.state.settings.showSettings;
},
set(val) {
- this.$store.dispatch('settings/changeSetting', {
- key: 'showSettings',
- value: val
- })
- }
+ this.$store.dispatch("settings/changeSetting", {
+ key: "showSettings",
+ value: val,
+ });
+ },
},
topNav: {
get() {
- return this.$store.state.settings.topNav
- }
- }
+ return this.$store.state.settings.topNav;
+ },
+ },
},
methods: {
async logout() {
- this.$confirm('纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- this.$store.dispatch('LogOut').then(() => {
- location.href = '/index';
+ this.$confirm("纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ this.$store.dispatch("LogOut").then(() => {
+ location.href = "/index";
+ });
})
- }).catch(() => {});
- }
- }
-}
+ .catch(() => {});
+ },
+ },
+};
</script>
<style lang="scss" scoped>
.navbar {
height: 50px;
overflow: hidden;
- position: relative;
+ //position: relative;
background: #fff;
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+ position: fixed; /* 灏嗗ご閮ㄥ浐瀹� */
+ top: 0; /* 鍦ㄩ《閮ㄥ浐瀹� */
+ width: 100%; /* 瀹藉害100%锛岃鐩栨暣涓鍙� */
+ //background-color: #f8f9fa; /* 璁剧疆鑳屾櫙棰滆壊锛屼互渚挎洿鏄庢樉鍦扮湅鍒版晥鏋� */
+ z-index: 1000; /* 纭繚澶撮儴鍦ㄥ叾浠栧唴瀹逛箣涓� */
display: flex;
align-items: center;
justify-content: space-between;
@@ -125,6 +134,8 @@
width: 118px;
height: 40px;
img {
+ width: 118px;
+ height: 40px;
margin-left: 20px;
cursor: pointer;
}
@@ -192,10 +203,10 @@
&.hover-effect {
cursor: pointer;
- transition: background .3s;
+ transition: background 0.3s;
&:hover {
- background: rgba(0, 0, 0, .025)
+ background: rgba(0, 0, 0, 0.025);
}
}
}
--
Gitblit v1.9.3