石墨仪设备 前端仓库
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.

65 lines
2.3 KiB

6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
  1. <template>
  2. <div class="component-page">
  3. <section class="flex items-center h-20 gap-3 pl-3">
  4. <button class="btn-light px-3 py-1 text-xs">添加矿石</button>
  5. <button :disabled="opDisable" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">编辑矿石</button>
  6. <button class="btn-light px-3 py-1 text-xs">删除矿石</button>
  7. <button class="btn-light px-3 py-1 text-xs ml-12" @click="onAddCraft">添加工艺</button>
  8. <button class="btn-light px-3 py-1 text-xs">编辑工艺</button>
  9. <button class="btn-light px-3 py-1 text-xs">删除工艺</button>
  10. </section>
  11. <section>
  12. <header class="h-10 flex items-center bg-[#000]/[0.02] text-xs pr-3 text-text">
  13. <div class="w-10 self-stretch flex justify-center items-center">
  14. <img src="@/assets/Icon-unselect.svg" alt="icon" />
  15. </div>
  16. <p class="w-14">序号</p>
  17. <p class="w-[18rem]">矿石名称</p>
  18. <p>工艺</p>
  19. </header>
  20. <div class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]">
  21. <div class="w-10 self-stretch flex justify-center items-center">
  22. <img :src="isSelect ? icon_select : icon_unselect" alt="" />
  23. </div>
  24. <p class="w-14">1</p>
  25. <p class="w-[18rem]">矿石名称1</p>
  26. <div class="flex-auto">
  27. <ul class="appearance-none flex items-center gap-x-3 text-sm">
  28. <li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`">
  29. 工艺名称1
  30. </li>
  31. <li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`">
  32. 工艺名称2
  33. </li>
  34. </ul>
  35. </div>
  36. </div>
  37. </section>
  38. <van-overlay :show="showCraftEditDialog">
  39. <div class="flex justify-center items-center h-full">
  40. <CraftConfig @ok="confirmCraftEdit" @cancel="showCraftEditDialog = false" />
  41. </div>
  42. </van-overlay>
  43. </div>
  44. </template>
  45. <script lang="ts" setup>
  46. import CraftConfig from "./components/CraftConfig.vue";
  47. import icon_unselect from "@/assets/Icon-unselect.svg";
  48. import icon_select from "@/assets/Icon-select.svg";
  49. import { ref } from "vue";
  50. const isSelect = ref<boolean>(true);
  51. const opDisable = ref<boolean>(true);
  52. const showCraftEditDialog = ref<boolean>(false);
  53. function confirmCraftEdit() {
  54. showCraftEditDialog.value = false
  55. }
  56. function onAddCraft() {
  57. showCraftEditDialog.value = true
  58. }
  59. </script>