page { width:100%; height:100vh; } .remark-or-reply { width: 100%; height: 100%; background: #f7f7f7; box-sizing: border-box; padding: 20rpx; } .remark-or-reply .remark-content { width: 100%; border-radius: 16rpx; background: #fff; height: 930rpx; box-sizing: border-box; padding: 25rpx; } .remark-or-reply .remark-content textarea { width: 100%; height: calc(100% - 50rpx); overflow-y: auto; font-size: 32rpx; color: #333; line-height: 50rpx; } .remark-or-reply .remark-content .content-num { width:100%; height: 50rpx; line-height: 50rpx; font-size: 28rpx; color: #999; text-align: right; } .remark-or-reply .remark-content .textarea-placeholder { font-size: 32rpx; color: #999; } .reply-btn { width: 100%; height: 84rpx; display: flex; align-items: center; justify-content: center; margin-top: 70rpx; } .reply-btn button { width: 560rpx; height: 100rpx; line-height: 84rpx; text-align: center; color: #fff; font-size: 36rpx; padding: 0; outline: 0; border-radius: 16rpx; /* background: linear-gradient(to right, #f40f0f, #ff4c4c); */ background-color: transparent; } .reply-btn .hover-button { /* background:red; */ } button image { width: 100%; height: 100%; } button text { position: absolute; width: 100%; height: 100%; left: 0; } button::after { border: none; }