feat: .

src/views/accidents/index.vue

@@ -1,7 +1,7 @@
 <template>
   <MainPanel>
     <template v-slot:header>
-      <Header type="return_l" :count="selects.length" :title="`已标注照片（${sortPhotos.length}）`" :on-back="() => api.closePage()">
+      <Header type="return_l" :count="selects.length" :title="`已标注照片（${sortPhotos.length}）`" :on-back="() => onBack()">
         <ui-button
             :type="selectMode ? 'primary' : 'normal'"
             @click="selectMode = !selectMode"
@@ -83,6 +83,14 @@ const typePhotos = computed(() =>
     }))
     .filter(data => data.photos.length)
 )
+const onBack = () => {
+  let back = router.currentRoute.value.query.back;
+  if (back) {
+    router.back();
+  } else {
+    api.closePage();
+  }
+};
 const selectMode = ref(false)
 const selects = ref<AccidentPhoto[]>([])
 const active = ref<AccidentPhoto>()

src/views/roads/index.vue

@@ -1,42 +1,16 @@
 <template>
   <MainPanel>
     <template v-slot:header>
-      <Header
-        :count="selects.length"
-        :title="`现场图管理（${sortPhotos.length}）`"
-        type="return_l"
-        :on-back="() => api.closePage()"
-      >
-        <ui-button
-          :type="selectMode ? 'primary' : 'normal'"
-          @click="selectMode = !selectMode"
-          width="96px"
-          style="margin-right: 16px"
-          v-if="sortPhotos.length"
-        >
-          {{ selectMode ? "取消" : "选择" }}
-        </ui-button>
-        <ui-button
-          v-if="!selectMode"
-          type="primary"
-          @click="router.push({ name: writeRouteName.photos })"
-          width="96px"
-        >
-          新增
+      <Header :count="selects.length" :title="`现场图管理（${sortPhotos.length}）`" type="return_l" :on-back="() => onBack()">
+        <ui-button :type="selectMode ? 'primary' : 'normal'" @click="selectMode = !selectMode" width="96px" style="margin-right: 16px" v-if="sortPhotos.length">
+          {{ selectMode ? '取消' : '选择' }}
         </ui-button>
+        <ui-button v-if="!selectMode" type="primary" @click="router.push({ name: writeRouteName.photos })" width="96px"> 新增 </ui-button>
         <template v-slot:center="{ count }">
           <template v-if="count"> 已选择 {{ count }} 张 </template>
           <div v-else class="filter-type">
-            <span
-              :class="{ active: currentType === TypeEnum.Draw }"
-              @click="() => (currentType = TypeEnum.Draw)"
-              >绘图</span
-            >
-            <span
-              :class="{ active: currentType === TypeEnum.Table }"
-              @click="() => (currentType = TypeEnum.Table)"
-              >制表</span
-            >
+            <span :class="{ active: currentType === TypeEnum.Draw }" @click="() => (currentType = TypeEnum.Draw)">绘图</span>
+            <span :class="{ active: currentType === TypeEnum.Table }" @click="() => (currentType = TypeEnum.Table)">制表</span>
           </div>
         </template>
       </Header>
@@ -51,25 +25,14 @@
       :getURL="(data) => data?.table?.url || data.url"
     >
       <template v-slot="{ data }">
-        <p v-if="currentType === TypeEnum.Table">{{ data.title || "默认标题" }}</p>
+        <p v-if="currentType === TypeEnum.Table">{{ data.title || '默认标题' }}</p>
       </template>
     </Photos>
 
-    <ActionMenus
-      class="select-menus"
-      :menus="selectMenus"
-      dire="row"
-      v-if="selects.length"
-    />
+    <ActionMenus class="select-menus" :menus="selectMenus" dire="row" v-if="selects.length" />
   </MainPanel>
 
-  <FillSlide
-    :getURL="(data) => data?.table?.url || data.url"
-    :data="sortPhotos"
-    v-model:active="active"
-    @quit="active = null"
-    v-if="active"
-  >
+  <FillSlide :getURL="(data) => data?.table?.url || data.url" :data="sortPhotos" v-model:active="active" @quit="active = null" v-if="active">
     <template v-slot:foot>
       <ActionMenus class="menus" :menus="menus" dire="row" />
     </template>
@@ -77,41 +40,46 @@
 </template>
 
 <script setup lang="ts">
-import MainPanel from "@/components/main-panel/index.vue";
-import FillSlide from "@/components/fill-slide/index.vue";
-import { roadPhotos, RoadPhoto } from "@/store/roadPhotos";
-import ActionMenus from "@/components/group-button/index.vue";
-import { router, writeRouteName } from "@/router";
-import { computed, onDeactivated, reactive, ref, watchEffect } from "vue";
-import { Mode } from "@/views/graphic/menus";
-import UiButton from "@/components/base/components/button/index.vue";
-import Header from "@/components/photos/header.vue";
-import Photos from "@/components/photos/index.vue";
-import ButtonPane from "@/components/button-pane/index.vue";
-import UiIcon from "@/components/base/components/icon/index.vue";
-import { useConfirm } from "@/hook";
-import { api } from "@/store/sync";
-import { photos } from "@/store/photos";
-import { getId } from "@/utils";
+import MainPanel from '@/components/main-panel/index.vue';
+import FillSlide from '@/components/fill-slide/index.vue';
+import { roadPhotos, RoadPhoto } from '@/store/roadPhotos';
+import ActionMenus from '@/components/group-button/index.vue';
+import { router, writeRouteName } from '@/router';
+import { computed, onDeactivated, reactive, ref, watchEffect } from 'vue';
+import { Mode } from '@/views/graphic/menus';
+import UiButton from '@/components/base/components/button/index.vue';
+import Header from '@/components/photos/header.vue';
+import Photos from '@/components/photos/index.vue';
+import ButtonPane from '@/components/button-pane/index.vue';
+import UiIcon from '@/components/base/components/icon/index.vue';
+import { useConfirm } from '@/hook';
+import { api } from '@/store/sync';
+import { photos } from '@/store/photos';
+import { getId } from '@/utils';
 
 const enum TypeEnum {
   Draw,
   Table,
 }
 const currentType = ref(TypeEnum.Draw);
-const sortPhotos = computed(() =>
-  roadPhotos.value
-    .filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table))
-    .reverse()
-);
+const sortPhotos = computed(() => roadPhotos.value.filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table)).reverse());
+const onBack = () => {
+  let back = router.currentRoute.value.query.back;
+  if (back) {
+    router.back();
+  } else {
+    api.closePage();
+  }
+};
+
 const active = ref<RoadPhoto>();
 const selectMode = ref(false);
 const selects = ref<RoadPhoto[]>([]);
 const menus = computed(() => [
   {
-    key: "copy",
-    icon: "copy",
-    text: "复制",
+    key: 'copy',
+    icon: 'copy',
+    text: '复制',
     onClick: () => {
       const copy = JSON.parse(JSON.stringify(active.value)) as RoadPhoto;
       copy.id = getId();
@@ -122,31 +90,31 @@ const menus = computed(() => [
     },
   },
   {
-    key: "tabulation",
-    icon: "tabulation",
+    key: 'tabulation',
+    icon: 'tabulation',
     hide: currentType.value === TypeEnum.Table,
-    text: "制表",
+    text: '制表',
     onClick: () => gotoDraw(active.value, true),
   },
   {
-    key: "road",
-    icon: "edit",
-    text: "修改",
+    key: 'road',
+    icon: 'edit',
+    text: '修改',
     onClick: () => gotoDraw(),
   },
   {
-    key: "del",
-    icon: "del",
-    text: "删除",
+    key: 'del',
+    icon: 'del',
+    text: '删除',
     onClick: () => delPhoto(),
   },
 ]);
 
 const selectMenus = [
   {
-    key: "del",
-    icon: "del",
-    text: "删除",
+    key: 'del',
+    icon: 'del',
+    text: '删除',
     onClick: () => delSelects(),
   },
 ];
@@ -202,7 +170,7 @@ const gotoDraw = (road = active.value, forece = false) => {
   } else {
     router.push({
       name: writeRouteName.graphic,
-      params: { mode: Mode.Road, id: road.id, action: "update" },
+      params: { mode: Mode.Road, id: road.id, action: 'update' },
     });
   }
 };
@@ -262,7 +230,7 @@ onDeactivated(() => {
 
       &::after {
         position: absolute;
-        content: "";
+        content: '';
         bottom: 0;
         margin-bottom: -14px;
         left: 0;

src/views/scene/index.vue

@@ -9,7 +9,7 @@
       </div>
     </template>
 
-    <div class="info-layout">
+    <div class="info-layout" ref="layoutRef">
       <div class="info-top">
         <div class="info-top-left" :class="{ full: viewStatus }">
           <Container @loaded="loaded = true" />
@@ -44,8 +44,8 @@
             <textarea class="info-textarea"></textarea>
           </div>
           <div class="info-btn">
-            <div class="right-btn" @click="router.push('roads')">现场绘图({{ sceneSortPhotos.length }})</div>
-            <div class="right-btn" @click="router.push('accidents')">事故照片({{ accodentSortPhotos.length }})</div>
+            <div class="right-btn" @click="router.push('/roads?back=1')">现场绘图({{ sceneSortPhotos.length }})</div>
+            <div class="right-btn" @click="router.push('/accidents?back=1')">事故照片({{ accodentSortPhotos.length }})</div>
           </div>
         </div>
       </div>
@@ -73,7 +73,7 @@ import ButtonPane from '@/components/button-pane/index.vue';
 import { customMap, disabledMap, useSDK } from '@/hook';
 import customSetup from '../../hook/custom';
 import UiIcon from '@/components/base/components/icon/index.vue';
-import { ref, watchEffect, computed } from 'vue';
+import { ref, watchEffect, computed, onMounted } from 'vue';
 import { back } from '@/store/sync';
 import { trackMode } from '@/views/scene/trackMeasureWidth';
 import { currentView } from './currentScene';
@@ -83,7 +83,7 @@ import { roadPhotos, RoadPhoto } from '@/store/roadPhotos';
 import { types, accidentPhotos, AccidentPhoto } from '@/store/accidentPhotos';
 import { photos } from '@/store/photos';
 import { title } from '@/store/setup';
-
+const layoutRef = ref(null);
 const accodentSortPhotos = computed(() => {
   const photos = [...accidentPhotos.value];
   return photos.sort((a, b) => types.indexOf(a.type) - types.indexOf(b.type));
@@ -152,6 +152,11 @@ const list = ref([
     name: '法律法规',
   },
 ]);
+onMounted(() => {
+  var screenHeight = document.body.clientHeight;
+  layoutRef.value.style.height = screenHeight + 'px';
+  document.body.style.height = screenHeight + 'px';
+});
 </script>
 
 <style scoped lang="scss">
@@ -165,6 +170,10 @@ const list = ref([
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  // position: fixed;
+  // top: 0;
+  // left: 0;
+  // z-index: 1;
   .info-top {
     width: 100%;
     height: 83%;

src/views/tables/explorate.vue

@@ -1,79 +1,143 @@
 <!--  -->
 <template>
-  <div class="explorate" :class="{ downMode }" ref="layoutRef">
-    <h2 class="title">道路交通事故现场勘查笔录</h2>
+  <MainPanel>
+    <template v-slot:header>
+      <Header title="道路交通事故现场勘查笔录" type="return">
+        <ui-button type="primary" width="96px"> 完成 </ui-button>
+      </Header>
+    </template>
 
-    <div class="container">
-      <div class="wrapper">
-        <div class="header">
-          <div>现场勘查</div>
-          <div>补充勘查</div>
-        </div>
-        <div class="info">
-          <div>勘查单位</div>
-          <div></div>
-        </div>
-        <div class="info">
-          <div>勘查时间</div>
-          <div></div>
-        </div>
-        <div class="info">
-          <div>事故时间</div>
-          <div></div>
-        </div>
-        <div class="time">
-          <div class="name">事故地点</div>
-          <div class="time-one">
-            <div class="road-type">
-              <div>道路类型</div>
-              <div class="type-box">
-                <div class="type-item">
-                  <div class="type-item-name">公路</div>
-                  <div>
-                    <div class="item-info">
-                      <div>技术等级</div>
-                      <div></div>
+    <div class="explorate" :class="{ downMode }" ref="layoutRef">
+      <h2 class="title">道路交通事故现场勘查笔录</h2>
+
+      <div class="container">
+        <div class="wrapper">
+          <div class="header">
+            <div>现场勘查</div>
+            <div>补充勘查</div>
+          </div>
+          <div class="info">
+            <div>勘查单位</div>
+            <div></div>
+          </div>
+          <div class="info">
+            <div>勘查时间</div>
+            <div></div>
+          </div>
+          <div class="info">
+            <div>事故时间</div>
+            <div></div>
+          </div>
+          <div class="time">
+            <div class="name">事故地点</div>
+            <div class="time-one">
+              <div class="road-type">
+                <div class="road-type-name">道路类型</div>
+                <div class="type-box">
+                  <div class="type-item">
+                    <div class="type-item-name">公路</div>
+                    <div class="item-msg">
+                      <div class="item-info">
+                        <div class="item-info-name">技术等级</div>
+                        <div class="item-info-box">12312</div>
+                      </div>
+                      <div class="item-info">
+                        <div class="item-info-name">行政等级</div>
+                        <div class="item-info-box">123123</div>
+                      </div>
                     </div>
-                    <div>
-                      <div>行政等级</div>
-                      <div></div>
+                  </div>
+                  <div class="type-item city">
+                    <div class="type-item-name">城市道路</div>
+                    <div class="item-msg">
+                      <div class="item-info">
+                        <!-- <div class="item-info-box">技术等级</div> -->
+                        <div class="item-info-box">12312</div>
+                      </div>
                     </div>
                   </div>
                 </div>
-                <div>
-                  <div>公路</div>
-                  <div></div>
+              </div>
+              <div class="road-type">
+                <div class="road-type-name">路口路段类型</div>
+                <div class="type-box">
+                  <div class="type-item">
+                    <div class="type-item-name">路口</div>
+                    <div class="item-msg intersection" style="height: 48px">21312312</div>
+                  </div>
+                  <div class="type-item">
+                    <div class="type-item-name">路段</div>
+                    <div class="item-msg intersection" style="height: 60px">1221312</div>
+                  </div>
+                </div>
+              </div>
+              <div class="road-info">
+                <div class="road-name">路名</div>
+                <div class="road-msg">
+                  <div class="road-name-text"></div>
+                  <div class="road-num">路号（公路）</div>
+                  <div class="road-num-text"></div>
+                </div>
+              </div>
+              <div class="road-pos">
+                <div class="road-pos-name">位置</div>
+                <div class="pos-box">
+                  <div class="pos-item">
+                    <div class="pos-item-name" style="height: 30px">卫星定位</div>
+                    <div class="pos-msg" style="height: 30px">
+                      <div class="longitude">
+                        <span>经度:</span>
+                        <div></div>
+                      </div>
+                      <div class="latitude">
+                        <span>纬度:</span>
+                        <div></div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="pos-item">
+                    <div class="pos-item-name" style="height: 54px">地点描述</div>
+                    <div class="pos-msg" style="height: 54px"></div>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="">
-              <div>道路类型</div>
-              <div></div>
-            </div>
-            <div class="">
-              <div>道路类型</div>
-              <div></div>
-            </div>
-            <div class="">
-              <div>道路类型</div>
-              <div></div>
-            </div>
 
-            <!-- <div class="time-one-name">公路</div>
+              <!-- <div class="time-one-name">公路</div>
             <div class="time-one-warp">
               <div>技术等级</div>
               <div>2</div>
               <div>行政等级</div>
               <div>4</div>
             </div> -->
+            </div>
           </div>
+          <div class="weather">
+            <div class="name">天气</div>
+            <div></div>
+          </div>
+          <div class="environment">
+            <div>
+              <p>一、事故现场道路环境</p>
+              <div class="em-info-box">
+                <div class="info-item" v-for="(i, index) in environments">
+                  <span class="info-title">{{ i.title }}</span>
+                  <div class="check-box">
+                    <div class="check-item" v-for="(j, j_index) in i.options">
+                      <!-- <ui-icon type="edit"></ui-icon> -->
+                      <span>{{ j.name }}</span>
+                    </div>
+                  </div>
+                  <div class="input-box">
+                    <input type="text" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>8</div>
+          <div>9</div>
         </div>
-        <div>6</div>
-        <div>7</div>
-        <div>8</div>
-        <div>9</div>
-      </div>
-      <!-- <table>
+        <!-- <table>
         <tr class="table-header">
           <td colspan="7">
             <div>
@@ -186,8 +250,8 @@
         </tr>
       </table> -->
 
-      <!--  -->
-      <!-- <div class="table-content">
+        <!--  -->
+        <!-- <div class="table-content">
         <div class="table-header">
           <div>现场勘查</div>
           <div>补充勘查</div>
@@ -243,8 +307,9 @@
           </div>
         </div>
       </div> -->
+      </div>
     </div>
-  </div>
+  </MainPanel>
 </template>
 
 <script setup lang="ts">
@@ -252,6 +317,8 @@ import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
 import html2canvas from 'html2canvas';
 import { downloadImage, uploadImage } from '@/store/sync';
 import Message from '@/components/base/components/message/message.vue';
+import Header from '@/components/photos/header.vue';
+import MainPanel from '@/components/main-panel/index.vue';
 const layoutRef = ref<HTMLDivElement>();
 const downMode = ref(false);
 const getLayoutImage = async () => {
@@ -265,9 +332,124 @@ const getLayoutImage = async () => {
   await downloadImage(blob, '12312.jpg');
   // return await uploadImage(blob);
 };
+const environments = ref([
+  {
+    id: 1,
+    title: '影响视线或行驶的障碍物：',
+    value: '',
+    check: '',
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 2,
+    title: '递路交通标志：',
+    value: '',
+    check: '',
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 3,
+    title: '道路交通标线：',
+    value: '',
+    check: '',
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 4,
+    title: '中央隔离设施：',
+    value: '',
+    check: '',
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 5,
+    title: '路侧防护设施：',
+    value: '',
+    check: '',
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 6,
+    title: '路面材料：',
+    value: '',
+    check: '',
+    options: [
+      { id: 1, name: '沥青' },
+      { id: 2, name: '水泥' },
+      { id: 3, name: '砂石' },
+      { id: 4, name: '土路' },
+      { id: 5, name: '其他' },
+    ],
+  },
+  {
+    id: 7,
+    title: '路面状况：',
+    value: '',
+    check: '',
+    options: [
+      { id: 1, name: '路面完好' },
+      { id: 2, name: '施工' },
+      { id: 3, name: '凹凸' },
+      { id: 4, name: '塌陷' },
+      { id: 5, name: '路障' },
+      { id: 6, name: '其他' },
+    ],
+  },
+  {
+    id: 8,
+    title: '路表状况：',
+    value: '',
+    check: '',
+    options: [
+      { id: 1, name: '干燥' },
+      { id: 2, name: '潮湿' },
+      { id: 3, name: '积水' },
+      { id: 4, name: '漫水' },
+      { id: 5, name: '冰雪' },
+      { id: 6, name: '泥泞' },
+      { id: 7, name: '其他' },
+    ],
+  },
+  {
+    id: 9,
+    title: '照明情况：',
+    value: '',
+    check: '',
+    options: [
+      { id: 1, name: '白天   夜间路灯照明' },
+      { id: 2, name: '有' },
+      { id: 3, name: '无' },
+    ],
+  },
+  {
+    id: 10,
+    title: '照明情况：',
+    value: '',
+    check: '',
+    options: [],
+  },
+]);
 </script>
 <style lang="scss" scoped>
 .explorate {
+  padding: 80px 0 0 0;
+}
+.explorate {
   color: #000;
   font-size: 20px;
   // padding: 10px 30px;
@@ -477,6 +659,48 @@ const getLayoutImage = async () => {
       }
     }
   }
+  .environment {
+    padding: 10px;
+    .em-info-box {
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 18px;
+        .check-box {
+          display: inline-block;
+          .check-item {
+            display: inline-block;
+            margin-right: 10px;
+            &:last-of-type {
+              margin-right: 0;
+            }
+          }
+        }
+        .input-box {
+          flex: 1;
+          display: inline-block;
+          border-bottom: 1px solid #000;
+          input {
+            width: 100%;
+            padding: 0 10px;
+          }
+        }
+      }
+    }
+  }
+  .weather {
+    display: grid;
+    grid-template-columns: 14% 86%;
+    grid-template-rows: repeat(1, 100%);
+    height: 35px;
+    border-bottom: 1px solid #000;
+    .name {
+      border-right: 1px solid #000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
   .time {
     display: grid;
     grid-template-columns: 14% 86%;
@@ -499,31 +723,194 @@ const getLayoutImage = async () => {
       // grid-auto-flow: row;
       // grid-template-columns: 66px;
       // grid-template-rows: repeat(4, auto);
+      .road-info {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        border-bottom: 1px solid #000;
+        .road-name {
+          width: 66px;
+          box-sizing: border-box;
+          padding: 0 10px;
+        }
+        .road-msg {
+          flex: 1;
+          border-left: 1px solid #000;
+          > div {
+            min-height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+          }
+          .road-name-text {
+            width: 55%;
+            flex: 1;
+            padding: 0 10px;
+          }
+          .road-num {
+            width: 23.8%;
+            padding: 0 10px;
+            border-left: 1px solid #000;
+            border-right: 1px solid #000;
+          }
+          .road-num-text {
+            width: 20%;
+            padding: 0 10px;
+            flex: 1;
+          }
+        }
+        > div {
+          min-height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+        }
+      }
+      .road-pos {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        .road-pos-name {
+          width: 66px;
+          padding: 0 10px;
+        }
+        .pos-box {
+          // width: 100%;
+          flex: 1;
+
+          .pos-item {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex: 1;
+            width: 100%;
+            border-left: 1px solid #000;
+            border-bottom: 1px solid #000;
+            &:last-of-type {
+              border-bottom: none;
+            }
+
+            .pos-item-name {
+              width: 120px;
+              padding: 0 10px;
+              border-right: 1px solid #000;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            .pos-msg {
+              flex: 1;
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              .longitude {
+                display: inline-block;
+                width: 50%;
+                border-right: 1px solid #000;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 0 10px;
+                > div {
+                  flex: 1;
+                  height: 30px;
+                }
+              }
+              .latitude {
+                display: inline-block;
+                width: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 0 10px;
+                > div {
+                  flex: 1;
+                  height: 30px;
+                }
+              }
+            }
+          }
+        }
+      }
       .road-type {
         border-bottom: 1px solid #000;
         display: flex;
         align-items: center;
         width: 100%;
+        .road-type-name {
+          width: 66px;
+          padding: 0 10px;
+        }
         .type-box {
-          width: 100%;
+          // width: 100%;
+          flex: 1;
+
           .type-item {
             display: flex;
             align-items: center;
             justify-content: flex-start;
             flex: 1;
             width: 100%;
+            border-left: 1px solid #000;
             border-bottom: 1px solid #000;
+            &.city {
+              .type-item-name {
+                // border-right: 1px solid #000;
+              }
+              .item-info-box {
+                border-left: 1px solid #000;
+              }
+            }
+            &:last-of-type {
+              border-bottom: none;
+            }
             .type-item-name {
               width: 66px;
+              padding: 0 10px;
+            }
+            .item-msg {
+              flex: 1;
+              &.intersection {
+                height: 48px;
+                border-left: 1px solid #000;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+              }
             }
             > div {
-              width: 100%;
-              height: 56px;
+              // width: 100%;
+              // height: 56px;
               .item-info {
                 width: 100%;
-                height: 56px;
-                line-height: 56px;
+
                 border-bottom: 1px solid #000;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                position: relative;
+                .item-info-name {
+                  width: 66px;
+                  height: 56px;
+                  // line-height: 56px;
+                  padding: 0 10px;
+                  border-right: 1px solid #000;
+                  border-left: 1px solid #000;
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                }
+                .item-info-box {
+                  flex: 1;
+                  height: 56px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                }
+                &:last-of-type {
+                  border-bottom: none;
+                }
               }
             }
           }