page { background-color: #161616; width: 100%; } .page { background-color: #161616; width: 100%; min-height:100vh; } .header { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;padding:30rpx 50rpx; width: 750rpx;height: 320rpx; padding-top: calc(var(--status-bar-height) + 60rpx); background: url('../../static/home/top_bg.png'); background-size: 100% 100%; .left { display: flex;flex-direction: row; justify-content: center; image { width:84rpx;height:52rpx; } } .right { .btn { width: 156rpx;height: 68rpx; border-radius: 16rpx; border: 2rpx solid #FF2A95; color:#fff;font-size: 28rpx; display: flex;flex-direction: column;justify-content: center;align-items: center; } } } .thread { height: 20rpx; } .thread2 { height: 60rpx; } .no-content { display: flex;flex-direction: column;justify-content: center;align-items: center; image { width:276rpx;height:276rpx; } font-weight: 400; font-size: 24rpx; color: #999999; } .list_info { display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff; width:750rpx;margin-top:calc(var(--status-bar-height) - 130rpx); .item { width: 690rpx;margin: 0rpx 0;color:#fff;font-size: 28rpx;padding:20rpx 0 0rpx; display: flex;flex-direction: row;justify-content: flex-start;align-items: center; .avator { width:88rpx; .icon { width:72rpx;height:72rpx;border-radius: 36rpx; } } .tit { width:470rpx; .list1 { display: flex;flex-direction: row;justify-content: flex-start;align-items: center; .name { font-size: 32rpx;padding-right: 10rpx;height:40rpx;line-height: 40rpx; } .sex1 { width: 76rpx; height: 40rpx; background: #423339; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 2rpx solid #36D6FF;color:#36D6FF; display: flex;flex-direction: row;justify-content: flex-start;align-items: center; image { width:24rpx;height:24rpx;margin-left:4rpx;margin-right: 4rpx; } } .sex2 { width: 76rpx; height: 40rpx; background: #423339; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 2rpx solid #FF7D88;color:#FF7D88; display: flex;flex-direction: row;justify-content: flex-start;align-items: center; image { width:24rpx;height:24rpx;margin-left:4rpx;margin-right: 4rpx; } } .xinzuo { width: 92rpx;height: 44rpx;margin-left:10rpx;line-height: 44rpx; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 2rpx solid #404040;font-size: 20rpx;color: #D0D0D0; display: flex;flex-direction: row;justify-content: center;align-items: center; } } .time { color:#D0D0D0;font-size: 24rpx; } } .state { width:130rpx;font-size: 28rpx;font-weight: normal;text-align: right; .status_1 { color:#999; } .status_9 { color:#36D6FF; } .status_2 { color:#FE2D56; } } } .content { width: 690rpx;font-weight: 400;font-size: 28rpx;color: #FFFFFF;text-align: left;font-style: normal; text-transform: none;padding:20rpx 0; padding-left:88rpx; } .photo_list { width: 690rpx;margin-bottom:0rpx;padding-left:88rpx; border-radius: 28rpx;font-size: 28rpx; display: flex;flex-direction: row;align-items: center; flex-wrap: wrap; .img { width:186rpx;height:186rpx;margin-bottom: 24rpx;margin-right: 12rpx; .icon { width:186rpx;height:186rpx;border-radius: 28rpx;border:solid 1px rgba(255, 255, 255, 0.2); } } .right { color:#fff; } } .desc { width: 690rpx;padding:0rpx 0 0rpx;padding-left:88rpx; font-weight: 400; font-size: 24rpx; color: #999999; line-height: 0rpx; text-align: left; font-style: normal; text-transform: none; display: flex;flex-direction: row;justify-content: space-between;align-items: center; image { width:40rpx;height:40rpx; } .addr { width:200rpx; } .img { display: flex;flex-direction: row;justify-content: center;align-items: center; padding:0 0rpx 0 30rpx;font-size: 28rpx;color:#fff; image { margin-top:-8rpx; } } } .line { background-color: #282828;width:100%;height:12rpx; } }