<template>
  <div class="nu">
    <div class="main">
      <Breadcrumb :breadData="breadData"></Breadcrumb>
      <div class="nu-tabs mt20">
        <el-row class="uls" :gutter="10">
          <el-col
            class="lis"
            :xs="24"
            :sm="24"
            :md="8"
            :lg="8"
            v-for="(item, index) in nu_tabs"
            :key="index"
            :class="[
              { 'is-active': isActive == index },
              { 'nu-disabled': index != 0 },
            ]"
          >
            <div>
              <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>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="urbanization-level unify-item">
        <h3 class="module-tit">县城镇化水平</h3>
        <div class="ul-con">
          <div class="ul-text">
            <h4>县常住人口城镇化率</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">
            <!-- <div id="map" style="max-width: '100%'; height: 300px"></div> -->
            <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="100"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="area"
                label="地区"
                width="100"
                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: 315px; height: 200px; 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"
                  >
                    <div>
                      <i :style="{ backgroundColor: item.bgc }"></i>
                      {{ item.name }}
                    </div>
                    <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"
                :header-cell-style="{ 'text-align': 'center' }"
              >
                <el-table-column
                  prop="task_name"
                  label="任务名"
                  width="160"
                  fixed
                >
                </el-table-column>
                <el-table-column prop="percentage" label="进度" width="75">
                  <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="80" 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">
                    <div>
                      <i :style="{ backgroundColor: item.bgc }"></i>
                      {{ item.name }}
                    </div>
                    <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: 280px"></div>
          </div>
        </el-col>
      </el-row>
      <div class="app-scen unify-item">
        <h3 class="module-tit">应用场景</h3>
        <p class="as-tabs">丽水综合执法置能化提升</p>
        <div class="as-con">
          <div class="current-task">
            <h4>当前任务</h4>
            <div class="tp-con">
              <div
                id="circle_3"
                style="width: 315px; height: 200px; margin: 20px 0"
              ></div>
              <div class="tp-text">
                <p>总任务<span>12</span>项</p>
                <ul>
                  <li v-for="(item, index) in as_info" :key="index">
                    <div>
                      <i :style="{ backgroundColor: item.bgc }"></i>
                      {{ item.name }}
                    </div>
                    <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: 280px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import geoJson from "@/assets/json/yunhe.json";
let one, two, three, four, five, six, seven;
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
  components: { Breadcrumb },
  data() {
    return {
      breadData: {
        page_name: "新型城镇化",
        annual_target: "暂无数据",
        leading: "县发展和改革局",
      },
      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_map();
    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, '*');
    });
  },
  methods: {
    tableRowClassName({ row }) {
      if (row.area == "青田县") {
        return "table-target";
      } else {
        return "";
      }
    },
    init_map() {
      var that = this;
      that.$echarts.registerMap("yunhe", geoJson);
      var myChart2 = that.$echarts.init(document.getElementById("map"));
      var option = {
        series: [
          {
            type: "map",
            map: "yunhe",
            aspectScale: 1, //地图长度比
            label: {
              show: true,
            },
            itemStyle: {
              borderColor: "#1492ff",
              areaColor: "#edf4ff",
            },
          },
        ],
        goe: {
          regions: {
            label: {
              show: true,
            },
          },
        },
      };
      myChart2.setOption(option);
    },
    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],
          },
        ],
        grid: {
          top: "15%",
          left: "1%",
          right: "1%",
          bottom: "10%",
          containLabel: true,
        },
      });
      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"],
        grid: {
          top: "15%",
          left: "1%",
          right: "1%",
          bottom: "15%",
          containLabel: true,
        },
      });
      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: ["50%", "80%"], // 半径
            center: ["50%", "45%"], // 位置
            label: {
              normal: {
                show: true,
                position: "outer",
                formatter: "{b}\n{d}%",
                textStyle: {
                  fontSize: 14,
                },
              },
            },
            data: this.task_completion_info,
            itemStyle: {
              borderWidth: 5,
              borderColor: "#fff",
            },
          },
        ],
        grid: {
          top: "20%",
          left: "1%",
          right: "1%",
          bottom: "5%",
          containLabel: false,
        },
      });
      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: ["50%", "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: "1%",
          right: "1%",
          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: ["50%", "80%"], // 半径
            center: ["50%", "45%"], // 位置
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{b}\n{d}%",
                textStyle: {
                  fontSize: 14,
                },
              },
            },
            data: this.as_info,
            itemStyle: {
              borderWidth: 5,
              borderColor: "#fff",
            },
          },
        ],
        grid: {
          top: "20%",
          left: "1%",
          right: "1%",
          bottom: "5%",
          containLabel: false,
        },
      });
      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: "1%",
          right: "1%",
          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% - 20px);
  }
}
.main {
  margin: 0px auto;
  padding: 20px 0px 1px;
}
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;
  flex-direction: column;
  // justify-content: space-between;
  align-items: center;
  margin: 20px 0 12px;
  width: 100%;
  .tp-text {
    width: 100%;
    color: #666;
    p {
      font-size: 18px;
      margin-bottom: 20px;
      text-align: center;
      span {
        color: #333;
        font-size: 20px;
        margin: 0 8px;
      }
    }
    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      li {
        width: 60%;
        margin: 12px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        div {
          i {
            display: inline-block;
            width: 10px;
            height: 10px;
          }
        }
      }
    }
  }
}
.nu-tabs {
  background-color: #fff;
  border-radius: 4px;
  .uls {
    padding: 12px 20px 0;
    margin-bottom: 20px;
    font-size: 18px;
    .lis {
      // 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 {
    padding-top: 20px;
    .ul-text {
      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 {
      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
.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 {
    h4 {
      font-size: 18px;
      font-weight: 600;
    }
  }
}
</style>
<style>
.ul-con .table-target {
  background-color: #a1defc;
}
</style>