.top { width: 100%; height: 70rpx; background-color: #26A2FF; margin-bottom: 70rpx; } .head{ position: absolute; top: 0; left: 32rpx; right: 32rpx; border-radius: 20rpx; background-color: #fff; box-shadow: 0rpx 0rpx 10rpx #ccc; height: 140rpx; text-align: center; } .head .flex-1 view:nth-child(1){ color: #26A2FF; font-weight: 600; margin-bottom: 10rpx; font-size: 44rpx; } .head .flex-1 view:nth-child(2){ color: #C0C4CC; margin-bottom: 5rpx; font-size: 28rpx; } .headed{ background-color: #fff; } .headed-box{ padding: 32rpx; padding-bottom: 0rpx; color: #303133; } .headed-box .headed-box-item .left{ margin-right: 32rpx; } .headed-box .headed-box-item .flex-1{ border: 1px solid #f1f1f1; border-radius: 8rpx; padding: 32rpx; margin-bottom: 32rpx; } .headed-box-item image{ width: 60rpx; height: 60rpx; margin-right: 10rpx; } .headed-box-item text{ font-size: 32rpx; } /* 中间部分 */ .main{ background-color: #fff; } .main .main-title{ border-bottom: 1px solid #f1f1f1; padding: 28rpx 32rpx; color: #222; } .main .main-title .text2{ border-radius: 50%; border:1px solid #909399; color: #909399; width: 26rpx; height: 26rpx; font-size: 22rpx; text-align: center; display: inline-block; margin-left: 10rpx; position: relative; line-height: 26rpx; box-sizing: border-box; } .main-main{ text-align: center; padding: 32rpx; } .main-main .flex-1 view:nth-child(1){ color: #26A2FF; font-weight: 600; margin-bottom: 10rpx; font-size: 44rpx; } .main-main .flex-1 view:nth-child(2){ color: #909399; margin-bottom: 5rpx; } .main-main .flex-1 view:nth-child(3){ color: #C0C4CC; margin-bottom: 5rpx; font-size: 24rpx; } /* 底部 */ .bottom{ background-color: #fff; /* position: sticky; top: 100rpx; */ } .bottom .bottom-title{ border-bottom: 1px solid #f1f1f1; padding: 28rpx 32rpx; color: #222; font-size: 32rpx } .bottom-time{ padding: 28rpx 0 0rpx 28rpx; } .bottom-right{ border-bottom: 1px solid #f1f1f1; padding-bottom: 28rpx; margin-left: 16rpx; padding-top: 20rpx; } .bottom-right .name{ font-size: 36rpx; margin-bottom: 16rpx; } .num{ color: #F56C6C; margin-right: 28rpx; font-size: 40rpx; font-weight: 600 } .text{ margin-bottom: 16rpx; font-size: 32rpx; } .date{ color: #C0C4CC; font-size: 28rpx; } .more{ height: 60rpx; text-align: center; color: #909399; line-height: 60rpx; font-size: 28rpx; } .windows-box{ background: #fff; margin: 0 32rpx; margin-top: 30%; border-radius: 20rpx; } .windows-title{ text-align: center; padding: 28rpx 0; border-bottom: 1px solid #f1f1f1; } .windows-btn{ border-top: 1px solid #f1f1f1; } .windows-btn view:nth-child(1){ text-align: center; padding: 28rpx 0; border-right: 1px solid #f1f1f1; } .windows-btn view:nth-child(2){ text-align: center; padding: 28rpx 0; color: #26A2FF; } .windows-content{ height: 100rpx; padding: 28rpx; text-align: center }