.container {
	display: flex;
	flex-wrap: wrap;
	/* 允许换行 */
	margin: 10px 0 0 10px
}


.user-card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	width: calc(50% - 10px);
	/* 每个卡片宽度为50%减去间距 */
	max-width: 300px;
	/* 设置最大宽度为300px */
	padding: 10px;
	margin: 0 10px 10px 0;
	transition: transform 0.2s;
	display: flex;
	flex-direction: column;
	/* 垂直排列内容 */
}

.user-image {
	text-align: center;
	margin-bottom: 10px;
	position: relative;border-radius: 8px;overflow: hidden;
}
.user-image img{width: 100%;}

.green-dot {
	position: absolute;
	bottom: 0;
	right: -1px;
	width: 12px;
	height: 12px;
	background-color: green;
	border-radius: 50%;
	border: 2px solid white;
}

.user-info {
	margin-bottom: 10px;
}

.user-info img {
	width: 15px;
	/* 图标的宽度 */
	height: 15px;
	/* 图标的高度 */
	vertical-align: middle;
	margin-right: 5px;
}

.user-description {
	margin-bottom: 10px;
}

.user-mood {
	display: flex;
	align-items: center;
}

.button-group {
	display: flex;
	justify-content: space-around;
}

.button-group .icon {
	background-color: #28a745;
	color: white;
	border: none;
	border-radius: 4px;
	padding: 5px 10px;
	cursor: pointer;
}

/* 当屏幕宽度小于 360px (如手机设备) */
@media (max-width: 360px) {
	.user-card {
		width: calc(100% - 20px);
		/* 占满100%宽度 */
		max-width: 300px;
		/* 保持最大宽度为300px */
		padding: 10px;
		/* 减少内边距 */
	}
}

body{display: flex;flex-flow: column;}
.header-box{flex-shrink: 0; height: 45px;display: flex;align-items: center;justify-content: space-between;box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);position: sticky;top: 0;left: 0;right: 0;z-index: 1;background-color: #fff;padding: 0 10px;font-size: 14px;overflow: hidden;}
.body-box{flex: 1;}
.header-left,.header-right{display: flex;align-items: center;justify-content: center;}
.header-box .location-text{font-size: 13px;padding: 0 10px;}
.header-box .online{color: #080;font-size: 12px;margin: 0 .5em;}
.user-avatar{width: 30px;height: 30px;border-radius: 40px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.header-box .settings .iconfont{font-size: 20px;color: #333;cursor: pointer;margin-left: 10px;}
.user-info{margin-bottom: 5px;}
.icon-nanxing{color: #0f8cdc;}
.icon-nvxing{color: #ff7e54;}
.renzheng{color: #080;}
.user-location{display: flex;margin-bottom: 5px;align-items: center;color: #888;}
.user-location img{height: 16px;width: 16px;margin-left: 2px;}
.user-description{color: #888;font-size: 14px;}
.user-mood{font-size: 12px;display: flex;align-items: center;color: #9a9a9a;margin-bottom: 5px;}
.user-card .button-group{font-size: 12px;display: flex;align-items:center;color: #999;}
.user-card .button-group i{font-size: 12px;display: flex;align-items: center;}
.user-card .button-group i:before{font-size: 16px;font-weight: 700;margin-right: 2px;}