人员预警页面

src/assets/scss/modules/visual/warning.scss

@@ -0,0 +1,161 @@
+.warning-box {
+  box-sizing: border-box;
+  width: 1881px;
+  height: 914px;
+  margin: auto;
+  color: #fff;
+  background: url('../../../img/modules/visual/warning-box.png') no-repeat center;
+  background-size: 100% 100%;
+  padding: 45px 21px 35px 24px;
+
+  &-top {
+    display: flex;
+    justify-content: space-around;
+    height: 190px;
+
+    .top-item {
+      box-sizing: border-box;
+      width: 280px;
+      height: 190px;
+      padding: 10px 22px 14px 21px;
+      // background: rgba(255, 255, 255, 0);
+      border: 1px solid #1043C0;
+      box-shadow: 0px 83px 150px 0px #002790;
+      border-radius: 8px;
+
+      &-img {
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 78px;
+          height: 78px;
+          margin-right: 16px;
+        }
+
+        .top-item-left {
+          display: flex;
+          flex-direction: column;
+
+          span {
+            display: inline-block;
+          }
+
+          span:nth-child(1) {
+            font-size: 18px;
+            font-weight: 400;
+            color: #FFFFFF;
+          }
+
+          span:nth-child(2) {
+            font-size: 28px;
+            font-weight: bold;
+            color: #00FFFC;
+            margin-top: 10px;
+          }
+        }
+      }
+
+      &-num {
+        width: 100%;
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        align-items: space-between;
+        // border: 1px solid red;
+
+        .num-item {
+          position: relative;
+          width: 100%;
+          height: 35px;
+          display: flex;
+          border-radius: 4px;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px 0 29px;
+
+          &::after {
+            display: block;
+            content: '';
+            width: 8px;
+            height: 8px;
+            background: #F0F3F7;
+            border-radius: 50%;
+            position: absolute;
+            left: 12px;
+            top: 50%;
+            transform: translate(0, -50%);
+          }
+
+          div:nth-child(1) {
+            font-size: 16px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+          }
+
+          div:nth-child(2) {
+            // width: 70%;
+            display: flex;
+            font-size: 20px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #FFFFFF;
+
+            .right-icon {
+              width: 10px;
+              height: 14px;
+            }
+          }
+        }
+
+        .num-item-active {
+          background: linear-gradient(0deg, #1A5AFD, #26C4FF);
+        }
+
+        .num-item:nth-child(2) {
+          margin-top: 10px;
+        }
+      }
+    }
+
+
+  }
+
+  &-bottom {
+    box-sizing: border-box;
+    width: 100%;
+    height: calc(100% - 300px);
+    margin-top: 60px;
+
+
+    .pagination {
+      box-sizing: border-box;
+      margin-top: 20px;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: flex-end;
+
+      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background: #0266D1;
+        color: #000D3F;
+      }
+
+      /deep/ .el-pagination .el-pager li {
+        background: #002E74;
+      }
+
+      /deep/ .el-pagination .btn-prev {
+        background: #002E74;
+      }
+
+      /deep/ .el-pagination .btn-next {
+        background: #002E74;
+      }
+    }
+  }
+
+
+
+}

src/views/modules/visual/warning/components/screen-table/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="warning-table">
+      <div class="table">
+        <div class="table-header">
+          <div class="table-header-th" v-for="(item,index) in headerList" :key='item.title' :style="headerStyle[index]">{{item.title}}</div>
+        </div>
+        <div class="table-body">
+          <div class="table-body-tr" v-for="(value,index) in tableData" :key='index'>
+            <div class="td" v-for="(item,indexs) in value" :key="indexs" :style="tableContentStyle[indexs]">{{item}}
+              <span v-if="indexs+1==value.length" class="more" @click="onClickMorePop(index)" ref='morePop'>
+                更多>
+                <span class="more-pop" v-if="visiblePopList[index]">
+                  李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
+                  李易峰、赵敏、何军、曲树惠
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+export default {
+name: 'warning-table',
+  props: {
+    headerList: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          { title: '序号' },
+          { title: '所属网格'},
+          { title: '所属小区'},
+          { title: '楼号'},
+          { title: '姓名' },
+        ]
+      }
+    },
+    tableData: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+        [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+        [2,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+        [3,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+        [4,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+        [5,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+        [6,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+        [7,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+        [8,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+        [9,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+        [10,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+    
+        ]
+      }
+    },
+    // 单独给头部设置样式
+    headerStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ]
+      }
+    },
+  // 单独给内容设置样式
+    tableContentStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ]
+      }
+    },
+    // // 表格平均分的份数
+    // ava: {
+    //   type: Number,
+    //   default: 8
+    // },
+    // // 表头高度--默认占比10%
+    // headerHeightAva: {
+    //   type: String,
+    //   default: '10%'
+    // },
+    // // 表格主体平均分成的份数
+    // tableContentAva: {
+    //   type: Number,
+    //   default: 5
+    // },
+  },
+  data() {
+    return {
+      visiblePopList:[false,false,false,false,false,false,false,false,false,false],
+    };
+  },
+mounted () {
+    // window.addEventListener('click', e => {
+    //   if (this.$refs.morePop && !this.$refs.morePop.contains(e.target)) {
+    //      this.visiblePopList.forEach((item,indexs)=>{
+    //       Vue.set(this.visiblePopList, indexs, false)
+    //     })
+    //   }
+    // })
+  },
+  created(){
+  },
+  methods: {
+      onClickMorePop(index) {
+        this.visiblePopList.forEach((item,indexs)=>{
+          if(index==indexs){
+            Vue.set(this.visiblePopList, index, true)
+              }else{
+            Vue.set(this.visiblePopList, indexs, false)
+          }
+        })
+      }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.warning-table{
+     box-sizing: border-box;
+     width: 100%;
+     height: 100%;
+    .table {
+      width: 100%;
+      height: 100%;
+      &-header {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        background: rgba(8, 37, 134, 0.85);
+        font-size: 16px;
+        font-weight: 400;
+        color: #FFFFFF;
+
+        &-th {
+          text-align: center;
+          width: calc(100% / 5);
+        }
+      }
+
+      &-body {
+        box-sizing: border-box;
+        width: 100%;
+        height: calc(100% - 50px);
+        font-size: 18px;
+        font-weight: 400;
+        color: #FFFFFF;
+
+        &-tr {
+          width: 100%;
+          // height: 50px;
+          height: calc(100% / 10);
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          .td {
+            text-align: center;
+            width: calc(100% / 5);
+            .more {
+              font-size: 18px;
+              font-weight: 400;
+              color: #E4DC00;
+              position: relative;
+              
+              &-pop{
+                box-sizing: border-box;
+                display: block;
+                box-sizing: border-box;
+                width: 215px;
+                height: auto;
+                line-height: 20px;
+                border: 1px solid red;
+                position: absolute;
+                left: -100%;
+                top: 150%;
+                background: #06186D;
+                border: 1px solid #1A64CC;
+                border-radius: 5px;
+                font-size: 9px;
+                font-weight: 400;
+                color: #FFFFFF;
+                padding:16px 8px 10px 9px;
+                z-index: 1;
+                &::after{
+                  position: absolute;
+                  left: 30%;
+                  top: -30%;
+                  display: flex;
+                  content:'';
+                  width: 0;
+                  height: 0;
+                  border-width: 13px;
+                  border-style: solid;
+                  border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
+                  // border-color: transparent transparent red transparent;
+                  transform: translate(-50%,0);
+                }
+              }
+          
+            }
+          }
+        }
+
+        &-tr:nth-child(2n) {
+          background: rgba(16, 75, 164, 0.24);
+        }
+
+        &-tr:hover {
+          background: url('../../../../../../assets/img/modules/visual/hover-bac.png') no-repeat center;
+          background-size: 100% 100%;
+        }
+      }
+
+    }
+}
+</style>

src/views/modules/visual/warning/index.vue

@@ -1,525 +1,83 @@
 <template>
-  <div calss="div_main"
-       style="position: relative">
-
-    <!-- 组织路由 -->
-    <div>
-      <div class="router_line"></div>
-      <div class="div_router">
-        <span class="router_parents"
-              v-for="(item,index) in runAgency"
-              :key="index">{{item.name}}<span class="arrow">></span></span>
-
-        <span class="router_child">{{orgData.name}}</span>
+  <div class="warning-box">
+    <div class="warning-box-top">
+      <div class="top-item" v-for="item in [1, 2, 3, 4, 5, 6]" :key="item">
+        <div class="top-item-img">
+          <img
+            src="../../../../assets/img/modules/visual/shiye.png"
+            alt=""
+            srcset=""
+          />
+          <div class="top-item-left">
+            <span>失业人员</span>
+            <span>1022</span>
+          </div>
+        </div>
+        <div class="top-item-num">
+          <div class="num-item num-item-active" @click="onClickList">
+            <div>5-10人</div>
+            <div>
+              <div>6栋</div>
+              <img
+                src="../../../../assets/img/modules/visual/right-icon.png"
+                alt=""
+                class="right-icon"
+              />
+            </div>
+          </div>
+          <div class="num-item">
+            <div>5-10人</div>
+            <div>
+              <div>6栋</div>
+              <img
+                src="../../../../assets/img/modules/visual/right-icon.png"
+                alt=""
+                class="right-icon"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-
-    <div class="div_content">
-
-      <div id="map"
-           class="div_map"
-           :style="{height:mapHeight+'px'}"></div>
-
-      <div class="div_data">
-        <div class="div_search">
-          <el-input style="width:200px"
-                    v-model="name"
-                    placeholder="请输入姓名"></el-input>
-
-          <el-button style="margin-left:10px"
-                     type="primary"
-                     icon="el-icon-plus"
-                     @click="handleSearch">搜索</el-button>
-
-        </div>
+    <div class="warning-box-bottom">
+      <screen-table :headerList='headerList'></screen-table>
+      <div class="pagination">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="1000">
+      </el-pagination>
       </div>
     </div>
-
   </div>
-
 </template>
 
 <script>
-import 'ol/ol.css'
-import { Map, View } from 'ol'
-import TileLayer from 'ol/layer/Tile.js';
-import XYZ from 'ol/source/XYZ.js';
-import VectorLayer from 'ol/layer/Vector.js';
-import VectorSource from 'ol/source/Vector.js';
-import GeoJSON from 'ol/format/GeoJSON.js';
-import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
-import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style.js';
-import { mapGetters } from "vuex";
-import { Loading } from 'element-ui'; //引入Loading服务
-import { requestPost } from "@/js/dai/request";
-
-
-
-let loading;//加载动画
-
-let x = 1500
-let y = 700
-
-let map;
-let mapView;
-let gaodeMapLayer;//背景地图图层
-let polygonLayer;//变电站标注图层
-let polygonSource;//变电站标注多边形
-let select;//选中标注
-
-
-//变电站标注的文字样式
-var createTextStyle = function (feature) {
-  return new Text({
-    textAlign: undefined,
-    font: "bold 18px Arial",
-    //fontFamily: "Courier New, monospace",
-    fontWeight: "bold",
-    text: feature.values_.name,
-    //text: "变电站名称",
-    fill: new Fill({ color: "#007ab9" }),
-    stroke: new Stroke({ color: "#ffffff", width: 3 }),
-    offsetY: 0,
-    overflow: true,
-  });
-};
-//变电站标注样式
-
-var polygonStyleFunction = (function () {
-  return function (feature) {
-    return new Style({
-      fill: new Fill({
-        color: [255, 255, 255, 0.3]
-      }),
-      stroke: new Stroke({
-        color: [0, 153, 255, 1],
-        width: 3
-      }),
-
-      text: createTextStyle(feature)
-    });;
-  };
-})()
-
-const vueGis = {
-  name: 'HomeMap',
-  data () {
-    return {
-      centerPoint: [],//中心点位置
-      zoom: 14,//缩放范围：区14
-      minZoom: 1,//最小缩放
-
-      orgData: {},//当前组织对象
-      orgId: '',
-      orgLevel: '',
-
-      subAgencyArray: [],//下拉框数据
-
-      selPolygonId: '',//选择的多边形id
-      selPolygon: {},
-
-      //右侧列表
-      name: "",
-
-      //下钻层级记录
-      runNum: 0,
-      runAgency: [],
-
-    }
+import screenTable from "./components/screen-table/index";
+export default {
+  name: "warning-box",
+  components: {
+    screenTable
   },
-  async mounted () {
-    //加载组织数据
-    await this.loadOrgData()
-
-    //初始化地图
-    this.initMap()
-
-    //添加标注图层
-    this.addPolygonLayer()
-
-    //加载当前园区的标注
-    this.loadPolygon(this.subAgencyArray)
-
+  data() {
+    return {
+        headerList:[
+        { title: '序号' },
+        { title: '所属网格'},
+        { title: '所属小区'},
+        { title: '楼号'},
+        { title: '姓名' },
+      ],
+    };
   },
   methods: {
-    handleSearch () {
-
-    },
-
-
-    //刷新地图
-    async refreshMap (isRefreshView) {
-      //加载组织数据
-      await this.loadOrgData()
-
-      //加载当前园区的标注
-      await this.loadPolygon(this.subAgencyArray)
-
-      //重置地图中心点
-      if (isRefreshView) {
-        this.setMapLocation()
-        mapView.setCenter(this.centerPoint);
-        mapView.setZoom(this.zoom);
-      }
-    },
-
-
-    //返回上一级组织
-    handleBack () {
-
-      this.runNum--
-      this.runAgency.pop()
-      if (this.runNum === 0) {
-        this.orgId = ''
-        this.orgLevel = ''
-      } else {
-        this.orgId = this.runAgency[this.runAgency.length - 1].id
-        this.orgLevel = this.runAgency[this.runAgency.length - 1].level
-      }
-
-      this.refreshMap(true)
-
-    },
-
-    //加载组织数据
-    async loadOrgData () {
-      const url = "/gov/org/agency/maporg"
-      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
-      let params = {
-        orgId: this.orgId,
-        level: this.orgLevel
-      }
-
-      const { data, code, msg } = await requestPost(url, params)
-
-      if (code === 0) {
-        this.orgData = data
-        this.runAgency.push(data)
-
-        if (data.children && data.children.length > 0) {
-          this.subAgencyArray = data.children
-
-        }
-
-      } else {
-        this.$message.error(msg)
-      }
-
-    },
-
-    //加载当前园区的标注
-    loadPolygon (subAgencyArray) {
-      polygonSource.clear()//清空变电站标注
-
-      let featureData = []//标注数据
-      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
-        let oneData = {}
-
-        subAgencyArray.forEach(agencyItem => {
-
-          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
-            oneData = {
-              type: 'Feature',
-              id: agencyItem.id,
-              properties: {
-                id: agencyItem.id,
-                level: agencyItem.level,
-                name: agencyItem.name
-              },
-              geometry: {
-                type: 'Polygon',
-                coordinates: [],
-              },
-            }
-            let coorArray = agencyItem.coordinates.split(',')//坐标数组
-
-            let itemArray = []//单个点位的[lon,lat]，数组
-            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
-
-            coorArray.forEach((item, index) => {
-              itemArray.push(item)
-              if (index % 2 == 0) {//偶
-
-              } else {//奇
-                polygonArray.push(itemArray)
-                itemArray = []
-              }
-
-            });
-            oneData.geometry.coordinates.push(polygonArray)
-            featureData.push(oneData)
-          }
-
-        });
-
-      }
-
-      if (featureData && featureData.length > 0) {
-        var geojsonObject = {
-          'type': 'FeatureCollection',
-          'features': featureData
-        };
-        let feature = (new GeoJSON()).readFeatures(geojsonObject)
-        polygonSource.addFeatures(feature)
-
-      }
-
-    },
-
-    //下钻到下一级
-    toSubAgency (e) {
-      console.log(e)
-
-      //下钻到下一级
-      this.subAgencyArray.forEach(item => {
-        if (item.id === e.selected[0].id_) {
-          this.selPolygonId = item.id
-          this.selPolygon = item
-          this.orgId = item.id
-          this.orgLevel = item.level
-
-        }
-      });
-
-      this.runNum++
-      this.runAgency.push(this.selPolygon)
-
-      this.refreshMap(true)
-
-
-    },
-
-    //设置地图定位的中心点和缩放级别
-    setMapLocation () {
-      this.centerPoint = []
-
-      if (this.orgData.longitude && this.orgData.latitude) {
-        this.centerPoint.push(this.orgData.longitude)
-        this.centerPoint.push(this.orgData.latitude)
-      }
-
-      this.setZoom(this.orgData.agencyLevel)
-    },
-
-    //根据组织层级设置缩放级别
-    setZoom (agencyLevel) {
-      if (agencyLevel === 'district') {
-        this.zoom = 14
-      } else if (agencyLevel === 'street') {
-        this.zoom = 15
-      } else if (agencyLevel === 'community') {
-        this.zoom = 16
-      }
-
-    },
-
-    initMap () {
-      this.setMapLocation()
-
-      gaodeMapLayer = new TileLayer({
-        title: "地图",
-        source: new XYZ({
-          //指定url瓦片
-          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
-          wrapX: true//x方向平铺，也可以选择false
-        }),
-        zIndex: 20
-      });
-
-      mapView = new View({
-        //中心点坐标
-        center: this.centerPoint,
-        // projection: 'EPSG:3857',
-        projection: 'EPSG:4326',
-        zoom: this.zoom,
-        minZoom: this.minZoom
-      }),
-        //初始化map和地图底图
-        //创建地图容器
-        map = new Map({
-          layers: [gaodeMapLayer],
-          //加载瓦片图层数据
-          view: mapView,
-          target: 'map'
-          //目标加载到map中
-        })
-
-      map.on('singleclick', function (e) {
-        console.log(e.coordinate)
-        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
-
-      })
-
-      //去除双击放大效果
-      const dblClickInteraction = map
-        .getInteractions()
-        .getArray()
-        .find(interaction => {
-          return interaction instanceof DoubleClickZoom;
-        });
-      map.removeInteraction(dblClickInteraction);
-
-    },
-
-    //添加变电站标注图层
-    addPolygonLayer () {
-      polygonSource = new VectorSource({
-        //features: (new GeoJSON()).readFeatures(geojsonObject)
-      });
-
-      polygonLayer = new VectorLayer({
-        source: polygonSource,
-        style: polygonStyleFunction,
-        zIndex: 50
-      });
-
-      //选中多边形后的样式
-      var overlayStyle = (function () {
-
-        return function (feature) {
-          var styles = {};
-          styles['Polygon'] = [
-            new Style({
-              stroke: new Stroke({
-                color: '#ec9000',
-                width: 2
-              })
-            }),
-
-            new Style({
-              fill: new Fill({
-                color: 'rgba(0, 0, 255, 0.1)'
-              })
-            }),
-            new Style({
-              text: createTextStyle(feature)
-            })
-          ];
-          styles['MultiPolygon'] = styles['Polygon'];
-          return styles[feature.getGeometry().getType()];
-        };
-      })();
-
-      select = new Select({
-        style: overlayStyle
-      });
-
-
-      map.addLayer(polygonLayer)
-      map.addInteraction(select);
-
-      select.on('select', e => {
-        this.toSubAgency(e)
-      });
-
-    },
-
-    //开启加载动画
-    startLoading () {
-      loading = Loading.service({
-        lock: true, //是否锁定
-        text: '正在加载……', //加载中需要显示的文字
-        background: 'rgba(0,0,0,.7)' //背景颜色
-      });
-
-    },
-
-    //结束加载动画
-    endLoading () {
-      //clearTimeout(timer);
-      if (loading) {
-        loading.close();
-      }
-    },
-  },
-  props: {
-
-    vueFlag: {
-      type: String,
-      default: "alarm"
-    }
-  },
-  computed: {
-
-    mapHeight () {
-
-      return this.clientHeight - 120;
-
-    },
-    // zoom: {
-    //   get () {
-    //     //根据不同屏幕分辨率，控制zoom大小
-    //     if (this.clientHeight < 900) {
-    //       return 2.3
-    //     } else {
-    //       return 2.8
-    //     }
-    //   },
-    //   set (value) {
-    //   }
-    // },
-    ...mapGetters(["clientHeight"])
-
-  },
-  components: {},
-}
-export default vueGis;
-</script>
-
-<style lang="scss">
-.div_main {
-  background-color: #12a3ff;
-}
-.router_line {
-  width: 106px;
-  height: 1px;
-  border: 1px solid #000000;
-  /* opacity: 0.09; */
-}
-.div_router {
-  margin-top: 5px;
-
-  .router_parents {
-    color: #a0c3d9;
-    font-size: 8px;
-
-    .arrow {
-      padding: 0 5px;
-    }
-  }
-
-  .router_child {
-    color: #ffffff;
-    font-size: 8px;
+  onClickList(){}
   }
-}
-
-.div_search {
-  text-align: center;
-  margin-top: 20px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.div_content {
-  margin-top: 10px;
-  padding: 10px 10px;
-  display: flex;
-}
+};
+</script>
 
-.div_map {
-  width: 100%;
-}
-.div_data {
-  flex: 0 0 400px;
-  margin-left: 20px;
-  background-color: rgb(233, 235, 235);
-  border-radius: 5px;
-}
-</style>  
-<style>
-.ol-overlaycontainer-stopevent {
-  display: none;
-}
-</style>   
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>