page { width: 100%; height: 100vh; } .publish-evaluation { width: 100%; height: 100%; background: #f7f7f7; box-sizing: border-box; padding: 20rpx; } .publish-evaluation .content { width: 100%; height: 970rpx; background: #fff; border-radius: 16rpx; box-sizing: border-box; padding: 0 25rpx; } .satisify { width: 100%; border-bottom: 1rpx solid #f3f3f3; } .satisify .header { color: #333; font-size: 32rpx; height: 110rpx; line-height: 110rpx; } .satisify .satisify-btn { width: 100%; height: 260rpx; display: flex; align-items: center; justify-content: space-around; } .satisify .satisify-btn .type { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .satisify .satisify-btn .type image { width: 100rpx; height: 100rpx; object-fit: cover; } .satisify .satisify-btn .type view { font-size: 28rpx; color: #999; line-height: 90rpx; height: 90rpx; } .satisify-content { width: 100%; height: 600rpx; box-sizing: border-box; padding-top: 30rpx; } .satisify-content textarea { width: 100%; height: 100%; font-size: 32rpx; line-height: 46rpx; color: #333; } .satisify-content .textarea-satisify { font-size: 32rpx; line-height: 46rpx; color: #999; } .publish-evaluation-btn { width: 100%; height: 84rpx; display: flex; align-items: center; justify-content: center; margin-top: 60rpx; } .publish-evaluation-btn button { width: 560rpx; height: 84rpx; padding: 0; border-radius: 16rpx; background: linear-gradient(to right, #F40C0C, #FF4E4E); color: #fff; font-size: 36rpx; line-height: 84rpx; text-align:center; } .publish-evaluation-btn button::after { border: 0; } .publish-evaluation-btn .hover-btn { background: red; }