最终实现效果图：
备注：
1. 流程图球球、箭头、颜色、状态等都可以通过数据动态改变
封装的组件-完成实现代码：
<template>
<!-- 项目流程图 -->
<div v-if="dataLoadStatus" class="chart-contaner">
<!-- 上-流程图 -->
<div class="flow-chart">
<!-- 01 立项用地 -->
<div class="project-approval">
<div class="top">
<div class="left">
<!-- 0 未到此阶段-布局 -->
<div class="content-0-" v-if="flowData[0].JDZT === 0">
<p></p>
<span :style="issuePopShowControl ? bgStyle : ''">{{
flowData[0].JDMC
}}</span>
</div>
<!-- 1、2 正常阶段-布局 -->
<div
class="content-1-2-"
v-if="flowData[0].JDZT === 1 || flowData[0].JDZT === 2"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[0].JDZT}.svg`)
"
/>
</p>
<span :style="issuePopShowControl ? bgStyle : ''">{{
flowData[0].JDMC
}}</span>
</div>
<!-- 3 存在问题布局 -->
<div
class="content-3-"
v-if="flowData[0].JDZT === 3"
style="position: absolute; top: 305%"
>
<p
@click="
detailData(
flowData[0].Code,
flowData[0].JDZT,
flowData[0].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span :style="issuePopShowControl ? bgStyle : ''">{{
flowData[0].JDMC
}}</span>
</div>
<!-- 4 之前存在问题，现已完成-布局 -->
<div
class="content-4-"
v-if="flowData[0].JDZT === 4"
style="position: absolute; top: 305%"
>
<p
@click="
detailData(
flowData[0].Code,
flowData[0].JDZT,
flowData[0].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span :style="issuePopShowControl ? bgStyle : ''">{{
flowData[0].JDMC
}}</span>
</div>
<!-- 新增-投资协议 -->
<div class="add-tzxy">
<!-- 0 尚未办理-布局 -->
<div
class="content-0"
v-if="flowData[2].child_node_data[2].JDZT === 0"
v-show="showGlobuleLxyd"
>
<p></p>
<span>{{ flowData[2].child_node_data[2].JDMC }}</span>
</div>
<!-- 1、2 正常阶段-布局 -->
<div
class="content-1-2"
v-if="
flowData[2].child_node_data[2].JDZT === 1 ||
flowData[2].child_node_data[2].JDZT === 2
"
v-show="showGlobuleLxyd"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[2].child_node_data[2].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[2].child_node_data[2].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
class="content-3"
v-if="flowData[2].child_node_data[2].JDZT === 3"
>
<p
@click="
detailData(
flowData[2].child_node_data[2].Code,
flowData[2].child_node_data[2].JDZT,
flowData[2].child_node_data[2].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[2].child_node_data[2].JDMC }}</span>
</div>
<!-- 4 之前存在问题，现已完成-布局 -->
<div
class="content-4"
v-if="flowData[2].child_node_data[2].JDZT === 4"
>
<p
@click="
detailData(
flowData[2].child_node_data[2].Code,
flowData[2].child_node_data[2].JDZT,
flowData[2].child_node_data[2].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[2].child_node_data[2].JDMC }}</span>
</div>
</div>
</div>
<div class="right">
<!-- 0 尚未办理-布局 -->
<div class="content-0" v-if="flowData[1].JDZT === 0">
<p></p>
<span :style="issuePopShowControl ? bgStyle : ''">{{
flowData[1].JDMC
}}</span>
</div>
<!-- 1、2 已完成 和 正在办理-布局 -->
<div
class="content-1-2"
v-if="flowData[1].JDZT === 1 || flowData[1].JDZT === 2"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[1].JDZT}.svg`)
"
/>
</p>
<span :style="issuePopShowControl ? bgStyle : ''">{{
flowData[1].JDMC
}}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
class="content-3"
style="position: absolute; top: 305%"
v-if="flowData[1].JDZT === 3"
>
<p
@click="
detailData(
flowData[1].Code,
flowData[1].JDZT,
flowData[1].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span :style="issuePopShowControl ? bgStyle : ''">{{
flowData[1].JDMC
}}</span>
</div>
<!-- 4 之前有问题，现已完成-布局 -->
<div
class="content-4"
style="position: absolute; top: 305%"
v-if="flowData[1].JDZT === 4"
>
<p
@click="
detailData(
flowData[1].Code,
flowData[1].JDZT,
flowData[1].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span :style="issuePopShowControl ? bgStyle : ''">{{
flowData[1].JDMC
}}</span>
</div>
</div>
</div>
<div :class="flowData[2].JDZT === 1 ? 'line-center' : 'center'">
<!-- 0 还未开始 -->
<p class="un-active" v-if="flowData[2].JDZT === 0">
<i> {{ flowData[2].JDMC }} </i>
<span>许可阶段</span>
</p>
<!-- 1、2 正在办理 和 已完成 -->
<p
class="active"
v-if="flowData[2].JDZT === 1 || flowData[2].JDZT === 2"
:style="flowData[2].JDZT !== 1 ? globeFontAgayStyle : ''"
@click="clickShowRelevanceGlobule(1)"
>
<img
v-if="flowData[2].JDZT === 1 || flowData[2].JDZT === 2"
:src="
require(`@/assets/xmdd/pop_up_legend_${
flowData[2].JDZT === 1
? flowData[2].JDZT + 1
: flowData[2].JDZT - 1
}.svg`)
"
/>
<!-- 2 以下2个标签添加样式-表示当前字体高亮 -->
<i :style="flowData[2].JDZT !== 2 ? conspicuousFontAgayStyle : ''">
{{ flowData[2].JDMC }}
</i>
<span
:style="flowData[2].JDZT !== 2 ? conspicuousFontAgayStyle : ''"
>许可阶段
</span>
</p>
</div>
<div class="bottom">
<div class="left" v-if="flowData[2].JDZT !== 0">
<!-- 0 尚未办理-布局 -->
<div
class="content-0"
v-if="flowData[2].child_node_data[0].JDZT === 0"
v-show="showGlobuleLxyd"
>
<p></p>
<span>{{ flowData[2].child_node_data[0].JDMC }}</span>
</div>
<!-- 1、2 正常阶段-布局 -->
<div
class="content-1-2"
v-if="
flowData[2].child_node_data[0].JDZT === 1 ||
flowData[2].child_node_data[0].JDZT === 2
"
v-show="showGlobuleLxyd"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[2].child_node_data[0].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[2].child_node_data[0].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
class="content-3"
v-if="flowData[2].child_node_data[0].JDZT === 3"
>
<p
@click="
detailData(
flowData[2].child_node_data[0].Code,
flowData[2].child_node_data[0].JDZT,
flowData[2].child_node_data[0].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[2].child_node_data[0].JDMC }}</span>
</div>
<!-- 4 之前存在问题，现已完成-布局 -->
<div
class="content-4"
v-if="flowData[2].child_node_data[0].JDZT === 4"
>
<p
@click="
detailData(
flowData[2].child_node_data[0].Code,
flowData[2].child_node_data[0].JDZT,
flowData[2].child_node_data[0].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[2].child_node_data[0].JDMC }}</span>
</div>
</div>
<div class="right" v-if="flowData[2].JDZT !== 0">
<!-- 0 尚未办理-布局 -->
<div
class="content-0"
v-if="flowData[2].child_node_data[1].JDZT === 0"
v-show="showGlobuleLxyd"
>
<p></p>
<span
:style="flowData[2].JDZT !== 1 ? conspicuousFontAgayStyle : ''"
>{{ flowData[2].child_node_data[1].JDMC }}</span
>
</div>
<!-- 1、2 正常阶段-布局 -->
<div
class="content-1-2"
v-if="
flowData[2].child_node_data[1].JDZT === 1 ||
flowData[2].child_node_data[1].JDZT === 2
"
v-show="showGlobuleLxyd"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[2].child_node_data[1].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[2].child_node_data[1].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
class="content-3"
v-if="flowData[2].child_node_data[1].JDZT === 3"
>
<p
@click="
detailData(
flowData[2].child_node_data[1].Code,
flowData[2].child_node_data[1].JDZT,
flowData[2].child_node_data[1].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[2].child_node_data[1].JDMC }}</span>
</div>
<!-- 4 之前存在问题，现已完成-布局 -->
<div
class="content-4"
v-if="flowData[2].child_node_data[1].JDZT === 4"
>
<p
@click="
detailData(
flowData[2].child_node_data[1].Code,
flowData[2].child_node_data[1].JDZT,
flowData[2].child_node_data[1].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[2].child_node_data[1].JDMC }}</span>
</div>
</div>
</div>
</div>
<!-- 02 工程建设 -->
<div class="engineering-construction">
<div class="top">
<div class="left" v-if="flowData[3].JDZT !== 0">
<!-- 0 尚未办理-布局 -->
<div
v-if="flowData[3].child_node_data[1].JDZT === 0"
:style="
flowData[3].child_node_data[1].JDZT !== 2
? globeFontAgayStyle
: ''
"
class="content-0"
v-show="showGlobuleGcjs"
>
<p></p>
<span>{{ flowData[3].child_node_data[1].JDMC }}</span>
</div>
<!-- 1、2 已完成 或 正在办理-布局 -->
<div
v-if="
flowData[3].child_node_data[1].JDZT === 1 ||
flowData[3].child_node_data[1].JDZT === 2
"
:style="
flowData[3].child_node_data[1].JDZT !== 2
? globeFontAgayStyle
: ''
"
class="content-1-2"
v-show="showGlobuleGcjs"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[3].child_node_data[1].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[3].child_node_data[1].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
v-if="flowData[3].child_node_data[1].JDZT === 3"
class="content-3"
:style="flowData[3].JDZT === 3 ? globeFontAgayStyle : ''"
>
<p
@click="
detailData(
flowData[3].child_node_data[1].Code,
flowData[3].child_node_data[1].JDZT,
flowData[3].child_node_data[1].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[3].child_node_data[1].JDMC }}</span>
</div>
<!-- 4 之前存在问题-现已经完成-布局 -->
<div
v-if="flowData[3].child_node_data[1].JDZT === 4"
class="content-4"
:style="flowData[3].JDZT === 3 ? globeFontAgayStyle : ''"
>
<p
@click="
detailData(
flowData[3].child_node_data[1].Code,
flowData[3].child_node_data[1].JDZT,
flowData[3].child_node_data[1].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[3].child_node_data[1].JDMC }}</span>
</div>
</div>
<div class="right" v-if="flowData[3].JDZT !== 0">
<!-- 0 尚未办理-布局 -->
<div
class="content-0"
v-if="flowData[3].child_node_data[2].JDZT === 0"
:style="flowData[3].JDZT === 2 ? globeFontAgayStyle : ''"
v-show="showGlobuleGcjs"
>
<p></p>
<span>{{ flowData[3].child_node_data[2].JDMC }}</span>
</div>
<!-- 1、2 已完成 和 真正办理-布局 -->
<div
class="content-1-2"
v-if="
flowData[3].child_node_data[2].JDZT === 1 ||
flowData[3].child_node_data[2].JDZT === 2
"
:style="flowData[3].JDZT === 2 ? globeFontAgayStyle : ''"
v-show="showGlobuleGcjs"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[3].child_node_data[2].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[3].child_node_data[2].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
class="content-3"
v-if="flowData[3].child_node_data[2].JDZT === 3"
:style="flowData[3].JDZT === 3 ? globeFontAgayStyle : ''"
>
<p
@click="
detailData(
flowData[3].child_node_data[2].Code,
flowData[3].child_node_data[2].JDZT,
flowData[3].child_node_data[2].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[3].child_node_data[2].JDMC }}</span>
</div>
<!-- 4 之前存在问题，现已完成-布局 -->
<div
class="content-4"
v-if="flowData[3].child_node_data[2].JDZT === 4"
:style="flowData[3].JDZT === 3 ? globeFontAgayStyle : ''"
>
<p
@click="
detailData(
flowData[3].child_node_data[2].Code,
flowData[3].child_node_data[2].JDZT,
flowData[3].child_node_data[2].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[3].child_node_data[2].JDMC }}</span>
</div>
</div>
</div>
<!-- ===1 显示当前大球 - 旋转外圈 -->
<div :class="flowData[3].JDZT === 1 ? 'line-center' : 'center'">
<!-- 0 未开始-布局 -->
<p class="un-active" v-if="flowData[3].JDZT === 0">
<i>{{ flowData[3].JDMC }}</i>
<span>许可阶段</span>
</p>
<!-- 1、2 正在办理 和 已完成-布局 -->
<p
class="active"
v-if="flowData[3].JDZT === 1 || flowData[3].JDZT === 2"
:style="flowData[3].JDZT !== 1 ? globeFontAgayStyle : ''"
@click="clickShowRelevanceGlobule(2)"
>
<img
v-if="flowData[3].JDZT === 1 || flowData[3].JDZT === 2"
:src="
require(`@/assets/xmdd/pop_up_legend_${
flowData[3].JDZT === 1
? flowData[3].JDZT + 1
: flowData[3].JDZT - 1
}.svg`)
"
/>
<i> {{ flowData[3].JDMC }} </i>
<span>许可阶段</span>
</p>
</div>
<div class="bottom">
<div class="left" v-if="flowData[3].JDZT !== 0">
<!-- 0 尚未办理 -->
<div
class="content-0"
v-if="flowData[3].child_node_data[3].JDZT === 0"
:style="
flowData[3].child_node_data[3].JDZT !== 2
? globeFontAgayStyle
: ''
"
v-show="showGlobuleGcjs"
>
<p></p>
<span>{{ flowData[3].child_node_data[3].JDMC }}</span>
</div>
<!-- 1、2 已完成 和 真正办理-布局 -->
<div
class="content-1-2"
v-if="
flowData[3].child_node_data[3].JDZT === 1 ||
flowData[3].child_node_data[3].JDZT === 2
"
:style="
flowData[3].child_node_data[3].JDZT !== 2
? globeFontAgayStyle
: ''
"
v-show="showGlobuleGcjs"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[3].child_node_data[3].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[3].child_node_data[3].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
v-if="flowData[3].child_node_data[3].JDZT === 3"
class="content-3"
:style="
flowData[3].child_node_data[3].JDZT !== 3
? globeFontAgayStyle
: ''
"
>
<p
@click="
detailData(
flowData[3].child_node_data[3].Code,
flowData[3].child_node_data[3].JDZT,
flowData[3].child_node_data[3].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[3].child_node_data[3].JDMC }}</span>
</div>
<!-- 4 之前存在问题，现已完成-布局 -->
<div
v-if="flowData[3].child_node_data[3].JDZT === 4"
class="content-4"
:style="
flowData[3].child_node_data[3].JDZT !== 3
? globeFontAgayStyle
: ''
"
>
<p
@click="
detailData(
flowData[3].child_node_data[3].Code,
flowData[3].child_node_data[3].JDZT,
flowData[3].child_node_data[3].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[3].child_node_data[3].JDMC }}</span>
</div>
</div>
<div class="right" v-if="flowData[3].JDZT !== 0">
<!-- 0 尚未办理 -->
<div
class="content-0"
v-if="flowData[3].child_node_data[0].JDZT === 0"
:style="
flowData[3].child_node_data[0].JDZT !== 2
? globeFontAgayStyle
: ''
"
v-show="showGlobuleGcjs"
>
<p></p>
<span>{{ flowData[3].child_node_data[0].JDMC }}</span>
</div>
<!-- 1、2 已完成 和 正在办理-布局 -->
<div
class="content-1-2"
v-if="
flowData[3].child_node_data[0].JDZT === 1 ||
flowData[3].child_node_data[0].JDZT === 2
"
:style="
flowData[3].child_node_data[0].JDZT !== 2
? globeFontAgayStyle
: ''
"
v-show="showGlobuleGcjs"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[3].child_node_data[0].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[3].child_node_data[0].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
v-if="flowData[3].child_node_data[0].JDZT === 3"
class="content-3"
:style="
flowData[3].child_node_data[0].JDZT !== 3
? globeFontAgayStyle
: ''
"
>
<p
@click="
detailData(
flowData[3].child_node_data[0].Code,
flowData[3].child_node_data[0].JDZT,
flowData[3].child_node_data[0].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[3].child_node_data[0].JDMC }}</span>
</div>
<!-- 4 之前存在问题，先已完成-布局 -->
<div
v-if="flowData[3].child_node_data[0].JDZT === 4"
class="content-4"
:style="
flowData[3].child_node_data[0].JDZT !== 3
? globeFontAgayStyle
: ''
"
>
<p
@click="
detailData(
flowData[3].child_node_data[0].Code,
flowData[3].child_node_data[0].JDZT,
flowData[3].child_node_data[0].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[3].child_node_data[0].JDMC }}</span>
</div>
</div>
</div>
</div>
<!-- 03 施工许可 -->
<div class="construction">
<div class="top">
<div class="left" v-if="flowData[4].JDZT !== 0">
<!-- 0 尚未办理-布局 -->
<div
class="content-0"
v-if="flowData[4].child_node_data[3].JDZT === 0"
v-show="showGlobuleSg"
>
<p></p>
<span>{{ flowData[4].child_node_data[3].JDMC }}</span>
</div>
<!-- 1、2 已完成 和 正在办理-布局 -->
<div
class="content-1-2"
v-if="
flowData[4].child_node_data[3].JDZT === 1 ||
flowData[4].child_node_data[3].JDZT === 2
"
v-show="showGlobuleSg"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[4].child_node_data[3].JDZT}.svg`)
"
/>
</p>
<span style="width: 105%">{{
flowData[4].child_node_data[3].JDMC
}}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
class="content-3"
v-if="flowData[4].child_node_data[3].JDZT === 3"
>
<p
@click="
detailData(
flowData[4].child_node_data[3].Code,
flowData[4].child_node_data[3].JDZT,
flowData[4].child_node_data[3].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[4].child_node_data[3].JDMC }}</span>
</div>
<!-- 4 之前存在问题，现已完成-布局 -->
<div
class="content-4"
v-if="flowData[4].child_node_data[3].JDZT === 4"
>
<p
@click="
detailData(
flowData[4].child_node_data[3].Code,
flowData[4].child_node_data[3].JDZT,
flowData[4].child_node_data[3].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[4].child_node_data[3].JDMC }}</span>
</div>
</div>
<div class="right" v-if="flowData[4].JDZT !== 0">
<!-- 0 尚未办理-布局 -->
<div
class="content-0"
v-if="flowData[4].child_node_data[2].JDZT === 0"
v-show="showGlobuleSg"
>
<p></p>
<span>{{ flowData[4].child_node_data[2].JDMC }}</span>
</div>
<!-- 1、2 已完成 和 正在办理-布局 -->
<div
class="content-1-2"
v-if="
flowData[4].child_node_data[2].JDZT === 1 ||
flowData[4].child_node_data[2].JDZT === 2
"
v-show="showGlobuleSg"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[4].child_node_data[2].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[4].child_node_data[2].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
class="content-3"
v-if="flowData[4].child_node_data[2].JDZT === 3"
>
<p
@click="
detailData(
flowData[4].child_node_data[2].Code,
flowData[4].child_node_data[2].JDZT,
flowData[4].child_node_data[2].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[4].child_node_data[2].JDMC }}</span>
</div>
<!-- 4 之前存在问题-现已完成-布局 -->
<div
class="content-4"
v-if="flowData[4].child_node_data[2].JDZT === 4"
>
<p
@click="
detailData(
flowData[4].child_node_data[2].Code,
flowData[4].child_node_data[2].JDZT,
flowData[4].child_node_data[2].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[4].child_node_data[2].JDMC }}</span>
</div>
</div>
</div>
<!-- 中 外圈线-->
<div :class="flowData[4].JDZT === 1 ? 'line-center' : 'center'">
<!-- 0 未开始 -->
<p class="un-active" v-if="flowData[4].JDZT === 0">
<i> {{ flowData[4].JDMC }} </i>
<span>许可阶段</span>
</p>
<!-- 1、2 正在办理 和 已完成 -->
<p
class="active"
v-if="flowData[4].JDZT === 1 || flowData[4].JDZT === 2"
:style="flowData[4].JDZT !== 1 ? globeFontAgayStyle : ''"
@click="clickShowRelevanceGlobule(3)"
>
<img
v-if="flowData[4].JDZT === 1 || flowData[4].JDZT === 2"
:src="
require(`@/assets/xmdd/pop_up_legend_${
flowData[4].JDZT === 1
? flowData[4].JDZT + 1
: flowData[4].JDZT - 1
}.svg`)
"
/>
<i>{{ flowData[4].JDMC }}</i>
<span> 许可阶段 </span>
</p>
</div>
<div class="bottom">
<div class="left" v-if="flowData[4].JDZT !== 0">
<!-- 0 尚未办理-布局 -->
<div
class="content-0"
v-if="flowData[4].child_node_data[0].JDZT === 0"
v-show="showGlobuleSg"
>
<p></p>
<span>{{ flowData[4].child_node_data[0].JDMC }}</span>
</div>
<!-- 1、2 已完成 和 正在办理-布局 -->
<div
class="content-1-2"
v-if="
flowData[4].child_node_data[0].JDZT === 1 ||
flowData[4].child_node_data[0].JDZT === 2
"
v-show="showGlobuleSg"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[4].child_node_data[0].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[4].child_node_data[0].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
class="content-3"
v-if="flowData[4].child_node_data[0].JDZT === 3"
>
<p
@click="
detailData(
flowData[4].child_node_data[0].Code,
flowData[4].child_node_data[0].JDZT,
flowData[4].child_node_data[0].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[4].child_node_data[0].JDMC }}</span>
</div>
<!-- 4 之前存在问题，现已完成-布局 -->
<div
class="content-4"
v-if="flowData[4].child_node_data[0].JDZT === 4"
>
<p
@click="
detailData(
flowData[4].child_node_data[0].Code,
flowData[4].child_node_data[0].JDZT,
flowData[4].child_node_data[0].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[4].child_node_data[0].JDMC }}</span>
</div>
</div>
<div class="right" v-if="flowData[4].JDZT !== 0">
<!-- 0 尚未办理-布局 -->
<div
class="content-0"
v-if="flowData[4].child_node_data[1].JDZT === 0"
v-show="showGlobuleSg"
>
<p></p>
<span>{{ flowData[4].child_node_data[1].JDMC }}</span>
</div>
<!-- 1、2 已完成 和 正在办理-布局 -->
<div
class="content-1-2"
v-if="
flowData[4].child_node_data[1].JDZT === 1 ||
flowData[4].child_node_data[1].JDZT === 2
"
v-show="showGlobuleSg"
>
<p>
<img
:src="
require(`@/assets/xmdd/pop_up_legend_${flowData[4].child_node_data[1].JDZT}.svg`)
"
/>
</p>
<span>{{ flowData[4].child_node_data[1].JDMC }}</span>
</div>
<!-- 3 存在问题-布局 -->
<div
class="content-3"
v-if="flowData[4].child_node_data[1].JDZT === 3"
>
<p
@click="
detailData(
flowData[4].child_node_data[1].Code,
flowData[4].child_node_data[1].JDZT,
flowData[4].child_node_data[1].JDMC
)
"
>
<img
src="@/assets/xmdd/pop-up-dynamic-graph.gif"
style="height: 100px; width: 100px"
/>
</p>
<span>{{ flowData[4].child_node_data[1].JDMC }}</span>
</div>
<!-- 4 之前存在问题，现已完成-布局 -->
<div
class="content-4"
v-if="flowData[4].child_node_data[1].JDZT === 4"
>
<p
@click="
detailData(
flowData[4].child_node_data[1].Code,
flowData[4].child_node_data[1].JDZT,
flowData[4].child_node_data[1].JDMC
)
"
>
<img src="@/assets/xmdd/pop-issue-finish.png" />
</p>
<span>{{ flowData[4].child_node_data[1].JDMC }}</span>
</div>
</div>
</div>
</div>
<!-- 第一段连接线 01-->
<p class="link-line-1">
<!-- 静态-灰色 -->
<img
v-if="flowData[2].JDZT === 0 || flowData[3].JDZT === 0"
src="@/assets/xmdd/pop-up-arrows-unactiveWD.png"
/>
<!-- 动态-带颜色 -->
<img
v-if="flowData[3].JDZT === 1"
src="@/assets/xmdd/pop-up-arrows-active.gif"
/>
<!-- 静态--带颜色 -->
<img
v-if="flowData[3].JDZT === 2"
src="@/assets/xmdd/pop-up-arrows-unactive.png"
/>
</p>
<!-- 第二段链接线 02 -->
<p class="link-line-2">
<!-- 静态-灰色 -->
<img
v-if="flowData[4].JDZT === 0"
src="@/assets/xmdd/pop-up-arrows-unactiveWD.png"
/>
<!-- 动态-带颜色 -->
<img
v-if="flowData[4].JDZT === 1"
src="@/assets/xmdd/pop-up-arrows-active.gif"
/>
<!-- 静态--带颜色 -->
<img
v-if="flowData[4].JDZT === 2"
src="@/assets/xmdd/pop-up-arrows-unactive.png"
/>
</p>
<!-- 立项用地-立项-链接线 -->
<p class="a-1" v-show="showGlobuleLxyd"></p>
<!-- 立项用地-用地手续-链接线 -->
<p class="a-2" v-show="showGlobuleLxyd"></p>
<!-- 立项用地-投资协议-链接线 -->
<p class="a-4" v-show="showGlobuleLxyd"></p>
<!-- 工程建设-工程规划许可证-链接线 -->
<p
class="b-1"
v-if="flowData[3].JDZT !== 0"
:style="flowData[3].JDZT === 1 ? globeFontAgayStyle : ''"
v-show="showGlobuleGcjs"
></p>
<!-- 工程建设-规委会审查-链接线 -->
<p
class="b-2"
v-if="flowData[3].JDZT !== 0"
:style="flowData[3].JDZT === 1 ? globeFontAgayStyle : ''"
v-show="showGlobuleGcjs"
></p>
<!-- 工程建设-并联审查意见-链接线 -->
<p
class="b-3"
v-if="flowData[3].JDZT !== 0"
:style="flowData[3].JDZT === 1 ? globeFontAgayStyle : ''"
v-show="showGlobuleGcjs"
></p>
<!-- 工程建设-规划设计方案-链接线 -->
<p
class="b-4"
v-if="flowData[3].JDZT !== 0"
:style="flowData[3].JDZT === 1 ? globeFontAgayStyle : ''"
v-show="showGlobuleGcjs"
></p>
<!-- 施工-施工招标-链接线 -->
<p class="c-1" v-if="flowData[4].JDZT !== 0" v-show="showGlobuleSg"></p>
<!-- 施工-施工许可证-链接线 -->
<p class="c-2" v-if="flowData[4].JDZT !== 0" v-show="showGlobuleSg"></p>
<!-- 施工-概算评审-链接线 -->
<p class="c-3" v-if="flowData[4].JDZT !== 0" v-show="showGlobuleSg"></p>
<!-- 施工-施工图设计审查-链接线 -->
<p class="c-4" v-if="flowData[4].JDZT !== 0" v-show="showGlobuleSg"></p>
</div>
<!-- 下-图例 -->
<div class="legend" :style="issuePopShowControl ? bgStyle : ''">
<div class="title" style="text-align: left">图例:</div>
<ul class="legend-container">
<li>
<img src="@/assets/xmdd/bottom-right-1.svg" alt="" srcset="" />
<span>已完成或不涉及</span>
</li>
<li>
<img src="@/assets/xmdd/bottom-right-2.svg" alt="" srcset="" />
<span>正在办理</span>
</li>
<li>
<img src="@/assets/xmdd/bottom-right-3.svg" alt="" srcset="" />
<span>存在问题</span>
</li>
</ul>
</div>
<!-- 弹窗组件 -->
<PopupComponent
ref="tcData"
v-if="showIs"
@handleCloses="handleCloses"
></PopupComponent>
</div>
</template>
<script>
import PopupComponent from "./PopupComponent";
import HorizonTimeLine from "./HorizonTimeLine.vue";
import lcTable from "./lcTable.vue";
import processDetails from "./processDetails.vue"; // 原版-暂时弃用
import XmInfo from "./xmInfo.vue"; // 预警弹出详情页面-施工流程图（升级版）
export default {
components: {
HorizonTimeLine,
lcTable,
processDetails,
XmInfo,
PopupComponent,
},
props: {
// 列表传递的项目ID
childXmid: {
default: 1,
Type: Number,
},
lcTableData: {
default: [],
Type: Array,
},
},
data() {
return {
dataLoadStatus: false, // 整体流程图数据加载是否OK
showIs: false,
tableData: [], //表格数据
value1: "", // 日期选择器
showParticulars: false, // 办理 “工程规划许可证” 参考
dialogQs: false, // 弹框显示控制
// 问题弹窗显示后的背景样式置灰
bgStyle: {
opacity: 0.5,
},
issueTitleLocalStorageName: "", // 问题弹框当前项目标题名称
issuePopShowControl: false, // 问题弹框虚拟化背景显示控制
showDetail: false, //展示流程图下方信息
showGlobuleLxyd: false, // 显示立项用地大球-关联的所有小球
showGlobuleGcjs: false, // 显示工程建设大球-关联的所有小球
showGlobuleSg: false, // 显示施工大球-关联的所有小球
clearTime: null,
dataIndex: 0, // 时间对应数据下标
// 立项用地（当前阶段-字体-圆形明亮样式）
conspicuousFontAgayStyle: {
color: "#fff",
},
// 当前流程图阶段已过-字体-圆形置灰样式
globeFontAgayStyle: {
opacity: 0.8,
},
flowData: [], // 流程图数据
// 立项用地 - 问题弹框显示控制
isShowPopUpA1: false,
isShowPopUpA2: false,
// 工程建设 - 问题弹框显示控制
isShowPopUpB1: false,
isShowPopUpB2: false,
isShowPopUpB3: false,
isShowPopUpB4: false,
// 施工 - 问题弹框显示控制
isShowPopUpC1: false,
isShowPopUpC2: false,
isShowPopUpC3: false,
isShowPopUpC4: false,
// 节能审查 - 问题弹框显示控制
isShowPopUpD1: false,
// 环境影响评价 - 问题弹框显示控制
isShowPopUpE1: false,
// 问题弹框-时间轴数据
isDate: [], //详情
ddxx: [], //中间问题部分
ffxx: [], //表格数据上
hfxx: [], //表格下
btName: "", //标题名称
textName: "", //标题
isShow: "0", //展开收起
isTbxs: true, //,显示
isTbyc: false, //,隐藏
nrHhow: false, //
isnrHhow: true,
CJSJ: "", //问题时间
TDSJ: "", //时间
CLBMS: "", //部门
ZT: "", //状态
WTMS: "", //问题描述
nrms: "",
djID: "", //ID
};
},
methods: {
// 移如 办理“工程规划许可”参考 显示对于详情框
shiftUpInfoMouseMove() {
this.showParticulars = !this.showParticulars;
},
//展示流程图下方详细信息
nextShowDetail() {
this.showDetail = !this.showDetail;
if (this.showDetail) {
window.setTimeout(function () {
document.querySelector(".datails").scrollTo({
top: 800,
behavior: "smooth",
});
}, 200);
}
},
// 点击当前全部已完成阶段大球，显示相关联的小球 index: 1立项用地 2工程建设 3施工
clickShowRelevanceGlobule(index) {
if (
(index === 1 && this.flowData[2].JDZT === 1) ||
(index === 1 && this.flowData[2].JDZT === 2)
) {
this.showGlobuleLxyd = !this.showGlobuleLxyd;
} else if (
(index === 2 && this.flowData[3].JDZT === 1) ||
(index === 2 && this.flowData[3].JDZT === 2)
) {
this.showGlobuleGcjs = !this.showGlobuleGcjs;
} else if (
(index === 3 && this.flowData[4].JDZT === 1) ||
(index === 3 && this.flowData[4].JDZT === 2)
) {
this.showGlobuleSg = !this.showGlobuleSg;
}
},
detailData(id, ztId, name) {
this.showIs = !this.showIs;
this.$nextTick(() => {
this.$refs.tcData.detailDatas(id, ztId, name);
});
},
fn(i) {
let Arr = this.isDate.filter((item, index) => {
return index === i;
});
Arr.map((item, index) => {
if (this.isShow.indexOf(i) > -1) {
this.isShow = this.isShow.replace(i, "");
} else {
this.isShow += i;
}
});
},
hideThetable(id) {
const _get = axios.create({
// headers: { "Content-Type": "application/json;charset=utf-8" }, //即将被发送的自定义请求头
// withCredentials: true, //表示跨域请求时是否需要使用凭证
});
_get.get(` api/?t=19&lx=${id}`).then((result) => {
// tableData
this.tableData = result.data.data;
});
},
closure() {
this.showParticulars = false;
},
handleCloses() {
this.showIs = false;
},
},
watch: {
lcTableData(newVal, oldVal) {
localStorage.setItem("dataIndex", 0);
this.flowData = newVal;
// 初始化大球所关联所有小球显示状态
if (this.flowData[2].JDZT === 1) {
this.showGlobuleLxyd = true;
}
if (this.flowData[3].JDZT === 1) {
this.showGlobuleGcjs = true;
}
if (this.flowData[4].JDZT === 1) {
this.showGlobuleSg = true;
}
this.dataLoadStatus = true;
},
isShowPopUpA1() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制
// 显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“立项”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpA2() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制
// 显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“用地手续”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpB1() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制
// 显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“工程规划许可证”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpB2() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制
// 显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“规委会审查”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpB3() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制
// 显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“并联审查意见”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpB4() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框
// 显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“规划设计方案”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpC1() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制
// 显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“施工招标”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpC2() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框
// 显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“施工许可证”" + "问题清单"; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpC3() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“概算评审”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpC4() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“施工图设计审查”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpD1() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“节能审查”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
isShowPopUpE1() {
localStorage.setItem("dataIndex", 0);
this.dialogQs = !this.dialogQs; // 新版问题弹框显示控制显示控制
this.issueTitleLocalStorageName =
localStorage.getItem("projectName") + "“环境影响评价”" + "问题清单"; // 获取本地存储中问题弹窗项目名称; // 获取本地存储中问题弹窗项目名称
},
},
beforeDestroy() {
// 清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(this.clearTime);
});
this.flowData = [];
},
};
</script>
<style lang="scss" scoped>
.chart-contaner {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 660px;
min-height: 660px;
// 上-流程图
.flow-chart {
flex: 1;
display: flex;
padding: 0px 130px;
// 01 立项用地
.project-approval {
flex: 1;
display: flex;
flex-direction: column;
// 上（节能审查、环境影响评价）
.top {
flex: 1;
display: flex;
// 左
.left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
// 0 尚未办理-样式
.content-0- {
position: absolute;
left: 440%;
top: 300%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
width: 40%;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 90px;
width: 90px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
text-align: center;
}
}
// 1、2 已完成 和 正在办理-样式
.content-1-2- {
position: absolute;
left: 440%;
top: 300%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
width: 40%;
align-items: center;
> p {
background: linear-gradient(180deg, #fdc3e2, #b7357f);
height: 90px;
width: 90px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 45px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
text-align: center;
}
}
// 3 存在问题-样式
.content-3- {
position: absolute;
left: 440%;
top: 300%;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4- {
position: absolute;
left: 440%;
top: 300%;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 (暂时弃用)
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: -335%;
top: 158%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
// 新增-投资协议
.add-tzxy {
// 0 尚未办理-样式
.content-0 {
position: absolute;
left: 11%;
top: 100%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 已完成 & 正在办理
.content-1-2 {
position: absolute;
left: 9%;
top: 102%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #349be0, #0c62e0);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #90a8d2;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题样式
.content-3 {
position: absolute;
left: 7%;
top: 93%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 3%;
top: 89%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 （暂时废弃）
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: -203%;
top: -92%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
}
// 右
.right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
// 0 尚未办理-样式
.content-0 {
position: absolute;
top: 300%;
left: 426%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
width: 49%;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 90px;
width: 90px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 45px;
}
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
text-align: center;
}
}
// 1、2 已完成 和 正在办理-样式
.content-1-2 {
position: absolute;
top: 300%;
left: 426%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
width: 49%;
align-items: center;
> p {
background: linear-gradient(180deg, #67ccce, #1dbb9d);
height: 90px;
width: 90px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 45px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
text-align: center;
}
}
// 3 存在问题样式
.content-3 {
position: absolute;
top: 300%;
left: 426%;
display: flex;
flex-direction: column;
align-items: center;
width: 49%;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
top: 300%;
left: 426%;
display: flex;
flex-direction: column;
align-items: center;
width: 49%;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 （暂时弃用）
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: -322%;
top: 158%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
}
// 中（无外全线）
.center {
flex: 1.5;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
// 到此阶段-样式
.active {
background: linear-gradient(180deg, #349be0, #0d62e0);
height: 140px;
width: 140px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 40px;
width: 40px;
}
i {
font-weight: 800;
font-size: 24px;
color: #b4c3e1;
}
> span {
color: #76a1e1;
}
}
// 未到此阶段-样式
.un-active {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 80px;
width: 80px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
flex-direction: column;
> i {
color: #babcc0;
font-size: 16px;
margin-bottom: 5px;
}
> span {
color: #babcc0;
font-size: 16px;
z-index: 100;
}
}
}
// 中（有外圈线）
.line-center {
flex: 1.5;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
// 当前进展状态gif外圈
background: url("../../../assets/xmdd/pop-up-info-active.gif") no-repeat
center;
background-position-y: 70%;
background-size: 50%;
// 到此阶段-样式
.active {
background: linear-gradient(180deg, #349be0, #0d62e0);
height: 140px;
width: 140px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 40px;
width: 40px;
}
i {
font-weight: 800;
font-size: 28px;
color: #b4c3e1;
}
> span {
color: #76a1e1;
}
}
// 未到此阶段-样式
.un-active {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 80px;
width: 80px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
flex-direction: column;
> i {
color: #babcc0;
font-size: 16px;
margin-bottom: 5px;
}
> span {
color: #babcc0;
font-size: 16px;
z-index: 100;
}
}
}
// 下（立项、用地手续）
.bottom {
flex: 1;
display: flex;
// 左
.left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
// 0 尚未办理-样式
.content-0 {
position: absolute;
left: 50%;
top: -37%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 已完成 & 正在办理
.content-1-2 {
position: absolute;
left: 50%;
top: -37%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #349be0, #0c62e0);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #90a8d2;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题样式
.content-3 {
position: absolute;
left: 40%;
top: -30%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 40%;
top: -30%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 （暂时废弃）
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: -203%;
top: -92%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
// 右
.right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
// 0 尚未办理-样式
.content-0 {
position: absolute;
top: -37%;
left: 27%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 正常布局-样式
.content-1-2 {
position: absolute;
top: -37%;
left: 27%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #349be0, #0c62e0);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题-样式
.content-3 {
position: absolute;
left: 29%;
top: -34%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 29%;
top: -34%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件（暂时废弃）
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: -203%;
top: -92%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
}
}
// 02 工程建设
.engineering-construction {
flex: 1;
display: flex;
flex-direction: column;
// 上
.top {
flex: 1;
display: flex;
// 左
.left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
// 正常样式
.content-0 {
position: absolute;
left: 48%;
top: 51%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 已完成 和 正在办理-样式
.content-1-2 {
position: absolute;
left: 48%;
top: 51%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #b77afc, #5c0fb4);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题-样式
.content-3 {
position: absolute;
left: 46%;
top: 39%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 46%;
top: 39%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 （暂时弃用）
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: -216%;
top: 10%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
// 右
.right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
// 0 尚未办理-样式
.content-0 {
position: absolute;
left: 39%;
top: 98%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 已完成 和 真正办理-样式
.content-1-2 {
position: absolute;
left: 39%;
top: 98%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #b77afc, #5c0fb4);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题样式
.content-3 {
position: absolute;
left: 42%;
top: 87%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 42%;
top: 87%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 （暂时弃用）
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: -211%;
top: 10%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
}
// 中(无外圈线)
.center {
flex: 1.5;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
// 到此阶段-样式
.active {
background: linear-gradient(180deg, #b77afc, #5c0fb4);
height: 140px;
width: 140px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
cursor: pointer;
z-index: 100;
> img {
height: 40px;
width: 40px;
}
i {
font-size: 24px;
font-family: "YouSheBiaoTiHei";
font-weight: 800;
color: #b4c3e1;
margin-bottom: 10px;
}
> span {
color: #b4c3e1;
}
}
// 未到此阶段-样式
.un-active {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 80px;
width: 80px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> i {
color: #babcc0;
font-size: 16px;
margin-bottom: 5px;
}
> span {
color: #babcc0;
font-size: 16px;
z-index: 100;
}
}
}
// 中（有外圈线）
.line-center {
flex: 1.5;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
// 当前进展状态gif外圈
background: url("../../../assets/xmdd/pop-up-info-active.gif") no-repeat
center;
background-position-y: 70%;
background-size: 50%;
// 到此阶段-样式
.active {
background: linear-gradient(180deg, #b77afc, #5c0fb4);
height: 140px;
width: 140px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 40px;
width: 40px;
}
i {
font-size: 28px;
font-family: "YouSheBiaoTiHei";
font-weight: 800;
color: #ffffff;
margin-bottom: 10px;
}
> strong {
color: #76a1e1;
}
}
// 未到此阶段-样式
.un-active {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 80px;
width: 80px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> i {
color: #babcc0;
font-size: 16px;
margin-bottom: 5px;
}
> span {
color: #babcc0;
font-size: 16px;
z-index: 100;
}
}
}
// 下
.bottom {
flex: 1;
display: flex;
// 左
.left {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
// 0 尚未办理样式
.content-0 {
position: absolute;
left: 40%;
top: -25%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 已完成 和 有问题-样式
.content-1-2 {
position: absolute;
left: 40%;
top: -25%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #b77afc, #5c0fb4);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题样式
.content-3 {
position: absolute;
left: 36%;
top: -37%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 35%;
top: -20%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 （暂时弃用）
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: -209%;
top: -92%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
// 右
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
// 0 尚未办理样式
.content-0 {
position: absolute;
left: 28%;
top: -17%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 已完成 和 正在办理-样式
.content-1-2 {
position: absolute;
left: 28%;
top: -17%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #b77afc, #5c0fb4);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题样式
.content-3 {
position: absolute;
left: 28%;
top: -17%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 33%;
top: -11%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 (暂时弃用)
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: -195%;
top: -92%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
}
}
// 03 施工许可
.construction {
flex: 1;
display: flex;
flex-direction: column;
// 上
.top {
flex: 1;
display: flex;
// 左
.left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
// 0 尚未办理-样式
.content-0 {
position: absolute;
left: 47%;
top: 50%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
width: 105%;
}
}
// 1、2 已完成 和 正在办理-样式
.content-1-2 {
position: absolute;
left: 47%;
top: 50%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #7afc9f, #0fb438);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题样式
.content-3 {
position: absolute;
left: 43%;
top: 38%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 43%;
top: 38%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: 59%;
top: 10%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
// 右
.right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
// 0 尚未办理-样式
.content-0 {
position: absolute;
left: 45%;
top: 98%;
display: flex;
flex-direction: column;
align-items: center;
width: 76%;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 已完成 和 正在办理-样式
.content-1-2 {
position: absolute;
left: 45%;
top: 98%;
display: flex;
flex-direction: column;
align-items: center;
width: 76%;
> p {
background: linear-gradient(180deg, #7afc9f, #0fb438);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题样式
.content-3 {
position: absolute;
left: 45%;
top: 98%;
display: flex;
flex-direction: column;
align-items: center;
width: 76%;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 45%;
top: 98%;
display: flex;
flex-direction: column;
align-items: center;
width: 76%;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 (暂时弃用)
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: 66%;
top: 10%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
}
// 中（无外圈线）
.center {
flex: 1.5;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
// 到此阶段样式
.active {
background: linear-gradient(180deg, #7afc9f, #0fb438);
height: 140px;
width: 140px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 40px;
width: 40px;
}
i {
font-weight: 800;
font-size: 24px;
color: #fff;
}
> strong {
color: #76a1e1;
}
}
// 未到此阶段-样式
.un-active {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 80px;
width: 80px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
> i {
color: #babcc0;
font-size: 16px;
margin-bottom: 5px;
}
> span {
color: #babcc0;
font-size: 16px;
z-index: 100;
}
}
}
// 中（有外圈线）
.line-center {
flex: 1.5;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
// 当前进展状态gif外圈
background: url("../../../assets/xmdd/pop-up-info-active.gif") no-repeat
center;
background-position-y: 70%;
background-size: 50%;
.active {
background: linear-gradient(180deg, #7afc9f, #0fb438);
height: 140px;
width: 140px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
cursor: pointer;
> img {
height: 40px;
width: 40px;
}
i {
font-weight: 800;
font-size: 28px;
color: #fff;
}
> strong {
color: #76a1e1;
}
}
// 未到此阶段-样式
.un-active {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 80px;
width: 80px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
> i {
color: #babcc0;
font-size: 16px;
margin-bottom: 5px;
}
> span {
color: #babcc0;
font-size: 16px;
z-index: 100;
}
}
}
// 下
.bottom {
flex: 1;
display: flex;
// 左
.left {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
// 0 尚未办理-样式
.content-0 {
position: absolute;
left: 43%;
top: -38%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 已完成 和 正在办理-样式
.content-1-2 {
position: absolute;
left: 43%;
top: -38%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #7afc9f, #0fb438);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题样式
.content-3 {
position: absolute;
left: 40%;
top: -34%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 40%;
top: -34%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 （暂时弃用）
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: 72%;
top: -92%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
// 右
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
// 0 尚未办理-样式
.content-0 {
position: absolute;
left: 27%;
top: -22%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #6b84b6, #385283);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 1、2 已完成 和 正在办理-样式
.content-1-2 {
position: absolute;
left: 27%;
top: -22%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #7afc9f, #0fb438);
height: 60px;
width: 60px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
z-index: 100;
> img {
height: 25px;
}
}
> span {
color: #6b84b6;
font-size: 18px;
z-index: 100;
}
}
// 3 存在问题-样式
.content-3 {
position: absolute;
left: 31%;
top: -19%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 35px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 4 之前存在问题，现已完成-样式
.content-4 {
position: absolute;
left: 31%;
top: -19%;
display: flex;
flex-direction: column;
align-items: center;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
cursor: pointer;
z-index: 100;
> img {
height: 100px;
width: 100px;
}
}
> span {
color: #fff;
font-size: 18px;
z-index: 100;
}
}
// 弹框-父组件 （暂时弃用）
.pop-up {
width: 225%;
height: 214%;
border: 1px solid #3a81ec;
background: linear-gradient(0deg, #013dac 0%, #011f4c 100%);
position: absolute;
right: 77%;
top: -92%;
padding: 20px;
z-index: 99999;
overflow-y: scroll;
// 弹框关闭按钮
.clone-pop-up {
color: rgb(255, 255, 255);
font-size: 50px;
position: absolute;
right: 6px;
top: -5px;
cursor: pointer;
z-index: 999999;
}
// 弹框-信息框
.pop-up-info {
// 每一项
.item {
margin-bottom: 25px;
// 标题
.title {
font-size: 20px;
margin-bottom: 5px;
height: 40px;
> span {
background: url("../../../assets/xmdd/pop_up_title_bg.png")
no-repeat;
background-position: left;
background-size: 20% 100%;
display: inline-block;
height: 100%;
padding-left: 25px;
display: flex;
align-items: center;
}
}
// 详情信息
.details {
font-size: 18px;
padding-left: 4.5%;
}
}
}
}
// 滚动条设置
::-webkit-scrollbar {
width: 3px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #1473ff;
background: #1473ff;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #012364;
}
}
}
}
// 链接箭头线1(都已完成)
.link-line-1 {
position: absolute;
left: 30%;
top: 42%;
width: 12%;
> img {
width: 100%;
height: 29px;
}
}
// 链接箭头线2(未完成)
.link-line-2 {
position: absolute;
left: 58%;
top: 42%;
width: 12%;
> img {
width: 100%;
height: 29px;
}
}
// 立项用地-链接线
.a-1 {
position: absolute;
width: 1.3%;
border-top: 2px solid #2d90e0;
rotate: 142deg;
left: 17.5%;
top: 56.5%;
}
.a-2 {
position: absolute;
width: 1.3%;
border-top: 2px solid #2d90e0;
rotate: 39deg;
left: 25.2%;
top: 56%;
}
// 新增-投资协议
.a-4 {
position: absolute;
width: 4.3%;
border-top: 2px solid #2d90e0;
rotate: 32deg;
left: 12.2%;
top: 36%;
}
// 工程建设-链接线
.b-1 {
position: absolute;
width: 1%;
border-top: 2px solid #e3caff;
rotate: 137deg;
left: 44.9%;
top: 59%;
}
.b-2 {
position: absolute;
width: 3.3%;
border-top: 2px solid #e3caff;
rotate: 51deg;
left: 53%;
top: 59.3%;
}
.b-3 {
position: absolute;
width: 3%;
border-top: 2px solid #e3caff;
rotate: 323deg;
left: 55.5%;
top: 35%;
}
.b-4 {
position: absolute;
width: 3.7%;
border-top: 2px solid #e3caff;
rotate: 62deg;
left: 45.5%;
top: 25.5%;
}
// 施工-链接线
.c-1 {
position: absolute;
width: 1.3%;
border-top: 2px solid #1dbe46;
rotate: 137deg;
left: 74.5%;
top: 56.1%;
}
.c-2 {
position: absolute;
width: 3%;
border-top: 2px solid #1dbe46;
rotate: 49deg;
left: 81%;
top: 58.5%;
}
.c-3 {
position: absolute;
width: 5.7%;
border-top: 2px solid #1dbe46;
rotate: 328deg;
left: 84%;
top: 36%;
}
.c-4 {
position: absolute;
width: 3.7%;
border-top: 2px solid #1dbe46;
rotate: 65deg;
left: 73%;
top: 25%;
}
}
// 下-图例
.legend {
height: 8%;
padding-left: 15px;
// 标题
.title {
margin-bottom: 5px;
font-size: 18px;
//margin-left: -1650px;
}
// 图例
.legend-container {
display: flex;
> li {
display: flex;
align-items: center;
margin-right: 40px;
> img {
width: 20px;
margin-right: 5px;
}
}
}
}
// 问题弹窗
.problem-pop {
height: 98%;
width: 98%;
left: 1%;
top: 1%;
position: absolute;
z-index: 999;
background: #0c49a5;
overflow-y: scroll;
box-shadow: inset 0px 0px 10px #74a8f8;
border: 1px solid red;
}
// 存在问题图标公共样式
.public-problem {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
> p {
background: linear-gradient(180deg, #eec22f, #b17405);
height: 70px;
width: 70px;
border-radius: 50%;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 18px 16px 0px rgba(38, 89, 188, 0.7);
border: 5px solid #fff;
z-index: 100;
> img {
height: 35px;
}
> span {
color: #2750a7;
font-size: 18px;
z-index: 100;
}
}
}
// 时间轴
.pop-up-axis {
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
margin-bottom: 5%;
// border: 1px solid red;
// 每一项
.item {
width: 100px;
border-top: 1px solid #edf1f7;
// 小点（未激活）
.un-dot {
display: inline-block;
width: 10px;
height: 10px;
background: #62a2e2;
border-radius: 50%;
position: absolute;
left: -10px;
top: -5px;
}
// 小点（激活）
.active-dot {
display: inline-block;
width: 15px;
height: 15px;
background: #ffffff;
border-radius: 50%;
position: absolute;
left: -10px;
top: -8px;
}
// 年月日
.time {
position: absolute;
top: 10px;
left: -50px;
font-size: 20px;
}
}
}
}
// 问题弹窗鼠标上表格效果
::v-deep .el-table__body tr:hover > td {
background-color: #05328d !important;
}
/* 滚动条 */
::-webkit-scrollbar {
width: 5px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #0574e6;
background: #0574e6;
}
::-webkit-scrollbar-track-piece {
margin-right: 10px;
background: #074abd;
}
// 开工滞后-弹出框
::v-deep .dialogQs {
left: 3% !important;
top: 7.5% !important;
margin: 0 !important;
height: 77%;
// border: 2px solid #ff0;
}
// 弹框背景
::v-deep .el-dialog__body {
height: 100%;
width: 100%;
// background: pink;
padding: 0px;
background: #02388a;
// 弹框内容
.pop-content {
// border: 5px solid red;
width: 100%;
height: 84%;
background: #02388a;
// 问题状态
.issue-status {
width: 100%;
//height: 127px;
background: #0e5ed6;
padding: 23px 32px;
// 问题列表ul
.issue-list {
list-style: none;
height: 100%;
// 每一项li
.item {
height: 50%;
display: flex;
// 大项中的每一项
.child-item {
//flex: 1;
// 名称
.name {
font-size: 24px;
font-family: "Source Han Sans CN";
font-weight: 400;
color: #bccef1;
}
// 信息
.info {
font-size: 24px;
font-family: "Source Han Sans CN";
font-weight: 400;
color: #ffffff;
}
// 状态颜色
.info-color {
font-size: 24px;
font-family: "Source Han Sans CN";
font-weight: 600;
color: red;
}
}
// 第二项
.child-item:nth-child(2) {
display: flex;
justify-content: center;
}
// 第三项
.child-item:nth-child(3) {
display: flex;
justify-content: end;
}
}
}
}
// 问题协调情况-父
.issue-coordinate {
margin-top: 2%;
height: 75%;
// 标题-父元素
.title-container {
display: flex;
justify-content: center;
// 标题
.title {
font-size: 24px;
font-family: "Source Han Sans CN";
font-weight: 400;
color: #ffffff;
background: url("../../../assets/xmdd/infoTitle.png") no-repeat;
background-size: 100% 100%;
width: 204px;
height: 37px;
line-height: 37px;
text-align: center;
}
}
// 时间线
.time-line {
overflow-y: auto;
height: 98%;
padding: 0px 34px;
// el-code 时间线-下方内容-父元素
.el-card__body {
padding: 0px;
}
// 背景
.el-card {
border: 1px solid transparent !important;
background-color: transparent !important;
box-shadow: 0px 0px 0px transparent;
}
}
}
// 办理参考-鼠标移上显示
.transact-consult {
height: 9%;
}
}
}
// 弹窗标题
.pop-title {
font-size: 24px;
font-family: "Source Han Sans CN";
font-weight: 600;
color: #ffffff;
background: linear-gradient(
180deg,
#dbe1e4 0%,
#ffffff 8.7890625%,
#99d7ff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
padding-top: 35px;
}
// 问题弹框-二级时间线对应箭头信息框
.line-tiem-info-arrows::after {
content: "";
border: 10px solid #114ab6;
display: inline-block;
width: 0px;
height: 0px;
position: absolute;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
transform: rotate(-90deg);
top: -14px;
left: 15px;
}
// 鼠标悬浮-弹出框
.pop-info ul li {
color: red;
font-size: 18px;
font-family: "Source Han Sans CN";
font-weight: 400;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 0px 20px;
}
// 办理 “工程规划许可”参考 蒙层
.mask {
background: rgba(24, 24, 24, 0.636);
}
// 问题弹框头部高度0
::v-deep .el-dialog__header {
padding: 0px;
}
// 问题弹框-日期选择器
.el-input__inner {
background: #002e75;
}
// 问题弹框-日期输入框
::v-deep .el-range-input {
background: #002e75 !important;
color: #fff;
font-size: 20px;
font-family: "Source Han Sans CN";
font-weight: 400;
color: #ffffff;
}
// 问题弹框-日期图标
::v-deep .el-input__icon {
color: #fff;
}
// 日期 “至”
::v-deep .el-range-separator {
color: #fff;
font-size: 20px;
font-family: "Source Han Sans CN";
font-weight: 400;
color: #ffffff;
margin-right: 1%;
background: #02388a;
width: 30px;
height: 105%;
}
// 一级时间线-点
::v-deep .el-timeline-item__node {
background-color: #3d8bff;
width: 10px;
height: 10px;
}
// 一级时间线-点-连接线
::v-deep .el-timeline-item__tail {
border-left: 1px solid #3d8bff;
}
// 问题弹框-日期选择器
::v-deep .el-popper {
top: 25% !important;
left: 59.3% !important;
}
// 问题弹框-关闭按钮 99
::v-deep .el-dialog__headerbtn {
z-index: 999;
}
::v-deep .v-modal {
z-index: -1;
}
::v-deep .el-dialog .el-dialog__header .el-dialog__headerbtn i {
border-radius: 50% !important;
text-align: center !important;
font-size: 34px !important;
color: #00347f;
background: #3e76ea;
line-height: 33px !important;
}
::v-deep.el-table::before {
height: 0 !important;
}
::v-deep.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 0 !important;
}
::v-deep .el-table_2_column_7 .is-left .is-leaf .el-table__cell {
border-bottom: 0 !important;
}
::v-deep.el-table--striped
.el-table__body
tr.el-table__row--striped
td.el-table__cell {
background-color: transparent;
}
</style>
1928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
