面试

src/views/recruit/enterprise/interview/index.vue

@@ -59,7 +59,7 @@
       <div style="flex: 1;overflow: hidden;">
         <div v-if="items.length">
           <div
-            class="listItem d-flex align-center justify-space-between pa-3 mb-3"
+            class="listItem d-flex align-center pa-3 mb-3"
             v-for="(item, index) in items" :key="'item_' + index"
           >
             <div class="d-flex align-center">
@@ -70,47 +70,51 @@
                 <span class="ellipsis" style="color: var(--color-999);">{{ item?.job?.name }}</span>
               </div>
             </div>
-            <span style="min-width: 80px;text-align: center;">
-              <v-icon v-if="item?.phone" class="mx-1" size="20" color="primary">mdi-phone-outline</v-icon>
-              <span>{{ item?.phone || '-' }}</span>
-            </span>
-            <!-- 面试类型: 线下面试 -->
-            <span v-if="item.type === '1'">
-              <v-icon class="mx-3" size="20" color="primary">mdi-account-multiple-outline</v-icon>
-              <span>{{ $t('interview.offlineInterview') }}</span>
-            </span>
-            <!-- 面试类型: 线上面试 -->
-            <span class="d-flex" v-else>
-              <v-icon class="mx-3 mt-2" size="20" color="primary">mdi mdi-video-account</v-icon>
-              <span class="d-flex flex-column">
-                <span>{{ $t('interview.onlineInterview') }}</span>
-                <span style="color: var(--color-999);">腾讯会议</span>
-              </span>
-            </span>
-            <!-- 面试状态: '待接受'/'已取消' -->
-            <span :style="{ 'color': item.status !== '99' ? 'orange' :'var(--color-999)'}">
-              <v-icon size="30">mdi mdi-circle-small</v-icon>
-              <span>{{ statusList.find(e => e.value === item.status)?.label }}</span>
-            </span>
-            <span>
-              <span v-if="editStatus.indexOf(item.status)" class="font-size-15 color-primary" @click="handleActionClick(2, item)">修改面试</span>
-              <v-menu>
-                <template v-slot:activator="{ props }">
-                  <v-icon v-bind="props" class="mx-3" size="20" color="primary">mdi-dots-horizontal</v-icon>
-                </template>
-                <v-list>
-                  <v-list-item
-                    v-for="(k, index) in actionItems"
-                    :key="index"
-                    :value="index"
-                    color="primary"
-                    @click="handleActionClick(k.value, item)"
-                  >
-                    <v-list-item-title>{{ k.title }}</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-            </span>
+            <div class="d-flex align-center right-item">
+              <div style="min-width: 80px;text-align: center;">
+                <v-icon v-if="item?.phone" class="mx-1" size="20" color="primary">mdi-phone-outline</v-icon>
+                <span>{{ item?.phone || '-' }}</span>
+              </div>
+              <div>
+                <!-- 面试类型: 线下面试 -->
+                <span v-if="item.type === '1'">
+                  <v-icon class="mx-3" size="20" color="primary">mdi-account-multiple-outline</v-icon>
+                  <span>{{ $t('interview.offlineInterview') }}</span>
+                </span>
+                <!-- 面试类型: 线上面试 -->
+                <span v-else class="d-flex">
+                  <v-icon class="mx-3 mt-2" size="20" color="primary">mdi mdi-video-account</v-icon>
+                  <span class="d-flex flex-column">
+                    <span>{{ $t('interview.onlineInterview') }}</span>
+                    <span style="color: var(--color-999);">腾讯会议</span>
+                  </span>
+                </span>
+              </div>
+              <!-- 面试状态: '待接受'/'已取消' -->
+              <div :style="{ 'color': item.status !== '99' ? 'orange' :'var(--color-999)'}">
+                <v-icon size="30">mdi mdi-circle-small</v-icon>
+                <span>{{ statusList.find(e => e.value === item.status)?.label }}</span>
+              </div>
+              <div>
+                <span v-if="editStatus.indexOf(item.status)" class="font-size-15 color-primary" @click="handleActionClick(2, item)">修改面试</span>
+                <v-menu>
+                  <template v-slot:activator="{ props }">
+                    <v-icon v-bind="props" class="mx-3" size="20" color="primary">mdi-dots-horizontal</v-icon>
+                  </template>
+                  <v-list>
+                    <v-list-item
+                      v-for="(k, index) in actionItems"
+                      :key="index"
+                      :value="index"
+                      color="primary"
+                      @click="handleActionClick(k.value, item)"
+                    >
+                      <v-list-item-title>{{ k.title }}</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </div>
+            </div>
           </div>
           <CtPagination
             v-if="total > 0"
@@ -305,5 +309,11 @@ const handleCancelSubmit = async () => {
   &:hover {
     background-color: var(--color-f8);
   }
+  .right-item {
+    width: 100%;
+    div {
+      width: 25%;
+    }
+  }
 }
 </style>