92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<div class="card-count2-container">
|
|
<div class="top">
|
|
<div class="value">{{ props.value }}</div>
|
|
<div class="title">
|
|
<span>{{ props.title }}</span>
|
|
<span>({{ props.unit }})</span>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="title">
|
|
<div class="name">占比</div>
|
|
<div class="value">{{ props.percent * 100 }}%</div>
|
|
</div>
|
|
<div class="process">
|
|
<div class="value" :style="{width: props.percent * 100 +'px'}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {defineProps} from 'vue';
|
|
|
|
const props = defineProps({
|
|
value: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '标题'
|
|
},
|
|
unit: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
percent: {
|
|
type: Number,
|
|
default: 0.5
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: 'black'
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="stylus" scoped>
|
|
.card-count2-container
|
|
width 140px
|
|
height 120px
|
|
display flex
|
|
flex-direction column
|
|
.top
|
|
display flex
|
|
flex-direction column
|
|
.value
|
|
padding 5px
|
|
text-align center
|
|
font-weight bold
|
|
font-size 22px
|
|
.title
|
|
padding 0 5px
|
|
text-align center
|
|
font-size 14px
|
|
color #FFFFFF
|
|
.bottom
|
|
display flex
|
|
flex-direction column
|
|
align-items center
|
|
margin-top 10px
|
|
padding 0 10px
|
|
.title
|
|
display flex
|
|
justify-content space-between
|
|
font-size 12px
|
|
width 110px
|
|
color #FFFFFF
|
|
.process
|
|
width 110px
|
|
height 20px
|
|
background-color #1b4d70
|
|
position relative
|
|
.value
|
|
position absolute
|
|
width 100px
|
|
height 6px
|
|
top 7px
|
|
left 5px
|
|
background linear-gradient(90deg, #02b1f7, #FFF)
|
|
|
|
</style> |