From 1598fac6c5769b061dd02e937fbaf969b5e1c20d Mon Sep 17 00:00:00 2001
From: hyingbo <1363390067@qq.com>
Date: 星期一, 18 八月 2025 14:33:52 +0800
Subject: [PATCH] 首页样式调整
---
src/components/page/GlobalLayout.vue | 1016 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 508 insertions(+), 508 deletions(-)
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index 7b0aa51..fad7f31 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -86,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 {
@@ -364,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>
--
Gitblit v1.9.3