31 lines
977 B
Vue
31 lines
977 B
Vue
<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 scoped>
|
|
.ep-card { background: #fff; border-radius: 12rpx; overflow: hidden; border: 1rpx solid #eee }
|
|
.is-always-shadow { box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.06) }
|
|
.is-hover-shadow { box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.06) }
|
|
.is-no-shadow { box-shadow: none }
|
|
.ep-card__header { padding: 12rpx 16rpx; border-bottom: 1rpx solid #f0f0f0 }
|
|
.ep-card__body { padding: 12rpx 16rpx }
|
|
</style>
|