LargeBoard.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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/theme.less';
  29. @import '/@/design/theme.less';
  30. @font-face {
  31. font-family: 'douyuFont';
  32. src: url('@/assets/font/douyuFont.otf');
  33. }
  34. .large-board {
  35. font-size: 16px;
  36. height: 93px;
  37. width: 158px;
  38. padding: 10px;
  39. box-sizing: border-box;
  40. background-size: 100% 100%;
  41. }
  42. .large-board-to-top-right {
  43. background: url('@/assets/images/company/list-item-7.png') no-repeat center;
  44. }
  45. .large-board-to-bottom-right {
  46. background: url('@/assets/images/company/list-item-8.png') no-repeat center;
  47. }
  48. .large-board__value {
  49. font-size: 20px;
  50. font-family: douyuFont;
  51. color: @vent-gas-primary-text;
  52. }
  53. </style>