From 73a69a02987994ab14d0b6678a187302dd380308 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Mon, 10 Feb 2025 09:07:36 +0800
Subject: [PATCH] merge master

---
 src/assets/photo_icon.svg                      |   1 +
 src/views/components/Footer.vue                | 100 ++++++++++++++++++++++++-
 src/views/components/Liquid.vue                |  73 +++++++-----------
 src/views/graphite/components/TakePickture.vue |  49 +++++++++---
 src/views/graphite/index.vue                   |  34 ++++-----
 5 files changed, 180 insertions(+), 77 deletions(-)
 create mode 100644 src/assets/photo_icon.svg

diff --git a/src/assets/photo_icon.svg b/src/assets/photo_icon.svg
new file mode 100644
index 0000000..3a619cc
--- /dev/null
+++ b/src/assets/photo_icon.svg
@@ -0,0 +1 @@
+<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
index 1e73a02..c6d4c80 100644
--- a/src/views/components/Footer.vue
+++ b/src/views/components/Footer.vue
@@ -1,3 +1,99 @@
+
 <template>
-    <div class="h-[--footerHeight] pl-[--menuAreaWidth]">Footer</div>
-</template>
\ No newline at end of file
+    <div class="h-[--footerHeight] bg-[--bgColor] footer">
+        <div class="footer_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-end">
+                <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>
+                <Liquid></Liquid>
+            </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>
+                <Liquid></Liquid>
+            </van-popover>
+        </div>
+    </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>
+    .footer{
+       display: flex; 
+       align-items: center;
+    }
+    .footer_ins{
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        background: #FFFFFF;
+        height: 80px;
+        width: 1268px;
+        margin-left: 380px;
+    }
+    .footer_waste{
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        width: 430px;
+        height: 80px;
+        background: #FFFFFF;
+        margin-left: 10px;
+    }
+
+    .footer_normal{
+        margin-left: 100px;
+    }
+
+    .text_size{
+        font-size:30px;
+        padding-right: 5px;
+    }
+    .footer_container{
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        width: 500px;
+        height: 80px;
+        background: #FFFFFF;
+        .circle {
+            width: 30px; 
+            height: 30px; 
+            background-color: green; 
+            border-radius: 50%; 
+            margin-left: 10px;
+        }
+
+        .waste_status{
+            padding:5px 5px;
+        }
+
+        .waste_detail{
+            margin-left: auto
+        }
+    }
+</style>
diff --git a/src/views/components/Liquid.vue b/src/views/components/Liquid.vue
index c356a89..6fdae36 100644
--- a/src/views/components/Liquid.vue
+++ b/src/views/components/Liquid.vue
@@ -1,24 +1,22 @@
 <template>
-    <div class="container">
-        <div>
-            <div class="waster_status">废液回收状态</div>
-            <div class="waster_pos">
-                <div class="contail_percentage"></div>
-                <div class="liquid" style="height: 50%;"></div>
-                <div class="percent_num">50%</div>
-            </div>
-            <div class="container_water_name">
-                碱中和容器
-            </div>
+    <div class="liquid">
+        <div class="liquid_status">废液回收状态</div>
+        <div class="liquid_pos">
+            <div class="contail_percentage"></div>
+            <div class="liquid_percent" style="height: 50%;"></div>
+            <div class="percent_num">50%</div>
+        </div>
+        <div class="container_water_name">
+            碱中和容器
         </div>
         <br/>
         <div>
-            <div class="waster_status">溶液容器状态</div>
+            <div class="liquid_status">溶液容器状态</div>
             <div class="solu_list">
                 <div v-for="solu in solutionList" :key="solu.id">
-                    <div class="waster_pos">
+                    <div class="liquid_pos">
                         <div class="contail_percentage"></div>
-                        <div class="liquid" :style="`height: ${solu.percentage};background-color:${solu.color}`"></div>
+                        <div class="liquid_percent" :style="`height: ${solu.percentage};background-color:${solu.color}`"></div>
                         <div class="percent_num">{{ solu.percentage }}</div>
                     </div>
                     <div class="solu_name">
@@ -57,60 +55,48 @@
         percentage: '50%',
         color:"#cf67e7"
     },{
-        id : 1,
+        id : 6,
         name: '硫酸',
         percentage: '10%',
         color:"#cf67e7"
     },{
-        id : 2,
+        id : 7,
         name: '硫酸',
         percentage: '20%',
         color:"#07a16e"
     },{
-        id : 3,
+        id : 8,
         name: '硫酸',
         percentage: '30%',
-    },{
-        id : 4,
-        name: '硫酸',
-        percentage: '40%',
-        color:"#cf67e7"
-    },{
-        id : 5,
-        name: '硫酸',
-        percentage: '50%',
-        color:'#3586c6'
     }])
 
 </script>
 <style lang="css" scoped>
-    .container{
+    .liquid{
         background: #EEEFF8;
-        width: 1200px;
-        height: 900px;
+        width: 680px;
+        height: 690px;
         
-        .waster_pos{
+        .liquid_pos{
             position: relative;
             width: 100px;
-            height: 150px;
-            margin: 50px 60px;
+            height: 116px;
+            margin-top: 36px;
+            margin-left: 50px;
         }
-        .waster_status{
+        .liquid_status{
             height: 29px;
             font-family: Source Han Sans;
             font-size: 30px;
             font-weight: 500;
             color: #40474E;
-            padding-left: 26px;
             padding-top: 19px;
         }
 
         .contail_percentage{
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
+            width: 83px;
+            height: 116px;
             background-image: url('@/assets/container.svg');
             background-size: cover;
             background-position: center;
@@ -118,11 +104,10 @@
             border-radius: 10px;
         }
 
-        .liquid {
+        .liquid_percent {
             position: absolute;
             bottom: 0;
-            left: 0;
-            width: 100%;
+            width: 83px;
             background-color: blue;
             opacity: 0.5;
             z-index: 2;
@@ -135,14 +120,13 @@
             font-weight: 500;
             color: #9E9E9E;
             margin-left: 45px;
-            margin-top: -35px;
         }
     }
     .solu_list{
         display: flex;    
         justify-content: center;
         flex-wrap: wrap;
-        margin-top: 50px;
+        gap:2px
     }
 
     .solu_name{
@@ -151,7 +135,6 @@
         font-weight: 500;
         color: #9E9E9E;
         margin-left: 65px;
-        margin-top: -35px;
     }
 
     .percent_num{
diff --git a/src/views/graphite/components/TakePickture.vue b/src/views/graphite/components/TakePickture.vue
index d011854..cf80288 100644
--- a/src/views/graphite/components/TakePickture.vue
+++ b/src/views/graphite/components/TakePickture.vue
@@ -1,23 +1,54 @@
 <template>
-    <div class="picture">
-        <van-button class="area">拍照</van-button>
-            
+    <div class="graphite_right">
+        <div class="picture">
+            <div class="area">
+                <div class="area_btn">
+                    <img :src="PhotoSvg" class="photo_icon"/>
+                    拍照
+                </div>
+            </div>
+        </div>
     </div>
+    
 </template>
 <script lang="ts" setup>
-
+    import PhotoSvg from '@/assets/photo_icon.svg'
 </script>
 <style scoped>
+    .graphite_right{
+        width: 1040px;
+        display: flex;
+        justify-content: center;
+    }
+
     .picture{
-        height: 820px;
+        height: 726px;
+        width: 911px;
         background-image: url('@/assets/picture.svg');
         background-repeat: no-repeat;
+        margin-top:100px;
     }
+    
     .area{
-        margin-left: 80%;
-        margin-top: 760px;
+        background: rgba(255, 255, 255, 0.5);
         font-size: 26px;
-        width: 130px;
-        
+        width: 911px;
+        height: 126px;
+        position: absolute;
+        margin-top: 600px;
+        .area_btn{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 126px;
+            font-size: 42px;
+            font-weight: bold;
+            color: #FFFFFF;
+            gap:10px;
+            .photo_icon{
+                width: 51px;
+                height: 38px;
+            }
+        }
     }
 </style>
\ No newline at end of file
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index 697b8d7..b2e4279 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="graphite_home" id="home">
+    <div class="graphite_home component-page">
         <div class="heat_area">
             <div v-for="item in heatList" :key="item">
                 <HeatPosition :heatInfo="item"></HeatPosition>
@@ -7,13 +7,10 @@
         </div>
         <!--拍照区-->
         <div class="pickture_area">
-            <div class="pickture">
-                <TakePickture></TakePickture>
-            </div>
+            <TakePickture></TakePickture>
             <!--操作区-->
             <div class="graphite_btn">
-                <div><van-button size="large" class="btn_size" style="width: 840px;">开门</van-button></div>
-                <br/>
+                <div><van-button size="large" class="btn_size open">开门</van-button></div>
                 <van-row class="graphite_operate">
                     <van-col span="11">
                         <van-button  size="large" class="btn_size">开始任务</van-button>
@@ -22,7 +19,6 @@
                         <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>
@@ -31,7 +27,6 @@
                         <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>
@@ -40,9 +35,8 @@
                         <van-button  size="large" class="btn_size">摇匀</van-button>
                     </van-col>
                 </van-row>
-                <br/>
                 <van-row class="graphite_operate">
-                    <van-col span="7">
+                    <van-col style="width:306px">
                         <van-button  size="large" class="btn_size">移至加热</van-button>
                     </van-col>
                     <van-col span="7">
@@ -52,7 +46,6 @@
                         <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>
@@ -90,20 +83,15 @@
     .graphite_home{
         display: flex;
         background: #F6F6F6;
-        height: 1840px;
-        width: 2800px;
-        
     }
     .heat_area{
         width: 1268px;
-        height: 1586px;
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         margin: 5px;
         gap: 20px;
         flex-direction: row;
-        padding-top:10px;
         padding-bottom: 100px;
         background: #FFFFFF;
         border-radius: 20px;
@@ -111,17 +99,15 @@
 
     .pickture_area{
         width: 1040px;
-        height: 1586px;
         margin: 5px;
         margin-left: 20px;
         background: #FFFFFF;
-        padding: 50px;
         border-radius: 20px;
     }
 
     .graphite_btn{
-        padding-top: 50px;
-        margin-left: 30px;
+        margin-left: 68px;
+        margin-top: 2rem;
     }
 
     .btn_size{
@@ -129,10 +115,16 @@
         height: 80px;
         color: #1989FA;
         border: 3px solid #1989FA;
+        
+    }
+
+    .open{
+        width: 906px;
     }
 
     .graphite_operate{
-        gap: 40px;
+        gap: 15px;
+        padding-top:30px;
     }
 
     .waste{