up

public/config.js

@@ -2,7 +2,7 @@ window.serverAPI = {
     baseUrl: "http://192.168.2.96:8080",
 
     // geoserver
-    geoserverUrl: "http://192.168.2.20:9080/geoserver",
+    geoserverUrl: "http://121.36.229.60:9080/geoserver",
     username: "admin",
     password: 'geoserver',
 }

src/views/crops/classify/index.vue

@@ -17,10 +17,7 @@
                     <span>作物类型统计-高标准农田</span>
                     <p>
                         下载 &nbsp;
-                        <img
+                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
                     </p>
                 </div>
                 <div ref="farmlandDiv" class="farmlandDiv"></div>
@@ -31,19 +28,12 @@
                     <span>作物类型统计-行政区划</span>
                     <p>
                         下载 &nbsp;
-                        <img
+                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
                     </p>
                 </div>
                 <el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
-                    <el-option
+                    <el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
-                        v-for="item in Township.arr"
+                        :value="item.properties.XZDM" />
-                        :key="item.properties.XZDM"
-                        :label="item.properties.XZMC"
-                        :value="item.properties.XZDM"
-                    />
                 </el-select>
                 <div ref="ASdivisionDiv" class="ASdivision"></div>
             </div>
@@ -53,96 +43,62 @@
                 <template #title>图例</template>
                 <div class="mt-4">
                     <el-checkbox-group v-model="checkList" @change="change">
-                        <el-checkbox
+                        <el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{
-                            style="
+                                background: value.color,
+                                border: `1px solid ${value.color}`,
+                                width: `100%`,
+                            }" v-model="checked3" :disabled="value.disabled" :label="item" />
+
+                        <!-- <el-checkbox style="
                                 background: rgba(251, 171, 60, 1);
                                 border: 1px solid rgba(251, 171, 60, 1);
                                 width: 100%;
-                            "
+                            " v-model="checked3" label="小麦" />
-                            v-model="checked3"
+                        <el-checkbox style="
-                            label="小麦"
-                        />
-                        <el-checkbox
-                            style="
                                 background: rgba(251, 219, 13, 1);
                                 border: 1px solid rgba(251, 219, 13, 1);
                                 width: 100%;
-                            "
+                            " v-model="checked4" label="玉米" />
-                            v-model="checked4"
+                        <el-checkbox style="
-                            label="玉米"
-                        />
-                        <el-checkbox
-                            style="
                                 background: rgba(244, 218, 136, 1);
                                 border: 1px solid rgba(244, 218, 136, 1);
                                 width: 100%;
-                            "
+                            " v-model="checked3" label="大豆" />
-                            v-model="checked3"
+                        <el-checkbox style="
-                            label="大豆"
-                        />
-                        <el-checkbox
-                            style="
                                 background: rgba(174, 83, 110, 1);
                                 border: 1px solid rgba(174, 83, 110, 1);
                                 width: 100%;
-                            "
+                            " v-model="checked4" label="地瓜" />
-                            v-model="checked4"
+                        <el-checkbox style="
-                            label="地瓜"
-                        />
-                        <el-checkbox
-                            style="
                                 background: rgba(242, 177, 167, 1);
                                 border: 1px solid rgba(242, 177, 167, 1);
                                 width: 100%;
-                            "
+                            " v-model="checked3" label="花生" />
-                            v-model="checked3"
+                        <el-checkbox style="
-                            label="花生"
-                        />
-                        <el-checkbox
-                            style="
                                 background: rgba(50, 211, 235, 0.8);
                                 border: 1px solid rgba(50, 211, 235, 1);
                                 width: 100%;
-                            "
+                            " v-model="checked4" label="蓝莓" />
-                            v-model="checked4"
+                        <el-checkbox style="
-                            label="蓝莓"
-                        />
-                        <el-checkbox
-                            style="
                                 background: rgba(91, 196, 159, 1);
                                 border: 1px solid rgba(91, 196, 159, 1);
                                 width: 100%;
-                            "
+                            " v-model="checked3" label="茶叶" />
-                            v-model="checked3"
+                        <el-checkbox style="
-                            label="茶叶"
-                        />
-                        <el-checkbox
-                            style="
                                 background: rgba(225, 153, 75, 1);
                                 border: 1px solid rgba(225, 153, 75, 1);
                                 width: 100%;
-                            "
+                            " v-model="checked3" label="马铃薯" />
-                            v-model="checked3"
+                        <el-checkbox style="
-                            label="马铃薯"
-                        />
-                        <el-checkbox
-                            style="
                                 background: rgba(166, 209, 82, 1);
                                 border: 1px solid rgba(166, 209, 82, 1);
                                 width: 100%;
-                            "
+                            " v-model="checked3" label="白菜和萝卜" />
-                            v-model="checked3"
+                        <el-checkbox style=" -->
-                            label="白菜和萝卜"
-                        />
-                        <el-checkbox
-                            style="
                         background: rgba(175, 110, 250, 0.8);
                         border: 1px solid rgba(175, 110, 250, 0.8);
                         width: 100%;
-                            "
+                        " v-model="checked3" label="其他" />
-                            v-model="checked3"
-                            label="其他"
-                        />
                     </el-checkbox-group>
                 </div>
             </el-collapse-item>
@@ -158,11 +114,21 @@
             <span><img src="@/assets/images/face.png" alt="" /></span>
             <span><img src="@/assets/images/position.png" alt="" /></span>
         </div>
+        <div id="popup1">
+            <div v-for="(item, index) in clickInfoMap.info" :key="index">
+                <div class="rowWra"><span>作物：</span><span>{{ item.crop }}</span></div>
+                <div class="rowWra"><span>面积：</span><span>{{ item.Shape_Area }}</span></div>
+                <div class="rowWra"><span>镇名：</span><span>{{ item.town }}</span></div>
+                <div class="rowWra" v-if="item.village"><span>村名：</span><span>{{ item.village }}</span></div>
+                <div class="rowWra" v-if="item.people"><span>土地所有人：</span><span>{{ item.people }}</span></div>
+            </div>
+            <div class="cancel" @click="hiddenOverlayChart">X</div>
+        </div>
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, inject } from 'vue';
+import { ref, onMounted, inject, watch } from 'vue';
 import * as echarts from 'echarts';
 import TimeLine from '@/components/TimeLine/TimeLine.vue';
 import { useEcharts } from '@/hooks/useEcharts';
@@ -176,6 +142,7 @@ const ProgressBarDiv = ref(null);
 const ASdivisionDiv = ref(null);
 let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
 const value = ref('');
+const clickInfoMap = ref({ info: [] });
 let dd = {
     小麦: [],
     玉米: [],
@@ -189,17 +156,30 @@ let dd = {
     其他: [],
 };
 let dic = {
-    小麦: 'rgba(102, 142, 214, 0.8)',
+    小麦: { color: 'rgba(255, 141, 26, 1)', disabled: false },
-    玉米: 'rgba(255, 225, 104, 0.8)',
+    玉米: { color: 'rgba(255, 255, 26, 1)', disabled: true },
-    大豆: 'rgba(156, 220, 130, 0.8)',
+    大豆: { color: 'rgba(255, 201, 148, 1)', disabled: false },
-    地瓜: 'rgba(156, 220, 130, 0.8)',
+    地瓜: { color: 'rgba(255, 84, 84, 1)', disabled: false },
-    花生: 'rgba(212, 236, 89, 0.8)',
+    花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
-    蓝莓: 'rgba(50, 211, 235, 0.8)',
+    蓝莓: { color: 'rgba(26, 255, 255, 1)', disabled: false },
-    茶叶: 'rgba(91, 196, 159, 0.8)',
+    茶叶: { color: 'rgba(26, 255, 140, 1)', disabled: false },
-    马铃薯: 'rgba(254, 182, 77, 0.8)',
+    马铃薯: { color: 'rgba(255, 171, 87, 1)', disabled: true },
-    白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
+    白菜和萝卜: { color: 'rgba(140, 255, 26, 1)', disabled: true },
-    其他: 'rgba(250, 129, 109, 0.8)',
+    其他: { color: 'rgba(140, 26, 255, 1)', disabled: false },
 };
+// 图层字典
+let layersDic = {
+    小麦: 'shuzisannong:xiaomai',
+    // 玉米: 'shuzisannong:yumi',
+    大豆: 'shuzisannong:dadou',
+    地瓜: 'shuzisannong:digua',
+    花生: 'shuzisannong:huasheng',
+    蓝莓: 'shuzisannong:lanmei',
+    茶叶: 'shuzisannong:chaye',
+    其他: 'shuzisannong:other',
+    // 马铃薯: 'rgba(225, 153, 75, 1)',
+    // 白菜和萝卜: 'rgba(166, 209, 82, 1)',
+}
 var data = {
     title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
     corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
@@ -231,6 +211,9 @@ onMounted(() => {
     ProgressBar(); //图表
     ASdivision(); //图表
     getArea(); //请求
+
+    checkList.value = Object.keys(dic)
+    // checkList.value = Object.keys(dic.filter(item => !item.disabled))
 });
 const mapOption = {
     url:
@@ -342,7 +325,6 @@ function initMap() {
                 });
                 // 拿取最后一个图层
                 let provider = providerPoint._imageryProvider;
-                console.log(providerPoint);
                 if (provider && provider.ready && provider._layers && providerPoint.show === true) {
                     xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
                     let promise = provider.pickFeatures(
@@ -363,7 +345,9 @@ function initMap() {
         }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
-    addwms();
+    // addwms();
+    // 图层点击事件
+    layerClick()
 
     //加载黄岛区村级地图服务
     // Cesium.GeoJsonDataSource.load(
@@ -471,7 +455,7 @@ function initMap() {
     // );
 }
 
-const checkList = ref(Object.keys(dic));
+const checkList = ref([]);
 
 function getLevel(height) {
     if (height > 48000000) {
@@ -515,13 +499,47 @@ function getLevel(height) {
     }
 }
 
-function change(e) {
+function change(e, a) {
-    console.log('e:', e);
+    console.log('e:', e, a);
-    console.log('checkList:', checkList.value);
+    // console.log('checkList:', checkList.value);
-    removeWms('crop');
+    // removeWms('crop');
-    addwms();
+    // addwms();
 }
 
+watch(() => checkList.value, (val, oldVal) => {
+    if (val.length > oldVal.length) {
+        // 挑选出增多的数据
+        const newData = val.filter(item => {
+            const index = oldVal.findIndex(it => it === item)
+            if (index < 0) {
+                return item
+            }
+        })
+        newData.forEach(item => {
+            if (layersDic[item]) {
+                addLayerWms(layersDic[item], item)
+            }
+        })
+    } else if (val.length < oldVal.length) {
+        // 挑选出减少的数据
+        const newData = oldVal.filter(item => {
+            const index = val.findIndex(it => it === item)
+            if (index < 0) {
+                return item
+            }
+        })
+        newData.forEach(item => {
+            if (layersDic[item]) {
+                removeWms(item)
+            }
+        })
+    }
+})
+watch(() => clickInfoMap.value, (val) => {
+    console.log('valvalvalvalvalvalvalvalvalval:', val)
+
+})
+// 根据name移除wms
 function removeWms(name) {
     // 倒叙遍历，customName是自定义的属性
     // let viewer = viewers.value
@@ -535,7 +553,6 @@ function removeWms(name) {
 function addwms() {
     // let viewer = viewers.value
     const name = "'" + checkList.value.join("','") + "'";
-    console.log('name:', name);
     let map = new Cesium.WebMapServiceImageryProvider({
         url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms?`,
         layers: 'shuzisannong:fenlei', //图层名
@@ -549,11 +566,151 @@ function addwms() {
     map.customName = 'crop'; //自己定义各种属性
     viewer.imageryLayers.addImageryProvider(map); //添加图层
 }
+// 添加wms
+function addLayerWms(layers, customName) {
+    let map = new Cesium.WebMapServiceImageryProvider({
+        url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
+        layers: layers, //图层名
+        parameters: {
+            service: 'WMS',
+            format: 'image/png',
+            transparent: true, //是否透明
+            // CQL_FILTER: `crop in (${name})`,
+        },
+    });
+    map.customName = customName; //自己定义各种属性
+    viewer.imageryLayers.addImageryProvider(map); //添加图层
+}
+// 图层点击事件
+function layerClick() {
+
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+    handler.setInputAction(async function (movement) {
+        var ray = viewer.camera.getPickRay(movement.position);
+        var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+        if (cartesian) {
+            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+            if (cartographic) {
+                let xy = new Cesium.Cartesian2();
+                let alti = viewer.camera.positionCartographic.height;
+                let level = getLevel(alti);
+                const layers = viewer.imageryLayers._layers;
+                console.log('layers:', layers);
+                // 筛选出种植结构的最后一个图层
+                // let newLayer = layers.filter(item => {
+                //     const index = Object.values(layersDic).findIndex(it => item._imageryProvider._layers && it === item._imageryProvider._layers)
+                //     if (index > -1) {
+                //         return item
+                //     }
+                // })
+                let newData = []
+                let promise = layers.map(async item => {
+                    console.log('item')
+                    if (item._imageryProvider._layers) {
+                        // 是种植结构图层
+                        if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
+                            const providerPoint = item;
+                            // 拿取最后一个图层
+                            let provider = providerPoint._imageryProvider;
+                            if (provider && provider.ready && provider._layers && providerPoint.show === true) {
+                                xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
+                                let promise = provider.pickFeatures(xy.x, xy.y, level, cartographic.longitude, cartographic.latitude);
+                                if (promise) {
+                                    await promise.then(data => {
+                                        if (data.length > 0) {
+                                            let info = data['0'].properties
+                                            console.log('info:', info)
+                                            const ind = newData.findIndex(ii => ii && ii.crop === info.crop)
+                                            if (ind < 0) {
+                                                console.log('push:', info)
+                                                newData.push(info)
+                                                console.log('newData:', newData)
+                                            }
+                                        }
+                                    });
+                                }
+                            }
+                        }
+                    }
+                })
+                await Promise.all(promise)
+                console.log('newDatanewDatanewDatanewDatanewData:', newData)
+                if (newData.length > 0) {
+                    const coordinate = movement.position; //屏幕坐标 // 转为经纬度，保存，用于监听时转换坐标
+                    var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
+                    var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
+                    console.log('cartesian:', cartesian);
+                    if (cartesian) {
+                        let cartographic = ellipsoid.cartesianToCartographic(cartesian);
+                        let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
+                        let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
+                        console.log('longitudeString:', longitudeString);
+                        // newData.lon = longitudeString;
+                        // newData.lat = latitudeString; /*保存（弹窗）的数据*/
+
+                        console.log('data:', newData);
+                        clickInfoMap.value = {
+                            info: newData,
+                            // ...newData['0'],
+                            lon: longitudeString,
+                            lat: latitudeString,
+                        };
+                    }
+                    showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
+                    viewer.scene.postRender.addEventListener(infoWindowPostRender);
+                } else {
+                    hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
+                }
+
+            }
+        }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+}
+// 地图移动时弹窗跟随
+function infoWindowPostRender() {
+    // let viewer = viewers.value;
+    // console.log('clickInfoMap.value:', clickInfoMap.value);
+    if (clickInfoMap.value && clickInfoMap.value.lon && clickInfoMap.value.lat) {
+        //经纬度转为世界坐标
+        const gisPosition = Cesium.Cartesian3.fromDegrees(
+            Number(clickInfoMap.value.lon),
+            Number(clickInfoMap.value.lat),
+            0
+        ); //转化为屏幕坐标
+        var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+            viewer.scene,
+            gisPosition
+        );
+
+        if (Cesium.defined(windowPosition)) {
+            const pop = document.getElementById('popup1');
+            pop.style.top = windowPosition.y - 10 + 'px';
+            pop.style.left = windowPosition.x + 10 + 'px';
+        }
+    }
+}
+// 隐藏弹窗
+function hiddenOverlayChart() {
+    // let viewer = viewers.value;
+    const pop = document.getElementById('popup1');
+    pop.style.display = 'none'; // 清除监听事件
+    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
+}
+//显示弹窗
+function showOverlayChart(position) {
+    console.log('显示')
+    const pop = document.getElementById('popup1');
+    pop.style.display = 'block';
+    pop.style.position = 'absolute';
+    pop.style.top = position.y - 10 + 'px';
+    pop.style.left = position.x + 10 + 'px';
+    pop.style.zIndex = 99;
+}
 
 //接口
 const getArea = (item, index) => {
     return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
-        console.log(response.data);
         return response.data;
     });
 };
@@ -618,7 +775,6 @@ const selectTab = () => {
     let arr = [...Township.arr];
     arr.forEach(item => {
         if (item.properties.XZDM == value.value) {
-            console.log(item.properties);
             getArea(item.properties.XZMC, '2');
             viewer.camera.flyTo({
                 destination: Cesium.Rectangle.fromDegrees(
@@ -632,13 +788,11 @@ const selectTab = () => {
         }
         let arr = [...Township.brr];
         let brr = [];
-        // console.log(Township.brr);
         arr.forEach(item => {
             if (item.properties.XZDM == value.value) {
                 brr.push(item.properties.XZQMC);
             }
         });
-        // console.log(brr);
         data.title = [...Object.values(brr)];
         ASdivision();
     });
@@ -1016,7 +1170,6 @@ function farmland() {
     var tooltip = option.tooltip;
     // 提示框自定义内容包括总合及文字
     function formatFun(params) {
-        // console.log('params====>', params)
         let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
         let totalNum = 0; // 用于存储当前列总数
         // params为当前柱状图数组数量 遍历求和并添加类目label：value
@@ -1417,9 +1570,11 @@ function ASdivision() {
 
 <style lang="scss" scoped>
 $height: calc(100vh - 100px);
+
 .center {
     width: 100%;
     height: 100%;
+
     .title {
         width: 100%;
         height: 45px;
@@ -1433,22 +1588,22 @@ $height: calc(100vh - 100px);
         align-items: center;
         cursor: pointer;
         justify-content: space-between;
+
         span {
             width: 80%;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
         }
+
         p {
             width: 79px;
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
-            background: linear-gradient(
+            background: linear-gradient(180deg,
-                180deg,
                     rgba(16, 111, 111, 1) 0%,
-                rgba(47, 214, 214, 1) 100%
+                    rgba(47, 214, 214, 1) 100%);
-            );
             border: 1.5px solid rgba(23, 194, 180, 1);
             display: flex;
             justify-content: center;
@@ -1465,11 +1620,13 @@ $height: calc(100vh - 100px);
     width: 23%;
     background: rgba(2, 31, 26, 0.85);
     box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+
     .leftTop {
         // height: 35%;
         max-width: calc(100% - 20px);
         display: flex;
         flex-direction: column;
+
         .areaDiv {
             width: 100%;
             height: 327px;
@@ -1479,10 +1636,12 @@ $height: calc(100vh - 100px);
             justify-content: center
         }
     }
+
     .leftbottom {
         height: 35%;
         display: flex;
         flex-direction: column;
+
         .typesofDiv {
             width: 100%;
             height: 267px;
@@ -1502,6 +1661,7 @@ $height: calc(100vh - 100px);
     align-items: center;
     background: rgba(2, 31, 26, 0.85);
     box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+
     .rightTop {
         width: 100%;
         height: 40%;
@@ -1510,17 +1670,20 @@ $height: calc(100vh - 100px);
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
+
         .farmlandDiv {
             width: 100%;
             height: 340px;
             opacity: 1;
         }
+
         .ProgressBar {
             width: 100%;
             height: 9px;
             opacity: 1;
         }
     }
+
     .rightbottom {
         width: 100%;
         height: 455px;
@@ -1530,6 +1693,7 @@ $height: calc(100vh - 100px);
         justify-content: flex-start;
         align-items: center;
         padding-top: 13px;
+
         .el-select {
             width: 80%;
             font-size: 14px;
@@ -1537,13 +1701,16 @@ $height: calc(100vh - 100px);
             background: rgba(22, 94, 102, 1);
             border: 1px solid rgba(4, 153, 153, 1) !important;
             margin-top: 20px;
+
             :deep(.el-input__wrapper) {
                 background-color: transparent;
             }
+
             :deep(.el-input__inner) {
                 color: rgba(255, 255, 255, 0.7);
             }
         }
+
         .ASdivision {
             width: 415px;
             height: 368px;
@@ -1551,6 +1718,7 @@ $height: calc(100vh - 100px);
         }
     }
 }
+
 :deep(.el-select-dropdown) {
     background: red !important;
 }
@@ -1569,16 +1737,20 @@ $height: calc(100vh - 100px);
         padding: 0 30px;
         font-size: 14px;
     }
+
     --el-collapse-content-bg-color {
         background: rgba(2, 31, 26, 0.6);
     }
+
     :deep(.el-collapse-item__content) {
         background: rgba(2, 31, 26, 0.6);
         padding: 0 10px;
         padding-bottom: 10px;
     }
+
     --el-collapse-border-color: none;
     --el-collapse-content-bg-color: none;
+
     // opacity: 1;
     // border-radius: 4px;
     // background: rgba(2, 31, 26, 0.6);
@@ -1596,6 +1768,7 @@ $height: calc(100vh - 100px);
         color: rgba(255, 255, 255, 1);
         text-align: center;
     }
+
     .mt-4 {
         .el-checkbox {
             height: 30px;
@@ -1610,6 +1783,7 @@ $height: calc(100vh - 100px);
             text-align: left;
         }
     }
+
     :deep(.el-checkbox__label) {
         color: rgba(255, 255, 255, 1);
     }
@@ -1627,6 +1801,7 @@ $height: calc(100vh - 100px);
     background: rgba(2, 31, 26, 0.6);
     border: 1px solid rgba(4, 153, 153, 1);
 }
+
 .tool {
     position: absolute;
     right: 30%;
@@ -1640,4 +1815,52 @@ $height: calc(100vh - 100px);
     align-items: flex-start;
     display: none;
 }
+
+#popup1 {
+    border-radius: 5px;
+    background: rgba(2, 31, 26, 0.6);
+    display: none;
+    // justify-content: flex-start;
+    // align-items: flex-end;
+    padding: 30px 8px 20px 8px;
+    border: 2px solid rgba(4, 153, 153, 1);
+
+
+    .rowWra {
+        display: flex;
+        margin-bottom: 10px;
+
+        &>span:nth-child(1) {
+            font-weight: 400;
+            letter-spacing: 0px;
+            color: rgba(255, 255, 255, 1);
+            // margin-top: 20px;
+            line-height: 24px;
+            width: 3em;
+            // font-size: 14px;
+            margin-right: 10px;
+        }
+
+        &>span:nth-child(2) {
+            color: rgba(255, 255, 255, 1);
+            width: 129px;
+            height: 24px;
+            opacity: 1;
+            border-radius: 2px;
+            background: rgba(217, 231, 255, 0.2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2px 10px 2px 10px;
+        }
+    }
+
+    .cancel {
+        position: absolute;
+        right: 10px;
+        top: 5px;
+        color: rgba(255, 255, 255, 1);
+        cursor: pointer;
+    }
+}
 </style>