pagedit
“yangqiao”
BIN
frontend/src/assets/chart/down_arrow.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
frontend/src/assets/chart/five_arrow.png
Normal file
|
After Width: | Height: | Size: 803 B |
|
Before Width: | Height: | Size: 898 B After Width: | Height: | Size: 602 B |
|
Before Width: | Height: | Size: 779 B After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 815 B After Width: | Height: | Size: 762 B |
|
Before Width: | Height: | Size: 858 B After Width: | Height: | Size: 678 B |
BIN
frontend/src/assets/chart/up_arrow.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
@@ -21,16 +21,17 @@
|
||||
|
||||
.item_text {
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
width: 55px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 5px;
|
||||
img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
.item_round {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -38,18 +39,46 @@
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(0.8);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
transform: scale(0.6);
|
||||
font-size: 12px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.dashed_line {
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 82px;
|
||||
left: 84px;
|
||||
|
||||
.item_text {
|
||||
width: 68px;
|
||||
height: 63px;
|
||||
}
|
||||
p {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #bfd8ee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #649ed2;
|
||||
margin-top: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,11 +94,18 @@
|
||||
span {
|
||||
color: #DAA600;
|
||||
}
|
||||
|
||||
.dashed_line {
|
||||
transform: rotate(-90deg);
|
||||
top: -34px;
|
||||
left: 108px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 1px;
|
||||
right: -2px;
|
||||
|
||||
p {
|
||||
background: #c5e0b4;
|
||||
color: #e58881;
|
||||
@@ -78,11 +114,18 @@
|
||||
span {
|
||||
color: #5e913b;
|
||||
}
|
||||
|
||||
.dashed_line {
|
||||
top: 61px;
|
||||
left: 24px;
|
||||
width: 12.4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
top: 173px;
|
||||
right: -2px;
|
||||
|
||||
p {
|
||||
background: #cccfde;
|
||||
color: #5e913b;
|
||||
@@ -91,11 +134,18 @@
|
||||
span {
|
||||
color: #5e913b;
|
||||
}
|
||||
|
||||
.dashed_line {
|
||||
transform: rotate(90deg);
|
||||
top: -28px;
|
||||
left: -66.6px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
top: 173px;
|
||||
left: 1px;
|
||||
|
||||
p {
|
||||
background: #edd1cf;
|
||||
color: #e58881;
|
||||
@@ -104,6 +154,13 @@
|
||||
span {
|
||||
color: #e58881;
|
||||
}
|
||||
|
||||
.dashed_line {
|
||||
transform: rotate(180deg);
|
||||
top: -113px;
|
||||
left: 20px;
|
||||
width: 12.4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,11 +2,22 @@
|
||||
<div class="process_box" v-show="isCollapse">
|
||||
<div class="body-box">
|
||||
<div class="out_list">
|
||||
<div class="out_item" v-for="(item,index) in outList" :key="index">
|
||||
<div class="out_item" v-for="(item, index) in outList" :key="index">
|
||||
<div class="item_text" v-if="index">
|
||||
<img :src="item.url" alt="" />
|
||||
<img class="item_round" :src="item.url" alt="" />
|
||||
<p>{{ item.goup }}</p>
|
||||
<span>{{ item.content }}</span>
|
||||
<div class="dashed_line"></div>
|
||||
</div>
|
||||
<div class="centent_box" v-else>
|
||||
<div class="item_text">
|
||||
<img class="item_round" :src="item.url" alt="" />
|
||||
<p>{{ item.goup }}</p>
|
||||
<span>{{ item.content }}</span>
|
||||
</div>
|
||||
<div class="" v-for="(key,num) in centerList" :key="num">
|
||||
<img :src="key" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,28 +36,35 @@ const isCollapse = ref<boolean>(true);
|
||||
const outList = ref<Array<any>>([
|
||||
{
|
||||
url: oneRound,
|
||||
goup: 'G1',
|
||||
content: 'ORCHESTRATOR'
|
||||
goup: "G1",
|
||||
content: "ORCHESTRATOR",
|
||||
},
|
||||
{
|
||||
url: twoRound,
|
||||
goup: 'G2',
|
||||
content: 'SCIENTIST'
|
||||
goup: "G2",
|
||||
content: "SCIENTIST",
|
||||
},
|
||||
{
|
||||
url: threeRound,
|
||||
goup: 'G3',
|
||||
content: 'ENGINEER'
|
||||
goup: "G3",
|
||||
content: "ENGINEER",
|
||||
},
|
||||
{
|
||||
url: fourRound,
|
||||
goup: 'G4',
|
||||
content: 'EXECUTOR'
|
||||
goup: "G4",
|
||||
content: "EXECUTOR",
|
||||
},
|
||||
{
|
||||
url: fiveRound,
|
||||
goup: 'G5',
|
||||
content: 'ANALYST'
|
||||
goup: "G5",
|
||||
content: "ANALYST",
|
||||
},
|
||||
]);
|
||||
const centerList = ref<Array<any>>([
|
||||
{
|
||||
url: oneRound,
|
||||
getter: "Admin",
|
||||
typeText: "Handoff",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||