rebase master

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>