12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- <!-- eslint-disable vue/multi-word-component-names -->
- <template>
- <div class="card" :style="{ height: `${height}px` }">
- <p class="card_title" @click="alert">
- <slot name="title">{{ title }}</slot>
- </p>
- <div class="card_content" :style="{ height: `${contentHeight}px` }">
- <slot></slot>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- // import mapComponent from './components/3Dmap/index.vue';
- withDefaults(
- defineProps<{
- title: string;
- /** 卡片总体的高度 */
- height?: number;
- /** 卡片内容部分的高度 */
- contentHeight?: number;
- }>(),
- {
- height: 370,
- contentHeight: 300,
- }
- );
- function alert() {
- window.alert('123');
- }
- </script>
- <style lang="less" scoped>
- @font-face {
- font-family: 'douyuFont';
- src: url('@/assets/font/douyuFont.otf');
- }
- .card {
- background: url('@/assets/images/company/area-card4.png') no-repeat;
- background-size: 100% 100%;
- padding: 2px 20px 0 20px;
- text-align: center;
- }
- .card_title {
- margin-top: 10px;
- font-family: 'douyuFont';
- }
- .card_content {
- padding: 10px 0 0 0;
- }
- </style>
|