From 15792ad8baea4ab886dbfc58009847f26de45df8 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期五, 02 八月 2024 17:55:19 +0800
Subject: [PATCH] 1、利用viewport完成PC端页面响应式布局，其他端还未适配 2、基本完成语言大模型页面布局及部分功能 3、实现对于侧边栏图标在首页与其他页面时不同的展示风格 4、使用压缩后的背景图与首页gif（效果不好，跳转路由后仍会出现短暂背景图片未加载出情况） 5、修改项目浏览器页签图标
---
src/components/page/GlobalLayout.vue | 543 +++++------------------------------------------------
1 files changed, 59 insertions(+), 484 deletions(-)
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index 65e154a..53216c4 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -1,60 +1,47 @@
<template>
- <a-layout class="layout" :class="[device]">
+ <a-layout class="layout" :class="[device]"
+ :style="{backgroundImage:$route.meta.title==='棣栭〉'?`url(${require('../../assets/page/index/background.svg')}) !important`:`url(${require('../../assets/page/background.svg')})!important`}">
- <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>
+ <!--<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>
+ <side-menu
+ mode="inline"
+ :menus="menus"
+ @menuSelect="myMenuSelect"
+ @updateMenuTitle="handleUpdateMenuTitle"
+ :collapsed="true"
+ :collapsible="true"></side-menu>
<a-layout
- :class="[layoutMode, `content-width-${contentWidth}`]"
- :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
- <!-- layout header -->
- <global-header
- :mode="layoutMode"
- :menus="menus"
- :theme="navTheme"
- :collapsed="collapsed"
- :device="device"
- @toggle="toggle"
- @updateMenuTitle="handleUpdateMenuTitle"
- />
+ :class="[layoutMode, `content-width-${contentWidth}`]">
+ <!--<global-header></global-header>-->
<!-- layout content -->
- <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
+ <a-layout-content :style="{ height: '100%' }">
<slot></slot>
</a-layout-content>
<!-- layout footer -->
- <a-layout-footer style="padding: 0px">
+ <a-layout-footer style="padding: 0px;background-color: transparent">
<global-footer/>
</a-layout-footer>
</a-layout>
@@ -82,7 +69,7 @@
components: {
SideMenu,
GlobalHeader,
- GlobalFooter,
+ GlobalFooter
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝ｅ湪缂栬瘧 ------
// // SettingDrawer
// 娉ㄩ噴杩欎釜鍥犱负鍦ㄤ釜浜鸿缃ā鍧楀凡缁忓姞杞戒簡SettingDrawer椤甸潰
@@ -93,7 +80,7 @@
data() {
return {
collapsed: false,
- activeMenu:{},
+ activeMenu: {},
menus: []
}
},
@@ -116,7 +103,7 @@
this.menus = this.permissionMenuList
//--update-begin----author:liusq---date:20210223------for:鍏充簬娴嬭竟鑿滃崟閬尅鍐呭闂璇︾粏璇存槑 #2255
- this.collapsed=!this.sidebarOpened;
+ this.collapsed = !this.sidebarOpened
//--update-begin----author:liusq---date:20210223------for:鍏充簬娴嬭竟鑿滃崟閬尅鍐呭闂璇︾粏璇存槑 #2255
// 鏍规嵁鍚庡彴閰嶇疆鑿滃崟锛岄噸鏂版帓搴忓姞杞借矾鐢变俊鎭�
@@ -139,17 +126,17 @@
}
},
//update-begin-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
- myMenuSelect(value){
+ myMenuSelect(value) {
//姝ゅ瑙﹀彂鍔ㄦ�佽矾鐢辫鐐瑰嚮浜嬩欢
- this.findMenuBykey(this.menus,value.key)
- this.$emit("dynamicRouterShow",value.key,this.activeMenu.meta.title)
+ 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)
+ 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)
}
}
},
@@ -160,7 +147,7 @@
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: 淇鍔ㄦ�佸姛鑳芥祴璇曡彍鍗曘�佸甫鍙傛暟鑿滃崟鏍囬閿欒銆佸睍寮�閿欒鐨勯棶棰�
}
@@ -170,10 +157,6 @@
<style lang="less">
body {
- // 鎵撳紑婊氬姩鏉″浐瀹氭樉绀�
- // 娉ㄩ噴鍘熷洜锛歩ssues/I5VK11
- //overflow-y: scroll;
-
&.colorWeak {
filter: invert(80%);
}
@@ -182,348 +165,38 @@
.layout {
min-height: 100vh !important;
overflow-x: hidden;
+ background-size: cover !important;
+ background-repeat: no-repeat !important;
&.mobile {
-
.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%
- }
- }
+ &.ant-layout-has-sider {
+ flex-direction: row;
}
- .topmenu {
- /* 蹇呴』涓� topmenu 鎵嶈兘鍚敤娴佸紡甯冨眬 */
- &.content-width-Fluid {
- .header-index-wide {
- margin-left: 0;
- }
- }
- }
- .header, .top-nav-header-index {
- .user-wrapper .action {
- padding: 0 12px;
- }
- }
- }
+ .trigger {
+ font-size: 22px;
+ line-height: 42px;
+ padding: 0 18px;
+ cursor: pointer;
+ transition: color 300ms, background 300ms;
- &.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 {
-
- .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;
- }
- }
- }
- }
-
- }
-
- .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;
-
- .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;
- }
- }
- }
-
- .header-index-right {
- float: right;
- height: 59px;
- overflow: hidden;
- .action:hover {
- background-color: rgba(0, 0, 0, 0.05);
- }
- }
- }
-
- &.light {
- background-color: #fff;
-
- .header-index-wide {
- .header-index-left {
- .logo {
- h1 {
- color: #002140;
- }
- }
- }
- }
- }
-
- &.dark {
-
- .user-wrapper {
-
- .action {
- color: white;
-
- &:hover {
- background: rgba(255, 255, 255, 0.3);
- }
- }
- }
- .header-index-wide .header-index-left .trigger:hover {
+ &:hover {
background: rgba(255, 255, 255, 0.3);
}
}
}
- // 鍐呭鍖�
- .layout-content {
- margin: 24px 24px 0px;
- height: 64px;
- padding: 0 12px 0 0;
+ .sidemenu {
+ background-color: transparent;
}
- }
-
- .topmenu {
- .page-header-index-wide {
- margin: 0 auto;
- width: 100%;
- }
}
// drawer-sider 鑷畾涔�
@@ -549,65 +222,6 @@
}
}
- // 鑿滃崟鏍峰紡
- .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;
- }
-
- 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;
@@ -626,46 +240,6 @@
}
- // 鏁版嵁鍒楄〃 鏍峰紡
- .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 {
@@ -677,3 +251,4 @@
}
}
</style>
+
--
Gitblit v1.9.3