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 | 437 +-----------------------------------------------------
1 files changed, 13 insertions(+), 424 deletions(-)
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index 0516650..53216c4 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -1,6 +1,6 @@
<template>
<a-layout class="layout" :class="[device]"
- :style="{backgroundImage:$route.meta.title==='棣栭〉'?`url(${require('../../assets/page/index/background.svg')}) !important`:`url(${require('../../assets/page/login/background.svg')})!important`}">
+ :style="{backgroundImage:$route.meta.title==='棣栭〉'?`url(${require('../../assets/page/index/background.svg')}) !important`:`url(${require('../../assets/page/background.svg')})!important`}">
<!--<a-drawer-->
<!--v-if="device === 'mobile'"-->
@@ -27,13 +27,14 @@
:menus="menus"
@menuSelect="myMenuSelect"
@updateMenuTitle="handleUpdateMenuTitle"
- :theme="navTheme"
:collapsed="true"
:collapsible="true"></side-menu>
<a-layout
:class="[layoutMode, `content-width-${contentWidth}`]">
+ <!--<global-header></global-header>-->
+
<!-- layout content -->
<a-layout-content :style="{ height: '100%' }">
<slot></slot>
@@ -156,10 +157,6 @@
<style lang="less">
body {
- // 鎵撳紑婊氬姩鏉″浐瀹氭樉绀�
- // 娉ㄩ噴鍘熷洜锛歩ssues/I5VK11
- //overflow-y: scroll;
-
&.colorWeak {
filter: invert(80%);
}
@@ -172,94 +169,25 @@
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;
+ &:hover {
+ background: rgba(255, 255, 255, 0.3);
}
}
@@ -267,253 +195,8 @@
.sidemenu {
background-color: transparent;
-
- .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 {
- 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 鑷畾涔�
@@ -539,60 +222,6 @@
}
}
- // 鑿滃崟鏍峰紡
- .sider {
- box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
- position: relative;
- z-index: 10;
-
- .logo {
- height: 64px;
- position: relative;
- line-height: 64px;
- text-align: center;
- -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: transparent;
- box-shadow: none;
-
- .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;
@@ -607,46 +236,6 @@
.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;
}
}
--
Gitblit v1.9.3