提交阶段性预览

src/views/system/Visitor/visitorMain.vue

@@ -5,7 +5,7 @@
       <el-card>
         <template #header>
           <div class="card-header">
-            <span>车位信息</span>
+            <span>基本信息</span>
           </div>
         </template>
         <el-row>
@@ -37,13 +37,13 @@
                 <div class="label">访问时长:</div>
                 <div class="main">{{ formatTimeDiff(form.startTime, form.endTime) }}</div>
               </div>
-              <div class="carinfo_item">
+              <!-- <div class="carinfo_item">
                 <div class="label">访问业主:</div>
                 <div class="main flex align-items-center">
                   <div>去丽丽</div>
                   <div class="ml-20px color-blue cursor-pointer">住户详情</div>
                 </div>
-              </div>
+              </div> -->
               <div class="carinfo_item">
                 <div class="label">提交时间:</div>
                 <div class="main">{{ form.startTime }}</div>
@@ -53,10 +53,11 @@
           <el-col :span="5"></el-col>
           <el-col :span="4">
             <div class="flex">
-              <div>通行证</div>
+              <div>通行证:</div>
               <div class="content-imageBox">
-                <i></i>
-                <el-image :src="splitImages(form.url)"></el-image>
+                <i class="bordertopline"></i>
+                <el-image :src="form.url"></el-image>
+                <i class="borderline"></i>
               </div>
             </div>
           </el-col>
@@ -67,8 +68,8 @@
         <el-row>
           <el-col :span="8">
             <el-table :data="tableData" style="width: 100%">
-              <el-table-column align="center" prop="date" label="开门位置" />
-              <el-table-column align="center" prop="name" label="开门时间" />
+              <el-table-column align="center" prop="name" label="开门位置" />
+              <el-table-column align="center" prop="date" label="开门时间" />
             </el-table>
           </el-col>
         </el-row>
@@ -86,21 +87,20 @@ import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
 import { getVisitor } from '@/api/system/Visitor';
 import { formatTimeDiff } from '@/utils/time';
-import { splitImages } from '@/utils';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
 
-const tableData = [
+const tableData = ref([
   {
-    date: '西大门',
-    name: '2026-04-13 13:38:11'
+    date: '',
+    name: '西大门'
   },
   {
-    date: '西大门',
-    name: '2026-05-30 02:31:16'
+    date: '',
+    name: '西大门'
   }
-];
+]);
 
 const userid = ref(null);
 const route = useRoute();
@@ -129,6 +129,8 @@ function init() {
         ...form.value,
         ...res.data
       };
+      tableData.value[0].date = form.value.startTime;
+      tableData.value[1].date = form.value.endTime;
     });
   }
 }
@@ -189,26 +191,19 @@ function back() {
 //
 
 .content-imageBox {
-  width: 200px;
-  height: 200px;
+  width: 220px;
+  height: 220px;
+  padding: 3px;
+  margin-left: 20px;
   position: relative;
   background: transparent;
-
-  i {
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
 }
 
 /* 四个角 */
-.content-imageBox ::before,
-.content-imageBox ::after,
-.content-imageBox i::before,
-.content-imageBox i::after {
+.content-imageBox i.borderline::before,
+.content-imageBox i.borderline::after,
+.content-imageBox i.bordertopline::before,
+.content-imageBox i.bordertopline::after {
   content: '';
   position: absolute;
   width: 20px; /* 角的大小 */
@@ -219,7 +214,7 @@ function back() {
 }
 
 /* 左上角 */
-.content-imageBox ::before {
+.content-imageBox i.borderline::before {
   top: 0;
   left: 0;
   border-right: none;
@@ -227,7 +222,7 @@ function back() {
 }
 
 /* 右上角 */
-.content-imageBox ::after {
+.content-imageBox i.borderline::after {
   top: 0;
   right: 0;
   border-left: none;
@@ -235,7 +230,7 @@ function back() {
 }
 
 /* 左下角 */
-.content-imageBox i::before {
+.content-imageBox i.bordertopline::before {
   bottom: 0;
   left: 0;
   border-right: none;
@@ -243,7 +238,7 @@ function back() {
 }
 
 /* 右下角 */
-.content-imageBox i::after {
+.content-imageBox i.bordertopline::after {
   bottom: 0;
   right: 0;
   border-left: none;