From b1cb0925184e4426b93306cb4c290586126383c7 Mon Sep 17 00:00:00 2001
From: 13404089107 <puwei@sinata.cn>
Date: 星期一, 02 六月 2025 17:44:10 +0800
Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory
---
laboratory/src/views/middleground/index.vue | 1203 +++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 833 insertions(+), 370 deletions(-)
diff --git a/laboratory/src/views/middleground/index.vue b/laboratory/src/views/middleground/index.vue
index 63911e1..49fb924 100644
--- a/laboratory/src/views/middleground/index.vue
+++ b/laboratory/src/views/middleground/index.vue
@@ -1,29 +1,26 @@
<template>
<div class="login-page">
<div class="top-nav">
- <HeaderNav class="header-main" :logo="true" />
+ <HeaderNav class="header-main" :logo="'true'" />
</div>
- <div class="middleground" :class="windowWidth<1240 ? 'column' : ''">
+ <div class="middleground" :class="{
+ 'column': windowWidth < 1240,
+ 'mobile': windowWidth < 800
+ }">
<!-- 左侧模块区域 -->
- <div class="left-modules">
- <!-- 这里将放置四个模块 -->
- <div class="module-item">
- <!-- 模块内容，例如图标和文字 -->
- <div class="module-icon"></div>
- <div class="module-text">实验室运行模块</div>
- </div>
- <div class="module-item">
- <div class="module-icon"></div>
- <div class="module-text">专业报告库</div>
- </div>
- <div class="module-item">
- <div class="module-icon"></div>
- <div class="module-text">化验师QA专题报告库</div>
- </div>
- <div class="module-item">
- <div class="module-icon"></div>
- <div class="module-text">评定模块</div>
+ <div class="left-modules" :class="[currentModuleLayout, {
+ 'mobile-layout': windowWidth < 800
+ }]">
+ <div class="module-item" v-for="(item, index) in filteredModuleList" :key="index"
+ @click="handleModuleClick(item)">
+ <div class="module-bg"></div>
+ <div class="module-content">
+ <div class="icon-wrapper">
+ <div class="module-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
+ </div>
+ <div class="module-text">{{ item.text }}</div>
+ </div>
</div>
</div>
@@ -31,8 +28,8 @@
<div class="right-content">
<!-- 日历 -->
<div class="calendar-section">
- <!-- <h3>日历</h3> -->
- <el-calendar v-model="date" />
+ <div class="title-canlender">日历</div>
+ <a-calendar @panelChange="onPanelChange" />
</div>
<!-- 待办事项 -->
@@ -69,7 +66,6 @@
<script>
import { loginReq } from './service'
import HeaderNav from '../../layouts/components/HeaderNav.vue'
-import { mapState } from 'vuex'
// 引入 Element UI 的日历组件
// import { ElCalendar } from 'element-ui';
export default {
@@ -89,12 +85,139 @@
},
date: new Date(),
viewWidth: '',
- scale: 1
+ scale: 1,
+ // 审批人
+ moduleList2: [
+ {
+ text: '实验室运行模块',
+ icon: require('../../assets/login/img1.png'),
+ path: '/dataManagement'
+ },
+ {
+ text: '专业报告库',
+ icon: require('../../assets/login/img2.png'),
+ path: '/reportLibrary'
+ },
+ {
+ text: '化验师提交',
+ icon: require('../../assets/login/img7.png'),
+ path: '/chemistQa'
+ },
+ {
+ text: '评定模块',
+ icon: require('../../assets/login/img4.png'),
+ path: '/deliveryAssessment'
+ }
+ ],
+ // 工艺工程师
+ moduleList3: [
+ {
+ text: '实验室运行模块',
+ icon: require('../../assets/login/img1.png'),
+ path: '/dataManagement'
+ },
+ {
+ text: '评定模块',
+ icon: require('../../assets/login/img4.png'),
+ path: '/deliveryAssessment'
+ },
+ {
+ text: '专业报告库',
+ icon: require('../../assets/login/img2.png'),
+ path: '/reportLibrary'
+ },
+ {
+ text: '化验师QA专题报告库',
+ icon: require('../../assets/login/img7.png'),
+ path: '/chemistQa'
+ }
+ ],
+ // 化验师
+ moduleList4: [
+ {
+ text: '实验室运行模块',
+ icon: require('../../assets/login/img1.png'),
+ path: '/dataManagement'
+ },
+ {
+ text: '评定模块',
+ icon: require('../../assets/login/img4.png'),
+ path: '/deliveryAssessment'
+ },
+ {
+ text: '专业报告库',
+ icon: require('../../assets/login/img2.png'),
+ path: '/reportLibrary'
+ },
+ {
+ text: '化验师提交',
+ icon: require('../../assets/login/img7.png'),
+ path: '/chemistQa'
+ }
+ ],
+ // 实验员
+ moduleList5: [
+ {
+ text: '实验室运行模块',
+ icon: require('../../assets/login/img1.png'),
+ path: '/dataManagement'
+ },
+ {
+ text: '菌种库',
+ icon: require('../../assets/login/img8.png'),
+ path: '/projectList'
+ },
+ {
+ text: '专业报告库',
+ icon: require('../../assets/login/img2.png'),
+ path: '/reportLibrary'
+ },
+ {
+ text: '化验师提交',
+ icon: require('../../assets/login/img3.png'),
+ path: '/chemistQa'
+ },
+ {
+ text: '评定模块',
+ icon: require('../../assets/login/img4.png'),
+ path: '/deliveryAssessment'
+ },
+
+ ],
+ // 超级管理员
+ moduleList6: [
+ {
+ text: '实验室运行模块',
+ icon: require('../../assets/login/img1.png'),
+ path: '/dataManagement'
+ },
+ {
+ text: '评定模块',
+ icon: require('../../assets/login/img4.png'),
+ path: '/deliveryAssessment'
+ },
+ {
+ text: '项目组管理',
+ icon: require('../../assets/login/img5.png'),
+ path: '/projectList'
+ },
+ {
+ text: '专业报告库',
+ icon: require('../../assets/login/img2.png'),
+ path: '/reportLibrary'
+ },
+ {
+ text: '化验师提交',
+ icon: require('../../assets/login/img7.png'),
+ path: '/chemistQa'
+ },
+ {
+ text: '系统管理',
+ icon: require('../../assets/login/img6.png'),
+ path: '/system'
+ }
+ ]
}
- },
- // computed: {},
- computed: {
- ...mapState(['tagList', 'isFold'])
},
created() {
@@ -102,43 +225,71 @@
this.handleResize();
},
mounted() {
- // 监听窗口大小变化
- window.addEventListener("resize", this.handleResize);
- },
- methods: {
+ // 监听窗口大小变化
+ window.addEventListener("resize", this.handleResize);
- handleResize() {
- // if (window.innerWidth < 1000) {
- // this.$store.commit("SET_ISFOLD", true);
- // } else if (window.innerWidth >= 1000 && this.isFold) {
- // this.$store.commit("SET_ISFOLD", false);
- // }
- this.windowWidth = window.innerWidth;
- },
- // ...mapActions(['setIsFold']),
- handleKeyDown(event) {
- if (event.key === 'Enter') {
- this.login()
- }
+ },
+ beforeDestroy() {
+ // 组件销毁前移除事件监听
+ window.removeEventListener("resize", this.handleResize);
+ },
+ methods: {
+ onPanelChange(e) {
+ console.log('eeeeeee', e)
},
// 添加处理窗口大小变化的方法
handleResize() {
- this.viewWidth = window.innerWidth
+ this.windowWidth = window.innerWidth;
},
- login() {
- if (this.loginForm.username == '') {
- this.$message.warning('请输入账号')
- return
- }
- if (this.loginForm.password == '') {
- this.$message.warning('请输入密码')
- return
- }
- loginReq(this.loginForm).then(res => {
- sessionStorage.setItem('token', res.token)
- sessionStorage.setItem('userInfo', JSON.stringify(res.userInfo.user))
- this.$router.push('/system')
+ handleModuleClick(item) {
+ if(item.path){
+ this.$router.push({
+ path: item.path,
})
+ }
+ },
+ },
+ computed: {
+ currentModuleList() {
+ const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
+ const userType = userInfo.userType;
+
+ switch (userType) {
+ case 2: // 审批人
+ return this.moduleList2;
+ case 3: // 工艺工程师
+ return this.moduleList3;
+ case 4: // 化验师
+ return this.moduleList4;
+ case 5: // 实验员
+ return this.moduleList5;
+ case 6: // 超级管理员
+ return this.moduleList6;
+ default:
+ return this.moduleList6; // 默认返回化验师的模块列表
+ }
+ },
+ filteredModuleList() {
+ return this.currentModuleList.filter(item => item);
+ },
+ currentModuleLayout() {
+ const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
+ const userType = userInfo.userType;
+
+ switch (userType) {
+ case 2: // 审批人
+ return 'layout-4';
+ case 3: // 工艺工程师
+ return 'layout-4';
+ case 4: // 化验师
+ return 'layout-4';
+ case 5: // 实验员
+ return 'layout-5';
+ case 6: // 超级管理员
+ return 'layout-6';
+ default:
+ return 'layout-6'; // 默认返回化验师的布局
+ }
}
}
}
@@ -186,329 +337,268 @@
.middleground {
flex: 1;
- height: calc(100% - 70px);
display: flex;
- // flex-wrap: wrap;
- justify-content: flex-start;
- /* 左侧内容靠左对齐 */
- padding: 20px 20px 20px 108px;
- /* 调整左右内边距 */
+ justify-content: center;
+ margin: 0px 20px 0px 108px;
gap: 40px;
- /* 添加左右间距 */
+ box-sizing: border-box;
.left-modules {
- align-items: center;
-
- padding: 40px 0;
- display: flex;
- flex-wrap: wrap;
- box-sizing: content-box;
- justify-content: center;
- /* 模块之间水平分散对齐 */
- /* 水平居中 */
- align-items: flex-start;
- /* 模块垂直靠上对齐 */
- /* 垂直居中 */
- flex-grow: 1;
- /* 左侧宽度自适应 */
- align-content: flex-start;
- /* 多行模块垂直靠上对齐 */
- gap: 20px;
- /* 添加模块之间的垂直间距 */
+ display: grid;
+ gap: 40px;
padding-right: 20px;
- /* 给左侧模块区域右侧添加一些间距，避免紧贴右侧内容 */
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ align-self: center;
+ justify-self: center;
+
+ &.mobile-layout {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px;
+ padding-right: 0;
+ max-width: 100%;
+
+ .module-item {
+ width: 100%;
+ height: 307px;
+ }
+ }
+
+ // 4个模块布局（2x2）
+ &.layout-4 {
+ grid-template-columns: repeat(2, 260px);
+ grid-template-rows: repeat(2, 260px);
+ justify-content: center;
+ }
+
+ // 5个模块布局（2+3）
+ &.layout-5 {
+ grid-template-columns: repeat(3, 240px);
+ grid-template-rows: repeat(2, 240px);
+ justify-content: center;
+ position: relative;
+
+ // 上面两个模块整体居中
+ .module-item:nth-child(1),
+ .module-item:nth-child(2) {
+ transform: translateX(120px);
+ }
+
+ // 下面三个模块
+ .module-item:nth-child(3) {
+ grid-column: 1;
+ }
+
+ .module-item:nth-child(4) {
+ grid-column: 2;
+ }
+
+ .module-item:nth-child(5) {
+ grid-column: 3;
+ }
+
+ &.mobile-layout {
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: auto;
+
+ .module-item:nth-child(1),
+ .module-item:nth-child(2) {
+ transform: none;
+ }
+ }
+ }
+
+ // 6个模块布局（3x2）
+ &.layout-6 {
+ grid-template-columns: repeat(3, 220px);
+ grid-template-rows: repeat(2, 220px);
+ justify-content: center;
+
+ &.mobile-layout {
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: auto;
+ }
+ }
}
.module-item {
- // width: 37%;
- // height: 30%;
- width: 307px;
- height: 307px;
- background-color: red;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ overflow: hidden;
+ }
+
+ .module-bg {
+ position: absolute;
+ top: 75px;
+ left: 0;
+ width: 100%;
+ height: calc(100% - 75px);
+ background: url('../../assets/login/cardBg.png') no-repeat center;
+ background-size: cover;
+ transition: transform 0.3s ease;
+ z-index: 1;
+ }
+
+ .module-content {
+ position: relative;
+ height: 100%;
display: flex;
flex-direction: column;
align-items: center;
- justify-content: space-between;
- background: url('../../assets/login/cardBg.png');
- /* 设置模块背景图 */
- background-size: cover;
- /* 背景图覆盖整个元素 */
- background-position: center top;
- /* 调整背景图位置：顶部居中 */
+ z-index: 2;
+ }
- .module-icon {
- width: 80px;
- height: 80px;
- // background-color: #eee; /* Placeholder for icon */
- z-index: 1;
- /* 确保图标在背景之上 */
- background-size: contain;
- /* 图标背景图包含在元素内 */
- background-repeat: no-repeat;
- /* 不重复 */
- background-position: 100% 100%;
- /* 图标背景图居中 */
+ .icon-wrapper {
+ width: 100%;
+ height: 150px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: url('../../assets/login/iconBg.png') no-repeat center;
+ background-size: 100% 100%;
+ z-index: 2;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 40px;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
+ pointer-events: none;
+ z-index: 2;
}
- /* 为每个模块图标设置特定的背景图片 */
- &:nth-child(1) .module-icon {
- background-image: url('../../assets/login/img1.png');
- }
-
- &:nth-child(2) .module-icon {
- background-image: url('../../assets/login/img2.png');
- }
-
- &:nth-child(3) .module-icon {
- background-image: url('../../assets/login/img3.png');
- }
-
- &:nth-child(4) .module-icon {
- background-image: url('../../assets/login/img4.png');
- }
-
- .module-text {
- font-size: 16px;
- font-weight: bold;
- position: relative;
- /* 为下划线定位 */
- z-index: 1;
- /* 确保文字在背景之上 */
- margin-bottom: 50px;
-
- &::after {
- content: '';
- position: absolute;
- left: 50%;
- /* 从文字中间开始 */
- bottom: -5px;
- /* 调整下划线位置 */
- transform: translateX(-50%);
- /* 使下划线居中 */
- width: 50%;
- /* 调整下划线宽度 */
- height: 2px;
- /* 调整下划线粗细 */
- background-color: #007bff;
- /* 示例下划线颜色 */
- }
- }
-
- &:nth-of-type(2n+1) {
- margin-right: 0;
- }
-
- &:nth-child(odd) {
- margin-right: 0px;
+ &::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 40px;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
+ pointer-events: none;
+ z-index: 2;
}
}
- .right-content {
- width: 870px;
- /* 固定右侧宽度 */
- flex-shrink: 0;
- /* 防止右侧被压缩 */
- padding: 20px;
- border-radius: 8px;
- // background-color: #fff;
- // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ .module-icon {
+ width: 100px;
+ height: 100px;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ transition: all 0.3s ease;
+ position: relative;
+ z-index: 3;
+ }
- display: flex;
- /* 使日历和待办事项垂直排列 */
- flex-direction: column;
+ .module-text {
+ position: relative;
+ font-size: 16px;
+ font-weight: bold;
+ color: #333;
+ margin-top: 35px;
+ text-align: center;
+ z-index: 3;
- .calendar-section {
- margin-bottom: 20px;
- box-sizing: border-box;
- /* 日历下方间距 */
- height: 595px;
- padding: 20px;
- border-radius: 14px;
- background: url(../../assets/login/rili.png) no-repeat center;
+ &::after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ bottom: -5px;
+ transform: translateX(-50%);
+ width: 50%;
+ height: 2px;
+ background-color: #007bff;
+ }
+ }
- h3 {
- margin-top: 0;
- margin-bottom: 10px;
- font-size: 18px;
- color: #333;
- }
-
- .calendar {
- height: 100% !important;
- width: 100% !important;
- box-sizing: border-box;
- }
-
- /* 尝试调整 Element UI 日历的样式 */
- ::v-deep .el-calendar {
- height: 100%;
- width: 100%;
- background: none !important;
- box-sizing: border-box;
-
- .el-calendar__header {
- padding: 12px 0;
- box-sizing: border-box;
- }
-
- .el-calendar__body {
- padding: 0;
- }
-
- .el-calendar-table {
- thead th {
- padding: 5px 0;
- box-sizing: border-box;
- font-weight: normal;
- }
-
- tbody td {
- border: none;
-
- .el-calendar-day {
- /* 调整日期单元格高度 */
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 4px;
- box-sizing: border-box;
- /* 圆角 */
- margin: 8px;
- /* 单元格间距 */
- cursor: pointer;
- // max-width: 90px;
-
- max-height: 61px;
- background: #FFFFFF;
- border-radius: 8px;
- border: 1px solid #EDEDED;
-
- &:hover {
- background-color: #f0f0f0;
- }
- }
-
- /* 当前日期样式 */
- &.is-selected .el-calendar-day {
- background-color: #007bff;
- /* 示例选中颜色 */
- color: #fff;
- }
- }
- }
- }
+ // 根据布局调整图标和文字大小
+ .layout-5 & {
+ .module-icon {
+ width: 80px;
+ height: 80px;
}
- .todo-list-section {
- flex: 1;
- border-radius: 14px;
- background-color: rgba(255, 255, 255, 1);
- // overflow: auto;
- padding: 24px 34px;
- display: flex;
- flex-direction: column;
+ .module-text {
+ font-size: 15px;
+ margin-top: 30px;
+ }
+ }
- .title {
- height: 22px;
- font-family: SourceHanSansCN, SourceHanSansCN;
- font-weight: bold;
- font-size: 18px;
- color: #222222;
- line-height: 22px;
- margin-bottom: 20px;
+ .layout-6 & {
+ .module-icon {
+ width: 70px;
+ height: 70px;
+ }
+
+ .module-text {
+ font-size: 14px;
+ margin-top: 25px;
+ }
+ }
+
+ // 响应式调整
+ @media screen and (max-width: 1240px) {
+ .module-item {
+ .module-bg {
+ top: 60px;
+ height: calc(100% - 60px);
}
- .todo-list {
- flex: 1;
- height: 100%;
- overflow: auto;
+ .icon-wrapper {
+ height: 120px;
+
+ &::before,
+ &::after {
+ height: 35px;
+ }
}
- /* 待办事项列表样式 */
- .todo-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20PX;
+ .module-icon {
+ width: 90px;
+ height: 90px;
+ }
- /* 分隔线 */
- &:first-child {
- margin-top: 3px;
+ .module-text {
+ margin-top: 30px;
+ }
+ }
+ }
+
+ @media screen and (max-width: 900px) {
+ .module-item {
+ .module-bg {
+ top: 50px;
+ height: calc(100% - 50px);
+ }
+
+ .icon-wrapper {
+ height: 100px;
+
+ &::before,
+ &::after {
+ height: 30px;
}
+ }
- .todo-details {
- display: flex;
- align-content: center;
- }
+ .module-icon {
+ width: 80px;
+ height: 80px;
+ }
- .notice-card {
- position: relative;
- margin-right: 12px;
-
- }
-
- .todo-icon {
- position: relative;
- width: 24px;
- height: 24px;
- flex-shrink: 0;
- background: url('../../assets//login/notice.png') no-repeat center;
- background-position: center;
- background-size: 100% 100%;
-
- }
-
- .red-notice {
- position: absolute;
- top: -3px;
- right: -3px;
- width: 6px;
- height: 6px;
- border-radius: 50%;
- background: rgba(235, 65, 65, 1);
- }
-
- .todo-title {
- font-family: SourceHanSansCN, SourceHanSansCN;
- font-weight: 500;
- font-size: 14px;
- color: #303133;
- line-height: 24px;
- }
-
- .todo-meta {
- display: flex;
- align-items: center;
- }
-
- .time {
- width: 14px;
- height: 14px;
- margin-right: 6px;
- margin-left: 20px;
- flex-shrink: 0;
- background: url('../../assets//login/time.png') no-repeat center;
- background-position: center;
- background-size: 100% 100%;
- }
-
- .me {
- width: 14px;
- height: 14px;
- margin-right: 6px;
- flex-shrink: 0;
- background: url('../../assets//login/mi.png') no-repeat center;
- background-position: center;
- background-size: 100% 100%;
- }
-
- .todo-submitter {
- font-family: SourceHanSansCN, SourceHanSansCN;
- font-weight: 400;
- font-size: 12px;
- color: #909399;
- // line-height: 18px;
- }
+ .module-text {
+ margin-top: 25px;
}
}
}
@@ -516,14 +606,21 @@
.column {
flex-direction: column;
- /* 改为上下布局 */
padding: 20px;
- /* 调整内边距 */
gap: 20px;
- /* 调整上下间距 */
height: auto;
- /* 高度自适应内容 */
padding: 20px 20px 20px 18px !important;
+ align-items: center;
+ margin: 0 !important;
+
+ .left-modules {
+ // width: 100%;
+ // display: flex;
+ // flex-wrap: wrap;
+ // justify-content: center;
+ // gap: 20px;
+ // margin-bottom: 20px;
+ }
}
// Tablet layout
@@ -531,44 +628,410 @@
.login-page {
.middleground {
flex-direction: column;
- /* 改为上下布局 */
padding: 20px;
- /* 调整内边距 */
gap: 20px;
- /* 调整上下间距 */
height: auto;
- /* 高度自适应内容 */
padding: 20px 20px 20px 18px !important;
.left-modules {
width: 100%;
- /* 左侧宽度占满 */
justify-content: center;
- /* 在上下布局中水平居中模块 */
padding: 0;
- /* 移除 padding */
gap: 20px;
- /* 上下布局时模块之间的间距 */
padding-right: 0;
- /* 移除右侧间距 */
}
.module-item {
width: 307px;
- /* 模块宽度固定 */
height: 307px;
- /* 模块高度固定 */
margin-right: 0 !important;
- /* 移除桌面布局的右侧间距 */
}
.right-content {
width: 100%;
- /* 右侧宽度占满 */
height: auto;
- /* 高度自适应 */
padding: 15px;
- /* 调整内边距 */
+
+ .calendar-section {
+ height: auto;
+ min-height: 400px;
+ padding: 15px;
+
+ ::v-deep .ant-fullcalendar-fullscreen {
+ .ant-fullcalendar-table {
+ tbody td {
+ padding: 4px;
+
+ .ant-fullcalendar-date {
+ height: 40px;
+ }
+ }
+ }
+ }
+ }
+
+ .todo-list-section {
+ padding: 15px;
+ }
+ }
+ }
+ }
+ }
+
+ .mobile {
+ margin: 0;
+ padding: 10px;
+ margin: 0 !important;
+
+ .left-modules {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 15px;
+ margin-bottom: 15px;
+ padding: 0;
+
+ .module-item {
+ width: calc(50% - 15px);
+ max-width: 307px;
+ height: 307px;
+ margin: 0;
+ box-sizing: border-box;
+ }
+ }
+
+ .right-content {
+ width: 100%;
+ padding: 10px;
+ box-sizing: border-box;
+
+ .calendar-section {
+ height: auto;
+ min-height: 400px;
+ padding: 10px;
+ margin-bottom: 15px;
+
+ ::v-deep .ant-fullcalendar-fullscreen {
+ .ant-fullcalendar-table {
+ tbody td {
+ padding: 4px;
+
+ .ant-fullcalendar-date {
+ height: 40px;
+ }
+ }
+ }
+ }
+ }
+
+ .todo-list-section {
+ padding: 10px;
+ }
+ }
+ }
+
+ .right-content {
+ width: 870px;
+ /* 固定右侧宽度 */
+ flex-shrink: 0;
+ /* 防止右侧被压缩 */
+ padding: 20px;
+ border-radius: 8px;
+ // background-color: #fff;
+ // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+ display: flex;
+ /* 使日历和待办事项垂直排列 */
+ flex-direction: column;
+
+ .calendar-section {
+ margin-bottom: 20px;
+ box-sizing: border-box;
+ height: 595px;
+ padding: 20px;
+ border-radius: 14px;
+ background: url(../../assets/login/rili.png) no-repeat center;
+
+ .title-canlender {
+ height: 22px;
+ font-family: SourceHanSansCN, SourceHanSansCN;
+ font-weight: bold;
+ font-size: 18px;
+ color: #222222;
+ line-height: 22px;
+ margin-bottom: 20px;
+ }
+
+ /* 调整 ant-design-vue 日历的样式 */
+ ::v-deep .ant-fullcalendar-fullscreen {
+ background: none !important;
+ border: none !important;
+ padding: 0 !important;
+
+ .ant-fullcalendar-header {
+ .ant-radio-group {
+ .ant-radio-button-wrapper {
+ background: #FFFFFF;
+ margin: 0 4px;
+ color: #666;
+
+ &:hover {
+ color: #009688;
+ }
+
+ &.ant-radio-button-wrapper-checked {
+ background-color: #009688 !important;
+ border-color: #009688 !important;
+ color: #FFFFFF !important;
+ box-shadow: none !important;
+ }
+ }
+ }
+
+ .ant-select {
+ .ant-select-selection {
+ background: #FFFFFF;
+ border: 1px solid #EDEDED;
+ border-radius: 8px;
+ color: #666;
+
+ &:hover {
+ border-color: #009688;
+ }
+
+ .ant-select-selection__rendered {
+ line-height: 32px;
+ }
+ }
+
+ &.ant-select-open .ant-select-selection {
+ border-color: #009688;
+ box-shadow: none;
+ }
+ }
+
+ .ant-select-dropdown {
+ .ant-select-dropdown-menu {
+ background: #FFFFFF;
+ border: 1px solid #EDEDED;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+ .ant-select-dropdown-menu-item {
+ color: #666;
+
+ &:hover {
+ background-color: #f0f0f0;
+ }
+
+ &.ant-select-dropdown-menu-item-selected {
+ background-color: #009688 !important;
+ color: #FFFFFF !important;
+ }
+ }
+ }
+ }
+ }
+
+ .ant-fullcalendar-table {
+ thead th {
+ padding: 5px 0;
+ font-weight: normal;
+ color: #666;
+ text-align: center;
+
+ .ant-fullcalendar-column-header {
+ text-align: center;
+ }
+ }
+
+ tbody td {
+ border: none;
+ padding: 8px;
+
+ .ant-fullcalendar-date {
+ margin: 0;
+ padding: 0;
+ height: 55px;
+ background: #FFFFFF;
+ border-radius: 8px;
+ border: 1px solid #EDEDED;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ background-color: rgba(4, 156, 154, .1);
+ }
+
+ .ant-fullcalendar-value {
+ color: #666;
+ }
+ }
+
+ &.ant-fullcalendar-selected-day .ant-fullcalendar-date {
+ // background-color: #009688 !important;
+ border-color: #009688 !important;
+ color: rgba(4, 156, 154, 1);
+
+ .ant-fullcalendar-value {
+ color: rgba(4, 156, 154, 1) !important;
+ }
+ }
+
+ &.ant-fullcalendar-today .ant-fullcalendar-date {
+ // border-color: #009688;
+ }
+ }
+ }
+
+ .ant-fullcalendar-month-panel-selected-cell {
+ .ant-fullcalendar-month {
+ border-top-color: #009688 !important;
+ background: rgba(4, 156, 154, .2);
+
+ .ant-fullcalendar-value {
+ color: #FFFFFF;
+ }
+
+ :hover {
+ .ant-fullcalendar-month {
+ background: rgba(4, 156, 154, .2);
+ }
+ }
+ }
+ }
+
+ .ant-fullcalendar-month-panel-current-cell {
+ .ant-fullcalendar-month {
+ border-top-color: #009688 !important;
+
+ :hover {
+ .ant-fullcalendar-month {
+ background: rgba(4, 156, 154, .2);
+ }
+ }
+ }
+ }
+
+ .ant-fullcalendar-month-panel-cell {
+ .ant-fullcalendar-month:hover {
+ background: rgba(4, 156, 154, .2);
+ }
+ }
+ }
+ }
+
+ .todo-list-section {
+ flex: 1;
+ border-radius: 14px;
+ background-color: rgba(255, 255, 255, 1);
+ // overflow: auto;
+ padding: 24px 34px;
+ display: flex;
+ flex-direction: column;
+
+ .title {
+ height: 22px;
+ font-family: SourceHanSansCN, SourceHanSansCN;
+ font-weight: bold;
+ font-size: 18px;
+ color: #222222;
+ line-height: 22px;
+ margin-bottom: 20px;
+ }
+
+ .todo-list {
+ flex: 1;
+ height: 100%;
+ overflow: auto;
+ }
+
+ /* 待办事项列表样式 */
+ .todo-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20PX;
+
+ /* 分隔线 */
+ &:first-child {
+ margin-top: 3px;
+ }
+
+ .todo-details {
+ display: flex;
+ align-content: center;
+ }
+
+ .notice-card {
+ position: relative;
+ margin-right: 12px;
+
+ }
+
+ .todo-icon {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ flex-shrink: 0;
+ background: url('../../assets//login/notice.png') no-repeat center;
+ background-position: center;
+ background-size: 100% 100%;
+
+ }
+
+ .red-notice {
+ position: absolute;
+ top: -3px;
+ right: -3px;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: rgba(235, 65, 65, 1);
+ }
+
+ .todo-title {
+ font-family: SourceHanSansCN, SourceHanSansCN;
+ font-weight: 500;
+ font-size: 14px;
+ color: #303133;
+ line-height: 24px;
+ }
+
+ .todo-meta {
+ display: flex;
+ align-items: center;
+ }
+
+ .time {
+ width: 14px;
+ height: 14px;
+ margin-right: 6px;
+ margin-left: 20px;
+ flex-shrink: 0;
+ background: url('../../assets//login/time.png') no-repeat center;
+ background-position: center;
+ background-size: 100% 100%;
+ }
+
+ .me {
+ width: 14px;
+ height: 14px;
+ margin-right: 6px;
+ flex-shrink: 0;
+ background: url('../../assets//login/mi.png') no-repeat center;
+ background-position: center;
+ background-size: 100% 100%;
+ }
+
+ .todo-submitter {
+ font-family: SourceHanSansCN, SourceHanSansCN;
+ font-weight: 400;
+ font-size: 12px;
+ color: #909399;
+ // line-height: 18px;
}
}
}
--
Gitblit v1.7.1