78 lines
1.3 KiB
Vue
78 lines
1.3 KiB
Vue
<template>
|
|
<view class="coust-chart box-shadow" :style="{
|
|
height: props.height>0?`${props.height}rpx`:'auto',
|
|
background: props.bgColor,
|
|
margin: props.margin,
|
|
padding: props.padding
|
|
}">
|
|
<view v-if="props.title" class="coust-chart-tit" :style="{
|
|
color: props.titFontColor,
|
|
borderBottom: props.showTitLine?'1rpx solid var(--u-border-color)':'none'
|
|
}">{{props.title}}</view>
|
|
<view v-show="props.loading" class="coust-loading" >
|
|
<u-loading size="40" mode="flower"></u-loading>
|
|
</view>
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
defineProps
|
|
} from 'vue';
|
|
const props = defineProps({
|
|
height: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
margin: {
|
|
type: String,
|
|
default: '0'
|
|
},
|
|
padding: {
|
|
type: String,
|
|
default: '20rpx'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// titFontSize: {
|
|
|
|
// },
|
|
titFontColor: {
|
|
type: String,
|
|
default: '#333333'
|
|
},
|
|
showTitLine:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.coust-chart {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
&-tit {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.coust-loading{
|
|
position: absolute;
|
|
left: 50%;transform: translate(-50%,-50%);
|
|
top: 50%;
|
|
}
|
|
}
|
|
</style> |