12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <!-- eslint-disable vue/multi-word-component-names -->
- <template>
- <div class="large-board flex justify-around flex-col" :class="`large-board-${type}`">
- <div>
- <slot name="label">{{ label }}</slot>
- </div>
- <div class="large-board__value">
- <slot name="value">{{ value }}</slot>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- /** 宽高固定 158 * 93 */
- withDefaults(
- defineProps<{
- label: string;
- value?: string;
- /** 背景图的类型 'to-top-right' | 'to-bottom-right' */
- type: string;
- }>(),
- {
- value: '/',
- }
- );
- defineEmits(['click']);
- </script>
- <style lang="less" scoped>
- @import '@/design/vent/color.less';
- @font-face {
- font-family: 'douyuFont';
- src: url('@/assets/font/douyuFont.otf');
- }
- .large-board {
- font-size: 16px;
- height: 93px;
- width: 158px;
- padding: 10px;
- box-sizing: border-box;
- background-size: 100% 100%;
- }
- .large-board-to-top-right {
- background: url('@/assets/images/company/list-item-7.png') no-repeat center;
- }
- .large-board-to-bottom-right {
- background: url('@/assets/images/company/list-item-8.png') no-repeat center;
- }
- .large-board__value {
- font-size: 20px;
- font-family: douyuFont;
- color: @vent-gas-primary-text;
- }
- </style>
|