From 0d1030dfa69ab4194379ef2f1b6aff1ff08a2958 Mon Sep 17 00:00:00 2001 From: gzt Date: Thu, 12 Dec 2024 16:16:38 +0800 Subject: [PATCH] =?UTF-8?q?style:=E5=AF=B9=E9=A6=96=E9=A1=B5=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E6=A0=B7=E5=BC=8F=E8=BF=9B=E8=A1=8C=E8=B0=83=E6=95=B4?= =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E5=85=B6=E9=80=82=E9=85=8D=E6=96=B0=E7=9A=84?= =?UTF-8?q?=E5=88=86=E8=BE=A8=E7=8E=87800*1280?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index/Index.vue | 125 ++++++++------------- src/pages/Index/Regular.vue | 2 +- src/pages/Index/Regular/Consumables.vue | 43 +++++-- src/pages/Index/Regular/Emergency.vue | 6 +- src/pages/Index/components/Consumables/InfoBar.vue | 4 +- .../Index/components/Consumables/MainComponent.vue | 19 +--- .../components/Consumables/MoveLiquidArea.vue | 86 +++++++------- src/pages/Index/components/Consumables/Plate.vue | 2 +- .../Index/components/Consumables/SpttingPlates.vue | 45 +++----- src/pages/Index/components/Consumables/TabBar.vue | 8 +- src/pages/Index/components/Consumables/Time.vue | 2 +- src/pages/Login/Login.vue | 22 ++-- src/router/router.ts | 64 +++++------ src/style.css | 6 +- 14 files changed, 197 insertions(+), 237 deletions(-) diff --git a/src/pages/Index/Index.vue b/src/pages/Index/Index.vue index 36a7cb4..18e6c73 100644 --- a/src/pages/Index/Index.vue +++ b/src/pages/Index/Index.vue @@ -2,7 +2,7 @@
@@ -31,20 +31,19 @@
- - +
- +
-
操作人:{{ 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 @@
+ :currentCount="item.num" :totalBalls="25" :activatedBalls="item.num" :columns="5" gridWidth="240px" + gridHeight="235px" :activeColor="item.color" />
@@ -238,31 +242,46 @@ const updateTipNum = ({ index, tipNum }: { index: number; tipNum: number }) => { diff --git a/src/pages/Index/components/Consumables/MoveLiquidArea.vue b/src/pages/Index/components/Consumables/MoveLiquidArea.vue index 697da77..90f2f32 100644 --- a/src/pages/Index/components/Consumables/MoveLiquidArea.vue +++ b/src/pages/Index/components/Consumables/MoveLiquidArea.vue @@ -19,16 +19,16 @@
- + - + - +
@@ -86,7 +86,7 @@
缓冲液大
-
@@ -244,7 +244,6 @@ watch( // 发出更新事件，通知父组件新的 remainingCount 值 const handleDeactivate = (remainingCount: number) => { emit('updateTipNum', { index: activeTab.value, tipNum: remainingCount }) - console.log('剩余小球数量:', remainingCount) } const syncActivatedCount = (count: number) => { @@ -269,69 +268,65 @@ const changePlate = (index: number) => { margin: 0; padding: 0; position: relative; - width: 765px; display: flex; justify-content: space-between; + width: 100%; .title { - font-size: 32px; + font-size: 20px; /* 统一设置标题大小 */ font-weight: bold; } .move-liquid-area { - flex: 0.7; + width: 70%; display: flex; flex-direction: column; - justify-content: space-between; - align-items: center; + margin-left: 10px; + gap: 9px; .load-consumables { - padding: 0; width: 98%; - height: 125px; - font-size: 50px; + padding: 0; + height: 100px; + font-size: 40px; border-radius: 10px; margin-bottom: 15px; } .move-liquid-title { - width: 98%; - height: 33px; + width: 100%; display: flex; - font-size: 32px; + font-size: 26px; font-weight: 400; align-items: center; margin-left: 10px; .line { width: 4px; - height: 30px; + height: 20px; background-color: #00d800; margin-right: 5px; } } .move-liquid-controller { - width: 508px; display: flex; flex-wrap: nowrap; - justify-content: space-between; .controller { - flex: 1 1 30%; - width: 153px; - height: 153px; + width: 140px; + height: 130px; color: #54a4e8; border: 3px solid #54a4e8; border-radius: 10px; display: grid; place-content: center; - margin: 5px; cursor: pointer; + transition: all 0.3s; .controller-title { - font-size: 32px; + font-size: 20px; font-weight: 400; } @@ -353,25 +348,21 @@ const changePlate = (index: number) => { /* 选中时文字颜色 */ } } - - .move-liquid-graph { - margin-left: 10px; - } } .right-area { - flex: 0.3; + width: 30%; display: flex; flex-direction: column; justify-content: start; height: 49.1875rem; - margin: 0 10px; + gap: 20px; .emergency-area, .id-area, .waste-area, .buffer-area { - width: 100%; + width: 90%; margin: 11px 0; } @@ -379,8 +370,8 @@ const changePlate = (index: number) => { .id-title, .waste-title, .buffer-title { - font-size: 32px; - font-weight: 400; + font-size: 26px; + font-weight: 500; } .controller-button, @@ -388,12 +379,12 @@ const changePlate = (index: number) => { .waste-button, .buffer-controller { width: 100%; - height: 100px; + height: 80px; } .line { width: 4px; - height: 32px; + height: 20px; background-color: #00d800; margin: 0 5px; } @@ -412,7 +403,6 @@ const changePlate = (index: number) => { align-items: center; background-color: #f6f6f6; margin: 0 5px; - font-size: 32px; font-weight: 400; } @@ -423,19 +413,19 @@ const changePlate = (index: number) => { .controller { width: 100%; - height: 80px; + height: 60px; display: flex; justify-content: space-around; background-color: #fff; align-items: center; .emergency-ball { - width: 50px; - height: 50px; + width: 40px; + height: 40px; border-radius: 50%; background-color: #d9d9d9; align-items: center; - line-height: 50px; + line-height: 40px; font-weight: 700; font-size: 30px; color: #a1a1a1; @@ -478,14 +468,14 @@ const changePlate = (index: number) => { padding: 0; background-color: #528dfe; color: white; - font-size: 24px; + font-size: 20px; font-weight: 400; margin-top: 5px; border-radius: 7px; .button-text { width: 120px; - font-size: 32px; + font-size: 26px; } } } @@ -524,15 +514,15 @@ const changePlate = (index: number) => { margin-right: 5px; img { - width: 50px; - height: 50px; + width: 40px; + height: 40px; } } .button-text { width: 65px; height: 24px; - font-size: 32px; + font-size: 26px; font-weight: 400; line-height: 30px; } diff --git a/src/pages/Index/components/Consumables/Plate.vue b/src/pages/Index/components/Consumables/Plate.vue index 70b414b..96bbe31 100644 --- a/src/pages/Index/components/Consumables/Plate.vue +++ b/src/pages/Index/components/Consumables/Plate.vue @@ -42,7 +42,7 @@ defineProps({ .colored-bar { display: flex; justify-content: space-between; - width: 100%; + width: 355px; height: 100%; background-color: #f0f0f0; border-radius: 10px; diff --git a/src/pages/Index/components/Consumables/SpttingPlates.vue b/src/pages/Index/components/Consumables/SpttingPlates.vue index 6ed39be..45104f2 100644 --- a/src/pages/Index/components/Consumables/SpttingPlates.vue +++ b/src/pages/Index/components/Consumables/SpttingPlates.vue @@ -20,7 +20,7 @@
- +
@@ -52,24 +52,7 @@ const props = defineProps({ }) // 温度状态 const currentTemperature = ref(40); -let socket; -// 使用 WebSocket 获取实时温度更新 -const startWebSocket = () => { - socket = new WebSocket("ws://localhost:8080/temperature"); - socket.onmessage = (event) => { - const { temperature } = JSON.parse(event.data); - currentTemperature.value = temperature; - }; -}; -onMounted(() => { - startWebSocket(); -}); - -onBeforeUnmount(() => { - if (socket) { - socket.close(); - } -}); + const changeNumRef = ref() const changeNumber = (plate, index) => { if (props.plates.length > 0) { @@ -82,8 +65,6 @@ const changeNumber = (plate, index) => {