108 lines
2.8 KiB
Vue
108 lines
2.8 KiB
Vue
<template>
|
||
<!-- 方案1: 姓名用 tag，工号普通文本 -->
|
||
<div v-if="variant === 'tag-name'" class="teacher-name-no">
|
||
<el-tag size="small" type="primary" effect="plain">{{ name || '-' }}</el-tag>
|
||
<span class="separator">/</span>
|
||
<span class="no">{{ no || '-' }}</span>
|
||
</div>
|
||
|
||
<!-- 方案2: 工号用 tag，姓名普通文本（推荐） -->
|
||
<div v-else-if="variant === 'tag-no'" class="teacher-name-no">
|
||
<span class="name">{{ name || '-' }}</span>
|
||
<span class="separator">/</span>
|
||
<el-tag size="small" type="primary" effect="plain">{{ no || '-' }}</el-tag>
|
||
</div>
|
||
|
||
<!-- 方案3: 姓名和工号都用 tag -->
|
||
<div v-else-if="variant === 'tag-both'" class="teacher-name-no">
|
||
<el-tag size="small" type="primary" effect="plain">{{ name || '-' }}</el-tag>
|
||
<span class="separator">/</span>
|
||
<el-tag size="small" type="info" effect="plain">{{ no || '-' }}</el-tag>
|
||
</div>
|
||
|
||
<!-- 方案4: 姓名用 tag（实心），工号普通文本 -->
|
||
<div v-else-if="variant === 'tag-name-solid'" class="teacher-name-no">
|
||
<el-tag size="small" type="primary">{{ name || '-' }}</el-tag>
|
||
<span class="separator">/</span>
|
||
<span class="no">{{ no || '-' }}</span>
|
||
</div>
|
||
|
||
<!-- 方案5: 姓名用彩色背景，工号普通文本 -->
|
||
<div v-else-if="variant === 'badge-name'" class="teacher-name-no">
|
||
<span class="name-badge">{{ name || '-' }}</span>
|
||
<span class="separator">/</span>
|
||
<span class="no">{{ no || '-' }}</span>
|
||
</div>
|
||
|
||
<!-- 默认方案: 姓名普通文本，工号轻量徽章（推荐，与页面协调） -->
|
||
<div v-else class="teacher-name-no">
|
||
<span class="name">{{ name || '-' }}</span>
|
||
<span class="separator">/</span>
|
||
<span class="no-badge">{{ no || '-' }}</span>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
interface Props {
|
||
name?: string;
|
||
no?: string;
|
||
variant?: 'default' | 'tag-name' | 'tag-no' | 'tag-both' | 'tag-name-solid' | 'badge-name';
|
||
}
|
||
|
||
withDefaults(defineProps<Props>(), {
|
||
variant: 'default'
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.teacher-name-no {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.name {
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
|
||
.separator {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
.no {
|
||
font-size: 12px;
|
||
color: #606266;
|
||
}
|
||
|
||
.no-primary {
|
||
font-size: 12px;
|
||
color: var(--el-color-primary, #667eea);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.no-badge {
|
||
display: inline-block;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
background: var(--el-color-primary-light-9, #ecf5ff);
|
||
color: var(--el-color-primary, #667eea);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.name-badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
background: var(--el-color-primary-light-9, #ecf5ff);
|
||
color: var(--el-color-primary, #667eea);
|
||
}
|
||
</style>
|
||
|