You've already forked template-MP
74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
<template>
|
|
<view class="card" :class="{ 'card--shadow': shadow, 'card--border': border }">
|
|
<view class="card__header" v-if="title || $slots.header">
|
|
<slot name="header">
|
|
<view class="card__title">{{ title }}</view>
|
|
</slot>
|
|
</view>
|
|
<view class="card__body">
|
|
<slot></slot>
|
|
</view>
|
|
<view class="card__footer" v-if="$slots.footer">
|
|
<slot name="footer"></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 定义props
|
|
defineProps({
|
|
// 卡片标题
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 是否显示阴影
|
|
shadow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否显示边框
|
|
border: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
|
|
// 阴影样式
|
|
&--shadow {
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
// 边框样式
|
|
&--border {
|
|
border: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
&__header {
|
|
padding: 24rpx 32rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
&__body {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
&__footer {
|
|
padding: 24rpx 32rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
}
|
|
}
|
|
</style> |