[update] 框架调整
This commit is contained in:
danshihao
@@ -34,6 +34,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import "~@assets/less/common.less";
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 542 B |
Binary file not shown.
|
After Width: | Height: | Size: 758 B |
Binary file not shown.
|
After Width: | Height: | Size: 558 B |
Binary file not shown.
|
After Width: | Height: | Size: 553 B |
Binary file not shown.
|
After Width: | Height: | Size: 425 B |
Binary file not shown.
|
After Width: | Height: | Size: 569 B |
Binary file not shown.
|
After Width: | Height: | Size: 273 B |
Binary file not shown.
|
After Width: | Height: | Size: 827 B |
Binary file not shown.
|
After Width: | Height: | Size: 877 B |
Binary file not shown.
|
After Width: | Height: | Size: 852 B |
Binary file not shown.
|
After Width: | Height: | Size: 692 B |
Binary file not shown.
|
After Width: | Height: | Size: 412 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
@@ -1,4 +1,4 @@
|
||||
|
||||
@import "./modifyLessVars.less";
|
||||
/*列表上方操作按钮区域*/
|
||||
.ant-card-body .table-operator {
|
||||
//margin-bottom: 8px;
|
||||
@@ -81,4 +81,65 @@
|
||||
}
|
||||
.ant-tabs-bar {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 表格样式begin */
|
||||
.ant-table-thead > tr > th {
|
||||
background: linear-gradient( 180deg, rgba(0,148,255,0.1) 0%, rgba(0,148,255,0.2) 100%) !important;
|
||||
}
|
||||
/* 表格样式nd */
|
||||
|
||||
/* 复选框begin */
|
||||
.ant-checkbox-inner,
|
||||
.ant-tree-checkbox-inner{
|
||||
background-color: transparent;
|
||||
}
|
||||
/* 复选框end */
|
||||
|
||||
/* 下拉框begin */
|
||||
.ant-select-selection--multiple .ant-select-selection__choice {
|
||||
color: @text-color;
|
||||
background-color: @primary-1;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ant-select-selection--multiple .ant-select-selection__choice__remove {
|
||||
color: @text-color;
|
||||
}
|
||||
.ant-select-selection--multiple .ant-select-selection__choice__remove:hover {
|
||||
color: @text-color !important;
|
||||
}
|
||||
|
||||
.ant-select-dropdown-menu-item-selected,
|
||||
.ant-select-dropdown-menu-item-selected:hover {
|
||||
background-color: @primary-2;
|
||||
color: @text-color;
|
||||
}
|
||||
/* 下拉框end */
|
||||
|
||||
/* 表单禁用样式begin */
|
||||
.ant-input[disabled],
|
||||
.ant-radio-disabled + span,
|
||||
.ant-radio-disabled .ant-radio-inner,
|
||||
.ant-select-disabled .ant-select-selection,
|
||||
.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice
|
||||
{
|
||||
color: @text-color-secondary !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.ant-radio-disabled .ant-radio-inner::after {
|
||||
background-color: @text-color-secondary !important;
|
||||
}
|
||||
/* 表单禁用样式end */
|
||||
|
||||
/* 部分组件begin */
|
||||
// 弹出抽屉底部自定义
|
||||
.drawer-bootom-button {
|
||||
background-color: @component-background !important;
|
||||
border-top-color: @border-color-split !important;
|
||||
}
|
||||
.ant-modal-close:focus, .ant-modal-close:hover,
|
||||
.ant-drawer-close:focus, .ant-drawer-close:hover{
|
||||
color: #fff;
|
||||
}
|
||||
/* 部分组件end */
|
||||
@@ -0,0 +1,23 @@
|
||||
module.exports = {
|
||||
// 背景色
|
||||
'component-background': '#001B36',
|
||||
'background-color-base': 'rgba(0,27,54,0.67)', // 基础背景色
|
||||
'background-color-light': 'rgba(0, 148, 255, 0.30)', // 基础高亮背景色
|
||||
|
||||
// 边框色
|
||||
'border-color-base': '#0094FF',
|
||||
'border-color-split': '#0094FF',
|
||||
|
||||
// 字体颜色
|
||||
'heading-color': 'rgba(255, 255, 255, 0.96)',
|
||||
'text-color': 'rgba(255, 255, 255, 0.96)',
|
||||
'text-color-secondary': '#A5B8CE',
|
||||
|
||||
// 主题色
|
||||
'primary-1': 'rgba(0, 148, 255, 0.30)',
|
||||
'primary-2': 'rgba(0, 148, 255, 0.10)',
|
||||
|
||||
// 表格相关
|
||||
'table-selected-row-bg': 'rgba(0, 148, 255, 0.30)', // 勾选行背景色
|
||||
'table-expanded-row-bg': 'rgba(0, 148, 255, 0.10)', // 扩展行背景色
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/* 背景色 */
|
||||
@component-background: #001B36;
|
||||
@background-color-base: #001B36AA;
|
||||
@background-color-light: rgba(0, 148, 255, 0.30);
|
||||
|
||||
/* 边框色 */
|
||||
@border-color-base: #0094FF;
|
||||
@border-color-split: #0094FF;
|
||||
|
||||
/* 字体颜色 */
|
||||
@heading-color: rgba(255, 255, 255, 0.96);
|
||||
@text-color: rgba(255, 255, 255, 0.96);
|
||||
@text-color-secondary: #A5B8CE;
|
||||
|
||||
/* 主题色 */
|
||||
@primary-1: rgba(0, 148, 255, 0.30);
|
||||
@primary-2: rgba(0, 148, 255, 0.10);
|
||||
|
||||
/* 表格相关 */
|
||||
@table-selected-row-bg: rgba(0, 148, 255, 0.30);
|
||||
@table-expanded-row-bg: rgba(0, 148, 255, 0.10);
|
||||
@@ -21,7 +21,7 @@
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<div style="margin: 12px 12px 0;">
|
||||
<div style="margin-left: 24px;">
|
||||
<!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
|
||||
<keep-alive v-if="multipage">
|
||||
<router-view v-if="reloadFlag"/>
|
||||
@@ -142,7 +142,7 @@ export default {
|
||||
methods: {
|
||||
// update-begin-author:sunjianlei date:20200120 for: 动态更改页面标题
|
||||
changeTitle (title) {
|
||||
const projectTitle = 'Jero-Boot 企业级快速开发平台'
|
||||
const projectTitle = '昆鸿设备管理系统'
|
||||
// 首页特殊处理
|
||||
if (this.$route.path === indexKey) {
|
||||
document.title = projectTitle
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<!-- 一级菜单 -->
|
||||
<div class="nav-menu">
|
||||
<ul class="nav-menu-list nav-menu-list-left">
|
||||
<li v-for="menu in showMenu.slice(0, 6)"
|
||||
:key="menu.id"
|
||||
@click="selectMenu(menu)"
|
||||
:class="{ active: openKeys.includes(menu.path)}">
|
||||
<div class="menu-item">
|
||||
<img v-if="menu.meta.icon && menu.meta.icon.includes('custom_menu_image_')"
|
||||
:src="require(`@/assets/images/menu/icon/${menu.meta.icon.replace('custom_menu_image_', '')}.png`)" alt=''>
|
||||
</div>
|
||||
<div class="menu-item-title">{{menu.meta.title}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav-menu-list nav-menu-list-right">
|
||||
<li v-for="menu in showMenu.slice(6, 12)"
|
||||
:key="menu.id"
|
||||
@click="selectMenu(menu)"
|
||||
:class="{ active: openKeys.includes(menu.path)}">
|
||||
<div class="menu-item">
|
||||
<img v-if="menu.meta.icon && menu.meta.icon.includes('custom_menu_image_')"
|
||||
:src="require(`@/assets/images/menu/icon/${menu.meta.icon.replace('custom_menu_image_', '')}.png`)" alt=''>
|
||||
</div>
|
||||
<div class="menu-item-title">{{menu.meta.title}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FirstLevelMenu',
|
||||
props: {
|
||||
menu: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 选择的path
|
||||
selectPath: '',
|
||||
openKeys: [],
|
||||
selectedKeys: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 可以显示的一级菜单
|
||||
showMenu () {
|
||||
return this.menu.filter((item) => {
|
||||
if (item.hidden) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
this.updateMenu()
|
||||
this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.updateMenu()
|
||||
this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
|
||||
},
|
||||
methods: {
|
||||
// 选择菜单
|
||||
selectMenu (menu) {
|
||||
this.selectPath = menu.path
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
this.$router.push({ path: menu.children[0].path })
|
||||
} else {
|
||||
this.$router.push({ name: menu.name })
|
||||
}
|
||||
this.$emit('select', menu)
|
||||
},
|
||||
updateMenu () {
|
||||
const routes = this.$route.matched.concat()
|
||||
const { hidden } = this.$route.meta
|
||||
if (routes.length >= 3 && hidden) {
|
||||
routes.pop()
|
||||
this.selectedKeys = [routes[routes.length - 1].path]
|
||||
} else {
|
||||
this.selectedKeys = [routes.pop().path]
|
||||
}
|
||||
let openKeys = []
|
||||
routes.forEach(item => {
|
||||
openKeys.push(item.path)
|
||||
})
|
||||
|
||||
// update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
||||
// 包含冒号的是动态菜单
|
||||
if (this.selectedKeys[0].includes(':')) {
|
||||
const selectedKey = this.$route.fullPath
|
||||
this.selectedKeys = [selectedKey]
|
||||
const newOpenKeys = []
|
||||
this.fullOpenKeys(this.menu, selectedKey, newOpenKeys)
|
||||
if (newOpenKeys.length > 0) {
|
||||
openKeys = newOpenKeys.reverse()
|
||||
}
|
||||
}
|
||||
// update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
||||
|
||||
// update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
||||
if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
|
||||
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
|
||||
}
|
||||
// update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
||||
},
|
||||
fullOpenKeys (menus, selectedKey, openKeys) {
|
||||
for (const item of menus) {
|
||||
if (item.path === selectedKey) {
|
||||
openKeys.push(item.path)
|
||||
this.$emit('updateMenuTitle', item)
|
||||
return true
|
||||
} else if (Array.isArray(item.children)) {
|
||||
if (this.fullOpenKeys(item.children, selectedKey, openKeys)) {
|
||||
openKeys.push(item.path)
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 一级导航样式
|
||||
.nav-menu {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
|
||||
.nav-menu-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
margin: 0 20px;
|
||||
max-width: 68px;
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
background-image: url("~@/assets/images/menu/top-menu.png");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
font-size: 0;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item-title {
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.96);
|
||||
line-height: 19px;
|
||||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
// 选中的样式
|
||||
&.active {
|
||||
|
||||
.menu-item {
|
||||
background-image: url("~@/assets/images/menu/top-menu-act.png");
|
||||
}
|
||||
.menu-item-title {
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFC97A;
|
||||
line-height: 19px;
|
||||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,35 +2,19 @@
|
||||
<!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' -->
|
||||
<a-layout-header
|
||||
v-if="!headerBarFixed"
|
||||
class="global-header"
|
||||
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
|
||||
:style="{ padding: '0' }">
|
||||
|
||||
<div v-if="mode === 'sidemenu'" class="header" :class="theme">
|
||||
<a-icon
|
||||
v-if="device==='mobile'"
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
|
||||
@click="toggle"></a-icon>
|
||||
<a-icon
|
||||
v-else
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
||||
@click="toggle"/>
|
||||
|
||||
<!-- <span v-if="device === 'desktop'">欢迎进入 Jero-Boot 平台</span>-->
|
||||
<!-- <span v-else>Jero-Boot</span>-->
|
||||
<span class='bread'>
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
|
||||
<router-link v-if="item.name !== name" :to="{ path: item.path }">
|
||||
{{ item.meta.title }}
|
||||
</router-link>
|
||||
<span v-else>{{ item.meta.title }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</span>
|
||||
|
||||
<span class="system-title">昆鸿设备管理平台</span>
|
||||
<span class="system-page-title">{{$route.meta.title}}</span>
|
||||
<span class="system-time">{{ systemTime }}</span>
|
||||
<user-menu :theme="theme"/>
|
||||
<!-- 头部一级菜单 -->
|
||||
<first-level-menu :menu="menus"
|
||||
:collapsed="collapsed"
|
||||
@select="selectFirstLevelMenu"/>
|
||||
</div>
|
||||
<!-- 顶部导航栏模式 -->
|
||||
<div v-else :class="['top-nav-header-index', theme]">
|
||||
@@ -55,7 +39,6 @@
|
||||
<user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
@@ -64,10 +47,13 @@ import UserMenu from '../tools/UserMenu'
|
||||
import SMenu from '../menu/'
|
||||
import Logo from '../tools/Logo'
|
||||
import { mixin } from '@/utils/mixin.js'
|
||||
import moment from 'dayjs'
|
||||
import FirstLevelMenu from '@comp/menu/FirstLevelMenu'
|
||||
|
||||
export default {
|
||||
name: 'GlobalHeader',
|
||||
components: {
|
||||
FirstLevelMenu,
|
||||
UserMenu,
|
||||
SMenu,
|
||||
Logo
|
||||
@@ -110,7 +96,9 @@ export default {
|
||||
headerIndexRight: {},
|
||||
topSmenuStyle: {}
|
||||
},
|
||||
chatStatus: ''
|
||||
chatStatus: '',
|
||||
systemTime: '', // 当前时间
|
||||
updateTimer: null // 更新当前时间定时器
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -130,6 +118,15 @@ export default {
|
||||
this.getBreadcrumb()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
/* 先设置当前时间，如果没有定时器，就添加一个定时器更新当前时间 */
|
||||
this.systemTime = moment().format('YYYY-MM-DD HH:mm:ss')
|
||||
if (!this.updateTimer) {
|
||||
this.updateTimer = setInterval(() => {
|
||||
this.systemTime = moment().format('YYYY-MM-DD HH:mm:ss')
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
// update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
||||
mounted () {
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
@@ -142,6 +139,9 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectFirstLevelMenu (...arg) {
|
||||
this.$emit('selectFirstLevelMenu', ...arg)
|
||||
},
|
||||
getBreadcrumb () {
|
||||
this.breadList = []
|
||||
// this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
|
||||
@@ -195,8 +195,59 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
|
||||
|
||||
@height: 56px;
|
||||
|
||||
@height: 48px;
|
||||
@font-face {
|
||||
font-family: 'UnidreamLED';
|
||||
src: url('~@assets/font/UnidreamLED.ttf') format('truetype');
|
||||
}
|
||||
.system-title {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
transform: translateX(-50%);
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
line-height: 35px;
|
||||
text-shadow: 1px 2px 1px rgba(0,0,0,0.25);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #A6D1FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.system-page-title {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
transform: translateX(-50%);
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
text-shadow: 1px 2px 1px rgba(0,0,0,0.25);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
color: #eee;
|
||||
//text-transform: none;
|
||||
//background: linear-gradient(180deg, #FFFFFF 0%, #A6D1FF 100%);
|
||||
//-webkit-background-clip: text;
|
||||
//color: transparent;
|
||||
}
|
||||
.system-time {
|
||||
user-select: none;
|
||||
font-family: UniDreamLED, UniDreamLED, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: @primary-color;
|
||||
line-height: 28px;
|
||||
letter-spacing: 2px;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.layout {
|
||||
.bread {
|
||||
display: inline-block;
|
||||
@@ -230,17 +281,17 @@ export default {
|
||||
|
||||
.header {
|
||||
z-index: 2;
|
||||
color: #333;
|
||||
height: @height;
|
||||
//color: #333;
|
||||
height: 158px;
|
||||
//background-color: @primary-color;
|
||||
background-color: #fff;
|
||||
background-color: transparent;
|
||||
transition: background 300ms;
|
||||
|
||||
/* dark 样式 */
|
||||
&.dark {
|
||||
color: #000000;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
||||
background-color: white !important;
|
||||
//box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
||||
//background-color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -250,12 +301,19 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
height: @height;
|
||||
height: 158px;
|
||||
line-height: @height;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
|
||||
|
||||
.global-header {
|
||||
position: relative;
|
||||
background-color: #001125;
|
||||
background-image: url("~@/assets/images/header/header-bg.png");
|
||||
background-position: center top;
|
||||
background-size: auto 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,59 +1,6 @@
|
||||
<template>
|
||||
<a-layout class="layout" :class="[device]">
|
||||
|
||||
<template v-if="layoutMode === 'sidemenu'">
|
||||
<a-drawer
|
||||
v-if="device === 'mobile'"
|
||||
:wrapClassName="'drawer-sider ' + navTheme"
|
||||
placement="left"
|
||||
@close="() => this.collapsed = false"
|
||||
:closable="false"
|
||||
:visible="collapsed"
|
||||
width="200px"
|
||||
>
|
||||
<side-menu
|
||||
mode="inline"
|
||||
v-if="device === 'mobile'"
|
||||
:menus="menus"
|
||||
@menuSelect="menuSelect"
|
||||
@updateMenuTitle="handleUpdateMenuTitle"
|
||||
:theme="navTheme"
|
||||
:collapsed="false"
|
||||
:collapsible="true"></side-menu>
|
||||
</a-drawer>
|
||||
|
||||
<side-menu
|
||||
v-show="device === 'desktop'"
|
||||
mode="inline"
|
||||
:menus="menus"
|
||||
@menuSelect="myMenuSelect"
|
||||
@updateMenuTitle="handleUpdateMenuTitle"
|
||||
:theme="navTheme"
|
||||
:collapsed="collapsed"
|
||||
:collapsible="true"></side-menu>
|
||||
</template>
|
||||
<!-- 下次优化这些代码 -->
|
||||
<template v-else>
|
||||
<a-drawer
|
||||
v-if="device === 'mobile'"
|
||||
:wrapClassName="'drawer-sider ' + navTheme"
|
||||
placement="left"
|
||||
@close="() => this.collapsed = false"
|
||||
:closable="false"
|
||||
:visible="collapsed"
|
||||
width="200px"
|
||||
>
|
||||
<side-menu
|
||||
mode="inline"
|
||||
:menus="menus"
|
||||
@menuSelect="menuSelect"
|
||||
@updateMenuTitle="handleUpdateMenuTitle"
|
||||
:theme="navTheme"
|
||||
:collapsed="false"
|
||||
:collapsible="true"></side-menu>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<a-layout
|
||||
:class="[layoutMode, `content-width-${contentWidth}`]"
|
||||
:style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
|
||||
@@ -66,17 +13,32 @@
|
||||
:device="device"
|
||||
@toggle="toggle"
|
||||
@updateMenuTitle="handleUpdateMenuTitle"
|
||||
@selectFirstLevelMenu="selectFirstLevelMenu"
|
||||
/>
|
||||
<!-- 内容布局 -->
|
||||
<a-layout :style="{backgroundColor: '#001125', padding: '24px 24px 0'}">
|
||||
<!-- 左侧二级菜单 -->
|
||||
<a-layout-sider class="layout-sider" v-if="menuChildren" width="174">
|
||||
<s-menu
|
||||
:collapsed="collapsed"
|
||||
:menu="menuChildren"
|
||||
:theme="navTheme"
|
||||
@select="menuSelect"
|
||||
@updateMenuTitle="handleUpdateMenuTitle"
|
||||
mode="inline">
|
||||
</s-menu>
|
||||
</a-layout-sider>
|
||||
|
||||
<!-- layout content -->
|
||||
<a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
|
||||
<slot></slot>
|
||||
</a-layout-content>
|
||||
<!-- layout content -->
|
||||
<a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
|
||||
<slot></slot>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
|
||||
<!-- layout footer -->
|
||||
<a-layout-footer style="padding: 0">
|
||||
<global-footer/>
|
||||
</a-layout-footer>
|
||||
<!-- layout footer -->
|
||||
<!-- <a-layout-footer style="padding: 0">-->
|
||||
<!-- <global-footer/>-->
|
||||
<!-- </a-layout-footer>-->
|
||||
</a-layout>
|
||||
|
||||
<!-- update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ---- -->
|
||||
@@ -86,12 +48,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SideMenu from '@/components/menu/SideMenu'
|
||||
import SMenu from '@/components/menu/index'
|
||||
import GlobalHeader from '@/components/page/GlobalHeader'
|
||||
import GlobalFooter from '@/components/page/GlobalFooter'
|
||||
import { triggerWindowResizeEvent } from '@/utils/util'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import FirstLevelMenu from '@comp/menu/FirstLevelMenu'
|
||||
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
|
||||
// import SettingDrawer from '@/components/setting/SettingDrawer'
|
||||
// 注释这个因为在个人设置模块已经加载了SettingDrawer页面
|
||||
@@ -100,7 +63,8 @@ import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
export default {
|
||||
name: 'GlobalLayout',
|
||||
components: {
|
||||
SideMenu,
|
||||
FirstLevelMenu,
|
||||
SMenu,
|
||||
GlobalHeader,
|
||||
GlobalFooter
|
||||
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
|
||||
@@ -114,7 +78,8 @@ export default {
|
||||
return {
|
||||
collapsed: false,
|
||||
activeMenu: {},
|
||||
menus: []
|
||||
menus: [],
|
||||
menuChildren: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -158,6 +123,11 @@ export default {
|
||||
this.collapsed = false
|
||||
}
|
||||
},
|
||||
// 选择一级标题
|
||||
selectFirstLevelMenu (menu) {
|
||||
this.activeFirstMenu = menu
|
||||
this.menuChildren = menu.children || []
|
||||
},
|
||||
// update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
|
||||
myMenuSelect (value) {
|
||||
// 此处触发动态路由被点击事件
|
||||
@@ -317,9 +287,9 @@ export default {
|
||||
|
||||
.header {
|
||||
height: 64px;
|
||||
padding: 0 12px 0 0;
|
||||
padding: 0 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||||
//box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -334,7 +304,7 @@ export default {
|
||||
display: inline-block;
|
||||
transition: all .3s;
|
||||
|
||||
height: 70%;
|
||||
//height: 70%;
|
||||
line-height: 46px;
|
||||
|
||||
&.action-full {
|
||||
@@ -367,7 +337,7 @@ export default {
|
||||
display: inline-block;
|
||||
transition: all .3s;
|
||||
|
||||
height: 70%;
|
||||
//height: 70%;
|
||||
line-height: 46px;
|
||||
|
||||
&.action-full {
|
||||
@@ -565,7 +535,8 @@ export default {
|
||||
.layout-content {
|
||||
margin: 24px 24px 0;
|
||||
height: 64px;
|
||||
padding: 0 12px 0 0;
|
||||
padding: 0 12px;
|
||||
background-color: #001125 !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -743,4 +714,66 @@ export default {
|
||||
padding: 9px 16px !important;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
// 左侧菜单
|
||||
.layout-sider {
|
||||
background-color: transparent !important;
|
||||
.ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
|
||||
display: none;
|
||||
}
|
||||
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
|
||||
border-right: none;
|
||||
}
|
||||
.ant-menu-item {
|
||||
margin-bottom: 24px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
background-image: url("~@assets/images/menu/menu.png");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
|
||||
& > a, &:hover > a {
|
||||
font-style: italic;
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.96);
|
||||
line-height: 24px;
|
||||
text-shadow: 0 0 2px rgba(0,0,0,0.6);
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
background-image: url("~@assets/images/menu/menu.png");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
}
|
||||
&.ant-menu-item-selected {
|
||||
background-image: url("~@assets/images/menu/menu-act.png");
|
||||
}
|
||||
}
|
||||
.ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
|
||||
display: none;
|
||||
}
|
||||
.ant-menu-vertical > .ant-menu-item, .ant-menu-vertical-left > .ant-menu-item, .ant-menu-vertical-right > .ant-menu-item, .ant-menu-inline > .ant-menu-item, .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
// 背景色设置透明
|
||||
.ant-menu, .ant-menu-submenu > .ant-menu {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,80 +1,50 @@
|
||||
<template>
|
||||
<div class="user-wrapper" :class="theme">
|
||||
<!-- update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
|
||||
<!-- update-begin author:sunjianlei date:20191@20 for: 解决全局样式冲突的问题 -->
|
||||
<!-- <span class="action" @click="showClick">-->
|
||||
<!-- <a-icon type="search"></a-icon>-->
|
||||
<!-- </span>-->
|
||||
<!-- update-begin author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 -->
|
||||
<!-- <component :is="searchMenuComp" v-show="searchMenuVisible || isMobile()" class="borders" :visible="searchMenuVisible" title="搜索菜单" :footer="null" @cancel="searchMenuVisible=false">-->
|
||||
<span class='search-box'>
|
||||
<a-icon type='search' />
|
||||
</span>
|
||||
<a-select
|
||||
class="search-input"
|
||||
showSearch
|
||||
:showArrow="false"
|
||||
placeholder="请输入搜索内容"
|
||||
optionFilterProp="children"
|
||||
:filterOption="filterOption"
|
||||
:open="isMobile()?true:null"
|
||||
:getPopupContainer="(node) => node.parentNode"
|
||||
:style="isMobile()?{width: '100%',marginBottom:'50px'}:{}"
|
||||
@change="searchMethods"
|
||||
@blur="hiddenClick"
|
||||
>
|
||||
|
||||
<a-select-option v-for="(site,index) in searchMenuOptions" :key="index" :value="site.id">{{site.meta.title}}</a-select-option>
|
||||
</a-select>
|
||||
<!-- </component>-->
|
||||
<!-- update-end author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 -->
|
||||
<!-- update-end author:sunjianlei date:20191220 for: 解决全局样式冲突的问题 -->
|
||||
<!-- update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
|
||||
<span class="action">
|
||||
<a class="logout_title" target="_blank" href="#">
|
||||
<a-icon type="question-circle-o"></a-icon>
|
||||
<a-icon type="question-circle-o"></a-icon> 帮助
|
||||
</a>
|
||||
</span>
|
||||
<header-notice class="action"/>
|
||||
<span style="display:inline-block;padding: 0 0 0 16px">
|
||||
<template v-if='getAvatar()'>
|
||||
<a-avatar class="avatar" size="small" :src="getAvatar()"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-avatar :size="20">
|
||||
<template #icon> <a-icon type="user"></a-icon></template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
</span>
|
||||
<!-- <header-notice class="action"/>-->
|
||||
<!-- <span style="display:inline-block;padding: 0 0 0 16px">-->
|
||||
<!-- <template v-if='getAvatar()'>-->
|
||||
<!-- <a-avatar class="avatar" size="small" :src="getAvatar()"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else>-->
|
||||
<!-- <a-avatar :size="20">-->
|
||||
<!-- <template #icon> <a-icon type="user"></a-icon></template>-->
|
||||
<!-- </a-avatar>-->
|
||||
<!-- </template>-->
|
||||
<!-- </span>-->
|
||||
<a-dropdown>
|
||||
<span class=" small-action">
|
||||
<span v-if="isDesktop()">欢迎您，{{ nickname() }}</span>
|
||||
<a-icon type="user"></a-icon><span v-if="isDesktop()"> {{ nickname() }}</span>
|
||||
</span>
|
||||
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
|
||||
<a-menu-item key="0">
|
||||
<router-link :to="{ name: 'account-center' }">
|
||||
<a-icon type="user"/>
|
||||
<span>个人中心</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="1">
|
||||
<router-link :to="{ name: 'account-settings-base' }">
|
||||
<a-icon type="setting"/>
|
||||
<span>账户设置</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="3" @click="systemSetting">
|
||||
<a-icon type="tool"/>
|
||||
<span>系统设置</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="4" @click="updatePassword">
|
||||
<a-icon type="setting"/>
|
||||
<span>密码修改</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="5" @click="updateCurrentDepart">
|
||||
<a-icon type="cluster"/>
|
||||
<span>切换部门</span>
|
||||
</a-menu-item>
|
||||
<!-- <a-menu-item key="0">-->
|
||||
<!-- <router-link :to="{ name: 'account-center' }">-->
|
||||
<!-- <a-icon type="user"/>-->
|
||||
<!-- <span>个人中心</span>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="1">-->
|
||||
<!-- <router-link :to="{ name: 'account-settings-base' }">-->
|
||||
<!-- <a-icon type="setting"/>-->
|
||||
<!-- <span>账户设置</span>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="3" @click="systemSetting">-->
|
||||
<!-- <a-icon type="tool"/>-->
|
||||
<!-- <span>系统设置</span>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="4" @click="updatePassword">-->
|
||||
<!-- <a-icon type="setting"/>-->
|
||||
<!-- <span>密码修改</span>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="5" @click="updateCurrentDepart">-->
|
||||
<!-- <a-icon type="cluster"/>-->
|
||||
<!-- <span>切换部门</span>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<a-menu-item key="6" @click="clearCache">
|
||||
<a-icon type="sync"/>
|
||||
<span>清理缓存</span>
|
||||
@@ -83,21 +53,15 @@
|
||||
<a-icon type="setting"/>
|
||||
<span>测试</span>
|
||||
</a-menu-item>
|
||||
<a-menu-divider/>
|
||||
<a-menu-divider/>-->
|
||||
<a-menu-item key="3">
|
||||
<a href="javascript:;" @click="handleLogout">
|
||||
<a-icon type="logout"/>
|
||||
<span>退出登录</span>
|
||||
</a>
|
||||
</a-menu-item>-->
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<span class="action">
|
||||
<a class="logout_title" href="javascript:;" @click="handleLogout">
|
||||
<a-icon type="logout"/>
|
||||
<span v-if="isDesktop()"> 退出登录</span>
|
||||
</a>
|
||||
</span>
|
||||
<user-password ref="userPassword"></user-password>
|
||||
<depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>
|
||||
<setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>
|
||||
@@ -289,6 +253,10 @@ export default {
|
||||
}
|
||||
/* update_begin author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
|
||||
/* update-begin author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
|
||||
|
||||
.user-wrapper {
|
||||
color: @primary-color;
|
||||
}
|
||||
.user-wrapper .search-input {
|
||||
width: 210px;
|
||||
color: inherit;
|
||||
@@ -311,7 +279,7 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.ant-avatar {
|
||||
background-color: #fff;
|
||||
color: #333 !important;
|
||||
color: #fff !important;
|
||||
border: 1px solid #333;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ export default {
|
||||
fixSiderbar: false, // sticky siderbar
|
||||
autoHideHeader: false, // auto hide header
|
||||
colorWeak: false,
|
||||
multipage: true, // 默认多页签模式
|
||||
multipage: false, // 默认多页签模式
|
||||
// vue-ls options
|
||||
storageOptions: {
|
||||
namespace: 'pro__', // key prefix
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<a-button title="删除多条数据" @click="batchDel" type="default">批量删除</a-button>
|
||||
<!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>-->
|
||||
</a-row>
|
||||
<div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
|
||||
<div style="padding-left:16px;height: 100%; margin-top: 5px">
|
||||
<!-- <a-alert type="info" :showIcon="true">-->
|
||||
<!-- <div slot="message">-->
|
||||
<!-- 当前选择：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>-->
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<a-row :gutter="10">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
<div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
|
||||
<div style="padding-left:16px;height: 100%; margin-top: 5px">
|
||||
<a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
|
||||
<!-- 树-->
|
||||
|
||||
|
||||
@@ -11,8 +11,6 @@
|
||||
<div
|
||||
:style="{
|
||||
padding:'10px',
|
||||
border: '1px solid #e9e9e9',
|
||||
background: '#fff',
|
||||
}">
|
||||
|
||||
<div class="table-page-search-wrapper">
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>1</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EquipmentManagement'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>1</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SystemSettings'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>1</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WellheadDataMonitoring'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user