修改
This commit is contained in:
‘937886381’
258
src/views/home/components/top-product-item.vue
Normal file
258
src/views/home/components/top-product-item.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="coreItem">
|
||||
<div class="item" :class="`item${index + 1}`" @click="handleItemClick(index)" v-for="(item, index) in itemList"
|
||||
:key="index">
|
||||
<div class="unit">{{ item.unit }}</div>
|
||||
<div class="item-content">
|
||||
<div class="content-wrapper">
|
||||
<div class="left">
|
||||
<div class="number">{{ item.target }}</div>
|
||||
<div class="title">目标值</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="right">
|
||||
<!-- 实际值颜色动态绑定 -->
|
||||
<div class="number" :style="{ color: getColor(index) }">
|
||||
{{ item.actual }}
|
||||
</div>
|
||||
<div class="title">实际值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-container">
|
||||
<!-- 进度条样式动态绑定 -->
|
||||
<div class="progress-bar" :style="{
|
||||
width: `${item.progress}%`,
|
||||
background: getColor(index)
|
||||
}"></div>
|
||||
</div>
|
||||
<!-- 百分比颜色动态绑定 -->
|
||||
<div class="progress-percent" :style="{ color: getColor(index) }">
|
||||
{{ item.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Container",
|
||||
components: {},
|
||||
props: ["name", "size", "icon"],
|
||||
data() {
|
||||
return {
|
||||
itemList: [
|
||||
{
|
||||
unit: "总成本·元/㎡",
|
||||
route: "cost/cost",
|
||||
target: 16,
|
||||
actual: 16,
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
unit: "原片成本·元/㎡",
|
||||
route: "cost/cost",
|
||||
target: 16,
|
||||
actual: 18,
|
||||
progress: 110
|
||||
},
|
||||
{
|
||||
unit: "加工成本·元/㎡",
|
||||
route: "cost/cost",
|
||||
target: 16,
|
||||
actual: 14,
|
||||
progress: 85
|
||||
},
|
||||
{
|
||||
unit: "原片成品率·%",
|
||||
target: 95,
|
||||
actual: 92,
|
||||
progress: 97
|
||||
},
|
||||
{
|
||||
unit: "投入产出率·%",
|
||||
target: 88,
|
||||
actual: 90,
|
||||
progress: 102
|
||||
}
|
||||
],
|
||||
activeIndex: -1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleItemClick(index) {
|
||||
const currentItem = this.itemList[index];
|
||||
console.log(`点击了第${index + 1}个item:`, currentItem.unit);
|
||||
this.$emit('item-click', { index, ...currentItem });
|
||||
this.activeIndex = index;
|
||||
if (currentItem.route) {
|
||||
this.$router.push({ path: currentItem.route });
|
||||
}
|
||||
},
|
||||
// 判断颜色的方法
|
||||
getColor(index) {
|
||||
const { actual, target } = this.itemList[index];
|
||||
return actual >= target
|
||||
? "rgba(98, 213, 180, 1)"
|
||||
: "rgba(249, 164, 74, 1)";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coreItem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.coreItem> :nth-child(1) {
|
||||
grid-area: item1;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 12px 2px #B5CDE5;
|
||||
}
|
||||
}
|
||||
|
||||
.coreItem> :nth-child(2) {
|
||||
grid-area: item2;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 12px 2px #B5CDE5;
|
||||
}
|
||||
}
|
||||
|
||||
.coreItem> :nth-child(3) {
|
||||
grid-area: item3;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 12px 2px #B5CDE5;
|
||||
}
|
||||
}
|
||||
|
||||
.coreItem> :nth-child(4) {
|
||||
grid-area: item4;
|
||||
}
|
||||
|
||||
.coreItem> :nth-child(5) {
|
||||
grid-area: item5;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 252px;
|
||||
height: 110px;
|
||||
background: #f9fcff;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
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: 190px;
|
||||
height: 10px;
|
||||
background: #ECEFF7;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.item1,
|
||||
.item2,
|
||||
.item3 {
|
||||
width: 166px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user