<template>
 <div class="main">
         <div class="minHeader">
             <div>
                 <el-breadcrumb separator-class="el-icon-arrow-right">
                     <el-breadcrumb-item><a href="https://szzf.qingtian.gov.cn:18080" class="fs16">首页</a></el-breadcrumb-item>
                     <el-breadcrumb-item :to="{path: '/'}" class="fs18">营商环境市场活力</el-breadcrumb-item>
                 </el-breadcrumb>
             </div>
             <div class="flex mt12 acenter between">
                 <div class="flex acenter">
                     <p class="b fs24 mr12 c3">营商环境市场活力</p>
                     <p class="kuai bradius4 c6dd bgf0f flex acenter jcenter h22">
                         <span class="el-icon-d-arrow-right icon16 cril flex acenter jcenter"></span>
                         <span class="fs14">正常</span>
                     </p>
                 </div>
                 <div>牵头单位: {{myCityName}}发展和改革局</div>
             </div>
         </div>
         <div class="mt20 getgov">
             <el-tabs type="border-card" class="minTop">
                 <el-tab-pane label="政府工作报告任务落实" class="flex">
                     <div class="w30 flex acenter jcenter gavo">
                         <p class="icon82 mr20">截止四月底前完成进度</p>
                         <el-progress type="circle" :percentage="40.75" :stroke-width="10" :width="100">
                         </el-progress>
                     </div>
                     <div class="w70 flex acenter around">
                         <div class="flex column acenter">
                             <p class="b fs20 c3">14</p>
                             <p class="c6dd bgf0f fs14 tapd b">正常</p>
                         </div>
                         <div class="bdash"></div>
                         <div class="flex column acenter">
                             <p class="b fs20 c3">1</p>
                             <p class="bgff5 cff8 fs14 tapd b">预警</p>
                         </div>
                         <div class="bdash"></div>
                         <div class="flex column acenter">
                             <p class="b fs20 c3">0</p>
                             <p class="bgffe cd4 fs14 tapd b">滞后</p>
                         </div>
                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="民营经济发展监测">民营经济发展监测</el-tab-pane>
                 <el-tab-pane label="无感检测">无感检测</el-tab-pane>
             </el-tabs>
             <p class="govtig fs14">营商环境市场活力综合应用定义</p>
         </div>
         <div class="market mt20">
             <div class="flex between">
                 <div class="title">
                     <p class="fs24 b c3">营商环境市场化</p>
                     <p class="titbg"></p>
                 </div>
                 <div class="fs20 c3 b">8.70 <span class="c149">%</span></div>
             </div>
             <div class="mt20 flex between">
                 <div class="w49 bords mr20">
                     <p class="fs24 b c3 mt20 ml20">知识产权保护</p>
                     <div class="p20">
                         <p class="textCenter b fs18 c3">2021年每万人高价值发明专用有数</p>
                         <div class="flex between mt20">
                             <p>单位 (万人)</p>
                             <p>知识产权案件实际履行率 <span class="c3 b">68%</span> </p>
                         </div>
                         <div class="zhan mt12">
                             <div id="container1" style="max-width: 100%;height: 280px;"></div>
                         </div>
                     </div>
                 </div>
                 <div class="w49 bords">
                     <p class="fs24 b c3 mt20 ml20">企业金融支持服务</p>
                     <div class="flex between p20">
                         <div class="zhan1" id="map"></div>
                         <div class="w36 flex acenter">
                             <div class="w100">
                                 <div>
                                     <p class="c149 bborder b fs18">6000 亿元</p>
                                     <p class="c9">浙里掌上贷累计</p>
                                     <p class="c9">服务企业授信金额</p>
                                 </div>
                                 <div class="mt50">
                                     <p class="bborder c15b b fs18">678 家</p>
                                     <p class="c9">境内外上市公司数量</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="market mt20">
             <div class="flex between">
                 <div class="title">
                     <p class="fs24 b c3">营商环境法制化</p>
                     <p class="titbg"></p>
                 </div>
                 <div class="fs20 c3 b">34.8 <span class="c149">%</span></div>
             </div>
             <p class="mborder"></p>
             <div>
                 <div class="mt30">
                     <p class="textCenter fs24 b c3">平台经济智能管理</p>
                     <div class="flex around mt12">
                         <div class="textCenter icon300 bgedf flex jcenter column bradius2">
                             <p class="c149 fs20 b">998条</p>
                             <p class="fs16 c6 mt5">网络交易风险检测发现</p>
                         </div>
                         <div class="textCenter icon300 bgf0f flex jcenter column bradius2">
                             <p class="c15b fs20 b">75%</p>
                             <p class="fs16 c6 mt5">网络交易风险闭环处理率</p>
                         </div>
                         <div class="textCenter icon300 bgff5 flex jcenter column bradius2">
                             <p class="cff8 fs20 b">233个</p>
                             <p class="fs16 c6 mt5">实施反垄断合规辅导的重点企业数量</p>
                         </div>
                     </div>
                 </div>
                 <div class="mt30">
                     <p class="textCenter fs24 b c3">信用评价、监管和惩罚</p>
                     <div class="flex around mt12">
                         <div class="w45">
                             <div class="b c3">
                                 <span>·</span>
                                 <span>严重失信企业情况</span>
                             </div>
                             <div class="flex around mt12">
                                 <div class="flex column acenter">
                                     <div class="mincon">
                                         <el-progress type="circle" :percentage="90" color="#37cc6a"
                                             :stroke-width="10" :width="100" :show-text="false">
                                         </el-progress>
                                         <img src='../assets/images/icon.png' style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
                                     </div>
                                     <p class="c15b mt5 b">90%</p>
                                     <p class="c3">目标值</p>
                                 </div>
                                 <div class="flex column acenter">
                                     <div class="mincon">
                                         <el-progress type="circle" :percentage="70" color="#2690f3"
                                             :stroke-width="10" :width="100" :show-text="false">
                                         </el-progress>
                                         <img  src='../assets/images/icon.png' style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
                                     </div>
                                     <p class="c149 mt5 b">70%</p>
                                     <p class="c3">目标值</p>
                                 </div>
                                 <div class="flex column acenter icon100">
                                     <div class="mincon">
                                         <el-progress type="circle" :percentage="100" color="#ff8126"
                                             :stroke-width="10" :width="100" :show-text="false">
                                         </el-progress>
                                         <img  src='../assets/images/icon.png' style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
                                     </div>
                                     <p class="cff8 mt5 b">21522 个</p>
                                     <p class="c3 w65">严重失信企业总数</p>
                                 </div>
                             </div>
                         </div>
                         <div class="w45">
                             <div class="b c3">
                                 <span>·</span>
                                 <span>行业信用监管</span>
                             </div>
                             <div class="p12">
                                 <div>
                                     <div class="mb20">
                                         <div class="flex between c3 mb8">
                                             <p>目标覆盖率</p>
                                             <p class="b">100%</p>
                                         </div>
                                         <el-progress :stroke-width="10" :percentage="100" :show-text="false"
                                             color="#2690f3"></el-progress>
                                     </div>
                                     <div class="mb20">
                                         <div class="flex between c3 mb8">
                                             <p>当前覆盖率</p>
                                             <p class="b">70%</p>
                                         </div>
                                         <el-progress :stroke-width="10" :percentage="70" :show-text="false"
                                             color="#37cc6a"></el-progress>
                                     </div>
                                 </div>
                                 <div class="flex between">
                                     <div class="textCenter icon130 flex jcenter column bradius2">
                                         <p class="fs22 b">38</p>
                                         <p class="c149 bgedf fs16 mt5 h30">行业部门/个</p>
                                     </div>
                                     <div class="textCenter icon130 flex jcenter column bradius2">
                                         <p class="fs22 b">32</p>
                                         <p class="c15b fs16 bgf0f mt5 h30">已覆盖部门/个</p>
                                     </div>
                                     <div class="textCenter icon130 flex jcenter column bradius2">
                                         <p class="fs22 b">51%</p>
                                         <p class="cff8 fs16 bgff5 mt5 h30">平均问题发现率</p>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="market mt20">
             <div class="flex between">
                 <div class="title">
                     <p class="fs24 b c3">营商环境便利化</p>
                     <p class="titbg"></p>
                 </div>
                 <div class="fs20 c3 b">24.5 <span class="c149">%</span></div>
             </div>
             <div class="mt20 flex between">
                 <div class="w49 bords mr20">
                     <p class="fs24 b c3 mt20 ml20">企业减负2500亿以上</p>
                     <div class="p20">
                         <p class="textCenter b fs18 c3">2021年每万人高价值发明专用有数</p>
                         <div class="flex between mt20">
                             <p>单位 (亿元)</p>
                             <div class="flex">
                                 <div class="flex acenter c3">
                                     <p class="icon13 bg149"></p>
                                     <p>累计减负降本额</p>
                                 </div>
                                 <div class="flex acenter c3 ml20">
                                     <div class="sand">
                                         <p class="line bg37c"></p>
                                         <p class="bg37c crils"></p>
                                     </div>
                                     <p>当月减负降本额</p>
                                 </div>
                             </div>
                         </div>
                         <div class="zhe mt12">
                             <div id="container2" style="max-width: 100%;width: 528px;height: 240px;"></div>
                         </div>
                         <div class="c149 bgedf flex between mt12 h40 pl20 pr20">
                             <p>本年累计减负降本额</p>
                             <p class="b">203.1 亿元</p>
                         </div>
                         <div class="c15b bgf0f flex between mt12 h40 pl20 pr20">
                             <p>任务完成进度</p>
                             <p class="b">46.8%</p>
                         </div>
                     </div>
                 </div>
                 <div class="w49 bords">
                     <p class="fs24 b c3 mt20 ml20">发票电子化应用</p>
                     <div class="p20">
                         <p class="textCenter c3 b fs18">电子发票开具、应用进度</p>
                         <div class="flex column around mt40">
                             <div class="flex around acenter c3 piao1">
                                 <el-progress type="circle" :percentage="98.12" color="#37cc6a" :stroke-width="13"
                                     :width="150"></el-progress>
                                 <div class="mr60">
                                     <p>电子发票开具</p>
                                     <p class="mt12">今年目标<span class="b ml12">60%</span></p>
                                     <p class="mt12">当前进度<span class="b ml12">98.12%</span></p>
                                 </div>
                             </div>
                             <div class="flex around acenter mt40 c3 piao2">
                                 <el-progress type="circle" :percentage="79.42" color="#ff8126" :stroke-width="13"
                                     :width="150"></el-progress>
                                 <div class="mr60">
                                     <p>电子发票开具</p>
                                     <p class="mt12">今年目标<span class="b ml12">200家</span></p>
                                     <p class="mt12">当前进度<span class="b ml12">79.42%</span></p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="market mt20">
             <div class="flex between">
                 <div class="title">
                     <p class="fs24 b c3">营商环境国际化</p>
                     <p class="titbg"></p>
                 </div>
                 <div class="fs20 c3 b">14.6 <span class="c149">%</span></div>
             </div>
             <div class="mt20 flex between">
                 <div class="w49 bords mr20">
                     <div class="flex aend between pr20">
                         <p class="fs24 b c3 mt20 ml20">“跨境贸易便利化”———通关时长</p>
                         <div class="flex fs14">
                             <p class="port active">进口</p>
                             <p class="port">出口</p>
                         </div>
                     </div>
                     <div class="p20">
                         <p class="textCenter b fs18 c3">进口通关时长近6个月趋势</p>
                         <div class="flex between mt20">
                             <p>单位 (小时)</p>
                             <div class="flex">
                                 <div class="flex acenter c3 ml20">
                                     <div class="sand">
                                         <p class="line bgff8"></p>
                                         <p class="bgff8 crils"></p>
                                     </div>
                                     <p>通关时长趋势</p>
                                 </div>
                             </div>
                         </div>
                         <div class="zhe mt12">
                             <div id="container3" style="max-width: 100%;height: 280px;"></div>
                         </div>
                         <div class="c149 bgedf flex between mt12 h40 pl20 pr20">
                             <p>指标: 进口通关时长不超过17小时</p>
                         </div>
                         <div class="c15b bgf0f flex between mt12 h40 pl20 pr20">
                             <p>现状: 2021年4月, 全省进口通关时长为11.18小时</p>
                         </div>
                     </div>
                 </div>
                 <div class="w49 bords">
                     <p class="fs24 b c3 mt20 ml20">企业减负2500亿以上</p>
                     <div class="p20">
                         <p class="textCenter b fs18 c3">2021年每万人高价值发明专用有数</p>
                         <div class="flex between mt20">
                             <p>单位 (M/H)</p>
                             <div class="flex">
                                 <div class="flex acenter c3">
                                     <p class="icon13 bg149"></p>
                                     <p>作业效率趋势</p>
                                 </div>
                             </div>
                         </div>
                         <div class="zhe mt12">
                             <div id="container4" style="max-width: 100%;height: 280px;"></div>
                         </div>
                         <div class="c149 bgedf flex between mt12 h40 pl20 pr20">
                             <p>指标: 港口单船所有岸桥作业效率不低于145M/H</p>
                         </div>
                         <div class="cd4 bgffe flex between mt12 h40 pl20 pr20">
                             <p>现状: 2021年4月, 全省港口单船所有岸桥作业效率不低于143.5M/H</p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>

</template>

<script>
  import geoJson from '@/assets/json/shi.json'
  let one,two,three,four,five;
export default {
  data() {
    return {
        myCityName:"青田县"
    };
  },
  mounted() {
    let _this =this;
    this.init();
    this.init2();
    this.init3();
    this.init4();
    this.init5();
    window.onresize = () => {
        return (() => {
         _this.init();
         _this.init2();
         _this.init3();
         _this.init4();
         _this.init5();
        })();
    };
    window.addEventListener("resize", function (e) {
      window.parent.postMessage(document.body.scrollHeight, '*');
    });
  },
  methods: {
    init() {
      if (one != null && one != "" && one != undefined) {
              one.dispose();//销毁
      }
      one = this.$echarts.init(document.getElementById("container1"));
      one.setOption({
            color: ['#2690f3'],
            xAxis: {
                type: 'category',
                data: ['莲都区', '龙泉市', '青田县', '云和县', '庆元县', '缙云县', '遂昌县', '松阳县', '静宁县', '丽水开发县'],
                axisTick: { // 隐藏刻度线
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#dddddd',  // 坐标轴颜色
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#333', //坐标值得具体的颜色
                        fontSize: 14
                    },
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                splitLine: false,   // 网格线
                min: 0,
                max: 25,
                splitNumber: 5,
                axisLine: {
                    lineStyle: {
                        color: '#333333',
                    }
                }
            },
            series: [{
                data: [5.2, 13.2, 11.2, 13.2, 6.9, 3.9, 14.8, 13.2, 0.1, 9.4],
                type: 'bar',
                label: {  // 在图形上显示每个数据
                    show: true,
                    position: 'top'
                },
                barWidth: 13  // 柱子宽度
            }],
            grid: {
                top: '2%',
                left: '2%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            }

        });
    },
    init2() {
      if (two != null && two != "" && two != undefined) {
              two.dispose();//销毁
      }
      two = this.$echarts.init(document.getElementById("container2"));
      two.setOption({
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            //         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            //     }
            // },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                // name: '年',
                data: ['2021/01', '2021/02', '2021/03', '2021/04', '2021/05'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    lineStyle: {
                        color: '#dddddd',
                    }
                },
                splitLine: false,
                axisLabel: {
                    textStyle: {
                        color: '#333', //坐标值得具体的颜色
                        fontSize: 14
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 250,
                splitNumber: 5,
                splitLine: false,
                axisLine: {
                    lineStyle: {
                        color: '#333333',
                    }
                }
            },
            series: [
                {
                    type: 'bar',
                    barWidth: '20%',
                    itemStyle: {
                        normal: {
                            color: '#1492ff' //柱子的颜色
                        }
                    },
                    data: [75.56, 121.05, 178.37, 210.92, 248.05],
                    label: {  // 在图形上显示每个数据
                        show: true,
                        position: 'top'
                    }
                },
                {
                    type: 'line',
                    symbol: 'circle',/*拐点样式*/
                    symbolSize: 8, //拐点大小
                    itemStyle: {
                        normal: {
                            color: '#37cc6a'    //拐点颜色
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#37cc6a'  //折线颜色
                        }
                    },
                    data: [65.56, 60.56, 88.56, 80.56, 105.56]
                }
            ]
        });
    },
    init3() {
      if (three != null && three != "" && three != undefined) {
              three.dispose();//销毁
      }
      three = this.$echarts.init(document.getElementById("container3"));
      three.setOption({
            color: ['#2690f3'],
            xAxis: {
                type: 'category',
                data: ['2020/12', '2021/01', '2021/02', '2021/03', '2021/04', '2021/05'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#dddddd',
                    }
                },
                boundaryGap: false,  //离零刻度间隔一段距离
                splitLine: false,
                axisLabel: {
                    textStyle: {
                        color: '#333', //坐标值得具体的颜色
                        fontSize: 14
                    },
                    interval: 0
                }
            },
            grid: {
                top: '5%',
                left: '3%',
                right: '5%',
                bottom: '18%',
                containLabel: true
            },
            yAxis: {
                type: 'value',
                min: 10,
                max: 15,
                splitNumber: 5,
                splitLine: false,
                axisLine: {
                    lineStyle: {
                        color: '#333333',
                    }
                }
            },
            series: [{
                data: [14.6, 13.5, 12.6, 12.6, 12.5, 11.8],
                type: 'line',
                smooth: true,
                areaStyle: {},
                label: {
                    show: true,
                    position: 'top'
                },
                itemStyle: {
                    color: {
                        type: 'liner',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#ff6b00' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#edf4ff' // 100% 处的颜色
                        }]
                    }
                }
            }],
        });
    },
    init4() {
      if (four != null && four != "" && four != undefined) {
              four.dispose();//销毁
      }
      four = this.$echarts.init(document.getElementById("container4"));
      four.setOption({
            color: ['#2690f3'],
            xAxis: {
                type: 'category',
                data: ['2020/12', '2021/01', '2021/02', '2021/03', '2021/04', '2021/05'],
                axisLabel: {
                    textStyle: {
                        color: '#333', //坐标值得具体的颜色
                        fontSize: 14
                    },
                    interval: 0
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#dddddd',
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 120,
                max: 145,
                splitNumber: 5,
                splitLine: false,
                axisLine: {
                    lineStyle: {
                        color: '#333333',
                    }
                }
            },
            series: [{
                data: [130.1, 132.4, 134.6, 136.5, 140.0, 143.5],
                type: 'bar',
                label: {
                    show: true,
                    position: 'top'
                },
                barWidth: 20  // 柱子宽度
            }],
            grid: {
                top: '5%',
                left: '3%',
                right: '5%',
                bottom: '18%',
                containLabel: true
            }
        });
    },
    init5() {
      if (five != null && five != "" && five != undefined) {
              five.dispose();//销毁
      }
      five = this.$echarts.init(document.getElementById("map"));
        this.$echarts.registerMap('lishui', geoJson, {});
        var option = {
            series: [
                {
                    type: 'map',
                    mapType: 'lishui',
                    aspectScale: 1,  //地图长度比
                    label: {
                        show: true
                    },
                    itemStyle: {
                        borderColor: '#1492ff',
                        areaColor: '#edf4ff'
                    },
                }
            ],
            goe: {
                regions: {
                    label: {
                        show: true
                    }
                },
            }
        };
        five.setOption(option);
    },
   },
};

</script>

<style lang="scss" scoped>
/* and (min-width:1000px) */
@media screen and (max-width: 1200px) {
    .main {
        width: 100%;
        background-color: #f2f3f5;
        margin: 0px auto;
        padding: 30px 0;
    }
    .minHeader, .market {
        width: calc(100% - 40px);
        box-sizing: border-box;
        border-radius: 4px;
        padding: 20px;
        margin: 20px auto 0;
        background: #fff;
    }
    .minTop {
        width: calc(100% - 40px);
        box-sizing: border-box;
        border-radius: 4px;
        margin: 0 auto;
    }
    .govtig {
        right: 20px !important;
    }
}
@media screen and (min-width: 1200px) {
    .main {
        background-color: #f2f3f5;
        width: 1200px;
        margin: 0px auto;
        padding: 30px 0;
    }
    .minHeader,.market {
        width: 1160px;
        border-radius: 4px;
        padding: 20px 20px 20px;
        background: #fff;
    }
    .minTop {
        width: 1200px;
        border-radius: 4px;
    }
}
.el-breadcrumb__separator[class*=icon] {
    margin: 0 4px !important;
}
.kuai {
    border: 1px solid #6dd993;
    padding: 0 3px;
}
.cril {
    border-radius: 50%;
    background: #15be50;
}
.h22 {
    height: 22px;
}
.w33 {
    width: 33.3%;
}
.w30 {
    width: 30%;
}
.w70 {
    width: 70%;
}
.w50 {
    width: 50%;
}
.w49 {
    width: 49%;
}
.icon82 {
    width: 82px;
}
.getgov {
    position: relative;
}
.govtig {
    position: absolute;
    right: 0px;
    top: 10px;
    border: 1px solid #99cbf9;
    background: #edf4ff;
    color: #1492ff;
    border-radius: 10px;
    height: 20px;
    line-height: 20px;
    width: 220px;
    text-align: center;
}
.el-icon-d-arrow-right:before {
    content: "\e6dc";
    font-size: 14px;
    margin-left: 2px;
    color: #eee;
}
.el-tabs--border-card {
    border-radius: 4px;
    box-shadow: none !important;
    border: 0px solid #dddddd !important;
}
.el-tabs--border-card>.el-tabs__header {
    background-color: #f2f3f5 !important;
    border-bottom: 1px solid #E4E7ED;
    margin: 0;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item {
    margin-right: 12px;
    color: #333 !important;
    border: 1px solid #dddddd !important;
    border-right-color: #dddddd;
    border-left-color: #dddddd;
    border-top-color: #dddddd;
    margin-top: 0px !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    color: #149cff !important;
    background-color: #FFF;
    border-right-color: #DCDFE6;
    border-left-color: #DCDFE6;
    border-top-color: #DCDFE6;
    border-bottom-color: #fff !important;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child {
    margin-left: 0px !important;
}
.el-progress__text {
    font-size: 18px !important;
}
.el-tabs__item {
    width: 180px !important;
    text-align: center;
}
.bdash {
    border-left: 2px dashed #eeeeee;
    height: 60px;
}
.tapd {
    padding: 5px 20px;
    margin-top: 12px;
    border-radius: 2px;
}
.titbg {
    width: 180px;
    border-radius: 10px;
    background: #99cbf9;
    height: 6px;
    margin-top: -8px;
}
.bords {
    border: 1px solid #dddddd;
    border-radius: 4px;
}
.zhan {
    width: 100%;
    height: 280px;
    /* background: #999; */
}
.zhan1 {
    width: 60%;
    height: 358px;
    /* background: #999; */
}
.zhe {
    width: 100%;
    height: 240px;
    /* background: #999; */
}
.w36 {
    width: 36%;
}
.bborder {
    margin-bottom: 10px;
    padding: 5px;
    border-bottom: 2px dashed #dddddd;
}
.mt50 {
    margin-top: 50px;
}
.w100 {
    width: 100%;
}
.mborder {
    width: 100%;
    margin-top: 12px;
    height: 0px;
    border-bottom: 2px dashed #dddddd;
}
.icon300 {
    width: 300px;
    height: 90px;
}
.icon100 {
    width: 100px;
}
.icon130 {
    width: 130px;
}
.h30 {
    height: 30px;
    line-height: 30px;
}
.h40 {
    height: 40px;
    line-height: 40px;
}
.mt5 {
    margin-top: 5px;
}
.mb8 {
    margin-bottom: 8px;
}
.mincon {
    position: relative;
}
.w65 {
    width: 65%;
}
.w45 {
    width: 45%;
}
.icon13 {
    width: 13px;
    height: 13px;
    margin-top: 2px;
    margin-right: 10px;
}
.sand {
    position: relative;
    margin-right: 10px;
}
.line {
    width: 20px;
    height: 2px;
}
.crils {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.mr60 {
    margin-right: 60px;
}
.piao1 .el-progress__text {
    color: #37cc6a !important;
    font-weight: 600;
}
.piao2 .el-progress__text {
    color: #ff8126 !important;
    font-weight: 600;
}
.gavo .el-progress__text {
    color: #333333 !important;
    font-weight: 600;
    font-size: 16px !important;
}
.port {
    /* padding: 2px 5px; */
    border: 1px solid #999999;
    width: 50px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-right: -1px;
    border-radius: 2px;
}
.active {
    border: 1px solid #1492ff;
    color: #1492ff;
}
.aend {
    align-items: flex-end;
}
</style>
<style>
.el-breadcrumb__item:last-child .el-breadcrumb__inner{
    color: #333 !important;
    font-weight: bold;
}
</style>