93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="numerical-value aggressivity" :style="{ background: color }">
|
|
<div
|
|
class="numerical-left aggressivity-left"
|
|
:style="{ background: definecolor }"
|
|
>
|
|
<img
|
|
width="48px"
|
|
height="41px"
|
|
:src="require('@/assets/market/hero/' + progressImg + '.png')"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="numerical-right">
|
|
<div class="progress" v-if="!isNaN(parseInt(curent))">
|
|
<el-progress
|
|
:text-inside="true"
|
|
:show-text="false"
|
|
color="#FFFFFF"
|
|
define-back-color="#C1C1C1"
|
|
:stroke-width="12"
|
|
:percentage="curent"
|
|
status="warning"
|
|
></el-progress>
|
|
</div>
|
|
<div class="progress-number">
|
|
{{ min > 100 ? parseInt(min) : min > 10 ? parseFloat(min).toFixed(2) : min }}/{{
|
|
max > 100 ? parseInt(max) : max > 10 ? parseFloat(max).toFixed(2) : max
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ProgressCard",
|
|
props: ["color", "definecolor", "max", "min", "progressImg"],
|
|
computed: {
|
|
curent() {
|
|
return (( this.min / this.max).toFixed(2))*100 ; ;
|
|
},
|
|
},
|
|
created(){
|
|
console.log( (( this.min / this.max).toFixed(2))*100 ,'selog');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.numerical-value {
|
|
width: 309px;
|
|
height: 65px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
margin-top: 18px;
|
|
margin-bottom: 14px;
|
|
border-radius: 12px;
|
|
.numerical-left {
|
|
width: 55px;
|
|
height: 57px;
|
|
margin-top: 4px;
|
|
margin-left: 5px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
img {
|
|
margin-top: 9px;
|
|
}
|
|
}
|
|
.numerical-right {
|
|
}
|
|
.progress {
|
|
width: 217px;
|
|
margin-top: 17px;
|
|
margin-left: 15px;
|
|
}
|
|
.progress-number {
|
|
font-size: 18px;
|
|
font-family: "MEurostile";
|
|
margin-top: 6px;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
text-align: right;
|
|
color: #ffffff;
|
|
}
|
|
::v-deep .el-progress-bar__outer {
|
|
background-color: #c1c1c1;
|
|
}
|
|
}
|
|
</style>
|