From 1598fac6c5769b061dd02e937fbaf969b5e1c20d Mon Sep 17 00:00:00 2001
From: hyingbo <1363390067@qq.com>
Date: 星期一, 18 八月 2025 14:33:52 +0800
Subject: [PATCH] 首页样式调整
---
src/views/dashboard/DncManagerSignage.vue | 233 ++++----
src/components/page/GlobalFooter.vue | 42
src/components/layouts/TabLayout.vue | 280 +++++-----
src/components/page/GlobalLayout.vue | 1019 ++++++++++++++++++------------------
4 files changed, 782 insertions(+), 792 deletions(-)
diff --git a/src/components/layouts/TabLayout.vue b/src/components/layouts/TabLayout.vue
index 4eb6c7a..a9ddfdb 100644
--- a/src/components/layouts/TabLayout.vue
+++ b/src/components/layouts/TabLayout.vue
@@ -5,7 +5,7 @@
<!-- update-end- author:sunjianlei --- date:20191009 --- for: 鎻愬崌鍙抽敭鑿滃崟鐨勫眰绾� -->
<a-tabs
@contextmenu.native="e => onContextmenu(e)"
- v-if="$route.meta.title!=='棣栭〉'&&multipage"
+ v-if="multipage"
:active-key="activePage"
class="tab-layout-tabs"
style="height:52px"
@@ -14,12 +14,11 @@
@change="changePage"
@tabClick="tabCallBack"
@edit="editPage">
- <a-tab-pane :id="page.path" :key="page.path" v-for="page in pageList"
- :closable="!(page.meta.title=='棣栭〉')">
- <span slot="tab" :pagekey="page.path">{{ page.meta.title }}</span>
+ <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList" :closable="!(page.meta.title=='棣栭〉')">
+ <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
</a-tab-pane>
</a-tabs>
- <div :style="{padding: $route.meta.title=='棣栭〉'?'0':'12px 12px 0'}">
+ <div style="margin: 12px 12px 0;">
<!-- update-begin-author:taoyan date:20201221 for:姝ゅ鍒犳帀transition鏍囩 涓嶇煡閬撲负浠�涔堝姞涓婂悗 椤甸潰璺敱鍒囨崲鐨勬椂鍊欏嵆1鍙婅彍鍗曞垏鍒�2鍙婅彍鍗曠殑鏃跺�� 涓や釜鑿滃崟椤甸潰浼氬悓鏃跺嚭鐜�300-500绉掑乏鍙� -->
<keep-alive v-if="multipage">
<router-view v-if="reloadFlag"/>
@@ -29,6 +28,9 @@
</template>
<!-- update-end-author:taoyan date:20201221 for:姝ゅ鍒犳帀transition鏍囩 涓嶇煡閬撲负浠�涔堝姞涓婂悗 椤甸潰璺敱鍒囨崲鐨勬椂鍊欏嵆1鍙婅彍鍗曞垏鍒�2鍙婅彍鍗曠殑鏃跺�� 涓や釜鑿滃崟椤甸潰浼氬悓鏃跺嚭鐜�300-500绉掑乏鍙� -->
</div>
+ <!-- update-begin-author:zyf date:20211129 for:qiankun 鎸傝浇瀛愬簲鐢ㄧ洅瀛� -->
+ <div id="content" class="app-view-box"></div>
+ <!-- update-end-author:zyf date:20211129 for: qiankun 鎸傝浇瀛愬簲鐢ㄧ洅瀛�-->
</global-layout>
</template>
@@ -39,6 +41,7 @@
import { triggerWindowResizeEvent } from '@/utils/util'
import Vue from 'vue'
import { CACHE_INCLUDED_ROUTES } from '@/store/mutation-types'
+import registerApps from "@/qiankun";
const indexKey = '/dashboard/analysis'
@@ -61,13 +64,15 @@
{ key: '2', icon: 'arrow-right', text: '鍏抽棴鍙充晶' },
{ key: '3', icon: 'close', text: '鍏抽棴鍏跺畠' }
],
- reloadFlag: true
+ reloadFlag:true
}
},
/* update_begin author:wuxianquan date:20190828 for: 鍏抽棴褰撳墠tab椤碉紝渚涘瓙椤甸潰璋冪敤 ->鏈涜彍鍗曡兘閰嶇疆澶栭摼锛岀洿鎺ュ脊鍑烘柊椤甸潰鑰屼笉鏄祵鍏frame #428 */
- provide() {
- return {
- closeCurrent: this.closeCurrent
+ provide(){
+ return{
+ closeCurrent:this.closeCurrent,
+ changeTitle: this.changeTitle,
+ changeTabTitle: this.changeTabTitle,
}
},
/* update_end author:wuxianquan date:20190828 for: 鍏抽棴褰撳墠tab椤碉紝渚涘瓙椤甸潰璋冪敤->鏈涜彍鍗曡兘閰嶇疆澶栭摼锛岀洿鎺ュ脊鍑烘柊椤甸潰鑰屼笉鏄祵鍏frame #428 */
@@ -91,9 +96,16 @@
this.pageList.push(currentRoute)
this.linkList.push(currentRoute.fullPath)
this.activePage = currentRoute.fullPath
- this.$bus.$on('clickMenuTitleSelected', this.clickMenuTitleSelected)
},
mounted() {
+ if (process.env.VUE_APP_QIANKUN == 'true') {
+ //update-begin-author:zyf date:20211129 for:qiankun 娉ㄥ唽瀛愬簲鐢�
+ if (!window.qiankunStarted) {
+ window.qiankunStarted = true;
+ registerApps();
+ }
+ //update-end-author:zyf date:20211129 for:qiankun 娉ㄥ唽瀛愬簲鐢�
+ }
},
watch: {
'$route': function(newRoute) {
@@ -101,17 +113,17 @@
this.activePage = newRoute.fullPath
if (!this.multipage) {
this.linkList = [newRoute.fullPath]
- this.pageList = [Object.assign({}, newRoute)]
+ this.pageList = [Object.assign({},newRoute)]
// update-begin-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
- } else if (indexKey == newRoute.fullPath) {
+ } else if(indexKey==newRoute.fullPath) {
//棣栭〉鏃� 鍒ゆ柇鏄惁缂撳瓨 娌℃湁缂撳瓨 鍒锋柊涔�
if (newRoute.meta.keepAlive === false) {
this.routeReload()
}
// update-end-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
- } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
+ }else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
this.linkList.push(newRoute.fullPath)
- this.pageList.push(Object.assign({}, newRoute))
+ this.pageList.push(Object.assign({},newRoute))
//// update-begin-author:sunjianlei date:20200103 for: 濡傛灉鏂板鐨勯〉闈㈤厤缃簡缂撳瓨璺敱锛岄偅涔堝氨寮哄埗鍒锋柊涓�閬� #842
// if (newRoute.meta.keepAlive) {
// this.routeReload()
@@ -120,20 +132,20 @@
} else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
let oldIndex = this.linkList.indexOf(newRoute.fullPath)
let oldPositionRoute = this.pageList[oldIndex]
- this.pageList.splice(oldIndex, 1, Object.assign({}, newRoute, { meta: oldPositionRoute.meta }))
+ this.pageList.splice(oldIndex, 1, Object.assign({},newRoute,{meta:oldPositionRoute.meta}))
}
},
'activePage': function(key) {
let index = this.linkList.lastIndexOf(key)
let waitRouter = this.pageList[index]
// 銆怲ESTA-523銆戜慨澶嶏細涓嶅厑璁搁噸澶嶈烦杞矾鐢卞紓甯�
- if (waitRouter.path !== this.$route.fullPath) {
+ if (waitRouter.fullPath !== this.$route.fullPath) {
this.$router.push(Object.assign({}, waitRouter))
}
this.changeTitle(waitRouter.meta.title)
},
'multipage': function(newVal) {
- if (this.reloadFlag) {
+ if(this.reloadFlag){
if (!newVal) {
this.linkList = [this.$route.fullPath]
this.pageList = [this.$route]
@@ -145,7 +157,7 @@
if (this.multipage && this.linkList.indexOf(indexKey) === -1) {
this.addIndexToFirst()
}
- }
+ },
// update-end-author:sunjianlei date:20191223 for: 淇浠庡崟椤垫ā寮忓垏鎹㈠洖澶氶〉妯″紡鍚庨椤典笉灞呯涓�浣嶇殑 BUG
},
methods: {
@@ -166,13 +178,30 @@
// update-end-author:sunjianlei date:20191223 for: 淇浠庡崟椤垫ā寮忓垏鎹㈠洖澶氶〉妯″紡鍚庨椤典笉灞呯涓�浣嶇殑 BUG
// update-begin-author:sunjianlei date:20200120 for: 鍔ㄦ�佹洿鏀归〉闈㈡爣棰�
+ /**
+ * 淇敼褰撳墠椤甸潰鐨勭獥鍙ｆ爣棰�
+ * @param title 瑕佷慨鏀圭殑鏂版爣棰�
+ */
changeTitle(title) {
- let projectTitle = 'MDC鏅烘収杞﹂棿'
+ let projectTitle = "MDC鏅烘収杞﹂棿"
// 棣栭〉鐗规畩澶勭悊
if (this.$route.path === indexKey) {
document.title = projectTitle
} else {
document.title = title + ' 路 ' + projectTitle
+ }
+ },
+ /**
+ * 淇敼tab鏍囩鐨勬爣棰�
+ * @param title 瑕佷慨鏀圭殑鏂版爣棰�
+ * @param fullPath 瑕佷慨鏀圭殑璺敱鍏ㄨ矾寰勶紝濡傛灉涓嶅～灏辨槸淇敼褰撳墠璺敱
+ */
+ changeTabTitle(title, fullPath = '') {
+ if (title) {
+ let currentRoute = this.pageList.find((r) => r.fullPath === (fullPath ? fullPath : this.$route.fullPath))
+ if (currentRoute != null) {
+ currentRoute.meta = {...currentRoute.meta, title}
+ }
}
},
// update-end-author:sunjianlei date:20200120 for: 鍔ㄦ�佹洿鏀归〉闈㈡爣棰�
@@ -183,10 +212,10 @@
tabCallBack() {
this.$nextTick(() => {
//update-begin-author:taoyan date: 20201211 for:銆愭柊鐗堛�憃nline鎶ラ敊 JT-100
- setTimeout(() => {
+ setTimeout(()=>{
//鐪佸競鍖虹粍浠堕噷闈㈢粰window缁戝畾浜嗕釜resize浜嬩欢 瀵艰嚧鍒囨崲椤甸潰鐨勬椂鍊欒Е鍙戜簡浠栫殑resize锛屼絾鏄垏鎹㈤〉闈紝鐪佸競鍖虹粍浠惰繕娌¤閿�姣佸墠灏辫Е鍙戜簡璇ヤ簨浠讹紝瀵艰嚧鎺у埗鍙版姤閿欙紝鍔犱釜寤惰繜
triggerWindowResizeEvent()
- }, 20)
+ },20)
//update-end-author:taoyan date: 20201211 for:銆愭柊鐗堛�憃nline鎶ラ敊 JT-100
})
},
@@ -202,8 +231,9 @@
this.$message.warning('杩欐槸鏈�鍚庝竴椤碉紝涓嶈兘鍐嶅叧闂簡鍟�')
return
}
- let removeRoute = this.pageList.filter(item => item.path == key)
- this.pageList = this.pageList.filter(item => item.path !== key)
+ console.log("this.pageList ",this.pageList );
+ let removeRoute = this.pageList.filter(item => item.fullPath == key)
+ this.pageList = this.pageList.filter(item => item.fullPath !== key)
let index = this.linkList.indexOf(key)
this.linkList = this.linkList.filter(item => item !== key)
index = index >= this.linkList.length ? this.linkList.length - 1 : index
@@ -214,14 +244,16 @@
let cacheRouterArray = Vue.ls.get(CACHE_INCLUDED_ROUTES) || []
if (removeRoute && removeRoute[0]) {
let componentName = removeRoute[0].meta.componentName
- if (cacheRouterArray.includes(componentName)) {
+ console.log("key: ", key);
+ console.log("componentName: ", componentName);
+ if(cacheRouterArray.includes(componentName)){
cacheRouterArray.splice(cacheRouterArray.findIndex(item => item === componentName), 1)
Vue.ls.set(CACHE_INCLUDED_ROUTES, cacheRouterArray)
}
this.emitPageClosed(removeRoute[0])
}
//update-end--Author:scott Date:20201015 for锛氳矾鐢辩紦瀛橀棶棰橈紝鍏抽棴浜唗ab椤垫椂鍐嶆墦寮�灏变笉鍒锋柊 #842
- this.tabCallBack()
+
},
// 瑙﹀彂 page-closed 锛堥〉闈㈠叧闂級鍏ㄥ眬浜嬩欢
emitPageClosed(closedRoute) {
@@ -268,13 +300,13 @@
}
},
/* update_begin author:wuxianquan date:20190828 for: 鍏抽棴褰撳墠tab椤碉紝渚涘瓙椤甸潰璋冪敤->鏈涜彍鍗曡兘閰嶇疆澶栭摼锛岀洿鎺ュ脊鍑烘柊椤甸潰鑰屼笉鏄祵鍏frame #428 */
- closeCurrent() {
- this.remove(this.activePage)
+ closeCurrent(){
+ this.remove(this.activePage);
},
/* update_end author:wuxianquan date:20190828 for: 鍏抽棴褰撳墠tab椤碉紝渚涘瓙椤甸潰璋冪敤->鏈涜彍鍗曡兘閰嶇疆澶栭摼锛岀洿鎺ュ脊鍑烘柊椤甸潰鑰屼笉鏄祵鍏frame #428 */
closeOthers(pageKey) {
let index = this.linkList.indexOf(pageKey)
- if (pageKey == indexKey || pageKey.indexOf('?ticke=') >= 0) {
+ if (pageKey == indexKey || pageKey.indexOf('?ticke=')>=0) {
this.linkList = this.linkList.slice(index, index + 1)
this.pageList = this.pageList.slice(index, index + 1)
this.activePage = this.linkList[0]
@@ -282,7 +314,7 @@
let indexContent = this.pageList.slice(0, 1)[0]
this.linkList = this.linkList.slice(index, index + 1)
this.pageList = this.pageList.slice(index, index + 1)
- this.linkList.unshift(indexContent.path)
+ this.linkList.unshift(indexContent.fullPath)
this.pageList.unshift(indexContent)
this.activePage = this.linkList[1]
}
@@ -296,29 +328,27 @@
let index = this.linkList.indexOf(pageKey)
this.linkList = this.linkList.slice(index)
this.pageList = this.pageList.slice(index)
- this.linkList.unshift(indexContent.path)
+ this.linkList.unshift(indexContent.fullPath)
this.pageList.unshift(indexContent)
- // 鑻ュ皢婵�娲婚〉涓�骞跺叧闂垯鏄剧ず瀵艰埅鏍忛櫎棣栭〉绗竴涓〉闈�
if (this.linkList.indexOf(this.activePage) < 0) {
- this.activePage = this.linkList[1]
+ this.activePage = this.linkList[0]
}
},
closeRight(pageKey) {
let index = this.linkList.indexOf(pageKey)
this.linkList = this.linkList.slice(0, index + 1)
this.pageList = this.pageList.slice(0, index + 1)
- // 鑻ュ皢婵�娲婚〉涓�骞跺叧闂垯鏄剧ず瀵艰埅鏍忔渶鍚庝竴涓〉闈�
- if (this.linkList.indexOf(this.activePage) < 0) {
+ if (this.linkList.indexOf(this.activePage < 0)) {
this.activePage = this.linkList[this.linkList.length - 1]
}
},
//update-begin-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
- dynamicRouterShow(key, title) {
+ dynamicRouterShow(key,title){
let keyIndex = this.linkList.indexOf(key)
- if (keyIndex >= 0) {
+ if(keyIndex>=0){
let currRouter = this.pageList[keyIndex]
- let meta = Object.assign({}, currRouter.meta, { title: title })
- this.pageList.splice(keyIndex, 1, Object.assign({}, currRouter, { meta: meta }))
+ let meta = Object.assign({},currRouter.meta,{title:title})
+ this.pageList.splice(keyIndex, 1, Object.assign({},currRouter,{meta:meta}))
if (key === this.activePage) {
this.changeTitle(title)
}
@@ -327,137 +357,105 @@
//update-end-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
//update-begin-author:taoyan date:20191008 for:璺敱鍒锋柊
- routeReload() {
+ routeReload(){
this.reloadFlag = false
- let ToggleMultipage = 'ToggleMultipage'
- this.$store.dispatch(ToggleMultipage, false)
- this.$nextTick(() => {
- this.$store.dispatch(ToggleMultipage, true)
+ let ToggleMultipage = "ToggleMultipage"
+ this.$store.dispatch(ToggleMultipage,false)
+ this.$nextTick(()=>{
+ this.$store.dispatch(ToggleMultipage,true)
this.reloadFlag = true
})
},
//update-end-author:taoyan date:20191008 for:璺敱鍒锋柊
//鏂板涓�涓繑鍥炴柟娉�
- excuteCallback(callback) {
+ excuteCallback(callback){
callback()
},
-
- clickMenuTitleSelected(selectedMenus) {
- //console.log("鏂扮殑璺敱",newRoute)
- this.activePage = selectedMenus[0].path
- if (!this.multipage) {
- this.linkList = [this.linkList[0], selectedMenus[0].path]
- this.pageList = [this.pageList[0], Object.assign({}, selectedMenus[0])]
- // update-begin-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
- } else if (indexKey == selectedMenus[0].path) {
- //棣栭〉鏃� 鍒ゆ柇鏄惁缂撳瓨 娌℃湁缂撳瓨 鍒锋柊涔�
- if (selectedMenus[0].meta.keepAlive === false) {
- this.routeReload()
- }
- // update-end-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
- } else {
- // selectedMenus.forEach(menuItem => {
- // if (!this.linkList.includes(menuItem.path)) {
- // console.log('瑙﹀彂澧炲姞')
- // this.linkList.push(menuItem.path)
- // this.pageList.push(menuItem)
- // } else {
- // console.log('瑙﹀彂娌℃湁澧炲姞')
- // let oldIndex = this.linkList.indexOf(menuItem.path)
- // let oldPositionRoute = this.pageList[oldIndex]
- // this.pageList.splice(oldIndex, 1, Object.assign({}, menuItem, { meta: oldPositionRoute.meta }))
- // }
- // })
- // 鐐瑰嚮鏍囬鍚庡湪瀵艰埅鏍忚鐩栧墠涓�涓爣棰樻墍灞曞紑鐨勪笅绾ц彍鍗�
- this.linkList = [this.linkList[0], ...selectedMenus.map(item => item.path)]
- this.pageList = [this.pageList[0], ...selectedMenus]
- }
- }
}
}
</script>
<style lang="less">
- /*
- * The following styles are auto-applied to elements with
- * transition="page-transition" when their visibility is toggled
- * by Vue.js.
- *
- * You can easily play with the page transition by editing
- * these styles.
- */
+/*
+* The following styles are auto-applied to elements with
+* transition="page-transition" when their visibility is toggled
+* by Vue.js.
+*
+* You can easily play with the page transition by editing
+* these styles.
+*/
- .page-transition-enter {
- opacity: 0;
+.page-transition-enter {
+ opacity: 0;
+}
+
+.page-transition-leave-active {
+ opacity: 0;
+}
+
+.page-transition-enter .page-transition-container,
+.page-transition-leave-active .page-transition-container {
+ -webkit-transform: scale(1.1);
+ transform: scale(1.1);
+}
+
+/*缇庡寲寮瑰嚭Tab鏍峰紡*/
+.ant-tabs-nav-container {
+ margin-top: 4px;
+}
+
+/* 淇敼 ant-tabs 鏍峰紡 */
+.tab-layout-tabs.ant-tabs {
+ border-bottom: 1px solid #ccc;
+ border-left: 1px solid #ccc;
+ background-color: white;
+ padding: 0 20px;
+
+ .ant-tabs-bar {
+ margin: 4px 0 0;
+ border: none;
}
- .page-transition-leave-active {
- opacity: 0;
- }
+}
- .page-transition-enter .page-transition-container,
- .page-transition-leave-active .page-transition-container {
- -webkit-transform: scale(1.1);
- transform: scale(1.1);
- }
+.tab-layout-tabs.ant-tabs {
- /*缇庡寲寮瑰嚭Tab鏍峰紡*/
- .ant-tabs-nav-container {
- margin-top: 4px;
- }
+ &.ant-tabs-card .ant-tabs-tab {
- /* 淇敼 ant-tabs 鏍峰紡 */
- .tab-layout-tabs.ant-tabs {
- border-bottom: 1px solid #ccc;
- border-left: 1px solid #ccc;
- background-color: white;
- padding: 0 20px;
-
- .ant-tabs-bar {
- margin: 4px 0 0;
- border: none;
- }
-
- }
-
- .tab-layout-tabs.ant-tabs {
-
- &.ant-tabs-card .ant-tabs-tab {
-
- padding: 0 20px 0 2px !important;
+ padding: 0 24px !important;
background-color: white !important;
- /*margin-right: 10px !important;*/
+ margin-right: 10px !important;
- .ant-tabs-close-x {
- width: 12px !important;
- height: 12px !important;
- opacity: 0 !important;
- cursor: pointer !important;
- font-size: 12px !important;
- margin: 0 !important;
- position: absolute;
- top: 36%;
- right: 6px;
- }
+ .ant-tabs-close-x {
+ width: 12px !important;
+ height: 12px !important;
+ opacity: 0 !important;
+ cursor: pointer !important;
+ font-size: 12px !important;
+ margin: 0 !important;
+ position: absolute;
+ top: 36%;
+ right: 6px;
+ }
- &:hover .ant-tabs-close-x {
- opacity: 1 !important;
- }
-
+ &:hover .ant-tabs-close-x {
+ opacity: 1 !important;
}
}
- .tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
- .ant-tabs-tab {
- border: none !important;
- border-bottom: 1px solid transparent !important;
- }
- .ant-tabs-tab-active {
- border-color: @primary-color!important;
- }
+}
+
+.tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
+ .ant-tabs-tab {
+ border: none !important;
+ border-bottom: 1px solid transparent !important;
}
+ .ant-tabs-tab-active {
+ border-color: @primary-color!important;
+ }
+}
</style>
diff --git a/src/components/page/GlobalFooter.vue b/src/components/page/GlobalFooter.vue
index 52f3e1f..42911dc 100644
--- a/src/components/page/GlobalFooter.vue
+++ b/src/components/page/GlobalFooter.vue
@@ -1,7 +1,6 @@
<template>
<div class="footer">
- <div class="copyright"
- :style="{background:$route.meta.title==='棣栭〉'?'#151548':'',color:$route.meta.title==='棣栭〉'?'#fff':''}">
+ <div class="copyright">
Copyright
<a-icon type="copyright"/>
2024 <span>2015-2025 鐏电鏅鸿兘</span>
@@ -10,33 +9,34 @@
</template>
<script>
- export default {
- name: 'LayoutFooter'
- }
+export default {
+ name: 'LayoutFooter'
+}
</script>
<style lang="less" scoped>
- .footer {
- text-align: center;
+.footer {
+ text-align: center;
- .links {
- margin-bottom: 8px;
+ .links {
+ margin-bottom: 8px;
- a {
- color: rgba(0, 0, 0, .45);
+ a {
+ color: rgba(0, 0, 0, .45);
- &:hover {
- color: rgba(0, 0, 0, .65);
- }
+ &:hover {
+ color: rgba(0, 0, 0, .65);
+ }
- &:not(:last-child) {
- margin-right: 40px;
- }
+ &:not(:last-child) {
+ margin-right: 40px;
}
}
- .copyright {
- color: rgba(0, 0, 0, .45);
- font-size: 14px;
- }
}
+
+ .copyright {
+ color: rgba(0, 0, 0, .45);
+ font-size: 14px;
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index d827e04..fad7f31 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -69,8 +69,7 @@
/>
<!-- layout content -->
- <a-layout-content
- :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' ,background: $route.meta.title=='棣栭〉'?'#151548':''}">
+ <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
<slot></slot>
</a-layout-content>
@@ -87,277 +86,293 @@
</template>
<script>
- import SideMenu from '@/components/menu/SideMenu'
- 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'
- // update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝ｅ湪缂栬瘧 ------
- // import SettingDrawer from '@/components/setting/SettingDrawer'
- // 娉ㄩ噴杩欎釜鍥犱负鍦ㄤ釜浜鸿缃ā鍧楀凡缁忓姞杞戒簡SettingDrawer椤甸潰
- // update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝ｅ湪缂栬瘧 ------
+import SideMenu from '@/components/menu/SideMenu'
+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'
+// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝ｅ湪缂栬瘧 ------
+// import SettingDrawer from '@/components/setting/SettingDrawer'
+// 娉ㄩ噴杩欎釜鍥犱负鍦ㄤ釜浜鸿缃ā鍧楀凡缁忓姞杞戒簡SettingDrawer椤甸潰
+// update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝ｅ湪缂栬瘧 ------
- export default {
- name: 'GlobalLayout',
- components: {
- SideMenu,
- GlobalHeader,
- GlobalFooter,
- // update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝ｅ湪缂栬瘧 ------
- // // SettingDrawer
- // 娉ㄩ噴杩欎釜鍥犱负鍦ㄤ釜浜鸿缃ā鍧楀凡缁忓姞杞戒簡SettingDrawer椤甸潰
- // update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝ｅ湪缂栬瘧 ------
+export default {
+ name: 'GlobalLayout',
+ components: {
+ SideMenu,
+ GlobalHeader,
+ GlobalFooter,
+ // update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝ｅ湪缂栬瘧 ------
+ // // SettingDrawer
+ // 娉ㄩ噴杩欎釜鍥犱负鍦ㄤ釜浜鸿缃ā鍧楀凡缁忓姞杞戒簡SettingDrawer椤甸潰
+ // update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝ｅ湪缂栬瘧 ------
- },
- mixins: [mixin, mixinDevice],
- data() {
- return {
- collapsed: false,
- activeMenu:{},
- menus: []
- }
- },
- computed: {
- ...mapState({
- // 涓昏矾鐢�
- mainRouters: state => state.permission.addRouters,
- // 鍚庡彴鑿滃崟
- permissionMenuList: state => state.user.permissionList
- })
- },
- watch: {
- sidebarOpened(val) {
- this.collapsed = !val
- }
- },
- created() {
- //--update-begin----author:scott---date:20190320------for:鏍规嵁鍚庡彴鑿滃崟閰嶇疆锛屽垽鏂槸鍚﹁矾鐢辫彍鍗曞瓧娈碉紝鍔ㄦ�侀�夋嫨鏄惁鐢熸垚璺敱锛堜负浜嗘敮鎸佸弬鏁癠RL鑿滃崟锛�------
- //this.menus = this.mainRouters.find((item) => item.path === '/').children;
- this.menus = this.permissionMenuList
-
- //--update-begin----author:liusq---date:20210223------for:鍏充簬娴嬭竟鑿滃崟閬尅鍐呭闂璇︾粏璇存槑 #2255
- this.collapsed=!this.sidebarOpened;
- //--update-begin----author:liusq---date:20210223------for:鍏充簬娴嬭竟鑿滃崟閬尅鍐呭闂璇︾粏璇存槑 #2255
-
- // 鏍规嵁鍚庡彴閰嶇疆鑿滃崟锛岄噸鏂版帓搴忓姞杞借矾鐢变俊鎭�
- //console.log('----鍔犺浇鑿滃崟閫昏緫----')
- //console.log(this.mainRouters)
- //console.log(this.permissionMenuList)
- //console.log('----navTheme------'+this.navTheme)
- //--update-end----author:scott---date:20190320------for:鏍规嵁鍚庡彴鑿滃崟閰嶇疆锛屽垽鏂槸鍚﹁矾鐢辫彍鍗曞瓧娈碉紝鍔ㄦ�侀�夋嫨鏄惁鐢熸垚璺敱锛堜负浜嗘敮鎸佸弬鏁癠RL鑿滃崟锛�------
- },
- methods: {
- ...mapActions(['setSidebar']),
- toggle() {
- this.collapsed = !this.collapsed
- this.setSidebar(!this.collapsed)
- triggerWindowResizeEvent()
- },
- menuSelect() {
- if (!this.isDesktop()) {
- this.collapsed = false
- }
- },
- //update-begin-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
- myMenuSelect(value){
- //姝ゅ瑙﹀彂鍔ㄦ�佽矾鐢辫鐐瑰嚮浜嬩欢
- this.findMenuBykey(this.menus,value.key)
- this.$emit("dynamicRouterShow",value.key,this.activeMenu.meta.title)
- },
- findMenuBykey(menus,key){
- for(let i of menus){
- if(i.path==key){
- this.activeMenu = {...i}
- }else if(i.children && i.children.length>0){
- this.findMenuBykey(i.children,key)
- }
- }
- },
- //update-end-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
-
- // update-begin-author:sunjianlei date:20210409 for: 淇鍔ㄦ�佸姛鑳芥祴璇曡彍鍗曘�佸甫鍙傛暟鑿滃崟鏍囬閿欒銆佸睍寮�閿欒鐨勯棶棰�
- handleUpdateMenuTitle(value) {
- this.findMenuBykey(this.menus, value.path)
- this.activeMenu.meta.title = value.meta.title
- this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title)
- },
- // update-end-author:sunjianlei date:20210409 for: 淇鍔ㄦ�佸姛鑳芥祴璇曡彍鍗曘�佸甫鍙傛暟鑿滃崟鏍囬閿欒銆佸睍寮�閿欒鐨勯棶棰�
-
+ },
+ mixins: [mixin, mixinDevice],
+ data() {
+ return {
+ collapsed: false,
+ activeMenu:{},
+ menus: []
}
+ },
+ computed: {
+ ...mapState({
+ // 涓昏矾鐢�
+ mainRouters: state => state.permission.addRouters,
+ // 鍚庡彴鑿滃崟
+ permissionMenuList: state => state.user.permissionList
+ })
+ },
+ watch: {
+ sidebarOpened(val) {
+ this.collapsed = !val
+ }
+ },
+ created() {
+ //--update-begin----author:scott---date:20190320------for:鏍规嵁鍚庡彴鑿滃崟閰嶇疆锛屽垽鏂槸鍚﹁矾鐢辫彍鍗曞瓧娈碉紝鍔ㄦ�侀�夋嫨鏄惁鐢熸垚璺敱锛堜负浜嗘敮鎸佸弬鏁癠RL鑿滃崟锛�------
+ //this.menus = this.mainRouters.find((item) => item.path === '/').children;
+ this.menus = this.permissionMenuList
+
+ //--update-begin----author:liusq---date:20210223------for:鍏充簬娴嬭竟鑿滃崟閬尅鍐呭闂璇︾粏璇存槑 #2255
+ this.collapsed=!this.sidebarOpened;
+ //--update-begin----author:liusq---date:20210223------for:鍏充簬娴嬭竟鑿滃崟閬尅鍐呭闂璇︾粏璇存槑 #2255
+
+ // 鏍规嵁鍚庡彴閰嶇疆鑿滃崟锛岄噸鏂版帓搴忓姞杞借矾鐢变俊鎭�
+ //console.log('----鍔犺浇鑿滃崟閫昏緫----')
+ //console.log(this.mainRouters)
+ //console.log(this.permissionMenuList)
+ //console.log('----navTheme------'+this.navTheme)
+ //--update-end----author:scott---date:20190320------for:鏍规嵁鍚庡彴鑿滃崟閰嶇疆锛屽垽鏂槸鍚﹁矾鐢辫彍鍗曞瓧娈碉紝鍔ㄦ�侀�夋嫨鏄惁鐢熸垚璺敱锛堜负浜嗘敮鎸佸弬鏁癠RL鑿滃崟锛�------
+ },
+ methods: {
+ ...mapActions(['setSidebar']),
+ toggle() {
+ this.collapsed = !this.collapsed
+ this.setSidebar(!this.collapsed)
+ triggerWindowResizeEvent()
+ },
+ menuSelect() {
+ if (!this.isDesktop()) {
+ this.collapsed = false
+ }
+ },
+ //update-begin-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
+ myMenuSelect(value){
+ //姝ゅ瑙﹀彂鍔ㄦ�佽矾鐢辫鐐瑰嚮浜嬩欢
+ this.findMenuBykey(this.menus,value.key)
+ this.$emit("dynamicRouterShow",value.key,this.activeMenu.meta.title)
+ },
+ findMenuBykey(menus,key){
+ for(let i of menus){
+ if(i.path==key){
+ this.activeMenu = {...i}
+ }else if(i.children && i.children.length>0){
+ this.findMenuBykey(i.children,key)
+ }
+ }
+ },
+ //update-end-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
+
+ // update-begin-author:sunjianlei date:20210409 for: 淇鍔ㄦ�佸姛鑳芥祴璇曡彍鍗曘�佸甫鍙傛暟鑿滃崟鏍囬閿欒銆佸睍寮�閿欒鐨勯棶棰�
+ handleUpdateMenuTitle(value) {
+ this.findMenuBykey(this.menus, value.path)
+ this.activeMenu.meta.title = value.meta.title
+ this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title)
+ },
+ // update-end-author:sunjianlei date:20210409 for: 淇鍔ㄦ�佸姛鑳芥祴璇曡彍鍗曘�佸甫鍙傛暟鑿滃崟鏍囬閿欒銆佸睍寮�閿欒鐨勯棶棰�
+
}
+}
</script>
<style lang="less">
- body {
- // 鎵撳紑婊氬姩鏉″浐瀹氭樉绀�
- // 娉ㄩ噴鍘熷洜锛歩ssues/I5VK11
- //overflow-y: scroll;
+body {
+ // 鎵撳紑婊氬姩鏉″浐瀹氭樉绀�
+ // 娉ㄩ噴鍘熷洜锛歩ssues/I5VK11
+ //overflow-y: scroll;
- &.colorWeak {
- filter: invert(80%);
- }
+ &.colorWeak {
+ filter: invert(80%);
}
+}
- .layout {
- min-height: 100vh !important;
- overflow-x: hidden;
+.layout {
+ min-height: 100vh !important;
+ overflow-x: hidden;
- &.mobile {
+ &.mobile {
- .ant-layout-content {
+ .ant-layout-content {
- .content {
- margin: 24px 0 0;
- }
- }
-
- /**
- * ant-table-wrapper
- * 瑕嗙洊鐨勮〃鏍兼墜鏈烘ā寮忔牱寮忥紝濡傛灉鎯充慨鏀瑰湪鎵嬫満涓婅〃鏍兼渶浣庡搴︼紝鍙互鍦ㄨ繖閲屾敼鍔�
- */
- .ant-table-wrapper {
- .ant-table-content {
- overflow-y: auto;
- }
- .ant-table-body {
- // update-begin---author:sunjianlei Date:20220104 for锛� 銆怞TC-480銆戠Щ鍔ㄧ涓嶆敮鎸佸乏鍙虫嫋鍔紝闇�瑕佹敞閲婃帀姝ゆ浠ｇ爜 ------------
- //min-width: 800px;
- // update-end---author:sunjianlei Date:20220104 for锛� 銆怞TC-480銆戠Щ鍔ㄧ涓嶆敮鎸佸乏鍙虫嫋鍔紝闇�瑕佹敞閲婃帀姝ゆ浠ｇ爜 ------------
- }
- }
- .sidemenu {
- .ant-header-fixedHeader {
-
- &.ant-header-side-opened, &.ant-header-side-closed {
- width: 100%
- }
- }
- }
-
- .topmenu {
- /* 蹇呴』涓� topmenu 鎵嶈兘鍚敤娴佸紡甯冨眬 */
- &.content-width-Fluid {
- .header-index-wide {
- margin-left: 0;
- }
- }
- }
- .header, .top-nav-header-index {
- .user-wrapper .action {
- padding: 0 12px;
- }
+ .content {
+ margin: 24px 0 0;
}
}
- &.ant-layout-has-sider {
- flex-direction: row;
+ /**
+ * ant-table-wrapper
+ * 瑕嗙洊鐨勮〃鏍兼墜鏈烘ā寮忔牱寮忥紝濡傛灉鎯充慨鏀瑰湪鎵嬫満涓婅〃鏍兼渶浣庡搴︼紝鍙互鍦ㄨ繖閲屾敼鍔�
+ */
+ .ant-table-wrapper {
+ .ant-table-content {
+ overflow-y: auto;
+ }
+ .ant-table-body {
+ // update-begin---author:sunjianlei Date:20220104 for锛� 銆怞TC-480銆戠Щ鍔ㄧ涓嶆敮鎸佸乏鍙虫嫋鍔紝闇�瑕佹敞閲婃帀姝ゆ浠ｇ爜 ------------
+ //min-width: 800px;
+ // update-end---author:sunjianlei Date:20220104 for锛� 銆怞TC-480銆戠Щ鍔ㄧ涓嶆敮鎸佸乏鍙虫嫋鍔紝闇�瑕佹敞閲婃帀姝ゆ浠ｇ爜 ------------
+ }
}
+ .sidemenu {
+ .ant-header-fixedHeader {
- .trigger {
- font-size: 22px;
- line-height: 42px;
- padding: 0 18px;
- cursor: pointer;
- transition: color 300ms, background 300ms;
-
- &:hover {
- background: rgba(255, 255, 255, 0.3);
+ &.ant-header-side-opened, &.ant-header-side-closed {
+ width: 100%
+ }
}
}
.topmenu {
- .ant-header-fixedHeader {
- position: fixed;
- top: 0;
- right: 0;
- z-index: 9;
- width: 100%;
- transition: width .2s;
-
- &.ant-header-side-opened {
- width: 100%;
- }
-
- &.ant-header-side-closed {
- width: 100%;
- }
- }
/* 蹇呴』涓� topmenu 鎵嶈兘鍚敤娴佸紡甯冨眬 */
&.content-width-Fluid {
.header-index-wide {
- max-width: unset;
- margin-left: 24px;
- }
-
- .page-header-index-wide {
- max-width: unset;
- }
- }
-
- }
-
- .sidemenu {
- .ant-header-fixedHeader {
- position: fixed;
- top: 0;
- right: 0;
- z-index: 9;
- width: 100%;
- transition: width .2s;
-
- &.ant-header-side-opened {
- width: calc(100% - 200px)
- }
-
- &.ant-header-side-closed {
- width: calc(100% - 80px)
+ margin-left: 0;
}
}
}
-
- .header {
- height: 64px;
- padding: 0 12px 0 0;
- background: #fff;
- box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
- position: relative;
- }
-
.header, .top-nav-header-index {
+ .user-wrapper .action {
+ padding: 0 12px;
+ }
+ }
+ }
+ &.ant-layout-has-sider {
+ flex-direction: row;
+ }
+
+ .trigger {
+ font-size: 22px;
+ line-height: 42px;
+ padding: 0 18px;
+ cursor: pointer;
+ transition: color 300ms, background 300ms;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.3);
+ }
+ }
+
+ .topmenu {
+ .ant-header-fixedHeader {
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 9;
+ width: 100%;
+ transition: width .2s;
+
+ &.ant-header-side-opened {
+ width: 100%;
+ }
+
+ &.ant-header-side-closed {
+ width: 100%;
+ }
+ }
+ /* 蹇呴』涓� topmenu 鎵嶈兘鍚敤娴佸紡甯冨眬 */
+ &.content-width-Fluid {
+ .header-index-wide {
+ max-width: unset;
+ margin-left: 24px;
+ }
+
+ .page-header-index-wide {
+ max-width: unset;
+ }
+ }
+
+ }
+
+ .sidemenu {
+ .ant-header-fixedHeader {
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 9;
+ width: 100%;
+ transition: width .2s;
+
+ &.ant-header-side-opened {
+ width: calc(100% - 200px)
+ }
+
+ &.ant-header-side-closed {
+ width: calc(100% - 80px)
+ }
+ }
+ }
+
+ .header {
+ height: 64px;
+ padding: 0 12px 0 0;
+ background: #fff;
+ box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+ position: relative;
+ }
+
+ .header, .top-nav-header-index {
+
+ .user-wrapper {
+ float: right;
+ height: 100%;
+
+ .action {
+ cursor: pointer;
+ padding: 0 14px;
+ display: inline-block;
+ transition: all .3s;
+
+ height: 70%;
+ line-height: 46px;
+
+ &.action-full {
+ height: 100%;
+ }
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.3);
+ }
+
+ .avatar {
+ margin: 20px 10px 20px 0;
+ color: #1890ff;
+ background: hsla(0, 0%, 100%, .85);
+ vertical-align: middle;
+ }
+
+ .icon {
+ font-size: 16px;
+ padding: 4px;
+ }
+
+ .anticon {
+ color: inherit;
+ }
+ }
+ }
+
+ &.dark {
.user-wrapper {
- float: right;
- height: 100%;
.action {
- cursor: pointer;
- padding: 0 14px;
- display: inline-block;
- transition: all .3s;
-
- height: 70%;
- line-height: 46px;
-
- &.action-full {
- height: 100%;
- }
+ color: black;
&:hover {
- background: rgba(255, 255, 255, 0.3);
- }
-
- .avatar {
- margin: 20px 10px 20px 0;
- color: #1890ff;
- background: hsla(0, 0%, 100%, .85);
- vertical-align: middle;
- }
-
- .icon {
- font-size: 16px;
- padding: 4px;
+ background: rgba(0, 0, 0, 0.05);
}
.anticon {
@@ -365,336 +380,320 @@
}
}
}
-
- &.dark {
- .user-wrapper {
-
- .action {
- color: black;
-
- &:hover {
- background: rgba(0, 0, 0, 0.05);
- }
-
- .anticon {
- color: inherit;
- }
- }
- }
- }
}
+ }
- &.mobile {
- .top-nav-header-index {
-
- .header-index-wide {
-
- .header-index-left {
-
- .trigger {
- color: rgba(255, 255, 255, 0.85);
- padding: 0 12px;
- }
-
- .logo.top-nav-header {
- text-align: center;
- width: 56px;
- line-height: 58px;
- }
- }
- }
-
- .user-wrapper .action .avatar {
- margin: 20px 0;
- }
-
- &.light {
-
- .header-index-wide {
-
- .header-index-left {
- .trigger {
- color: rgba(0, 0, 0, 0.65);
- }
- }
- }
- //
- }
- }
- }
-
- &.tablet {
- // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
- .top-nav-header-index {
-
- .header-index-wide {
-
- .header-index-left {
- .logo > a {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
- }
-
- }
-
+ &.mobile {
.top-nav-header-index {
- box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
- position: relative;
- transition: background .3s, width .2s;
.header-index-wide {
- width: 100%;
- margin: auto;
- padding: 0 20px 0 0;
- display: flex;
- height: 59px;
-
- .ant-menu.ant-menu-horizontal {
- border: none;
- height: 64px;
- line-height: 64px;
- }
.header-index-left {
- flex: 1 1;
- display: flex;
+
+ .trigger {
+ color: rgba(255, 255, 255, 0.85);
+ padding: 0 12px;
+ }
.logo.top-nav-header {
- width: 165px;
- height: 64px;
- position: relative;
- line-height: 64px;
- transition: all .3s;
- overflow: hidden;
-
- img {
- display: inline-block;
- vertical-align: middle;
- height: 32px;
- }
-
- h1 {
- color: #fff;
- display: inline-block;
- vertical-align: top;
- font-size: 16px;
- margin: 0 0 0 12px;
- font-weight: 400;
- }
+ text-align: center;
+ width: 56px;
+ line-height: 58px;
}
}
+ }
- .header-index-right {
- float: right;
- height: 59px;
- overflow: hidden;
- .action:hover {
- background-color: rgba(0, 0, 0, 0.05);
- }
- }
+ .user-wrapper .action .avatar {
+ margin: 20px 0;
}
&.light {
- background-color: #fff;
.header-index-wide {
+
.header-index-left {
- .logo {
- h1 {
- color: #002140;
- }
+ .trigger {
+ color: rgba(0, 0, 0, 0.65);
}
}
}
+ //
}
+ }
+ }
- &.dark {
+ &.tablet {
+ // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
+ .top-nav-header-index {
- .user-wrapper {
+ .header-index-wide {
- .action {
- color: white;
-
- &:hover {
- background: rgba(255, 255, 255, 0.3);
- }
+ .header-index-left {
+ .logo > a {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
}
- .header-index-wide .header-index-left .trigger:hover {
- background: rgba(255, 255, 255, 0.3);
- }
}
-
- }
-
- // 鍐呭鍖�
- .layout-content {
- margin: 24px 24px 0px;
- height: 64px;
- padding: 0 12px 0 0;
}
}
- .topmenu {
- .page-header-index-wide {
- margin: 0 auto;
- width: 100%;
- }
- }
-
- // drawer-sider 鑷畾涔�
- .ant-drawer.drawer-sider {
- .sider {
- box-shadow: none;
- }
-
- &.dark {
- .ant-drawer-content {
- background-color: rgb(0, 21, 41);
- }
- }
- &.light {
- box-shadow: none;
- .ant-drawer-content {
- background-color: #fff;
- }
- }
-
- .ant-drawer-body {
- padding: 0
- }
- }
-
- // 鑿滃崟鏍峰紡
- .sider {
- box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
+ .top-nav-header-index {
+ box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
position: relative;
- z-index: 10;
+ transition: background .3s, width .2s;
- &.ant-fixed-sidemenu {
- position: fixed;
- height: 100%;
- }
+ .header-index-wide {
+ width: 100%;
+ margin: auto;
+ padding: 0 20px 0 0;
+ display: flex;
+ height: 59px;
- .logo {
- height: 64px;
- position: relative;
- line-height: 64px;
- padding-left: 24px;
- -webkit-transition: all .3s;
- transition: all .3s;
- background: #002140;
- overflow: hidden;
-
- img, h1 {
- display: inline-block;
- vertical-align: middle;
+ .ant-menu.ant-menu-horizontal {
+ border: none;
+ height: 64px;
+ line-height: 64px;
}
- img {
- height: 32px;
+ .header-index-left {
+ flex: 1 1;
+ display: flex;
+
+ .logo.top-nav-header {
+ width: 165px;
+ height: 64px;
+ position: relative;
+ line-height: 64px;
+ transition: all .3s;
+ overflow: hidden;
+
+ img {
+ display: inline-block;
+ vertical-align: middle;
+ height: 32px;
+ }
+
+ h1 {
+ color: #fff;
+ display: inline-block;
+ vertical-align: top;
+ font-size: 16px;
+ margin: 0 0 0 12px;
+ font-weight: 400;
+ }
+ }
}
- h1 {
- color: #fff;
- font-size: 18px;
- margin: 0 0 0 8px;
- font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- font-weight: 600;
+ .header-index-right {
+ float: right;
+ height: 59px;
+ overflow: hidden;
+ .action:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+ }
}
}
&.light {
background-color: #fff;
- box-shadow: 2px 116px 8px 0 rgba(29, 35, 41, 0.05);
- .logo {
- background: #fff;
- box-shadow: 1px 1px 0 0 #e8e8e8;
-
- h1 {
- color: unset;
+ .header-index-wide {
+ .header-index-left {
+ .logo {
+ h1 {
+ color: #002140;
+ }
+ }
}
}
+ }
- .ant-menu-light {
- border-right-color: transparent;
+ &.dark {
+
+ .user-wrapper {
+
+ .action {
+ color: white;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.3);
+ }
+ }
+ }
+ .header-index-wide .header-index-left .trigger:hover {
+ background: rgba(255, 255, 255, 0.3);
}
}
}
- // 澶栫疆鐨勬牱寮忔帶鍒�
- .user-dropdown-menu-wrapper.ant-dropdown-menu {
- padding: 4px 0;
+ // 鍐呭鍖�
+ .layout-content {
+ margin: 24px 24px 0px;
+ height: 64px;
+ padding: 0 12px 0 0;
+ }
- .ant-dropdown-menu-item {
- width: 160px;
+}
+
+.topmenu {
+ .page-header-index-wide {
+ margin: 0 auto;
+ width: 100%;
+ }
+}
+
+// drawer-sider 鑷畾涔�
+.ant-drawer.drawer-sider {
+ .sider {
+ box-shadow: none;
+ }
+
+ &.dark {
+ .ant-drawer-content {
+ background-color: rgb(0, 21, 41);
+ }
+ }
+ &.light {
+ box-shadow: none;
+ .ant-drawer-content {
+ background-color: #fff;
+ }
+ }
+
+ .ant-drawer-body {
+ padding: 0
+ }
+}
+
+// 鑿滃崟鏍峰紡
+.sider {
+ box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
+ position: relative;
+ z-index: 10;
+
+ &.ant-fixed-sidemenu {
+ position: fixed;
+ height: 100%;
+ }
+
+ .logo {
+ height: 64px;
+ position: relative;
+ line-height: 64px;
+ padding-left: 24px;
+ -webkit-transition: all .3s;
+ transition: all .3s;
+ background: #002140;
+ overflow: hidden;
+
+ img, h1 {
+ display: inline-block;
+ vertical-align: middle;
}
- .ant-dropdown-menu-item > .anticon:first-child,
- .ant-dropdown-menu-item > a > .anticon:first-child,
- .ant-dropdown-menu-submenu-title > .anticon:first-child
- .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
- min-width: 12px;
+ img {
+ height: 32px;
+ }
+
+ h1 {
+ color: #fff;
+ font-size: 18px;
+ margin: 0 0 0 8px;
+ font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font-weight: 600;
+ }
+ }
+
+ &.light {
+ background-color: #fff;
+ box-shadow: 2px 116px 8px 0 rgba(29, 35, 41, 0.05);
+
+ .logo {
+ background: #fff;
+ box-shadow: 1px 1px 0 0 #e8e8e8;
+
+ h1 {
+ color: unset;
+ }
+ }
+
+ .ant-menu-light {
+ border-right-color: transparent;
+ }
+ }
+
+}
+
+// 澶栫疆鐨勬牱寮忔帶鍒�
+.user-dropdown-menu-wrapper.ant-dropdown-menu {
+ padding: 4px 0;
+
+ .ant-dropdown-menu-item {
+ width: 160px;
+ }
+
+ .ant-dropdown-menu-item > .anticon:first-child,
+ .ant-dropdown-menu-item > a > .anticon:first-child,
+ .ant-dropdown-menu-submenu-title > .anticon:first-child
+ .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
+ min-width: 12px;
+ margin-right: 8px;
+ }
+
+}
+
+// 鏁版嵁鍒楄〃 鏍峰紡
+.table-alert {
+ margin-bottom: 16px;
+}
+
+.table-page-search-wrapper {
+
+ .ant-form-inline {
+
+ .ant-form-item {
+ display: flex;
+ margin-bottom: 24px;
+ margin-right: 0;
+
+ .ant-form-item-control-wrapper {
+ flex: 1 1;
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ > .ant-form-item-label {
+ line-height: 32px;
+ padding-right: 8px;
+ width: auto;
+ }
+ .ant-form-item-control {
+ height: 32px;
+ line-height: 32px;
+ }
+ }
+ }
+
+ .table-page-search-submitButtons {
+ display: block;
+ margin-bottom: 24px;
+ white-space: nowrap;
+ }
+
+}
+
+.content {
+
+ .table-operator {
+ margin-bottom: 18px;
+
+ button {
margin-right: 8px;
}
-
}
-
- // 鏁版嵁鍒楄〃 鏍峰紡
- .table-alert {
- margin-bottom: 16px;
- }
-
- .table-page-search-wrapper {
-
- .ant-form-inline {
-
- .ant-form-item {
- display: flex;
- margin-bottom: 24px;
- margin-right: 0;
-
- .ant-form-item-control-wrapper {
- flex: 1 1;
- display: inline-block;
- vertical-align: middle;
- }
-
- > .ant-form-item-label {
- line-height: 32px;
- padding-right: 8px;
- width: auto;
- }
- .ant-form-item-control {
- height: 32px;
- line-height: 32px;
- }
- }
- }
-
- .table-page-search-submitButtons {
- display: block;
- margin-bottom: 24px;
- white-space: nowrap;
- }
-
- }
-
- .content {
-
- .table-operator {
- margin-bottom: 18px;
-
- button {
- margin-right: 8px;
- }
- }
- }
+}
</style>
diff --git a/src/views/dashboard/DncManagerSignage.vue b/src/views/dashboard/DncManagerSignage.vue
index c3ec7eb..53b7bf2 100644
--- a/src/views/dashboard/DncManagerSignage.vue
+++ b/src/views/dashboard/DncManagerSignage.vue
@@ -1,25 +1,31 @@
<template>
- <div class="page-container">
- <div class="content-container">
- <div style="width: 50%" class="left-col">
- <dv-border-box-9 style="padding: 30px 20px 0">
- <div id="running_state_chart" style="width:100%;height: 300px"></div>
- <div id="efficiency_chart" style="width: 100%;height: 465px"></div>
- </dv-border-box-9>
+ <div class="home-container">
+ <div class="left-card">
+ <div class="card">
+ <h2 class="card-title">鍗＄墖1</h2>
+ <div class="card-content">
+ </div>
</div>
+ </div>
- <div style="width: 50%" class="middle-col">
- <dv-border-box-9 style="padding: 10px 10px 0">
- <!-- 娣诲姞"鎴戠殑寰呭姙"鏍囬 -->
- <div class="flow-todo-title">鎴戠殑寰呭姙</div>
-
+ <!-- 鍙充晶涓や釜灏忓崱鐗� -->
+ <div class="right-cards">
+ <div class="card top-card">
+ <h2 class="card-title">鎴戠殑寰呭姙</h2>
+ <div class="card-content">
<!-- 宓屽叆FlowTodo缁勪欢骞惰缃粯璁ゅ垎绫� -->
<flow-todo
ref="flowTodo"
class="embedded-flow-todo"
:defaultCategories="['drApproval','ggApproval','programConfirmApproval']"
></flow-todo>
- </dv-border-box-9>
+ </div>
+ </div>
+
+ <div class="card bottom-card">
+ <h2 class="card-title">鍗＄墖2</h2>
+ <div class="card-content">
+ </div>
</div>
</div>
</div>
@@ -43,7 +49,6 @@
// 纭繚缁勪欢鍔犺浇鍚庝娇鐢ㄩ粯璁ゅ垎绫绘煡璇㈡暟鎹�
this.$nextTick(() => {
if (this.$refs.flowTodo) {
- // 瑙﹀彂鏌ヨ锛屼娇鐢ㄩ粯璁ょ殑category鏉′欢[1,2]
this.$refs.flowTodo.searchQuery()
}
})
@@ -54,115 +59,103 @@
}
</script>
-<style lang="less" scoped>
-.page-container {
- background-color: #000b29;
+<style scoped>
+.home-container {
+ display: flex;
min-height: 100vh;
- padding: 15px;
-
- .content-container {
- padding-top: 5px;
- display: flex;
- justify-content: space-between;
- gap: 15px;
-
- .left-col, .middle-col {
- display: flex;
- flex-direction: column;
- }
-
- .middle-col {
- .dv-border-box-9 {
- background-color: #000b29;
- flex-grow: 1;
- }
-
- .flow-todo-title {
- color: #fff;
- font-size: 18px;
- font-weight: bold;
- margin-bottom: 15px;
- text-align: center;
- }
-
- .embedded-flow-todo {
- width: 100%;
- height: 340px; /* 鎺у埗楂樺害涓哄彸渚т竴鍗婂尯鍩� */
- overflow: auto;
- background-color: inherit;
- }
- }
- }
+ padding: 20px;
+ box-sizing: border-box;
+ gap: 20px;
+ background-color: #f5f7fa;
}
-// 宓屽叆缁勪欢鏍峰紡璋冩暣
-.embedded-flow-todo {
- // 闅愯棌鏌ヨ鍖哄煙銆佹搷浣滄寜閽拰閫夋嫨鎻愮ず
- /deep/ .table-page-search-wrapper,
- /deep/ .table-operator,
- /deep/ .ant-alert {
- display: none !important;
- }
-
- // 闅愯棌澶氶�夋鍒�
- /deep/ .ant-table-selection-column {
- display: none !important;
- }
-
- // 琛ㄦ牸杈规鏍峰紡
- /deep/ .ant-table {
- border: 1px solid rgba(9, 9, 9, 0.1) !important;
- border-collapse: collapse !important;
- }
- /deep/ .ant-table-thead > tr > th {
- border: 1px solid rgba(9, 9, 9, 0.1) !important;
- }
- /deep/ .ant-table-tbody > tr > td {
- border: 1px solid rgba(9, 9, 9, 0.1) !important;
- }
-
- // 琛ㄦ牸鏍峰紡璋冩暣
- /deep/ .ant-table,
- /deep/ .ant-table-tbody > tr > td,
- /deep/ .ant-table-thead > tr > th,
- /deep/ .ant-table-thead > tr > th span {
- background-color: transparent !important;
- color: #000000 !important;
- }
-
- // 鍒嗛〉鎺т欢鏍峰紡
- /deep/ .ant-pagination-item,
- /deep/ .ant-pagination-prev,
- /deep/ .ant-pagination-next {
- background-color: rgb(255, 255, 255) !important;
- border-color: rgb(255, 255, 255) !important;
- }
-
- /deep/ .ant-pagination-item a,
- /deep/ .ant-pagination-prev a,
- /deep/ .ant-pagination-next a {
- color: #000000 !important;
- }
-
- /deep/ .ant-pagination-item-active {
- background-color: rgba(33, 186, 198, 0.6) !important;
- border-color: rgba(33, 186, 198, 0.8) !important;
- }
-
- /deep/ .ant-card {
- background-color: transparent !important;
- border: none !important;
- }
-
- // 鎿嶄綔鍒楅摼鎺ユ牱寮�
- /deep/ .ant-table-tbody > tr > td a {
- color: #40a9ff !important;
- }
+.left-card {
+ flex: 1;
+ min-width: 0;
}
-// 杈规缁勪欢鏍峰紡
-/deep/ .dv-border-box-9 {
- --color: rgba(33, 186, 198, 0.6) !important;
- background-color: #000b29 !important;
+.right-cards {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
}
-</style>
+
+.card {
+ background: #ffffff;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+ padding: 10px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.top-card {
+ flex: 1;
+}
+
+.bottom-card {
+ flex: 1;
+}
+
+.card-title {
+ margin: 0 0 15px 0;
+ color: #333;
+ font-size: 18px;
+ font-weight: 600;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eee;
+}
+
+.card-content {
+ flex: 1;
+ overflow: auto;
+}
+
+/* 娓呴櫎寰呭姙椤甸潰鏌ヨ鏉′欢銆侀�変腑鏉℃暟銆佸閫夋 */
+.embedded-flow-todo >>> .table-page-search-wrapper {
+ display: none !important;
+}
+
+.embedded-flow-todo >>> .table-operator {
+ display: none !important;
+}
+
+.embedded-flow-todo >>> .ant-alert.ant-alert-info {
+ display: none !important;
+}
+
+.embedded-flow-todo >>> .ant-table-thead .ant-table-selection-column,
+.embedded-flow-todo >>> .ant-table-tbody .ant-table-selection-column {
+ display: none !important;
+}
+
+.embedded-flow-todo >>> .ant-table-selection {
+ display: none !important;
+}
+.embedded-flow-todo >>> .ant-table-row-selected {
+ background: transparent !important;
+}
+
+.embedded-flow-todo >>> .a-table {
+ margin-top: 0 !important;
+ border-top: none !important;
+}
+
+@media (max-width: 992px) {
+ .home-container {
+ flex-direction: column;
+ }
+
+ .left-card, .right-cards {
+ width: 100%;
+ }
+
+ .left-card {
+ margin-bottom: 20px;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3