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.
|
|
<template> <div class="component-page"> <section class="flex items-center h-20 gap-3 pl-3"> <button class="btn-light px-3 py-1 text-xs">添加矿石</button> <button :disabled="opDisable" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">编辑矿石</button> <button class="btn-light px-3 py-1 text-xs">删除矿石</button>
<button class="btn-light px-3 py-1 text-xs ml-12" @click="onAddCraft">添加工艺</button> <button class="btn-light px-3 py-1 text-xs">编辑工艺</button> <button class="btn-light px-3 py-1 text-xs">删除工艺</button> </section>
<section> <header class="h-10 flex items-center bg-[#000]/[0.02] text-xs pr-3 text-text"> <div class="w-10 self-stretch flex justify-center items-center"> <img src="@/assets/Icon-unselect.svg" alt="icon" /> </div> <p class="w-14">序号</p> <p class="w-[18rem]">矿石名称</p> <p>工艺</p> </header> <div class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]"> <div class="w-10 self-stretch flex justify-center items-center"> <img :src="isSelect ? icon_select : icon_unselect" alt="" /> </div> <p class="w-14">1</p> <p class="w-[18rem]">矿石名称1</p> <div class="flex-auto"> <ul class="appearance-none flex items-center gap-x-3 text-sm"> <li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`"> 工艺名称1 </li> <li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`"> 工艺名称2 </li> </ul> </div> </div> </section>
<van-overlay :show="showCraftEditDialog"> <div class="flex justify-center items-center h-full"> <CraftConfig @ok="confirmCraftEdit" @cancel="showCraftEditDialog = false" /> </div> </van-overlay> </div> </template>
<script lang="ts" setup> import CraftConfig from "./components/CraftConfig.vue"; import icon_unselect from "@/assets/Icon-unselect.svg"; import icon_select from "@/assets/Icon-select.svg"; import { ref } from "vue";
const isSelect = ref<boolean>(true); const opDisable = ref<boolean>(true); const showCraftEditDialog = ref<boolean>(false);
function confirmCraftEdit() { showCraftEditDialog.value = false } function onAddCraft() { showCraftEditDialog.value = true } </script>
|