|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div class="mine-curriculum-intention-job-content"> | 
|---|
|  |  |  | <div class="mine-curriculum-intention-job-item">客房服务员</div> | 
|---|
|  |  |  | <div class="mine-curriculum-intention-job-item">客房服务员</div> | 
|---|
|  |  |  | <div class="mine-curriculum-intention-job-item">客房服务员</div> | 
|---|
|  |  |  | <div class="mine-curriculum-intention-job-item">客房服务员</div> | 
|---|
|  |  |  | <div v-for="item in jobTagList" :key="item" class="mine-curriculum-intention-job-item"> | 
|---|
|  |  |  | {{ item }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | name: 'JobTagList', | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // type Props = {}; | 
|---|
|  |  |  | type Props = { | 
|---|
|  |  |  | jobTagList?: string[]; | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // const props = withDefaults(defineProps<Props>(), {}); | 
|---|
|  |  |  | const props = withDefaults(defineProps<Props>(), {}); | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss"> | 
|---|
|  |  |  | @import '@/styles/common.scss'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .mine-curriculum-intention-job-content { | 
|---|
|  |  |  | display: inline-flex; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | gap: 16px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .mine-curriculum-intention-job-item { | 
|---|
|  |  |  | font-size: 20px; | 
|---|
|  |  |  | color: boleGetCssVar('color', 'primary'); | 
|---|
|  |  |  | padding: 6px 16px; | 
|---|
|  |  |  | background-color: #edf2ff; | 
|---|
|  |  |  | border-radius: 4px; | 
|---|
|  |  |  | display: inline-flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|