.role-list-item { display: flex; flex-direction: column; background-color: #f3f3f3; text-align: center; margin: 0.5rem auto; } .role-list-item > div { margin: 0.1rem; } .role-list-item > div:not(:first-of-type) { margin-top: 0; } .role-list-item .role-name { font-weight: 700; background-color: #aea; padding: 0.2rem 1rem; } .role-list-item .role-details { display: flex; flex-wrap: wrap; } .role-list-item .role-details > div { display: flex; align-items: center; } .role-list-item .role-image { background-color: #fff; } .role-list-item .role-info { flex: 1; padding: 1rem; text-align: left; min-width: 8rem; margin-left: 0.1rem; } /* 窄屏设备优化 */ @media (max-width: 768px) { .role-list-item { min-width: 100%; } .role-list-item .role-details { flex-direction: column; } }