LargeBoard.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <div class="large-board flex justify-around flex-col" :class="`large-board-${type}`">
  4. <div>
  5. <slot name="label">{{ label }}</slot>
  6. </div>
  7. <div class="large-board__value">
  8. <slot name="value">{{ value }}</slot>
  9. </div>
  10. </div>
  11. </template>
  12. <script lang="ts" setup>
  13. /** 宽高固定 158 * 93 */
  14. withDefaults(
  15. defineProps<{
  16. label: string;
  17. value?: string;
  18. /** 背景图的类型 'to-top-right' | 'to-bottom-right' */
  19. type: string;
  20. }>(),
  21. {
  22. value: '/',
  23. }
  24. );
  25. defineEmits(['click']);
  26. </script>
  27. <style lang="less" scoped>
  28. @import '@/design/vent/color.less';
  29. @font-face {
  30. font-family: 'douyuFont';
  31. src: url('@/assets/font/douyuFont.otf');
  32. }
  33. .large-board {
  34. font-size: 16px;
  35. height: 93px;
  36. width: 158px;
  37. padding: 10px;
  38. box-sizing: border-box;
  39. background-size: 100% 100%;
  40. }
  41. .large-board-to-top-right {
  42. background: url('@/assets/images/company/list-item-7.png') no-repeat center;
  43. }
  44. .large-board-to-bottom-right {
  45. background: url('@/assets/images/company/list-item-8.png') no-repeat center;
  46. }
  47. .large-board__value {
  48. font-size: 20px;
  49. font-family: douyuFont;
  50. color: @vent-gas-primary-text;
  51. }
  52. </style>