refactor(largeScreen): 重构大屏展示组件
- 修改 ProgressComponent 组件,增加 isShowPrice 属性控制是否显示价格 - 更新 rightPage 组件,添加新的 ProgressComponent 实例 - 优化 tender/plan/index.vue 页面结构,简化代码
This commit is contained in:
@ -4,16 +4,12 @@
|
||||
<span class="progress_title">{{ title }}</span>
|
||||
<span :class="percentageClass" class="roboto">{{ percentageChange }}</span>
|
||||
</div>
|
||||
<div class="roboto">
|
||||
<div class="roboto" v-if="isShowPrice">
|
||||
<span>{{ value }}</span>
|
||||
<span>{{ unit }}</span>
|
||||
</div>
|
||||
<div class="my_el_progress">
|
||||
<el-progress
|
||||
:percentage="progressPercentage"
|
||||
:color="progressColor"
|
||||
:show-text="false"
|
||||
/>
|
||||
<el-progress :percentage="progressPercentage" :color="progressColor" :show-text="false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -56,14 +52,19 @@ const props = defineProps({
|
||||
progressColor: {
|
||||
type: String,
|
||||
default: 'rgba(255, 77, 79, 1)'
|
||||
},
|
||||
// 是否显示价格
|
||||
isShowPrice: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
// 计算百分比变化的样式类(红色或绿色)
|
||||
const percentageClass = computed(() => {
|
||||
// 检查变化值是否为正数
|
||||
const isPositive = props.percentageChange.startsWith('+') ||
|
||||
(!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
|
||||
const isPositive = props.percentageChange.startsWith('+') ||
|
||||
(!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
|
||||
return isPositive ? 'green' : 'red';
|
||||
});
|
||||
</script>
|
||||
@ -73,6 +74,7 @@ const percentageClass = computed(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 10px;
|
||||
|
||||
:deep(.el-progress-bar__outer) {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -116,5 +118,4 @@ const percentageClass = computed(() => {
|
||||
color: rgba(0, 227, 150, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
Reference in New Issue
Block a user