颜色调整

This commit is contained in:
NiSen
2024-01-25 10:35:07 +08:00
parent 660d834c30
commit b2177abe20

View File

@@ -27,9 +27,17 @@
top: getPosition(item.name, index).top + 'px' top: getPosition(item.name, index).top + 'px'
}"> }">
<div class="icon"> <div class="icon">
<div class="icon-content" :style="{ background: getColor(item.status, 1) }"> <div v-if="item.status" class="icon-content" :style="{ background: getColor(item.status, 1) }">
{{ item.progress }}% {{ item.progress }}%
</div> </div>
<div v-else class="icon-content" style="background-color: #fff;">
<svg style="width: 36px;height: 36px;" t="1706149497692" class="icon" viewBox="0 0 1024 1024"
version="1.1" p-id="4648">
<path
d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
fill="#e27166" p-id="4649"></path>
</svg>
</div>
</div> </div>
<div class="iconTitle">{{ item.title }}</div> <div class="iconTitle">{{ item.title }}</div>
</div> </div>
@@ -102,8 +110,8 @@ export default {
return { return {
showUClass: false, showUClass: false,
colorAttrValue: { colorAttrValue: {
0: ['#EE6357', "#CE4522"], 0: ['#f1c9c3', "#e27166"],
1: ["#b8e3b8", "#8bc94b"], 1: ["#b8e3b8", "#8ac84a"],
2: ['#FFD04B', '#FBA944'] 2: ['#FFD04B', '#FBA944']
}, },
iconAttrs: { iconAttrs: {
@@ -120,11 +128,11 @@ export default {
positions: [ positions: [
{ left: 656, top: 594 }, { left: 656, top: 594 },
{ left: 323, top: 560 }, { left: 323, top: 560 },
{ left: 436, top: 360 }, { left: 118, top: 426 },
{ left: 904, top: 334 }, { left: 504, top: 360 },
{ left: 990, top: 56 }, { left: 904, top: 336 },
{ left: 0, top: 0 }, { left: 1200, top: 190 },
{ left: 0, top: 0 }, { left: 988, top: 56 },
] ]
}, },
}, },
@@ -200,42 +208,42 @@ export default {
this.dataList = [{ this.dataList = [{
name: '路径图背景7', name: '路径图背景7',
progress: '99', progress: '99',
title: '岗前培训+OJT辅导OJT辅导OJT辅导OJT辅导OJT辅导', title: '特训营/校招GROW180/社招入职',
status: 0 status: 0
}, { }, {
name: '路径图背景7', name: '路径图背景7',
progress: '10', progress: '10',
title: '岗前培JT辅导OJT辅导', title: '入模培训',
status: 2 status: 2
}, },
{ {
name: '路径图背景7', name: '路径图背景7',
progress: '10', progress: '10',
title: '岗前', title: '岗前培训+OJT辅导',
status: 1 status: 1
}, },
{ {
name: '路径图背景7', name: '路径图背景7',
progress: '10', progress: '10',
title: '岗位', title: 'BOE薪酬福利体系',
status: 0 status: 0
}, },
{ {
name: '路径图背景7', name: '路径图背景7',
progress: '10', progress: '10',
title: '岗前岗前', title: 'PDCA循环工作法',
status: 1 status: 1
}, },
{ {
name: '路径图背景7', name: '路径图背景7',
progress: '10', progress: '10',
title: '岗前岗前', title: '如何让沟通更有效率',
status: 2 status: 2
}, },
{ {
name: '路径图背景7', name: '路径图背景7',
progress: '10', progress: '10',
title: '岗前岗前', title: '商务邮件撰写技巧',
status: 1 status: 1
}] }]
return false return false