page { background-color: #161616; width: 100%; height: 100vh; } .page { background-color: #161616; width: 100%; } .header { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 750rpx;height: 320rpx; padding-top: calc(var(--status-bar-height) + 0rpx); .left { display: flex;flex-direction: row;width:200rpx;height:120rpx; justify-content: center; padding-left:50rpx; image { width:124rpx;height:40rpx; } } } .thread { height: 20rpx; } .thread2 { height: 60rpx; } .cateList { width:750rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;margin-top:20rpx; .item12 { width: 150rpx;padding:20rpx 20rpx; display: flex;flex-direction: column;justify-content: center;align-items: center; .title { font-weight: bold;font-size: 30rpx;color: #FFFFFF; } .icon { width:44rpx;height:18rpx; } } } .section-title { width:750rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-top:20rpx; font-weight: bold;padding-left:30rpx; font-size: 32rpx; color: #FFFFFF; } .article_notify { width: 690rpx;height: 140rpx;margin-left:30rpx;margin-top:20rpx; background: #28292D; border-radius: 24rpx 24rpx 24rpx 24rpx; display: flex;flex-direction: row;justify-content: flex-start;align-items: center; .left { width: 140rpx; height: 140rpx; background: #28292D; border-radius: 24rpx; image { width: 140rpx;height: 140rpx;border-radius: 24rpx; } } .right { display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start; .title { padding-left:20rpx;padding-top:18rpx; font-weight: bold;font-size: 32rpx;color: #FFFFFF; display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start; image { width:76rpx;height:40rpx;margin-left:30rpx; } } .desc { padding-left:20rpx;padding-top:20rpx; font-weight: 400;font-size: 28rpx;color: #FFFFFF; } } } .list { display: flex;flex-direction: row;flex-wrap: wrap;padding:30rpx; width:750rpx;justify-content: space-between; .item { width: 334rpx;height: 470rpx;margin-bottom: 30rpx; background: #28292D;border-radius: 24rpx; display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start; .img { .icon { width: 334rpx;height:334rpx;border-radius: 24rpx 24rpx 0 0; } } .tit { width:100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding:0 20rpx; .name { color:#fff;font-size: 32rpx;width:200rpx; } .juli { color:#D0D0D0;font-size: 24rpx;width:134rpx;text-align: right; } } .name { font-size: 24rpx;color:#818D89;padding-top: 12rpx; } .tag_list { width:100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 10rpx; padding:0 12rpx; .tag { height: 44rpx;padding:0 12rpx; background: #423339; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 2rpx solid #FF7D88; display: flex;flex-direction: row;justify-content: center;align-items: center; font-weight: 400; font-size: 20rpx; color: #FF7D88; .icon { width:24rpx;height:24rpx;margin-right: 6rpx; } } .tag2 { height: 44rpx;padding:0 12rpx; border-radius: 16rpx; border: 2rpx solid #404040; display: flex;flex-direction: row;justify-content: center;align-items: center; font-weight: 400; font-size: 20rpx; color: #D0D0D0; } } } }