fix:英文版UI优化

src/views/scene/index.vue

@@ -3,13 +3,7 @@
     <template v-slot:header>
       <div class="photos-header">
         <div class="left">
-          <ui-icon
-            class="back-icon"
-            type="return"
-            ctrl
-            style="margin-right: 10px"
-            @click="back"
-          />
+          <ui-icon class="back-icon" type="return" ctrl style="margin-right: 10px" @click="back" />
           <span> {{ sceneTitle }} </span>
         </div>
       </div>
@@ -20,13 +14,7 @@
         <div class="info-top-left" :class="{ full: viewStatus }">
           <Scene :view-status="viewStatus">
             <template v-slot="{ childPage }">
-              <ButtonPane
-                box-shadow
-                class="back fun-ctrl"
-                :size="viewStatus ? 64 : 48"
-                @click="onScale"
-                v-if="!childPage"
-              >
+              <ButtonPane box-shadow class="back fun-ctrl" :size="viewStatus ? 64 : 48" @click="onScale" v-if="!childPage">
                 <ui-icon :type="viewStatus ? 'screen_c' : 'screen_f'" class="icon" />
               </ButtonPane>
             </template>
@@ -35,39 +23,19 @@
         <div class="info-top-right" :class="{ full: viewStatus }">
           <div class="input-item">
             <p>{{ $t("tl.t1.i1") }}:</p>
-            <input
-              id="accidentTime"
-              type="text"
-              v-model="sceneInfo.accidentTime"
-              @input="inputHandler"
-            />
+            <input id="accidentTime" type="text" v-model="sceneInfo.accidentTime" @input="inputHandler" />
           </div>
           <div class="input-item">
             <p>{{ $t("tl.t1.i2") }}:</p>
-            <input
-              id="weather"
-              type="text"
-              v-model="sceneInfo.weather"
-              @input="inputHandler"
-            />
+            <input id="weather" type="text" v-model="sceneInfo.weather" @input="inputHandler" />
           </div>
           <div class="input-item">
             <p>{{ $t("tl.t1.i3") }}:</p>
-            <input
-              id="address"
-              type="text"
-              v-model="sceneInfo.address"
-              @input="inputHandler"
-            />
+            <input id="address" type="text" v-model="sceneInfo.address" @input="inputHandler" />
           </div>
           <div class="text-item">
             <p>{{ $t("tl.t1.i4") }}:</p>
-            <textarea
-              id="accidentDesc"
-              class="info-textarea"
-              v-model="sceneInfo.accidentDesc"
-              @input="inputHandler"
-            ></textarea>
+            <textarea id="accidentDesc" class="info-textarea" v-model="sceneInfo.accidentDesc" @input="inputHandler"></textarea>
           </div>
           <div class="info-btn">
             <div
@@ -81,9 +49,7 @@
             >
               {{ $t("tl.r1") }}({{ sceneSortPhotos.length }})
             </div>
-            <div class="right-btn" @click="router.push('/accidents?back=1')">
-              {{ $t("tl.r2") }}({{ accodentSortPhotos.length }})
-            </div>
+            <div class="right-btn" @click="router.push('/accidents?back=1')">{{ $t("tl.r2") }}({{ accodentSortPhotos.length }})</div>
           </div>
         </div>
       </div>
@@ -118,11 +84,7 @@ const accodentSortPhotos = computed(() => {
 });
 const sceneSortPhotos = computed(() => roadPhotos.value);
 
-const sceneTitle = ref(
-  getQueryString("title")
-    ? decodeURIComponent(getQueryString("title"))
-    : ui18n.t("tl.t1.i5")
-);
+const sceneTitle = ref(getQueryString("title") ? decodeURIComponent(getQueryString("title")) : ui18n.t("tl.t1.i5"));
 
 const sceneInfo = ref({
   accidentTime: "",
@@ -369,6 +331,7 @@ onActivated(async () => {
       cursor: pointer;
       > span {
         margin-top: 8px;
+        text-align: center;
       }
       .iconfont {
         font-size: 24px;

src/views/tables/ask.vue

@@ -152,7 +152,7 @@
           >{{ $t("tl.t6[10]") }}{{ $t("tl.t6[23]") }}</span
         >
         <span v-else style="line-height: 40px">
-          ({{ $t("tl.t6[22]") }}<span class="through">{{ t("tl.t6[4]") }}</span
+          ({{ $t("tl.t6[22]") }}<span class="through">{{ $t("tl.t6[4]") }}</span
           >/ {{ $t("tl.t6[5]") }} {{ $t("tl.t6[10]") }}{{ $t("tl.t6[23]") }}</span
         >
         <div class="write-line" style="width: 40%">

src/views/tables/explorate-one.vue

@@ -14,11 +14,7 @@
       <div class="container">
         <div class="wrapper">
           <div class="header">
-            <div
-              class="item"
-              v-for="(i, index) in sceneTypes.options"
-              @click="checkLevel(sceneTypes, index)"
-            >
+            <div class="item" v-for="(i, index) in sceneTypes.options" @click="checkLevel(sceneTypes, index)">
               <ui-icon :type="data.explorateType == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
               <span>{{ i.title }}</span>
             </div>
@@ -27,22 +23,14 @@
             <div>{{ $t("tl.t9[1]") }}</div>
             <!-- <div class="input-box" contenteditable v-html="data.explorateCompany"></div> -->
             <div class="input-box">
-              <input
-                type="text"
-                style="text-align: center"
-                v-model="data.explorateCompany"
-              />
+              <input type="text" style="text-align: center" v-model="data.explorateCompany" />
               <div class="content-box">{{ data.explorateCompany }}</div>
             </div>
           </div>
           <div class="info">
             <div>{{ $t("tl.t9[2]") }}</div>
             <div class="input-box">
-              <input
-                type="text"
-                style="text-align: center"
-                v-model="data.explorateTime"
-              />
+              <input type="text" style="text-align: center" v-model="data.explorateTime" />
               <div class="content-box">{{ data.explorateTime }}</div>
             </div>
           </div>
@@ -65,14 +53,8 @@
                       <div class="item-info">
                         <div class="item-info-name">{{ $t("tl.t9[7]") }}</div>
                         <div class="item-info-box">
-                          <div
-                            class="item"
-                            v-for="(i, index) in technicalLevel.options"
-                            @click="checkLevel(technicalLevel, index)"
-                          >
-                            <ui-icon
-                              :type="data.technicalLevel == i.id ? 'rb_y' : 'rb_n'"
-                            ></ui-icon>
+                          <div class="item" v-for="(i, index) in technicalLevel.options" @click="checkLevel(technicalLevel, index)">
+                            <ui-icon :type="data.technicalLevel == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                             <span>{{ i.title }}</span>
                           </div>
                         </div>
@@ -80,26 +62,12 @@
                       <div class="item-info">
                         <div class="item-info-name">{{ $t("tl.t9[8]") }}</div>
                         <div class="item-info-box">
-                          <div
-                            class="item"
-                            v-for="(i, index) in administrativeLevel.options"
-                            @click="checkLevel(administrativeLevel, index)"
-                          >
-                            <ui-icon
-                              :type="
-                                data.administrativeLevel.check == i.id ? 'rb_y' : 'rb_n'
-                              "
-                            ></ui-icon>
+                          <div class="item" v-for="(i, index) in administrativeLevel.options" @click="checkLevel(administrativeLevel, index)">
+                            <ui-icon :type="data.administrativeLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                             <span>{{ i.title }}</span>
                             <div class="input-box" style="flex: 1" v-if="i.id == 5">
-                              <input
-                                type="text"
-                                v-model="data.administrativeLevel.value"
-                              />
-                              <div
-                                style="height: 24px"
-                                class="content-box left border-bottom"
-                              >
+                              <input type="text" v-model="data.administrativeLevel.value" />
+                              <div style="height: 24px" class="content-box left border-bottom">
                                 {{ data.administrativeLevel.value }}
                               </div>
                             </div>
@@ -113,14 +81,8 @@
                     <div class="item-msg">
                       <div class="item-info">
                         <div class="item-info-box" style="flex-flow: row wrap">
-                          <div
-                            class="item"
-                            v-for="(i, index) in cityRoadList.options"
-                            @click="checkLevel(cityRoadList, index)"
-                          >
-                            <ui-icon
-                              :type="data.cityRoad == i.id ? 'rb_y' : 'rb_n'"
-                            ></ui-icon>
+                          <div class="item" v-for="(i, index) in cityRoadList.options" @click="checkLevel(cityRoadList, index)">
+                            <ui-icon :type="data.cityRoad == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                             <span>{{ i.title }}</span>
                           </div>
                         </div>
@@ -134,36 +96,18 @@
                 <div class="type-box">
                   <div class="type-item">
                     <div class="type-item-name">{{ $t("tl.t9[11]") }}</div>
-                    <div
-                      class="item-msg intersection"
-                      style="min-height: 48px; flex-flow: row wrap"
-                    >
-                      <div
-                        class="item"
-                        v-for="(i, index) in roadSideList.options"
-                        @click="checkLevel(roadSideList, index)"
-                      >
-                        <ui-icon
-                          :type="data.roadSide == i.id ? 'rb_y' : 'rb_n'"
-                        ></ui-icon>
+                    <div class="item-msg intersection" style="min-height: 48px; flex-flow: row wrap">
+                      <div class="item" v-for="(i, index) in roadSideList.options" @click="checkLevel(roadSideList, index)">
+                        <ui-icon :type="data.roadSide == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                         <span>{{ i.title }}</span>
                       </div>
                     </div>
                   </div>
                   <div class="type-item">
                     <div class="type-item-name">{{ $t("tl.t9[12]") }}</div>
-                    <div
-                      class="item-msg intersection"
-                      style="min-height: 60px; flex-flow: row wrap"
-                    >
-                      <div
-                        class="item"
-                        v-for="(i, index) in roadPartList.options"
-                        @click="checkLevel(roadPartList, index)"
-                      >
-                        <ui-icon
-                          :type="data.roadPart == i.id ? 'rb_y' : 'rb_n'"
-                        ></ui-icon>
+                    <div class="item-msg intersection" style="min-height: 60px; flex-flow: row wrap">
+                      <div class="item" v-for="(i, index) in roadPartList.options" @click="checkLevel(roadPartList, index)">
+                        <ui-icon :type="data.roadPart == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                         <span>{{ i.title }}</span>
                       </div>
                     </div>
@@ -188,10 +132,10 @@
                 <div class="road-pos-name">{{ $t("tl.t9[15]") }}</div>
                 <div class="pos-box">
                   <div class="pos-item">
-                    <div class="pos-item-name" style="height: 30px">
+                    <div class="pos-item-name" style="height: 60px">
                       {{ $t("tl.t9[16]") }}
                     </div>
-                    <div class="pos-msg" style="height: 30px">
+                    <div class="pos-msg" style="height: 60px">
                       <div class="longitude">
                         <span>{{ $t("tl.t9[17]") }}:</span>
                         <div class="input-box">
@@ -225,11 +169,7 @@
             <div class="name">{{ $t("tl.t9[20]") }}</div>
 
             <div style="flex-flow: row wrap">
-              <div
-                class="item"
-                v-for="(i, index) in weatherList.options"
-                @click="checkLevel(weatherList, index)"
-              >
+              <div class="item" v-for="(i, index) in weatherList.options" @click="checkLevel(weatherList, index)">
                 <ui-icon :type="data.weather.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                 <span>{{ i.title }}</span>
                 <div class="input-box" v-if="i.id == 10">
@@ -247,32 +187,18 @@
               <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"
-                      :style="j_index == i.options.length - 1 ? 'flex:1;' : ''"
-                      v-for="(j, j_index) in i.options"
-                      @click="checkEnvironItem(j, index, j_index)"
-                    >
-                      <ui-icon
-                        :type="data.environments[index].check == j.id ? 'rb_y' : 'rb_n'"
-                      ></ui-icon>
+                  <div class="check-box" :style="i.id ==7 ? 'display:block;' : ''">
+                    <div class="check-item" :style="j_index == i.options.length - 1 ? 'flex:1;' : ''" v-for="(j, j_index) in i.options" @click="checkEnvironItem(j, index, j_index)">
+                      <ui-icon :type="data.environments[index].check == j.id ? 'rb_y' : 'rb_n'"></ui-icon>
                       <span>{{ j.name }}</span>
-                      <div
-                        class="input-box"
-                        v-if="j_index == i.options.length - 1 && i.id != 9"
-                      >
+                      <div class="input-box" v-if="j_index == i.options.length - 1 && i.id != 9">
                         <input type="text" v-model="data.environments[index].value" />
                         <div class="content-box left">
                           {{ data.environments[index].value }}
                         </div>
                       </div>
                     </div>
-                    <div
-                      class="input-box"
-                      style="flex: none; width: 80%"
-                      v-if="!i.options.length"
-                    >
+                    <div class="input-box" style="flex: none; width: 100%" v-if="!i.options.length">
                       <input type="text" v-model="data.environments[index].value" />
                       <div class="content-box left" style="height: 24px">
                         {{ data.environments[index].value }}
@@ -709,7 +635,8 @@ div {
   }
   .info {
     display: grid;
-    grid-template-columns: 14% 86%;
+    // grid-template-columns: 14% 86%;
+    grid-template-columns: 22% 78%;
     grid-template-rows: repeat(1, 100%);
     // height: 35px;
     min-height: 35px;
@@ -719,6 +646,7 @@ div {
       display: flex;
       align-items: center;
       justify-content: center;
+      text-align: center;
       &:last-of-type {
         border-right: none;
       }
@@ -744,6 +672,7 @@ div {
           .check-item {
             display: flex;
             margin-right: 10px;
+            float:left;
             &:last-of-type {
               margin-right: 0;
             }
@@ -763,7 +692,7 @@ div {
   }
   .weather {
     display: grid;
-    grid-template-columns: 14% 86%;
+    grid-template-columns: 22% 78%;
     grid-template-rows: repeat(1, 100%);
     min-height: 35px;
     border-bottom: 1px solid #000;
@@ -795,7 +724,7 @@ div {
   }
   .time {
     display: grid;
-    grid-template-columns: 14% 86%;
+    grid-template-columns: 22% 78%;
     grid-template-rows: repeat(1, auto);
     .name {
       display: flex;
@@ -821,7 +750,7 @@ div {
         justify-content: flex-start;
         border-bottom: 1px solid #000;
         .road-name {
-          width: 66px;
+          width: 100px;
           box-sizing: border-box;
           padding: 0 10px;
         }
@@ -875,7 +804,7 @@ div {
         align-items: center;
         width: 100%;
         .road-pos-name {
-          width: 66px;
+          width: 100px;
           padding: 0 10px;
         }
         .pos-box {
@@ -901,6 +830,7 @@ div {
               display: flex;
               align-items: center;
               justify-content: center;
+              text-align: center;
             }
             .pos-msg {
               flex: 1;
@@ -961,7 +891,8 @@ div {
         align-items: center;
         width: 100%;
         .road-type-name {
-          width: 66px;
+          width: 135px;
+          text-align: center;
           padding: 0 10px;
         }
         .type-box {
@@ -988,7 +919,8 @@ div {
               border-bottom: none;
             }
             .type-item-name {
-              width: 66px;
+              width: 140px;
+              text-align: center;
               padding: 0 10px;
             }
             .item-msg {
@@ -1015,15 +947,18 @@ div {
               // height: 56px;
               .item-info {
                 width: 100%;
-
+                height: 130px;
                 border-bottom: 1px solid #000;
                 display: flex;
                 align-items: center;
                 justify-content: flex-start;
                 position: relative;
+
                 .item-info-name {
-                  width: 66px;
-                  height: 56px;
+                  // width: 66px;
+                  width: 180px;
+                  text-align: center;
+                  height: 130px;
                   // line-height: 56px;
                   padding: 0 10px;
                   border-right: 1px solid #000;
@@ -1035,14 +970,15 @@ div {
                 .item-info-box {
                   flex: 1;
                   min-height: 56px;
-                  display: flex;
-                  align-items: center;
-                  justify-content: flex-start;
+                  // display: flex;
+                  // align-items: center;
+                  // justify-content: flex-start;
                   padding: 5px;
                   .item {
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-start;
+                    // display: flex;
+                    // align-items: center;
+                    // justify-content: flex-start;
+                    float: left;
                     margin-right: 2px;
                     margin-bottom: 5px;
                     &:last-of-type {

src/views/tables/explorate-two.vue

@@ -141,8 +141,8 @@
               <td rowspan="2">{{ $t("tl.t11[16]") }}</td>
               <td rowspan="2">{{ $t("tl.t11[17]") }}</td>
               <td rowspan="2">{{ $t("tl.t11[18]") }}</td>
-              <td colspan="2">{{ $t("tl.t11[19]") }}</td>
-              <td rowspan="3">{{ $t("tl.t11[20]") }}</td>
+              <td rowspan="2">{{ $t("tl.t11[19]") }}</td>
+              <td colspan="3">{{ $t("tl.t11[20]") }}</td>
             </tr>
             <tr>
               <td>{{ $t("tl.t11[21]") }}</td>

src/views/tables/extract.vue

@@ -15,7 +15,8 @@
           </td>
 
           <td width="10%">{{ $t("tl.t12[2]") }}</td>
-          <td width="8%">
+          <!-- <td width="8%"> -->
+          <td width="18%">
             <div style="white-space: normal; line-height: 24px">
               <input v-model="data.sex" />
               <div class="content-box">{{ data.sex }}</div>
@@ -66,7 +67,7 @@
         <tr>
           <td width="10%" rowspan="4" colspan="1">{{ $t("tl.t12[8]") }}</td>
           <td width="5%" rowspan="3">{{ $t("tl.t12[9]") }}</td>
-          <td colspan="3">{{ $t("tl.t12[10]") }}</td>
+          <td colspan="2">{{ $t("tl.t12[10]") }}</td>
           <td>
             <div style="white-space: normal; line-height: 24px">
               <input v-model="data.aNumber" />
@@ -74,7 +75,7 @@
             </div>
           </td>
           <td width="10%">{{ $t("tl.t12[11]") }}</td>
-          <td>
+          <td  colspan="2" width="10%">
             <div>
               <div style="white-space: normal; line-height: 24px">
                 <input v-model="data.aVolume" />
@@ -85,7 +86,7 @@
           </td>
         </tr>
         <tr>
-          <td colspan="3">{{ $t("tl.t12[12]") }}</td>
+          <td colspan="2">{{ $t("tl.t12[12]") }}</td>
           <td>
             <div style="white-space: normal; line-height: 24px">
               <input v-model="data.bNumber" />
@@ -93,7 +94,7 @@
             </div>
           </td>
           <td>{{ $t("tl.t12[11]") }}</td>
-          <td>
+          <td colspan="2">
             <div>
               <div style="white-space: normal; line-height: 24px">
                 <input v-model="data.bVolume" />
@@ -153,7 +154,7 @@
             </div>
           </td>
           <td>{{ $t("tl.t12[19]") }}</td>
-          <td colspan="2">
+          <td colspan="1">
             <div style="white-space: normal; line-height: 24px">
               <input v-model="data.witnessSign" />
               <div class="content-box">{{ data.witnessSign }}</div>

src/views/tables/identification.vue

@@ -50,13 +50,9 @@
         </tr>
       </table>
       <div class="respons">
-        <div class="name" style="width: 50px">{{ $t("tl.t13[13]") }}</div>
+        <div class="name" style="width: 160px">{{ $t("tl.t13[13]") }}</div>
         <div class="info">
-          <div
-            style="margin-bottom: 10px"
-            v-for="(i, index) in topList.options"
-            @click="checkOptions(topList, index)"
-          >
+          <div style="margin-bottom: 10px" v-for="(i, index) in topList.options" @click="checkOptions(topList, index)">
             <ui-icon :type="data.optionsOne.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
             <span>{{ i.title }}</span>
           </div>
@@ -234,9 +230,10 @@ div[contenteditable] {
       justify-content: flex-start;
       height: 40px;
       .name {
+        width:200px;
         height: 40px;
         line-height: 40px;
-        padding: 0 30px;
+        padding: 0 20px;
         border-right: 1px solid #000;
       }
       .weather {
@@ -287,7 +284,10 @@ div[contenteditable] {
       border-bottom: 1px solid #000;
 
       .name {
-        width: 50px;
+        height: 250px;
+        width: 160px;
+
+        // width: 50px;
         border-right: 1px solid #000;
         padding: 30px 10px;
         display: flex;
@@ -316,7 +316,9 @@ div[contenteditable] {
       align-items: flex-end;
       justify-content: flex-start;
       .name {
-        width: 50px;
+        height: 250px;
+        width: 160px;
+        // width: 50px;
         border-right: 1px solid #000;
         padding: 30px 10px;
         display: flex;