.profile-header { height: 220px; display: flex; align-items: center; background: linear-gradient(135deg, #f3f3a8, rgb(199, 151, 199)); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 16px; } .avatar-container { margin-right: 16px; width: 100px; /* 头像大小 */ height: 100px; /* 头像大小 */ border-radius: 50%; /* 圆形头像 */ background-size: cover; /* 图片大小 */ } .username { margin: 0; font-size: 2.3em; /* 用户名字体大小 */ color: black; font-weight: bold; } .stats { display: flex; justify-content: space-between; font-size: 1.1em; /* 统计信息字体大小 */ margin-top: 4px; color:black } .marginRight{ margin-right: 25px; } .grey{ color: grey; margin-left: 5px; } .icon-container { background-color: #ffffff; // 背景色 border: 1px solid #e0e0e0; // 边框 border-radius: 25px; // 圆角 padding: 16px; /* 内边距 */ margin: 16px; /* 外边距 */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); // 加强阴影效果 transition: box-shadow 0.3s, transform 0.3s; // 平滑过渡效果 } .icon-container1{ background-color: #ffffff; // 背景色 border: 1px solid #e0e0e0; // 边框 border-radius: 25px; // 圆角 padding: 10px 16px; /* 内边距 */ margin: 16px; /* 外边距 */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); // 加强阴影效果 transition: box-shadow 0.3s, transform 0.3s; // 平滑过渡效果 } .icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); /* 5列布局 */ gap: 16px; /* 每个图像之间的间距 */ } .icon-item { text-align: center; /* 文字居中 */ border-radius: 10px; /* 边框圆角 */ padding: 8px; /* 内边距 */ background-color: white; /* 图标项背景色为白色 */ } .icon-item p { margin: 4px 0 0 0; /* 减小图标与文字之间的距离 */ } .bottem { margin-bottom: 2px; } .row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; // 行内边距 border-bottom: 1px solid #e0e0e0; // 行分隔线 } .row:last-child { border-bottom: none; // 最后一行不显示分隔线 } .info-item { display: flex; align-items: center; margin-left: 12px; } .info-icon { color: black; // 图标颜色 font-size: 24px; // 图标大小 margin-right: 12px; // 图标与文本之间的间距 } .arrow-icon { color: grey; // 箭头颜色 font-size: 25px; // 箭头大小 } .fontSize{ font-size: 19px; font-family: '微软雅黑'; }