福利标签

src/components/Enterprise/components/introduction.vue

@@ -13,9 +13,9 @@
     <v-divider class="my-3"></v-divider>
     <div>
       <h4>公司相册</h4>
-      <v-slide-group :show-arrows="true" class="mt-3">
+      <v-slide-group :show-arrows="true" class="mt-3 img-box">
         <v-slide-group-item v-for="val in props.info.enterprise.albumList" :key="val">
-          <v-img class="mr-3" width="250" height="150" :src="val" cover rounded></v-img>
+          <v-img class="mr-3" width="200" height="120" :src="val" cover rounded></v-img>
         </v-slide-group-item>
       </v-slide-group>
     </div>

src/components/Enterprise/details.vue

@@ -2,13 +2,13 @@
   <div class="default-width banner px-6">
     <div class="banner-title" v-if="Object.keys(info).length">
       <div class="float-left d-flex align-center">
-        <v-img width="60" height="60" src="https://img.bosszhipin.com/beijin/upload/com/workfeel/20230717/7bf6f160950405e9fc11e7a96d11653d52ec81818272dd47f295e2d75f5f151de5ea2c19108052a3.png"></v-img>
+        <v-img width="60" height="60" :src="info.enterprise.logoUrl"></v-img>
         <div class="ml-4">
           <div class="contact-name">
             {{ info.enterprise.name }}
             <v-icon color="primary" size="24">mdi-shield-check</v-icon>
           </div>
-          <div class="contact-info">{{ info.business.type }} · 100-499人 · 科技推广与应用服务业</div>
+          <div class="contact-info">{{ info.business.type }} · {{ info.scaleName }} · {{ info.industryName }}</div>
         </div>
       </div>
       <div class="float-right d-flex">
@@ -33,9 +33,12 @@
         </div>
         <div class="content-right">
           <div class="welfare">
-            <h4>公司福利</h4>
-            <div class="mt-3 welfare-tags">
-              <v-chip size="small" label v-for="(k, i) in info.enterprise.welfareList" :key="i" class="mr-1 mb-2" color="primary">{{ k }}</v-chip>
+            <h4>工作时间及福利</h4>
+            <div class="my-3" style="color: #777;font-size: 14px;">
+              <v-icon size="17" color="#ccc" class="mr-2">mdi-clock</v-icon>{{ info.enterprise.workTime }}
+            </div>
+            <div class="welfare-tags">
+              <v-chip size="small" label v-for="(k, i) in info.enterprise.welfareList.slice(0, 6)" :key="i" class="mb-2 welfare-tags-item ellipsis" color="primary">{{ k }}</v-chip>
             </div>
           </div>
           <div class="welfare my-3">
@@ -76,6 +79,8 @@ import { ref } from 'vue'
 import EnterpriseIntroduction from './components/introduction.vue'
 import recruitmentPositions from './components/positions.vue'
 import { getEnterpriseDetails } from '@/api/enterprise'
+import { timesTampChange } from '@/utils/date'
+import { dealDictData } from '@/views/recruit/position/components/dict.js'
 
 const props = defineProps({
   id: {
@@ -91,8 +96,11 @@ const getDetails = async () => {
   const id = Number(props.id)
   if (!id) return
   const data = await getEnterpriseDetails({ id })
-  info.value = data
-  console.log(info.value, 'value')
+  // 成立日期
+  const time = timesTampChange(data.business.establishmentTime)
+  data.business.establishmentTime = time.slice(0, 10)
+
+  info.value = { ...data, ...dealDictData({}, data.enterprise) }
 }
 getDetails()
 
@@ -170,9 +178,23 @@ const recruitmentSpecialist = [
   padding: 12px;
 }
 .welfare-tags {
-  width: 100%;
+  display: flex;
+  width: 242px;
+  flex-wrap: wrap;
   height: 100px;
   overflow: hidden;
+  text-align: center;
+}
+.welfare-tags-item {
+  display: block;
+  width: 117px;
+  max-width: 117px;
+  text-align: center;
+  line-height: 26px;
+  margin-right: 8px;
+  &:nth-child(2n) {
+    margin-right: 0;
+  }
 }
 .business-item {
   font-size: 14px;