mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

修改

Browse Source
This commit is contained in:
‘937886381’
2025-11-12 16:56:14 +08:00
commit 1ea62af1d6
1135 changed files with 109385 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/views/home/components/productBottomBar.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<div class="coreBar" style="width: 100%;">
<!-- 循环渲染item，data中配置的每一项对应一个卡片 -->
<div class="barTop">
<div class="title">生产指标趋势</div>
<div class="button-group">
<!-- 按钮1：单价 -->
<div class="item-button" :class="{ active: activeButton === 0 }" @click="activeButton = 0">
总成本
</div>
<!-- 分割线0：单价右侧 -->
<div class="button-line lineOne" v-if="activeButton !== 0 && activeButton !== 1"></div>
<!-- 按钮2：净价 -->
<div class="item-button" :class="{ active: activeButton === 1 }" @click="activeButton = 1">
原片成本
</div>
<!-- 分割线1：净价右侧 -->
<div class="button-line lineTwo" v-if="activeButton !== 1 && activeButton !== 2"></div>
<!-- 按钮3：销量 -->
<div class="item-button" :class="{ active: activeButton === 2 }" @click="activeButton = 2">
加工成本
</div>
<!-- 分割线2：销量右侧 -->
<div class="button-line lineThree" v-if="activeButton !== 2 && activeButton !== 3"></div>
<!-- 按钮4：双镀产品 -->
<div class="item-button" style="width: 75px;" :class="{ active: activeButton === 3 }" @click="activeButton = 3">
原片成品率
</div>
<div class="button-line lineFour" v-if="activeButton !== 3 && activeButton !== 4"></div>
<!-- 按钮5：投入产出率 -->
<div class="item-button" style="width: 75px;" :class="{ active: activeButton === 4 }" @click="activeButton = 4">
投入产出率
</div>
</div>
</div>
<div class="lineBottom" style="height: 219px; width: 100%">
<coreLineChart style="height: 219px; width: 500px" />
</div>
</div>
</template>
<script>
import coreLineChart from './productBar.vue';
export default {
name: "Container",
components: { coreLineChart },
props: ["name", "size", "icon"],
data() {
return {
// 所有item的数据配置，后续修改直接操作这个数组即可
activeButton: 0, // 初始激活第一个按钮（索引0）
itemList: [
{
unit: "单价·元/m²", // 标题
targetValue: 16, // 左侧目标值
currentValue: 14.5, // 右侧当前值（可根据实际需求修改）
progress: 90, // 进度百分比
},
{
unit: "净价·元/m²",
targetValue: 16,
currentValue: 15.2,
progress: 85,
},
{
unit: "销量·万m²",
targetValue: 20,
currentValue: 16,
progress: 80,
},
{
unit: "双镀面板·万m²",
targetValue: 15,
currentValue: 13.8,
progress: 92,
},
],
};
},
computed: {},
methods: {
},
};
</script>
<style scoped lang="scss">
.coreBar {
display: flex;
flex-direction: column;
padding: 12px;
// grid-template-columns: 1fr 1fr;
// grid-template-rows: 1fr 1fr;
// gap: 8px;
.barTop {
display: flex;
gap: 40px;
.title {
// width: 124px;
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;
}
.button-group {
display: flex;
position: relative;
// justify-content: space-around;
gap: 2px;
width: 327px;
align-items: center;
height: 24px;
background: #ecf4fe;
border-radius: 12px;
.button-line {
position: absolute;
// top: 5px;
// left: 54px;
width: 1px;
height: 14px;
border: 1px solid rgba(11, 88, 255, 0.25);
}
.lineOne {
top: 5px;
left: 57px;
}
.lineTwo {
top: 5px;
left: 118px;
}
.lineThree {
top: 5px;
left: 177px;
}
.lineFour {
top: 5px;
left: 268px;
}
// .button-line:nth-child(3) {
// top: 5px;
// left: 216px;
// }
.item-button {
cursor: pointer;
width: 59px;
height: 24px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #0b58ff;
line-height: 24px;
text-align: center;
font-style: normal;
}
// .item-button:nth-child(6){
// width: 75px;
// }
// .item-button:nth-child(8) {
// width: 75px;
// }
.item-button.active {
width: 59px;
height: 24px;
background: #3071ff;
border-radius: 12px;
color: #ffffff; // 文字变白，提高对比度
font-weight: 500; // 文字加粗，突出激活状态
}
}
}
}
</style>