sis_zhfx/src/views/WindSite/pages/Map1.vue

<template>
  <div class="map-1">
    <div class="btn-group-tabs">
      <BtnGroup2
        :btnGroups="btnGroups"
        :rowIndex="0"
        :index="1"
        @select="select"
      ></BtnGroup2>
    </div>
    <div class="panel-title">
      <div class="panel-title-name">
        <span class="svg-icon svg-icon-green svg-icon-sm">
          <SvgIcon svgid="svg-wind-site"></SvgIcon>
        </span>
        <span class="green">某某某风电场</span>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/black.png" />
          <span class="sub-title gray">接入台数</span>
          <span class="sub-count font-num white">256</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/green.png" />
          <span class="sub-title green">待机台数</span>
          <span class="sub-count font-num green">56</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/blue.png" />
          <span class="sub-title blue">并网台数</span>
          <span class="sub-count font-num blue">256</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/purple.png" />
          <span class="sub-title pink">限电台数</span>
          <span class="sub-count font-num pink">3</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/red.png" />
          <span class="sub-title red">故障台数</span>
          <span class="sub-count font-num red">5</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/orange.png" />
          <span class="sub-title orange">检修台数</span>
          <span class="sub-count font-num orange">20</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/white.png" />
          <span class="sub-title white">受累台数</span>
          <span class="sub-count font-num white">256</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/black.png" />
          <span class="sub-title gray">离线台数</span>
          <span class="sub-count font-num gray">2</span>
        </div>
      </div>
    </div>
    <div class="panel-body">
      <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
        <template v-slot:content>
          <div class="panel-box">
            <div
              class="panel-item"
              :class="panel.line"
              v-for="(panel, index) of panels"
              :key="index"
            >
              <svg
                v-show="panel.type != 'none' && panel.type != 'syz'"
                viewBox="0 0 800 800"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                xml:space="preserve"
              >
                <defs>
                  <rect
                    id="fill-rect"
                    x="5"
                    y="5"
                    rx="8"
                    ry="8"
                    width="90"
                    height="340"
                    fill="#303B6F"
                  />
                  <rect
                    id="none-rect"
                    x="5"
                    y="5"
                    rx="8"
                    ry="8"
                    width="90"
                    height="120"
                    fill="#303B6F"
                  />
                  <g id="panel-deepblue">
                    <polygon
                      fill="#FFFFFF"
                      points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73"
                    />
                    <polygon
                      fill="#5C9BAF"
                      points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84"
                    />
                    <polygon
                      fill="#00486B"
                      points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68"
                    />
                  </g>
                  <g id="panel-blue">
                    <polygon
                      fill="#FFFFFF"
                      points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73"
                    />
                    <polygon
                      fill="#23ABFF"
                      points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84"
                    />
                    <polygon
                      fill="#0E6BBB"
                      points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68"
                    />
                  </g>
                  <g id="panel-red">
                    <polygon
                      fill="#FFFFFF"
                      points="290 13.27 58.07 13.27 58.07 13.27 21.73 13.27 0 106.18 0 106.18 0 106.18 0 106.18 0 106.18 21.73 199.09 263.79 199.09 263.79 198.75 290 198.75 290 13.27"
                    />
                    <polygon
                      fill="#EC1208"
                      points="242.05 106.18 3.15 106.18 28.04 0 266.94 0 242.05 106.18"
                    />
                    <polygon
                      fill="#AA0607"
                      points="28.04 212.36 266.94 212.36 242.05 106.18 3.15 106.18 28.04 212.36"
                    />
                  </g>
                </defs>
                <!-- 底图 左右两列矩形 -->
                <g>
                  <use xlink:href="#fill-rect" x="50" y="50" />
                  <use xlink:href="#fill-rect" x="150" y="50" />
                  <use xlink:href="#fill-rect" x="550" y="50" />
                  <use xlink:href="#fill-rect" x="650" y="50" />
                  <use xlink:href="#fill-rect" x="50" y="400" />
                  <use xlink:href="#fill-rect" x="150" y="400" />
                  <use xlink:href="#fill-rect" x="550" y="400" />
                  <use xlink:href="#fill-rect" x="650" y="400" />
                </g>

                <!-- 中间上矩形 全部 -->
                <g
                  :style="
                    'display: ' +
                    (panel.type == 'fill' || panel.type == 'bottom'
                      ? 'block'
                      : 'none')
                  "
                >
                  <use xlink:href="#fill-rect" x="250" y="50" />
                  <use xlink:href="#fill-rect" x="350" y="50" />
                  <use xlink:href="#fill-rect" x="450" y="50" />
                </g>

                <!-- 中间上矩形 一半 -->
                <g
                  :style="
                    'display: ' + (panel.type == 'top' ? 'block' : 'none')
                  "
                >
                  <use xlink:href="#none-rect" x="250" y="270" />
                  <use xlink:href="#none-rect" x="350" y="270" />
                  <use xlink:href="#none-rect" x="450" y="270" />
                </g>

                <!-- 中间上逆变器 深蓝色 -->
                <g
                  :style="
                    'display: ' +
                    (panel.type == 'top' && panel.state == 'deepblue'
                      ? 'block'
                      : 'none')
                  "
                  class="can-click esri-component"
                  @click.prevent="clickEl(panel)"
                >
                  <use xlink:href="#panel-deepblue" x="250" y="50" />
                </g>

                <!-- 中间上逆变器 蓝色 -->
                <g
                  :style="
                    'display: ' +
                    (panel.type == 'top' && panel.state == 'blue'
                      ? 'block'
                      : 'none')
                  "
                  class="can-click esri-component"
                  @click.prevent="clickEl(panel)"
                >
                  <use xlink:href="#panel-blue" x="250" y="50" />
                </g>

                <!-- 中间上逆变器 红色 -->
                <g
                  :style="
                    'display: ' +
                    (panel.type == 'top' && panel.state == 'red'
                      ? 'block'
                      : 'none')
                  "
                  class="can-click esri-component"
                  @click.prevent="clickEl(panel)"
                >
                  <use xlink:href="#panel-red" x="250" y="50" />
                </g>

                <!-- 中间上文字 -->
                <g
                  :style="
                    'display: ' + (panel.type == 'top' ? 'block' : 'none')
                  "
                  class="can-click esri-component"
                  @click.prevent="clickEl(panel)"
                >
                  <text
                    x="420"
                    y="220"
                    fill="#ffffff"
                    font-size="150"
                    text-anchor="middle"
                    transform="rotate(-90 400 180)"
                  >
                    {{ panel.code }}
                  </text>
                </g>

                <!-- 中间下矩形 全部 -->
                <g
                  :style="
                    'display: ' +
                    (panel.type == 'fill' || panel.type == 'top'
                      ? 'block'
                      : 'none')
                  "
                >
                  <use xlink:href="#fill-rect" x="250" y="400" />
                  <use xlink:href="#fill-rect" x="350" y="400" />
                  <use xlink:href="#fill-rect" x="450" y="400" />
                </g>

                <!-- 中间下矩形 一半 -->
                <g
                  :style="
                    'display: ' + (panel.type == 'bottom' ? 'block' : 'none')
                  "
                >
                  <use xlink:href="#none-rect" x="250" y="400" />
                  <use xlink:href="#none-rect" x="350" y="400" />
                  <use xlink:href="#none-rect" x="450" y="400" />
                </g>

                <!-- 中间下逆变器 深蓝色 -->
                <g
                  :style="
                    'display: ' +
                    (panel.type == 'bottom' && panel.state == 'deepblue'
                      ? 'block'
                      : 'none')
                  "
                  class="can-click esri-component"
                  @click.prevent="clickEl(panel)"
                >
                  <use xlink:href="#panel-deepblue" x="250" y="530" />
                </g>

                <!-- 中间下逆变器 蓝色 -->
                <g
                  :style="
                    'display: ' +
                    (panel.type == 'bottom' && panel.state == 'blue'
                      ? 'block'
                      : 'none')
                  "
                  class="can-click esri-component"
                  @click.prevent="clickEl(panel)"
                >
                  <use xlink:href="#panel-blue" x="250" y="530" />
                </g>

                <!-- 中间下逆变器 红色 -->
                <g
                  :style="
                    'display: ' +
                    (panel.type == 'bottom' && panel.state == 'red'
                      ? 'block'
                      : 'none')
                  "
                  class="can-click esri-component"
                  @click.prevent="clickEl(panel)"
                >
                  <use xlink:href="#panel-red" x="250" y="530" />
                </g>

                <!-- 中间下文字 -->
                <g
                  :style="
                    'display: ' + (panel.type == 'bottom' ? 'block' : 'none')
                  "
                  class="can-click"
                  @click.prevent="clickEl(panel)"
                >
                  <text
                    x="460"
                    y="740"
                    fill="#ffffff"
                    font-size="150"
                    text-anchor="middle"
                    transform="rotate(-90 400 700)"
                  >
                    {{ panel.code }}
                  </text>
                </g>
              </svg>
              <div v-show="panel.type == 'syz'" class="panel-syz">
                <img :src="syzImg" class="syz-img" />
                <div class="syz-text">升压站</div>
              </div>
            </div>
            <!-- <img :src="tempImg" style="width: 800px; height: 700px;"> -->
          </div>
        </template>
      </arcgis>
      <div class="map-popup-panel" v-show="showPopup">
        <div class="map-popup-panel-header">
          <div class="map-popup-panel-title green">
            某某风电场总貌<span></span>
          </div>
          <div class="map-popup-panel-date gray">2020年5月10日</div>
          <div class="map-popup-panel-back" @click="popupBack">
            <span class="svg-icon svg-icon-white svg-icon-sm">
              <SvgIcon svgid="svg-arrow-dpwn-1"></SvgIcon>
            </span>
          </div>
        </div>
        <div class="map-popup-panel-body"></div>
      </div>
    </div>
  </div>
</template>

<script>
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import arcgis from "@com/arcgis/arcgis.vue";

export default {
  // 名称
  name: "Map1",
  // 使用组件
  components: {
    BtnGroup2,
    SvgIcon,
    arcgis,
  },
  // 数据
  data() {
    return {
      btnGroups: [
        {
          icon: "svg-wind-site",
          btns: [
            {
              text: "某某风场",
              code: "mmfdc1",
            },
            {
              text: "某某风场",
              code: "mhsfc",
            },
            {
              text: "某某风场",
              code: "mmfdc2",
            },
            {
              text: "某某风场",
              code: "mmfdc3",
            },
            {
              text: "某某风场",
              code: "mmfdc4",
            },
          ],
        },
        {
          icon: "svg-photovoltaic",
          btns: [
            {
              text: "某某风场",
              code: "mmgf1",
            },
            {
              text: "某某风场",
              code: "mmgf2",
            },
            {
              text: "某某风场",
              code: "mmgf3",
            },
            {
              text: "某某风场",
              code: "mmgf4",
            },
          ],
        },
      ],
      arcgisData: {
        mode: "2D", // 模式 2D 3D
        title: "宁夏地图", // 标题
        center: [106.48638888888888, 38.924166666666665], // 初始中心点
        height: 654, // 3D地图初始相机高度
        tilt: 65, // 俯视角
        scale: 15000,
        rotation: 180,
        ox: 0,
        oy: 0,
      },
      tempImg: require("@assets/temp1.png"),
      syzImg: require("@assets/png/booster-station.png"),
      showPopup: true,
      panels: [
        // fill top bottom none syz // red blue deepblue
        { id: "00", type: "fill", code: "", state: "", line: "" },
        { id: "01", type: "fill", code: "", state: "", line: "" },
        { id: "02", type: "fill", code: "", state: "", line: "" },
        { id: "03", type: "fill", code: "", state: "", line: "" },
        { id: "04", type: "fill", code: "", state: "", line: "" },
        { id: "05", type: "fill", code: "", state: "", line: "" },
        {
          id: "06",
          type: "bottom",
          code: "12",
          state: "deepblue",
          line: "bottom",
        },
        { id: "07", type: "none", code: "", state: "", line: "bottom" },
        { id: "08", type: "fill", code: "", state: "", line: "" },
        { id: "09", type: "fill", code: "", state: "", line: "" },

        {
          id: "10",
          type: "top",
          code: "36",
          state: "deepblue",
          line: "top left",
        },
        {
          id: "11",
          type: "top",
          code: "32",
          state: "deepblue",
          line: "top left",
        },
        { id: "12", type: "top", code: "28", state: "deepblue", line: "top" },
        { id: "13", type: "top", code: "24", state: "deepblue", line: "top" },
        { id: "14", type: "top", code: "20", state: "deepblue", line: "top" },
        {
          id: "15",
          type: "top",
          code: "16",
          state: "deepblue",
          line: "top right",
        },
        { id: "16", type: "fill", code: "", state: "", line: "bottom right" },
        { id: "17", type: "syz", code: "", state: "", line: "bottom right" },
        { id: "18", type: "top", code: "5", state: "deepblue", line: "top" },
        {
          id: "19",
          type: "top",
          code: "4",
          state: "deepblue",
          line: "top right",
        },

        {
          id: "20",
          type: "bottom",
          code: "37",
          state: "deepblue",
          line: "bottom left",
        },
        { id: "21", type: "fill", code: "", state: "deepblue", line: "left" },
        { id: "22", type: "fill", code: "", state: "deepblue", line: "" },
        { id: "23", type: "fill", code: "", state: "deepblue", line: "" },
        { id: "24", type: "fill", code: "", state: "deepblue", line: "" },
        { id: "25", type: "fill", code: "", state: "deepblue", line: "" },
        {
          id: "26",
          type: "bottom",
          code: "13",
          state: "deepblue",
          line: "bottom",
        },
        { id: "27", type: "fill", code: "", state: "", line: "" },
        { id: "28", type: "fill", code: "", state: "deepblue", line: "" },
        { id: "29", type: "fill", code: "", state: "deepblue", line: "right" },

        { id: "30", type: "none", code: "", state: "", line: "" },
        { id: "31", type: "top", code: "33", state: "deepblue", line: "top" },
        { id: "32", type: "top", code: "29", state: "deepblue", line: "top" },
        { id: "33", type: "top", code: "25", state: "deepblue", line: "top" },
        { id: "34", type: "top", code: "21", state: "deepblue", line: "top" },
        {
          id: "35",
          type: "top",
          code: "17",
          state: "deepblue",
          line: "top right",
        },
        { id: "36", type: "fill", code: "", state: "deepblue", line: "" },
        { id: "37", type: "top", code: "1", state: "deepblue", line: "top" },
        { id: "38", type: "top", code: "2", state: "deepblue", line: "top" },
        { id: "39", type: "top", code: "3", state: "deepblue", line: "top" },

        { id: "40", type: "none", code: "", state: "", line: "" },
        { id: "41", type: "fill", code: "", state: "", line: "" },
        { id: "42", type: "fill", code: "", state: "", line: "" },
        { id: "43", type: "fill", code: "", state: "", line: "" },
        { id: "44", type: "fill", code: "", state: "", line: "" },
        { id: "45", type: "fill", code: "", state: "", line: "" },
        {
          id: "46",
          type: "bottom",
          code: "14",
          state: "deepblue",
          line: "bottom left",
        },
        {
          id: "47",
          type: "bottom",
          code: "10",
          state: "deepblue",
          line: "bottom",
        },
        {
          id: "48",
          type: "bottom",
          code: "8",
          state: "deepblue",
          line: "bottom",
        },
        {
          id: "49",
          type: "bottom",
          code: "6",
          state: "deepblue",
          line: "bottom",
        },

        { id: "50", type: "none", code: "", state: "", line: "" },
        { id: "51", type: "top", code: "34", state: "red", line: "top left" },
        { id: "52", type: "top", code: "30", state: "deepblue", line: "top" },
        { id: "53", type: "top", code: "26", state: "deepblue", line: "top" },
        { id: "54", type: "top", code: "22", state: "deepblue", line: "top" },
        { id: "55", type: "top", code: "18", state: "deepblue", line: "top" },
        { id: "56", type: "fill", code: "", state: "", line: "" },
        { id: "57", type: "fill", code: "", state: "", line: "" },
        { id: "58", type: "fill", code: "", state: "", line: "" },
        { id: "59", type: "fill", code: "", state: "", line: "right" },

        { id: "60", type: "none", code: "", state: "", line: "" },
        { id: "61", type: "fill", code: "", state: "", line: "left" },
        { id: "62", type: "fill", code: "", state: "", line: "" },
        { id: "63", type: "fill", code: "", state: "", line: "" },
        { id: "64", type: "fill", code: "", state: "", line: "" },
        { id: "65", type: "fill", code: "", state: "", line: "" },
        {
          id: "66",
          type: "bottom",
          code: "15",
          state: "deepblue",
          line: "bottom",
        },
        {
          id: "67",
          type: "bottom",
          code: "11",
          state: "deepblue",
          line: "bottom",
        },
        {
          id: "68",
          type: "bottom",
          code: "9",
          state: "deepblue",
          line: "bottom",
        },
        {
          id: "69",
          type: "bottom",
          code: "7",
          state: "deepblue",
          line: "bottom right",
        },

        { id: "70", type: "none", code: "", state: "", line: "" },
        { id: "71", type: "top", code: "35", state: "blue", line: "top" },
        { id: "72", type: "top", code: "31", state: "deepblue", line: "top" },
        { id: "73", type: "top", code: "27", state: "deepblue", line: "top" },
        { id: "74", type: "top", code: "23", state: "deepblue", line: "top" },
        { id: "75", type: "top", code: "19", state: "deepblue", line: "top" },
        { id: "76", type: "fill", code: "", state: "", line: "" },
        { id: "77", type: "fill", code: "", state: "", line: "" },
        { id: "78", type: "fill", code: "", state: "", line: "" },
        { id: "79", type: "fill", code: "", state: "", line: "" },
      ],
    };
  },
  // 函数
  methods: {
    when: function () {
      //    this.$refs.arcgis.addImagePoint([106.60768412800003, 37.806672373000006], "@assets/temp1.png", "160px", "140px");
      this.$refs.arcgis.addHtmlPoint(
        [106.48638888888888, 38.924166666666665],
        "content",
        400,
        350
      );
    },
    clickMap: function (info) {
      console.log(info);
    },
    popupBack: function () {
      this.showPopup = false;
    },
    clickEl: function (item) {
      console.log(item);
      this.showPopup = true;
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less">
@titleHeight: 3.704vh;

.map-1 {
  width: 100%;
  height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;
  }

  .panel-title {
    width: 100%;
    background-color: fade(@darkgray, 40%);
    margin-top: 1.481vh;
    padding: 6px;
    display: flex;
    align-items: center;

    .panel-title-name {
      color: @green;
      display: flex;
      align-items: center;
      line-height: 0;
      font-size: 0;

      i,
      span {
        margin: 0 0 0 1.481vh;
        line-height: 0;
        font-size: 13px;
      }
    }

    .sub-title-item {
      display: flex;
      align-items: center;
      margin-left: 16px;

      .sub-title {
        font-size: 13px;
        margin-left: 6px;
      }

      .sub-count {
        font-size: 13px;
        font-weight: 500;
      }

      img {
        height: 31px;
      }
    }
  }

  .panel-body {
    flex-grow: 1;
    background-color: fade(@darkgray, 20%);
    padding: 0.741vh;
    overflow: auto;
    position: relative;

    .map-popup-panel {
      width: 679px;
      position: absolute;
      left: 71px;
      top: 22px;

      .map-popup-panel-header {
        width: 100%;
        background: fade(#152221, 90%);
        display: flex;

        .map-popup-panel-title {
          padding: 17px 24px;
          font-size: @fontsize-s;
          position: relative;

          &::before,
          &::after {
            position: absolute;
            width: calc(50% - 6px);
            bottom: 0;
            border-bottom: 2px solid @green;
          }

          &::before {
            content: "";
            left: 0;
          }

          &::after {
            content: "";
            right: 0;
          }

          span {
            position: absolute;
            width: 11.3px;
            height: 11.3px;
            border-left: 2px solid @green;
            border-top: 2px solid @green;
            left: calc(50% - 5.65px);
            bottom: -3px;
            transform: rotate(45deg);
          }
        }

        .map-popup-panel-date {
          flex-grow: 1;
          padding: 17px 24px;
          font-size: @fontsize-s;
          text-align: right;
          border-bottom: 2px solid @green;
        }

        .map-popup-panel-back {
          margin-left: auto;
          width: 54px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          cursor: pointer;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            height: 50%;
            border-left: 1px solid @gray;
            top: 25%;
          }
        }
      }

      .map-popup-panel-body {
        background: fade(#152221, 75%);
        border: 1px solid fade(@darkgray, 40);
        border-top: 0px;

        .table-form {
          .text,
          .unit {
            font-weight: 400;
          }

          .unit {
            min-width: auto;
          }

          .value,
          .unit {
            text-align: left;
          }
        }
      }
    }
  }

  .panel-box {
    width: 840px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    background: #536268b8;

    .panel-item {
      width: 80px;
      height: 80px;
      position: relative;

      // margin-top: -20px;
      // margin-left: -20px;

      &.top {
        &::after {
          top: -3px;
          opacity: 1;
        }
      }

      &.bottom {
        &::after {
          bottom: -3px;
          opacity: 1;
        }
      }

      &.left {
        &::before {
          left: -3px;
          opacity: 1;
        }
      }

      &.right {
        &::before {
          right: -3px;
          opacity: 1;
        }
      }

      &::after {
        content: "";
        width: 100%;
        height: 6px;
        position: absolute;
        left: 0;
        background: @green;
        opacity: 0;
      }

      &::before {
        content: "";
        width: 6px;
        height: 100%;
        position: absolute;
        top: 0;
        background: @green;
        opacity: 0;
      }

      svg {
        width: 80px;
        height: 80px;
      }

      .panel-syz {
        width: 100%;
        height: 100%;
        position: relative;

        .syz-img {
          position: absolute;
          height: 70px;
          top: -35px;
          left: -10px;
        }

        .syz-text {
          position: absolute;
          color: @green;
          font-size: @fontsize-l;
          width: 100%;
          text-align: center;
          left: 0;
          top: -55px;
          font-weight: bold;
        }
      }
    }
  }

  .can-click {
    cursor: pointer;
  }

  .map-popup-panel {
    width: 760px;
    position: absolute;
    left: 71px;
    top: 22px;
    z-index: 2;

    .map-popup-panel-header {
      width: 100%;
      background: fade(#152221, 90%);
      display: flex;

      .map-popup-panel-title {
        padding: 17px 24px;
        font-size: @fontsize-s;
        position: relative;

        &::before,
        &::after {
          position: absolute;
          width: calc(50% - 6px);
          bottom: 0;
          border-bottom: 2px solid @green;
        }

        &::before {
          content: "";
          left: 0;
        }

        &::after {
          content: "";
          right: 0;
        }

        span {
          position: absolute;
          width: 11.3px;
          height: 11.3px;
          border-left: 2px solid @green;
          border-top: 2px solid @green;
          left: calc(50% - 5.65px);
          bottom: -3px;
          transform: rotate(45deg);
        }
      }

      .map-popup-panel-date {
        flex-grow: 1;
        padding: 17px 24px;
        font-size: @fontsize-s;
        text-align: right;
        border-bottom: 2px solid @green;
      }

      .map-popup-panel-back {
        margin-left: auto;
        width: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          height: 50%;
          border-left: 1px solid @gray;
          top: 25%;
        }
      }
    }

    .map-popup-panel-body {
      background: fade(#152221, 75%);
      border: 1px solid fade(@darkgray, 40);
      border-top: 0px;

      .table-form {
        .text,
        .unit {
          font-weight: 400;
        }

        .unit {
          min-width: auto;
        }

        .value,
        .unit {
          text-align: left;
        }
      }
    }
  }
}
</style>