squareBoard.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div class="board">
  3. <div class="board__label">
  4. <slot name="label">
  5. {{ label }}
  6. </slot>
  7. </div>
  8. <div class="board__value">
  9. <slot name="value">
  10. <div class="board__value_txt">
  11. {{ value }}
  12. </div>
  13. </slot>
  14. </div>
  15. </div>
  16. </template>
  17. <script setup lang="ts">
  18. // @TODO 对组件的颜色、背景等样式进行修改,符合全局规范
  19. withDefaults(
  20. defineProps<{
  21. /** label(即上侧)内容,可用slot */
  22. label?: string;
  23. /** value(即下侧)内容,可用slot */
  24. value?: string | number;
  25. }>(),
  26. {
  27. label: '',
  28. value: '',
  29. }
  30. );
  31. </script>
  32. <style lang="less" scoped>
  33. @import '@/design/vent/color.less';
  34. .board {
  35. background-image: url('/@/assets/images/vent/gas/square-border.png');
  36. background-repeat: no-repeat;
  37. background-position: center center;
  38. background-size: 100% auto;
  39. width: 162px;
  40. height: 145px;
  41. text-align: center;
  42. color: @white;
  43. padding: 40px 0;
  44. }
  45. .board__value_txt {
  46. font-size: 24px;
  47. color: @vent-gas-primary-text;
  48. font-style: italic;
  49. }
  50. </style>