提交修改

web/src/views/xg/xsjcxx/stuRoster/index.vue

@@ -147,7 +147,28 @@
                   <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 || '/src/assets/images/profile.jpg'" />
+                        <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>
@@ -227,7 +248,7 @@
 import { ref, reactive, toRefs, watchEffect, onMounted, computed } from 'vue';
 import ElMessage from 'element-plus/es/components/message/index';
 import ElMessageBox from 'element-plus/es/components/message-box/index';
-import { Search, Refresh, Setting, Download, List, Grid, View } from '@element-plus/icons-vue';
+import { Search, Refresh, Setting, Download, List, Grid, View, Picture, Male, Female } from '@element-plus/icons-vue';
 import AdvancedSearchDialog from './components/AdvancedSearchDialog.vue';
 import StudentDetailDialog from './components/StudentDetailDialog.vue';
 import api from '@/api/xg/xsjcxx/stuRoster/index';
@@ -881,6 +902,66 @@ onMounted(() => {
   vertical-align: middle;
 }
 
+/* 暂无图片占位符样式 */
+.no-photo-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background-color: #f5f7fa !important;
+  border-radius: 50%;
+  color: #c0c4cc;
+  transition: all 0.3s ease;
+}
+
+/* 男生占位符样式 */
+.male-placeholder {
+  background: #e6f3ff !important;
+  border: none !important;
+}
+
+/* 女生占位符样式 */
+.female-placeholder {
+  background: #fce4ec !important;
+  border: none !important;
+}
+
+/* 覆盖el-avatar的默认背景色 - 使用更高权重 */
+.student-photo .el-avatar.male-placeholder {
+  background: #e6f3ff !important;
+}
+
+.student-photo .el-avatar.female-placeholder {
+  background: #fce4ec !important;
+}
+
+/* 更高级别的CSS权重覆盖 */
+.student-card .student-photo .el-avatar.male-placeholder {
+  background: #e6f3ff !important;
+}
+
+.student-card .student-photo .el-avatar.female-placeholder {
+  background: #fce4ec !important;
+}
+
+/* 最高级别的CSS权重覆盖 */
+.card-view-container .student-card .student-photo .el-avatar.male-placeholder {
+  background: #e6f3ff !important;
+}
+
+.card-view-container .student-card .student-photo .el-avatar.female-placeholder {
+  background: #fce4ec !important;
+}
+
+.no-photo-text {
+  font-size: 14px;
+  margin-top: 6px;
+  line-height: 1;
+  font-weight: 500;
+}
+
 /* 响应式布局 */
 @media (max-width: 1200px) {
   .left-panel {
@@ -918,6 +999,26 @@ onMounted(() => {
     height: 80px !important;
   }
 
+  /* 移动端头像背景色覆盖 */
+  .student-photo .el-avatar.male-placeholder {
+    background: #e6f3ff !important;
+  }
+
+  .student-photo .el-avatar.female-placeholder {
+    background: #fce4ec !important;
+  }
+
+  /* 移动端图标大小调整 */
+  .student-photo .el-avatar .no-photo-placeholder .el-icon {
+    font-size: 36px !important;
+  }
+
+  /* 移动端文字大小调整 */
+  .student-photo .el-avatar .no-photo-placeholder .no-photo-text {
+    font-size: 12px !important;
+    margin-top: 4px !important;
+  }
+
   .student-name {
     font-size: 16px;
   }