ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

流程图

Browse Source
pull/137/head
lukeyan 2 years ago
parent 5cae8111d7
commit 0becbd5a58
8 changed files with 1096 additions and 16 deletions
Show Stats Download Patch File Download Diff File

8
src/views/closeLoopDispose/components/backlogDetail.vue
Unescape View File

@ -9,9 +9,9 @@
@back_home_page="back_home_page"
></BacklogDetailForm>
</el-tab-pane>
<!-- <el-tab-pane label="流程图" name="second">
<el-tab-pane label="流程图" name="second">
<BacklogDetailPicture ref="backlogDetailPicture"></BacklogDetailPicture>
</el-tab-pane> -->
</el-tab-pane>
<el-tab-pane label="流转记录" name="third">
<BacklogDetailRecords
ref="backlogDetailRecords"
@ -23,13 +23,13 @@
</template>
<script>
import BacklogDetailForm from "./backlogDetailForm";
// import BacklogDetailPicture from "./backlogDetailPicture";
import BacklogDetailPicture from "./backlogDetailPicture";
import BacklogDetailRecords from "./backlogDetailRecords";
export default {
name: "BacklogDetail",
components: {
BacklogDetailForm,
// BacklogDetailPicture,
BacklogDetailPicture,
BacklogDetailRecords,
},
props: {

270
src/views/closeLoopDispose/components/backlogDetailPicture.vue
Unescape View File

@ -24,6 +24,57 @@
<div class="picture_text_five">未经过的出口</div>
</div>
</div>
<div class="picture_item">
<div class="start_point">
<div class="start_point_item">
<div class="start_point_item_text">1.转处置任务治安大队</div>
</div>
</div>
<div class="line_one">
<div class="line_item"></div>
</div>
<div class="line_two">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 箭头 -->
<div class="arrow_one">
<div class="arrow_item_one"></div>
<div class="arrow_item_two"></div>
<div class="arrow_item_three"></div>
</div>
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">1.转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
<div class="line_three">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程线 -->
<div class="line_four">
<div class="line_item"></div>
</div>
<!-- 箭头 -->
<div class="arrow_two">
<div class="arrow_item"></div>
</div>
<!-- 流程终结点 -->
<div class="end_point">
<div class="end_point_item">
<div class="end_point_item_text">1.转处置任务治安大队</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -126,5 +177,224 @@ export default {
}
}
}
.picture_item {
width: 94vw;
height: 60vh;
margin-left: 1vw;
margin-top: 1vh;
display: flex;
.start_point {
width: 15vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.start_point_item {
width: 15vw;
height: 10vh;
// margin-top: 18vh;
background: url("~@/assets/companyFile/point01.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
.start_point_item_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.line_one {
width: 10vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
height: 2px;
background: #278961;
}
}
.line_two {
width: 8vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
height: 15vh;
border-left: 2px solid #278961;
border-bottom: 2px solid #278961;
border-top: 1px solid #278961;
}
.line_item_two {
width: 8vw;
height: 15vh;
border-left: 2px solid #278961;
border-top: 2px solid #278961;
border-bottom: 1px solid #278961;
}
}
.arrow_one {
width: 1.5vw;
height: 60vh;
display: flex;
flex-direction: column;
.arrow_item_one {
width: 1.5vw;
height: 2vh;
margin-top: 14vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
.arrow_item_two {
width: 1.5vw;
height: 2vh;
margin-top: 13vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
.arrow_item_three {
width: 1.5vw;
height: 2vh;
margin-top: 13vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.next_point {
width: 15vw;
height: 60vh;
display: flex;
flex-direction: column;
.next_point_item_one {
width: 15vw;
height: 10vh;
margin-top: 10vh;
background: url("~@/assets/companyFile/point01.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_one_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.next_point_item_two {
width: 15vw;
height: 10vh;
margin-top: 5vh;
background: url("~@/assets/companyFile/point02.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_two_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.next_point_item_three {
width: 15vw;
height: 10vh;
margin-top: 5vh;
background: url("~@/assets/companyFile/point03.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_three_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
}
.line_three {
width: 8vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 8vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;
border-bottom: 1px solid #747b7e;
}
}
.line_four {
width: 10vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
height: 2px;
background: #747b7e;
}
}
.arrow_two {
width: 1.5vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.arrow_item {
width: 1.5vw;
height: 2vh;
// border: 0.1px solid #3f5564;
background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.end_point {
width: 15vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.end_point_item {
width: 15vw;
height: 10vh;
// margin-top: 18vh;
background: url("~@/assets/companyFile/point03.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.end_point_item_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
}
}
}
</style>

8
src/views/closeLoopDispose/components/completeDetail.vue
Unescape View File

@ -8,9 +8,9 @@
ref="completeDetailForm"
></CompleteDetailForm>
</el-tab-pane>
<!-- <el-tab-pane label="流程图" name="second">
<el-tab-pane label="流程图" name="second">
<CompleteDetailPicture ref="copyDetailPicture"></CompleteDetailPicture>
</el-tab-pane> -->
</el-tab-pane>
<el-tab-pane label="流转记录" name="third">
<CompleteDetailRecords
:complete_detail="complete_detail"
@ -22,13 +22,13 @@
</template>
<script>
import CompleteDetailForm from "./completeDetailForm";
// import CompleteDetailPicture from "./completeDetailPicture";
import CompleteDetailPicture from "./completeDetailPicture";
import CompleteDetailRecords from "./completeDetailRecords";
export default {
name: "CompleteDetail",
components: {
CompleteDetailForm,
// CompleteDetailPicture,
CompleteDetailPicture,
CompleteDetailRecords,
},
props: {

270
src/views/closeLoopDispose/components/completeDetailPicture.vue
Unescape View File

@ -24,6 +24,57 @@
<div class="picture_text_five">未经过的出口</div>
</div>
</div>
<div class="picture_item">
<div class="start_point">
<div class="start_point_item">
<div class="start_point_item_text">1.转处置任务治安大队</div>
</div>
</div>
<div class="line_one">
<div class="line_item"></div>
</div>
<div class="line_two">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 箭头 -->
<div class="arrow_one">
<div class="arrow_item_one"></div>
<div class="arrow_item_two"></div>
<div class="arrow_item_three"></div>
</div>
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">1.转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
<div class="line_three">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程线 -->
<div class="line_four">
<div class="line_item"></div>
</div>
<!-- 箭头 -->
<div class="arrow_two">
<div class="arrow_item"></div>
</div>
<!-- 流程终结点 -->
<div class="end_point">
<div class="end_point_item">
<div class="end_point_item_text">1.转处置任务治安大队</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -126,5 +177,224 @@ export default {
}
}
}
.picture_item {
width: 94vw;
height: 60vh;
margin-left: 1vw;
margin-top: 1vh;
display: flex;
.start_point {
width: 15vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.start_point_item {
width: 15vw;
height: 10vh;
// margin-top: 18vh;
background: url("~@/assets/companyFile/point01.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
.start_point_item_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.line_one {
width: 10vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
height: 2px;
background: #278961;
}
}
.line_two {
width: 8vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
height: 15vh;
border-left: 2px solid #278961;
border-bottom: 2px solid #278961;
border-top: 1px solid #278961;
}
.line_item_two {
width: 8vw;
height: 15vh;
border-left: 2px solid #278961;
border-top: 2px solid #278961;
border-bottom: 1px solid #278961;
}
}
.arrow_one {
width: 1.5vw;
height: 60vh;
display: flex;
flex-direction: column;
.arrow_item_one {
width: 1.5vw;
height: 2vh;
margin-top: 14vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
.arrow_item_two {
width: 1.5vw;
height: 2vh;
margin-top: 13vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
.arrow_item_three {
width: 1.5vw;
height: 2vh;
margin-top: 13vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.next_point {
width: 15vw;
height: 60vh;
display: flex;
flex-direction: column;
.next_point_item_one {
width: 15vw;
height: 10vh;
margin-top: 10vh;
background: url("~@/assets/companyFile/point01.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_one_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.next_point_item_two {
width: 15vw;
height: 10vh;
margin-top: 5vh;
background: url("~@/assets/companyFile/point02.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_two_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.next_point_item_three {
width: 15vw;
height: 10vh;
margin-top: 5vh;
background: url("~@/assets/companyFile/point03.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_three_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
}
.line_three {
width: 8vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 8vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;
border-bottom: 1px solid #747b7e;
}
}
.line_four {
width: 10vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
height: 2px;
background: #747b7e;
}
}
.arrow_two {
width: 1.5vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.arrow_item {
width: 1.5vw;
height: 2vh;
// border: 0.1px solid #3f5564;
background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.end_point {
width: 15vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.end_point_item {
width: 15vw;
height: 10vh;
// margin-top: 18vh;
background: url("~@/assets/companyFile/point03.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.end_point_item_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
}
}
}
</style>

8
src/views/closeLoopDispose/components/copyDetail.vue
Unescape View File

@ -8,9 +8,9 @@
:copy_detail="copy_detail"
></CopyDetailForm>
</el-tab-pane>
<!-- <el-tab-pane label="流程图" name="second">
<el-tab-pane label="流程图" name="second">
<CopyDetailPicture ref="copyDetailPicture"></CopyDetailPicture>
</el-tab-pane> -->
</el-tab-pane>
<el-tab-pane label="流转记录" name="third">
<CopyDetailRecords
ref="copyDetailRecords"
@ -22,13 +22,13 @@
</template>
<script>
import CopyDetailForm from "./copyDetailForm";
// import CopyDetailPicture from "./copyDetailPicture";
import CopyDetailPicture from "./copyDetailPicture";
import CopyDetailRecords from "./copyDetailRecords";
export default {
name: "copyDetail",
components: {
CopyDetailForm,
// CopyDetailPicture,
CopyDetailPicture,
CopyDetailRecords,
},
props: {

270
src/views/closeLoopDispose/components/copyDetailPicture.vue
Unescape View File

@ -24,6 +24,57 @@
<div class="picture_text_five">未经过的出口</div>
</div>
</div>
<div class="picture_item">
<div class="start_point">
<div class="start_point_item">
<div class="start_point_item_text">1.转处置任务治安大队</div>
</div>
</div>
<div class="line_one">
<div class="line_item"></div>
</div>
<div class="line_two">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 箭头 -->
<div class="arrow_one">
<div class="arrow_item_one"></div>
<div class="arrow_item_two"></div>
<div class="arrow_item_three"></div>
</div>
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">1.转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
<div class="line_three">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程线 -->
<div class="line_four">
<div class="line_item"></div>
</div>
<!-- 箭头 -->
<div class="arrow_two">
<div class="arrow_item"></div>
</div>
<!-- 流程终结点 -->
<div class="end_point">
<div class="end_point_item">
<div class="end_point_item_text">1.转处置任务治安大队</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -126,5 +177,224 @@ export default {
}
}
}
.picture_item {
width: 94vw;
height: 60vh;
margin-left: 1vw;
margin-top: 1vh;
display: flex;
.start_point {
width: 15vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.start_point_item {
width: 15vw;
height: 10vh;
// margin-top: 18vh;
background: url("~@/assets/companyFile/point01.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
.start_point_item_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.line_one {
width: 10vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
height: 2px;
background: #278961;
}
}
.line_two {
width: 8vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
height: 15vh;
border-left: 2px solid #278961;
border-bottom: 2px solid #278961;
border-top: 1px solid #278961;
}
.line_item_two {
width: 8vw;
height: 15vh;
border-left: 2px solid #278961;
border-top: 2px solid #278961;
border-bottom: 1px solid #278961;
}
}
.arrow_one {
width: 1.5vw;
height: 60vh;
display: flex;
flex-direction: column;
.arrow_item_one {
width: 1.5vw;
height: 2vh;
margin-top: 14vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
.arrow_item_two {
width: 1.5vw;
height: 2vh;
margin-top: 13vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
.arrow_item_three {
width: 1.5vw;
height: 2vh;
margin-top: 13vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.next_point {
width: 15vw;
height: 60vh;
display: flex;
flex-direction: column;
.next_point_item_one {
width: 15vw;
height: 10vh;
margin-top: 10vh;
background: url("~@/assets/companyFile/point01.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_one_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.next_point_item_two {
width: 15vw;
height: 10vh;
margin-top: 5vh;
background: url("~@/assets/companyFile/point02.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_two_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.next_point_item_three {
width: 15vw;
height: 10vh;
margin-top: 5vh;
background: url("~@/assets/companyFile/point03.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_three_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
}
.line_three {
width: 8vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 8vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;
border-bottom: 1px solid #747b7e;
}
}
.line_four {
width: 10vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
height: 2px;
background: #747b7e;
}
}
.arrow_two {
width: 1.5vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.arrow_item {
width: 1.5vw;
height: 2vh;
// border: 0.1px solid #3f5564;
background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.end_point {
width: 15vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.end_point_item {
width: 15vw;
height: 10vh;
// margin-top: 18vh;
background: url("~@/assets/companyFile/point03.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.end_point_item_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
}
}
}
</style>

8
src/views/closeLoopDispose/components/myCourseDetail.vue
Unescape View File

@ -5,9 +5,9 @@
<el-tab-pane label="表单信息" name="first">
<MyCourseDetailForm ref="myCourseDetailForm" :send_detail="send_detail"></MyCourseDetailForm>
</el-tab-pane>
<!-- <el-tab-pane label="流程图" name="second">
<el-tab-pane label="流程图" name="second">
<MyCourseDetailPicture ref="myCourseDetailPicture"></MyCourseDetailPicture>
</el-tab-pane> -->
</el-tab-pane>
<el-tab-pane label="流转记录" name="third">
<MyCourseDetailRecords ref="myCourseDetailRecords" :send_detail="send_detail"></MyCourseDetailRecords>
</el-tab-pane>
@ -16,13 +16,13 @@
</template>
<script>
import MyCourseDetailForm from "./myCourseDetailForm";
// import MyCourseDetailPicture from "./myCourseDetailPicture";
import MyCourseDetailPicture from "./myCourseDetailPicture";
import MyCourseDetailRecords from './myCourseDetailRecords'
export default {
name: "MyCourseDetail",
components:{
MyCourseDetailForm,
// MyCourseDetailPicture,
MyCourseDetailPicture,
MyCourseDetailRecords
},
props:{

270
src/views/closeLoopDispose/components/myCourseDetailPicture.vue
Unescape View File

@ -24,6 +24,57 @@
<div class="picture_text_five">未经过的出口</div>
</div>
</div>
<div class="picture_item">
<div class="start_point">
<div class="start_point_item">
<div class="start_point_item_text">1.转处置任务治安大队</div>
</div>
</div>
<div class="line_one">
<div class="line_item"></div>
</div>
<div class="line_two">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 箭头 -->
<div class="arrow_one">
<div class="arrow_item_one"></div>
<div class="arrow_item_two"></div>
<div class="arrow_item_three"></div>
</div>
<!-- 流程点 -->
<div class="next_point">
<div class="next_point_item_one">
<div class="next_point_item_one_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_two">
<div class="next_point_item_two_text">1.转处置任务治安大队</div>
</div>
<div class="next_point_item_three">
<div class="next_point_item_three_text">1.转处置任务治安大队</div>
</div>
</div>
<!-- 流程线 -->
<div class="line_three">
<div class="line_item_one"></div>
<div class="line_item_two"></div>
</div>
<!-- 流程线 -->
<div class="line_four">
<div class="line_item"></div>
</div>
<!-- 箭头 -->
<div class="arrow_two">
<div class="arrow_item"></div>
</div>
<!-- 流程终结点 -->
<div class="end_point">
<div class="end_point_item">
<div class="end_point_item_text">1.转处置任务治安大队</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -126,5 +177,224 @@ export default {
}
}
}
.picture_item {
width: 94vw;
height: 60vh;
margin-left: 1vw;
margin-top: 1vh;
display: flex;
.start_point {
width: 15vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.start_point_item {
width: 15vw;
height: 10vh;
// margin-top: 18vh;
background: url("~@/assets/companyFile/point01.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
.start_point_item_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.line_one {
width: 10vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
height: 2px;
background: #278961;
}
}
.line_two {
width: 8vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
height: 15vh;
border-left: 2px solid #278961;
border-bottom: 2px solid #278961;
border-top: 1px solid #278961;
}
.line_item_two {
width: 8vw;
height: 15vh;
border-left: 2px solid #278961;
border-top: 2px solid #278961;
border-bottom: 1px solid #278961;
}
}
.arrow_one {
width: 1.5vw;
height: 60vh;
display: flex;
flex-direction: column;
.arrow_item_one {
width: 1.5vw;
height: 2vh;
margin-top: 14vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
.arrow_item_two {
width: 1.5vw;
height: 2vh;
margin-top: 13vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
.arrow_item_three {
width: 1.5vw;
height: 2vh;
margin-top: 13vh;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.next_point {
width: 15vw;
height: 60vh;
display: flex;
flex-direction: column;
.next_point_item_one {
width: 15vw;
height: 10vh;
margin-top: 10vh;
background: url("~@/assets/companyFile/point01.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_one_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.next_point_item_two {
width: 15vw;
height: 10vh;
margin-top: 5vh;
background: url("~@/assets/companyFile/point02.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_two_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
.next_point_item_three {
width: 15vw;
height: 10vh;
margin-top: 5vh;
background: url("~@/assets/companyFile/point03.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.next_point_item_three_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
}
.line_three {
width: 8vw;
height: 60vh;
display: flex;
flex-direction: column-reverse;
justify-content: center;
.line_item_one {
width: 8vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-bottom: 2px solid #747b7e;
border-top: 1px solid #747b7e;
}
.line_item_two {
width: 8vw;
height: 15vh;
border-right: 2px solid #747b7e;
border-top: 2px solid #747b7e;
border-bottom: 1px solid #747b7e;
}
}
.line_four {
width: 10vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.line_item {
width: 10vw;
height: 2px;
background: #747b7e;
}
}
.arrow_two {
width: 1.5vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.arrow_item {
width: 1.5vw;
height: 2vh;
// border: 0.1px solid #3f5564;
background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
.end_point {
width: 15vw;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
.end_point_item {
width: 15vw;
height: 10vh;
// margin-top: 18vh;
background: url("~@/assets/companyFile/point03.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
justify-content: center;
align-items: center;
.end_point_item_text {
width: 15vw;
height: 5vh;
color: #c8c8c8;
text-align: center;
line-height: 5vh;
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save