| <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> |