<template>
|
<div class="login-page">
|
<div class="top-nav">
|
<HeaderNav class="header-main" :logo="'true'" />
|
</div>
|
|
<div
|
class="middleground"
|
:class="{
|
column: windowWidth < 1440,
|
mobile: windowWidth < 800,
|
}"
|
>
|
<!-- 左侧模块区域 -->
|
<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>
|
|
<!-- 右侧日历和待办事项区域 -->
|
<div class="right-content">
|
<!-- 日历 -->
|
<div class="calendar-section">
|
<div class="title-canlender">日历</div>
|
<a-calendar @panelChange="onPanelChange" :locale="local" />
|
</div>
|
|
<!-- 待办事项 -->
|
<div class="todo-list-section">
|
<div class="title">待办事项</div>
|
<!-- 待办事项列表将放置在这里 -->
|
<div class="todo-list">
|
<div
|
class="todo-item"
|
v-for="(item, index) in list"
|
:key="index"
|
@click.stop="toDetail(item)"
|
>
|
<div class="todo-details">
|
<div class="notice-card">
|
<div class="todo-icon"></div>
|
<div class="red-notice" v-if="item.isRead == 0"></div>
|
</div>
|
|
<span class="todo-title" :title="item.content || ''">{{
|
item.content || ""
|
}}</span>
|
</div>
|
<div class="todo-meta">
|
<div class="me"></div>
|
<span class="todo-submitter"
|
>提交人: {{ item.commitName || "" }}</span
|
>
|
<div class="time"></div>
|
<span class="todo-submitter">{{ item.commitTime || "" }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { Calendar } from "ant-design-vue";
|
import { getList, read } from "./service";
|
import HeaderNav from "../../layouts/components/HeaderNav.vue";
|
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
|
// 引入 Element UI 的日历组件
|
// import { ElCalendar } from 'element-ui';
|
export default {
|
name: "Login",
|
components: {
|
HeaderNav,
|
ACalendar: Calendar,
|
// ElCalendar // 注册 ElCalendar 组件
|
},
|
|
data() {
|
return {
|
windowWidth: window.innerWidth,
|
local: zhCN,
|
loginForm: {
|
username: "",
|
password: "",
|
},
|
date: new Date(),
|
viewWidth: "",
|
scale: 1,
|
list: [],
|
// 审批人
|
moduleList2: [
|
{
|
text: "实验室运行模块",
|
icon: require("../../assets/login/img1.png"),
|
path: "/dataManagement/approvalPlan",
|
},
|
{
|
text: "专业报告库",
|
icon: require("../../assets/login/img2.png"),
|
path: "/reportLibrary/feasibilityStudy",
|
},
|
{
|
text: "化验师QA专题报告",
|
icon: require("../../assets/login/img7.png"),
|
path: "/chemistQa/projectTesting",
|
},
|
{
|
text: "评定模块",
|
icon: require("../../assets/login/img4.png"),
|
path: "/deliveryAssessment/projectTeamIntegral",
|
},
|
],
|
// 工艺工程师
|
moduleList3: [
|
{
|
text: "实验室运行模块",
|
icon: require("../../assets/login/img1.png"),
|
path: "/dataManagement/approvalPlan",
|
},
|
{
|
text: "评定模块",
|
icon: require("../../assets/login/img4.png"),
|
path: "/deliveryAssessment/projectTeamIntegral",
|
},
|
{
|
text: "专业报告库",
|
icon: require("../../assets/login/img2.png"),
|
path: "/reportLibrary/feasibilityStudy",
|
},
|
{
|
text: "化验师QA专题报告库",
|
icon: require("../../assets/login/img7.png"),
|
path: "/chemistQa/projectTesting",
|
},
|
],
|
// 化验师
|
moduleList4: [
|
{
|
text: "实验室运行模块",
|
icon: require("../../assets/login/img1.png"),
|
path: "/dataManagement/dispatching",
|
},
|
{
|
text: "评定模块",
|
icon: require("../../assets/login/img4.png"),
|
path: "/deliveryAssessment/projectTeamIntegral",
|
},
|
// {
|
// text: "专业报告库",
|
// icon: require("../../assets/login/img2.png"),
|
// path: "/reportLibrary/feasibilityStudy",
|
// },
|
{
|
text: "化验师QA专题报告",
|
icon: require("../../assets/login/img7.png"),
|
path: "/chemistQa/projectTesting",
|
},
|
],
|
// 实验员
|
moduleList5: [
|
{
|
text: "实验室运行模块",
|
icon: require("../../assets/login/img1.png"),
|
path: "/dataManagement/dispatching",
|
},
|
// {
|
// text: "菌种库",
|
// icon: require("../../assets/login/img8.png"),
|
// path: "/projectList/list",
|
// },
|
{
|
text: "评定模块",
|
icon: require("../../assets/login/img4.png"),
|
path: "/deliveryAssessment/projectTeamIntegral",
|
},
|
// {
|
// text: "专业报告库",
|
// icon: require("../../assets/login/img2.png"),
|
// path: "/reportLibrary/feasibilityStudy",
|
// },
|
// {
|
// text: "化验师提交",
|
// icon: require("../../assets/login/img3.png"),
|
// path: "/chemistQa/projectTesting",
|
// },
|
],
|
// 超级管理员
|
moduleList6: [
|
{
|
text: "实验室运行模块",
|
icon: require("../../assets/login/img1.png"),
|
path: "/dataManagement/approvalPlan",
|
},
|
{
|
text: "评定模块",
|
icon: require("../../assets/login/img4.png"),
|
path: "/deliveryAssessment/projectTeamIntegral",
|
},
|
{
|
text: "项目组管理",
|
icon: require("../../assets/login/img5.png"),
|
path: "/projectList/list",
|
},
|
{
|
text: "专业报告库",
|
icon: require("../../assets/login/img2.png"),
|
path: "/reportLibrary/feasibilityStudy",
|
},
|
{
|
text: "化验师提交",
|
icon: require("../../assets/login/img7.png"),
|
path: "/chemistQa/projectTesting",
|
},
|
{
|
text: "系统管理",
|
icon: require("../../assets/login/img6.png"),
|
path: "/system/user",
|
},
|
],
|
};
|
},
|
|
created() {
|
// 初始化时检查窗口大小
|
this.handleResize();
|
getList().then((res) => {
|
this.list = res;
|
});
|
},
|
mounted() {
|
// 监听窗口大小变化
|
window.addEventListener("resize", this.handleResize);
|
},
|
beforeDestroy() {
|
// 组件销毁前移除事件监听
|
window.removeEventListener("resize", this.handleResize);
|
},
|
methods: {
|
onPanelChange(e) {},
|
// 添加处理窗口大小变化的方法
|
handleResize() {
|
this.windowWidth = window.innerWidth;
|
},
|
handleModuleClick(item) {
|
if (item.path) {
|
this.$router.push({
|
path: item.path,
|
});
|
}
|
},
|
toDetail(item) {
|
read({ id: item.id }).then((res) => {
|
if (item.noticeType == 4) {
|
if (item.content.includes("可研")) {
|
this.$router.push({
|
path: "/reportLibrary/feasibilityStudy",
|
});
|
} else if (item.content.includes("可行")) {
|
this.$router.push({
|
path: "/reportLibrary/feasibilityReport",
|
});
|
} else if (item.content.includes("工艺开发")) {
|
this.$router.push({
|
path: "/reportLibrary/processDevelopment",
|
});
|
} else if (item.content.includes("验证与发布")) {
|
this.$router.push({
|
path: "/reportLibrary/verificationRelease",
|
});
|
} else if (item.content.includes("立项报告库")) {
|
this.$router.push({
|
path: "/reportLibrary/projectProposalLibrary",
|
});
|
}
|
return;
|
}
|
if (item.noticeType == 9) {
|
if (item.content.includes("项目检测项")) {
|
this.$router.push({
|
path: "/chemistQa/projectTesting",
|
});
|
} else if (item.content.includes("中试")) {
|
this.$router.push({
|
path: "/chemistQa/pilotAndProduction",
|
});
|
} else if (item.content.includes("辅料")) {
|
this.$router.push({
|
path: "/chemistQa/rawMaterials",
|
});
|
} else if (item.content.includes("产品报批")) {
|
this.$router.push({
|
path: "/chemistQa/productApproval",
|
});
|
}
|
return;
|
}
|
if (item.noticeType == 10) {
|
if (item.content.includes("项目检测项")) {
|
this.$router.push({
|
path: "/deliveryAssessment/testingAndEvaluation",
|
});
|
} else{
|
this.$router.push({
|
path: "/deliveryAssessment/assayTaskList",
|
});
|
}
|
return;
|
}
|
let urlList = [
|
"/dataManagement/approvalPlan",
|
"/dataManagement/suspendExperiment",
|
"/dataManagement/testResultReport",
|
"/reportLibrary/feasibilityStudy",
|
"/deliveryAssessment/reportEvaluation",
|
"/dataManagement/confirmation-sheet",
|
"/dataManagement/testResultReport",
|
"/dataManagement/scheme-management",
|
"/chemistQa/projectTesting",
|
"/deliveryAssessment/reportEvaluation",
|
"/dataManagement/dispatching",
|
"/dataManagement/confirmation-sheet",
|
"/sampleManage/manage",
|
"/dataManagement/dispatching",
|
];
|
let url = urlList[item.noticeType - 1];
|
console.log("url url", url, "item.noticeType-1", item.noticeType - 1);
|
this.$router.push({
|
path: url,
|
});
|
});
|
},
|
},
|
computed: {
|
currentModuleList() {
|
const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
|
const userType = userInfo.roleType;
|
|
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.roleType;
|
|
switch (userType) {
|
case 2: // 审批人
|
return "layout-4";
|
case 3: // 工艺工程师
|
return "layout-4";
|
case 4: // 化验师
|
return "layout-4";
|
case 5: // 实验员
|
return "layout-4";
|
case 6: // 超级管理员
|
return "layout-6";
|
default:
|
return "layout-6"; // 默认返回化验师的布局
|
}
|
},
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
.flex {
|
display: flex;
|
}
|
|
.j-between {
|
justify-content: space-between;
|
}
|
|
.mt-40 {
|
margin-top: 40px;
|
}
|
|
.login-page {
|
width: 100vw;
|
min-height: 100vh;
|
/* 确保页面至少和视口一样高，并随内容扩展 */
|
background: url("../../assets/login/midBg.png") no-repeat center center;
|
background-size: cover;
|
display: flex;
|
flex-direction: column;
|
// background-attachment: fixed;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
|
.top-nav {
|
display: flex;
|
// justify-content: space-between;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
transition: width 0.3s ease-in-out;
|
height: 70px;
|
|
.header-main {
|
height: 70px;
|
min-width: 200px;
|
}
|
}
|
|
.middleground {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
margin: 0px 20px 0px 108px;
|
gap: 40px;
|
box-sizing: border-box;
|
|
.left-modules {
|
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;
|
border-radius: 20px;
|
}
|
}
|
|
// 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 {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
overflow: hidden;
|
border-radius: 20px;
|
padding-bottom: 40px;
|
}
|
|
.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;
|
z-index: 2;
|
}
|
|
.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;
|
}
|
|
&::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;
|
}
|
}
|
|
.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;
|
}
|
|
.module-text {
|
position: relative;
|
font-size: 16px;
|
font-weight: bold;
|
color: #333;
|
margin-top: 35px;
|
text-align: center;
|
z-index: 3;
|
|
&::after {
|
content: "";
|
position: absolute;
|
left: 50%;
|
bottom: -15px;
|
transform: translateX(-50%);
|
|
width: 66px;
|
height: 3px;
|
background: #24595b;
|
border-radius: 1px;
|
}
|
}
|
|
// 根据布局调整图标和文字大小
|
.layout-5 & {
|
.module-icon {
|
width: 80px;
|
height: 80px;
|
}
|
|
.module-text {
|
font-size: 15px;
|
margin-top: 30px;
|
}
|
}
|
|
.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);
|
}
|
|
.icon-wrapper {
|
height: 120px;
|
|
&::before,
|
&::after {
|
height: 35px;
|
}
|
}
|
|
.module-icon {
|
width: 90px;
|
height: 90px;
|
}
|
|
.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;
|
}
|
}
|
|
.module-icon {
|
width: 80px;
|
height: 80px;
|
}
|
|
.module-text {
|
margin-top: 25px;
|
}
|
}
|
}
|
}
|
|
.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
|
@media screen and (max-width: 768px) {
|
.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;
|
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;
|
flex-direction: column;
|
|
.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;
|
// 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, 0.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-last-month-cell {
|
.ant-fullcalendar-value {
|
color: #ffffff !important;
|
}
|
}
|
|
&.ant-fullcalendar-next-month-btn-day {
|
.ant-fullcalendar-date {
|
}
|
|
.ant-fullcalendar-value {
|
color: #ffffff !important;
|
|
&:hover {
|
// background: #FFFFFF;
|
color: rgba(4, 156, 154, 0.1) !important;
|
}
|
}
|
}
|
}
|
}
|
|
.ant-fullcalendar-month-panel-selected-cell {
|
.ant-fullcalendar-month {
|
border-top-color: #009688 !important;
|
background: rgba(4, 156, 154, 0.2);
|
|
.ant-fullcalendar-value {
|
color: #ffffff;
|
}
|
|
:hover {
|
.ant-fullcalendar-month {
|
background: rgba(4, 156, 154, 0.2);
|
}
|
}
|
}
|
}
|
|
.ant-fullcalendar-month-panel-current-cell {
|
.ant-fullcalendar-month {
|
border-top-color: #009688 !important;
|
|
:hover {
|
.ant-fullcalendar-month {
|
background: rgba(4, 156, 154, 0.2);
|
}
|
}
|
}
|
}
|
|
.ant-fullcalendar-month-panel-cell {
|
.ant-fullcalendar-month:hover {
|
background: rgba(4, 156, 154, 0.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%;
|
max-height: 264px;
|
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;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 400px;
|
cursor: pointer;
|
}
|
|
.todo-meta {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
min-width: 260px;
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
