From 8790f99a94733c7c3836706c75a77f9bbb15c2ca Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 31 三月 2025 17:09:30 +0800
Subject: [PATCH] layout布局修改，标签卡，列表组件封装
---
src/layouts/index.vue | 81 +++++++++++++++++++++++++++++-----------
1 files changed, 59 insertions(+), 22 deletions(-)
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 2320b60..eb7f6b2 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -3,23 +3,24 @@
<!-- 判断是否在空白页打开 -->
<template v-if="!isOneself">
<div class="app-wrapper">
- <div class="left">
+ <div class="left" :style="{ width: isFold ? '100px' : '258px' }">
<!-- 系统标题 -->
<div class="system-title">
<div class="image">
<img src="../assets/logo.jpg" alt="" srcset="" />
</div>
- <div class="title">职评网管理系统</div>
+ <div v-if="!isFold" class="title">实验室流程</div>
</div>
<!-- 左侧菜单 -->
<div class="sidebar-container">
<ElMenu />
</div>
+ <div v-if="!isFold" class="sidebar-left-bg"></div>
+ <div v-if="!isFold" class="sidebar-bottom-bg"></div>
</div>
<!-- 右侧展示内容 -->
<div class="main-container">
<HeaderNav class="header-main" />
- <div v-if="nowRouteName" class="router_name">{{ nowRouteName }}</div>
<AppContent class="app-main" />
</div>
</div>
@@ -35,6 +36,7 @@
import ElMenu from './components/ElMenu/index.vue'
import HeaderNav from './components/HeaderNav.vue'
import AppContent from './components/AppContent.vue'
+import { mapState } from 'vuex'
export default {
data() {
return {
@@ -43,6 +45,9 @@
// 获取当前页面名称
nowRouteName: '',
}
+ },
+ computed: {
+ ...mapState(['isFold'])
},
components: {
ElMenu,
@@ -77,66 +82,98 @@
height: 100%;
width: 100%;
display: flex;
+ background-image: url('../assets/public/layoutsBG.png');
+ background-size: cover;
+ background-position: center;
.left {
- width: 200px;
display: flex;
flex-direction: column;
+ position: relative;
+ background-color: white;
+ transition: width 0.3s ease-in-out;
// 系统标题
.system-title {
display: flex;
- justify-content: space-around;
+ flex-direction: column;
align-items: center;
background-color: white;
- height: 50px;
- padding: 0px 10px;
+ height: 240px;
box-sizing: border-box;
.image {
- width: 40px;
- height: 40px;
+ margin-top: 40px;
+ width: 100px;
+ height: 100px;
img {
width: 100%;
height: 100%;
+ border-radius: 50%;
}
}
.title {
- font-weight: 700;
+ margin-top: 7px;
+ font-weight: bold;
+ line-height: 43px;
+ font-size: 25px;
}
}
// 左侧菜单
.sidebar-container {
+ z-index: 2;
+ padding: 0 19px;
overflow-y: auto;
flex: 1;
- background-color: white;
box-shadow: 0px 3px 13px 0px rgba(94, 131, 245, 0.1);
+
+ ::v-deep .el-menu {
+ border-right: unset !important;
+ }
+ }
+
+ .sidebar-left-bg {
+ z-index: 1;
+ position: absolute;
+ top: 338px;
+ left: 0;
+ width: 183px;
+ height: 316px;
+ background: #FFFCE5;
+ opacity: 0.56;
+ filter: blur(76.141290103688px);
+ }
+
+ .sidebar-bottom-bg {
+ z-index: 1;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 129px;
+ height: 289px;
+ background: #66FFFF;
+ opacity: 0.4;
+ filter: blur(76.141290103688px);
}
}
.main-container {
flex: 1;
+ display: flex;
+ flex-direction: column;
.header-main {
- background-color: white;
- height: 50px;
- }
-
- .router_name {
- padding-top: 8px;
- padding-left: 23px;
- font-size: 24px;
- font-weight: bold;
+ height: 70px;
}
.app-main {
- height: calc(100% - 120px);
+ flex: 1;
overflow: auto;
border-radius: 10px;
- margin: 16px 23px;
+ padding: 10px 21px 0 21px;
}
}
--
Gitblit v1.7.1