You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.4 KiB
101 lines
2.4 KiB
<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>
|