- 
+
-
+
- 操作人:{{ username }}
+ 操作人:{{ username || "未登录" }}
系统:{{ EventText }}
@@ -379,7 +378,7 @@ const handleTabClick = (event: any) => {
}
};
-// 页面加载时默认选中“常规”标签，并设置蓝线的位置
+// 页面加载时默认选中"常规"标签，并设置蓝线的位置
onMounted(() => {
const defaultTab = document.querySelector(`.nav-tab[data-tab="${selectedTab.value}"]`);
if (defaultTab) {
@@ -394,11 +393,13 @@ onMounted(() => {
#index-container {
margin: 0;
padding: 0;
- width: 1200px;
- height: 1920px;
+ width: 100vw;
+ height: 100vh;
background-color: #fff;
position: relative;
box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
.fade-slide-enter-active,
.fade-slide-leave-active {
@@ -418,65 +419,58 @@ onMounted(() => {
/* 向左滑出 */
}
- .el-main,
- .el-header {
- padding: 0;
- margin: 0;
- }
-
.nav-bar {
width: 100%;
- height: 83px;
- margin-bottom: 5px;
+ height: 60px;
+ margin-bottom: 2px;
display: flex;
justify-content: space-between;
align-items: center;
.logo {
- width: 150px;
- height: 76px;
+ width: 100px;
+ height: 75px;
+ padding-left: 10px;
}
.nav-tabs {
- width: 50%;
- /* 调整宽度，使其更紧凑 */
+ width: 60%;
+ font-size: 24px;
display: flex;
justify-content: space-around;
- /* 标签均匀分布 */
font-size: 40px;
.nav-tab {
cursor: pointer;
padding-bottom: 10px;
color: black;
- /* 初始状态为黑色 */
transition: color 0.3s;
position: relative;
}
.nav-tab.active {
color: #478ffe;
- /* 选中状态为蓝色 */
}
}
.test-control {
display: flex;
justify-content: space-evenly;
+ padding-right: 10px;
.start-test {
- width: 456px;
- height: 72px;
+ width: 200px;
+ height: 40px;
background-color: #73bc54;
- font-size: 40px;
+ font-size: 20px;
}
.pause-test,
.stop-test,
.continue-test {
- width: 228px;
- height: 72px;
- font-size: 40px;
+ width: 100px;
+ height: 40px;
+ font-size: 20px;
}
}
@@ -500,67 +494,46 @@ onMounted(() => {
}
.footer-info {
- width: 1200px;
- height: 52px;
+ width: 100%;
+ height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
- position: absolute;
+ position: relative;
bottom: 0;
+ margin-top: auto;
- .user-card {
- width: 240px;
- height: 38px;
+ .user-logo,
+ .time-logo {
+ width: 40px;
+ height: 40px;
+ }
+
+ .user-card,
+ .time-card {
display: flex;
align-items: center;
-
- .user-logo {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- }
-
- .user-name {
- width: 200px;
- font-size: 30px;
- font-weight: 900;
- }
+ font-size: 26px;
}
.equipment-status {
- width: 570px;
- height: 52px;
- background-color: #f6f6f6;
- align-items: center;
+ background-color: #f5f5f5;
+ width: 400px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ border-radius: 10px;
.status-text {
- width: 300px;
- height: 30px;
- margin: 0 auto;
- line-height: 52px;
- font-size: 32px;
- font-weight: 400;
+ font-size: 26px;
}
}
+ }
- .time-card {
- display: flex;
- align-items: center;
-
- .time-logo {
- width: 38px;
- height: 38px;
- margin-right: 5px;
- }
-
- .time-text {
- width: 213px;
- height: 29px;
- font-size: 32px;
- font-weight: 400;
- line-height: 25px;
- }
- }
+ .main-content {
+ flex: 1;
+ min-height: 0; // 添加：防止溢出
+ overflow: auto; // 添加：内容过多时可滚动
}
}
-
+
\ No newline at end of file
diff --git a/src/pages/Index/Regular.vue b/src/pages/Index/Regular.vue
index 951c411..397bc46 100644
--- a/src/pages/Index/Regular.vue
+++ b/src/pages/Index/Regular.vue
@@ -26,7 +26,7 @@ import TabBar from './components/Consumables/TabBar.vue'
}
.main-bottom {
- width: 1200px;
+ width: 100%;
.buffer-little-title {
display: flex;
diff --git a/src/pages/Index/Regular/Consumables.vue b/src/pages/Index/Regular/Consumables.vue
index fc3cb99..de5cdae 100644
--- a/src/pages/Index/Regular/Consumables.vue
+++ b/src/pages/Index/Regular/Consumables.vue
@@ -2,10 +2,14 @@
-
+
+
+
@@ -15,8 +19,8 @@
+