56 lines
1.2 KiB
Vue
Executable File
56 lines
1.2 KiB
Vue
Executable File
<template>
|
||
<view class="ep-card" :class="shadowClass">
|
||
<view v-if="$slots.header" class="ep-card__header">
|
||
<slot name="header" />
|
||
</view>
|
||
<view class="ep-card__body">
|
||
<slot />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
const props = defineProps({ shadow: { type: String, default: 'always' } })
|
||
const shadowClass = computed(() => {
|
||
const s = String(props.shadow || '').toLowerCase()
|
||
if (s === 'hover') return 'is-hover-shadow'
|
||
if (s === 'never') return 'is-no-shadow'
|
||
return 'is-always-shadow'
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ep-card {
|
||
background: $bg-card;
|
||
border: 1rpx solid $border-color-light;
|
||
border-radius: $radius-lg;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.is-always-shadow {
|
||
box-shadow: $shadow-sm;
|
||
}
|
||
|
||
.is-hover-shadow {
|
||
/* 在移动端hover效果不如PC明显，这里可以处理为点击态 */
|
||
box-shadow: $shadow-sm;
|
||
}
|
||
|
||
.is-no-shadow {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.ep-card__header {
|
||
padding: $spacing-sm $spacing-md;
|
||
border-bottom: 1rpx solid $border-color-light;
|
||
font-weight: 600;
|
||
color: $text-main;
|
||
}
|
||
|
||
.ep-card__body {
|
||
padding: $spacing-md;
|
||
}
|
||
</style>
|