<> Achieve results

<> Implementation steps

<>1. Complete preliminary pattern

take 6 These parts together form a secondary progress bar , Set styles separately , use display:flex Complete the layout
html part :
<div class="step"> <!-- Part one --> <div class="dot blue"></div> <div class="
step_mod"> <!-- Part two --> <div class="bar blue"></div> <!-- Part three --> <div class="
process"> <div class="progressCircle"> <el-progress type="circle" :stroke-width=
"15" :percentage="50" :show-text="false"></el-progress> <div class="progressText
"> class a </div> </div> <div class="process_title"> second level </div> </div> <!-- Part four --> <div
class="bar"></div> <!-- Part five --> <div class="wait"> Not in progress </div> </div> <div class="
bar"></div> <!-- Part VI --> <div class="dot"></div> </div>
css part :
.step { width: auto; margin: 40px auto; display: flex; justify-content: center;
align-items: center; .dot { width: 12px; height: 12px; border-radius: 6px;
background: #c3c3c3; } .step_mod { display: flex; justify-content: center;
align-items: center; } .process { width: 50px; height: 50px; .process_title {
text-align: center; font-size: 12px; color: #0290ff; line-height: 20px;
margin-top: 20px; white-space: nowrap; } /deep/.el-progress-circle { width: 50px
!important; height: 50px !important; } /deep/.el-progress__text { font-size:
14px!important; line-height: 20px; } } .progressText { text-align: center;
margin-top: -40px; font-size: 14px; } .wait { font-size: 14px; color: #ffffff;
line-height: 20px; background: #c3c3c3; width: 50px; height: 50px; border-radius
: 25px; text-align: center; padding: 15px 0; box-sizing: border-box; } .bar {
width: 82px; height: 4px; background: #f5f5f5; } .blue { background: #0290ff; }
}
<>2. Fill in the data

<!-- stageTree: A tree for recording link information ; progressFlag: Judge whether the current link has been completed , On or in progress ;
secondValue: Calculated progress percentage ; label: First level link name secondLabel: Current secondary link name --> <div class="step">
<div class="dot blue"></div> <div class="step_mod" v-for="(item,index) in
stageTree" :key="index"> <div v-if="item.progressFlag" class="bar blue"></div> <
div v-if="item.progressFlag" class="process"> <div class="progressCircle"> <
el-progress type="circle" :stroke-width="15" :percentage="item.secondValue"
:show-text="false" ></el-progress> <div class="progressText">{{item.label}}</div
> </div> <div v-if="index===firstIndex" class="process_title">{{secondLabel}}</
div> </div> <div v-if="!item.progressFlag" class="bar"></div> <div v-if="
!item.progressFlag" class="wait">{{item.label}}</div> </div> <div class="bar"></
div> <div class="dot"></div> </div> <>data part : data() { return { // Node information
stageTree: [ { label: " class a 1", progressFlag: false, secondValue: 0, children: [ {
label: " second level 1-1" } ] }, { label: " class a 2", progressFlag: false, secondValue: 0,
children: [ { label: " second level 2-1" }, { label: " second level 2-2" } ] }, { label: " class a 3",
progressFlag: false, secondValue: 0, children: [ { label: " second level 3-1" }, { label:
" second level 3-2" }, { label: " second level 3-3" } ] }, { label: " class a 4", progressFlag: false,
secondValue: 0, children: [ { label: " second level 4-1" }, { label: " second level 4-2" }, { label:
" second level 4-3" }, { label: " second level 4-4" } ] } ], firstLabel: "",// First level link name firstIndex: -1,
// Serial number of first level link secondLine: [],// List of secondary links corresponding to the current level 1 link secondLabel: "",// Name of secondary link secondIndex:
0// Serial number of secondary link }; },
<> Source code

* Here, for the convenience of debugging , Added the function of link setting , The complete code is as follows : <template> <div> <div> Secondary progress bar </div> <!--
stageTree: A tree for recording link information ; progressFlag: Judge whether the current link has been completed , Or in progress ; secondValue: Calculated progress percentage ;
label: First level link name secondLabel: Current secondary link name --> <div class="step"> <div class="dot blue"></
div> <div class="step_mod" v-for="(item,index) in stageTree" :key="index"> <div
v-if="item.progressFlag" class="bar blue"></div> <div v-if="item.progressFlag"
class="process"> <div class="progressCircle"> <el-progress type="circle"
:stroke-width="15" :percentage="item.secondValue" :show-text="false" ></
el-progress> <div class="progressText">{{item.label}}</div> </div> <div v-if="
index===firstIndex" class="process_title">{{secondLabel}}</div> </div> <div v-if
="!item.progressFlag" class="bar"></div> <div v-if="!item.progressFlag" class="
wait">{{item.label}}</div> </div> <div class="bar"></div> <div class="dot"></div
> </div> <div class="testBox"> <div> Link setting :</div> <div class="flex_box"> <div
class="processLine"> First level link : <i class="el-icon-circle-plus-outline" @click="
addNode(1)"></i> <div class="node" v-for="(item,index) in stageTree" :key="index
"> <el-input v-model="item.label" placeholder=" Please enter the link name " @focus="
focusOnfirst(item,index)"></el-input> <i class="el-icon-remove-outline" @click="
deleteNode(1,index)"></i> </div> </div> <div class="processLine"> {
{firstLabel}} The secondary link of :<i class="el-icon-circle-plus-outline" @click="addNode(2)"></
i> <div class="node" v-for="(item,index) in secondLine" :key="index"> <el-input
v-model="item.label" placeholder=" Please enter the link name " @focus="focusOnsecond(item,index)"></
el-input> <i class="el-icon-remove-outline" @click="deleteNode(2,index)"></i> </
div> </div> <!-- Arrows control progress --> <div class="processLine"> <i class="el-icon-right
btn" @click="next()"></i> <i class="el-icon-back btn" @click="back()"></i> </div
> </div> <div> instructions :</div> <div> Click the first level link to expand the second level link ;</div> <div> Click the secondary link to set the current link </div> </div
> </div> </template> <script> export default { name: "Step", props: {}, data() {
return { // Node information stageTree: [ { label: " class a 1", progressFlag: false, secondValue:
0, children: [ { label: " second level 1-1" } ] }, { label: " class a 2", progressFlag: false,
secondValue: 0, children: [ { label: " second level 2-1" }, { label: " second level 2-2" } ] }, {
label: " class a 3", progressFlag: false, secondValue: 0, children: [ { label: " second level
3-1" }, { label: " second level 3-2" }, { label: " second level 3-3" } ] }, { label: " class a 4",
progressFlag: false, secondValue: 0, children: [ { label: " second level 4-1" }, { label:
" second level 4-2" }, { label: " second level 4-3" }, { label: " second level 4-4" } ] } ], firstLabel: "",
// First level link name firstIndex: -1,// Serial number of first level link secondLine: [],// List of secondary links corresponding to the current level 1 link secondLabel:
"",// Name of secondary link secondIndex: 0// Serial number of secondary link }; }, methods: { // Click the first level node focusOnfirst(item,
index) { this.firstIndex = index; this.firstLabel = item.label; this.secondLine
= item.children; }, // Click the secondary node focusOnsecond(item, index) { this.secondLabel =
item.label; this.stageTree.forEach((ele, No) => { ele.progressFlag = false; ele.
secondValue= 0; }); for (let i = 0; i < this.stageTree.length; i++) { this.
stageTree[i].progressFlag = true; if (i === this.firstIndex) { this.stageTree[i]
.secondValue = ((index + 1) * 100) / this.secondLine.length; break; } else {
this.stageTree[i].secondValue = 100; } } }, // Add node addNode(level) { if (level
=== 1) { this.stageTree.push({ label: "", progressFlag: false, secondValue: 0,
children: [] }); } else { this.secondLine.push({ label: "" }); } }, // Delete node
deleteNode(level, index) { if (level === 1) { this.stageTree.splice(index, 1); }
else { this.secondLine.splice(index, 1); } }, // Back off back() { this.secondIndex--;
if (this.secondIndex === -1) { if (this.firstIndex === 0) { this.firstIndex--;
this.secondIndex = 0; this.stageTree[0].progressFlag = false; this.stageTree[0].
secondValue= 0; return; } else if (this.firstIndex === -1) { console.log(this.
stageProgress); this.secondIndex = 0; return; } else { this.firstIndex--; this.
firstLabel= this.stageTree[this.firstIndex].label; this.secondIndex = this.
stageTree[this.firstIndex].children.length - 1; this.secondLine = this.stageTree
[this.firstIndex].children; this.secondLabel = this.secondLine[this.secondIndex]
.label; } } else { this.secondLine = this.stageTree[this.firstIndex].children;
this.secondLabel = this.secondLine[this.secondIndex].label; } console.log(this.
secondLabel); this.stageTree.forEach((ele, No) => { ele.progressFlag = false;
ele.secondValue = 0; }); for (let i = 0; i < this.stageTree.length; i++) { this.
stageTree[i].progressFlag = true; if (i === this.firstIndex) { this.stageTree[i]
.secondValue = ((this.secondIndex + 1) * 100) / this.secondLine.length; break; }
else { this.stageTree[i].secondValue = 100; } } }, // forward next() { this.
secondIndex++; if ( this.firstIndex == -1 || this.secondIndex == this.stageTree[
this.firstIndex].children.length ) { this.firstIndex++; this.firstLabel = this.
stageTree[this.firstIndex].label; this.secondIndex = 0; this.secondLine = this.
stageTree[this.firstIndex].children; this.secondLabel = this.secondLine[this.
secondIndex].label; } else { this.secondLine = this.stageTree[this.firstIndex].
children; this.secondLabel = this.secondLine[this.secondIndex].label; } this.
stageTree.forEach((ele, No) => { ele.progressFlag = false; ele.secondValue = 0;
}); for (let i = 0; i < this.stageTree.length; i++) { this.stageTree[i].
progressFlag= true; if (i === this.firstIndex) { this.stageTree[i].secondValue =
((this.secondIndex + 1) * 100) / this.secondLine.length; break; } else { this.
stageTree[i].secondValue = 100; } } } } }; </script> <style lang="less" scoped>
.step { width: auto; margin: 40px auto; display: flex; justify-content: center;
align-items: center; .dot { width: 12px; height: 12px; border-radius: 6px;
background: #c3c3c3; } .step_mod { display: flex; justify-content: center;
align-items: center; } .process { width: 50px; height: 50px; .process_title {
text-align: center; font-size: 12px; color: #0290ff; line-height: 20px;
margin-top: 20px; white-space: nowrap; } /deep/.el-progress-circle { width: 50px
!important; height: 50px !important; } /deep/.el-progress__text { font-size:
14px!important; line-height: 20px; } } .progressText { text-align: center;
margin-top: -40px; font-size: 14px; } .wait { font-size: 14px; color: #ffffff;
line-height: 20px; background: #c3c3c3; width: 50px; height: 50px; border-radius
: 25px; text-align: center; padding: 15px 0; box-sizing: border-box; } .bar {
width: 82px; height: 4px; background: #f5f5f5; } .blue { background: #0290ff; }
} .testBox { text-align: left; .flex_box { display: flex; .processLine { margin:
20px; i { cursor: pointer; float: right; } .btn { font-size: 80px; margin: 50px
; } .node { margin: 10px 0; display: flex; align-items: baseline; } } } }
</style>

Technology
©2019-2020 Toolsou All rights reserved,
Hikvision - Embedded software written test questions C Language application 0 The length of array in memory and structure is 0 In depth analysis data structure --- The preorder of binary tree , Middle order , Subsequent traversal How to do it ipad Transfer of medium and super large files to computer elementui Shuttle box el-transfer Display list content text too long 2019 The 10th Blue Bridge Cup C/C++ A Summary after the National Games ( Beijing Tourism summary )unity Shooting games , Implementation of first person camera python of numpy Module detailed explanation and application case Study notes 【STM32】 Digital steering gear Horizontal and vertical linkage pan tilt Vue Used in Element Open for the first time el-dialog Solution for not getting element