<template> 
 | 
  <div class="taskDetail-company-wrapper"> 
 | 
    <div class="taskDetail-company-title-wrapper"> 
 | 
      <div class="taskDetail-company-title">{{ enterpriseName }}</div> 
 | 
      <RectRight v-if="showArrow" :size="8" class="taskDetail-company-arrow" /> 
 | 
    </div> 
 | 
    <div class="taskDetail-company-info" v-if="isReal"> 
 | 
      <img :src="IconSafe" class="safe-company-info-icon" /> 
 | 
      <div class="taskDetail-company-info-text">已认证 | {{ taskCount }}个岗位在招</div> 
 | 
    </div> 
 | 
    <div class="taskDetail-company-info" v-else> 
 | 
      <div class="taskDetail-company-info-text"> 
 | 
        <span class="danger">未认证</span> | {{ taskCount }}个岗位在招 
 | 
      </div> 
 | 
    </div> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import IconSafe from '@/assets/task/icon-safe.png'; 
 | 
import { RectRight } from '@nutui/icons-vue-taro'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'CompanyDesc', 
 | 
}); 
 | 
  
 | 
type Props = { 
 | 
  showArrow?: boolean; 
 | 
  isReal?: boolean; 
 | 
  enterpriseName?: string; 
 | 
  taskCount?: number; 
 | 
  /** 
 | 
   * TODO 缺少是否已认证 
 | 
   */ 
 | 
}; 
 | 
  
 | 
const props = withDefaults(defineProps<Props>(), { 
 | 
  showArrow: true, 
 | 
  taskCount: 0, 
 | 
}); 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.taskDetail-company-wrapper { 
 | 
  padding: 28px 20px; 
 | 
  background: #f9fbff; 
 | 
  border-radius: 8px; 
 | 
  
 | 
  .taskDetail-company-title-wrapper { 
 | 
    display: flex; 
 | 
    align-items: center; 
 | 
    margin-bottom: 24px; 
 | 
  
 | 
    .taskDetail-company-title { 
 | 
      font-weight: 500; 
 | 
      font-size: 28px; 
 | 
      color: boleGetCssVar('text-color', 'primary'); 
 | 
      line-height: 42px; 
 | 
      flex: 1; 
 | 
      min-width: 0; 
 | 
      @include ellipsis; 
 | 
    } 
 | 
  
 | 
    .taskDetail-company-arrow { 
 | 
      color: boleGetCssVar('text-color', 'secondary'); 
 | 
      margin-left: 10px; 
 | 
    } 
 | 
  } 
 | 
  
 | 
  .taskDetail-company-info { 
 | 
    display: flex; 
 | 
    align-items: center; 
 | 
  
 | 
    .safe-company-info-icon { 
 | 
      width: 24px; 
 | 
      height: 24px; 
 | 
      margin-right: 6px; 
 | 
    } 
 | 
  
 | 
    .taskDetail-company-info-text { 
 | 
      font-size: 24px; 
 | 
      color: boleGetCssVar('text-color', 'regular'); 
 | 
      line-height: 36px; 
 | 
      flex: 1; 
 | 
      min-width: 0; 
 | 
      @include ellipsis; 
 | 
  
 | 
      .danger { 
 | 
        color: boleGetCssVar('color', 'danger'); 
 | 
        display: inline; 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</style> 
 |