page { background: #fff; padding-bottom: calc(49rpx + .4em + 1.4rem); padding-bottom: calc(constant(safe-area-inset-bottom) + 49rpx + .4em + 1.4rem); padding-bottom: calc(env(safe-area-inset-bottom) + 49rpx + .4em + 1.4rem); } .header { /* background-color: rgba(229,27,53, .1) */ } .avatar, .comments image { width: 70rpx; height: 70rpx; } .circle { margin-right: .5em } .commentsContatiner { position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .comment .input { background: #efefef; padding: .2em .5em; border-radius: 1em } .comment image { height: 1em; width: 1em; margin-right: .3em; } .comment > view { margin-right: 1em } .comment > view:last-child { margin-right: 0 } .comments .nickname { color: #002063; } .comments .content { padding-bottom: 1.2em } .comments { height: 0; transition: all .3s ease-in-out 0s } .comments.show { height: 400rpx } .fullx { background: #fff; }