page {
  height: 100vh;
  width: 100vw;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.avatar, .comments cover-image {
  width: 70rpx;
  height: 70rpx;
}

.circle {
  margin-right: .5em 
}

.commentsContatiner {
  background: #fff;
  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 cover-image {
  height: 1em;
  width: 1em;
  margin-right: .3em;
}

.comment .row {
  margin-right: 1em
}

.comment .row:last-child {
  margin-right: 0
}

.comments .nickname {
  color: #002063;
}

.comments .content {
  padding-bottom: 1.2em
}

.comments {
  height: 400rpx;
}

video {
  position: relative
}

.videoContent {
  background: linear-gradient(-180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  transform: translateY(400rpx);
  transition: transform .3s ease-in-out 0s;
}
.videoContent.showComments {
  transform: translateY(0rpx);
}


.videoContent .avatar {
  height: 70rpx;
  width: 70rpx;
}

.videoPlay {
  height: 100rpx;
  width: 100rpx;
}