|
|
@@ -20,14 +20,14 @@
|
|
|
<div class="warn-item">
|
|
|
<div class="warn-item-tilte">投资进展缓慢</div>
|
|
|
<div class="warn-item-inner">
|
|
|
- <hc-row style="height: 100%;" :gutter="30">
|
|
|
- <hc-col :span="12">
|
|
|
+ <el-row style="height: 100%;">
|
|
|
+ <el-col :span="10">
|
|
|
<div class="warn-item-inner-box">
|
|
|
<div class="text-center" style="font-size: 16px;">第一季度</div>
|
|
|
<div class="warn-item-inner-title text-right">该季度投资计划完成比例</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<!-- <div class="arrow"> |||</div> -->
|
|
|
- <div class="arrow" style="width: auto;min-width:60px"> 三级预警</div>
|
|
|
+ <div class="arrow" style="width: auto;min-width:60px"> 三级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -39,7 +39,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div class="arrow arrow-oringe" style="width: auto;min-width:60px"> 二级预警</div>
|
|
|
+ <div class="arrow arrow-oringe" style="width: auto;min-width:60px"> 二级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -51,7 +51,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div class="arrow arrow-red"> 一级预警</div>
|
|
|
+ <div class="arrow arrow-red"> 一级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -63,8 +63,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </hc-col>
|
|
|
- <hc-col :span="12">
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="4">
|
|
|
<div class="warn-item-inner-box">
|
|
|
<div class="text-center" style="font-size: 16px;">第二季度</div>
|
|
|
<div class="warn-item-inner-box-title">
|
|
|
@@ -74,7 +74,7 @@
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<div>
|
|
|
- <div class="arrow"> 三级预警</div>
|
|
|
+ <div class="arrow"> 三级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -93,7 +93,7 @@
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<div>
|
|
|
- <div class="arrow arrow-oringe"> 二级预警</div>
|
|
|
+ <div class="arrow arrow-oringe"> 二级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -112,7 +112,7 @@
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<div>
|
|
|
- <div class="arrow arrow-red"> 一级预警</div>
|
|
|
+ <div class="arrow arrow-red"> 一级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -130,8 +130,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </hc-col>
|
|
|
- <hc-col :span="12">
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
<div class="warn-item-inner-box">
|
|
|
<div class="text-center" style="font-size: 16px;">第三季度</div>
|
|
|
<div class="warn-item-inner-box-title">
|
|
|
@@ -141,7 +141,7 @@
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<div>
|
|
|
- <div class="arrow"> 三级预警</div>
|
|
|
+ <div class="arrow"> 三级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -160,7 +160,7 @@
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<div>
|
|
|
- <div class="arrow arrow-oringe"> 二级预警</div>
|
|
|
+ <div class="arrow arrow-oringe"> 二级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -179,7 +179,7 @@
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<div>
|
|
|
- <div class="arrow arrow-red"> 一级预警</div>
|
|
|
+ <div class="arrow arrow-red"> 一级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -197,8 +197,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </hc-col>
|
|
|
- <hc-col :span="12">
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="4">
|
|
|
<div class="warn-item-inner-box">
|
|
|
<div class="text-center" style="font-size: 16px;">第四季度</div>
|
|
|
<div class="warn-item-inner-box-title">
|
|
|
@@ -208,7 +208,7 @@
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<div>
|
|
|
- <div class="arrow"> 三级预警</div>
|
|
|
+ <div class="arrow"> 三级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -227,7 +227,7 @@
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<div>
|
|
|
- <div class="arrow arrow-oringe"> 二级预警</div>
|
|
|
+ <div class="arrow arrow-oringe"> 二级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -246,7 +246,7 @@
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<div>
|
|
|
- <div class="arrow arrow-red"> 一级预警</div>
|
|
|
+ <div class="arrow arrow-red"> 一级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -264,21 +264,21 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </hc-col>
|
|
|
- </hc-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item">
|
|
|
<div class="warn-item-tilte">建设进展缓慢</div>
|
|
|
<div class="warn-item-inner">
|
|
|
- <hc-row style="height: 100%;" :gutter="20">
|
|
|
- <hc-col :span="12">
|
|
|
+ <el-row style="height: 100%;" :gutter="4">
|
|
|
+ <el-col :span="10">
|
|
|
<div class="warn-item-inner-box">
|
|
|
- <div class="text-center" style="font-size: 16px;">第一季度</div>
|
|
|
+ <div class="text-center" style="font-size: 16px;">第二季度</div>
|
|
|
<div class="warn-item-inner-title text-right">该季度投资计划完成比例</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
<!-- <div class="arrow"> |||级预警</div> -->
|
|
|
- <div class="arrow" style="width: auto;min-width:60px"> 三级预警</div>
|
|
|
+ <div class="arrow" style="width: auto;min-width:60px"> 三级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -290,7 +290,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div class="arrow arrow-oringe" style="width: auto;min-width:60px"> 二级预警</div>
|
|
|
+ <div class="arrow arrow-oringe" style="width: auto;min-width:60px"> 二级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -302,7 +302,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div class="arrow arrow-red"> 一级预警</div>
|
|
|
+ <div class="arrow arrow-red"> 一级</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="triangle" />
|
|
|
@@ -314,46 +314,29 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </hc-col>
|
|
|
- <hc-col :span="12">
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="4">
|
|
|
<div class="warn-item-inner-box">
|
|
|
- <div class="text-center" style="font-size: 16px;">第二季度</div>
|
|
|
- <div class="warn-item-inner-box-title">
|
|
|
- <div class="flex-1" />
|
|
|
- <div class="warn-item-inner-title flex-1">该季度投资计划完成比例</div>
|
|
|
- <div class="warn-item-inner-title ml-2 flex-1">前两季度累计投资计化完成比例</div>
|
|
|
- </div>
|
|
|
+ <div class="text-center" style="font-size: 16px;">第一季度</div>
|
|
|
+ <div class="warn-item-inner-title text-right">该季度投资计划完成比例</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div>
|
|
|
- <div class="arrow"> 三级预警</div>
|
|
|
+ <!-- <div class="arrow"> |||级预警</div> -->
|
|
|
+ <div class="arrow" style="width: auto;min-width:60px"> 三级</div>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <div class="triangle" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
- <span><</span>
|
|
|
- <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
- <span>%</span>
|
|
|
+ <div class="container">
|
|
|
+ <div class="triangle" />
|
|
|
</div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
+ <div style="text-align: center; align-items: center;" class="flex">
|
|
|
<span><</span>
|
|
|
<el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
<span>%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div>
|
|
|
- <div class="arrow arrow-oringe"> 二级预警</div>
|
|
|
+ <div class="arrow arrow-oringe" style="width: auto;min-width:60px"> 二级</div>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <div class="triangle" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
- <span><</span>
|
|
|
- <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
- <span>%</span>
|
|
|
+ <div class="container">
|
|
|
+ <div class="triangle" />
|
|
|
</div>
|
|
|
<div style="text-align: right; align-items: center;" class="flex">
|
|
|
<span><</span>
|
|
|
@@ -362,17 +345,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div>
|
|
|
- <div class="arrow arrow-red"> 一级预警</div>
|
|
|
+ <div class="arrow arrow-red"> 一级</div>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <div class="triangle" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
- <span><</span>
|
|
|
- <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
- <span>%</span>
|
|
|
+ <div class="container">
|
|
|
+ <div class="triangle" />
|
|
|
</div>
|
|
|
<div style="text-align: right; align-items: center;" class="flex">
|
|
|
<span><</span>
|
|
|
@@ -381,46 +357,29 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </hc-col>
|
|
|
- <hc-col :span="12">
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
<div class="warn-item-inner-box">
|
|
|
<div class="text-center" style="font-size: 16px;">第三季度</div>
|
|
|
- <div class="warn-item-inner-box-title">
|
|
|
- <div class="flex-1" />
|
|
|
- <div class="warn-item-inner-title flex-1">该季度投资计划完成比例</div>
|
|
|
- <div class="warn-item-inner-title ml-2 flex-1">前三季度累计投资计化完成比例</div>
|
|
|
- </div>
|
|
|
+ <div class="warn-item-inner-title text-right">该季度投资计划完成比例</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div>
|
|
|
- <div class="arrow"> 三级预警</div>
|
|
|
+ <!-- <div class="arrow"> |||级预警</div> -->
|
|
|
+ <div class="arrow" style="width: auto;min-width:60px"> 三级</div>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <div class="triangle" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
- <span><</span>
|
|
|
- <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
- <span>%</span>
|
|
|
+ <div class="container">
|
|
|
+ <div class="triangle" />
|
|
|
</div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
+ <div style="text-align: center; align-items: center;" class="flex">
|
|
|
<span><</span>
|
|
|
<el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
<span>%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div>
|
|
|
- <div class="arrow arrow-oringe"> 二级预警</div>
|
|
|
+ <div class="arrow arrow-oringe" style="width: auto;min-width:60px"> 二级</div>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <div class="triangle" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
- <span><</span>
|
|
|
- <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
- <span>%</span>
|
|
|
+ <div class="container">
|
|
|
+ <div class="triangle" />
|
|
|
</div>
|
|
|
<div style="text-align: right; align-items: center;" class="flex">
|
|
|
<span><</span>
|
|
|
@@ -429,17 +388,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div>
|
|
|
- <div class="arrow arrow-red"> 一级预警</div>
|
|
|
+ <div class="arrow arrow-red"> 一级</div>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <div class="triangle" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
- <span><</span>
|
|
|
- <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
- <span>%</span>
|
|
|
+ <div class="container">
|
|
|
+ <div class="triangle" />
|
|
|
</div>
|
|
|
<div style="text-align: right; align-items: center;" class="flex">
|
|
|
<span><</span>
|
|
|
@@ -448,46 +400,29 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </hc-col>
|
|
|
- <hc-col :span="12">
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="4">
|
|
|
<div class="warn-item-inner-box">
|
|
|
<div class="text-center" style="font-size: 16px;">第四季度</div>
|
|
|
- <div class="warn-item-inner-box-title">
|
|
|
- <div class="flex-1" />
|
|
|
- <div class="warn-item-inner-title flex-1">该季度投资计划完成比例</div>
|
|
|
- <div class="warn-item-inner-title ml-2 flex-1">当年度累计投资计化完成比例</div>
|
|
|
- </div>
|
|
|
+ <div class="warn-item-inner-title text-right">该季度投资计划完成比例</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div>
|
|
|
- <div class="arrow"> 三级预警</div>
|
|
|
+ <!-- <div class="arrow"> |||级预警</div> -->
|
|
|
+ <div class="arrow" style="width: auto;min-width:60px"> 三级</div>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <div class="triangle" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
- <span><</span>
|
|
|
- <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
- <span>%</span>
|
|
|
+ <div class="container">
|
|
|
+ <div class="triangle" />
|
|
|
</div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
+ <div style="text-align: center; align-items: center;" class="flex">
|
|
|
<span><</span>
|
|
|
<el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
<span>%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div>
|
|
|
- <div class="arrow arrow-oringe"> 二级预警</div>
|
|
|
+ <div class="arrow arrow-oringe" style="width: auto;min-width:60px"> 二级</div>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <div class="triangle" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
- <span><</span>
|
|
|
- <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
- <span>%</span>
|
|
|
+ <div class="container">
|
|
|
+ <div class="triangle" />
|
|
|
</div>
|
|
|
<div style="text-align: right; align-items: center;" class="flex">
|
|
|
<span><</span>
|
|
|
@@ -496,17 +431,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warn-item-inner-box-detail">
|
|
|
- <div>
|
|
|
- <div class="arrow arrow-red"> 一级预警</div>
|
|
|
+ <div class="arrow arrow-red"> 一级</div>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <div class="triangle" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; align-items: center;" class="flex">
|
|
|
- <span><</span>
|
|
|
- <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
|
|
|
- <span>%</span>
|
|
|
+ <div class="container">
|
|
|
+ <div class="triangle" />
|
|
|
</div>
|
|
|
<div style="text-align: right; align-items: center;" class="flex">
|
|
|
<span><</span>
|
|
|
@@ -515,8 +443,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </hc-col>
|
|
|
- </hc-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -769,7 +697,7 @@
|
|
|
.arrow {
|
|
|
color: white;
|
|
|
position: relative;
|
|
|
- width: 80px; /* 矩形的宽度 */
|
|
|
+ // width: 80px; /* 矩形的宽度 */
|
|
|
height: 30px; /* 矩形的高度 */
|
|
|
line-height: 30px;
|
|
|
background-color:#06B2F6; /* 矩形的背景颜色 */
|
