Browse Source

按照站内的要求修改表头的样式

master
douyage 1 month ago
parent
commit
59df247995
4 changed files with 57 additions and 6 deletions
  1. BIN
      src/assets/images/header/xfdh-brand.png
  2. BIN
      src/assets/images/header/xfdh-title.png
  3. +39
    -3
      src/layout/components/Navbar.vue
  4. +18
    -3
      src/router/index.js

BIN
src/assets/images/header/xfdh-brand.png View File

Before After
Width: 502  |  Height: 99  |  Size: 36 KiB

BIN
src/assets/images/header/xfdh-title.png View File

Before After
Width: 1921  |  Height: 66  |  Size: 122 KiB

+ 39
- 3
src/layout/components/Navbar.vue View File

@ -1,8 +1,8 @@
<template> <template>
<div class="navbar">
<div class="navbar" :class="{ 'xfdh-navbar': isXfdh }" :style="isXfdh ? { backgroundImage: `url(${xfdhHeader})` } : null">
<div class="navbar-brand"> <div class="navbar-brand">
<img :src="headerLogo" class="header-logo" alt="" />
<span class="platform-title">智能巡视管控平台</span>
<img :src="isXfdh ? xfdhBrand : headerLogo" class="header-logo" alt="" />
<span class="platform-title">消防动环管理平台</span>
</div> </div>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" /> <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
<div v-else class="navbar-spacer" /> <div v-else class="navbar-spacer" />
@ -51,6 +51,8 @@ import { mapGetters } from "vuex";
import TopNav from "@/components/TopNav"; import TopNav from "@/components/TopNav";
import Screenfull from "@/components/Screenfull"; import Screenfull from "@/components/Screenfull";
import headerLogo from "@/assets/images/header/logo.png"; import headerLogo from "@/assets/images/header/logo.png";
import xfdhHeader from "@/assets/images/header/xfdh-title.png";
import xfdhBrand from "@/assets/images/header/xfdh-brand.png";
import loginAvatar from "@/assets/images/aa-logo.png"; import loginAvatar from "@/assets/images/aa-logo.png";
export default { export default {
components: { components: {
@ -60,6 +62,8 @@ export default {
data() { data() {
return { return {
headerLogo, headerLogo,
xfdhHeader,
xfdhBrand,
loginAvatar loginAvatar
}; };
}, },
@ -69,6 +73,9 @@ export default {
get() { get() {
return this.$store.state.settings.topNav; return this.$store.state.settings.topNav;
}, },
},
isXfdh() {
return true
} }
}, },
methods: { methods: {
@ -103,6 +110,35 @@ export default {
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;
&.xfdh-navbar {
background-size: 100% 100%;
.navbar-brand {
width: 470px;
flex-basis: 470px;
}
.header-logo {
width: 245px;
height: 48px;
}
.platform-title {
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: 0;
transform: translate(-50%, -50%);
color: #fff;
font-size: 34px;
font-weight: 700;
letter-spacing: 4px;
white-space: nowrap;
text-shadow: 0 0 6px rgba(84, 255, 255, 0.55), 0 2px 2px rgba(0, 17, 74, 0.65);
}
}
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
height: 100%; height: 100%;


+ 18
- 3
src/router/index.js View File

@ -30,6 +30,21 @@ import Layout from '@/layout'
// 公共路由 // 公共路由
export const constantRoutes = [ export const constantRoutes = [
{
path: '/xfdh',
component: Layout,
hidden: true,
redirect: '/xfdh/index',
meta: { title: '巡视任务', xfdhHeader: true },
children: [
{
path: 'index',
component: () => import('@/views/cards/taskSummary/inspectionTask'),
name: 'XfdhIndex',
meta: { title: '巡视任务', activeMenu: '/task-summary/inspectionTask', xfdhHeader: true }
}
]
},
{ {
path: '/redirect', path: '/redirect',
component: Layout, component: Layout,
@ -127,14 +142,14 @@ export const constantRoutes = [
{ {
path: '', path: '',
component: Layout, component: Layout,
redirect: '/inspection-workspace/task',
redirect: '/index',
hidden: true, hidden: true,
children: [ children: [
{ {
path: 'index', path: 'index',
component: () => import('@/views/index'),
component: () => import('@/views/cards/taskSummary/inspectionTask'),
name: 'Index', name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true, breadcrumb: false }
meta: { title: '巡视任务', icon: 'dashboard', affix: true, activeMenu: '/task-summary/inspectionTask' }
} }
] ]
}, },


Loading…
Cancel
Save