50 lines
958 B
Vue
50 lines
958 B
Vue
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<img class="icon" src="assets/imgs/icon/man.png">
|
||
|
|
<div class="value">{{ props.value }}%</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, defineProps } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
value: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'man'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const color = ref('#00bab4');
|
||
|
|
if(props.type != 'man') {
|
||
|
|
color.value = '#ff5329';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
.container
|
||
|
|
width 150px
|
||
|
|
height 100px
|
||
|
|
padding 20px 10px
|
||
|
|
position relative
|
||
|
|
&:after
|
||
|
|
content ' '
|
||
|
|
width 40px
|
||
|
|
height 2px
|
||
|
|
background-color v-bind(color)
|
||
|
|
position absolute
|
||
|
|
top 22px
|
||
|
|
left 48px
|
||
|
|
.icon
|
||
|
|
width 40px
|
||
|
|
.value
|
||
|
|
font-size 20px
|
||
|
|
font-weight bold
|
||
|
|
color v-bind(color)
|
||
|
|
position absolute
|
||
|
|
top 6px
|
||
|
|
left 92px
|
||
|
|
</style>
|