operate.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <!-- 操作板块 -->
  3. <div class="commonTitle">操作</div>
  4. <div class="body">
  5. <div class="operateBox">
  6. <span class="opeateText">物料流转</span>
  7. <el-icon :size="30">
  8. <CirclePlus />
  9. </el-icon>
  10. </div>
  11. <div class="operateBox">
  12. <span class="opeateText">物料流转</span>
  13. <el-icon :size="30">
  14. <CirclePlus />
  15. </el-icon>
  16. </div>
  17. <div class="operateBox">
  18. <span class="opeateText">物料流转</span>
  19. <el-icon :size="30">
  20. <CirclePlus />
  21. </el-icon>
  22. </div>
  23. </div>
  24. </template>
  25. <script lang="ts" setup>
  26. import { reactive, ref } from "vue";
  27. </script>
  28. <style lang="scss" scoped>
  29. .body {
  30. width: 100%;
  31. height: 250px;
  32. .operateBox {
  33. height: 76px;
  34. width: 100%;
  35. margin-bottom: 10px;
  36. background-color: white;
  37. border-radius: 16px;
  38. display: flex;
  39. align-items: center;
  40. justify-content: space-between;
  41. padding: 0 20px;
  42. .opeateText {
  43. font-size: $f24;
  44. }
  45. }
  46. }
  47. </style>