综合分析左右面板内容及样式,加global.css(el-tree);镇域专题布局修改

src/assets/global.css

@@ -0,0 +1,57 @@
+/* el-tree */
+.el-icon-caret-right:before {
+  display: none;
+}
+
+.el-tree {
+  background: rgba(255, 255, 255, 0) !important;
+  color: #fff;
+  font-family: "PingFangSC SC";
+}
+
+.el-tree-node .is-focusable {
+  background: rgba(255, 255, 255, 0) !important ;
+}
+
+.el-tree-node__content:hover,
+.el-upload-list__item:hover {
+  background: rgba(255, 255, 255, 0) !important;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background: rgba(255, 255, 255, 0) !important;
+}
+
+/* el-collapse */
+
+.el-collapse {
+  border: none;
+}
+.el-collapse-item {
+  border: none;
+}
+.el-collapse-item__header {
+  text-indent: 20px;
+  background: linear-gradient(
+    to top,
+    rgba(79, 172, 254, 0.5),
+    rgba(0, 242, 254, 0.5)
+  );
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  border: none;
+}
+
+.el-collapse-item__wrap {
+  background-color: rgba(255, 255, 255, 0);
+  border: none;
+}
+
+.el-icon-arrow-right:before {
+  content: "";
+}
+.el-icon-arrow-right:after {
+  content: "";
+}

src/components/common/NewSelect.vue

@@ -17,6 +17,10 @@
   </el-select>
 </template>
 <script>
+/**
+ * 下拉框组件
+ * @author: Gao Lu
+ */
 export default {
   name: "NewSelect",
   props: {

src/components/common/TagProblemCard.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="tag-container">
+    <div class="tag-container-img"></div>
+    <div class="tag-container-num">
+      <span>67</span>&nbsp;&nbsp;<span>个</span>
+    </div>
+    <div class="tag-container-type">土地资源问题</div>
+  </div>
+</template>
+<script>
+/**
+ * 图标以及显示问题个数 -- 镇域专题问题栏;
+ * props - data;
+ * data.type -- 问题类型;
+ * data.num -- 问题数量;
+ * @author: Gao Lu
+ */
+export default {
+  name: "TagProblemCard",
+  props: ["data"],
+};
+</script>
+<style lang="less" scoped>
+@tagValueColor: #f19b56;
+.tag-container {
+  position: relative;
+  &-img {
+    width: 70px;
+    height: 70px;
+    background: red;
+    position: absolute;
+    left: 0;
+    top: 15px;
+    background: url("../../assets/image/cardTag.png") no-repeat center;
+    background-size: 100% 100%;
+    // background: url();
+  }
+  &-num {
+    width: 90px;
+    height: 40px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    span:nth-child(1) {
+      font-family: zhihun181;
+      font-weight: bold;
+      color: @tagValueColor;
+      line-height: 30px;
+      font-size: 30px;
+    }
+    span:nth-child(2) {
+      font-size: 16px;
+      font-weight: bold;
+      color: @tagValueColor;
+      line-height: 30px;
+    }
+  }
+  &-type {
+    width: 100px;
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    // background: blue;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: bold;
+    font-family: pingfangSC;
+  }
+}
+</style>

src/config/common.js

@@ -1,239 +1,443 @@
-// 街道
+import publicFun from "@/utils/publicFunction.js";
+
+/**
+ * 街道
+ */
 export const street = {
-    '全部街道':'全部街道',
-    '潍坊新村街道':'潍坊新村街道',
-    '陆家嘴街道':'陆家嘴街道',
-    '周家渡街道':'周家渡街道',
-    '塘桥街道':'塘桥街道',
-    '上钢新村街道':'上钢新村街道',
-    '南码头路街道':'南码头路街道',
-    '沪东新村街道':'沪东新村街道',
-    '金杨新村街道':'金杨新村街道',
-    '洋泾街道':'洋泾街道',
-    '浦兴路街道':'浦兴路街道',
-    '东明路街道':'东明路街道',
-    '花木街道':'花木街道'
-} 
+  全部街道: "全部街道",
+  潍坊新村街道: "潍坊新村街道",
+  陆家嘴街道: "陆家嘴街道",
+  周家渡街道: "周家渡街道",
+  塘桥街道: "塘桥街道",
+  上钢新村街道: "上钢新村街道",
+  南码头路街道: "南码头路街道",
+  沪东新村街道: "沪东新村街道",
+  金杨新村街道: "金杨新村街道",
+  洋泾街道: "洋泾街道",
+  浦兴路街道: "浦兴路街道",
+  东明路街道: "东明路街道",
+  花木街道: "花木街道",
+};
 
-// 街道地址
+/**
+ * 街道地址
+ */
 export const streetLocation = {
-    '全部街道':[31.209453,121.555531],
-    '潍坊新村街道':[31.222874,121.523662],
-    '陆家嘴街道':[31.236490,121.514115],
-    '周家渡街道':[31.182553,121.504840],
-    '塘桥街道':[31.208764,121.521792],
-    '上钢新村街道':[31.175747,121.481091],
-    '南码头路街道':[31.193814,121.514550],
-    '沪东新村街道':[31.273855,121.576895],
-    '金杨新村街道':[31.252801,121.568576],
-    '洋泾街道':[31.241746,121.545513],
-    '浦兴路街道':[31.269637,121.596475],
-    '东明路街道':[31.145477,121.515708],
-    '花木街道':[31.209453,121.555531]
-}
+  全部街道: [31.209453, 121.555531],
+  潍坊新村街道: [31.222874, 121.523662],
+  陆家嘴街道: [31.23649, 121.514115],
+  周家渡街道: [31.182553, 121.50484],
+  塘桥街道: [31.208764, 121.521792],
+  上钢新村街道: [31.175747, 121.481091],
+  南码头路街道: [31.193814, 121.51455],
+  沪东新村街道: [31.273855, 121.576895],
+  金杨新村街道: [31.252801, 121.568576],
+  洋泾街道: [31.241746, 121.545513],
+  浦兴路街道: [31.269637, 121.596475],
+  东明路街道: [31.145477, 121.515708],
+  花木街道: [31.209453, 121.555531],
+};
 
-// 土地资源
+/**
+ * 土壤资源
+ */
 export const soilData = {
-    '全部街道':{
-        A:300,
-        B:200,
-        C:280
-    },
-    '潍坊新村街道':{
-        A:330,
-        B:334,
-        C:250
-    },
-    '陆家嘴街道':{
-        A:400,
-        B:320,
-        C:367
-    },
-    '周家渡街道':{
-        A:240,
-        B:120,
-        C:289
-    },
-    '塘桥街道':{
-        A:120,
-        B:90,
-        C:30
-    },
-    '上钢新村街道':{
-        A:230,
-        B:302,
-        C:210
-    },
-    '南码头路街道':{
-        A:30,
-        B:270,
-        C:280
-    },
-    '沪东新村街道':{
-        A:300,
-        B:150,
-        C:280
-    },
-    '金杨新村街道':{
-        A:182,
-        B:320,
-        C:227
-    },
-    '洋泾街道':{
-        A:300,
-        B:320,
-        C:500
-    },
-    '浦兴路街道':{
-        A:300,
-        B:320,
-        C:230
-    },
-    '东明路街道':{
-        A:300,
-        B:220,
-        C:180
-    },
-    '花木街道':{
-        A:182,
-        B:210,
-        C:182
-    }
-}
+  全部街道: {
+    A: 300,
+    B: 200,
+    C: 280,
+  },
+  潍坊新村街道: {
+    A: 330,
+    B: 334,
+    C: 250,
+  },
+  陆家嘴街道: {
+    A: 400,
+    B: 320,
+    C: 367,
+  },
+  周家渡街道: {
+    A: 240,
+    B: 120,
+    C: 289,
+  },
+  塘桥街道: {
+    A: 120,
+    B: 90,
+    C: 30,
+  },
+  上钢新村街道: {
+    A: 230,
+    B: 302,
+    C: 210,
+  },
+  南码头路街道: {
+    A: 30,
+    B: 270,
+    C: 280,
+  },
+  沪东新村街道: {
+    A: 300,
+    B: 150,
+    C: 280,
+  },
+  金杨新村街道: {
+    A: 182,
+    B: 320,
+    C: 227,
+  },
+  洋泾街道: {
+    A: 300,
+    B: 320,
+    C: 500,
+  },
+  浦兴路街道: {
+    A: 300,
+    B: 320,
+    C: 230,
+  },
+  东明路街道: {
+    A: 300,
+    B: 220,
+    C: 180,
+  },
+  花木街道: {
+    A: 182,
+    B: 210,
+    C: 182,
+  },
+};
 
-// 水资源
+/**
+ * 水资源
+ */
 export const waterData = {
-    '全部街道':{
-        A:300,
-        B:320,
-        C:280
-    },
-    '潍坊新村街道':{
-        A:330,
-        B:334,
-        C:250
-    },
-    '陆家嘴街道':{
-        A:400,
-        B:320,
-        C:367
-    },
-    '周家渡街道':{
-        A:240,
-        B:320,
-        C:289
-    },
-    '塘桥街道':{
-        A:120,
-        B:90,
-        C:101
-    },
-    '上钢新村街道':{
-        A:230,
-        B:300,
-        C:210
-    },
-    '南码头路街道':{
-        A:300,
-        B:240,
-        C:280
-    },
-    '沪东新村街道':{
-        A:300,
-        B:320,
-        C:250
-    },
-    '金杨新村街道':{
-        A:182,
-        B:326,
-        C:400
-    },
-    '洋泾街道':{
-        A:300,
-        B:320,
-        C:240
-    },
-    '浦兴路街道':{
-        A:300,
-        B:320,
-        C:267
-    },
-    '东明路街道':{
-        A:300,
-        B:230,
-        C:280
-    },
-    '花木街道':{
-        A:182,
-        B:210,
-        C:182
-    }
-}
-// 林地资源
+  全部街道: {
+    A: 300,
+    B: 320,
+    C: 280,
+  },
+  潍坊新村街道: {
+    A: 330,
+    B: 334,
+    C: 250,
+  },
+  陆家嘴街道: {
+    A: 400,
+    B: 320,
+    C: 367,
+  },
+  周家渡街道: {
+    A: 240,
+    B: 320,
+    C: 289,
+  },
+  塘桥街道: {
+    A: 120,
+    B: 90,
+    C: 101,
+  },
+  上钢新村街道: {
+    A: 230,
+    B: 300,
+    C: 210,
+  },
+  南码头路街道: {
+    A: 300,
+    B: 240,
+    C: 280,
+  },
+  沪东新村街道: {
+    A: 300,
+    B: 320,
+    C: 250,
+  },
+  金杨新村街道: {
+    A: 182,
+    B: 326,
+    C: 400,
+  },
+  洋泾街道: {
+    A: 300,
+    B: 320,
+    C: 240,
+  },
+  浦兴路街道: {
+    A: 300,
+    B: 320,
+    C: 267,
+  },
+  东明路街道: {
+    A: 300,
+    B: 230,
+    C: 280,
+  },
+  花木街道: {
+    A: 182,
+    B: 210,
+    C: 182,
+  },
+};
+
+/**
+ * 林地资源
+ */
 export const forestryData = {
-    '全部街道':{
-        A:306,
-        B:320,
-        C:280
-    },
-    '潍坊新村街道':{
-        A:330,
-        B:334,
-        C:250
-    },
-    '陆家嘴街道':{
-        A:400,
-        B:320,
-        C:367
-    },
-    '周家渡街道':{
-        A:240,
-        B:320,
-        C:289
-    },
-    '塘桥街道':{
-        A:120,
-        B:190,
-        C:101
-    },
-    '上钢新村街道':{
-        A:230,
-        B:320,
-        C:210
-    },
-    '南码头路街道':{
-        A:300,
-        B:320,
-        C:280
-    },
-    '沪东新村街道':{
-        A:300,
-        B:320,
-        C:280
-    },
-    '金杨新村街道':{
-        A:182,
-        B:320,
-        C:300
-    },
-    '洋泾街道':{
-        A:300,
-        B:320,
-        C:280
-    },
-    '浦兴路街道':{
-        A:50,
-        B:418,
-        C:280
-    },
-    '东明路街道':{
-        A:300,
-        B:320,
-        C:280
-    },
-    '花木街道':{
-        A:182,
-        B:210,
-        C:182
-    }
-}
+  全部街道: {
+    A: 306,
+    B: 320,
+    C: 280,
+  },
+  潍坊新村街道: {
+    A: 330,
+    B: 334,
+    C: 250,
+  },
+  陆家嘴街道: {
+    A: 400,
+    B: 320,
+    C: 367,
+  },
+  周家渡街道: {
+    A: 240,
+    B: 320,
+    C: 289,
+  },
+  塘桥街道: {
+    A: 120,
+    B: 190,
+    C: 101,
+  },
+  上钢新村街道: {
+    A: 230,
+    B: 320,
+    C: 210,
+  },
+  南码头路街道: {
+    A: 300,
+    B: 320,
+    C: 280,
+  },
+  沪东新村街道: {
+    A: 300,
+    B: 320,
+    C: 280,
+  },
+  金杨新村街道: {
+    A: 182,
+    B: 320,
+    C: 300,
+  },
+  洋泾街道: {
+    A: 300,
+    B: 320,
+    C: 280,
+  },
+  浦兴路街道: {
+    A: 50,
+    B: 418,
+    C: 280,
+  },
+  东明路街道: {
+    A: 300,
+    B: 320,
+    C: 280,
+  },
+  花木街道: {
+    A: 182,
+    B: 210,
+    C: 182,
+  },
+};
+
+/**
+ * 综合分析 -- 树状结构图
+ */
+export const treeModel = [
+  {
+    id: publicFun.buildGuid(),
+    type: "所有图层",
+    children: [],
+  },
+  {
+    id: publicFun.buildGuid(),
+    type: "预设模型",
+    children: [
+      {
+        id: publicFun.buildGuid(),
+        type: "土地资源",
+        children: [
+          {
+            id: publicFun.buildGuid("soil"),
+            type: "基本农田被违规占用",
+            children: [
+              {
+                id: publicFun.buildGuid("soil_label"),
+                name: "疑点1",
+              },
+              {
+                id: publicFun.buildGuid("soil_label"),
+                name: "疑点2",
+              },
+              {
+                id: publicFun.buildGuid("soil_label"),
+                name: "疑点3",
+              },
+              {
+                id: publicFun.buildGuid("soil_label"),
+                name: "疑点4",
+              },
+              {
+                id: publicFun.buildGuid("soil_label"),
+                name: "疑点5",
+              },
+            ],
+          },
+          {
+            id: publicFun.buildGuid("soil"),
+            type: "基本农田种林",
+            children: [],
+          },
+          {
+            id: publicFun.buildGuid("soil"),
+            type: "基本农田抛荒",
+            children: [],
+          },
+          {
+            id: publicFun.buildGuid("soil"),
+            type: "一般耕地被违规占用",
+            children: [],
+          },
+        ],
+      },
+      {
+        id: publicFun.buildGuid(),
+        type: "水资源",
+        children: [
+          {
+            id: publicFun.buildGuid("water"),
+            type: "河道被截断或填埋",
+            children: [],
+          },
+          {
+            id: publicFun.buildGuid("water"),
+            type: "河道范围内有施工",
+            children: [],
+          },
+          {
+            id: publicFun.buildGuid("water"),
+            type: "河道周边存在不规范养殖",
+            children: [],
+          },
+          {
+            id: publicFun.buildGuid("water"),
+            type: "渣土堆放",
+            children: [],
+          },
+          {
+            id: publicFun.buildGuid("water"),
+            type: "垃圾倾倒",
+            children: [],
+          },
+          {
+            id: publicFun.buildGuid("water"),
+            type: "违章搭建",
+            children: [],
+          },
+          {
+            id: publicFun.buildGuid("water"),
+            type: "侵占水体",
+            children: [],
+          },
+        ],
+      },
+      {
+        id: publicFun.buildGuid(),
+        type: "生态资源",
+        children: [],
+      },
+    ],
+  },
+  {
+    id: publicFun.buildGuid(),
+    type: "我的模型",
+    children: [],
+  },
+];
+
+/**
+ * 我的标记 -- 用户标记疑点后产生的
+ */
+
+export const soilLabelData = {
+  基本农田被违规占用: [
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点1",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点2",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点3",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点4",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点5",
+    },
+  ],
+  基本农田种林: [
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点1",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点2",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点3",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点4",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点5",
+    },
+  ],
+};
+
+export const waterLabelData = {
+  河道被截断或填埋: [
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点1",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点2",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点3",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点4",
+    },
+    {
+      id: publicFun.buildGuid(),
+      name: "疑点5",
+    },
+  ],
+};

src/main.js

@@ -6,6 +6,7 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 // 添加字体（优设标题黑）
 import './assets/font/font.css';
+import "./assets/global.css"
 
 Vue.config.productionTip = false;
 

src/views/ComprehensiveAnalysis.vue

@@ -5,27 +5,26 @@
       <div class="title">返回上级</div>
     </div>
     <!-- 右上角工具栏 -->
-    <div class="comprehensive-analysis-toolbar">
-      <!-- 显示与隐藏所选图层 -->
+    <!-- <div class="comprehensive-analysis-toolbar">
       <div
         class="layer-display"
         @click="showLayers"
         :class="{ 'display-true': showLayersValue }"
       ></div>
-      <!-- 选择图层 -->
+
       <div
         class="layers-control-icon"
         @click="layerControlEvent"
         :class="{ 'control-true': layerControlBtn }"
       ></div>
-      <!-- 搜索地块等信息 -->
+
       <div class="searchbox">
         <el-input
           placeholder="请输入地址、地块名称等"
           v-model="searchInput"
         ></el-input>
       </div>
-      <!-- 图层box -->
+
       <div class="layercontrol-container" v-show="layerControlBox">
         <div class="layer-control-item" v-for="item in 4" :key="item">
           <div class="left"><div class="left-eye"></div></div>
@@ -35,7 +34,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
     <!-- 图例 -->
     <MenuCard
       class="comprehensive-analysis-legendbox"
@@ -51,28 +50,48 @@
 
     <!-- 开启左边面板的控制按钮 -->
     <div class="comprehensive-analysis-leftopenbox" v-show="leftBoxBtn">
-      <div @click="leftPanelDisplay('show')"></div>
+      <div @click="leftPanelDisplay('show')"><div></div></div>
     </div>
     <!-- 开启右边面板的控制按钮 -->
     <div class="comprehensive-analysis-rightopenbox" v-show="rightBoxBtn">
-      <div @click="rightPanelDisplay('show')"></div>
+      <div @click="rightPanelDisplay('show')"><div></div></div>
     </div>
 
     <!-- 左侧面板的显示与隐藏 -->
     <transition name="fade-left">
       <div class="comprehensive-analysis-left" v-show="showLeftBox">
+        <div class="control-container">
+          <div @click="leftPanelDisplay('hide')"></div>
+        </div>
         <div class="contant-container">
           <div class="contant-container-innerbox">
             <el-tree
               :data="modelData"
               :props="defaultProps"
-              @node-click="handleNodeClick"
-            ></el-tree>
+              default-expand-all
+              @check-change="handleCheckChange"
+              node-key="id"
+              ref="tree"
+            >
+              <span class="custom-tree-node" slot-scope="{ node }">
+                <template v-if="node.level === 3">
+                  <el-checkbox v-model="node.checked">{{
+                    node.label
+                  }}</el-checkbox>
+                </template>
+                <template v-else>
+                  <div
+                    :class="{
+                      'tree-arrow': !node.expanded,
+                      'tree-arrow-expanded': node.expanded,
+                    }"
+                  ></div>
+                  <span>{{ node.label }}</span>
+                </template>
+              </span>
+            </el-tree>
           </div>
         </div>
-        <div class="control-container">
-          <div @click="leftPanelDisplay('hide')"></div>
-        </div>
       </div>
     </transition>
 
@@ -83,7 +102,28 @@
           <div @click="rightPanelDisplay('hide')"></div>
         </div>
         <div class="contant-container">
-          <div class="contant-container-innerbox"></div>
+          <div class="contant-container-innerbox">
+            <el-collapse v-model="activeNames">
+              <el-collapse-item :title="rightPanelTitle" name="1">
+                <div
+                  class="panel-list-item"
+                  v-for="item in originalData"
+                  :key="item.id"
+                >
+                  {{ item.name }}
+                </div>
+              </el-collapse-item>
+              <el-collapse-item title="我的标记" name="2">
+                <div
+                  class="panel-list-item"
+                  v-for="item in rightLabelData"
+                  :key="item.id"
+                >
+                  {{ item.name }}
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
         </div>
       </div>
     </transition>
@@ -92,6 +132,8 @@
 <script>
 // 综合分析
 import MenuCard from "@/components/layout/MenuCard.vue";
+import publicFun from "@/utils/publicFunction.js";
+import { treeModel, soilLabelData, waterLabelData } from "@/config/common";
 export default {
   name: "ComprehensiveAnalysis",
   components: {
@@ -99,80 +141,30 @@ export default {
   },
   data() {
     return {
-      searchInput: "",
-      showLayersValue: false,
-      layerControlBtn: false,
-      layerControlBox: false,
+      activeNames: ["1", "2"],
+      rightPanelTitle: "",
+      rightPanelDataMap: new Map(),
+      rightLabelDataMap: new Map(),
+      originalData: [],
+      rightLabelData: [],
+      // searchInput: "",
+      // showLayersValue: false,
+      // layerControlBtn: false,
+      // layerControlBox: false,
       showLeftBox: true,
       showRightBox: true,
       leftBoxBtn: false,
       rightBoxBtn: false,
-      layersData: [
-        {
-          color: `rgb(${Math.random() * 100},${Math.random() * 100},${
-            Math.random() * 100
-          }`,
-          type: "",
-        },
-        ,
-      ],
-      modelData: [
-        {
-          label: "一级 1",
-          children: [
-            {
-              label: "二级 1-1",
-              children: [
-                {
-                  label: "三级 1-1-1",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: "一级 2",
-          children: [
-            {
-              label: "二级 2-1",
-              children: [
-                {
-                  label: "三级 2-1-1",
-                },
-              ],
-            },
-            {
-              label: "二级 2-2",
-              children: [
-                {
-                  label: "三级 2-2-1",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: "一级 3",
-          children: [
-            {
-              label: "二级 3-1",
-              children: [
-                {
-                  label: "三级 3-1-1",
-                },
-              ],
-            },
-            {
-              label: "二级 3-2",
-              children: [
-                {
-                  label: "三级 3-2-1",
-                },
-              ],
-            },
-          ],
-        },
-      ],
+      // layersData: [
+      //   {
+      //     color: `rgb(${Math.random() * 100},${Math.random() * 100},${
+      //       Math.random() * 100
+      //     }`,
+      //     type: "",
+      //   },
+      //   ,
+      // ],
+      modelData: [],
       defaultProps: {
         children: "children",
         label: "label",
@@ -195,6 +187,38 @@ export default {
       }
     },
   },
+  created() {
+    this.modelData = [];
+    // 分别对应1、2、3级节点
+    this.modelData = treeModel.map((item1) => {
+      return {
+        id: item1.id,
+        label: item1.type,
+        children: item1.children.map((item2) => {
+          return {
+            id: item2.id,
+            label: item2.type,
+            children: item2.children.map((item3) => {
+              this.rightPanelDataMap.set(item3.type, item3.children);
+              return {
+                id: item3.id,
+                label: item3.type,
+                children: [],
+                checked: false,
+              };
+            }),
+          };
+        }),
+      };
+    });
+
+    for (let key in soilLabelData) {
+      this.rightLabelDataMap.set(key, soilLabelData[key]);
+    }
+    for (let key in waterLabelData) {
+      this.rightLabelDataMap.set(key, waterLabelData[key]);
+    }
+  },
   mounted() {},
   methods: {
     // 回退事件
@@ -233,9 +257,21 @@ export default {
         this.rightBoxBtn = true;
       }
     },
-    // 树状结构图
-    handleNodeClick(data) {
-      console.log(data);
+    handleCheckChange(data, checked) {
+      if (checked) {
+        this.rightPanelTitle = data.label;
+        this.originalData = this.rightPanelDataMap.get(data.label);
+        this.$refs.tree.setCheckedKeys([data.id]);
+        if (this.rightLabelDataMap.has(data.label)) {
+          this.rightLabelData = this.rightLabelDataMap.get(data.label);
+        }else{
+          this.rightLabelData = []
+        }
+      }
+
+      // if(data.children.length>0){
+
+      // }
     },
   },
 };
@@ -243,6 +279,47 @@ export default {
 <style lang="less" scoped>
 @commonBorderColor: #00aaff;
 .comprehensive-analysis {
+  .el-checkbox {
+    color: #fff;
+    // .el-checkbox__input.is-checked .el-checkbox__inner,
+    // /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    //   border-color: #fff;
+    //   background: #74ffff;
+    // }
+    /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
+      color: rgba(116, 255, 255, 1);
+    }
+
+    /deep/.el-checkbox__input.is-checked .el-checkbox__inner::after {
+      width: 70%;
+      height: 70%;
+      background: #74ffff;
+      border-radius: 0;
+      transform: rotate(0deg) scaleY(1);
+      position: static;
+    }
+
+    /deep/.el-checkbox__inner {
+      border: 1px solid #dcdfe6;
+      background: rgba(0, 170, 255, 0);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: static;
+      &::after {
+        transition: 0ms;
+      }
+    }
+
+    /deep/.el-checkbox__label {
+      padding-left: 0;
+      font-size: 15px;
+      position: absolute;
+      top: 1px;
+      left: 25px;
+    }
+  }
+
   &-backbtn {
     width: 120px;
     height: 35px;
@@ -257,11 +334,11 @@ export default {
     .left-arrow {
       width: 7px;
       height: 7px;
-      border-top: 3px solid #ffffff;
-      border-right: 3px solid #ffffff;
-      transform: translate(-50%, -50%) rotate(224deg);
+      border-top: 2px solid #ffffff;
+      border-right: 2px solid #ffffff;
+      transform: translate(-50%, -50%) rotate(225deg);
       position: absolute;
-      top: 16px;
+      top: 16.5px;
       left: 25px;
     }
     .title {
@@ -356,7 +433,6 @@ export default {
           &-line {
             width: 3%;
             height: 90%;
-
             border-right: 7px solid red;
           }
           &-text {
@@ -374,54 +450,77 @@ export default {
     position: absolute;
     right: 30px;
     bottom: 30px;
+    z-index: 1;
   }
   /* 左边树状面板 */
   &-left {
-    width: 300px;
+    width: 400px;
     height: 85%;
     position: absolute;
     top: 60px;
     left: 0;
-    border-right: 2px solid @commonBorderColor;
-    border-top: 2px solid @commonBorderColor;
-    border-bottom: 2px solid @commonBorderColor;
-    background: rgba(0, 170, 255, 0.2);
+    background: url("../assets/image/tree_background.png") no-repeat center;
+    background-size: 100% 100%;
     pointer-events: auto;
-    display: flex;
     .control-container {
-      width: 12%;
-      height: 100%;
-      background: red;
+      width: 100%;
+      height: 5%;
       display: flex;
-      flex-direction: column;
-      justify-content: center;
+      justify-content: flex-end;
       align-items: center;
       position: relative;
       & > div {
-        width: 50px;
-        height: 50px;
-        background: url("../assets/image/open.png") no-repeat center;
+        width: 30px;
+        height: 30px;
+        background: url("../assets/image/close.png") no-repeat center;
         position: absolute;
-        right: -25px;
+        top: 3px;
+        right: 3px;
         cursor: pointer;
       }
     }
     .contant-container {
-      width: 88%;
-      height: 100%;
+      width: 100%;
+      height: 95%;
       display: flex;
       align-items: center;
       justify-content: center;
       &-innerbox {
         width: 90%;
-        height: 97%;
-        background: yellow;
+        height: 98%;
+        .tree-arrow {
+          position: relative;
+          top: 0;
+          left: 0;
+          display: inline-block;
+          width: 0px;
+          height: 0px;
+          border: 7px solid transparent;
+          border-left-color: #fff;
+        }
+        .tree-arrow-expanded {
+          position: relative;
+          top: 4px;
+          left: -3px;
+          display: inline-block;
+          width: 0px;
+          height: 0px;
+          border: 7px solid transparent;
+          border-top-color: #fff;
+        }
+        // .custom-tree-node{
+        //   position: relative;
+        //   .tree-arrow{
+
+        //   }
+        // }
+        // background: yellow;
       }
     }
   }
   &-leftopenbox {
     position: absolute;
-    left: 0;
+    left: 5px;
     width: 50px;
     height: 100%;
     display: flex;
@@ -429,10 +528,22 @@ export default {
     justify-content: center;
     & > div {
       pointer-events: auto;
-      width: 50px;
-      height: 50px;
-      background: url("../assets/image/folded.png") no-repeat center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: rgba(102, 203, 255, 1);
+      position: relative;
       cursor: pointer;
+      & > div {
+        position: absolute;
+        top: 8px;
+        left: 16px;
+        display: inline-block;
+        width: 0px;
+        height: 0px;
+        border: 12px solid transparent;
+        border-left-color: #fff;
+      }
     }
   }
   &-rightopenbox {
@@ -445,53 +556,76 @@ export default {
     justify-content: center;
     & > div {
       pointer-events: auto;
-      width: 50px;
-      height: 50px;
-      background: url("../assets/image/open.png") no-repeat center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
       cursor: pointer;
+      position: relative;
+      background: rgba(102, 203, 255, 1);
+      & > div {
+        position: absolute;
+        top: 8px;
+        right: 16px;
+        display: inline-block;
+        width: 0px;
+        height: 0px;
+        border: 12px solid transparent;
+        border-right-color: #fff;
+      }
     }
   }
   /* 右面板 -- 显示标记疑点 */
   &-right {
-    width: 300px;
+    width: 400px;
     height: 85%;
     position: absolute;
     top: 60px;
     right: 0;
-    border-left: 2px solid @commonBorderColor;
-    border-top: 2px solid @commonBorderColor;
-    border-bottom: 2px solid @commonBorderColor;
-    background: rgba(0, 170, 255, 0.2);
+    background: url("../assets/image/tree_background.png") no-repeat center;
+    background-size: 100% 100%;
     pointer-events: auto;
-    display: flex;
+    z-index: 2;
     .control-container {
-      width: 12%;
-      height: 100%;
-      background: red;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
+      width: 100%;
+      height: 5%;
       position: relative;
       & > div {
-        width: 50px;
-        height: 50px;
-        background: url("../assets/image/folded.png") no-repeat center;
+        width: 30px;
+        height: 30px;
+        background: url("../assets/image/close.png") no-repeat center;
         position: absolute;
-        left: -25px;
+        top: 3px;
+        right: 3px;
         cursor: pointer;
       }
     }
     .contant-container {
-      width: 88%;
-      height: 100%;
+      width: 100%;
+      height: 95%;
       display: flex;
       align-items: center;
       justify-content: center;
       &-innerbox {
         width: 90%;
-        height: 97%;
-        background: yellow;
+        height: 98%;
+        // background: yellow;
+        .panel-list-item {
+          margin: 0 auto;
+          width: 80%;
+          height: auto;
+          background: #00aaff;
+          font-family: "PingFangSC SC";
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 40px;
+          background: rgba(0, 47, 86, 0.3);
+          color: #fff;
+          padding-left: 20px;
+          border-left: 1px solid rgba(207, 222, 255, 0.2);
+          border-right: 1px solid rgba(207, 222, 255, 0.2);
+
+          border-bottom: 1px solid rgba(207, 222, 255, 0.2);
+        }
       }
     }
   }
@@ -510,7 +644,7 @@ export default {
 
   /* 主动输入控住过渡的持续时间和缓动曲线 */
   .fade-left-enter-active {
-    transition: all 1s ease;
+    transition: all 0.3s ease;
   }
 
   .fade-left-leave-from {
@@ -524,7 +658,7 @@ export default {
   }
 
   .fade-left-leave-active {
-    transition: all 0.5s ease;
+    transition: all 0.3s ease;
   }
   /* 右边 */
   .fade-right-enter-from {
@@ -538,7 +672,7 @@ export default {
   }
 
   .fade-right-enter-active {
-    transition: all 1s ease;
+    transition: all 0.3s ease;
   }
 
   .fade-right-leave-from {
@@ -552,7 +686,7 @@ export default {
   }
 
   .fade-right-leave-active {
-    transition: all 0.5s ease;
+    transition: all 0.3s ease;
   }
 }
 </style>

src/views/HomeView.vue

@@ -13,37 +13,51 @@
         :options="streetOptions"
         :value="streetSelectVal"
       />
-      <MenuCard
-        class="town-right-problems"
-        :menuData="{
-          type: 'card',
-          title: '历年频发问题Top10',
-          titleWidth: 85,
-          boxWidth: '400'
-        }"
-      >
-        <template slot="top"><TopCard :dataSize="10" /></template>
-      </MenuCard>
-      <div class="town-center">
-        <div class="town-center-top">
-          <!-- <h2>浦东新区</h2> -->
-          <div class="droplet-box-title">浦东新区</div>
-          <div class="droplet-box">
-            <div class="droplet-box-item" v-for="item in townCollection" :key="item.name">
-              <div class="problem-num">{{ item.num }} 个</div>
-              <div class="problem-img"></div>
-              <div class="problem-title">{{ item.name }}</div>
-            </div>
-          </div>
+      <div class="town-problems">
+        <div class="town-problems-top">
+          <MenuCard
+            :menuData="{
+              type: 'card',
+              title: '资源问题',
+              titleWidth: 35,
+              boxWidth: '780',
+            }"
+          >
+            <template slot="top">
+              <div class="town-problems-top-inner">
+                <TagProblemCard class="problem-item" v-for="n in 4" :key="n" />
+              </div>
+            </template>
+          </MenuCard>
         </div>
-        <div class="town-center-bottom">
-          <div class="capital-title">资金投入TOP10</div>
+        <div class="town-problems-bottom">
+          <MenuCard
+            :menuData="{
+              type: 'card',
+              title: '资金投入TOP10',
+              titleWidth: 85,
+              boxWidth: '400',
+            }"
+            ><template slot="top"><TopCard :dataSize="10" /></template
+          ></MenuCard>
+          <MenuCard
+            :menuData="{
+              type: 'card',
+              title: '历年频发问题TOP10',
+              titleWidth: 85,
+              boxWidth: '400',
+            }"
+            ><template slot="top"><TopCard :dataSize="10" /></template
+          ></MenuCard>
         </div>
       </div>
     </div>
 
     <!-- 综合分析 -->
-    <ComprehensiveAnalysis id="ComprehensiveContainer" v-if="$ifMenu('3', '')" />
+    <ComprehensiveAnalysis
+      id="ComprehensiveContainer"
+      v-if="$ifMenu('3', '')"
+    />
 
     <!-- Home页面 -->
     <!-- 左侧菜单列 1 -- 首页 -->
@@ -140,14 +154,21 @@
           boxHeight: '180',
           legendShowState: true,
           menuIndex: '1',
-          position: 'bottom'
+          position: 'bottom',
         }"
         ><div class="legend-container">
           <div class="left-container">
-            <div class="legend-icon" v-for="(item, index) in legendData" :key="index" :style="{ background: item }"></div>
+            <div
+              class="legend-icon"
+              v-for="(item, index) in legendData"
+              :key="index"
+              :style="{ background: item }"
+            ></div>
           </div>
           <div class="right-container">
-            <div class="lengend-title" v-for="item in buttonData" :key="item">{{ item }} 类</div>
+            <div class="lengend-title" v-for="item in buttonData" :key="item">
+              {{ item }} 类
+            </div>
           </div>
         </div>
       </MenuCard>
@@ -160,7 +181,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年林地面积变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[1]">
         <template slot="top">
@@ -170,7 +192,8 @@
             <TagCard :data="tagCardData"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年审计项目变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[2]">
         <template slot="top">
@@ -186,7 +209,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[4]">
         <template slot="top">
@@ -202,7 +226,13 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import { street, streetLocation, soilData, waterData, forestryData } from "@/config/common";
+import {
+  street,
+  streetLocation,
+  soilData,
+  waterData,
+  forestryData,
+} from "@/config/common";
 import publicFun from "@/utils/publicFunction.js";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
@@ -211,7 +241,7 @@ import TopCard from "@/components/common/TopCard";
 import BottomMenus from "@/components/common/BottomMenus";
 // 综合分析
 import ComprehensiveAnalysis from "@/views/ComprehensiveAnalysis.vue";
-// 镇域专题组件
+import TagProblemCard from "@/components/common/TagProblemCard.vue";
 export default {
   name: "HomeView",
   components: {
@@ -225,7 +255,8 @@ export default {
     TagTableCard,
     TopCard,
     BottomMenus,
-    ComprehensiveAnalysis
+    ComprehensiveAnalysis,
+    TagProblemCard,
   },
   data() {
     return {
@@ -233,19 +264,19 @@ export default {
         type: "tb",
         title: "土地资源",
         value: 100,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData2: {
         type: "tb",
         title: "土地资源面积",
         value: 172,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData3: {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷"
+        unit: "公顷",
       },
       testTitle: "土地资源",
       activeIndex: 1,
@@ -263,7 +294,7 @@ export default {
             imageUrl: "/static/images/2.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -274,7 +305,7 @@ export default {
             imageUrl: "/static/images/3.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -285,7 +316,7 @@ export default {
             imageUrl: "/static/images/1.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -296,7 +327,7 @@ export default {
             imageUrl: "/static/images/4.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -307,7 +338,7 @@ export default {
             imageUrl: "/static/images/2.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -318,7 +349,7 @@ export default {
             imageUrl: "/static/images/3.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -329,7 +360,7 @@ export default {
             imageUrl: "/static/images/1.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
+            position: "left",
           },
           {
             type: "imageMenu",
@@ -340,8 +371,8 @@ export default {
             imageUrl: "/static/images/4.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            position: "left"
-          }
+            position: "left",
+          },
         ],
         main: [
           {
@@ -351,16 +382,48 @@ export default {
             boxHeight: "370",
             boxBackground: "rgba(0,39,77,0.6)",
             menuIndex: "1",
-            position: "top"
-          }
+            position: "top",
+          },
         ],
         right: [
-          { type: "card", title: "资金投入情况", titleWidth: 64, menuIndex: "1", position: "right" },
-          { type: "card", title: "资源环境项目", titleWidth: 64, menuIndex: "1", position: "right" },
-          { type: "card", title: "历年频发问题TOP5", titleWidth: 81, menuIndex: "1", position: "right" },
-          { type: "card", title: "土地类问题", titleWidth: 60, menuIndex: "2", subMenuIndex: "1", position: "right" },
-          { type: "card", title: "土地类问题TOP5", titleWidth: 81, menuIndex: "2", subMenuIndex: "1", position: "right" }
-        ]
+          {
+            type: "card",
+            title: "资金投入情况",
+            titleWidth: 64,
+            menuIndex: "1",
+            position: "right",
+          },
+          {
+            type: "card",
+            title: "资源环境项目",
+            titleWidth: 64,
+            menuIndex: "1",
+            position: "right",
+          },
+          {
+            type: "card",
+            title: "历年频发问题TOP5",
+            titleWidth: 81,
+            menuIndex: "1",
+            position: "right",
+          },
+          {
+            type: "card",
+            title: "土地类问题",
+            titleWidth: 60,
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "right",
+          },
+          {
+            type: "card",
+            title: "土地类问题TOP5",
+            titleWidth: 81,
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "right",
+          },
+        ],
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
@@ -370,19 +433,19 @@ export default {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       BData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       CData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       streetSelectVal: "全部街道",
       streetOptions: [],
@@ -391,12 +454,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 }
+        { name: "生态资源问题", num: 55 },
       ],
       // 综合分析
       analysis: {
-        searchInput: ""
-      }
+        searchInput: "",
+      },
     };
   },
   methods: {
@@ -435,7 +498,7 @@ export default {
     // 镇域专题下拉框
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    }
+    },
   },
   created() {
     // 目录
@@ -450,10 +513,19 @@ export default {
     let CDataArr = [];
     // 街道排序
     for (let i in category) {
-      let ADataSum = soilData[category[i]].A + waterData[category[i]].A + forestryData[category[i]].A;
-      let BDataSum = soilData[category[i]].B + waterData[category[i]].B + forestryData[category[i]].B;
+      let ADataSum =
+        soilData[category[i]].A +
+        waterData[category[i]].A +
+        forestryData[category[i]].A;
+      let BDataSum =
+        soilData[category[i]].B +
+        waterData[category[i]].B +
+        forestryData[category[i]].B;
 
-      let CDataSum = soilData[category[i]].C + waterData[category[i]].C + forestryData[category[i]].C;
+      let CDataSum =
+        soilData[category[i]].C +
+        waterData[category[i]].C +
+        forestryData[category[i]].C;
       ADataArr.push({ name: category[i], sum: ADataSum });
       BDataArr.push({ name: category[i], sum: BDataSum });
       CDataArr.push({ name: category[i], sum: CDataSum });
@@ -464,21 +536,21 @@ export default {
     CDataArr.sort(publicFun.compare("sum"));
 
     // 按A,B,C分出各自资源的排序数组
-    ADataArr.forEach(item => {
+    ADataArr.forEach((item) => {
       this.AData.soil.push(soilData[item.name].A);
       this.AData.water.push(waterData[item.name].A);
       this.AData.forestry.push(forestryData[item.name].A);
       this.AData.categoryData.push(item.name);
     });
 
-    BDataArr.forEach(item => {
+    BDataArr.forEach((item) => {
       this.BData.soil.push(soilData[item.name].B);
       this.BData.water.push(waterData[item.name].B);
       this.BData.forestry.push(forestryData[item.name].B);
       this.BData.categoryData.push(item.name);
     });
 
-    CDataArr.forEach(item => {
+    CDataArr.forEach((item) => {
       this.CData.soil.push(soilData[item.name].C);
       this.CData.water.push(waterData[item.name].C);
       this.CData.forestry.push(forestryData[item.name].C);
@@ -494,10 +566,10 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key]
+        label: street[key],
       });
     }
-  }
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -542,74 +614,39 @@ export default {
     top: 25px;
     pointer-events: auto;
   }
-  .town-center {
+  .town-problems {
     position: absolute;
-    right: 420px;
-    top: 25px;
-    width: 450px;
-    height: 700px;
+    right: 10px;
+    width: 800px;
+    height: 100%;
     color: #fff;
     pointer-events: auto;
     &-top {
       width: 100%;
-      height: 350px;
+      height: 220px;
 
-      .droplet-box-title {
-        width: 100%;
-        height: 15%;
-        font-size: 30px;
-        font-weight: bold;
-        line-height: 50px;
-      }
-      .droplet-box {
-        display: flex;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &-inner {
         width: 100%;
-        height: 85%;
+        height: 130px;
         display: flex;
-        flex-wrap: wrap;
-        .droplet-box-item {
-          width: 49.5%;
-          height: 49.5%;
-          .problem-num {
-            width: 35%;
-            height: 25%;
-            margin: 0 auto;
-            font-size: 22px;
-            font-weight: bold;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: @commonBorderColor;
-          }
-          .problem-img {
-            width: 80%;
-            height: 45%;
-            background: url("../assets/home/droplet.png") no-repeat center;
-            margin: 0 auto;
-          }
-          .problem-title {
-            width: 80%;
-            height: 25%;
-            font-size: 24px;
-            font-weight: bold;
-            margin: 0 auto;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
+        align-items: center;
+        justify-content: space-around;
+        .problem-item {
+          width: 170px;
+          height: 100px;
         }
       }
     }
     &-bottom {
+      // background: plum;
       width: 100%;
-      height: 320px;
-      .capital-title {
-        width: 100%;
-        height: 15%;
-        font-size: 30px;
-        font-weight: bold;
-        line-height: 50px;
-      }
+      height: calc(95% - 220px);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
   }
 }
@@ -820,14 +857,22 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat;
+    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor)
+        left top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
+        no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat;
     background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
 }