BaseCard.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <div class="card" :style="{ height: `${height}px` }">
  4. <p class="card_title" @click="alert">
  5. <slot name="title">{{ title }}</slot>
  6. </p>
  7. <div class="card_content" :style="{ height: `${contentHeight}px` }">
  8. <slot></slot>
  9. </div>
  10. </div>
  11. </template>
  12. <script lang="ts" setup>
  13. // import mapComponent from './components/3Dmap/index.vue';
  14. withDefaults(
  15. defineProps<{
  16. title: string;
  17. /** 卡片总体的高度 */
  18. height?: number;
  19. /** 卡片内容部分的高度 */
  20. contentHeight?: number;
  21. }>(),
  22. {
  23. height: 370,
  24. contentHeight: 300,
  25. }
  26. );
  27. function alert() {
  28. window.alert('123');
  29. }
  30. </script>
  31. <style lang="less" scoped>
  32. @font-face {
  33. font-family: 'douyuFont';
  34. src: url('@/assets/font/douyuFont.otf');
  35. }
  36. .card {
  37. background: url('@/assets/images/company/area-card4.png') no-repeat;
  38. background-size: 100% 100%;
  39. padding: 2px 20px 0 20px;
  40. text-align: center;
  41. }
  42. .card_title {
  43. margin-top: 10px;
  44. font-family: 'douyuFont';
  45. }
  46. .card_content {
  47. padding: 10px 0 0 0;
  48. }
  49. </style>