From 3349a3f809366cf855942eb67b656d2166ce749d Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Fri, 14 Feb 2025 19:13:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A6=96=E9=A1=B5=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/out.svg                             |   1 +
 src/assets/pwd.svg                             |   1 +
 src/views/addLiquid/index.vue                  |  21 +++--
 src/views/components/Header.vue                |  36 +++++++-
 src/views/components/UpdatePwd.vue             | 113 +++++++++++++++++++++++++
 src/views/graphite/components/AddLiquid.vue    |   7 +-
 src/views/graphite/components/HeatPosition.vue |  10 +--
 7 files changed, 171 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/out.svg
 create mode 100644 src/assets/pwd.svg
 create mode 100644 src/views/components/UpdatePwd.vue

diff --git a/src/assets/out.svg b/src/assets/out.svg
new file mode 100644
index 0000000..dc19d14
--- /dev/null
+++ b/src/assets/out.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="42" height="43" viewBox="0 0 42 43"><g><g><path d="M23.9012,26.80821171875L23.5184,26.80821171875C19.5186,26.80821171875,15.5189,26.80861171875,11.519,26.80821171875C10.926,26.80801171875,10.5396,26.52971171875,10.4443,26.03191171875C10.4255,25.93251171875,10.4273,25.82801171875,10.4273,25.72631171875C10.4266,22.08721171875,10.4265,18.44831171875,10.4268,14.80931171875C10.4269,14.11901171875,10.792,13.75181171875,11.4767,13.75181171875C15.4946,13.75161171875,19.5126,13.75161171875,23.5307,13.75161171875L23.9012,13.75161171875L23.9012,13.42041171875C23.9012,10.18168171875,23.9008,6.94273171875,23.9016,3.70375171875C23.9016,3.25804771875,24.1092,2.90257571875,24.4607,2.76641631875C24.8652,2.60961481875,25.224,2.68183999875,25.5289,3.01164571875C25.7037,3.20077071875,25.8941,3.3747387187499998,26.0736,3.55867171875C28.3386,5.87259171875,30.6032,8.18756171875,32.8676,10.50147171875C35.7762,13.47271171875,38.6848,16.44331171875,41.5933,19.41441171875C42.0776,19.90851171875,42.0802,20.42981171875,41.6017,20.91861171875C37.4394,25.17281171875,33.2774,29.42731171875,29.1138,33.67981171875C27.9297,34.88921171875,26.7392,36.09131171875,25.5561,37.30171171875C25.2516,37.61371171875,24.912,37.75041171875,24.4963,37.58871171875C24.092,37.43171171875,23.9017,37.10601171875,23.9017,36.59371171875C23.901,33.45751171875,23.9012,30.32081171875,23.9012,27.18461171875L23.9012,26.80821171875L23.9012,26.80821171875ZM16.4243,2.86945471875L16.4243,6.546731718749999L16.0943,6.546731718749999C13.049,6.546731718749999,10.0037,6.54631171875,6.95843,6.54694171875C5.02868,6.54723171875,3.60763,8.00513171875,3.60755,9.98472171875C3.60726,16.83461171875,3.61953,23.68451171875,3.59949,30.53391171875C3.59397,32.34621171875,4.94067,33.65191171875,6.18574,33.89041171875C6.46085,33.94251171875,6.74508,33.96611171875,7.02513,33.96681171875C10.0431,33.97221171875,13.0612,33.970111718750005,16.0793,33.970111718750005L16.4189,33.970111718750005L16.4189,37.62641171875C16.3759,37.63521171875,16.3258,37.65491171875,16.2756,37.65491171875C13.0666,37.65491171875,9.85733,37.68831171875,6.64918,37.64061171875C3.51369,37.59461171875,0.737073,35.15841171875,0.138685,32.005211718750004C0.0542352,31.56101171875,0.0129305,31.10101171875,0.0124397,30.64841171875C0.00466952,23.72381171875,-0.0132019,16.79961171875,0.0166111,9.87552171875C0.0290843,6.98330171875,1.43263,4.90707171875,3.88372,3.55774671875C4.74846,3.08148071875,5.70366,2.86639671875,6.68823,2.86388471875C9.8698,2.85509271875,13.0514,2.86053471875,16.2331,2.86074471875C16.2868,2.86078671875,16.3405,2.86560171875,16.4243,2.86945471875Z" fill="#1989FA" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/pwd.svg b/src/assets/pwd.svg
new file mode 100644
index 0000000..04bb0ea
--- /dev/null
+++ b/src/assets/pwd.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="33.84674835205078" height="39.06831359863281" viewBox="0 0 33.84674835205078 39.06831359863281"><g><path d="M28.8334,16.9571L10.5687,16.9571C10.4126,16.2014,10.3346,15.4318,10.3359,14.6602C10.3359,9.57031,13.6251,5.44513,17.6859,5.44513C21.168,5.44513,24.0835,8.48006,24.8399,12.5562L30.0646,12.5562C29.1611,5.44819,23.9641,0,17.6829,0C10.7677,0,5.16337,6.60887,5.16337,14.7613C5.16337,15.5085,5.21237,16.2435,5.30425,16.9632L5.01331,16.9632C2.24481,16.9632,0,18.7915,0,21.0455L0,34.9891C0,37.2431,2.24481,39.0683,5.01331,39.0683L28.8334,39.0683C31.6019,39.0683,33.8467,37.24,33.8467,34.9891L33.8467,21.0394C33.8467,18.7854,31.6019,16.9571,28.8334,16.9571Z" fill="#1989FA" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/views/addLiquid/index.vue b/src/views/addLiquid/index.vue
index 775feef..c8a80c8 100644
--- a/src/views/addLiquid/index.vue
+++ b/src/views/addLiquid/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="component-page add_liquid_bottle">
-        <div v-for="(corros, index) in corrosionList" class="add_liquid">
+        <div v-for="(corros, index) in corrosionList" class="add_liquid liquid_w">
             <div class="config_title" @click="onChooseLiquid(corros)">
                 <div class="config_name">
                     <div>{{ index + 1 }} {{ corros.name }}</div>
@@ -97,7 +97,6 @@
     const corrosionList = ref(list)
 
     const onChooseLiquid = (item={}) => {
-        console.log('------item--------', item)
         visible.value = true;
         corrosion.value = item;
         chooseAcidDlg.value.showDlg()
@@ -111,23 +110,27 @@
     @use "@/assets/style/mixin.scss" as *;
     .add_liquid_bottle{
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: wrap;    
     }
+    
     .add_liquid{
         background: #F4F9FF;
-        width: 12.875rem;
+        width: 12.5rem;
         height: 13.5rem;
         border:1px solid #275EFB;
         margin-left: 4.25rem;
         margin-top:  5rem;
         border-radius: 10px;
+        @media (min-width: $md) {
+            margin-top: 32px;
+        }
         .config_title{
-            width: 12.875rem;
+            width: 12.5rem;
             height: 2.5rem;
             background: rgba(25, 137, 250, 0.1216);
             padding-top: .5rem;
             .config_name{
-                width: 7.875rem;
+                width: 7.8rem;
                 height: 1.625rem;
                 background: #FFFFFF;
                 margin-left: 2.5rem;
@@ -206,4 +209,10 @@
             border-radius: 6.25rem;
         }
     }
+
+    @media screen and (max-width: 1120px){
+        .add_liquid{
+            margin-left: 20px;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue
index ecb4c1d..038c7a0 100644
--- a/src/views/components/Header.vue
+++ b/src/views/components/Header.vue
@@ -11,18 +11,32 @@
             <img :src="AvatarSvg" width="20px" height="20px"/>
             <div class="user_name" @click="onShowMenu">Admin</div>
             <div class="user_opt" v-show="showUserMenu">
-                <div class="updatePwd">修改密码</div>
-                <div class="login_out">退出登录</div>
+                <div class="updatePwd" @click="onUpdatePwd">
+                    <img :src="PwdSvg" style="width: 1.25rem; height: 1.25rem;" />
+                    修改密码
+                </div>
+                <div class="login_out" @click="onLoginout">
+                    <img :src="OutSvg" style="width: 1.25rem; height: 1.25rem;"/>
+                    退出登录</div>
             </div>
         </div>
+        <OverlayModal :visible="updatePwdVisible">
+            <UpdatePwd @cancel="onCancelUpdate"></UpdatePwd>
+        </OverlayModal>
     </div>
 </template>
 <script lang="ts" setup>
     import logo from '@/assets/logo.svg'
     import AvatarSvg from '@/assets/avatar.svg'
+    import OutSvg from '@/assets/out.svg'
+    import PwdSvg from '@/assets/pwd.svg'
     import { ref, onMounted } from 'vue'
+    import OverlayModal from '@/components/OverlayModal.vue'
+    import UpdatePwd from '../components/UpdatePwd.vue'
     import {eventBus} from '@/eventBus'
+    import { useRouter } from 'vue-router'
     import { getFormattedDateTime } from '@/utils' 
+    const router = useRouter()
     const menuId = ref(0)
     const time = getFormattedDateTime()
     const showUserMenu = ref(false)
@@ -34,9 +48,23 @@
         // })
     })
 
+    const updatePwdVisible = ref(false)
+
+    const onUpdatePwd = () => {
+        updatePwdVisible.value = true;
+    }
+
+    const onLoginout = () => {
+        router.push('/login')
+    }
+
     const onShowMenu = () => {
         showUserMenu.value = !showUserMenu.value;
     }
+
+    const onCancelUpdate = () => {
+        updatePwdVisible.value = false;
+    }
 </script>
 <style lang="scss" scoped>
     @use "@/assets/style/mixin.scss" as *;
@@ -117,7 +145,7 @@
         }
 
         .user_opt{
-            width: 12.25rem;
+            width: 10rem;
             height: 6.25rem;
             position:absolute;
             top:3rem;
@@ -129,6 +157,7 @@
                 display: flex;
                 justify-content: center;
                 margin-top: 1.5rem;
+                gap: 15px;
             }
 
             .login_out{
@@ -137,6 +166,7 @@
                 display: flex;
                 justify-content: center;
                 margin-top: .5rem;
+                gap: 15px;
             }
         }
     }
diff --git a/src/views/components/UpdatePwd.vue b/src/views/components/UpdatePwd.vue
new file mode 100644
index 0000000..48f6359
--- /dev/null
+++ b/src/views/components/UpdatePwd.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="update_pwd">
+        <p class="title">修改密码</p>
+        <section class="update_pwd_main">
+            <div class="newpassword">
+                <div>新密码：</div>
+                <div><input type="text" placeholder="新密码" v-model="new_pwd" class="newpwd_input"/></div>
+            </div>
+            <div class="confirmpassword">
+                <div>确认密码：</div>
+                <div><input type="text" placeholder="确认新密码" v-model="confirm_pwd" class="confirmpwd_input"/></div>
+            </div>
+        </section>
+        <footer class="footer_opt">
+            <button class="ok" @click="onSubmit">确认</button>
+            <button class="cancel" @click="onCancel">取消</button>
+        </footer>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    const new_pwd = ref('')
+    const confirm_pwd = ref('')
+    const emits = defineEmits(['cancel'])
+    const onSubmit = () => {
+
+    }
+
+    const onCancel = () => {
+        emits('cancel')
+    }
+</script>
+<style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
+    .update_pwd{
+        width: 27.5rem;
+        height: 17.125rem;
+        background: #FFFFFF;
+
+        .title{
+            color: #40474E;
+            font-size: 1.25rem;
+            font-weight: 500;
+            margin-top:1.25rem;
+            margin-left: 1.25rem;
+            height: 1.25rem;
+        }
+
+        .update_pwd_main{
+            height: 6.3rem;
+            width: 20rem;
+            margin-top: 2.5rem;
+            margin-left: 2.625rem;
+            font-size: 1.25rem;
+
+            .newpassword{
+                display: flex;
+                margin-left: 1.25rem;
+                align-items: center;
+            }
+
+            .newpwd_input{
+                width: 13rem;
+                border: 2px solid rgb(236, 236, 236);
+                height: 3rem;
+                padding-left: 10px;
+                border-radius: 10px;
+            }
+
+            .confirmpassword{
+                display: flex;
+                margin-top: 1rem;
+                align-items: center;
+            }
+
+            .confirmpwd_input{
+                width: 13rem;
+                border: 2px solid rgb(236, 236, 236);
+                height: 3rem;
+                padding-left: 10px;
+                border-radius: 10px;
+            }
+        }
+
+        .footer_opt{
+            height: 4rem;
+            display: flex;
+            align-items: center;
+            margin-left: 8rem;
+            margin-top: 1rem;
+            .ok{
+                background: #1989FA;
+                font-size: 1.25rem;
+                height: 2.875rem;
+                width: 6.875rem;
+                color: #FFFFFF;
+                align-items: center;
+                border-radius: 10px;
+            }
+
+            .cancel{
+                font-size: 1.25rem;
+                height: 2.875rem;
+                width: 6.875rem;
+                align-items: center;
+                border-radius: 10px;
+                margin-left: 0.5rem;
+                border: 3px solid #1989FA;
+                color: #1989FA;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/graphite/components/AddLiquid.vue b/src/views/graphite/components/AddLiquid.vue
index 9c5e550..ff50238 100644
--- a/src/views/graphite/components/AddLiquid.vue
+++ b/src/views/graphite/components/AddLiquid.vue
@@ -47,7 +47,7 @@
             </div>
         </div>
         <div class="liquid_queue">
-            <van-tag v-for="item in tubeQueue" closeable size="medium" type="primary" @close="delQueueSolution">
+            <van-tag style="height: 2.5rem; border-radius: 10px;margin-left: 10px;" v-for="item in tubeQueue" closeable size="medium" type="primary" @close="delQueueSolution(item)">
                 {{ item.solutionName }}添加{{ item.solutionNum }}ml
             </van-tag>
         </div>
@@ -125,8 +125,8 @@
     }
 
     //删除队列中 试管需要加的溶液
-    const delQueueSolution = () => {
-
+    const delQueueSolution = (data) => {
+        console.log('data===', data)
     }
 
     //溶液添加到试管
@@ -281,6 +281,7 @@
         display: flex;
         height: 4.125rem;
         background: rgba(25, 137, 250, 0.12);
+        align-items: center;
     }
     .liquid_button{
         width: 100%;
diff --git a/src/views/graphite/components/HeatPosition.vue b/src/views/graphite/components/HeatPosition.vue
index f796226..2778e32 100644
--- a/src/views/graphite/components/HeatPosition.vue
+++ b/src/views/graphite/components/HeatPosition.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="heat_main"  :style="`${posIndex === currentIndex && isSelect ? 'border:7px solid #275EFB' : ''}`">
+    <div class="heat_main"  :style="`${posIndex === currentIndex && isSelect ? 'border:7px solid #275EFB' : 'border:7px solid #ffffff'}`">
       <section class="heat_pos_text">
           <div class="pos_text">{{ `A-${posIndex || ''}` }}</div>
           <div class="pos_text pos_state">已放置</div>
@@ -168,11 +168,10 @@
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
-    margin-left: 5px;
+    margin-left: 2px;
     gap: .625rem;
     flex-direction: row;
     border: 2px solid #7592A8;
-    margin-left: .5rem;
     padding-top: .5rem;
     border-radius: 0.5rem;
     
@@ -218,14 +217,13 @@
     margin-left: 5px;
     .heat_temperature{
       height: 1.625rem;
-      width: 10.375rem;
+      width: 10rem;
       background: #FFFFFF;
       box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
       border-radius: 5px;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-left: .375rem;
       .target_temp{
         color: #384D5D;
         font-size: .75rem;
@@ -234,7 +232,7 @@
       .heating{
         color: #FE0A0A;
         font-size: .875rem;
-        margin-left: 2.25rem;
+        margin-left: 1rem;
       }
     }