Face2FaceTranslator/pages/index/index.wxss

/**index.wxss**/

.flex-column {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.dialog-wrap {
  position: relative;
  padding: 0rpx 40rpx 50rpx 40rpx;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
  width: 100%;
  flex-direction: column;
  -webkit-flex-direction: column;
}


.send-message .text-detail {
  color: #9B9B9B;
}

.dialog-part {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 257rpx;
  right: 0;
  z-index:1;
}

.user-input {
  flex: 1;
  height: 60rpx;
  box-sizing: border-box;
  margin: 0 10px;
  border-radius: 10rpx;
}

.text-content {
  margin: 0 48px 0 0;
  box-sizing: border-box;
}


.edit-icon {
  position: absolute;
  right: 10rpx;
  bottom: 0;
  padding: 0 8rpx;
}

.play-icon {
  position: absolute;
  right: 10rpx;
  bottom: 14rpx;
  padding: 0 8rpx;
  display: flex;
  align-items: center;
}

.play-loud-icon {
  position: absolute;
  right: 0;
  bottom: 14rpx;
  padding: 0 8rpx;
  display: flex;
  align-items: center;
}


.text-detail {
  font-size: 18px;
  line-height: 24px;
  /*margin-right: 25px;*/
  box-sizing: border-box;
  font-family: "PingFang-SC-Regular", "SimSun", "Microsoft Yahei";
  font-variant-ligatures: none;
}


.translate-message {
  position: relative;
}


.send-message {
  position: relative;
}

.create-time {
  font-size: 14px;
  color: #B2B2B2;
  margin-bottom: 5px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.filter-blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.empty-tip {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 24px;
  width: 100px;
  font-size: 24px;
  color: #000000;
  opacity: 0.1
}

.translate-fake {
  width:100%;
  height:1px
}

.foot-group {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 40;
  width: 100%;
}