From 573fe9b103a499b1b73fe5c2c998edbc4093b5cf Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Tue, 11 Feb 2025 11:53:18 +0800
Subject: [PATCH] rebase master

---
 src/assets/arrow.svg            |   1 +
 src/assets/logo.svg             |   2 +-
 src/assets/style/mixin.scss     |   3 +-
 src/views/addLiquid/index.vue   | 144 +++++++++++++++++++++++++++++++++++++++-
 src/views/components/Header.vue | 117 +++++++++++---------------------
 5 files changed, 185 insertions(+), 82 deletions(-)
 create mode 100644 src/assets/arrow.svg

diff --git a/src/assets/arrow.svg b/src/assets/arrow.svg
new file mode 100644
index 0000000..157995c
--- /dev/null
+++ b/src/assets/arrow.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="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/logo.svg b/src/assets/logo.svg
index 7565660..771b0a2 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="224" height="233" viewBox="0 0 224 233"><g><g><path d="M223.99979977416993,114.45162603759766C223.99979977416993,124.83402603759765,215.86279977416993,133.25062603759767,205.82579977416992,133.25062603759767C195.7877997741699,133.25062603759767,89.86419977416992,119.90242603759765,46.42679977416992,114.45162603759766C95.25419977416992,108.22022603759766,195.7877997741699,95.65262603759766,205.82579977416992,95.65262603759766C215.86279977416993,95.65264605499766,223.99979977416993,104.06923603759766,223.99979977416993,114.45162603759766Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M201.21678225097656,176.92624592285156C201.23438225097658,182.56134592285156,196.82298225097657,187.13904592285155,191.37518225097656,187.13904592285155C185.94078225097655,187.13904592285155,128.59708225097657,179.92384592285157,105.07118225097656,176.95904592285157C131.50778225097656,173.58095592285156,185.94078225097655,166.77894592285156,191.37518225097656,166.77894592285156C196.79818225097657,166.77890588795157,201.19928225097658,171.31673592285156,201.21678225097656,176.92624592285156Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M215.93901684570312,149.52852961425782C215.94201684570314,157.61312961425782,209.60701684570313,164.16892961425782,201.79101684570313,164.16892961425782C193.97901684570314,164.16892961425782,114.44741684570312,153.77242961425782,80.63601684570312,149.52852961425782C118.64531684570312,144.68120961425782,193.97901684570314,134.8947296142578,201.79101684570313,134.8947296142578C209.60501684570312,134.8947296142578,215.93901684570312,141.44651961425782,215.93901684570312,149.52852961425782Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M112.735,0.0000200174C33.3546,-0.0135318,-21.121,82.656,7.90892,159.078C36.9389,235.5,131.249,257.697,189.387,201.791C181.175,201.01,163.001,198.721,131.435,194.661L127.085,194.11C85.6178,216.585,34.3882,200.014,12.688,157.106C-9.01216,114.197,7.04277,61.2171,48.539,38.7996C90.0352,16.382,141.243,33.0249,162.887,75.9634C169.261,88.781,184.624,93.5998,196.807,86.6023C208.989,79.6049,213.157,63.5677,206.008,51.1954C185.072,19.1593,150.118,-0.0260227,112.735,0.0000200174Z" fill="#275EFB" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/style/mixin.scss b/src/assets/style/mixin.scss
index 83d4fda..9c9fae4 100644
--- a/src/assets/style/mixin.scss
+++ b/src/assets/style/mixin.scss
@@ -1 +1,2 @@
-$textGray: #333;
\ No newline at end of file
+$textGray: #333;
+$addLiquidWidth: 410px;//加液配置 card宽度
\ No newline at end of file
diff --git a/src/views/addLiquid/index.vue b/src/views/addLiquid/index.vue
index f4c3a41..4277e9d 100644
--- a/src/views/addLiquid/index.vue
+++ b/src/views/addLiquid/index.vue
@@ -1,3 +1,143 @@
 <template>
-    <div>溶液配置</div>
-</template>
\ No newline at end of file
+    <div class="add_liquid_bottle">
+        <div class="add_liquid">
+            <div class="config_title">
+                <div class="config_name">
+                    <div>1 硝酸</div>
+                    <img :src="ArrowSvg" class="arrow_img"/>
+                </div>
+            </div>
+            <div class="bottle_ml">
+                <div class="liquid_pos">
+                    <div class="contail_percentage"></div>
+                    <div class="liquid_percent bottle_wd"></div>
+                    <div class="percent_num">300ml</div>
+                </div>
+                <div class="ml_name">
+                    300ml
+                </div>
+            </div>
+        </div>
+
+        <div class="add_liquid">
+            <div class="config_title">
+                <div class="config_name">
+                    <div>1 硝酸</div>
+                    <img :src="ArrowSvg" class="arrow_img"/>
+                </div>
+            </div>
+            <div class="bottle_ml">
+                <div class="liquid_pos">
+                    <div class="contail_percentage"></div>
+                    <div class="liquid_percent bottle_wd"></div>
+                    <div class="percent_num">300ml</div>
+                </div>
+                <div class="ml_name">
+                    300ml
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    import ArrowSvg from '@/assets/arrow.svg'
+</script>
+<style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
+    .add_liquid_bottle{
+        display: flex;
+    }
+    .add_liquid{
+        background: #F4F9FF;
+        width: $addLiquidWidth;
+        height: 430px;
+        border:1px solid #275EFB;
+        margin-left: 135px;
+        margin-top:  160px;
+        border-radius: 20px;
+        .config_title{
+            width: $addLiquidWidth;
+            height: 80px;
+            background: rgba(25, 137, 250, 0.1216);
+            padding-top: 16px;
+            .config_name{
+                width: 248px;
+                height: 50px;
+                background: #FFFFFF;
+                margin-left: 80px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                gap: 50px;
+                .arrow_img{
+                    width: 15px;
+                    height: 23px;
+                }
+            }
+        }
+
+        .bottle_ml{
+            
+            .liquid_pos{
+                position: relative;
+                width: 162px;
+                height: 228px;
+                margin-top: 36px;
+                margin-left: 120px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .bottle_wd{
+                    height: 30%;
+                    background-color:red;
+                    width: 162px;
+                }
+            }
+            .liquid_status{
+                height: 29px;
+                font-family: Source Han Sans;
+                font-size: 30px;
+                font-weight: 500;
+                color: #40474E;
+                padding-top: 19px;
+            }
+
+            .contail_percentage{
+                position: absolute;
+                width: 162px;
+                height: 228px;
+                background-image: url('@/assets/container.svg');
+                background-size: cover;
+                background-position: center;
+                z-index: 1;
+                border-radius: 10px;
+            }
+
+            .liquid_percent {
+                position: absolute;
+                bottom: 0;
+                width: 83px;
+                background-color: blue;
+                opacity: 0.5;
+                z-index: 2;
+                border-radius: 0 0 10px 10px;
+            }
+
+            
+        }
+        .percent_num{
+            font-size: 30px;
+            position: relative;
+            z-index: 2;
+        }
+        .ml_name{
+            width: 174px;
+            height: 50px;
+            background: #FFFFFF;
+            margin-left: 120px;
+            text-align: center;
+            margin-top: 15px;
+            border-radius: 195px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue
index 03b723d..68d43cd 100644
--- a/src/views/components/Header.vue
+++ b/src/views/components/Header.vue
@@ -1,111 +1,67 @@
 <template>
     <div class="header">
         <div class="header_logo">
-            <img :src="logo"/>
+            <img :src="logo" class="logo"/>
+            <div>长春黄金研究院有限公司</div>
         </div>
-        <!--时间区-->
-        <div class="header_menu">
+        <div class="header_time">
             {{ 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">
-            <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" size="70"/>
-            <div style="font-size: 30px;">Admin</div>
+            <img :src="AvatarSvg" width="40px" height="40px"/>
+            <div class="user_name">Admin</div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-    import logo from '@/assets/logo.png'
+    import logo from '@/assets/logo.svg'
+    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>
+<style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
     .header{
-        width: 100%;
         display: flex;
         align-items: center;
-
+        background: #e9e9e9;
+        align-items: center;
         height: var(--headerHeight);
         .header_logo{
-            padding:10px 10px;
+            display: flex;
+            font-size: 36px;
+            align-items: center;
+            width: 700px;
+            color: #8799AB;
+            gap: 5px;
+            padding-left: 50px;
+            
+            .logo{
+                height:85px;
+                width:85px;
+            }
         }
         
-        .header_menu{
-            margin-left:12px;
-            width: 361px;
-            padding-top:5px;
+        .header_time{
+            width: 375px;
+            height: 80px;
             font-size: 28px;
-            .header_menu_item{
-                color:#FFFFFF
-            }
+            display: flex;
+            align-items: center;
+            margin-left: 54%;
+            background: white;
+            justify-content: center;
+            border-radius: 10px;
         }
 
         .header_ins{
@@ -140,10 +96,15 @@
         .header_user{
             display: flex;
             align-items: center;
-            width: 25%;
             justify-content: flex-end;
-            padding-right: 20px;
             gap: 5px;
+            margin-left: 30px;            
+
+        }
+
+        .user_name{
+            font-size: 34px;
+            color: #393F46;
         }
     }