36 lines
914 B
Vue
36 lines
914 B
Vue
<!--单独的背景颜色渐变、宽高100%的内容展示方块组件-->
|
|
<template>
|
|
<el-card shadow="always" class="single-square-box" :style="{background: 'linear-gradient(180deg, '+data.bgColor+' 0%,rgba(255,255,255,0) 100%)'}">
|
|
<div class="single-square-box-title">{{ data.title }}</div>
|
|
<div class="single-square-box-value">{{ data.value | formatNumber }}</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.single-square-box{
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
color:#666666;
|
|
text-align: left;
|
|
.single-square-box-title{
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
.single-square-box-value{
|
|
font-size: 26px;
|
|
line-height: 26px;
|
|
font-weight: 500;
|
|
}
|
|
::v-deep .el-card__body{
|
|
padding: 12px 16px;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
props: ['data'],
|
|
}
|
|
</script>
|