@@ -33,7 +28,7 @@
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useAuthStore } from "@/stores/modules/auth";
-import { useModeStore ,useAppSceneStore} from "@/stores/modules/mode"; // 引入模式 store
+import { useModeStore, useAppSceneStore } from "@/stores/modules/mode"; // 引入模式 store
import { ref } from "vue";
const authStore = useAuthStore();
const modeStore = useModeStore(); // 使用模式 store
@@ -43,24 +38,24 @@ const router = useRouter();
const modeList = [
{
name: "模拟式模块",
- code:"模拟式",
+ code: "模拟式",
subName: "未启用模拟式检测计划",
img: "/src/assets/images/dashboard/1.svg",
isActive: true,
},
{
name: "数字式模块",
- code:"数字式",
+ code: "数字式",
subName: "启用数字检测计划",
img: "/src/assets/images/dashboard/2.svg",
- isActive: true,
+ isActive: false,
},
{
name: "比对式模块",
- code:"比对式",
+ code: "比对式",
subName: "启用比对式检测计划",
img: "/src/assets/images/dashboard/3.svg",
- isActive: true,
+ isActive: false,
},
];
const handelOpen = async (item: any) => {
@@ -94,9 +89,11 @@ onMounted(() => {
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
+
// padding: 20px 2%;
.mode {
flex: none;
+ position: relative;
margin-top: 3px;
width: 32.5%;
height: 99.5% !important;
@@ -106,14 +103,19 @@ onMounted(() => {
align-items: center;
background: #fff;
border-radius: 6px;
- background: linear-gradient(
- 180deg,
- rgba(0, 153, 255, 1) 0%,
- rgba(0, 153, 255, 1) 0%,
- rgba(0, 102, 255, 1) 65%,
- rgba(0, 51, 255, 1) 100%,
- rgba(0, 51, 255, 1) 100%
- );
+ background: linear-gradient(180deg,
+ rgba(0, 153, 255, 1) 0%,
+ rgba(0, 153, 255, 1) 0%,
+ rgba(0, 102, 255, 1) 65%,
+ rgba(0, 51, 255, 1) 100%,
+ rgba(0, 51, 255, 1) 100%);
+
+
+ &:hover {
+
+ transform: scale(1.02);
+ }
+
// padding: 40px 0;
.mode_top {
width: 100%;
@@ -123,6 +125,7 @@ onMounted(() => {
align-items: center;
background: #008aff;
border-radius: 6px 6px 0 0;
+
.mode_name {
width: 100%;
height: 40px;
@@ -130,6 +133,7 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: flex-start;
+
p {
font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
font-weight: 700;
@@ -143,6 +147,7 @@ onMounted(() => {
padding-left: 10px;
// margin-top: 20px;
}
+
.mode_subName {
font-family: "微软雅黑", sans-serif;
font-weight: 400;
@@ -165,6 +170,7 @@ onMounted(() => {
padding-right: 5px;
}
}
+
.mode_img {
width: 100%;
height: auto;
@@ -173,28 +179,33 @@ onMounted(() => {
justify-content: center;
// padding: 30px 0 50px;
margin-top: 100px;
+
img:nth-child(1) {
width: 60%;
height: auto;
display: block;
}
+
img:nth-child(2) {
width: 70%;
height: auto;
display: block;
}
+
img:nth-child(3) {
width: 60%;
height: auto;
display: block;
}
}
+
.mode_test {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
margin-bottom: 20px;
+
.test_button {
width: 120px;
height: 100%;
@@ -208,6 +219,7 @@ onMounted(() => {
line-height: 40px;
cursor: pointer;
}
+
.test_button:hover {
background: rgba(0, 0, 0, 0.2);
}
@@ -215,29 +227,47 @@ onMounted(() => {
}
.mode:nth-child(3n + 3) {
- background: linear-gradient(
- 180deg,
- rgba(0, 153, 255, 1) 0%,
- rgba(0, 153, 255, 1) 0%,
- rgba(0, 102, 255, 1) 39%,
- rgba(102, 51, 204, 1) 100%,
- rgba(102, 51, 204, 1) 100%
- );
+ background: linear-gradient(180deg,
+ rgba(0, 153, 255, 1) 0%,
+ rgba(0, 153, 255, 1) 0%,
+ rgba(0, 102, 255, 1) 39%,
+ rgba(102, 51, 204, 1) 100%,
+ rgba(102, 51, 204, 1) 100%);
+
}
+
.mode_off {
+
.mode_name,
.mode_subName,
.test_button {
color: #fff !important;
}
+
.test_button:hover {
// background: rgba(0, 0, 0, 0.2) !important;
cursor: pointer;
}
}
}
+
:deep(.el-sub-menu__title) {
border-bottom: 0 !important;
outline: none !important;
}
+
+.modeBG {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #70707080;
+ ;
+ }
+
+
+}