提交
This commit is contained in:
zlwu committed
1 parent
38a1234dcb
commit
6e6be1ecbe
1 file changed
+143
-51
@@ -136,64 +136,97 @@
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 空状态插槽 -->
|
||||
<template #empty>
|
||||
<div class="empty-container">
|
||||
<el-empty :image-size="120" description="暂无学生数据">
|
||||
<template #image>
|
||||
<el-icon size="120" color="#c0c4cc">
|
||||
<Picture />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #description>
|
||||
<span class="empty-description">暂无学生数据</span>
|
||||
</template>
|
||||
</el-empty>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 卡片视图 -->
|
||||
<div v-else class="card-view-container">
|
||||
<div class="card-scroll-container">
|
||||
<el-row :gutter="16">
|
||||
<el-col v-for="item in studentList" :key="item.id" :span="6" class="mb-6">
|
||||
<el-card shadow="hover" class="student-card" @dblclick="handleDetail(item)">
|
||||
<div class="card-header">
|
||||
<div class="student-photo">
|
||||
<el-avatar
|
||||
:size="100"
|
||||
:src="item.photoUrl"
|
||||
:icon="!item.photoUrl ? (item.gender === '0' ? 'Male' : 'Female') : undefined"
|
||||
:class="{
|
||||
'male-placeholder': !item.photoUrl && item.gender === '0',
|
||||
'female-placeholder': !item.photoUrl && item.gender === '1'
|
||||
}"
|
||||
>
|
||||
<template v-if="!item.photoUrl">
|
||||
<div
|
||||
class="no-photo-placeholder"
|
||||
:class="{ 'male-placeholder': item.gender === '0', 'female-placeholder': item.gender === '1' }"
|
||||
>
|
||||
<el-icon size="96" small :color="item.gender === '0' ? '#409eff' : '#e91e63'">
|
||||
<Male v-if="item.gender === '0'" />
|
||||
<Female v-else />
|
||||
</el-icon>
|
||||
<span class="no-photo-text">{{ item.gender === '0' ? '男生' : '女生' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-avatar>
|
||||
<div v-loading="loading" class="card-scroll-container">
|
||||
<!-- 有数据时显示卡片列表 -->
|
||||
<div v-if="studentList && studentList.length > 0">
|
||||
<el-row :gutter="16">
|
||||
<el-col v-for="item in studentList" :key="item.id" :span="6" class="mb-6">
|
||||
<el-card shadow="hover" class="student-card" @dblclick="handleDetail(item)">
|
||||
<div class="card-header">
|
||||
<div class="student-photo">
|
||||
<el-avatar
|
||||
:size="100"
|
||||
:src="item.photoUrl"
|
||||
:icon="!item.photoUrl ? (item.gender === '0' ? 'Male' : 'Female') : undefined"
|
||||
:class="{
|
||||
'male-placeholder': !item.photoUrl && item.gender === '0',
|
||||
'female-placeholder': !item.photoUrl && item.gender === '1'
|
||||
}"
|
||||
>
|
||||
<template v-if="!item.photoUrl">
|
||||
<div
|
||||
class="no-photo-placeholder"
|
||||
:class="{ 'male-placeholder': item.gender === '0', 'female-placeholder': item.gender === '1' }"
|
||||
>
|
||||
<el-icon size="96" small :color="item.gender === '0' ? '#409eff' : '#e91e63'">
|
||||
<Male v-if="item.gender === '0'" />
|
||||
<Female v-else />
|
||||
</el-icon>
|
||||
<span class="no-photo-text">{{ item.gender === '0' ? '男生' : '女生' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="student-info">
|
||||
<h3 class="student-name">{{ item.name }}</h3>
|
||||
<p class="student-no">{{ item.studentNo }}</p>
|
||||
<el-tag :type="getStatusType(item.studentStatus)" size="small">
|
||||
{{ getStudentStatusLabel(item.studentStatus) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="student-info">
|
||||
<h3 class="student-name">{{ item.name }}</h3>
|
||||
<p class="student-no">{{ item.studentNo }}</p>
|
||||
<el-tag :type="getStatusType(item.studentStatus)" size="small">
|
||||
{{ getStudentStatusLabel(item.studentStatus) }}
|
||||
</el-tag>
|
||||
<div class="card-content">
|
||||
<p><strong>院系：</strong>{{ item.collegeName || '未设置' }}</p>
|
||||
<p><strong>专业：</strong>{{ item.majorName || '未设置' }}</p>
|
||||
<p><strong>班级：</strong>{{ item.className || '未设置' }}</p>
|
||||
<p><strong>手机：</strong>{{ item.phone || '未设置' }}</p>
|
||||
<p><strong>入学年份：</strong>{{ item.enrollmentYear || '未设置' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p><strong>院系：</strong>{{ item.collegeName || '未设置' }}</p>
|
||||
<p><strong>专业：</strong>{{ item.majorName || '未设置' }}</p>
|
||||
<p><strong>班级：</strong>{{ item.className || '未设置' }}</p>
|
||||
<p><strong>手机：</strong>{{ item.phone || '未设置' }}</p>
|
||||
<p><strong>入学年份：</strong>{{ item.enrollmentYear || '未设置' }}</p>
|
||||
</div>
|
||||
<div class="card-hint">
|
||||
<el-text type="primary" size="small">
|
||||
<el-icon class="mr-1"><View /></el-icon>
|
||||
双击查看详情
|
||||
</el-text>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="card-hint">
|
||||
<el-text type="primary" size="small">
|
||||
<el-icon class="mr-1"><View /></el-icon>
|
||||
双击查看详情
|
||||
</el-text>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 无数据时显示空状态 -->
|
||||
<div v-else-if="!loading" class="card-empty-container">
|
||||
<el-empty :image-size="160" description="暂无学生数据">
|
||||
<template #image>
|
||||
<el-icon size="160" color="#c0c4cc">
|
||||
<Picture />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #description>
|
||||
<span class="empty-description">暂无学生数据</span>
|
||||
</template>
|
||||
</el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片视图分页 -->
|
||||
@@ -1229,6 +1262,48 @@ onMounted(() => {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 空状态容器样式 */
|
||||
.empty-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.card-empty-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.empty-description {
|
||||
color: #909399;
|
||||
font-size: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card-empty-container .empty-description {
|
||||
color: #909399;
|
||||
font-size: 18px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 空状态图标和文字的间距优化 */
|
||||
.empty-container :deep(.el-empty__description),
|
||||
.card-empty-container :deep(.el-empty__description) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.empty-container :deep(.el-empty__image),
|
||||
.card-empty-container :deep(.el-empty__image) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 1200px) {
|
||||
.left-panel {
|
||||
@@ -1293,5 +1368,22 @@ onMounted(() => {
|
||||
.card-content {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 移动端空状态样式调整 */
|
||||
.empty-container,
|
||||
.card-empty-container {
|
||||
min-height: 300px;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.empty-description,
|
||||
.card-empty-container .empty-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-container :deep(.el-empty__image) .el-icon,
|
||||
.card-empty-container :deep(.el-empty__image) .el-icon {
|
||||
font-size: 100px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user