* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #e6eeff; width: 240px; height: 160px; padding: 3px; overflow: hidden; } #app { width: 100%; height: 100%; } .cards-grid { display: flex; flex-direction: row; gap: 2px; height: 100%; overflow: hidden; } .card { background: white; box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15); padding: 5px; text-align: center; border-top: 2px solid #3b82f6; border-radius: 1px; width: calc((100% / 5) - 1px); flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } .avatar-image { width: 25px; height: 25px; margin: 0 auto; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); background: #f0f9ff; object-fit: cover; transition: all 0.3s ease; display: block; /* 关键:移除所有边框 */ border: none !important; outline: none; box-sizing: border-box; /* 防止图片周围出现间隙 */ vertical-align: middle; flex-shrink: 0; /* 改善图片加载失败时的显示 */ background-clip: content-box; -webkit-appearance: none; appearance: none; } .card-section { display: flex; flex-direction: column; gap: 4px; } .card-label { font-size: 6px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 500; line-height: 1; } .card-school-value { font-size: 7px; color: #1f2937; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .card-name-value { font-size: 8px; color: #1f2937; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .card-divider { height: 1px; background-color: #e5e7eb; margin: 1px 0; } .card-score { font-size: 12px; color: #2563eb; font-weight: bold; line-height: 1.2; } .card-violation { font-size: 12px; color: #6366f1; font-weight: bold; line-height: 1.2; } ::-webkit-scrollbar { height: 2px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #bfdbfe; border-radius: 1px; }