94 lines
1.8 KiB
Plaintext
94 lines
1.8 KiB
Plaintext
<template>
|
|
<view class="admin-card" :class="cardClass">
|
|
<view class="card-header" v-if="title || $slots.header">
|
|
<view class="card-title-section">
|
|
<text class="card-title">{{ title }}</text>
|
|
<view class="card-extra" v-if="$slots.extra">
|
|
<slot name="extra"></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-body">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { computed } from 'vue'
|
|
|
|
// Props
|
|
const props = defineProps<{
|
|
title?: string
|
|
bordered?: boolean
|
|
shadow?: string
|
|
bodyStyle?: Record<string, any>
|
|
}>()
|
|
|
|
// Computed
|
|
const cardClass = computed(() => {
|
|
return {
|
|
'card-bordered': props.bordered !== false,
|
|
'card-shadow': props.shadow !== 'none',
|
|
'card-shadow-small': props.shadow === 'small',
|
|
'card-shadow-medium': props.shadow === 'medium',
|
|
'card-shadow-large': props.shadow === 'large'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.admin-card {
|
|
background: #fff;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
|
|
&.card-bordered {
|
|
border: 1rpx solid #e8e8e8;
|
|
}
|
|
|
|
&.card-shadow {
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
|
|
|
&.card-shadow-small {
|
|
box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
&.card-shadow-medium {
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
&.card-shadow-large {
|
|
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-header {
|
|
padding: 24rpx 32rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.card-title-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #262626;
|
|
margin: 0;
|
|
}
|
|
|
|
.card-extra {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 32rpx;
|
|
}
|
|
</style> |