同步6/16

src/views/system/Visitor/visitorMain.vue

@@ -10,10 +10,10 @@
         </template>
         <el-row>
           <el-col :span="14">
-            <div class="grid grid-cols-3 grid-rows-3">
+            <div class="carinfo_body grid grid-cols-3 grid-rows-3">
               <div class="carinfo_item">
                 <div class="label">访问房屋:</div>
-                <div class="main">{{ form.houseName }}</div>
+                <div class="main housename" :title="form.houseName">{{ form.houseName }}</div>
               </div>
               <div class="carinfo_item">
                 <div class="label">访客姓名:</div>
@@ -31,7 +31,9 @@
               </div>
               <div class="carinfo_item">
                 <div class="label">访问日期:</div>
-                <div class="main">{{ form.startTime }} - {{ form.endTime }}</div>
+                <div class="main" style="text-wrap: wrap">
+                  <span>{{ form.startTime }}</span>
+                </div>
               </div>
               <div class="carinfo_item">
                 <div class="label">访问时长:</div>
@@ -50,13 +52,13 @@
               </div>
             </div>
           </el-col>
-          <el-col :span="5"></el-col>
-          <el-col :span="4">
+          <el-col :span="4"></el-col>
+          <el-col :span="5">
             <div class="flex">
-              <div>通行证:</div>
+              <div class="labelpass">通行证:</div>
               <div class="content-imageBox">
                 <i class="bordertopline"></i>
-                <el-image :src="form.url"></el-image>
+                <el-image style="height: 100%; width: 100%" :src="form.url"></el-image>
                 <i class="borderline"></i>
               </div>
             </div>
@@ -87,7 +89,6 @@ import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
 import { getVisitor } from '@/api/system/Visitor';
 import { formatTimeDiff } from '@/utils/time';
-
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
 
@@ -156,15 +157,28 @@ function back() {
       margin: 20px 0;
       border-bottom: 1px solid #ccc;
     }
+    .carinfo_body {
+      gap: 20px;
+    }
     .carinfo_item {
       margin-bottom: 40px;
       display: flex;
       align-items: center;
       .label {
-        width: 150px;
-        text-align: right;
+        width: 100px;
         font-weight: bolder;
-        margin-right: 30px;
+        text-align: left;
+        text-wrap: nowrap;
+      }
+      .main {
+        font-size: small;
+        cursor: default;
+        &.housename {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
     }
 
@@ -189,12 +203,15 @@ function back() {
 }
 
 //
-
+.labelpass {
+  width: 70px;
+}
 .content-imageBox {
-  width: 220px;
-  height: 220px;
+  width: 200px;
+  height: 200px;
   padding: 3px;
   margin-left: 20px;
+  box-sizing: border-box;
   position: relative;
   background: transparent;
 }