93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<div class="left" v-if="props.icon">
|
||
|
|
<img :src="props.icon"/>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<div class="top">
|
||
|
|
<div class="title">{{ props.title }}</div>
|
||
|
|
<div class="sub-title">{{ props.value }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom">
|
||
|
|
<div class="process">
|
||
|
|
<div class="value" :style="{width: (props.process * 300) + 'px'}"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, defineProps } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
icon: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: 'rgba(0, 0, 255)'
|
||
|
|
},
|
||
|
|
bgColor: {
|
||
|
|
type: String,
|
||
|
|
default: 'rgba(0, 0, 255, 0.3)'
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: '标题'
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
type: String,
|
||
|
|
default: '0'
|
||
|
|
},
|
||
|
|
process: {
|
||
|
|
type: Number,
|
||
|
|
default: 0.8
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const color = ref(props.color)
|
||
|
|
const bgColor = ref(props.bgColor)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
.container
|
||
|
|
display flex
|
||
|
|
.left
|
||
|
|
margin-right 10px
|
||
|
|
img
|
||
|
|
width 50px
|
||
|
|
height 50px
|
||
|
|
.right
|
||
|
|
display flex
|
||
|
|
flex-direction column
|
||
|
|
.top
|
||
|
|
display flex
|
||
|
|
justify-content space-between
|
||
|
|
align-items center
|
||
|
|
height 22px
|
||
|
|
margin 5px 0
|
||
|
|
.title
|
||
|
|
font-size 16px
|
||
|
|
.sub-title
|
||
|
|
font-size 12px
|
||
|
|
color v-bind(color)
|
||
|
|
.bottom
|
||
|
|
width 300px
|
||
|
|
.process
|
||
|
|
background-color v-bind(bgColor)
|
||
|
|
width 100%
|
||
|
|
height 10px
|
||
|
|
position relative
|
||
|
|
.value
|
||
|
|
background linear-gradient(90deg, v-bind(color), #FFF)
|
||
|
|
box-shadow 0 0 3px rgba(0, 0, 0, 0.3)
|
||
|
|
position absolute
|
||
|
|
top 0
|
||
|
|
left 0
|
||
|
|
width 120px
|
||
|
|
height: 10px
|
||
|
|
border-radius 0 5px 5px 0
|
||
|
|
|
||
|
|
</style>
|