diff --git a/src/api/emergency-rescue/index.js b/src/api/emergency-rescue/index.js
index 443edc9..79f65b6 100644
--- a/src/api/emergency-rescue/index.js
+++ b/src/api/emergency-rescue/index.js
@@ -1,27 +1,50 @@
-
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询参数列表
 export function getyjList(query) {
   return request({
-    url: '/bYjgd/page',
-    method: 'get',
-    params: query
-  })
+    url: "/bYjgd/page",
+    method: "get",
+    params: query,
+  });
 }
 //新增
 export function addyj(data) {
   return request({
-    url: '/bYjgd/add',
-    method: 'post',
-    data
-  })
+    url: "/bYjgd/add",
+    method: "post",
+    data,
+  });
 }
 // 修改
 export function updateyj(data) {
   return request({
-    url: '/bYjgd/edit',
-    method: 'post',
-    data
-  })
-}
\ No newline at end of file
+    url: "/bYjgd/edit",
+    method: "post",
+    data,
+  });
+}
+//删除
+export function delyj(query) {
+  return request({
+    url: "/bYjgd/delete",
+    method: "DELETE",
+    params: query,
+  });
+}
+//详情
+export function getyjById(id) {
+  return request({
+    url: `/bYjgd/${id}`,
+    method: "get",
+  });
+}
+
+//组织架构
+export function getDetListById(query) {
+  return request({
+    url: "/dept/tree",
+    method: "get",
+    params: query,
+  });
+}
diff --git a/src/assets/images/visualization/-s-标题底纹_1@2x.png b/src/assets/images/visualization/panel-block-title.png
similarity index 100%
rename from src/assets/images/visualization/-s-标题底纹_1@2x.png
rename to src/assets/images/visualization/panel-block-title.png
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index 852cbe4..37975cc 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -139,7 +139,8 @@
   .dialog-data{
     padding: 10px 10px 0 10px;
     min-height: 200px;
-
+    max-height: 800px;
+    overflow-y: auto;
   }
   .dialog-footer{
     display: flex;
diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue
index 7085bad..8bbe216 100644
--- a/src/components/DictTag/index.vue
+++ b/src/components/DictTag/index.vue
@@ -16,7 +16,7 @@
           :index="index"
           :type="item.elTagType"
           :class="item.elTagClass"
-        >{{ item.label + " " }}{{item.elTagType}}</el-tag>
+        >{{ item.label + " " }}</el-tag>
       </template>
     </template>
     <template v-if="unmatch && showValue">
@@ -80,4 +80,11 @@ function handleArray(array) {
 .el-tag + .el-tag {
   margin-left: 10px;
 }
+.el-tag {
+
+font-size: 14px;
+/* color: #FFFFFF; */
+padding:0 12px;
+font-weight: 500;
+}
 </style>
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 1e59417..4397c37 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -11,6 +11,7 @@ const useUserStore = defineStore(
       id: '',
       name: '',
       avatar: '',
+      deptId:'',
       roles: [],
       permissions: []
     }),
@@ -47,6 +48,7 @@ const useUserStore = defineStore(
               this.roles = ['ROLE_DEFAULT']
             }
             this.id = user.userId
+            this.deptId = user.deptId
             this.name = user.userName
             this.avatar = avatar
             resolve(res)
diff --git a/src/views/emergency-rescue/workOrder/index.vue b/src/views/emergency-rescue/workOrder/index.vue
index 0ba0fa8..b11950e 100644
--- a/src/views/emergency-rescue/workOrder/index.vue
+++ b/src/views/emergency-rescue/workOrder/index.vue
@@ -84,13 +84,21 @@
             align="center"
             key="gdLevel"
             prop="gdLevel"
-          />
+          >
+          <template #default="scope">
+              <dict-tag :options="gdlevel" :value="scope.row.gdLevel" />
+            </template>
+        </el-table-column>
           <el-table-column
             label="录入时间"
             align="center"
             key="createTime"
             prop="createTime"
-          />
+          >
+            <template #default="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
           <el-table-column
             label="工单状态"
             align="center"
@@ -111,6 +119,7 @@
               <div class="table-operation-row">
                 <section v-show="scope.row.status == 0">
                   <el-button link type="primary" icon="FolderAdd"
+                  @click="handlerEdit(scope.row)"
                     >勘察录入</el-button
                   >
                   <el-button link type="primary" icon="FolderRemove"
@@ -132,14 +141,17 @@
                 </section>
                 <section>
                   <el-button link type="primary" icon="View">查看</el-button>
-                  <el-button
+                 
+                </section>
+                <!-- v-show="scope.row.status != 0 && scope.row.status != 3" -->
+                <el-button
                     link
                     type="primary"
                     icon="Delete"
-                    v-show="scope.row.status != 0 && scope.row.status != 3"
+                    @click="handlerDel(scope.row.id)"
+                    
                     >删除</el-button
                   >
-                </section>
               </div>
             </template>
           </el-table-column>
@@ -156,17 +168,29 @@
       </template>
     </tablePage>
     <!-- 工单 -->
-    <operation v-model="open" :title="title" @confirm="getList()"></operation>
+    <operation :dict="{
+      gdlx,dflx,gdlevel,clfa,zyxt,gdms
+    }" v-model="open" :id="workId" :title="title" @confirm="getList()"></operation>
   </section>
 </template>
 
 <script setup>
 import { operation } from "./index";
-import { getyjList } from "@/api/emergency-rescue";
+import { getyjList, delyj } from "@/api/emergency-rescue";
+import { ref } from "vue";
 import { onMounted } from "vue";
 const { proxy } = getCurrentInstance();
-const { gdlx, gd_status } = proxy.useDict("gdlx", "gd_status");
+const { gdlx, gdms, gdlevel, clfa, zyxt, dflx,gd_status } = proxy.useDict(
+  "gdlx",
+  "gdms",
+  "gdlevel",
+  "clfa",
+  "zyxt",
+  "dflx",
+  "gd_status"
+);
 
+const workId = ref(null)
 const loading = ref(false);
 const list = ref([]);
 const open = ref(false);
@@ -218,13 +242,43 @@ const resetQuery = () => {
   handleQuery();
 };
 
+/**
+ * 
+ * 勘察录入
+ * @param row 
+ */
+const handlerEdit=(row)=>{
+  workId.value = row.id
+  open.value = true;
+  title.value = "勘察录入";
+
+}
+
 /**
  * 新增
  */
 const handlerAdd = () => {
+  workId.value = null
   open.value = true;
   title.value = "抢险工单录入";
 };
+
+/**
+ * 删除
+ * @param id
+ */
+const handlerDel = (id) => {
+  proxy.$modal
+    .confirm('是否确认删除参数编号为"' + id + '"的数据项？')
+    .then(function () {
+      return delyj({ idList: id });
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+};
 /**
  * 导出
  */
diff --git a/src/views/emergency-rescue/workOrder/operation.vue b/src/views/emergency-rescue/workOrder/operation.vue
index 89a1ce9..05bbed5 100644
--- a/src/views/emergency-rescue/workOrder/operation.vue
+++ b/src/views/emergency-rescue/workOrder/operation.vue
@@ -4,9 +4,16 @@
     v-model="visible"
     width="35%"
     class="x-dialog"
-    destroy-on-close
+    :destroy-on-close="true"
+    @closed="handlerClose()"
   >
-    <el-form class="dialog-data" :model="form" ref="formRef" label-width="78px">
+    <el-form
+      class="dialog-data"
+      :model="form"
+      :rules="rules"
+      ref="formRef"
+      label-width="88px"
+    >
       <el-form-item label="工单地址:" prop="address">
         <div class="map">
           <MarsMap
@@ -40,34 +47,94 @@
         </div>
       </el-form-item>
       <el-form-item label="工单类型:" prop="gdType">
-        <el-radio-group v-model="form.gdType">
-          <el-radio :value="dict.value" v-for="dict in gdlx">{{
+        <el-radio-group v-model="form.gdType" @change="changeType()">
+          <el-radio :value="parseInt(dict.value)" v-for="dict in dict.gdlx">{{
             dict.label
           }}</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="简要描述:" prop="gdms">
-        <el-select v-model="form.gdms" placeholder="请选择" clearable>
-          <el-option
-            v-for="dict in gdms"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+
+      <section v-if="id">
+        <el-form-item label="倒伏类型:" prop="dflx" v-if="form.gdType == 0">
+          <el-checkbox-group v-model="form.dflx">
+            <el-checkbox
+              v-for="dict in dict.dflx"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="工单照片:" prop="gdtp">
+          <ImageUpload v-model="form.gdtp"></ImageUpload>
+        </el-form-item>
+        <el-form-item label="工单等级:" prop="gdLevel">
+          <el-radio-group v-model="form.gdLevel">
+            <el-radio :value="parseInt(dict.value)" v-for="dict in dict.gdlevel">{{
+              dict.label
+            }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="处置方案:" prop="clfa">
+          <el-select v-model="form.clfa" placeholder="请选择" clearable>
+            <el-option
+              v-for="dict in dict.clfa"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="派遣人数:" prop="pqrs">
+          <el-input v-model="form.pqrs" placeholder="请输入" clearable>
+            <template #suffix>
+              <span>人</span>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="派遣车辆:" prop="pqcl">
+          <el-input v-model="form.pqcl" placeholder="请输入" clearable>
+            <template #suffix>
+              <span>辆</span>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="资源协调:" prop="zyxt">
+          <el-checkbox-group v-model="form.zyxt">
+            <el-checkbox
+              v-for="dict in dict.zyxt"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-checkbox-group>
+        </el-form-item>
+      </section>
+
+      <section v-else>
+        <el-form-item label="简要描述:" prop="gdms">
+          <el-select v-model="form.gdms" placeholder="请选择" clearable>
+            <el-option
+              v-for="dict in dict.gdms"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选派人员:" prop="zzjg">
+          <el-cascader
+            v-model="form.zzjg"
+            :options="deptList"
+            :props="cascaderProps"
+            @change="handleChange"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="选派人员:" prop="pqrs">
-        <el-cascader
-          v-model="form.pqrs"
-          :options="deptList"
-          :props="cascaderProps"
-          @expand-change="handleChange"
-        />
-      </el-form-item>
+        </el-form-item>
+      </section>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="visible = false" icon="CloseBold">取消</el-button>
+        <el-button @click="handlerClose()" icon="CloseBold">取消</el-button>
         <el-button type="primary" icon="Select" @click="confirm()"
           >确定</el-button
         >
@@ -77,21 +144,29 @@
 </template>
 
 <script setup>
-import { addyj, updateyj } from "@/api/emergency-rescue";
+import {
+  addyj,
+  updateyj,
+  getDetListById,
+  getyjById,
+} from "@/api/emergency-rescue";
 import MarsMap from "@/components/mars-work/mars-map.vue";
 import mapOptions from "@/components/mars-work/mapOptions";
 import markerIcon from "@/assets/images/map-marker.png";
 import { gaodeAddress, gaodePOI } from "@/utils/common.js";
-import { deptTreeSelect } from "@/api/system/user";
-import { onMounted } from "vue";
+import { onMounted, onBeforeUnmount } from "vue";
+import useUserStore from "@/store/modules/user";
+// import { nextTick } from "vue/types/umd";
+
 const { proxy } = getCurrentInstance();
-const { gdlx, gdms } = proxy.useDict("gdlx", "gdms");
 
+const userStore = useUserStore();
 const deptList = ref([]);
 const gaodePOIList = ref([]);
 const currentId = ref(0);
 const cascaderProps = {
-  value: "id",
+  value: "deptId",
+  label: "deptName",
 };
 
 const props = defineProps({
@@ -99,6 +174,20 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  dict:{
+    type:Object,
+    default:{
+      gdlx:[],
+      dflx:[],
+      gdlevel:[],
+      clfa:[],
+      zyxt:[],
+      gdms:[],
+    }
+  },
+  id: {
+    type: Number,
+  },
   modelValue: {
     type: Boolean,
     default: false,
@@ -122,7 +211,7 @@ const data = reactive({
     createId: undefined, //创建者id
     createTime: undefined, //创建时间
     deptId: undefined, //部门id
-    dflx: undefined, //倒伏类型
+    dflx: [], //倒伏类型
     gdLevel: undefined, //工单等级
     gdType: undefined, //工单类型
     gdms: undefined, //工单描述
@@ -133,9 +222,24 @@ const data = reactive({
     pqrs: undefined, //派遣人数
     reason: undefined, //退单原因
     status: undefined, //状态 0:待勘察，1:待派发,2:已退单.3:待处理,4:已完成
-    zyxt: undefined, //资源协调
+    zyxt: [], //资源协调
+    zzjg: [],
+  },
+  rules: {
+    address: [{ required: true, message: "请填写工单地址", trigger: "blur" }],
+    gdType: [{ required: true, message: "请选择工单类型", trigger: "change" }],
+    gdms: [{ required: true, message: "请选择简要描述", trigger: "change" }],
+    zzjg: [{ required: true, message: "请选择选派人员", trigger: "change" }],
+
+    dflx: [{ required: true, message: "请选择倒伏类型", trigger: "change" }],
+    gdtp: [{ required: true, message: "请上传工单照片", trigger: "change" }],
+    gdLevel: [{ required: true, message: "请选择工单等级", trigger: "change" }],
+
+    clfa: [{ required: true, message: "请选择处置方案", trigger: "change" }],
+    pqrs: [{ required: true, message: "请填写派遣人数", trigger: "change" }],
+    pqcl: [{ required: true, message: "请填写派遣车辆", trigger: "change" }],
+    zyxt: [{ required: true, message: "请选择资源协调", trigger: "change" }],
   },
-  rules: {},
 });
 const { queryParams, form, rules } = toRefs(data);
 const visible = ref(props.modelValue);
@@ -154,23 +258,80 @@ onMounted(() => {
   getDeptTree();
 });
 
+const changeType = () => {
+  form.value.dflx = [];
+};
+
 /**
  * 提交
  */
 const confirm = () => {
   proxy.$refs["formRef"].validate(async (valid) => {
     if (valid) {
+      form.value.zzjg = form.value.zzjg.join();
+      form.value.dflx = form.value.dflx.join();
+      form.value.zyxt = form.value.zyxt.join();
       if (form.value.id) {
+        await updateyj(form.value);
+        proxy.$modal.msgSuccess(`${props.title}成功`);
       } else {
         await addyj(form.value);
         proxy.$modal.msgSuccess("新增成功");
       }
-      emit("confirm");
-      visible.value = false;
+      try {
+        emit("confirm");
+        handlerClose();
+      } catch {
+        form.value.zzjg = form.value.zzjg.split(",");
+      }
     }
   });
 };
 
+/**
+ * 获取详情
+ */
+const getInfo = async (val) => {
+  if (!props.id || !visible.value) return;
+  console.log(props.id, visible.value);
+  const res = await getyjById(props.id);
+  res.data.zzjg = res.data.zzjg.split(",").map((item) => parseInt(item));
+
+  res.data.zyxt = filterArray(res.data.zyxt);
+  res.data.dflx = filterArray(res.data.dflx);
+
+  form.value = res.data;
+  if (form.value.lat && form.value.lon && mapData) {
+    nextTick(() => {
+      handleMapClick(form.value.lat, form.value.lon);
+      mapData.flyToGraphic(mapLayer.marker, { radius: 300 });
+    });
+  }
+};
+
+const filterArray = (data) => {
+  if (data) {
+    return data.split(",");
+  } else {
+    return [];
+  }
+};
+
+/**
+ *
+ */
+const handlerClose = () => {
+  proxy.resetForm("formRef");
+  visible.value = false;
+  gaodePOIList.value = [];
+  if (mapData) {
+    mapData.destroy();
+    mapData = null;
+    mapLayer.marker?.clear();
+    entity = null;
+  }
+};
+
 /**
  * 地址搜索
  */
@@ -197,18 +358,21 @@ const handleCograph = (item) => {
   }
 };
 /**
- * 级联变化
+ * 级联取人员deptID
  */
-const handleChange = (value) => {};
-const getDeptTree = async () => {
-  const res = await deptTreeSelect();
-  deptList.value = res.data;
-  console.log(deptList.value);
+const handleChange = (value) => {
+  form.value.deptId = value[value.length - 1];
+  console.log(form.value.deptId);
 };
-
 /**
  * 获取系统组织架构
  */
+const getDeptTree = async () => {
+  const res = await getDetListById({
+    deptId: userStore.deptId,
+  });
+  deptList.value = res;
+};
 
 /**
  * 获取地图配置
@@ -241,14 +405,9 @@ const marsOnload = (map) => {
     const latitude = Cesium.Math.toDegrees(cartographic.latitude);
     const res = await gaodeAddress(`${longitude},${latitude}`);
     form.value.address = res.formatted_address;
-
     handleMapClick(longitude, latitude);
   });
-
-  if (form.value.longitude && form.value.latitude) {
-    handleMapClick(form.value.longitude, form.value.latitude);
-    map.flyToGraphic(mapLayer.marker, { radius: 300 });
-  }
+  getInfo();
 };
 /**
  * @description: 处理地图点击
@@ -258,6 +417,9 @@ const marsOnload = (map) => {
  * @returns
  */
 const handleMapClick = (longitude, latitude) => {
+  if (!isPositiveDecimal(longitude)) longitude = parseFloat(longitude);
+  if (!isPositiveDecimal(latitude)) latitude = parseFloat(latitude);
+  console.log(entity, "sss");
   if (entity) {
     entity.position = [longitude, latitude];
   } else {
@@ -277,15 +439,11 @@ const handleMapClick = (longitude, latitude) => {
   form.value.lon = latitude; //经度
 };
 
-onUnmounted(() => {
-  if (mapData) {
-    mapData.destroy();
-    mapData = null;
-  }
-  mapLayer.marker?.clear();
-  mapLayer = null;
-  entity = null;
-});
+const isPositiveDecimal = (num) => {
+  return typeof num === "number" && num >= 0 && !Number.isInteger(num);
+};
+
+onBeforeUnmount(() => {});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/visualization/components/index.js b/src/views/visualization/components/index.js
index 1d50cf4..ff0435d 100644
--- a/src/views/visualization/components/index.js
+++ b/src/views/visualization/components/index.js
@@ -1,4 +1,5 @@
 
 
 
-export { default as navigationBar } from './navigationBar.vue'
\ No newline at end of file
+export { default as navigationBar } from './navigationBar.vue'
+export { default as panelBlock } from './panel-block.vue'
\ No newline at end of file
diff --git a/src/views/visualization/components/panel-block.vue b/src/views/visualization/components/panel-block.vue
new file mode 100644
index 0000000..3004fe0
--- /dev/null
+++ b/src/views/visualization/components/panel-block.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="panel-block">
+    <div class="panel-block__header">{{ title }}</div>
+    <div class="panel-block__body"></div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.panel-block {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.panel-block__header {
+  height: 35px;
+  line-height: 30px;
+  padding-left: 38px;
+  width:324px;
+  background-image: url("@/assets/images/visualization/panel-block-title.png");
+  background-size: 100% 100%;
+  font-size: 16px;
+  font-weight: bold;
+  font-family: "Alimama ShuHeiTi-Bold";
+  color: #ffffff;
+  letter-spacing: 1px;
+}
+.panel-block__body {
+  width: 100%;
+  flex: 1;
+}
+</style>
diff --git a/src/views/visualization/emergency/components/containerBottom.vue b/src/views/visualization/emergency/components/containerBottom.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/visualization/emergency/components/containerLeft.vue b/src/views/visualization/emergency/components/containerLeft.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/visualization/emergency/components/containerRight.vue b/src/views/visualization/emergency/components/containerRight.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/visualization/emergency/index.vue b/src/views/visualization/emergency/index.vue
index e5c8928..11e0a2e 100644
--- a/src/views/visualization/emergency/index.vue
+++ b/src/views/visualization/emergency/index.vue
@@ -1,5 +1,18 @@
 <template>
   <div class="emergency-container">
+    <div class="main-left">
+      <panelBlock title="应急抢险资源"></panelBlock>
+      <panelBlock title="应急抢险工单"></panelBlock>
+      <panelBlock title="工单派发及完成率分析"></panelBlock>
+    </div>
+    <div class="main-right">
+      <panelBlock title="最新预警信息"></panelBlock>
+      <panelBlock title="工单数量变化分析"></panelBlock>
+      <panelBlock title="工作量统计分析"></panelBlock>
+    </div>
+    <div class="main-bottom">
+      <panelBlock title="最新应急抢险工单"></panelBlock>
+    </div>
     <MarsMap
       :url="configUrl"
       :options="mapOptions"
@@ -15,7 +28,7 @@ import mapOptions from "../mapOptions";
 import { onUnmounted } from "vue";
 import wallImg from "@/assets/images/visualization/fence-top.png";
 import areaBg from "@/assets/images/visualization/area-bg.png";
-
+import { panelBlock } from "@/views/visualization/components/index";
 //地图配置
 const configUrl = "lib/config/config.json";
 let mapData = null;
@@ -33,11 +46,11 @@ const initAreaCover = async () => {
   });
 };
 
-const inintEntity = (data, fill=false, height, ) => {
+const inintEntity = (data, fill = false, height) => {
   const polylineGraphic = new mars3d.graphic.PolygonEntity({
     positions: data.positions,
     style: {
-      fill:fill,
+      fill: fill,
       materialType: "Image2",
       materialOptions: {
         image: areaBg,
@@ -48,9 +61,9 @@ const inintEntity = (data, fill=false, height, ) => {
       },
       workMaterialType: "Image",
       stRotationDegree: 6,
-      outline:fill,
-      outlineWidth:2,
-      outlineColor:"#8EF4FF",
+      outline: fill,
+      outlineWidth: 2,
+      outlineColor: "#8EF4FF",
       height: height,
     },
   });
@@ -86,7 +99,7 @@ const initStyleFeatures = async () => {
     url: "/lib/geoJson/park-rectangle.json",
   });
   const arr = mars3d.Util.geoJsonToGraphics(jsonData); // 解析geojson
-  inintEntity(arr[0],  false);
+  inintEntity(arr[0], false);
 };
 
 /**
@@ -124,8 +137,42 @@ onUnmounted(() => {
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .emergency-container {
+  position: relative;
   height: 100%;
+  .main-left,
+  .main-right {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    box-sizing: border-box;
+    padding-top: calc(96px + 34px);
+    padding-bottom: 34px;
+    width: 16%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    &>div{
+      flex: 1;
+    }
+  }
+
+  .main-left {
+    left: 42px;
+  }
+  .main-right {
+    right: 42px;
+  }
+  .main-bottom {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height:calc((100% / 3) - 20px);
+    z-index: 10;
+    width:55%;
+    padding-bottom: 34px;
+  }
 }
 </style>