diff --git a/src/assets/images/map/b1.png b/src/assets/images/map/b1.png
new file mode 100644
index 0000000..72144b8
Binary files /dev/null and b/src/assets/images/map/b1.png differ
diff --git a/src/assets/images/map/choose.png b/src/assets/images/map/choose.png
new file mode 100644
index 0000000..efe6b4b
Binary files /dev/null and b/src/assets/images/map/choose.png differ
diff --git a/src/assets/images/map/j0.png b/src/assets/images/map/j0.png
new file mode 100644
index 0000000..0f2d740
Binary files /dev/null and b/src/assets/images/map/j0.png differ
diff --git a/src/assets/images/map/j1.png b/src/assets/images/map/j1.png
new file mode 100644
index 0000000..56d8ed1
Binary files /dev/null and b/src/assets/images/map/j1.png differ
diff --git a/src/assets/images/map/j10.png b/src/assets/images/map/j10.png
new file mode 100644
index 0000000..694b9bb
Binary files /dev/null and b/src/assets/images/map/j10.png differ
diff --git a/src/assets/images/map/j2.png b/src/assets/images/map/j2.png
new file mode 100644
index 0000000..c7f131a
Binary files /dev/null and b/src/assets/images/map/j2.png differ
diff --git a/src/assets/images/map/j3.png b/src/assets/images/map/j3.png
new file mode 100644
index 0000000..9a4050d
Binary files /dev/null and b/src/assets/images/map/j3.png differ
diff --git a/src/assets/images/map/j4.png b/src/assets/images/map/j4.png
new file mode 100644
index 0000000..57f1015
Binary files /dev/null and b/src/assets/images/map/j4.png differ
diff --git a/src/assets/images/map/j5.png b/src/assets/images/map/j5.png
new file mode 100644
index 0000000..5aee353
Binary files /dev/null and b/src/assets/images/map/j5.png differ
diff --git a/src/assets/images/map/j6.png b/src/assets/images/map/j6.png
new file mode 100644
index 0000000..b97cbbd
Binary files /dev/null and b/src/assets/images/map/j6.png differ
diff --git a/src/assets/images/map/j7.png b/src/assets/images/map/j7.png
new file mode 100644
index 0000000..9cd1201
Binary files /dev/null and b/src/assets/images/map/j7.png differ
diff --git a/src/assets/images/map/j8.png b/src/assets/images/map/j8.png
new file mode 100644
index 0000000..2bb6d79
Binary files /dev/null and b/src/assets/images/map/j8.png differ
diff --git a/src/assets/images/map/j9.png b/src/assets/images/map/j9.png
new file mode 100644
index 0000000..034039a
Binary files /dev/null and b/src/assets/images/map/j9.png differ
diff --git a/src/assets/images/map/unchoose.png b/src/assets/images/map/unchoose.png
new file mode 100644
index 0000000..93ac899
Binary files /dev/null and b/src/assets/images/map/unchoose.png differ
diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue
index 25c942f..f1448ce 100644
--- a/src/view/sy_map.vue
+++ b/src/view/sy_map.vue
@@ -1,10 +1,1078 @@
 <template>
-  <div>map</div>
+  <div class="module">
+    <div id="map" style="width: 100%; height: 100%"></div>
+    <div class="left">
+      <div class="lyx">
+        <div class="title">
+          <div class="title_name">龙游县</div>
+          <div class="title_line"></div>
+        </div>
+        <div class="content">
+          <div
+            class="content_item"
+            v-for="(item, index) in personTotal"
+            :class="{ choose: item.id == choose.person }"
+            @click="change(item.id, 'person')"
+            :key="index"
+          >
+            <div class="content_item_name">{{ item.name }}</div>
+            <div class="content_item_value">{{ item.value }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="tsbq">
+        <div class="title">
+          <div class="title_name">特殊标签</div>
+          <div class="title_line"></div>
+        </div>
+        <div class="content">
+          <div
+            class="content_item"
+            v-for="(item, index) in tsbqTotal"
+            :class="{ choose: item.id == choose.bq }"
+            @click="change(item.id, 'bq')"
+            :key="index"
+          >
+            <div class="content_item_name">{{ item.name }}</div>
+            <div class="content_item_value">{{ item.value }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jbggfwq">
+        <div class="title">
+          <div class="title_name">基本公共服务圈</div>
+          <div class="title_line"></div>
+        </div>
+        <div class="jbggfwq_content">
+          <div
+            class="jbggfwq_content_item"
+            v-for="(item, index) in jbfwqTotal"
+            :key="index"
+          >
+            <div class="jbggfwq_content_item_left">{{ item.name }}</div>
+            <div class="jbggfwq_content_item_right">
+              <div
+                class="jbggfwq_content_item_right_item"
+                v-for="itemm in item.child"
+                :class="{ choose: itemm.id == choose.fwq }"
+                @click="changeFwq(itemm.id, itemm.fwqList,itemm.center)"
+              >
+                {{ itemm.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="zyys">
+        <div class="title">
+          <div class="title_name">资源要素</div>
+          <div class="title_line"></div>
+        </div>
+        <div class="zyys_content">
+          <div
+            class="zyys_content_item"
+            v-for="(item, index) in yaosuTotal"
+            :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
+            @click="change(item.id, 'yaosu')"
+            :key="index"
+          >
+            <img :src="item.img" class="zyys_content_item_left" />
+            <div class="zyys_content_item_right">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-
 <script setup>
+import {
+  ref,
+  reactive,
+  onMounted,
+  onBeforeMount,
+  onBeforeUnmount,
+  computed,
+  defineProps,
+  watch,
+} from "vue";
+import mapTown from "@/assets/json/ly.json";
+import j0 from "@/assets/images/map/j0.png";
+import j1 from "@/assets/images/map/j1.png";
+import j2 from "@/assets/images/map/j2.png";
+import j3 from "@/assets/images/map/j3.png";
+import j4 from "@/assets/images/map/j4.png";
+import j5 from "@/assets/images/map/j5.png";
+import j6 from "@/assets/images/map/j6.png";
+import j7 from "@/assets/images/map/j7.png";
+import j8 from "@/assets/images/map/j8.png";
+import j9 from "@/assets/images/map/j9.png";
+import j10 from "@/assets/images/map/j10.png";
+import m1 from "@/assets/images/map/m1.png";
+import m2 from "@/assets/images/map/m2.png";
+//地图设置
+//默认龙游县灰色地块
+const mapTownDataDK = reactive([]);
+var map = null;
+const initMap = () => {
+  map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
+  map.enableScrollWheelZoom(true);
+  map.setMapType(BMAP_EARTH_MAP);
+  goMapCenter([119.178783, 29.034583], 12);
+  //加载乡镇信息
+  loadTown();
+  //渲染地块
+  addPolygonCounty();
+};
+const loadTown = () => {
+  for (let v of mapTown.features) {
+    if (v.geometry.coordinates.length > 1) {
+      for (let w in v.geometry.coordinates) {
+        if (v.geometry.coordinates[w][0].length < 60) continue;
+        mapTownDataDK.push({
+          name: v.properties.name,
+          point: v.geometry.coordinates[w][0],
+        });
+      }
+    } else {
+      mapTownDataDK.push({
+        name: v.properties.name,
+        point: v.geometry.coordinates[0],
+      });
+    }
+  }
+};
 
+//添加地图区块
+const addPolygonCounty = () => {
+  map.clearOverlays();
+  let fillColor = "#ffffff";
+  mapTownDataDK.map((item) => {
+    //地区的坐标范围
+    let points = [];
+    item.point.map((p) => points.push(new BMapGL.Point(...p)));
+    if (points.length) {
+      //创建面
+      let polygon = new BMapGL.Polygon(points, {
+        strokeColor: "#5E9AD2",
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: fillColor,
+        fillOpacity: 0.7,
+        name: item.name,
+      });
+      map.addOverlay(polygon);
+    }
+  });
+};
+// 添加地图上的图标
+const createCustomOverlay = (polygon) => {
+  function createLabelDOM() {
+    var content = document.createElement("div");
+    content.style.display = "flex";
+    content.style.flexDirection = "column";
+    content.style.alignItems = "center";
+    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
+
+    var div = document.createElement("div");
+    div.style.color = "#333";
+    div.style.padding = "6px 8px";
+    div.style.whiteSpace = "nowrap";
+    div.style.MozUserSelect = "none";
+    div.style.fontSize = "12px";
+    div.style.borderRadius = "10px";
+    div.style.display = "flex";
+    div.style.justifyContent = "center";
+    div.style.alignItems = "center";
+    div.style.background =
+      "url(/src/assets/images/map/b1.png) no-repeat 0/100% 100%";
+    div.style.cursor = "pointer";
+    div.setAttribute("name", this.properties.title);
+
+    var title = document.createElement("div");
+    title.style.fontSize = "14px";
+    title.style.fontWeight = "700";
+    title.style.marginLeft = "4px";
+    title.style.color = "#ddd";
+    div.appendChild(title);
+    title.appendChild(document.createTextNode(this.properties.title));
+
+
+
+    let img2 = document.createElement("img");
+    img2.style.width = "60px";
+    img2.src = this.properties.imgSrc2;
+
+    content.appendChild(div);
+    content.appendChild(img2);
+
+    // div.onclick = function () {
+    //   addPolygonTown(this.getAttribute('name'))
+    //   removeCustomOverlay()
+    //   addStage(this.getAttribute('name'))
+    //   state.mapStatus = 1
+    // }
+
+    return content;
+  }
+  var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.point),
+    opacity: 0.5,
+    offsetY: -10,
+    properties: {
+      title: polygon.name,
+      imgSrc2: m2,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(customOverlay);
+};
+//地图中点
+const goMapCenter = (point, zoom) => {
+  map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
+};
+//选项设置
+//选中
+const choose = ref({
+  person: 0,
+  bq: 0,
+  fwq: 100,
+  yaosu: 0,
+});
+const change = (id, name) => {
+  choose.value[name] = id;
+};
+const changeFwq = (id, list,center) => {
+  choose.value.fwq = id;
+  fwqList.value = list;
+  goMapCenter(center, 17);
+  fwqList.value.map((item) => {
+    createCustomOverlay(item);
+  });
+  console.log(fwqList.value);
+};
+//人口数
+const personTotal = ref([
+  {
+    id: 0,
+    name: "总人口",
+    value: "1724114",
+  },
+  {
+    id: 1,
+    name: "1岁",
+    value: "26737",
+  },
+  {
+    id: 2,
+    name: "2岁",
+    value: "26737",
+  },
+  {
+    id: 3,
+    name: "3岁",
+    value: "26737",
+  },
+  {
+    id: 4,
+    name: "4岁",
+    value: "26737",
+  },
+  {
+    id: 5,
+    name: "5岁",
+    value: "26737",
+  },
+  {
+    id: 6,
+    name: "6岁",
+    value: "26737",
+  },
+  {
+    id: 7,
+    name: "7岁",
+    value: "26737",
+  },
+  {
+    id: 8,
+    name: "8岁",
+    value: "26737",
+  },
+  {
+    id: 9,
+    name: "9岁",
+    value: "26737",
+  },
+  {
+    id: 10,
+    name: "10岁",
+    value: "26737",
+  },
+  {
+    id: 11,
+    name: "11岁",
+    value: "26737",
+  },
+  {
+    id: 12,
+    name: "12岁",
+    value: "26737",
+  },
+  {
+    id: 13,
+    name: "13岁",
+    value: "26737",
+  },
+]);
+
+//特殊标签
+const tsbqTotal = ref([
+  {
+    id: 0,
+    name: "低边",
+    value: "26737",
+  },
+  {
+    id: 1,
+    name: "低保",
+    value: "26737",
+  },
+  {
+    id: 2,
+    name: "高血压",
+    value: "26737",
+  },
+  {
+    id: 3,
+    name: "糖尿病",
+    value: "26737",
+  },
+  {
+    id: 4,
+    name: "残疾人",
+    value: "26737",
+  },
+]);
+
+//基本公共服务圈
+
+const jbfwqTotal = ref([
+  {
+    id: 0,
+    name: "东华街道",
+    child: [
+      {
+        id: 100,
+        name: "上圩头村",
+      },
+      {
+        id: 200,
+        name: "官村",
+      },
+      {
+        id: 300,
+        name: "下杨",
+      },
+      {
+        id: 400,
+        name: "灵江社区",
+      },
+      {
+        id: 500,
+        name: "文成社区",
+      },
+      {
+        id: 600,
+        name: "子鸣社区",
+      },
+    ],
+  },
+  {
+    id: 1,
+    name: "社阳乡",
+    child: [
+      {
+        id: 11,
+        name: "社阳村",
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "小南海镇",
+    child: [
+      {
+        id: 21,
+        name: "茶圩里村",
+      },
+      {
+        id: 22,
+        name: "团石村",
+      },
+      {
+        id: 23,
+        name: "箬塘",
+      },
+    ],
+  },
+  {
+    id: 3,
+    name: "庙下乡",
+    child: [
+      {
+        id: 31,
+        name: "庙下村",
+      },
+    ],
+  },
+  {
+    id: 4,
+    name: "溪口镇",
+    child: [
+      {
+        id: 41,
+        name: "新溪社区",
+        center:[119.1845892, 28.8540481],
+        fwqList: [
+          {
+            name: "溪口幼儿园",
+            point: [119.1856806, 28.8509359],
+          },
+          {
+            name: "衢州学院附属幼儿园",
+            point: [119.182056, 28.8566857],
+          },
+          {
+            name: "溪口中银小学",
+            point: [119.1845353, 28.8584533],
+          },
+          {
+            name: "溪口初中",
+            point: [119.180978, 28.8525691],
+          },
+          {
+            name: "居家养老中心",
+            point: [119.186287, 28.8491049],
+          },
+          {
+            name: "共享食堂",
+            point: [119.184706, 28.8563179],
+          },
+          {
+            name: "老年活动中心",
+            point: [119.1839065, 28.8566106],
+          },
+          {
+            name: "残疾人之家",
+            point: [119.1862825, 28.8491207],
+          },
+          {
+            name: "智慧篮球场",
+            point: [119.1839873, 28.8560886],
+          },
+          {
+            name: "慢行步道",
+            point: [119.1843107, 28.8510743],
+          },
+          {
+            name: "文化礼堂",
+            point: [119.1845532, 28.8562072],
+          },
+          {
+            name: "综合文化站",
+            point: [119.1845982, 28.8482348],
+          },
+          {
+            name: "共享菜园",
+            point: [119.1834393, 28.8559858],
+          },
+          {
+            name: "零工市场",
+            point: [119.1811487, 28.8614348],
+          },
+          {
+            name: "溪口中心医院",
+            point: [119.1839334, 28.8516437],
+          },
+          {
+            name: "溪口菜市场",
+            point: [119.1848317, 28.8544673],
+          },
+          {
+            name: "大型超市",
+            point: [119.1845892, 28.8540481],
+          },
+          {
+            name: "智慧停车场",
+            point: [119.1865654, 28.8555824],
+          },
+          {
+            name: "溪口镇便民服务中心",
+            point: [119.1838436, 28.8565473],
+          },
+        ],
+      },
+      {
+        id: 42,
+        name: "石角村",
+      },
+      {
+        id: 43,
+        name: "红罗村",
+      },
+    ],
+  },
+  {
+    id: 5,
+    name: "罗家乡",
+    child: [
+      {
+        id: 51,
+        name: "罗家村",
+      },
+    ],
+  },
+  {
+    id: 6,
+    name: "模环乡",
+    child: [
+      {
+        id: 61,
+        name: "模环村",
+      },
+      {
+        id: 62,
+        name: "金星社区",
+      },
+    ],
+  },
+  {
+    id: 7,
+    name: "横山镇",
+    child: [
+      {
+        id: 71,
+        name: "志棠村",
+      },
+      {
+        id: 72,
+        name: "横山集镇",
+      },
+      {
+        id: 73,
+        name: "后徐",
+      },
+    ],
+  },
+  {
+    id: 8,
+    name: "石佛乡",
+    child: [
+      {
+        id: 81,
+        name: "三和村",
+      },
+      {
+        id: 82,
+        name: "石佛村",
+      },
+      {
+        id: 83,
+        name: "三门源村",
+      },
+    ],
+  },
+  {
+    id: 9,
+    name: "詹家镇",
+    child: [
+      {
+        id: 91,
+        name: "芝江",
+      },
+      {
+        id: 92,
+        name: "马叶",
+      },
+      {
+        id: 93,
+        name: "詹家",
+      },
+    ],
+  },
+  {
+    id: 10,
+    name: "龙洲街道",
+    child: [
+      {
+        id: 101,
+        name: "官潭村",
+      },
+      {
+        id: 102,
+        name: "田铺村",
+      },
+      {
+        id: 103,
+        name: "半爿月村",
+      },
+      {
+        id: 104,
+        name: "寺后村",
+      },
+      {
+        id: 105,
+        name: "清廉社区",
+      },
+      {
+        id: 106,
+        name: "莲湖社区",
+      },
+      {
+        id: 107,
+        name: "河西街社区",
+      },
+      {
+        id: 108,
+        name: "阳光社区",
+      },
+      {
+        id: 109,
+        name: "翠光社区",
+      },
+    ],
+  },
+  {
+    id: 11,
+    name: "湖镇镇",
+    child: [
+      {
+        id: 111,
+        name: "新光村",
+      },
+      {
+        id: 112,
+        name: "七都村",
+      },
+      {
+        id: 113,
+        name: "下库村",
+      },
+      {
+        id: 114,
+        name: "下田畈村",
+      },
+    ],
+  },
+  {
+    id: 12,
+    name: "塔石镇",
+    child: [
+      {
+        id: 121,
+        name: "塔石",
+      },
+      {
+        id: 122,
+        name: "泽随",
+      },
+      {
+        id: 123,
+        name: "雅村",
+      },
+    ],
+  },
+  {
+    id: 13,
+    name: "沐尘畲族乡",
+    child: [
+      {
+        id: 131,
+        name: "沐尘村",
+      },
+    ],
+  },
+  {
+    id: 14,
+    name: "大街乡",
+    child: [
+      {
+        id: 141,
+        name: "大街村",
+      },
+    ],
+  },
+]);
+//存放地图上服务圈数据
+const fwqList = ref([]);
+//资源要素
+const yaosuTotal = ref([
+  {
+    id: 0,
+    name: "体育场所",
+    img: j0,
+    wz: false,
+  },
+
+  {
+    id: 1,
+    name: "幼儿园",
+    img: j1,
+    wz: false,
+  },
+  {
+    id: 2,
+    name: "小学",
+    img: j2,
+    wz: false,
+  },
+  {
+    id: 3,
+    name: "初中",
+    img: j3,
+    wz: false,
+  },
+  {
+    id: 4,
+    name: "高中",
+    img: j4,
+    wz: false,
+  },
+  {
+    id: 5,
+    name: "医院",
+    img: j5,
+    wz: false,
+  },
+  {
+    id: 6,
+    name: "南孔书院",
+    img: j6,
+    wz: false,
+  },
+  {
+    id: 7,
+    name: "养老机构",
+    img: j7,
+    wz: false,
+  },
+  {
+    id: 8,
+    name: "汽车充电桩",
+    img: j8,
+    wz: true,
+  },
+  {
+    id: 9,
+    name: "卫生服务中心",
+    img: j9,
+    wz: true,
+  },
+  {
+    id: 10,
+    name: "AED",
+    img: j10,
+    wz: true,
+  },
+]);
+onMounted(() => {
+  initMap();
+});
 </script>
-
 <style lang="scss" scoped>
-</style>
+::v-deep .anchorBL {
+  display: none;
+}
+.module {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+#id {
+  z-index: 10;
+}
+//左侧弹框
+.left {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 520px;
+  height: 960px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 52, 131, 0.69) 0%,
+      rgba(0, 32, 83, 0.77) 50%,
+      rgba(0, 60, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      128% 99% at 100% 46%,
+      rgba(0, 48, 125, 0.29) 0%,
+      rgba(0, 61, 134, 0.42) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
+  backdrop-filter: blur(3px);
+  padding: 30px 26px;
+  display: flex;
+  flex-direction: column;
+  z-index: 12;
+  overflow: hidden;
+  //人口数
+  .lyx {
+    .content {
+      box-sizing: border-box;
+      margin-top: 20px;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
+      color: #ffffff;
+      height: 450px;
+      overflow: auto;
+      .content_item {
+        cursor: pointer;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px;
+        width: 48%;
+        height: 57px;
+        background-image: url(@/assets/images/map/unchoose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 12px;
+      }
+      .content_item:first-child {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px;
+        width: 100%;
+        height: 57px;
+        background-image: url(@/assets/images/map/unchoose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 12px;
+      }
+      .content_item_name {
+        position: relative;
+      }
+      .content_item_name::before {
+        content: "";
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: #29ffc1;
+        border: 3px solid rgba(0, 255, 189, 0.31);
+        border-radius: 6px;
+        top: 7.5px;
+        left: -13px;
+      }
+      .choose {
+        background-image: url(@/assets/images/map/choose.png) !important;
+        background-repeat: no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .content::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  //特殊标签
+  .tsbq {
+    margin-top: 40px;
+    .content {
+      box-sizing: border-box;
+      margin-top: 20px;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
+      color: #ffffff;
+      height: 220px;
+      overflow: auto;
+      .content_item {
+        cursor: pointer;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px;
+        width: 48%;
+        height: 57px;
+        background-image: url(@/assets/images/map/unchoose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 12px;
+      }
+      .content_item:last-child {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px;
+        width: 100%;
+        height: 57px;
+        background-image: url(@/assets/images/map/unchoose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 12px;
+      }
+      .content_item_name {
+        position: relative;
+      }
+      .content_item_name::before {
+        content: "";
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: #ffe229;
+        border: 3px solid rgba(255, 226, 41, 0.31);
+        border-radius: 6px;
+        top: 7.5px;
+        left: -13px;
+      }
+      .choose {
+        background-image: url(@/assets/images/map/choose.png) !important;
+        background-repeat: no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .content::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+//右侧弹框
+.right {
+  box-sizing: border-box;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 520px;
+  height: 960px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 52, 131, 0.69) 0%,
+      rgba(0, 32, 83, 0.77) 50%,
+      rgba(0, 60, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      128% 99% at 100% 46%,
+      rgba(0, 48, 125, 0.29) 0%,
+      rgba(0, 61, 134, 0.42) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
+  backdrop-filter: blur(3px);
+  padding: 30px 26px;
+  display: flex;
+  flex-direction: column;
+  z-index: 12;
+  overflow: hidden;
+  .jbggfwq {
+    .jbggfwq_content {
+      height: 550px;
+      overflow: auto;
+      margin-top: 15px;
+      display: flex;
+      flex-direction: column;
+      .jbggfwq_content_item {
+        margin-bottom: 5px;
+        display: flex;
+        // align-items: center;
+        color: #ffffff;
+        .jbggfwq_content_item_left {
+          margin-right: 10px;
+          width: 80px;
+          height: 48px;
+          line-height: 48px;
+        }
+        .jbggfwq_content_item_right {
+          width: 400px;
+          display: flex;
+          flex-flow: row wrap;
+          .jbggfwq_content_item_right_item {
+            cursor: pointer;
+            box-sizing: border-box;
+            height: 48px;
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 28px;
+            background: rgba(124, 151, 180, 0.8);
+            padding: 10px;
+          }
+          .choose {
+            background-image: url(@/assets/images/map/choose.png);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
+    .jbggfwq_content::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .zyys {
+    .zyys_content {
+      margin-top: 20px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      flex-flow: row wrap;
+      .zyys_content_item {
+        cursor: pointer;
+        margin-bottom: 15px;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 110px;
+        height: 42px;
+        background: rgba(124, 151, 180, 0.8);
+        .zyys_content_item_left {
+          width: 18px;
+          height: 18px;
+          margin-right: 3px;
+        }
+        .zyys_content_item_right {
+          font-weight: 500;
+          font-size: 16px;
+        }
+      }
+      .wz {
+        width: 150px;
+      }
+      .choose {
+        background-image: url(@/assets/images/map/choose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.title {
+  .title_name {
+    font-family: YouSheBiaoTiHei;
+    font-size: 34px;
+    font-weight: 900;
+    // line-height: 44px;
+    letter-spacing: 4px;
+    margin-bottom: 15px;
+    background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%);
+    /* 使文字没有背景颜色的背景 */
+    background-clip: text;
+    /* 为了兼容性，添加渐变背景到IE */
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .title_line {
+    height: 4px;
+    width: 100%;
+    border-top: 1px solid #ffffff;
+    border-bottom: 2px dashed #ffffff;
+  }
+}
+</style>
\ No newline at end of file