12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <template>
- <div class="board">
- <div class="board__label">
- <slot name="label">
- {{ label }}
- </slot>
- </div>
- <div class="board__value">
- <slot name="value">
- <div class="board__value_txt">
- {{ value }}
- </div>
- </slot>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- // @TODO 对组件的颜色、背景等样式进行修改,符合全局规范
- withDefaults(
- defineProps<{
- /** label(即上侧)内容,可用slot */
- label?: string;
- /** value(即下侧)内容,可用slot */
- value?: string | number;
- }>(),
- {
- label: '',
- value: '',
- }
- );
- </script>
- <style lang="less" scoped>
- @import '@/design/vent/color.less';
- .board {
- background-image: url('/@/assets/images/vent/gas/square-border.png');
- background-repeat: no-repeat;
- background-position: center center;
- background-size: 100% auto;
- width: 162px;
- height: 145px;
- text-align: center;
- color: @white;
- padding: 40px 0;
- }
- .board__value_txt {
- font-size: 24px;
- color: @vent-gas-primary-text;
- font-style: italic;
- }
- </style>
|