From ba3c361926a370cd7c8f9b84cd1f262bcb1142b2 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Sat, 8 Feb 2025 11:25:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=81=A2=E5=A4=8D=E5=8E=9F=E5=A7=8B=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/arrow.svg                           |  1 -
 src/assets/avatar.svg                          |  1 -
 src/assets/main.css                            |  9 +--
 src/assets/photo_icon.svg                      |  1 -
 src/views/components/Footer.vue                | 98 --------------------------
 src/views/components/Header.vue                | 94 +++++++++++++++++++-----
 src/views/components/Liquid.vue                | 35 ++++-----
 src/views/components/Menu.vue                  | 27 +++----
 src/views/components/index.ts                  |  2 +
 src/views/graphite/components/AddWaste.vue     | 96 +++++++++++--------------
 src/views/graphite/components/HeatPosition.vue | 68 ++++++++++--------
 src/views/graphite/components/TakePickture.vue | 41 +++--------
 src/views/graphite/index.vue                   | 44 +++++++-----
 src/views/home/index.vue                       | 50 +++++--------
 src/views/liquidConfig/index.vue               | 34 +--------
 src/views/logRecord/index.vue                  |  8 +--
 16 files changed, 241 insertions(+), 368 deletions(-)
 delete mode 100644 src/assets/arrow.svg
 delete mode 100644 src/assets/avatar.svg
 delete mode 100644 src/assets/photo_icon.svg
 delete mode 100644 src/views/components/Footer.vue
 create mode 100644 src/views/components/index.ts

diff --git a/src/assets/arrow.svg b/src/assets/arrow.svg
deleted file mode 100644
index 157995c..0000000
--- a/src/assets/arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="23" height="15" viewBox="0 0 23 15"><g transform="matrix(0,-1,1,0,-15,15)"><path d="M12.4365,15C12.4365,15,15,17.37044,15,17.37044C15,17.37044,5.12696,26.5,5.12696,26.5C5.12696,26.5,15,35.629599999999996,15,35.629599999999996C15,35.629599999999996,12.4365,38,12.4365,38C12.4365,38,0,26.5,0,26.5C0,26.5,12.4365,15,12.4365,15C12.4365,15,12.4365,15,12.4365,15Z" fill-rule="evenodd" fill="#1989FA" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/avatar.svg b/src/assets/avatar.svg
deleted file mode 100644
index ea89d9c..0000000
--- a/src/assets/avatar.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><defs><clipPath id="master_svg0_609_03555/609_03497"><rect x="8" y="8" width="24" height="24" rx="0"/></clipPath></defs><g><rect x="0" y="0" width="40" height="40" rx="20" fill="#1989FA" fill-opacity="1"/><g clip-path="url(#master_svg0_609_03555/609_03497)"><g><path d="M28.120604907226564,25.896875C27.67840490722656,24.849575,27.03680490722656,23.898375,26.231504907226565,23.096075C25.428604907226564,22.291475,24.47750490722656,21.649974999999998,23.430704907226563,21.207075C23.421304907226563,21.202375,23.41200490722656,21.199975000000002,23.40260490722656,21.195275000000002C24.862704907226565,20.140625,25.812004907226562,18.422655,25.812004907226562,16.484375C25.812004907226562,13.273435,23.21040490722656,10.671875,19.99946490722656,10.671875C16.788524907226563,10.671875,14.186964907226562,13.273435,14.186964907226562,16.484375C14.186964907226562,18.422655,15.136184907226562,20.140625,16.596334907226563,21.197675C16.586964907226562,21.202375,16.577584907226562,21.204675,16.56821490722656,21.209375C15.518214907226563,21.652375,14.576024907226563,22.287475,13.767434907226562,23.098475C12.962844907226563,23.901375,12.321344907226562,24.852475,11.878369907226563,25.899175C11.443186907226563,26.924075,11.208483707226563,28.022775,11.186963515026562,29.135975C11.186337956226563,29.160975,11.190725517226563,29.185875,11.199867807226562,29.209175C11.209010107226563,29.232375,11.222722007226562,29.253675,11.240195707226562,29.271575C11.257669407226562,29.289475,11.278551207226563,29.303675,11.301610907226562,29.313375C11.324669907226562,29.323175,11.349440907226562,29.328175,11.374463907226563,29.328075C11.374463907226563,29.328075,12.780714907226562,29.328075,12.780714907226562,29.328075C12.883834907226563,29.328075,12.965864907226562,29.246075,12.968214907226562,29.145275C13.015084907226562,27.335975,13.741654907226563,25.641375,15.026024907226562,24.357075000000002C16.354934907226564,23.028174999999997,18.119774907226564,22.296875,19.99946490722656,22.296875C21.879104907226562,22.296875,23.644004907226563,23.028174999999997,24.972904907226564,24.357075000000002C26.257304907226562,25.641375,26.983804907226563,27.335975,27.030704907226564,29.145275C27.033104907226562,29.248475,27.115104907226563,29.328075,27.218204907226564,29.328075C27.218204907226564,29.328075,28.624504907226562,29.328075,28.624504907226562,29.328075C28.64950490722656,29.328175,28.674304907226563,29.323175,28.697304907226563,29.313375C28.720404907226563,29.303675,28.741304907226564,29.289475,28.758704907226562,29.271575C28.776204907226564,29.253675,28.789904907226564,29.232375,28.799104907226564,29.209175C28.808204907226564,29.185875,28.81260490722656,29.160975,28.812004907226562,29.135975C28.788504907226564,28.015675,28.55650490722656,26.925775,28.120604907226564,25.896875C28.120604907226564,25.896875,28.120604907226564,25.896875,28.120604907226564,25.896875ZM19.99946490722656,20.515625C18.923684907226562,20.515625,17.911184907226563,20.096095,17.149464907226562,19.334375C16.387744907226562,18.572655,15.968214907226564,17.560155,15.968214907226564,16.484375C15.968214907226564,15.408595,16.387744907226562,14.396094999999999,17.149464907226562,13.634375C17.911184907226563,12.872655,18.923684907226562,12.453125,19.99946490722656,12.453125C21.075244907226562,12.453125,22.087704907226563,12.872655,22.84950490722656,13.634375C23.611204907226565,14.396094999999999,24.030704907226564,15.408595,24.030704907226564,16.484375C24.030704907226564,17.560155,23.611204907226565,18.572655,22.84950490722656,19.334375C22.087704907226563,20.096095,21.075244907226562,20.515625,19.99946490722656,20.515625Z" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index 454a6de..d7036d7 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,10 +1,7 @@
 @import './base.css';
-:root {
-  --globe-proportion: 0.4; /* 定义主色调 */
-}
+
 #app {
-  height: calc(1840px  * 0.4);
-  width: calc(2800px  * 0.4);
+  max-width: 2800px;
+  max-height: 1840px;
   overflow: hidden;
-  background: #e9e9e9;
 }
diff --git a/src/assets/photo_icon.svg b/src/assets/photo_icon.svg
deleted file mode 100644
index 3a619cc..0000000
--- a/src/assets/photo_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="51" height="38" viewBox="0 0 51 38"><g><path d="M34.3172,23.1571Q34.3172,24.7195,33.7294,26.0866Q33.1416,27.4537,32.1339,28.4582Q31.1262,29.4626,29.7827,30.0485Q28.4391,30.6344,26.8716,30.6344Q25.3041,30.6344,23.9605,30.0485Q22.6169,29.4626,21.6092,28.4582Q20.6015,27.4537,20.0137,26.0866Q19.4259,24.7195,19.4259,23.1571Q19.4259,21.6505,20.0137,20.2834Q20.6015,18.9163,21.6092,17.9119Q22.6169,16.9075,23.9605,16.3216Q25.3041,15.7357,26.8716,15.7357Q28.4391,15.7357,29.7827,16.3216Q31.1262,16.9075,32.1339,17.9119Q33.1416,18.9163,33.7294,20.2834Q34.3172,21.6505,34.3172,23.1571ZM6.60593,38Q5.03842,38,3.80681,37.721Q2.57519,37.442,1.73546,36.7724Q0.895719,36.1028,0.44786,34.9589Q0,33.815,0,32.0852L0,13.2247Q0,10.0999,1.48353,8.87225Q2.96707,7.64464,6.15807,7.64464L15.5631,7.64464Q16.4588,7.64464,17.0467,7.30984Q17.6345,6.97504,17.9984,6.41703Q18.3622,5.85903,18.6422,5.10573Q18.9221,4.35242,19.258,3.57122Q19.8178,2.12041,21.2173,1.06021Q22.6169,0,24.4083,0L29.6147,0Q31.6861,0,33.0017,1.14391Q34.3172,2.28781,34.7651,3.57122Q35.3809,5.24523,36.3886,6.44493Q37.3963,7.64464,38.5159,7.64464L45.6257,7.64464Q48.0889,7.58884,49.5445,8.98385Q51,10.3789,51,13.0573L51,32.1968Q51,35.0426,49.4885,36.5213Q47.9769,38,45.4577,38L6.60593,38ZM26.7596,11.4949Q24.2964,11.4949,22.169,12.4156Q20.0417,13.3363,18.4742,14.9266Q16.9067,16.5169,15.983,18.6373Q15.0593,20.7577,15.0593,23.1571Q15.0593,25.6123,15.983,27.7327Q16.9067,29.8532,18.4742,31.4156Q20.0417,32.978,22.169,33.8987Q24.2964,34.8194,26.7596,34.8194Q29.1669,34.8194,31.2942,33.8987Q33.4215,32.978,34.989,31.4156Q36.5565,29.8532,37.4802,27.7327Q38.404,25.6123,38.404,23.1571Q38.404,20.7577,37.4802,18.6373Q36.5565,16.5169,34.989,14.9266Q33.4215,13.3363,31.2942,12.4156Q29.1669,11.4949,26.7596,11.4949ZM30.6784,5.46843Q30.6784,4.57563,30.5944,4.07342Q30.5104,3.57122,29.4468,3.57122L24.8002,3.57122Q23.7366,3.51542,23.6526,4.01762Q23.5686,4.51983,23.5686,5.46843Q23.5126,6.52864,23.6806,6.97504Q23.8485,7.42144,24.8002,7.42144L29.4468,7.42144Q30.5104,7.42144,30.5944,6.91924Q30.6784,6.41704,30.6784,5.46843Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>
\ No newline at end of file
diff --git a/src/views/components/Footer.vue b/src/views/components/Footer.vue
deleted file mode 100644
index a5ac958..0000000
--- a/src/views/components/Footer.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <div class="header_ins">
-        <van-icon name="discount-o" size="15" style="padding:5px"/>
-        <span class="ins_text text_size">等待指令</span>
-    </div>
-
-    <div class="footer_waste">
-        <van-popover v-model:show="showContainerPopover" placement="top">
-            <template #reference>
-                <div class="footer_container">
-                    <div class="circle" style="background-color: #F2652D;"></div>
-                    <div class="waste_status text_size" style="color:#F2652D">碱中和容器余量低</div>
-                    <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
-                </div>
-            </template>
-            <div class="liquid">
-                <Liquid></Liquid>
-            </div>
-        </van-popover>
-    </div>
-
-    <div class="footer_normal">
-        <van-popover v-model:show="showWastePopover" placement="top-end" class="waste_popover">
-            <template #reference>
-                <div class="footer_container">
-                    <div class="circle"></div>
-                    <div class="waste_status text_size">溶液正常</div>
-                    <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
-                </div>
-            </template>
-            <div>
-                <Liquid></Liquid>
-            </div>
-        </van-popover>
-    </div>
-
-</template>
-<script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import Liquid from './Liquid.vue'
-const showContainerPopover = ref(false)
-const showWastePopover = ref(false)
-
-</script>
-<style scoped>
-    .header_ins{
-        display: flex;
-        align-items: center;
-        border-radius: 5px;
-        width: calc(1268px* var(--globe-proportion));
-        height: calc(60px* var(--globe-proportion));
-        background: #FFFFFF;
-    }
-    .footer_waste{
-        display: flex;
-        align-items: center;
-        border-radius: 5px;
-        width: calc(430px* var(--globe-proportion));
-        height: calc(60px* var(--globe-proportion));
-        background: #FFFFFF;
-        margin-left: 10px;
-    }
-
-    .footer_normal{
-        margin-left: 70px;
-    }
-
-    .text_size{
-        font-size:calc(30px * var(--globe-proportion));
-        padding-right: 5px;
-    }
-    .footer_container{
-        display: flex;
-        align-items: center;
-        border-radius: 5px;
-        width: calc(500px * var(--globe-proportion));
-        height: calc(60px* var(--globe-proportion));
-        background: #FFFFFF;
-        .circle {
-            width: calc(30px * var(--globe-proportion)); 
-            height: calc(30px * var(--globe-proportion)); 
-            background-color: green; 
-            border-radius: 50%; 
-            margin-left: 10px;
-        }
-
-        .waste_status{
-            padding:5px 5px;
-        }
-
-        .waste_detail{
-            margin-left: auto
-        }
-    }
-    .liquid{
-        height:  400px;
-    }
-</style>
\ No newline at end of file
diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue
index cb226ae..9507c79 100644
--- a/src/views/components/Header.vue
+++ b/src/views/components/Header.vue
@@ -1,54 +1,111 @@
 <template>
     <div class="header">
         <div class="header_logo">
-            <img :src="logo" style="height:20px"/>
+            <img :src="logo"/>
         </div>
-        <div class="header_time">
+        <!--时间区-->
+        <div class="header_menu">
             {{ currentTime }}
         </div>
+        <!--指令区-->
+        <div class="header_ins">
+            <van-icon name="discount-o" size="30" style="padding:5px"/>
+            <span class="ins_text text_size">等待指令</span>
+        </div>
+
+        <div>
+            <van-popover v-model:show="showContainerPopover">
+                <template #reference>
+                    <div class="header_container">
+                        <div class="circle" style="background-color: #F2652D;"></div>
+                        <div class="waste_status text_size" style="color:#F2652D">碱中和容器余量低</div>
+                        <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
+                    </div>
+                </template>
+                <div>
+                    <Liquid></Liquid>
+                </div>
+            </van-popover>
+        </div>
+
+        <div>
+            <van-popover v-model:show="showWastePopover">
+                <template #reference>
+                    <div class="header_container">
+                        <div class="circle"></div>
+                        <div class="waste_status text_size">溶液正常</div>
+                        <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
+                    </div>
+                </template>
+                <div>
+                    <Liquid></Liquid>
+                </div>
+            </van-popover>
+        </div>
+
         <div class="header_user">
-            <img :src="AvatarSvg" width="20px" height="20px"/>
-            <div style="font-size: 15px;">Admin</div>
+            <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" size="70"/>
+            <div style="font-size: 30px;">Admin</div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
     import logo from '@/assets/logo.png'
-    import AvatarSvg from '@/assets/avatar.svg'
     import { ref, onMounted } from 'vue'
+    import { useRouter } from 'vue-router'
     import {eventBus} from '@/eventBus'
+    import Liquid from './Liquid.vue'
     import { getFormattedDateTime } from '@/utils' 
+    const router = useRouter()
+    const menus = [{
+        text: '菜单',
+        value: 0
+    },{
+        text: '测试页面',
+        value: 1
+    }]
     const menuId = ref(0)
+    const menuList = ref(menus)
     const time = getFormattedDateTime()
     const currentTime = ref(time)
+    const showContainerPopover = ref(false)
+    const showWastePopover = ref(false)
     onMounted(()=>{
         //测试页面返回时，需要调整菜单 
         eventBus.on('menuId', (value:number)=>{
             menuId.value = value
         })
     })
+    const onHandleMenu = () => {
+        //跳转测试页面
+        if(menuId.value === 0){
+            router.push('/')
+        }
+        if(menuId.value === 1){
+            router.push('/test')
+        }
+    }
+
 </script>
 <style scoped>
     .header{
+        width: 100%;
         display: flex;
         align-items: center;
         background: #e9e9e9;
-        align-items: center;
-        height: calc(108px * var(--globe-proportion));
+        height: 108px;
         .header_logo{
             padding:10px 10px;
         }
         
-        .header_time{
-            width: calc(375px * var(--globe-proportion));
-            height: calc(80px * var(--globe-proportion));
-            font-size: calc(28px * var(--globe-proportion));
-            display: flex;
-            align-items: center;
-            margin-left: calc(1910px * var(--globe-proportion));
-            background: white;
-            justify-content: center;
-            border-radius: 10px;
+        .header_menu{
+            margin-left:12px;
+            width: 361px;
+            padding-top:5px;
+            font-size: 28px;
+            .header_menu_item{
+                color:#FFFFFF
+            }
         }
 
         .header_ins{
@@ -83,9 +140,10 @@
         .header_user{
             display: flex;
             align-items: center;
+            width: 25%;
             justify-content: flex-end;
+            padding-right: 20px;
             gap: 5px;
-            padding-left: 7px;
         }
     }
 
diff --git a/src/views/components/Liquid.vue b/src/views/components/Liquid.vue
index 29e4737..c356a89 100644
--- a/src/views/components/Liquid.vue
+++ b/src/views/components/Liquid.vue
@@ -86,23 +86,23 @@
 <style lang="css" scoped>
     .container{
         background: #EEEFF8;
-        width: calc(1200px * var(--globe-proportion));
-        height: calc(1100px  * var(--globe-proportion));
+        width: 1200px;
+        height: 900px;
         
         .waster_pos{
             position: relative;
-            width: calc(100px * var(--globe-proportion));
-            height: calc(150px * var(--globe-proportion));
-            margin: calc(50px * var(--globe-proportion)) calc(60px * var(--globe-proportion));
+            width: 100px;
+            height: 150px;
+            margin: 50px 60px;
         }
         .waster_status{
             height: 29px;
             font-family: Source Han Sans;
-            font-size: calc(30px * var(--globe-proportion));
+            font-size: 30px;
             font-weight: 500;
             color: #40474E;
-            padding-left: calc(26px * var(--globe-proportion));
-            padding-top: calc(19px * var(--globe-proportion));
+            padding-left: 26px;
+            padding-top: 19px;
         }
 
         .contail_percentage{
@@ -131,33 +131,34 @@
 
         .container_water_name{
             font-family: 思源黑体;
-            font-size: calc(26px * var(--globe-proportion));
+            font-size: 26px;
             font-weight: 500;
             color: #9E9E9E;
-            margin-left: calc(45px * var(--globe-proportion));
-            margin-top: calc(-35px * var(--globe-proportion));
+            margin-left: 45px;
+            margin-top: -35px;
         }
     }
     .solu_list{
         display: flex;    
         justify-content: center;
         flex-wrap: wrap;
+        margin-top: 50px;
     }
 
     .solu_name{
         font-family: 思源黑体;
-        font-size: calc(26px * var(--globe-proportion));
+        font-size: 26px;
         font-weight: 500;
         color: #9E9E9E;
-        margin-left: calc(65px * var(--globe-proportion));
-        margin-top: calc(-35px * var(--globe-proportion));
+        margin-left: 65px;
+        margin-top: -35px;
     }
 
     .percent_num{
-        font-size: calc(30px * var(--globe-proportion));
+        font-size: 30px;
         position: relative;
         z-index: 2;
-        top: calc(60px * var(--globe-proportion));
-        left: calc(20px * var(--globe-proportion));
+        top: 60px;
+        left: 20px;
     }
 </style>
\ No newline at end of file
diff --git a/src/views/components/Menu.vue b/src/views/components/Menu.vue
index 4abd08f..5d9ac2c 100644
--- a/src/views/components/Menu.vue
+++ b/src/views/components/Menu.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="menu">
-        <van-sidebar v-model="active" class="sidebar">
+        <van-sidebar v-model="active" style="width:325px;font-size: 30px">
             <van-sidebar-item v-for="menu in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu)">
                 <template #title scoped>
                     <div class="menn_li">
-                        <div><img :src="active== menu.id ? menu.s_img : menu.n_img" class="menu_icon"/></div>
-                        <div>{{ menu.name }}</div>
+                        <div><img :src="active== menu.id ? menu.s_img : menu.n_img"/></div>
+                        <div style="margin-left: 30px;">{{ menu.name }}</div>
                     </div>
                 </template>
             </van-sidebar-item>
@@ -60,17 +60,13 @@
 
 </script>
 <style lang="css" scoped>
-    .sidebar{
-        width:calc(325px * var(--globe-proportion));
-        font-size: calc(30px * var(--globe-proportion))
-    }
     .menu{
-        height: calc(1840px * var(--globe-proportion));
-        background: #e9e9e9;
+        position: absolute;
+        margin-left: 17%;
     }
 
     .menn_text{
-        font-size: calc(30px * var(--globe-proportion));
+        font-size: 30px;
         margin-top:20px;
     }
 
@@ -82,22 +78,17 @@
 
     .menn_btn{
         border-radius: 10px;
-        height: calc(100px * var(--globe-proportion));
-        width: calc(320px * var(--globe-proportion));
+        height: 100px;
+        width: 320px;
         display: flex;
+        justify-content: center;
         align-items: center;
-        
     }
 
     .menn_li{
         display: flex;
         align-items: center;
-        gap: 5px;
-    }
 
-    .menu_icon{
-        width: calc(80px * var(--globe-proportion));
-        height: calc(80px * var(--globe-proportion));
     }
     
 </style>
\ No newline at end of file
diff --git a/src/views/components/index.ts b/src/views/components/index.ts
new file mode 100644
index 0000000..81e6eea
--- /dev/null
+++ b/src/views/components/index.ts
@@ -0,0 +1,2 @@
+import { default as Header } from './Header.vue'
+import { default as Liquid } from './Liquid.vue'
\ No newline at end of file
diff --git a/src/views/graphite/components/AddWaste.vue b/src/views/graphite/components/AddWaste.vue
index 7f57fb1..00c696a 100644
--- a/src/views/graphite/components/AddWaste.vue
+++ b/src/views/graphite/components/AddWaste.vue
@@ -17,13 +17,14 @@
                 <div>
                     <div class="waste_edit">
                         <div >
-                            <van-icon name="edit"/>
+                            <van-icon name="edit" />
                             <span>请输入添加值</span>
                         </div>
                         <br/>
                         <div class="waste_field">
-                            <img :src="AddSvg" class="add_icon"/>
-                            <van-field type="number" autosize placeholder="请输入" class='waste_input' size="normal"/>ml
+                            <img :src="AddSvg"/>
+                            <van-field  placeholder="请输入" />
+                            <div class="ml">ml</div>
                         </div>
                         <br/>
                         <div>
@@ -54,53 +55,52 @@
 
 </script>
 <style scoped>
-    
     .title{
-        font-size: calc(40px * var(--globe-proportion));
+        font-size: 40px;
         font-weight: 500;
-        line-height: 11px;
-        padding-top: calc(80px * var(--globe-proportion));
-        margin-left: calc(90px * var(--globe-proportion));
+        line-height: 22px;
+        padding-top: 80px;
+        margin-left:90px;
         color: #323233;
     }
     
     .waste_main{
-        height: calc(900px * var(--globe-proportion));
+        height: 900px;
         flex-wrap: wrap;
         display: flex;
         .waste_area{
-            height: calc(330px * 0.4);
-            width: calc(480px * 0.4);
+            height: 330px;
+            width: 480px;
             border: 2px solid #275EFB;
-            margin-top: calc(100px * 0.4);
-            margin-left: calc(70px * 0.4);
+            margin-top: 100px;
+            margin-left: 70px;
             background: rgb(243 251 255);
             border-radius: 20px;
             display: flex;
             .waste_percentage{
                 position: relative;
-                width: calc(141px * 0.4);
-                height: calc(198px * 0.4);
+                width: 141px;
+                height: 198px;
                 background-image: url('@/assets/container.svg');
                 background-size: cover;
                 background-position: center;
                 z-index: 1;
                 border-radius: 10px;
-                margin-top: calc(33px * 0.4);
-                margin-left: calc(32px * 0.4);
+                margin-top: 33px;
+                margin-left: 32px;
             }
 
             .percent_num{
                 position: relative;
                 top: 40%;
                 left: 22%;
-                font-size: calc(30px * 0.4);
+                font-size: 30px;
             }
             .waste_color{
                 position: absolute;
                 bottom: 0;
                 left: 0;
-                width: calc(141px * 0.4);
+                width: 141px;
                 height: 50%;
                 background-color: blue;
                 opacity: 0.5;
@@ -109,42 +109,39 @@
             }
 
             .waste_name{
-                margin-left: calc(76px * 0.4);
-                margin-top: calc(27px * 0.4);
-                font-size: calc(26px * 0.4);
+                margin-left: 76px;
+                margin-top: 27px;
+                font-size: 26px;
                 color: #393F46;
             }
 
             .waste_edit{
                 background: #ffffff;
-                width: calc(256px * 0.4);
-                height: calc(220px * 0.4);
-                margin-left: calc(30px * 0.4);
-                margin-top: calc(20px * 0.4);
-                padding-top: calc(30px * 0.4);
-                font-size: calc(20px * 0.4);
-                padding-left: calc(35px * 0.4);
+                width: 256px;
+                height: 220px;
+                margin-left: 30px;
+                margin-top: 20px;
+                padding-top: 30px;
+                font-size: 20px;
+                padding-left: 35px;
             }
 
             .waste_field{
-                width: calc(210px * 0.4);
-                height: calc(54px * 0.4);
+                width: 210px;
                 display: flex;
                 border: 1px solid;
-                border-radius: calc(04px * 0.4);
+                border-radius: 304px;
                 border: 1px solid #E4E5F1;
-                align-items: center;
             }
            
         }
         
         .add_btn{
             background-color: #26D574;
-            font-size: calc(20px * 0.4);
+            font-size: 20px;
             color: #ffffff;
-            width: calc(210px * 0.4);
-            height: calc(54px * 0.4);
-            border-radius: calc(100px * 0.4);
+            width: 200px;
+            border-radius: 100px;
         }
         
     }
@@ -156,32 +153,21 @@
         margin-left: 35%;
         height: 200px;
         .btn{
-            width:calc(438px * 0.4);
-            height: calc(90px * 0.4);
-            font-size: calc(40px * 0.4);
+            width:438px;
+            height: 90px;
+            font-size: 40px;
         }
     }
     .ml{
+        margin-right: 20px;
         padding-top: 5px;
     }
 
     .add_result{
-        font-size: calc(26px * 0.4);
+        font-size: 26px;
         color: #393f46; 
-        margin-top: calc(18px * 0.4);
-        margin-left: calc(45px * 0.4);
-    }
-
-    .add_icon{
-        width: calc(28px * 0.4);
-        height: calc(28px * 0.4);
+        margin-top: 18px;
+        margin-left: 45px;
     }
 
-    .waste_input{
-        font-size: calc(18px * 0.4);
-        
-    }
-
-   
-
 </style>
\ No newline at end of file
diff --git a/src/views/graphite/components/HeatPosition.vue b/src/views/graphite/components/HeatPosition.vue
index a0b035d..7b7099a 100644
--- a/src/views/graphite/components/HeatPosition.vue
+++ b/src/views/graphite/components/HeatPosition.vue
@@ -80,20 +80,21 @@
   <style scoped>
   .heat_main{
     border: 1px solid #E9F3FF;
-    width: calc(366px * var(--globe-proportion));
-    height: calc(580px * var(--globe-proportion));
+    width: 366px;
+    height: 580px;
     border-radius: 20px;
     background: #E9F3FF;
-    margin-top: calc(159px * var(--globe-proportion));
+    margin-top: 110px;
     
     
   }
   .heat_pos_text{
     display: flex;
-    height: calc(53px * var(--globe-proportion));
-    padding-left: 20px;
+    height: 55px;
+    padding-left: 29px;
+    padding-right: 23px;
     .pos_text{
-      font-size: calc(26px * var(--globe-proportion));
+      font-size: 26px;
       font-weight: 500;
       line-height: normal;
       display: flex;
@@ -106,62 +107,67 @@
     }
   }
   .heat_pos{
-    width: calc(330px * var(--globe-proportion));
-    height: calc(330px * var(--globe-proportion));
+    width: 330px;
+    height: 330px;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     margin-left: 5px;
-    gap: 10px;
+    gap: 22px;
     flex-direction: row;
     background: #384D5D;
     border: 2px solid #7592A8;
+    margin-left: 15px;
+    padding-top: 15px;
     border-radius: 16px;
+
   }
   .inner-circle {
     border-radius: 50%;
-    width: calc(50px * var(--globe-proportion));
-    height: calc(50px * var(--globe-proportion));
+    width: 50px;
+    height: 50px;
     background-color: rgb(209, 33, 33);
   }
   .heat_footer{
-    height: calc(180px * var(--globe-proportion));
-    width: calc(330px * var(--globe-proportion));
+    height: 180px;
+    width: 330px;
     margin-top: 10px;
     margin-left: 5px;
     .heat_temperature{
-      height: calc(46px * var(--globe-proportion));
-      width: calc(330px * var(--globe-proportion));
+      height: 46px;
+      width: 330px;
       background: #FFFFFF;
+      box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
       border-radius: 5px;
       display: flex;
       align-items: center;
+      margin-left: 10px;
       .target_temp{
         color: #384D5D;
-        font-size: calc(22px * var(--globe-proportion));
+        font-size: 22px;
       }
 
       .heating{
         color: #FE0A0A;
-        font-size: calc(28px * var(--globe-proportion));
-        margin-left: calc(70px * var(--globe-proportion));
+        font-size: 28px;
+        margin-left: 70px;
       }
     }
 
     .temp_text{
-      width: calc(109px * var(--globe-proportion));
-      height: calc(52px * var(--globe-proportion));
+      width: 109px;
+      height: 52px;
       opacity: 1;
 
       font-family: Source Han Sans;
-      font-size: calc(36px * var(--globe-proportion));
+      font-size: 36px;
       font-weight: bold;
       line-height: normal;
       display: flex;
       align-items: center;
       color: #4D6882;
-      padding-top: calc(70px * var(--globe-proportion));
-      margin-left: calc(25px * var(--globe-proportion));
+      padding-top: 70px;
+      margin-left: 25px;
     }
   }
 
@@ -183,21 +189,21 @@
 
   .heat_choose{
     position: absolute;
-    margin-left: calc(215px * var(--globe-proportion));
+    margin-left: 215px;
     z-index: 99;
-    margin-top: -15px;
+    margin-top: -30px;
     
     .btn{
-      width: calc(126px * var(--globe-proportion));
-      height: calc(38px * var(--globe-proportion));
-      font-size: calc(20px * var(--globe-proportion));
-      background:#1989FA;
-      color: white;
+      width: 120px;
+      height: 60px;
+      font-size: 20px;
+      color:#1989FA;
+      background: #ffffff;
     }
   }
 
   .formula_picker{
-    width: calc(800px * var(--globe-proportion));
+    width: 800px;
     margin: 20% 30%;
   }
 
diff --git a/src/views/graphite/components/TakePickture.vue b/src/views/graphite/components/TakePickture.vue
index e0c7f1a..d011854 100644
--- a/src/views/graphite/components/TakePickture.vue
+++ b/src/views/graphite/components/TakePickture.vue
@@ -1,46 +1,23 @@
 <template>
     <div class="picture">
-        <!-- <van-button class="area">拍照</van-button> -->
-        <div class="area">
-            <div class="area_btn">
-                <img :src="PhotoSvg" class="photo_icon"/>
-                拍照
-            </div>
-        </div>
+        <van-button class="area">拍照</van-button>
+            
     </div>
 </template>
 <script lang="ts" setup>
-    import PhotoSvg from '@/assets/photo_icon.svg'
+
 </script>
 <style scoped>
     .picture{
-        height: calc(726px * var(--globe-proportion));
-        width: calc(911px * var(--globe-proportion));
+        height: 820px;
         background-image: url('@/assets/picture.svg');
         background-repeat: no-repeat;
-        background-size: contain;
-        margin-left:10px
     }
     .area{
-        background: rgba(255, 255, 255, 0.5);
-        font-size: calc(26px * var(--globe-proportion));
-        width: calc(911px * var(--globe-proportion));
-        height: calc(126px * var(--globe-proportion));
-        position: absolute;
-        margin-top: calc(600px * var(--globe-proportion));
-        .area_btn{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: calc(126px * var(--globe-proportion));
-            font-size: calc(42px * var(--globe-proportion));
-            font-weight: bold;
-            color: #FFFFFF;
-            gap:10px;
-            .photo_icon{
-                width: calc(51px * var(--globe-proportion));
-                height: calc(38px * var(--globe-proportion));
-            }
-        }
+        margin-left: 80%;
+        margin-top: 760px;
+        font-size: 26px;
+        width: 130px;
+        
     }
 </style>
\ No newline at end of file
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index ac6a59d..7f1a327 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="graphite_home" id="home">
         <div class="heat_area">
-            <div v-for="(item, index) in heatList" :key="item">
-                <div :style="`margin-top:${index>2?'-40px':''}`"><HeatPosition :heatInfo="item"></HeatPosition></div>
+            <div v-for="item in heatList" :key="item">
+                <HeatPosition :heatInfo="item"></HeatPosition>
             </div>
         </div>
         <!--拍照区-->
@@ -10,8 +10,10 @@
             <div class="pickture">
                 <TakePickture></TakePickture>
             </div>
+            <!--操作区-->
             <div class="graphite_btn">
-                <div><van-button size="large" class="btn_size" style="width: calc(930px * var(--globe-proportion));">开门</van-button></div>
+                <div><van-button size="large" class="btn_size" style="width: 840px;">开门</van-button></div>
+                <br/>
                 <van-row class="graphite_operate">
                     <van-col span="11">
                         <van-button  size="large" class="btn_size">开始任务</van-button>
@@ -20,6 +22,7 @@
                         <van-button  size="large" class="btn_size">结束任务</van-button>
                     </van-col>
                 </van-row>
+                <br/>
                 <van-row class="graphite_operate">
                     <van-col span="11">
                         <van-button  size="large" class="btn_size">选择配方</van-button>
@@ -28,6 +31,7 @@
                         <van-button  size="large" class="btn_size">执行配方</van-button>
                     </van-col>
                 </van-row>
+                <br/>
                 <van-row class="graphite_operate">
                     <van-col span="11">
                         <van-button  size="large" class="btn_size" @click="onAddWaste">添加溶液</van-button>
@@ -36,6 +40,7 @@
                         <van-button  size="large" class="btn_size">摇匀</van-button>
                     </van-col>
                 </van-row>
+                <br/>
                 <van-row class="graphite_operate">
                     <van-col span="7">
                         <van-button  size="large" class="btn_size">移至加热</van-button>
@@ -47,6 +52,7 @@
                         <van-button  size="large" class="btn_size">移至特殊</van-button>
                     </van-col>
                 </van-row>
+                <br/>
                 <van-row class="graphite_operate">
                     <van-col span="11">
                         <van-button  size="large" class="btn_size">开始加热</van-button>
@@ -84,17 +90,19 @@
     .graphite_home{
         display: flex;
         background: #F6F6F6;
-        width: calc(2418px * var(--globe-proportion));
+        height: 1840px;
+        width: 2800px;
         
     }
     .heat_area{
-        width: calc(1268px * var(--globe-proportion));
-        height: calc(1620px * var(--globe-proportion));
+        width: 1268px;
+        height: 1586px;
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         margin: 5px;
-        gap: calc(20px * var(--globe-proportion));
+        gap: 20px;
+        flex-direction: row;
         padding-top:10px;
         padding-bottom: 100px;
         background: #FFFFFF;
@@ -102,29 +110,29 @@
     }
 
     .pickture_area{
-        width: calc(1100px * var(--globe-proportion));
-        height: calc(1620px * var(--globe-proportion));
+        width: 1000px;
+        height: 1586px;
         margin: 5px;
+        margin-left: 20px;
         background: #FFFFFF;
-        padding: calc(50px * var(--globe-proportion));
+        padding: 50px;
         border-radius: 20px;
     }
 
     .graphite_btn{
-        padding-top: calc(50px * var(--globe-proportion));
-        margin-left: calc(30px * var(--globe-proportion));
+        padding-top: 50px;
+        margin-left: 30px;
     }
 
     .btn_size{
-        font-size: calc(30px * var(--globe-proportion));
-        height: calc(80px * var(--globe-proportion));
+        font-size: 30px;
+        height: 80px;
         color: #1989FA;
         border: 3px solid #1989FA;
     }
 
     .graphite_operate{
-        gap: calc(40px * var(--globe-proportion));
-        line-height: 3.5;
+        gap: 40px;
     }
 
     .waste{
@@ -134,8 +142,8 @@
         height: 100%;
         align-items: center;
         .addWaste{
-            width: calc(2250px * 0.4);
-            height: calc(1235px * 0.4);
+            width: 2250px;
+            height: 1235px;
             background: #FFFFFF;
         }
     }
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 7731272..bd67f19 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,30 +1,24 @@
 
 
 <template>
-    <div>
-      <div><Header></Header></div>
-      <div class="container" style="display: flex;">
-        <div class="home_menu">
+    <div id="container">
+      <div>
+        <Header></Header>
+        <div style="background: #ffffff;" class="home_menu">
             <Menu></Menu>
         </div>
-        <main>
-          <div class="main">
-            <router-view v-slot="{ Component }">
-              <keep-alive :exclude="['Home']">
-                <component :is="Component" />
-              </keep-alive>
-            </router-view>
-          </div>
-        </main>
-      </div>
-      <div class="footer">
-        <Footer></Footer>
       </div>
+      <main>
+        <router-view v-slot="{ Component }">
+          <keep-alive :exclude="['Home']">
+            <component :is="Component" />
+          </keep-alive>
+        </router-view>
+      </main>
     </div>
   </template>
   <script setup lang="ts">
     import Header from '../components/Header.vue';
-    import Footer from '../components/Footer.vue';
     import { onMounted, watch } from 'vue';
     import { useRouter, useRoute } from 'vue-router'
     import Menu from '@/views/components/Menu.vue'
@@ -40,24 +34,12 @@
     },{ immediate: true, deep: true })
   </script>
   <style>
-    .main{
-      display: flex;
-      width: calc(2418px * var(--globe-proportion));
-      background: rgb(255, 255, 255);
-      height: calc(1640px * var(--globe-proportion));
-    }
     .home_menu{
       background: rgb(255, 255, 255);
-      height: calc(1724px * var(--globe-proportion));
-      width: calc(450px * var(--globe-proportion));
-    }
-    .footer{
-      position: relative;
-      margin-top: -25px;
-      width: calc(2425px * var(--globe-proportion));
-      margin-left: calc(325px * var(--globe-proportion));
-      background: #e9e9e9;
-      display: flex;
-      gap: 5px;
+      position: absolute;
+      left: 84%;
+      height: 1724px;
+      width: 450px;
+
     }
   </style>
\ No newline at end of file
diff --git a/src/views/liquidConfig/index.vue b/src/views/liquidConfig/index.vue
index 09156bb..c2c2c27 100644
--- a/src/views/liquidConfig/index.vue
+++ b/src/views/liquidConfig/index.vue
@@ -1,33 +1,3 @@
 <template>
-    <div>
-        <div class="waster_config">
-            <div class="config_title">
-                <div class="config_name"></div>
-            </div>
-        </div>
-    </div>
-</template>
-<script lang="ts" setup>
-
-</script>
-<style scoped>
-    .waster_config{
-        width: calc(410px * 0.4);
-        height: calc(430px * 0.4);
-        border:1px solid #275EFB;
-        margin-left: calc(134px * 0.4);
-        margin-top:  calc(160px * 0.4);
-        .config_title{
-            width: calc(410px * 0.4);
-            height: calc(80px * 0.4);
-            background: rgba(25, 137, 250, 0.1216);
-            padding-top:calc(15px * 0.4);
-            .config_name{
-                width: calc(248px * 0.4);
-                height: calc(50px * 0.4);
-                background: #FFFFFF;
-                margin-left: calc(81px * 0.4);
-            }
-        }
-    }
-</style>
\ No newline at end of file
+    <div>加液配置</div>
+</template>
\ No newline at end of file
diff --git a/src/views/logRecord/index.vue b/src/views/logRecord/index.vue
index 0bc55ec..ec2a8e0 100644
--- a/src/views/logRecord/index.vue
+++ b/src/views/logRecord/index.vue
@@ -1,10 +1,6 @@
 <template>
-    <div class="log">日志记录</div>
+    <div>日志记录</div>
 </template>
 <script lang="ts" setup>
 
-</script>
-<style lang="css" scoped>
-    .log{
-    }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file