<template>
  <div class="nu">
    <div class="main">
      <Breadcrumb :breadData="breadData"></Breadcrumb>
    <div class="nu-tabs">
      <ul>
        <li
          v-for="(item, index) in nu_tabs"
          :key="index"
          :class="[
            { 'is-active': isActive == index },
            { 'nu-disabled': index != 0 },
          ]"
        >
          <p v-if="index == 0">{{ item.name }}</p>
          <el-tooltip
            v-else
            class="item"
            effect="effect"
            content="建设中..."
            popper-class="sy-tooltip"
            placement="top"
            :visible-arrow="false"
          >
            <p>{{ item.name }}</p>
          </el-tooltip>
        </li>
      </ul>
    </div>
    <div class="urbanization-level unify-item">
      <h3 class="module-tit">{{myCity}}县城镇化水平</h3>
      <div class="ul-con">
        <div class="ul-text">
          <h4>{{myCity}}县常住人口城镇化率</h4>
          <div>
            2020年
            <p style="color: #21c259"><span>61.82</span>%</p>
          </div>
          <div>
            2021年目标
            <p style="color: #000"><span>63</span>%</p>
          </div>
        </div>
        <div class="ul-img">
          <img src="../assets/images/sy_map.png" alt="" width="200"/>
        </div>
        <div class="ul-table">
          <el-table
            :data="ul_table"
            style="width: 100%; color: #333; font-size: 16px"
            size="mini"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="rank"
              label="排名"
              width="110"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="area"
              label="地区"
              width="110"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="percentage"
              width="110"
              label="城镇化率"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <div class="old-community unify-item">
          <h3 class="module-tit">老旧小区改造</h3>
          <div class="oc-text">
            <h4>全县老旧小区改造</h4>
            <div>
              <div>
                2021年目标值
                <span style="color: #333"><i>6</i>个</span>
              </div>
            </div>
          </div>
          <div id="bar_1" style="width: 100%; height: 320px"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <div class="unify-item">
          <h3 class="module-tit">未来社区建设</h3>
          <div class="oc-text">
            <h4>未来社区建设</h4>
            <div>
              <div>
                截至2021年第一季度
                <span style="color: #21c259"><i>3.9</i>亿元</span>
              </div>
              <div>
                2021年目标值
                <span style="color: #333"><i>5</i>亿元</span>
              </div>
            </div>
          </div>
          <div id="line_1" style="width: 100%; height: 320px"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <div class="task-practicable unify-item">
          <h3 class="module-tit">年度任务落实情况</h3>
          <div class="tp-con">
            <div
              id="circle_1"
              style="width: 48%; height: 160px; margin: 20px 0"
            ></div>
            <div class="tp-text">
              <p>总任务<span>12</span>项</p>
              <ul>
                <li v-for="(item, index) in task_completion_info" :key="index">
                  <i :style="{ backgroundColor: item.bgc }"></i>
                  {{ item.name }}
                  <span>{{ item.proportion }}</span>
                  <span style="font-size: 18px; color: #333"
                    >{{ item.value }}项</span
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="tp-table">
            <el-table
              :data="tp_table"
              style="width: 100%; color: #333; font-size: 16px"
            >
              <el-table-column
                prop="task_name"
                label="任务名"
                width="339"
                fixed
              >
              </el-table-column>
              <el-table-column prop="percentage" label="进度" width="80">
                <template slot-scope="scope">
                  <span
                    :style="{
                      color:
                        scope.row.status === '完成'
                          ? '#16BE50'
                          : scope.row.status === '正常'
                          ? '#1492ff'
                          : '#D40000',
                      fontWeight: '600',
                    }"
                  >
                    {{ scope.row.percentage }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="status_img" width="120" label="状态">
                <template slot-scope="scope">
                  <img :src="scope.row.status_img" width="56" height="22" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <div class="unify-item characteristic-town">
          <h3 class="module-tit">特色小镇数量</h3>
          <div class="tp-con">
            <div
              id="circle_2"
              style="width: 48%; height: 160px; margin: 20px 0"
            ></div>
            <div class="tp-text">
              <p>总数<span>14</span>个</p>
              <ul>
                <li v-for="(item, index) in ct_info" :key="index">
                  <i :style="{ backgroundColor: item.bgc }"></i>
                  {{ item.name }}
                  <span>{{ item.proportion }}</span>
                  <span style="font-size: 18px; color: #333"
                    >{{ item.value }}项</span
                  >
                </li>
              </ul>
            </div>
          </div>
          <div id="bar_2" style="width: 100%; height: 235px"></div>
        </div>
      </el-col>
    </el-row>
    <div class="app-scen unify-item">
      <h3 class="module-tit">应用场景</h3>
      <p class="as-tabs">{{myCity}}综合执法置能化提升</p>
      <div class="as-con">
        <div class="current-task">
          <h4>当前任务</h4>
          <div class="tp-con">
            <div
              id="circle_3"
              style="width: 48%; height: 160px; margin: 20px 0"
            ></div>
            <div class="tp-text">
              <p>总任务<span>12</span>项</p>
              <ul>
                <li v-for="(item, index) in as_info" :key="index">
                  <i :style="{ backgroundColor: item.bgc }"></i>
                  {{ item.name }}
                  <span>{{ item.proportion }}</span>
                  <span style="font-size: 18px; color: #333"
                    >{{ item.value }}项</span
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="current-task">
          <h4>近一年执法完成情况</h4>
          <div id="bar_3" style="width: 100%; height: 235px"></div>
        </div>
      </div>
    </div>
    </div>
    
  </div>
</template>

<script>
  let one,two,three,four,five,six,seven;
import Breadcrumb from "../components/Breadcrumb.vue";
let _myCityName="青田县";
export default {
  components: { Breadcrumb },
  data() {
    return {
      myCity:'青田',
      myCityName:_myCityName,
      breadData: {
        page_name: "新型城镇化",
        annual_target: "暂无数据",
        leading: _myCityName+"发展和改革局",
      },
      isActive: 0,
      nu_tabs: [
        {
          name: "总体情况",
        },
        {
          name: "促进中心城市、县城和小城镇协调发展",
        },
        {
          name: "总打造海绵城市、韧性城市",
        },
        {
          name: "加快城市有机更新",
        },
        {
          name: "中心城市能级提升",
        },
      ],
      ul_table: [
        {
          rank: 1,
          area: "莲都区",
          percentage: "76.43%",
        },
		{
		  rank: 2,
		  area: "云和县",
		  percentage: "73.1%",
		},
        {
          rank: 3,
          area: "龙泉市",
          percentage: "66.53%",
        },
        {
          rank: 4,
          area: "庆元县",
          percentage: "63.5%",
        },
        {
          rank: 5,
          area: "景宁县",
          percentage: "58.21%",
        },
        {
          rank: 6,
          area: "缙云县",
          percentage: "56.82%",
        },
        {
          rank: 7,
          area: "遂昌县",
          percentage: "55.03%",
        },
        {
          rank: 8,
          area: "青田县",
          percentage: "53.1%",
        },
				{
         rank: 9,
         area: "松阳县",
         percentage: "47.71%",
       },
      ],
      task_completion_info: [
        {
          value: 3,
          name: "正常",
          proportion: "25%",
          bgc: "#1492ff",
        },
        {
          value: 6,
          name: "完成",
          proportion: "50%",
          bgc: "#55D081",
        },
        {
          value: 3,
          name: "滞后",
          proportion: "25%",
          bgc: "#E70101",
        },
      ],
      tp_table: [
        {
          task_name: "开工老旧小区改造项目20个",
          percentage: "15%",
          status: "正常",
          status_img: require("../assets/images/normal.jpg"),
        },
        {
          task_name: "开展省级“街容示范街”建设",
          percentage: "0%",
          status: "滞后",
          status_img: require("../assets/images/lag.png"),
        },
        {
          task_name: "“丽水山居图”重要节点项目10个",
          percentage: "60%",
          status: "正常",
          status_img: require("../assets/images/normal.jpg"),
        },
        {
          task_name: "兼顾人防工程总量突破800万平方米",
          percentage: "100%",
          status: "完成",
          status_img: require("../assets/images/finish.jpg"),
        },
      ],
      ct_info: [
        {
          value: 1,
          name: "命名",
          proportion: "7.14%",
          bgc: "#1492ff",
        },
        {
          value: 10,
          name: "创建",
          proportion: "71.43%",
          bgc: "#15BF51",
        },
        {
          value: 3,
          name: "培育",
          proportion: "21.43%",
          bgc: "#64779C",
        },
      ],
      as_info: [
        {
          value: 3,
          name: "紧急",
          proportion: "25%",
          bgc: "#1492ff",
        },
        {
          value: 6,
          name: "重要",
          proportion: "50%",
          bgc: "#55D081",
        },
        {
          value: 3,
          name: "一般",
          proportion: "25%",
          bgc: "#E70101",
        },
      ]
    };
  },
  mounted() {
    this.init_bar_1();
    this.init_line_1();
    this.init_circle_1();
    this.init_circle_2();
    this.init_bar_2();
    this.init_circle_3();
    this.init_bar_3();
    window.addEventListener("resize", function (e) {
      window.parent.postMessage(document.body.scrollHeight, '*');
    });
    // let _this =this;
    // window.onresize = () => {
    //     return (() => {
    //      _this.init_bar_1();
    //      _this.init_line_1();
    //      _this.init_circle_1();
    //      _this.init_circle_2();
    //      _this.init_bar_2();
    //      _this.init_circle_3();
    //      _this.init_bar_3();
    //     })();
    // };
  },
  methods: {
    tableRowClassName({row}){
      if(row.area==this.myCity+"县"){
        return "table-target"
      }else{
        return ''
      }
    },
    init_bar_1() {
      if (one != null && one != "" && one != undefined) {
        one.dispose();//销毁
      }
      one = this.$echarts.init(document.getElementById("bar_1"));
      one.setOption({
        tooltip: {
          show: true, // 是否显示提示框，默认为true
          trigger: "item", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
          },
          padding: 5,
          textStyle: {
            // 提示框内容的样式
            color: "#666",
          },
        },
        legend: {
          x: "center",
          y: "bottom",
          textStyle: {
            fontSize: 14,
          },
          data: ["已开工", "2021年目标"],
        },
        // -
        //  ------  X轴 ------
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#666",
            },
          },
          axisLabel: {
            rotate: 30,
            interval: 0,
            formatter: function (params) {
              var val = "";
              if (params.length > 4) {
                val = params.substr(0, 4) + "...";
                return val;
              } else {
                return params;
              }
            },
          },
          show: true, // 是否显示
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          nameLocation: "end", // 轴名称相对位置
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#999",
            fontSize: 12,
          },
          data: [
            "市本级",
            "莲都区",
            "青田县",
            "缙云县",
            "庆元县",
            "松阳县",
            "遂昌县",
            "云和县",
            "景宁县",
            "龙泉市",
          ],
        },
        //   ------   y轴  ----------
        yAxis: {
          name: "%", // 轴名称
          show: true, // 是否显示
          position: "left", // y轴位置
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型，默认为 ‘category’
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#333",
            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          splitArea: {
            // 网格区域
            show: false, // 是否显示，默认为false
          },
        },
        //  -------   内容数据 -------
        series: [
          {
            name: "2021年目标", // 序列名称
            type: "bar", // 类型
            barGap: "-100%",
            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
            label: {
              // 图形上的文本标签
              show: false,
              position: "insideTop", // 相对位置
              rotate: 0, // 旋转角度
              color: "#999",
            },
            itemStyle: {
              // 图形的形状
              normal: {
                color: "#D9D9DA",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#333",
                    fontSize: 14,
                  },
                },
              },
            },
            barWidth: 20, // 柱形的宽度
            barCategoryGap: "10%", // 柱形的间距
            data: [0, 3, 5, 1, 0, 0, 5, 6, 0, 0],
          },
          {
            name: "已开工", // 序列名称
            type: "bar", // 类型
            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
            label: {
              // 图形上的文本标签
              show: false,
              position: "insideTop", // 相对位置
              rotate: 0, // 旋转角度
              color: "#999",
            },
            itemStyle: {
              // 图形的形状
              normal: {
                color: "#1492ff",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#333",
                    fontSize: 14,
                  },
                },
              },
            },
            barWidth: 20, // 柱形的宽度
            barCategoryGap: "10%", // 柱形的间距
            data: [0, 2, 0, 0, 0, 0, 1, 0, 0, 0],
          },
        ],
      });
      window.addEventListener("resize", () => {
        one.resize();
      });
    },
    init_line_1() {
      if (two != null && two != "" && two != undefined) {
        two.dispose();//销毁
      }
      two = this.$echarts.init(document.getElementById("line_1"));
      two.setOption({
        legend: {
          orient: "horizontal",
          x: "center",
          y: "bottom",
          data: ["累计投资同比增长率"],
          textStyle: {
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#333",
              fontSize: 14,
            },
          },
          data: ["1月", "2月", "3月", "4月", "5月"],
        },
        yAxis: {
          type: "value",
          name: "%",
        },
        series: [
          {
            name: "累计投资同比增长率",
            data: [0.5, 0.6, 0.8, 0.9, 1.1],
            type: "line",
          },
        ],
        color: ["#1492ff"],
      });
      window.addEventListener("resize", () => {
        two.resize();
      });
    },
    init_circle_1() {
      if (three != null && three != "" && three != undefined) {
        three.dispose();//销毁
      }
      three = this.$echarts.init(document.getElementById("circle_1"));
      three.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ["#1492ff", "#55D081", "#E70101"],
        series: [
          {
            name: "任务落实情况",
            type: "pie",
            radius: ["60%", "90%"], // 半径
            center: ["50%", "50%"], // 位置
            label: {
              normal: {
                show: true,
                position: "outer",
                formatter: "{b}\n{d}%",
                textStyle: {
                  fontSize: 14,
                },
              },
            },
            data: this.task_completion_info,
            itemStyle: {
              borderWidth: 5,
              borderColor: "#fff",
            },
          },
        ],
      });
      window.addEventListener("resize", () => {
        three.resize();
      });
    },
    init_circle_2() {
      if (four != null && four != "" && four != undefined) {
        four.dispose();//销毁
      }
      four = this.$echarts.init(document.getElementById("circle_2"));
      four.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ["#1492ff", "#15BF51", "#64779C"],
        series: [
          {
            name: "特色小镇数量",
            type: "pie",
            radius: ["60%", "90%"], // 半径
            center: ["50%", "50%"], // 位置
            label: {
              normal: {
                show: true,
                position: "inner",
                formatter: "{c}",
                textStyle: {
                  fontSize: 14,
                },
              },
            },
            data: this.ct_info,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#fff",
            },
          },
        ],
      });
      window.addEventListener("resize", () => {
        four.resize();
      });
    },
    init_bar_2() {
      if (five != null && five != "" && five != undefined) {
        five.dispose();//销毁
      }
      five = this.$echarts.init(document.getElementById("bar_2"));
      five.setOption({
        title: {
          text: "各区县2021年投资完成情况",
          textStyle: {
            fontSize: 16,
            color: "#666",
          },
          padding: 5,
        },
        tooltip: {
          show: true, // 是否显示提示框，默认为true
          trigger: "item", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
          },
          padding: 5,
          textStyle: {
            // 提示框内容的样式
            color: "#666",
          },
        },
        grid: {
          top: "25%",
          left: "3%",
          right: "8%",
          bottom: "3%",
          containLabel: true,
        },
        // ---- gird区域 ---
        //  ------  X轴 ------
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#666",
            },
          },
          axisLabel: {
            rotate: 30,
            interval: 0,
            formatter: function (params) {
              var val = "";
              if (params.length > 4) {
                val = params.substr(0, 4) + "...";
                return val;
              } else {
                return params;
              }
            },
          },
          show: true, // 是否显示
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          nameLocation: "end", // 轴名称相对位置
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#999",
            fontSize: 14,
          },
          data: [
            "市本级",
            "莲都",
            "龙泉",
            "青田",
            "松阳",
            "庆元",
            "缙云",
            "遂昌",
            "云和",
            "景宁",
          ],
        },
        //   ------   y轴  ----------
        yAxis: {
          show: true, // 是否显示
          name: "单位/亿元", // 轴名称
          position: "left", // y轴位置
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型，默认为 ‘category’
          nameLocation: "end", // 轴名称相对位置value
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#666",
            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
            fontSize: 14,
          },
          splitArea: {
            // 网格区域
            show: false, // 是否显示，默认为false
          },
        },
        //  -------   内容数据 -------
        series: [
          {
            name: "完成情况", // 序列名称
            type: "bar", // 类型
            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
            label: {
              // 图形上的文本标签
              show: false,
              position: "insideTop", // 相对位置
              rotate: 0, // 旋转角度
              color: "#999",
            },
            itemStyle: {
              // 图形的形状
              color: "#48A1FF",
            },
            barWidth: 15, // 柱形的宽度
            barCategoryGap: "10%", // 柱形的间距
            data: [0.63, 0.6, 2.62, 2.6, 1.58, 1.35, 2.78, 0.5, 1.6, 1.4],
          },
        ],
      });
      window.addEventListener("resize", () => {
        five.resize();
      });
    },
    init_circle_3() {
      if (six != null && six != "" && six != undefined) {
        six.dispose();//销毁
      }
      six = this.$echarts.init(document.getElementById("circle_3"));
      six.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ["#1492ff", "#55D081", "#E70101"],
        series: [
          {
            name: "当前任务",
            type: "pie",
            radius: ["60%", "90%"], // 半径
            center: ["50%", "50%"], // 位置
            label: {
              normal: {
                show: true,
                position: "outer",
                formatter: "{b}\n{d}%",
                textStyle: {
                  fontSize: 14,
                },
              },
            },
            data: this.as_info,
            itemStyle: {
              borderWidth: 5,
              borderColor: "#fff",
            },
          },
        ],
      });
      window.addEventListener("resize", () => {
        six.resize();
      });
    },
    init_bar_3() {
      if (seven != null && seven != "" && seven != undefined) {
        seven.dispose();//销毁
      }
      seven = this.$echarts.init(document.getElementById("bar_3"));
      seven.setOption({
        tooltip: {
          show: true, // 是否显示提示框，默认为true
          trigger: "item", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
          },
          padding: 5,
          textStyle: {
            // 提示框内容的样式
            color: "#666",
          },
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "8%",
          bottom: "3%",
          containLabel: true,
        },
        // ---- gird区域 ---
        //  ------  X轴 ------
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#666",
            },
          },
          axisLabel: {
            rotate: 30,
            interval: 0,
          },
          show: true, // 是否显示
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          nameLocation: "end", // 轴名称相对位置
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#999",
            fontSize: 14,
          },
          data: [
            "202008",
            "202009",
            "202010",
            "202011",
            "202012",
            "202101",
            "202102",
            "202103",
            "202104",
            "202105",
            "202106"
          ],
        },
        //   ------   y轴  ----------
        yAxis: {
          show: true, // 是否显示
          name: "单位：项", // 轴名称
          position: "left", // y轴位置
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型，默认为 ‘category’
          nameLocation: "end", // 轴名称相对位置value
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#666",
            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
            fontSize: 14,
          },
          splitArea: {
            // 网格区域
            show: false, // 是否显示，默认为false
          },
        },
        //  -------   内容数据 -------
        series: [
          {
            name: "执法完成情况", // 序列名称
            type: "bar", // 类型
            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
            label: {
              // 图形上的文本标签
              show: false,
              position: "insideTop", // 相对位置
              rotate: 0, // 旋转角度
              color: "#999",
            },
            itemStyle: {
              // 图形的形状
              color: "#48A1FF",
            },
            barWidth: 15, // 柱形的宽度
            barCategoryGap: "10%", // 柱形的间距
            data: [18, 11, 7, 11, 5, 9, 6, 11, 3, 11,11],
          },
        ],
      });
      window.addEventListener("resize", () => {
        seven.resize();
      });
    }
  },
};
</script>

<style lang="scss" scoped>
@media screen and(min-width:1200px) {
  #app {
    width: 1200px;
    background: #efefef !important;
  }
  .main {
    width: 1200px !important;
  }
}
@media screen and(max-width:1200px) {
  .main {
    width: calc(100% - 40px);
  }
}
.main {
 
  margin: 0px auto;
  padding: 20px 0px;
}
h3 {
  border-bottom: 1px solid #ddd;
}
.oc-text {
  width: 90%;
  margin: 0 auto;
  padding: 20px 20px 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  margin-top: 20px;
  h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  i {
    font-style: normal;
    font-size: 20px;
  }
  & > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 20px 0;
    color: #666;
  }
}
.tp-con {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 12px;
  .tp-text {
    width: 48%;
    color: #666;
    p {
      font-size: 18px;
      margin-bottom: 20px;
      span {
        color: #333;
        font-size: 20px;
        margin: 0 8px;
      }
    }
    li {
      margin: 12px 0;
      i {
        display: inline-block;
        width: 10px;
        height: 10px;
      }
      span {
        margin: 0 12px;
      }
    }
  }
}
.nu-tabs {
  ul {
    display: flex;
    padding: 12px 20px 0;
    background-color: #fff;
    margin-bottom: 20px;
    font-size: 18px;
    flex-wrap: wrap;
    border-radius: 4px;
    li {
      min-width: 150px;
      margin-bottom: 12px;
      padding: 12px;
      margin-right: 12px;
      background-color: #f1f1f1;
      text-align: center;
      border-radius: 4px;
      white-space: nowrap;
      cursor: pointer;
    }
    .is-active {
      color: #fff;
      background-color: #1492ff;
    }
    .nu-disabled {
      color: #999;
    }
  }
}
.urbanization-level {
  .ul-con {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    .ul-text {
      width: 28%;
      padding: 20px 20px 0;
      border: 1px solid #ddd;
      height: 120px;
      overflow: auto;
      h4 {
        font-weight: 600;
        margin-bottom: 8px;
        font-size: 18px;
      }
      div {
        display: flex;
        align-items: center;
        color: #666;
        justify-content: space-between;
        margin: 12px 0;
        span {
          font-size: 20px;
        }
      }
    }
    .ul-img{
      width: 35%;
      img{
        width: 100%;
        height: auto;
      }
    }
    >>> .table-target{
      background-color: #A1DEFC;
    }
  }
}
.task-practicable {
  .tp-table {
    margin-bottom: 20px;
    >>> .el-table__header {
      display: none;
    }
  }
}
.app-scen {
  .as-tabs {
    display: inline-block;
    padding: 12px 20px;
    color: #fff;
    background-color: #1492ff;
    border-radius: 4px;
    margin: 12px 0;
    cursor: pointer;
  }
  .as-con {
    display: flex;
    justify-content: space-between;
    h4{
      font-size: 18px;
      font-weight: 600;
    }
    > div {
      width: 48%;
    }
  }
}
</style>
