42 lines
1.0 KiB
Vue
42 lines
1.0 KiB
Vue
<template>
|
|
<view class="card column" :style="cardStyle">
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
width: { type: String, default: '90%' },
|
|
bgColor: { type: String, default: '#FFFFFF' },
|
|
radius: { type: String, default: '10rpx' },
|
|
marginTop: { type: String, default: '20rpx' },
|
|
padding: { type: String, default: '20rpx 0rpx 30rpx 0rpx' },
|
|
boxShadow: { type: Boolean, default: true },
|
|
justify: { type: String, default: 'center' }
|
|
})
|
|
|
|
const cardStyle = computed(() => {
|
|
const style = {
|
|
width: props.width,
|
|
backgroundColor: props.bgColor,
|
|
borderRadius: props.radius,
|
|
margin: `${props.marginTop} auto 0`,
|
|
display: 'flex',
|
|
justifyContent: props.justify
|
|
}
|
|
if (props.padding) {
|
|
style.padding = props.padding
|
|
}
|
|
if (props.boxShadow) {
|
|
style.boxShadow = '0 0 10px 3px rgba(0, 0, 0, 0.1)'
|
|
}
|
|
return style
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|
|
|
|
|