diff --git a/src/views/gridman/forestranger/xianjiewai.js b/src/assets/xianjiewai.js
similarity index 100%
rename from src/views/gridman/forestranger/xianjiewai.js
rename to src/assets/xianjiewai.js
diff --git a/src/views/gridman/forestranger/widget/ditu.vue b/src/views/gridman/forestranger/widget/ditu.vue
index 23365b2..faaa614 100644
--- a/src/views/gridman/forestranger/widget/ditu.vue
+++ b/src/views/gridman/forestranger/widget/ditu.vue
@@ -5,7 +5,7 @@
 <script>
 import { postMethodCommon, getMethodCommon } from "../../../../api/common";
 import mapboxgl from "mapbox-gl";
-import { waiData } from "../xianjiewai";
+import { waiData } from "../../../../assets/xianjiewai";
 mapboxgl.accessToken =
   "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
 export default {
diff --git a/src/views/gridman/gridmanagement/index.vue b/src/views/gridman/gridmanagement/index.vue
index 2241120..c46a2a0 100644
--- a/src/views/gridman/gridmanagement/index.vue
+++ b/src/views/gridman/gridmanagement/index.vue
@@ -1,358 +1,503 @@
 <template>
   <div class="container">
     <div class="grid-list-container">
-        <div class="search-container">
-            <!-- 人员名称 -->
-            <el-input clearable size="mini" prefix-icon="el-icon-search" style="width: 200px;margin-bottom: 0;margin:0px 12px;" class="filter-item" :placeholder="'人员姓名'"
+      <div class="search-container">
+        <!-- 人员名称 -->
+        <el-input
+          clearable
+          size="mini"
+          prefix-icon="el-icon-search"
+          style="width: 200px; margin-bottom: 0; margin: 0px 12px"
+          class="filter-item"
+          :placeholder="'人员姓名'"
+        >
+        </el-input>
+
+        <el-button type="default" size="mini">重置</el-button>
+        <el-button type="primary" size="mini">搜索</el-button>
+      </div>
+      <div class="list-header">
+        <div class="list-item-box" style="width: 15%">名称</div>
+        <div class="list-item-box" style="width: 15%">类型</div>
+        <div class="list-item-box" style="width: 15%">督查长</div>
+        <div class="list-item-box" style="width: 45%">副督查长</div>
+        <div class="list-item-box" style="width: 10%">操作</div>
+      </div>
+      <div class="list-box">
+        <div
+          class="list-item"
+          v-for="(item, index) in listData"
+          :key="index * tableRandom"
+        >
+          <div class="list-item-box" style="width: 15%">
+            {{ item.xzqmc ? item.xzqmc : "暂无数据" }}
+          </div>
+          <div class="list-item-box" style="width: 15%">
+            {{ item.type ? item.type : " 暂无数据" }}
+          </div>
+          <div class="list-item-box" style="width: 15%">
+            {{ item.dcz ? item.dcz : " 暂无数据" }}
+          </div>
+          <div class="list-item-box" style="width: 45%">
+            {{ item.fdcz ? item.fdcz : "暂无数据 " }}
+          </div>
+          <div class="list-item-box" style="width: 10%">
+            <div
+              class="operate-button operate-edit"
+              @click="getUserlist(item.gid)"
             >
-            </el-input>
-    
-            <el-button type="default" size="mini" >重置</el-button>
-            <el-button type="primary" size="mini" >搜索</el-button>
-        </div>
-        <div class="list-header" >
-                <div class="list-item-box" style="width:15%;">名称</div>
-                <div class="list-item-box" style="width:15%;">类型</div>
-                <div class="list-item-box" style="width:15%;">督查长</div>
-                <div class="list-item-box" style="width:45%;">副督查长</div>
-                <div class="list-item-box" style="width:10%;">操作</div>
+              <i class="el-icon el-icon-edit"></i>
             </div>
-        <div class="list-box">
-            <div class="list-item" v-for="(item,index) in listData" :key="index*tableRandom" >
-                <div class="list-item-box" style="width:15%;">{{item.xzqmc ? item.xzqmc : '暂无数据'}}</div>
-                <div class="list-item-box" style="width:15%;">{{item.type ? item.type : ' 暂无数据'}}</div>
-                <div class="list-item-box" style="width:15%;">{{item.dcz ? item.dcz : ' 暂无数据'}}</div>
-                <div class="list-item-box" style="width:45%;">{{item.fdcz ? item.fdcz : '暂无数据 '}}</div>
-                <div class="list-item-box" style="width:10%;">
-                    <div class="operate-button operate-edit" @click="getUserlist(item.gid)"><i class="el-icon el-icon-edit"></i></div>
-                    <div class="operate-button operate-delete"><i class="el-icon el-icon-delete"></i></div>
-                </div>
+            <div class="operate-button operate-delete">
+              <i class="el-icon el-icon-delete"></i>
             </div>
+          </div>
         </div>
-        <div class="page-container">
-            <el-pagination
-            background
-            layout="prev, pager, next"
-            :total="1000">
-            </el-pagination>
-        </div>
+      </div>
+      <div class="page-container">
+        <el-pagination background layout="prev, pager, next" :total="1000">
+        </el-pagination>
+      </div>
     </div>
 
-    <div class="map-container" id="mapContainer">
-
-    </div>
+    <div class="map-container" id="mapContainer"></div>
     <div class="grider-list-container" v-if="userListContainer">
-        <div class="grid-info-contianer">
-            <p>名称：东蒙镇</p>
-            <p>名称：类型</p>
-            <p>督察长：徐景良</p>
-        </div>
-        <div class="grid-list-box">
-            <div class="grider-list-item" v-for="(item,index) in userList" :key="index">
-                <el-form :model="item" size="mini"  label-width="90px" class="demo-ruleForm">
-                    <el-form-item label="人员姓名：" prop="areaName">
-                        <el-input v-model="item.name"></el-input>
-                    </el-form-item>
-                    <el-form-item label="所属单位：" prop="households">
-                        <el-input v-model="item.workunit"></el-input>
-                    </el-form-item>
-                    <el-form-item label="防火职务：" prop="households">
-                        <el-input v-model="item.fireduties"></el-input>
-                    </el-form-item>
-                    <el-form-item label="督察职务：" prop="households">
-                        <el-input v-model="item.supervision"></el-input>
-                    </el-form-item>
-                </el-form>
-                <div style="height:40px;">
-                    <div class="operate-button operate-edit"><i class="el-icon el-icon-folder-checked" @click="saveUser(item)"></i></div>
-                        <div class="operate-button operate-delete" @click="deleteUser(item.id)"><i class="el-icon el-icon-delete"></i></div>
-                </div>
+      <div class="grid-info-contianer">
+        <p>名称：东蒙镇</p>
+        <p>名称：类型</p>
+        <p>督察长：徐景良</p>
+      </div>
+      <div class="grid-list-box">
+        <div
+          class="grider-list-item"
+          v-for="(item, index) in userList"
+          :key="index"
+        >
+          <el-form
+            :model="item"
+            size="mini"
+            label-width="90px"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="人员姓名：" prop="areaName">
+              <el-input v-model="item.name"></el-input>
+            </el-form-item>
+            <el-form-item label="所属单位：" prop="households">
+              <el-input v-model="item.workunit"></el-input>
+            </el-form-item>
+            <el-form-item label="防火职务：" prop="households">
+              <el-input v-model="item.fireduties"></el-input>
+            </el-form-item>
+            <el-form-item label="督察职务：" prop="households">
+              <el-input v-model="item.supervision"></el-input>
+            </el-form-item>
+          </el-form>
+          <div style="height: 40px">
+            <div class="operate-button operate-edit">
+              <i
+                class="el-icon el-icon-folder-checked"
+                @click="saveUser(item)"
+              ></i>
             </div>
-            <div style="text-align:center;">
-                <el-button type="primary"  size="mini" icon="el-icon-plus" round @click="addUser">添加</el-button>
+            <div
+              class="operate-button operate-delete"
+              @click="deleteUser(item.id)"
+            >
+              <i class="el-icon el-icon-delete"></i>
             </div>
+          </div>
         </div>
+        <div style="text-align: center">
+          <el-button
+            type="primary"
+            size="mini"
+            icon="el-icon-plus"
+            round
+            @click="addUser"
+            >添加</el-button
+          >
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { getMethodCommon, postMethodCommon } from '../../../api/common';
-  export default {
-    name: 'index',
-    data(){
-        return {
-            listData : [],
-            ruleForm:{
+import { waiData } from "../../../assets/xianjiewai";
+import { getMethodCommon, postMethodCommon } from "../../../api/common";
+export default {
+  name: "index",
+  data() {
+    return {
+      listData: [],
+      ruleForm: {},
+      userListContainer: false,
+      userList: [],
+      mapboxMap: null,
+      tableRandom: 1,
+      currentStreetId: null,
+      listQuery: {
+        pageindex: 1,
+        pagesize: 20,
+      },
+    };
+  },
+  mounted() {
+    this.getList();
+    this.initMap();
+  },
+  methods: {
+    initMap() {
+      //mapbox 2.0以后的版本需要accessToken  到官网注册下载
+      this.$mapboxgl.accessToken =
+        "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
+      this.mapboxMap = new this.$mapboxgl.Map({
+        container: "mapContainer",
+        style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
+        center: [117.999325, 35.265961],
+        zoom: 10,
+        language: "zh-cmn",
+        projection: "globe",
+      });
 
-            },
-            userListContainer:false,
-            userList:[
-               
-            ],
-            mapboxMap:null,
-            tableRandom:1,
-            currentStreetId:null,
-            listQuery:{
-                pageindex:1,
-                pagesize:20
-            }
+      // 地图加载完毕事件
+      let _this = this;
+
+      _this.mapboxMap.addControl(
+        new this.$mapboxgl.NavigationControl(),
+        "top-right"
+      );
+
+      this.mapboxMap.on("load", function () {
+        _this.loadGaoQingLayer();
+        _this.loadMengban();
+        _this.loadZhenJieLayer();
+        _this.loadXianJieLayer();
+      });
+    },
+    getList() {
+      getMethodCommon("/FireGrid/GetTowInfo", this.listQuery).then((res) => {
+        if (res.code == 200) {
+          this.listData = res.data;
+          this.tableRandom = Math.random();
         }
+      });
     },
-    mounted(){
-        this.getList();
-        this.initMap();
+    getUserlist(id) {
+      this.currentStreetId = id;
+      getMethodCommon("/FireGrid/GetInspectorByTown", { id: id }).then(
+        (res) => {
+          if (res.code == 200) {
+            this.userList = res.result;
+            this.userListContainer = true;
+          }
+        }
+      );
     },
-    methods:{
-        initMap() {
-        //mapbox 2.0以后的版本需要accessToken  到官网注册下载
-        this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
-        this.mapboxMap = new this.$mapboxgl.Map({
-          container: "mapContainer",
-          center: [117.7075, 35.43222222],
-          zoom: 9.7,
-          maxZoom: 20,
-          minZoom: 5,
-          pitch: 0,
-          style: "mapbox://styles/mapbox/streets-v11"
-        });
-
-        // 地图加载完毕事件
-        let _this = this;
-
-        _this.mapboxMap.addControl(new this.$mapboxgl.NavigationControl(), 'top-right');
-
-        this.mapboxMap.on("load", function () {
-
-          _this.mapboxMap.addSource('mapbox-dem', {
-            'type': 'raster-dem',
-            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
-            'tileSize': 512,
-            'maxzoom': 14
+    deleteUser(id) {
+      postMethodCommon("/FireGrid/DeleteInspectors", { id: id }).then((res) => {
+        if (res.code == 200) {
+          this.$message({
+            type: "success",
+            message: "删除成功！",
           });
-          // add the DEM source as a terrain layer with exaggerated height
-          _this.mapboxMap.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
-
-        })
-      },
-      getList(){
-          getMethodCommon("/FireGrid/GetTowInfo",this.listQuery).then(res=>{
-              if(res.code == 200){
-                  this.listData = res.data;
-                  this.tableRandom = Math.random();
-              }
-          })
-      },
-      getUserlist(id){
-          this.currentStreetId = id;
-          getMethodCommon("/FireGrid/GetInspectorByTown",{id:id}).then(res=>{
-              if(res.code == 200){
-                  this.userList = res.result;
-                  this.userListContainer = true;
-              }
-          })
-      },
-      deleteUser(id){
-          postMethodCommon("/FireGrid/DeleteInspectors",{id:id}).then(res=>{
-            if(res.code == 200){
-                 this.$message({
-                     type:"success",
-                     message:"删除成功！"
-                 })
-                 this.getUserlist(this.currentStreetId);
-              }
-          })
-      },
-      saveUser(item){
-          console.log("item",item);
-          item.id = 0;
-          item.townid = [this.currentStreetId];
-          postMethodCommon("/FireGrid/AddInspector",item).then(res=>{
-              if(res.code == 200){
-                  this.$message({
-                      type:"success",
-                      message:"添加成功！"
-                  })
-              }
-          })
-      },
-      addUser(){
-          this.userList.push({});
-      }
-    }
-  }
+          this.getUserlist(this.currentStreetId);
+        }
+      });
+    },
+    saveUser(item) {
+      console.log("item", item);
+      item.id = 0;
+      item.townid = [this.currentStreetId];
+      postMethodCommon("/FireGrid/AddInspector", item).then((res) => {
+        if (res.code == 200) {
+          this.$message({
+            type: "success",
+            message: "添加成功！",
+          });
+        }
+      });
+    },
+    addUser() {
+      this.userList.push({});
+    },
+    loadMengban() {
+      this.mapboxMap.addLayer({
+        //蒙版图层   //通过边界数据反选 达到挖洞效果
+        id: "mb-tag",
+        type: "fill",
+        source: {
+          type: "geojson",
+          data: {
+            type: "Feature",
+            geometry: {
+              type: "Polygon",
+              coordinates: [
+                [
+                  // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
+                  [-180, 90],
+                  [180, 90],
+                  [180, -90],
+                  [-180, -90],
+                ],
+                waiData.DATA,
+              ],
+            },
+          },
+        },
+        paint: {
+          "fill-color": "rgba(0,10,36,1)",
+          // 'fill-opacity': 1 /* 透明度 */,
+        },
+        layout: {
+          visibility: "visible",
+        },
+      });
+    },
+    loadGaoQingLayer() {
+      this.mapboxMap.addLayer({
+        id: "gaoqingyingxiang",
+        type: "raster",
+        source: {
+          type: "raster",
+          tiles: [
+            "http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
+          ],
+          tileSize: 256,
+        },
+        layout: {
+          visibility: "visible",
+        },
+        paint: {},
+      });
+    },
+    loadXianJieLayer() {
+      this.mapboxMap.addLayer({
+        id: "xianjie",
+        type: "line",
+        layout: {
+          visibility: "visible",
+        },
+        source: {
+          type: "geojson",
+          data: "http://175.27.168.120:8080/geoserver/feixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=feixian%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson",
+        },
+        paint: {
+          "line-width": 2,
+          "line-color": "orange",
+        },
+      });
+    },
+    loadZhenJieLayer() {
+      this.mapboxMap.addSource("shp_1691822212", {
+        type: "vector",
+        scheme: "tms", //new
+        tiles: [
+          "http://223.99.16.253:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
+        ],
+      });
+      this.mapboxMap.addLayer({
+        id: "zhenjieline",
+        type: "line",
+        source: "shp_1691822212",
+        "source-layer": "shp_1691822212",
+        paint: {
+          "line-color": "#0000ff",
+          "line-width": 2,
+        },
+      });
+      this.mapboxMap.addLayer({
+        id: "zhenjiepoint",
+        type: "symbol",
+        source: "shp_1691822212",
+        "source-layer": "shp_1691822212",
+        layout: {
+          "text-field": "{xzqmc}",
+          "text-size": 18,
+        },
+        paint: {
+          "text-color": "#000000", // 文本的颜色（可选，默认值为 #000000）
+          "text-halo-color": "#FFFFFF",
+          "text-halo-width": 1,
+        },
+      });
+    },
+  },
+};
 </script>
 
 <style scoped>
-  .container{
-      width:100%;
-      height: 100%;
-      padding:20px;
-      position:relative;
-  }
-
-  .grid-list-container{
-      width:50%;
-      height:100%;
-      background:#11192e;
-      float:left;
-  }
-.search-container{
-    width:100%;
-    height:50px;
-    padding:10px 15px;
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  position: relative;
 }
 
-.list-box{
-    width: calc( 100% - 0px);
-    height: calc(100% - 150px);
-    padding:20px;
-    overflow: auto;
+.grid-list-container {
+  width: 50%;
+  height: 100%;
+  background: #11192e;
+  float: left;
+}
+.search-container {
+  width: 100%;
+  height: 50px;
+  padding: 10px 15px;
 }
 
-.list-header{
-    width:calc( 100% - 60px);
-    padding:0px 20px;
-    margin:0px auto;
-    height:50px;
-    background:#1c2746;
-}
-.page-container{
-    width:100%;
-    height:50px;
-    padding-left:15px;
+.list-box {
+  width: calc(100% - 0px);
+  height: calc(100% - 150px);
+  padding: 20px;
+  overflow: auto;
 }
 
+.list-header {
+  width: calc(100% - 60px);
+  padding: 0px 20px;
+  margin: 0px auto;
+  height: 50px;
+  background: #1c2746;
+}
+.page-container {
+  width: 100%;
+  height: 50px;
+  padding-left: 15px;
+}
 
-  .list-item{
-      width:100%;
-      height:50px;
-      background:#1c2746;
-      margin-bottom:12px;
-      border-radius: 5px;
-      cursor: pointer;
-      color:#ccc;
-  }
+.list-item {
+  width: 100%;
+  height: 50px;
+  background: #1c2746;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  cursor: pointer;
+  color: #ccc;
+}
 
-    .list-item-header{
-        background:#121c38;
-    }
-  .list-item:hover{
-      background:#261e31;
-  }
+.list-item-header {
+  background: #121c38;
+}
+.list-item:hover {
+  background: #261e31;
+}
 
-.list-item-box{
-      float:left;
-    width:20%;
-      line-height:50px;
-      text-align: center;
-  }
+.list-item-box {
+  float: left;
+  width: 20%;
+  line-height: 50px;
+  text-align: center;
+}
 
-  .operate-button{
-      float:left;
-      width:30px;
-      height:30px;
-      border-radius:4px;
-      line-height:30px;
-      margin:10px 5px;
-      font-size:12px;
-      text-align: center;
-  }
-  .operate-edit{
-      color:#32cd80;
-      background:#32cd8065;
-  }
+.operate-button {
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  line-height: 30px;
+  margin: 10px 5px;
+  font-size: 12px;
+  text-align: center;
+}
+.operate-edit {
+  color: #32cd80;
+  background: #32cd8065;
+}
 
-    .operate-delete{
-      color:#fd5252;
-      background:#fd52524f;
-  }
-    /* 地图 */
-    .map-container{
-        width:50%;
-        float:left;
-        height:100%;
-    }
+.operate-delete {
+  color: #fd5252;
+  background: #fd52524f;
+}
+/* 地图 */
+.map-container {
+  width: 50%;
+  float: left;
+  height: 100%;
+}
 
-  /* 人员 */
-  .grider-list-container{
-      position:absolute;
-      top:20px;
-      right:0px;
-      width:26%;
-      float:right;
-      height: calc( 100% - 40px);
-      background:#11192e;
-      padding:15px;
-      overflow-y:auto;
-      z-index:99999;
-  }
+/* 人员 */
+.grider-list-container {
+  position: absolute;
+  top: 20px;
+  right: 0px;
+  width: 26%;
+  float: right;
+  height: calc(100% - 40px);
+  background: #11192e;
+  padding: 15px;
+  overflow-y: auto;
+  z-index: 99999;
+}
 
-  .grid-info-contianer{
-      width:100%;
-      height:120px;
-      padding:15px;
-      background:#1c2746;
-      color:#fff;
-      margin-bottom:15px;
-  }
+.grid-info-contianer {
+  width: 100%;
+  height: 120px;
+  padding: 15px;
+  background: #1c2746;
+  color: #fff;
+  margin-bottom: 15px;
+}
 
-  .grid-list-box{
-      width: 100%;
-      height: calc( 100% - 135px);
-      overflow:auto;
-  }
+.grid-list-box {
+  width: 100%;
+  height: calc(100% - 135px);
+  overflow: auto;
+}
 
-  .grider-list-item{
-      width: 100%;
-      background:#1c2746;
-      margin:0px auto;
-      padding:30px 15px;
-      border-radius:6px;
-      margin-bottom:15px;
-  }
+.grider-list-item {
+  width: 100%;
+  background: #1c2746;
+  margin: 0px auto;
+  padding: 30px 15px;
+  border-radius: 6px;
+  margin-bottom: 15px;
+}
 
-  ::v-deep .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
-      margin-bottom:8px;
-  }
+::v-deep .el-form-item--mini.el-form-item,
+.el-form-item--small.el-form-item {
+  margin-bottom: 8px;
+}
 
-  ::v-deep .el-form-item__label{
-      font-weight: 400;
-      color:#ccc;
-  }
+::v-deep .el-form-item__label {
+  font-weight: 400;
+  color: #ccc;
+}
 
-  ::v-deep .el-input__inner{
-      background:none;
-      color:#ccc;
-  }
+::v-deep .el-input__inner {
+  background: none;
+  color: #ccc;
+}
 
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 0;
+}
 
-   ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
-    border: 0
-  }
-  
-  ::-webkit-scrollbar {
-    height: 10px;
-    width: 10px;
-    background: transparent;
-    border-radius: 5px
-  }
-  
-  ::-webkit-scrollbar-thumb {
-    padding-top: 100px;
-    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
-    background-color: #797979;
-    min-height: 28px;
-    border-radius: 4px;
-    background-clip: padding-box
-  }
-  
-  ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
-    border: 0
-  }
-  
-  ::-webkit-scrollbar-thumb:hover {
-    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
-    background-color: rgba(0, 0, 0, .4)
-  }
-</style>
\ No newline at end of file
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+  background: transparent;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  padding-top: 100px;
+  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
+  background-color: #797979;
+  min-height: 28px;
+  border-radius: 4px;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>