看过我展示调整

src/components/Position/longStrip.vue

@@ -18,7 +18,7 @@
         <div class="job-info">
           <div class="job-name cursor-pointer">
             <span class="mr-3 info-name">{{ val.job.name }}</span>
-            <span>[{{ val.job.areaName }}]</span>
+            <span v-if="val?.job?.areaName">[{{ val.job.areaName }}]</span>
           </div>
           <div class="job-other">
             <span class="salary">{{ val.job.payFrom }}-{{ val.job.payTo }}/{{ val.job.payName }}</span>

src/views/recruit/personal/PersonalCenter/components/seenMe.vue

@@ -1,30 +1,25 @@
 <template>
   <div>
     <div v-if="items.length" class="mt-3">
-      <div class="sub-li mb-3" v-for="item in items" :key="item.id" @mouseenter="item.active = true" @mouseleave="item.active = false">
-        <div class="company-info-top" @click="handleClickEnterprise(item, 'briefIntroduction')">
-          <div class="company-info">
-            <div class="float-left mr-5">
-              <v-img :src="item.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" :alt="item.enterprise.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
+      <div class="positionItem" v-for="(item, index) in items" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
+        <div class="position-and-company">
+          <div class="position">
+            <div class="float-left">
+              <v-img :src="item?.contact.avatar || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" :width="40" style="height: 40px;border-radius: 4px;"/>
             </div>
-            <h3 :class="{'default-active': item.active }">{{ item.enterprise.anotherName }}</h3>
-            <p>{{ item.enterprise.financingName }}<span class="mx-2">|</span>{{ item.enterprise.industryName }}<span class="mx-2">|</span>{{ item.enterprise.scaleName }}</p>
-          </div>
-        </div>
-        <div class="company-info-bottom">
-          <div class="chipBox">
-            <div class="d-inline-block" v-for="(val, i) in item.enterprise.welfareList" :key="i">
-              <span>{{ val }}</span>
-              <span class="mx-1" v-if="i !== item.enterprise.welfareList.length - 1">|</span>
+            <div class="company-info">
+              <h3 :class="{'default-active': item.active }" class="title1">{{ item.contact.name }}</h3>
+              <p class="mt-2">{{ item?.post?.nameCn }}</p>
             </div>
           </div>
-          <div class="footer-right">
-            <v-avatar size="x-small" :image="item.contact.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
-            <span class="mx-2 textColor666">
-              {{ item.contact.name }}
-              <span v-if="item?.contact?.name && item?.post?.nameCn">|</span>
-              {{ item?.post?.nameCn }}
-            </span>
+          <div class="company" @click="handleEnterprise(item)">
+            <div class="float-left">
+              <v-img :src="item?.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" :alt="item.enterprise.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
+            </div>
+            <div class="company-info">
+              <h3 :class="{'default-active': item.active }" class="title1 cursor-pointer">{{ item.enterprise.anotherName }}</h3>
+              <p class="mt-2">{{ item.enterprise.financingName }}<span class="mx-2">|</span>{{ item.enterprise.scaleName }}<span class="mx-2">|</span>{{ item.enterprise.industryName }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -65,86 +60,66 @@ const getData = async () => {
 }
 getData()
 
-const handleClickEnterprise = (item, key) => {
-  window.open(`/recruit/personal/company/details/${item.enterprise.id}?key=${key}`)
+const handleChangePage = (e) => {
+  page.value.pageNo = e
+  getData()
+}
+
+const handleEnterprise = (item) => {
+  const id = item.enterprise.id
+  if (!id) return
+  window.open(`/recruit/personal/company/details/${id}?key=briefIntroduction`)
 }
 
 </script>
 
 <style scoped lang="scss">
-.sub-li {
+.title1 {
+  color: var(--color-666);
   position: relative;
-  height: 130px;
-  border-radius: 12px;
-  padding: 0;
+  max-width: 200px;
+  margin-right: 8px;
   overflow: hidden;
-  transition: all .2s linear;
-  background-color: #fff;
-  cursor: pointer;
-  &:nth-child(4n) {
-    margin-right: 0;
-  }
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
   &:hover {
-    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+    color: var(--v-primary-base);
   }
 }
-.textColor666 { 
-  color: var(--color-666);
-  font-size: 14px;
+.company {
+  flex: 1;
+  display: flex;
+  justify-content: end;
 }
 .company-info {
   float: left;
   margin-left: 16px;
-  width: 282px;
-}
-.company-info-top {
-  display: flex;
-  height: 76px;
-  padding: 16px 20px;
-  overflow: hidden;
-  justify-content: space-between;
-}
-.company-info h3 {
-  height: 22px;
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--color-222);
-  line-height: 22px;
-  margin: 0 0 4px 0;
-  padding: 0;
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 .company-info p {
   height: 18px;
   font-size: 13px;
   font-weight: 400;
   color: var(--color-999);
-  line-height: 18px;
 }
-.company-info-bottom {
-  display: flex;
-  width: 100%;
-  padding: 16px 20px;
-  justify-content: space-between;
-  background-color: #f8fcfb;
-  .chipBox {
-    width: 70%;
-    min-width: 70%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 13px; 
-    color: var(--color-999);
+.textColor666 { color: var(--color-666); }
+.positionItem {
+  margin-bottom: 12px;
+  border-radius: 12px;
+  padding: 0;
+  overflow: hidden;
+  transition: all .2s linear;
+  background-color: #fff;
+  &:hover {
+    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
   }
-  .position {
-    color: var(--color-666);
-    font-size: 14px;
-    cursor: pointer;
-    &:hover {
-      color: var(--v-primary-base);
+  .position-and-company {
+    display: flex;
+    padding: 16px 20px;
+    width: 100%;
+    .position {
+      width: 484px;
+      padding-right: 12px;
     }
   }
 }