diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 3402ee1..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { showToast } from "vant";
-
-defineProps<{
-	msg: string;
-}>();
-const value = ref<number>(50);
-const onChange = (value: number) => showToast("当前值：" + value);
-</script>
-
-<template>
-	<div class="greetings">
-		<h1 class="green">{{ msg }}</h1>
-		<h3>
-			You’ve successfully created a project with
-			<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-			<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-		</h3>
-		<span class="text-lg font-medium">{{ value }}</span>
-		<van-slider class="my-8" :step="0.5" v-model="value" @change="onChange" />
-	</div>
-</template>
-
-<style scoped>
-.greetings {
-	--van-slider-bar-height: 6px;
-	--van-slider-button-width: 32px;
-	--van-slider-button-height: 32px;
-}
-h1 {
-	font-weight: 500;
-	font-size: 2.6rem;
-	position: relative;
-	top: -10px;
-}
-
-h3 {
-	font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-	text-align: center;
-}
-</style>
diff --git a/src/components/OverlayModal.vue b/src/components/OverlayModal.vue
new file mode 100644
index 0000000..d8ca6d0
--- /dev/null
+++ b/src/components/OverlayModal.vue
@@ -0,0 +1,59 @@
+<template>
+    <van-overlay :show="visible" style="z-index: 999;">
+        <div class="overlay_modal" >
+          <slot></slot>
+        </div>
+      </van-overlay>
+</template>
+<script lang="ts" setup>
+    import { ref, onMounted, watch } from "vue"
+    const emits = defineEmits(['confirm', 'changeVisible'])
+
+    const props = defineProps({
+        title:{
+            type: String,
+            default: ''
+        },
+        visible:{
+            type: Boolean,
+            default: false
+        },
+        list:{
+            type: Array,
+            default: ()=>[]
+        },
+        width:{
+            type:String,
+            default:'32rem'
+        },
+        height:{
+            type:String,
+            default:'25rem'
+        },
+        item:{
+            type: Object
+        }
+    })
+
+    const columnsList = ref<any>(props.list)
+
+    const onSubmit = () => {
+        emits('confirm')
+    }
+
+    const onCancel = ()=> {
+        emits("changeVisible", false)
+    }
+</script>
+<style scoped>
+    .overlay_modal{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 12.5rem;
+    }
+    .picker_title{
+        font-size: 2rem;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/views/addLiquid/index.vue b/src/views/addLiquid/index.vue
index 4277e9d..85c2f70 100644
--- a/src/views/addLiquid/index.vue
+++ b/src/views/addLiquid/index.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="add_liquid_bottle">
-        <div class="add_liquid">
-            <div class="config_title">
+    <div class="component-page add_liquid_bottle">
+        <div v-for="(corros, index) in corrosionList" class="add_liquid">
+            <div class="config_title" @click="onChooseLiquid(corros)">
                 <div class="config_name">
-                    <div>1 硝酸</div>
+                    <div>{{ index + 1 }} {{ corros.name }}</div>
                     <img :src="ArrowSvg" class="arrow_img"/>
                 </div>
             </div>
@@ -11,60 +11,126 @@
                 <div class="liquid_pos">
                     <div class="contail_percentage"></div>
                     <div class="liquid_percent bottle_wd"></div>
-                    <div class="percent_num">300ml</div>
+                    <div class="percent_num">{{ corros.ml }}</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
+                    {{ `${corros.ml}/${corros.totalMl}` }}
                 </div>
             </div>
         </div>
+        <choose-acid-dlg ref="chooseAcidDlg"></choose-acid-dlg>
     </div>
 </template>
 <script lang="ts" setup>
+    import { ref } from 'vue'
+    import ChooseAcidDlg from '../components/chooseAcidDlg.vue'
     import ArrowSvg from '@/assets/arrow.svg'
+    interface Corrosion {
+    }
+    const visible  = ref(false)
+    const chooseAcidDlg = ref()
+    const corrosion = ref<Corrosion>()
+    const temp_list = [{
+        text: '硫酸1', 
+        value: '11' 
+    },{
+        text: '硫酸2', 
+        value: '12' 
+    },{
+        text: '硫酸3', 
+        value: '13' 
+    },{
+        text: '硫酸4', 
+        value: '14' 
+    }]
+    const selectList = ref(temp_list)
+    const list = [{
+        name:'硝酸',
+        id: 10,
+        ml: '100ml',
+        color: '#26D574',
+        totalMl: '500ml'
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    }]
+
+    const corrosionList = ref(list)
+
+    const onChooseLiquid = (item={}) => {
+        console.log('------item--------', item)
+        visible.value = true;
+        corrosion.value = item;
+        chooseAcidDlg.value.showDlg()
+    }
+
+    const changeVisible = (value=false) => {
+        visible.value = value;
+    }
 </script>
 <style lang="scss" scoped>
     @use "@/assets/style/mixin.scss" as *;
     .add_liquid_bottle{
         display: flex;
+        flex-wrap: wrap;
     }
     .add_liquid{
         background: #F4F9FF;
         width: $addLiquidWidth;
-        height: 430px;
+        height: 13.5rem;
         border:1px solid #275EFB;
-        margin-left: 135px;
-        margin-top:  160px;
-        border-radius: 20px;
+        margin-left: 4.25rem;
+        margin-top:  5rem;
+        border-radius: 10px;
         .config_title{
             width: $addLiquidWidth;
-            height: 80px;
+            height: 2.5rem;
             background: rgba(25, 137, 250, 0.1216);
-            padding-top: 16px;
+            padding-top: .5rem;
             .config_name{
-                width: 248px;
-                height: 50px;
+                width: 7.875rem;
+                height: 1.625rem;
                 background: #FFFFFF;
-                margin-left: 80px;
+                margin-left: 2.5rem;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -80,32 +146,32 @@
             
             .liquid_pos{
                 position: relative;
-                width: 162px;
-                height: 228px;
+                width: 5.125rem;
+                height: 7.25rem;
                 margin-top: 36px;
-                margin-left: 120px;
+                margin-left: 3.75rem;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 .bottle_wd{
                     height: 30%;
                     background-color:red;
-                    width: 162px;
+                    width: 5.15rem;
                 }
             }
             .liquid_status{
-                height: 29px;
+                height: 1rem;
                 font-family: Source Han Sans;
-                font-size: 30px;
+                font-size: 1rem;
                 font-weight: 500;
                 color: #40474E;
-                padding-top: 19px;
+                padding-top: 20px;
             }
 
             .contail_percentage{
                 position: absolute;
-                width: 162px;
-                height: 228px;
+                width: 5rem;
+                height: 7.125rem;
                 background-image: url('@/assets/container.svg');
                 background-size: cover;
                 background-position: center;
@@ -116,7 +182,7 @@
             .liquid_percent {
                 position: absolute;
                 bottom: 0;
-                width: 83px;
+                width: 2.625rem;
                 background-color: blue;
                 opacity: 0.5;
                 z-index: 2;
@@ -131,13 +197,13 @@
             z-index: 2;
         }
         .ml_name{
-            width: 174px;
-            height: 50px;
+            width: 4.125rem;
+            height: 1.625rem;
             background: #FFFFFF;
-            margin-left: 120px;
+            margin-left: 3.75rem;
             text-align: center;
             margin-top: 15px;
-            border-radius: 195px;
+            border-radius: 6.25rem;
         }
     }
 </style>
\ No newline at end of file
diff --git a/src/views/components/chooseAcidDlg.vue b/src/views/components/chooseAcidDlg.vue
new file mode 100644
index 0000000..cf6b059
--- /dev/null
+++ b/src/views/components/chooseAcidDlg.vue
@@ -0,0 +1,73 @@
+<template>
+    <van-overlay :show="visible" style="z-index: 999;">
+        <div class="overlay_modal" >
+            <div class="overlay_title">液体选择</div>
+            <div class="overlay_content">
+
+            </div>
+            <div class="overlay_btn">
+                <van-button type="primary" class="btn ok">确定</van-button>
+                <van-button class="btn cancel" @click="onCancel">取消</van-button>
+            </div>
+        </div>
+    </van-overlay>
+</template>
+<script lang="ts" setup>
+    import { ref, onMounted, watch, defineExpose } from "vue"
+    
+    const visible = ref(false)
+    const emits = defineEmits(['confirm', 'changeVisible'])
+    const props = defineProps({})
+
+    const showDlg = ()=>{
+        visible.value = true;
+    }
+
+    const onCancel = ()=> {
+        visible.value = false;
+    }
+    defineExpose({
+        showDlg
+    });
+</script>
+<style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
+    .overlay_modal{
+        width:56.25rem;
+        height: 32.5rem;
+        margin-left: 19.75rem;
+        margin-top: 12.5rem;
+        background: #ffffff;
+
+        .overlay_content{
+            width: 53.125rem;
+            height: 23.125rem;
+        }
+
+        .overlay_title{
+            width: 8.5rem;
+            height: 1.875rem;
+            padding-left: 1.5rem;
+            padding-top: 1.875rem;
+            font-size: 1.25rem;
+        }
+
+        .overlay_btn{
+            .btn{
+                width: 13.625rem;
+                height: 2.875rem;
+                font-size: 1.25rem;
+                
+            }
+
+            .ok{
+                margin-left: 14.375rem;
+            }
+
+            .cancel{
+                margin-left: 2.375rem;
+            }
+
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/graphite/components/AddWaste.vue b/src/views/graphite/components/AddLiquid.vue
similarity index 100%
rename from src/views/graphite/components/AddWaste.vue
rename to src/views/graphite/components/AddLiquid.vue
diff --git a/src/views/graphite/components/CarfList.vue b/src/views/graphite/components/CarfList.vue
new file mode 100644
index 0000000..c99e26f
--- /dev/null
+++ b/src/views/graphite/components/CarfList.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="carf">
+        <div class="carf_title">选择工艺</div>
+        <div>
+            <div class="carf_column_name">工艺名称</div>
+            <div v-for="item in list" class="carf_item" @click="onChooseCarf(item)">
+                <div :style="`background: ${currentItem?.id == item.id ? activeColor : ''}`" class="carf_li">{{ item.name }}</div>
+            </div>
+        </div>
+        <div class="overlay_btn">
+            <van-button type="primary" class="btn ok">确定</van-button>
+            <van-button class="btn cancel" @click="onCancel">取消</van-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref, onMounted } from 'vue'
+    const currentItem = ref()
+    const activeColor = ref('#ffffff')
+    const list = ref()
+    const emits = defineEmits(['changeVisible'])
+    onMounted(()=>{
+        list.value = [{
+            id: 10,
+            name: '硫酸溶解法1'
+        },{
+            id: 20,
+            name: '硫酸溶解法2'
+        },{
+            id: 30,
+            name: '硫酸溶解法3'
+        }]
+    })
+
+    const onChooseCarf = (data:any) => {
+        activeColor.value = '#d9d9d9'
+        currentItem.value = data
+    }
+
+    const onCancel = () => {
+        emits('changeVisible')
+    }
+</script>
+
+<style lang="scss" scoped>
+    .carf{
+        height: 27.5rem;
+        width: 23.75rem;
+        background: #ffffff;
+
+        .carf_title{
+            width: 5.25rem;
+            height: 1.875rem;
+            margin-left: 1.25rem;
+            margin-top: 1.875rem;
+            color: #40474E;
+            font-weight: 500;
+            font-size: 1.25rem;
+        }
+        
+    }
+
+    .carf_column_name{
+        width: 5rem;
+        height: 1.875rem;
+        color: rgba(0, 0, 0, 0.85);
+        margin-left: 2rem;
+        margin-top: .625rem;
+    }
+
+    .carf_item{
+        .carf_li{
+            display: flex;
+            align-items: center;
+            width: 23.75rem;
+            height: 3.125rem;
+            padding-left: 1.875rem;
+            font-size: 1.25rem;
+            color: rgba(0, 0, 0, 0.85);
+        }
+    }
+
+    .overlay_btn{
+        .btn{
+            width: 6.875rem;
+            height: 2.875rem;
+            font-size: 1.25rem;
+            margin-top: 6.875rem;
+        }
+
+        .ok{
+            margin-left: 5rem;
+        }
+
+        .cancel{
+            margin-left: 2.375rem;
+        }
+
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/graphite/components/HeatPosition.vue b/src/views/graphite/components/HeatPosition.vue
index 7b7099a..1f52ec3 100644
--- a/src/views/graphite/components/HeatPosition.vue
+++ b/src/views/graphite/components/HeatPosition.vue
@@ -62,8 +62,6 @@
       formulaVisible.value = true;
       formulaList.value = [{ text: '硫酸', value: '1' }]
       formulaList.value.push({ text: '硫酸', value: '1' })
-      console.log('----------选择配方-----------')
-
     }
 
     const onConfirmFormula = (value:any) => {
diff --git a/src/views/graphite/components/index.ts b/src/views/graphite/components/index.ts
index 6874727..6a67c69 100644
--- a/src/views/graphite/components/index.ts
+++ b/src/views/graphite/components/index.ts
@@ -1,4 +1,4 @@
 
 export {default as HeatPosition} from './HeatPosition.vue'
 export {default as TakePickture} from './TakePickture.vue'
-export { default as AddWaste} from './AddWaste.vue'
+export { default as AddLiquid} from './AddLiquid.vue'
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index b2e4279..0222997 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -21,15 +21,15 @@
                 </van-row>
                 <van-row class="graphite_operate">
                     <van-col span="11">
-                        <van-button  size="large" class="btn_size">选择配方</van-button>
+                        <van-button  size="large" class="btn_size" @click="onChooseCaft">选择工艺</van-button>
                     </van-col>
                     <van-col span="11">
-                        <van-button  size="large" class="btn_size">执行配方</van-button>
+                        <van-button  size="large" class="btn_size">执行工艺</van-button>
                     </van-col>
                 </van-row>
                 <van-row class="graphite_operate">
                     <van-col span="11">
-                        <van-button  size="large" class="btn_size" @click="onAddWaste">添加溶液</van-button>
+                        <van-button  size="large" class="btn_size" @click="onAddLiquid">添加溶液</van-button>
                     </van-col>
                     <van-col span="11">
                         <van-button  size="large" class="btn_size">摇匀</van-button>
@@ -57,25 +57,38 @@
 
             </div>
         </div>
-        <van-overlay :show="wasteVisible" style="z-index: 999;">
+        <van-overlay :show="liquidVisible" style="z-index: 999;">
             <div class="waste">
-                <div class="addWaste">
-                    <AddWaste @cancel="wasteVisible=false"></AddWaste>
+                <div class="addLiquid">
+                    <AddLiquid @cancel="liquidVisible=false"></AddLiquid>
                 </div>
             </div>
         </van-overlay>
+        <!--选择工艺-->
+        <OverlayModal :visible="carfVisible">
+            <CarfList @changeVisible="changeVisible"></CarfList>
+        </OverlayModal>
     </div>
 </template>
 <script lang="ts" setup>
     import { ref } from 'vue';
-    import {HeatPosition, TakePickture, AddWaste} from './components'
-
+    import {HeatPosition, TakePickture, AddLiquid} from './components'
+    import OverlayModal from '@/components/OverlayModal.vue';
+    import CarfList from './components/CarfList.vue';
     const heatList:any = ref([1,2,3,4,5,6])
-
+    const carfVisible = ref(false)
     //添加溶液
-    const wasteVisible = ref(false)
-    const onAddWaste = () => {
-        wasteVisible.value = true;
+    const liquidVisible = ref(false)
+    const onAddLiquid = () => {
+        liquidVisible.value = true;
+    }
+
+    const changeVisible = () => {
+        carfVisible.value = false;
+    }
+    //选择工艺
+    const onChooseCaft = () => {
+        carfVisible.value = true;
     }
 </script>
 <style>
@@ -85,7 +98,7 @@
         background: #F6F6F6;
     }
     .heat_area{
-        width: 1268px;
+        width: 79.25rem;
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
@@ -98,33 +111,33 @@
     }
 
     .pickture_area{
-        width: 1040px;
+        width: 65rem;
         margin: 5px;
-        margin-left: 20px;
+        margin-left: 1.25rem;
         background: #FFFFFF;
         border-radius: 20px;
     }
 
     .graphite_btn{
-        margin-left: 68px;
+        margin-left: 2.125rem;
         margin-top: 2rem;
     }
 
     .btn_size{
-        font-size: 30px;
-        height: 80px;
+        font-size: .9375rem;
+        height: 2.5rem;
         color: #1989FA;
         border: 3px solid #1989FA;
         
     }
 
     .open{
-        width: 906px;
+        width: 28.125rem;
     }
 
     .graphite_operate{
-        gap: 15px;
-        padding-top:30px;
+        gap: 10px;
+        padding-top:1rem;
     }
 
     .waste{
@@ -133,7 +146,7 @@
         width: 100%;
         height: 100%;
         align-items: center;
-        .addWaste{
+        .addLiquid{
             width: 2250px;
             height: 1235px;
             background: #FFFFFF;
diff --git a/src/views/liquidConfig/index.vue b/src/views/liquidConfig/index.vue
index f4c3a41..99b7bb0 100644
--- a/src/views/liquidConfig/index.vue
+++ b/src/views/liquidConfig/index.vue
@@ -1,3 +1,3 @@
 <template>
-    <div>溶液配置</div>
+    <div class="component-page">溶液配置</div>
 </template>
\ No newline at end of file