menduner/src/components/Enterprise/info.vue

<template>
  <div class="info-box">
    <h4 class="mb-3">公司信息</h4>
    <div style="height: 50px;">
      <v-img class="float-left" :src="props.info.enterprise.logoUrl" :width="45" height="45"></v-img>
      <div class="ml-3 float-left">
        <p class="enterprise-name cursor-pointer" @click="handleEnterprise">{{ props.info.enterprise.anotherName }}</p>
        <v-icon color="primary" size="20">mdi-shield-check</v-icon> <!-- mdi-shield-remove -->
        <span style="color: var(--v-primary-base);font-size: 14px;">已认证</span>
      </div>
    </div>
    <div class="mt-3 border-bottom-dashed" style="font-size: 14px;">
      <div v-for="val in list" :key="val.icon" class="d-flex my-2">
        <v-icon size="20" color="#666">{{ val.icon }}</v-icon>
        <div class="info-address ml-4">{{ obj[val.label] }}</div>
      </div>
    </div>
    <div style="font-size: 12px;height: 50px; line-height: 50px">
      <span class="float-left">共<span style="color: var(--v-primary-base)">9</span>个在招职位</span>
      <span class="float-right more-position">查看全部职位<v-icon>mdi-chevron-right</v-icon></span>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'enterprise-info' })
import { ref } from 'vue'
import { dealDictData } from '@/views/recruit/position/components/dict'
const props = defineProps({
  info: {
    type: Object,
    default: () => {}
  }
})

const list = [
  { icon: 'mdi-domain', label: 'financingName' },
  { icon: 'mdi-account-multiple', label: 'scaleName' },
  { icon: 'mdi-family-tree', label: 'industryName' }
]
const obj = ref({})
const getData = async () => {
  const prise = props.info.enterprise
  obj.value = dealDictData(obj.value, prise)
}
getData()

const handleEnterprise = () => {
  window.open(`/enterprise/details/${props.info.enterprise.id}?key=briefIntroduction`)
}
</script>

<style lang="scss" scoped>
.info-box {
  height: 260px;
  background-color: #f3f3f3;
  border-radius: 8px;
  padding: 20px 15px;
}
.enterprise-name {
  width: 165px;
  font-weight: 500;
  max-width: 165px;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  &:hover {
    color: var(--v-primary-base);
  }
}
.info-address {
  width: 185px;
  font-weight: 500;
  max-width: 185px;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  &:hover {
    color: var(--v-primary-base);
  }
}
.more-position {
  color: var(--v-primary-base);
  cursor: pointer;
}
</style>