58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="container" :style="{backgroundImage: `url(${props.bg})`}">
|
||
|
|
<div class="top">{{ props.title }}</div>
|
||
|
|
<div class="bottom">
|
||
|
|
<div class="left">{{ props.value }}</div>
|
||
|
|
<div class="right">{{ props.unit }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {ref, defineProps} from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
bg: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: '标题'
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
unit: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
.container
|
||
|
|
display flex
|
||
|
|
flex-direction column
|
||
|
|
justify-content space-between
|
||
|
|
width 200px
|
||
|
|
height 55px
|
||
|
|
padding 5px 30px
|
||
|
|
background-repeat no-repeat
|
||
|
|
background-size 100% 100%
|
||
|
|
color #FFFFFF
|
||
|
|
.top
|
||
|
|
font-size 18px
|
||
|
|
font-weight bold
|
||
|
|
.bottom
|
||
|
|
display flex
|
||
|
|
justify-content space-between
|
||
|
|
align-items center
|
||
|
|
height 30px
|
||
|
|
.left
|
||
|
|
font-size 22px
|
||
|
|
.right
|
||
|
|
font-size 14px
|
||
|
|
</style>
|