graphite_vue/src/views/graphite/components/CarfList.vue

<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>