修改
This commit is contained in:
‘937886381’
499
src/views/home/components/order-bottom-leftItem.vue
Normal file
499
src/views/home/components/order-bottom-leftItem.vue
Normal file
@@ -0,0 +1,499 @@
|
||||
<template>
|
||||
<div class="coreItem">
|
||||
<!-- 单独渲染第一个item -->
|
||||
<div class="item" v-if="itemList.length > 0">
|
||||
<div class="unit">{{ itemList[0].unit }}</div>
|
||||
<div class="item-content">
|
||||
<div class="content-wrapper">
|
||||
<div class="left">
|
||||
<div class="number">{{ itemList[0].targetValue }}</div>
|
||||
<div class="title">目标值</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="right">
|
||||
<!-- 实际值（当前值）颜色动态绑定 -->
|
||||
<div class="number" :style="{ color: getColor(itemList[0].currentValue, itemList[0].targetValue) }">
|
||||
{{ itemList[0].currentValue }}
|
||||
</div>
|
||||
<div class="title">当前值</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-group">
|
||||
<div class="progress-container">
|
||||
<!-- 进度条颜色和宽度动态绑定 -->
|
||||
<div class="progress-bar" :style="{
|
||||
width: itemList[0].progress + '%',
|
||||
background: getColor(itemList[0].currentValue, itemList[0].targetValue)
|
||||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yield" style="display: flex;justify-content: space-between;">
|
||||
<div class="progress-percent">完成率</div>
|
||||
<!-- 百分比颜色动态绑定 -->
|
||||
<div class="progress-percent">
|
||||
{{ itemList[0].progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 循环渲染剩余的item（从索引1开始） -->
|
||||
<div class="item groupData" style="display: flex;padding: 0;" v-for="(item, index) in itemList.slice(1)"
|
||||
:key="index">
|
||||
<div class="left" style="display: flex;align-items: start;gap: 4px;padding: 12px 0 0 12px;">
|
||||
<div class="groupName">{{ item.unit }}</div>
|
||||
<div class="left-target">
|
||||
<div class="number">{{ item.targetValue }}</div>
|
||||
<div class="title">目标值</div>
|
||||
</div>
|
||||
<div class="left-real">
|
||||
<!-- 实际值颜色动态绑定 -->
|
||||
<div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
||||
{{ item.currentValue }}
|
||||
</div>
|
||||
<div class="title">实际值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cityLine"></div>
|
||||
<div class="right">
|
||||
<!-- 顶部完成率颜色动态绑定 -->
|
||||
<div class="groupName" :class="{
|
||||
'bg-default': item.currentValue < item.targetValue, // 小于目标值：默认背景
|
||||
'bg-green': item.currentValue >= item.targetValue // 大于等于目标值：绿色背景
|
||||
}" style="font-size: 12px;display: flex;align-items: center;justify-content: flex-end;">
|
||||
<div class="title">完成率</div>
|
||||
<div class="yield" style="font-size: 22px;margin-bottom: 4px;">
|
||||
{{ item.progress }}
|
||||
</div>
|
||||
<div class="unit">%</div>
|
||||
</div>
|
||||
|
||||
<!-- 第一个城市进度 -->
|
||||
<div class="right-city">
|
||||
<div class="city">桐城</div>
|
||||
<div class="city-progress-group">
|
||||
<div class="city-progress-container">
|
||||
<!-- 城市进度条颜色动态绑定 -->
|
||||
<div class="city-progress-bar" :style="{
|
||||
width: item.progress + '%',
|
||||
background: getColor(item.currentValue, item.targetValue)
|
||||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="city-progress-yield" style="display: flex;justify-content: space-between;">
|
||||
<!-- numerator颜色动态绑定 -->
|
||||
<div class="numerator" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
||||
12/13
|
||||
</div>
|
||||
<!-- 城市完成率颜色动态绑定 -->
|
||||
<div class="city-yield" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
||||
{{ item.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二个城市进度 -->
|
||||
<div class="right-city" style="margin-top: 2px;">
|
||||
<div class="city">桐城</div>
|
||||
<div class="city-progress-group">
|
||||
<div class="city-progress-container">
|
||||
<!-- 城市进度条颜色动态绑定 -->
|
||||
<div class="city-progress-bar" :style="{
|
||||
width: item.progress + '%',
|
||||
background: getColor(item.currentValue, item.targetValue)
|
||||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="city-progress-yield" style="display: flex;justify-content: space-between;">
|
||||
<!-- numerator颜色动态绑定 -->
|
||||
<div class="numerator" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
||||
12/13
|
||||
</div>
|
||||
<!-- 城市完成率颜色动态绑定 -->
|
||||
<div class="city-yield" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
||||
{{ item.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Container",
|
||||
components: {},
|
||||
props: ["name", "size", "icon"],
|
||||
data() {
|
||||
return {
|
||||
progress: 90, // 进度值基础参数
|
||||
itemList: [
|
||||
{
|
||||
unit: "总进度",
|
||||
targetValue: 16,
|
||||
currentValue: 14.5, // 小于目标值，应显示橙色
|
||||
progress: 90
|
||||
},
|
||||
{
|
||||
unit: "一组",
|
||||
targetValue: 16,
|
||||
currentValue: 17, // 大于目标值，应显示绿色
|
||||
progress: 106
|
||||
},
|
||||
{
|
||||
unit: "二组",
|
||||
targetValue: 16,
|
||||
currentValue: 16, // 等于目标值，应显示绿色
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
unit: "三组",
|
||||
targetValue: 16,
|
||||
currentValue: 15.2, // 小于目标值，应显示橙色
|
||||
progress: 85
|
||||
},
|
||||
{
|
||||
unit: "四组",
|
||||
targetValue: 16,
|
||||
currentValue: 18, // 大于目标值，应显示绿色
|
||||
progress: 112
|
||||
},
|
||||
{
|
||||
unit: "五组",
|
||||
targetValue: 16,
|
||||
currentValue: 14, // 小于目标值，应显示橙色
|
||||
progress: 80
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 颜色判断核心方法：实际值≥目标值返回绿色，否则返回橙色
|
||||
getColor(currentValue, targetValue) {
|
||||
return currentValue >= targetValue
|
||||
? "rgba(98, 213, 180, 1)"
|
||||
: "rgba(249, 164, 74, 1)";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 第一个item单独样式（可选） */
|
||||
.item:first-of-type {
|
||||
// background: #f0f7ff; /* 示例背景色 */
|
||||
}
|
||||
|
||||
.coreItem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 220px;
|
||||
height: 122px;
|
||||
background: #f9fcff;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.unit {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.groupName {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.left-target {
|
||||
.number {
|
||||
height: 22px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: rgba(103, 103, 103, 0.79);
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #868687;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.left-real {
|
||||
.number {
|
||||
height: 22px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
/* 颜色由动态绑定控制，此处不设置固定值 */
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #868687;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 100%;
|
||||
.bg-default {
|
||||
background-image: url("../../../assets/img/order-item-bg.png");
|
||||
}
|
||||
|
||||
// 实际值 >= 目标值：绿色背景图
|
||||
.bg-green {
|
||||
background-image: url("../../../assets/img/order-item-greenbg.png");
|
||||
}
|
||||
.groupName {
|
||||
width: 129px;
|
||||
height: 32px;
|
||||
// background: url(../../../assets/img/order-item-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
margin-top: 10px;
|
||||
height: 12px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
color: #000000;
|
||||
line-height: 12px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-top: 10px;
|
||||
margin-right: 14px;
|
||||
height: 12px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
line-height: 12px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.right-city {
|
||||
.city {
|
||||
height: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #868687;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: calc(100% - 26px);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
}
|
||||
|
||||
.cityLine {
|
||||
width: 1px;
|
||||
margin-top: 40px;
|
||||
height: 76px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.number {
|
||||
height: 22px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: rgba(103, 103, 103, 0.79);
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #868687;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.progress-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 230px;
|
||||
height: 10px;
|
||||
background: #ECEFF7;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
/* 背景色由动态绑定控制，移除固定值 */
|
||||
}
|
||||
|
||||
.city-progress-group {
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.city-progress-container {
|
||||
width: 112px;
|
||||
height: 10px;
|
||||
background: #ECEFF7;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.city-progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
opacity: 1;
|
||||
/* 背景色由动态绑定控制，移除固定值 */
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
/* 颜色由动态绑定控制，此处不设置固定值 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.numerator {
|
||||
/* 颜色由动态绑定控制，此处不设置固定值 */
|
||||
}
|
||||
|
||||
.city-yield {
|
||||
/* 颜色由动态绑定控制，此处不设置固定值 */
|
||||
}
|
||||
}
|
||||
|
||||
.groupData {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 右上角折现边框（主边框） */
|
||||
.groupData::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
/* 右上角折现细节 */
|
||||
.groupData::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #EFF3F8;
|
||||
transform: rotate(-45deg) translate(50%, -50%);
|
||||
transform-origin: top right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user