page{ background-color: #F4F5F7; } .container{ width: 100vw; } .main{ width: 90vw; margin: 30rpx auto 0 auto; background-color: #ffffff; border-radius: 10rpx; } .title{ height: 200rpx; display: flex; justify-content: center; align-items: center; } .photo{ flex: 1; /* background-color: cyan; */ } .name{ display: flex; flex-direction: column; flex: 2; font-size: 30rpx; line-height: 50rpx; /* background-color: burlywood; */ } .today_num{ font-size: 28rpx; color: rgb(116,162,250); } .status{ flex: 1; /* background-color: #ace247; */ height: 70%; } .status_offline{ background-color: #BFBFBF; } .status_online{ background-color: rgb(124, 231, 124); } .status_text{ padding: 10rpx 20rpx; border-radius: 20rpx; float: right; margin-right: 25rpx; font-size: 20rpx; display: flex; width: 50rpx; justify-content: space-evenly; } .custom-tabs { margin-bottom: 32rpx; } .avatar-example { display: flex; justify-content: center; align-items: center; } .external-class-content { color: #fff; background-color: #0052d9; font-weight: 400; } .avatar-example--medium:not(:last-child) { margin-right: 96rpx; } .item{ border-top: solid rgb(187, 185, 185) 1rpx; width: 95%; margin: 10rpx auto; } .item_txt{ display: flex; /* background-color: #0052d9; */ padding: 10rpx 0; } .pre_content{ display: flex; flex: 3; /* background-color: chartreuse; */ justify-content: flex-start; align-items: center; margin-left: 20rpx; font-size: 28rpx; } .end_content{ display: flex; flex: 1; justify-content:center; align-items: center; /* background-color: coral; */ }