diff --git a/src/assets/img/active_bg.png b/src/assets/img/active_bg.png
new file mode 100644
index 0000000..730e219
Binary files /dev/null and b/src/assets/img/active_bg.png differ
diff --git a/src/assets/img/bg.png b/src/assets/img/bg.png
new file mode 100644
index 0000000..8578e69
Binary files /dev/null and b/src/assets/img/bg.png differ
diff --git a/src/assets/img/tab1.png b/src/assets/img/tab1.png
new file mode 100644
index 0000000..b908a46
Binary files /dev/null and b/src/assets/img/tab1.png differ
diff --git a/src/assets/img/tab2.png b/src/assets/img/tab2.png
new file mode 100644
index 0000000..046a8c7
Binary files /dev/null and b/src/assets/img/tab2.png differ
diff --git a/src/assets/img/tab3.png b/src/assets/img/tab3.png
new file mode 100644
index 0000000..28ae906
Binary files /dev/null and b/src/assets/img/tab3.png differ
diff --git a/src/assets/img/tab_bg.png b/src/assets/img/tab_bg.png
new file mode 100644
index 0000000..be89959
Binary files /dev/null and b/src/assets/img/tab_bg.png differ
diff --git a/src/views/dashboard/home.vue b/src/views/dashboard/home.vue
index e6b88f6..d8fb63f 100644
--- a/src/views/dashboard/home.vue
+++ b/src/views/dashboard/home.vue
@@ -36,46 +36,445 @@
       <div class="left_top">
         <div class="top_title">
           <div class="left_tit">
-            <span class="txt_name">收件量</span>
-            <span class="name">RECEIVING</span>
+            <span class="txt_name">{{ activeName }}</span>
+            <span class="name">{{ acctiEng }}</span>
           </div>
           <div class="right_tit">
-            <div class="title_txt">收</div>
-            <div class="title_txt">发</div>
-            <div class="title_txt">到</div>
-            <div class="title_txt">派</div>
-            <div class="title_txt">签</div>
+            <div class="title_txt" :class="isActive == 1 ? 'active' : ''" @click="changeBtn(1)">
+              收
+            </div>
+            <div class="title_txt" :class="isActive == 2 ? 'active' : ''" @click="changeBtn(2)">
+              发
+            </div>
+            <div class="title_txt" :class="isActive == 3 ? 'active' : ''" @click="changeBtn(3)">
+              到
+            </div>
+            <div class="title_txt" :class="isActive == 4 ? 'active' : ''" @click="changeBtn(4)">
+              派
+            </div>
+            <div class="title_txt" :class="isActive == 5 ? 'active' : ''" @click="changeBtn(5)">
+              签
+            </div>
+          </div>
+        </div>
+        <div class="cen_con">
+          <div class="table_line1">
+            <div class="table_item">排名</div>
+            <div class="table_item">乡镇</div>
+            <div class="table_item">运单量</div>
+          </div>
+          <div class="swiper-container swiper1">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide" v-for="(item, index) in slideList" :key="index">
+                <div class="table_con">
+                  <div
+                    class="table_line"
+                    v-for="item1 in item.arr"
+                    :key="item1.no"
+                    :class="item1.no <= 3 ? 'ac_no' : ''"
+                  >
+                    <div class="table_item">{{ item1.no }}</div>
+                    <div class="table_item">{{ item1.name }}</div>
+                    <div class="table_item">{{ item1.count }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="left_bottom">
+        <div class="top_title">
+          <div class="left_tit">
+            <span class="txt_name">村点信息</span>
+            <span class="name">VILLAGE INFORMATION</span>
+          </div>
+        </div>
+        <div class="table_box">
+          <div class="table_line1">
+            <div class="table_item">站点名称</div>
+            <div class="table_item">上行</div>
+            <div class="table_item">下行</div>
+          </div>
+          <div class="swiper-container swiper2">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide" v-for="(item, index) in villList" :key="index">
+                <div class="table_con" :class="item.arr.length < 5 ? 'tab_con' : ''">
+                  <div class="table_line" v-for="item1 in item.arr" :key="item1.name">
+                    <div class="table_item">{{ item1.name }}</div>
+                    <div class="table_item">{{ item1.upData }}</div>
+                    <div class="table_item">{{ item1.downData }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="left_bottom"></div>
+    </div>
+    <div class="center_top"></div>
+    <div class="center_bottom"></div>
+    <div class="map_wrap">
+      <a
+        @click="backMap"
+        href="javascript:;"
+        style="
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          color: #fff;
+          font-size: 0.16rem;
+          z-index: 99;
+        "
+        >回到原点</a
+      >
+      <PathMap ref="pathMap"></PathMap>
+    </div>
+    <div class="right_box">
+      <div class="right_top">
+        <div class="top_title">
+          <div class="left_tit">
+            <span class="txt_name">派件入库量占比</span>
+            <span class="name">PROPORTION</span>
+          </div>
+        </div>
+      </div>
+      <div class="right_cen">
+        <div class="top_title">
+          <div class="left_tit">
+            <span class="txt_name">车辆行驶里程</span>
+            <span class="name">VEHICLE MILEAGE</span>
+          </div>
+        </div>
+        <CarMile @doMap="doMap"></CarMile>
+      </div>
+      <div class="right_bottom">
+        <div class="top_title">
+          <div class="left_tit">
+            <span class="txt_name">车辆报警</span>
+            <span class="name">VEHICLE ALARM</span>
+          </div>
+        </div>
+        <CarWarn></CarWarn>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from "axios";
+import * as XLSX from "xlsx/xlsx.mjs";
+import Swiper from "swiper";
+import "swiper/css/swiper.min.css";
 import { queryWeath } from "@/api/base";
+import PathMap from "../components/pathMap";
+import CarMile from "../components/carMile";
+import CarWarn from "../components/carWarn";
 export default {
+  components: {
+    PathMap,
+    CarMile,
+    CarWarn,
+  },
   data() {
     return {
+      timer: null,
       day: "",
       time: "",
       date: "",
       week: "",
+      isFullFlag: false,
+      isSupport: false,
+      dayData: [],
+      monthData: [],
+      totalData: [],
+      active: 1,
+      xData: [],
+      yData1: [],
+      yData2: [],
+      villageData: [],
+      villList: [],
+      mySwiper: null,
       temp: "",
       weather: "",
+      slideList: [
+        {
+          arr: [],
+        },
+        {
+          arr: [],
+        },
+      ],
+      shouData: [],
+      faData: [],
+      daoData: [],
+      paiData: [],
+      qianData: [],
+      isActive: 1,
+      activeName: "收件量",
+      acctiEng: "RECEIVING",
+      dateTime: "",
+      // isSlide:false
+      pieChart: null,
+      trendCharts: null,
+      chartData: [],
+      pieData: [],
+      RealData: [],
+      borderData: [],
+      startColor: [
+        "#0e94eb",
+        "#c440ef",
+        "#efb013",
+        "#2fda07",
+        "#d8ef13",
+        "#2e4af8",
+        "#0eebc4",
+        "#f129b1",
+        "#17defc",
+        "#f86363",
+      ],
+      borderStartColor: [
+        "#0077c5",
+        "#a819d7",
+        "#c99002",
+        "#24bc00",
+        "#b6cb04",
+        "#112ee2",
+        "#00bd9c",
+        "#ce078f",
+        "#00b2cd",
+        "#ec3c3c",
+      ],
+      mapData: [],
+      datas: [],
+      geoCoordMap: {
+        棋山镇: [118.895378, 35.877537],
+        东莞镇: [118.972146, 35.991826],
+        安庄镇: [118.815076, 35.812024],
+        果庄乡: [118.769212, 35.77904], //果庄乡
+        洛河镇: [118.833803, 35.753576], //洛河镇
+        库山乡: [118.979909, 35.92304], //库山乡
+        招贤镇: [118.929219, 35.723248], //招贤镇
+        桑园镇: [119.046012, 35.678553], //桑园镇
+        阎庄镇: [118.834585, 35.670621], //阎庄镇
+        莒县电子商务公共服务中心: [118.901658, 35.60688],
+        店子集镇: [118.914151, 35.5844],
+        城阳街道: [118.82472, 35.583488], //城阳街道
+        峤山镇: [118.946005, 35.657339], //峤山镇
+        龙山镇: [119.003747, 35.515955],
+        陵阳镇: [118.890825, 35.545056],
+        寨里河镇: [118.931584, 35.469982],
+        莒县经济开发区: [118.851312, 35.626514],
+        浮来山镇: [118.744789, 35.596051],
+        刘官庄镇: [118.801123, 35.522202],
+        长岭镇: [118.844125, 35.484677],
+        小店镇: [118.81007, 35.422484],
+        夏庄镇: [118.700674, 35.419525],
+      },
     };
   },
   created() {
     this.getTime();
   },
   mounted() {
+    this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
     queryWeath().then((res) => {
       this.temp = res.result.now.temp;
       this.weather = res.result.now.text;
     });
   },
   methods: {
+    backMap() {
+      this.$refs.pathMap.backMap();
+    },
+    //触发定位地图
+    doMap(item) {
+      this.$refs.pathMap.queryDingwei(item.deviceId);
+    },
+    readExcelFile(url) {
+      axios
+        .get(url, {
+          responseType: "arraybuffer",
+        })
+        .then((res) => {
+          // console.log(res);
+          let data = new Uint8Array(res);
+          //   console.log(data);
+          let wb = XLSX.read(data, {
+            type: "array",
+          });
+          //   console.log(wb);
+          let sheets = wb.Sheets; // 获取文档数据
+          // console.log(sheets);
+          this.content = this.transformSheets(sheets);
+          // this.$message('读取成功');
+        })
+        .catch((err) => {
+          this.$message.error(err);
+        });
+    },
+    transformSheets(sheets) {
+      const content1 = [];
+      for (const key in sheets) {
+        content1.push(XLSX.utils.sheet_to_json(sheets[key]));
+      }
+      console.log(content1);
+      this.dayData.push(
+        { name: "收件量", data: content1[0][0].日总收件量, huanbi: content1[0][0].收件量日总环比 },
+        { name: "发件量", data: content1[0][0].日总发件量, huanbi: content1[0][0].发件量日总环比 },
+        { name: "到件量", data: content1[0][0].日总到件量, huanbi: content1[0][0].到件量日总环比 },
+        { name: "派件量", data: content1[0][0].日总派件量, huanbi: content1[0][0].派件量日总环比 },
+        { name: "签件量", data: content1[0][0].日总签件量, huanbi: content1[0][0].签件量日总环比 }
+      );
+
+      this.monthData.push(
+        { name: "收件量", data: content1[0][0].月总收件量, huanbi: content1[0][0].收件量月总环比 },
+        { name: "发件量", data: content1[0][0].月总发件量, huanbi: content1[0][0].发件量月总环比 },
+        { name: "到件量", data: content1[0][0].月总到件量, huanbi: content1[0][0].到件量月总环比 },
+        { name: "派件量", data: content1[0][0].月总派件量, huanbi: content1[0][0].派件量月总环比 },
+        { name: "签件量", data: content1[0][0].月总签件量, huanbi: content1[0][0].签件量月总环比 }
+      );
+      this.totalData = this.dayData;
+      content1[1].map((item) => {
+        this.xData.unshift(item.日期.substring(item.日期.length - 5).replace(".", "-"));
+        this.yData1.push(item.到件量);
+        this.yData2.push(item.派件量);
+      });
+      // this.dateTime = content1[0][0].日期.replaceAll(".", "/");
+      this.dateTime = content1[0][0].日期.replace(/\D/g, "/");
+      // this.$message.success(content1[0][0].日期);
+      content1[3].map((item) => {
+        this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 });
+      });
+      for (var i = 0, len = this.villageData.length; i < len; i += 7) {
+        this.villList.push({ arr: this.villageData.slice(i, i + 7) });
+      }
+      content1[2].map((item, index) => {
+        this.mapData.push({ name: item.名称, value: item.收件量 });
+        this.datas.push([
+          { name: item.名称, value: item.收件量 },
+          { name: "莒县电子商务公共服务中心" },
+        ]);
+        this.shouData.push({ name: item.名称, count: item.收件量 });
+        this.shouData = this.shouData.sort(function (a, b) {
+          return b.count - a.count;
+        });
+        this.faData.push({ name: item.名称, count: item.发件量 });
+        this.faData = this.faData.sort(function (a, b) {
+          return b.count - a.count;
+        });
+        this.daoData.push({ name: item.名称, count: item.到件量 });
+        this.daoData = this.daoData.sort(function (a, b) {
+          return b.count - a.count;
+        });
+        this.paiData.push({ name: item.名称, count: item.派件量 });
+        this.paiData = this.paiData.sort(function (a, b) {
+          return b.count - a.count;
+        });
+        this.qianData.push({ name: item.名称, count: item.签件量 });
+        this.qianData = this.qianData.sort(function (a, b) {
+          return b.count - a.count;
+        });
+      });
+      content1[0].map((item) => {
+        this.pieData.push({
+          name: item.快递名称,
+          value: item.收件量,
+          percent: (item.收件量 / content1[0][0].日总收件量).toFixed(4) * 100,
+        });
+      });
+      console.log(this.pieData);
+      this.shouData.map((item, index) => {
+        if (index <= 10) {
+          this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
+        } else {
+          this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
+        }
+      });
+      this.$nextTick(() => {
+        // this.createChart();
+        // this.createCharts();
+        // this.createCharts1();
+        // this.run();
+        // this.run1();
+      });
+    },
+
+    run() {
+      this.mySwiper = new Swiper(".swiper1", {
+        loop: true, // 循环模式选项
+        autoplay: {
+          delay: 10000, //10秒切换一次
+          disableOnInteraction: false,
+        },
+      });
+    },
+
+    changeBtn(val) {
+      this.isActive = val;
+      this.slideList = [{ arr: [] }, { arr: [] }];
+      this.isSlide = false;
+      if (val == 1) {
+        this.activeName = "收件量";
+        this.acctiEng = "RECEIVING";
+        this.shouData.map((item, index) => {
+          if (index <= 10) {
+            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
+          } else {
+            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
+          }
+        });
+      } else if (val == 2) {
+        this.activeName = "发件量";
+        this.acctiEng = "SENDING";
+        this.faData.map((item, index) => {
+          if (index <= 10) {
+            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
+          } else {
+            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
+          }
+        });
+      } else if (val == 3) {
+        this.activeName = "到件量";
+        this.acctiEng = "ARRIVING";
+        this.daoData.map((item, index) => {
+          if (index <= 10) {
+            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
+          } else {
+            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
+          }
+        });
+      } else if (val == 4) {
+        this.acctiEng = "ASSIGNING";
+        this.activeName = "派件量";
+        this.paiData.map((item, index) => {
+          if (index <= 10) {
+            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
+          } else {
+            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
+          }
+        });
+      } else if (val == 5) {
+        this.activeName = "签件量";
+        this.acctiEng = "RECEIVING";
+        this.qianData.map((item, index) => {
+          if (index <= 10) {
+            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
+          } else {
+            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
+          }
+        });
+      }
+      // if(this.slideList){
+      //   this.isSlide = true;
+      // }
+      this.$nextTick(() => {
+        //   console.log(this.slideList)
+        this.mySwiper.destroy();
+
+        this.run();
+      });
+    },
     fn(str) {
       let num = null;
       str >= 10 ? (num = str) : (num = "0" + str);
@@ -257,17 +656,72 @@ export default {
     top: 14%;
     left: 3%;
 
-    .left_top {
+    .top_title {
       width: 100%;
-      height: 55%;
+      height: 0.38rem;
+      background: url(~@/assets/img/tit_bag.png);
+      background-size: 100% 100%;
+      display: flex;
 
-      .top_title {
+      .left_tit {
         width: 100%;
-        height: 10%;
-        background: url(~@/assets/img/tit_bag.png);
-        background-size: 100% 100%;
+        height: 100%;
+        font-size: 0.1rem;
+        color: #fff;
+        display: flex;
+        align-items: center;
+
+        .txt_name {
+          margin: 0 0.1rem 0 0.6rem;
+          font-family: "FZSK";
+          font-size: 0.22rem;
+          letter-spacing: 0px;
+          color: #ffffff;
+        }
+
+        .name {
+          font-family: "FZSK";
+          color: #ffffff;
+          box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81);
+          opacity: 0.6;
+          margin-bottom: 0.1rem;
+        }
+      }
+
+      .right_tit {
         display: flex;
+        align-items: center;
+        margin-right: 0.18rem;
+        position: relative;
+
+        .title_txt {
+          width: 0.42rem;
+          height: 0.32rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: url(~@/assets/img/bg.png);
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          &.active {
+            background: url(~@/assets/img/active_bg.png);
+            background-size: 100% 100%;
+          }
+        }
+
+        div {
+          font-size: 0.18rem;
+          color: #fff;
+        }
+      }
+    }
+
+    .left_top {
+      width: 100%;
+      height: 57%;
 
+      .top_title {
         .left_tit {
           width: 50%;
           height: 100%;
@@ -292,39 +746,300 @@ export default {
             margin-bottom: 0.1rem;
           }
         }
+      }
 
-        .right_tit {
+      .cen_con {
+        width: 100%;
+        height: 89%;
+        margin-top: 0.18rem;
+
+        .table_line1 {
+          width: 100%;
+          height: 0.38rem;
           display: flex;
           align-items: center;
-          margin-right: 0.18rem;
-          position: relative;
+          background: url(~@/assets/img/tab_bg.png);
+          background-size: 100% 100%;
 
-          .title_txt {
-            width: 0.4rem;
-            height: 0.3rem;
-            margin: 0 0.03rem;
+          .table_item {
+            width: 33%;
+            height: 100%;
             display: flex;
-            align-items: center;
             justify-content: center;
+            align-items: center;
+            color: #fff;
+            font-family: "FZSK";
+            font-size: 0.16rem;
+            color: #ffffff;
+          }
+        }
 
-            &::after {
-              content: "";
-              width: 0.4rem;
-              height: 0.3rem;
-              position: absolute;
-              border: solid 1px #127cff;
-              top: 50%;
-              transform: skew(-10deg) translateY(-50%);
+        .swiper-container {
+          width: 100%;
+          height: 88%;
+        }
+
+        .table_con {
+          height: 100%;
+        }
+        .table_line {
+          width: 100%;
+          height: 8.6%;
+          display: flex;
+          align-items: center;
+
+          &.ac_no {
+            height: 10%;
+            background: url(~@/assets/img/tab1.png);
+            background-size: 100% 100%;
+
+            div {
+              font-family: "FZSK";
+              font-size: 0.18rem;
+              letter-spacing: 0px;
+              background-image: linear-gradient(
+                to bottom,
+                #fceece,
+                #e39054
+              ); /* 线性渐变背景，方向向上 */
+              -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
+              -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
+            }
+
+            &:nth-child(2) {
+              background: url(~@/assets/img/tab2.png);
+              background-size: 100% 100%;
+              div {
+                background-image: linear-gradient(
+                  to bottom,
+                  #cefce7,
+                  #16da85
+                ); /* 线性渐变背景，方向向上 */
+                -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
+                -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
+              }
+            }
+
+            &:nth-child(3) {
+              background: url(~@/assets/img/tab3.png);
+              background-size: 100% 100%;
+              div {
+                background-image: linear-gradient(
+                  to bottom,
+                  #cef6fc,
+                  #1ca4f2
+                ); /* 线性渐变背景，方向向上 */
+                -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
+                -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
+              }
             }
           }
 
-          div {
-            font-size: 0.18rem;
+          .table_item {
+            width: 33%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             color: #fff;
+            font-size: 0.14rem;
+          }
+        }
+
+        // div{
+        //   font-size: 0.18rem;
+        //   color: #fff;
+        // }
+      }
+    }
+    .left_bottom {
+      width: 100%;
+      height: 38%;
+      margin-top: 2%;
+
+      .table_box {
+        width: 100%;
+        height: 88%;
+        margin-top: 0.15rem;
+        // overflow-y: auto;
+
+        .swiper2 {
+          width: 100%;
+          height: 92%;
+
+          .swiper-wrapper {
+            width: 100%;
+            height: 100%;
+
+            .swiper-slide {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+
+        .table_con {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .tab_con {
+          height: 55%;
+        }
+        .table_line1 {
+          width: 100%;
+          height: 0.38rem;
+          display: flex;
+          align-items: center;
+          background: url(~@/assets/img/tab_bg.png);
+          background-size: 100% 100%;
+
+          .table_item {
+            width: 33%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: "FZSK";
+            font-size: 0.16rem;
+            color: #ffffff;
+          }
+        }
+
+        .table_line {
+          width: 100%;
+          height: 0.4rem;
+          display: flex;
+          align-items: center;
+
+          .table_item {
+            width: 33%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
           }
         }
+
+        div {
+          font-size: 0.14rem;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .center_top {
+    width: 44%;
+    height: 12%;
+    background: red;
+    position: absolute;
+    left: 28%;
+    top: 15%;
+  }
+
+  .center_bottom {
+    width: 44%;
+    height: 25%;
+    background: red;
+    position: absolute;
+    left: 28%;
+    bottom: 6%;
+    z-index: 11;
+  }
+  .right_box {
+    width: 24%;
+    height: 80%;
+    position: absolute;
+    top: 14%;
+    right: 2%;
+
+    .top_title {
+      width: 100%;
+      height: 0.38rem;
+      background: url(~@/assets/img/tit_bag.png);
+      background-size: 100% 100%;
+      display: flex;
+
+      .left_tit {
+        width: 100%;
+        height: 100%;
+        font-size: 0.1rem;
+        color: #fff;
+        display: flex;
+        align-items: center;
+
+        .txt_name {
+          margin: 0 0.1rem 0 0.6rem;
+          font-family: "FZSK";
+          font-size: 0.22rem;
+          letter-spacing: 0px;
+          color: #ffffff;
+        }
+
+        .name {
+          font-family: "FZSK";
+          color: #ffffff;
+          box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81);
+          opacity: 0.6;
+          margin-bottom: 0.1rem;
+        }
+      }
+
+      .right_tit {
+        display: flex;
+        align-items: center;
+        margin-right: 0.18rem;
+        position: relative;
+
+        .title_txt {
+          width: 0.42rem;
+          height: 0.32rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: url(~@/assets/img/bg.png);
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          &.active {
+            background: url(~@/assets/img/active_bg.png);
+            background-size: 100% 100%;
+          }
+        }
+
+        div {
+          font-size: 0.18rem;
+          color: #fff;
+        }
       }
     }
+
+    .right_top {
+      width: 100%;
+      height: 34%;
+    }
+
+    .right_cen {
+      width: 100%;
+      height: 33%;
+    }
+    .right_bottom {
+      width: 100%;
+      height: 33%;
+    }
+  }
+
+  .map_wrap {
+    position: absolute;
+    left: 5.2rem;
+    top: 2.6rem;
+    width: 8.82rem;
+    height: 4.2rem;
   }
 }
 </style>