bolinscreening-miniapp/wxcomponents/zoostalk/index.wxss

.clearfix {
  clear: both;
}

.body-content {
  background-color: #eee;
  padding: 0 0;
  box-sizing: border-box;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
  z-index: 999999;
}

.top-bar view {
  display: flex;
  align-items: center;
}

.top-bar view button {
  display: flex;
  align-items: center;
}

.top-bar image {
  height: 16px;
  width: 16px;
  margin-right: 10rpx;
}

.top-bar text {
  color: #888;
  font-size: 16px;
}

.talkbox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.talkbox-right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.talkbox image {
  position: relative;
}

.menu-list-box {
  width: 360rpx;
  position: fixed;
  left: 60rpx;
  top: 120rpx;
  background: white;
  box-shadow: 0 0 10px rgba(5, 5, 5, 0.466);
  border-radius: 10rpx;
  padding: 40rpx;
  z-index: 9999;
}

.data-loading {
  display: flex;
  justify-content: center;
  font-size: 24rpx;
  align-items: center;
  color: #666;
}

.data-loading image {
  height: 50rpx;
  width: 50rpx;
}

.touxiang-list {
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 10rpx;
}

.kefu-touxiang image {
  width: 90rpx !important;
  height: 90rpx !important;
  border-radius: 10rpx;
  margin-right: 30rpx;
}

.kefu-name {
  font-size: 32rpx;
  color: black;
  font-weight: bold;
  margin-bottom: 5px;
}

.position {
  font-size: 24rpx;
  color: #666;
  font-weight: normal !important;
  margin-top: 20rpx;
}

.kefu-info-list {
  font-size: 28rpx;
  color: black;
  line-height: 60rpx;
  padding-top: 10rpx;
}

.kefu-info-list text {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  width: 120rpx;
}

.talkleft {
  padding: 20rpx;
  margin-left: 10rpx;
  line-height: 40rpx;
  font-size: 32rpx;
  width: auto;
  border-radius: 10rpx;
  background-color: white;
  border: 1px solid #e0e0e0;
  word-break: break-all;
  margin-top: 10rpx;
  display: inline-block;
  z-index: 9;
}



.talkleft text {
  font-size: 32rpx;
  max-width: 100%;
}

.talkright {
  padding: 20rpx;
  margin-right: 10rpx;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  line-height: 40rpx;
  font-size: 32rpx;
  background: #4ad79f;
  border-radius: 10rpx;
  max-width: 100%;
  word-break: break-all;
  margin-top: 10rpx;
  justify-content: flex-end;
}

.talkright  text {
  line-height: 56rpx;
}

.btn-shouquan {
  font-size: 30rpx !important;
  display: block;
  text-align: center;
  color: #396fcb;
  background-color: white;
  border: none;
  line-height: 35rpx;
  border-top: 2rpx solid #e0e0e0;
  overflow: visible;
  border-radius: 0;
  padding: 0;
}

.shouquan-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.btn-shouquan image {
  height: 16px !important;
  width: 16px !important;
  margin-right: 8rpx;
  vertical-align: middle;
  line-height: 35rpx;
}

.btn-shouquan::after {
  border: none;
}

.talkleft-shouquan {
  padding: 0 8px;
}

.talkleft-shouquan text {
  padding: 10px;
  display: inline-block;
}

.btn-shouquan text {
  vertical-align: middle;
}

.talkbox image {
  display: inline-block;
  height: 70rpx;
  width: 70rpx;
  border-radius: 70rpx;
  margin-left: 20rpx;
}

.talkbox-right image {
  display: inline-block;
  height: 70rpx;
  width: 70rpx;
  border-radius: 70rpx;
  margin-right: 20rpx;
}

.talkbox-emoji {
  height: 60rpx !important;
  width: 60rpx !important;
}

.tip-box {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.tip-span {
  background-color: #e0e0e0;
  font-size: 28rpx;
  display: block;
  padding: 5rpx 10rpx;
  border-radius: 4px;
}

.txtMsgBox {
  height: 80rpx;
  border-radius: 100rpx;
  line-height: 20rpx;
  text-align: left;
  color: #fff;
  background-color: #f0f;
  display: inline-block;
  position: absolute;
  left: 0;
  width: calc(100% - 200rpx);
  padding: 20rpx 30rpx;
}

.form-control {
  border: 1rpx solid #e0e0e0;
  border-radius: 4rpx;
  padding: 5rpx 20rpx;
  font-size: 24rpx;
}

.SendMsgBtn {
  float: right;
  width: 100px;
  height: 80rpx;
  margin-right: 10px;
  border-radius: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fff;
  background-color: #396fcb;
}

.input-container {
  position: relative;
}

.bottom-box {
  position: fixed;
  background-color: #f7f7f7;
  border-top: 1px solid #cdd6d3;
  bottom: 0rpx;
  left: 0;
  right: 0;
  padding-top: 20rpx;
  display: flex;
  flex-grow: row;
  z-index: 9999;
  /* height: 240rpx; */
}

.inout-view {
  position: relative;
  height: 60rpx;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  justify-content: space-between
}

.bottom-zoosnet {
  position: absolute;
  top: 90rpx;
  text-align: center;
  height: 38rpx;
  font-size: 22rpx;
  left: 0;
  right: 0;
  color: #808080;
  z-index: 9999;
}

.bottom-box input {
  margin-right: 10rpx;
  margin-left: 10rpx;
  display: inline-block;
  position: absolute;
}

.bottom-box button {
  font-size: 20rpx;
  display: inline-block;
  margin-right: 3rpx;
  padding: 4rpx 14rpx;
  
 
  /* flex-shrink: 0; */
}
.send-button{
  width: 90rpx !important;
}
.bottom-button-box {
  height: 60rpx;
  display: flex;
  flex-direction: row;
  z-index: 9999999999999999999;
  flex-shrink: 0;
  align-items: center
}

.input-box {
  position: absolute;
  left: 80rpx;
  right: 190rpx;
  height: 80rpx;
  
}

.input-box input {
  width: 100%;
}

.voice {
  height: 51rpx;
  width: 51rpx;
  flex-shrink: 0
}

.bottom-button-box image {
  height: 65rpx;
  width: 65rpx;
}

.choice {
  border-top: 1px solid #cdd6d3;
  background-color: #f7f7f7;
  position: absolute;
  bottom: 0px;
  width: 100%;
  top: 105rpx;
  display: flex;
  flex-direction: row;
  padding-top: 40rpx;
}

.choice-block {
  color: #333;
  font-size: 12px;
  bottom: 0;
}

.choice-block view {
  align-items: center;
  flex: 1;
  float: left;
  margin-right: 5px;
  margin-left: 3%;
  margin-bottom: 10px;
}

.choice-block text {
  height: 50rpx;
  width: 50rpx;
  font-size: 50rpx;
  padding: 20rpx;
  display: inline-block;
  justify-content: center;
}

.choice-block-coloum {
  display: flex;
  flex-direction: column;
  font-size: 22rpx;
  text-align: center;
  margin: 10rpx 30rpx;
}

.choice-img {
  width: 80rpx;
  height: 80rpx;
  padding: 15rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 5rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.choice-img image {
  width: 30px;
  height: 25px;
}

.talkbox-right image.picture {
  width: 300rpx !important;
  border-radius: 8rpx !important;
  border: 1px solid #ddd;
}

.mess-input {
  border: 1rpx solid #fff;
  background-color: white;
  border-radius: 8rpx;
  /* padding: 5rpx 20rpx;
   height: 68rpx!important; *//* padding: 13rpx 20rpx;
   height: 44rpx!important; */
  font-size: 32rpx;
  width: 430rpx;
  margin:0 10rpx

}

/* .talkbox {
  display: block;
  width: 100%;
  float: left;
}

.talkleft {
  padding: 10px;
  margin-left: 5px;
  margin-top: 10px;
  display: inline-block;
  background-color: red;
  width: auto;
}

.talkright {
  padding: 10px;
  margin-right: 10px;
  margin-top: 10px;
  display: block;
  float: right;
  background-color: red;
  width: auto;
}
.inputBox{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;

}

.inputBox input {
  color: #2c2b35;
  font-size: 34rpx;
  margin-left: 10px;
  margin-bottom: 10px;
  float: bottom;
}

.txtMsgBox {
  height: 80rpx;
  border-radius: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fff;
  background-color: #f0f;
  display: inline-block;
  position: absolute;
  left: 0;
  width:calc(100% - 160px); 
}

.SendMsgBtn {
  float: right;
  width: 100px;
  height: 80rpx;
  margin-right: 10px;
  border-radius: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fff;
  background-color: #396fcb;
} */

.tab-h {
  height: 60rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #f7f7f7;
  font-size: 16px;
  white-space: nowrap;
  position: fixed;
  bottom: 30rpx;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  text-align: center;
}

.tab-item {
  margin: 0 20rpx;
  display: inline-block;
  height: 20rpx;
  width: 20rpx;
  border-radius: 20rpx;
  background: #d1d5d8;
}

.tab-item.active {
  background-color: #83878a;
  position: relative;
  height: 25rpx;
  width: 25rpx;
}

.tab-content {
  padding-top: 15rpx;
}

.luyin-box {
  /* width: 100rpx; */
  border-radius: 10rpx;
  padding: 20rpx 15rpx;
  background-color: #4ad79f;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 10rpx;
  margin-top: 10rpx;
  min-width: 90rpx;
}

.luyin-box image {
  height: 40rpx;
  width: 40rpx;
}

.luyin-box text {
  font-size: 28rpx;
  color: ddd;
  margin-right: 10rpx;
}

.btn-voice {
  background-color: #fff;
  border-color: #fff;
  position: fixed;
  bottom: 48rpx;
  line-height: 60rpx;
  left: 90rpx;
  right: 170rpx;
  
}


.luyin-box-left {
  /* width: 200rpx; */
  min-width: 110rpx;
  border-radius: 10rpx;
  padding: 20rpx 15rpx;
  background-color: #fff;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 10rpx;
  margin-top: 10rpx;
  border: 1px solid #e0e0e0;
}

.luyin-box-left image {
  height: 40rpx;
  width: 40rpx;
}

.luyin-box-left text {
  font-size: 28rpx;
  color: ddd;
  margin-right: 10rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
}

.pop {
  width: 60%;
  left: 20%;
  margin-left: -10px;
  position: fixed;
  top: 20%;
  background: #fff;
  font-size: 14px;
  border: 1px solid #ddd;
  box-shadow: 0 0 15px rgb(168, 168, 168);
}

.pop-header {
  width: 100%;
  height: 36px;
  line-height: 36px;
  border-bottom: 1px solid #ddd;
}

.pop-header view {
  float: left;
  line-height: 36px;
  font-size: 14px;
  color: #333;
  margin-left: 10px;
}

.close {
  width: 12px;
  height: 12px;
  float: right;
  line-height: 36px;
  margin: 10px;
}

.pop-body {
  font-size: 14px;
  color: #666;
  padding: 10px;
}

.company-tit {
  text-align: center;
  color: #333;
}

.pop-box {
  overflow: hidden;
  width: 100%;
  line-height: 30px;
}

.pop-tit {
  float: left;
  color: #333;
  width: 60px;
  text-align: right;
}

.pop-box {
  float: left;
}

.emoji-btn {
  margin-right: 12rpx;
  height: 51rpx;
  width: 51rpx;
}

.add-btn {
  height: 51rpx;
  width: 51rpx;
}

.slide-image {
  width: 100%;
}

.swiperbox {
  padding: 20rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.swiperbox image {
  border-radius: 8rpx;
}

.banner-img {
  padding: 20rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.banner-imgtxt image {
  border-radius: 8rpx;
  width: 100%;
}

.banner-img image {
  width: 100%;
  border-radius: 8rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 35);
}

.banner-img {
  padding: 20rpx;
}

.banner-imgtxt {
  position: relative;
  color: #0e6749;
  padding: 20rpx;
}

.view-txt {
  position: absolute;
  left: 40rpx;
  top: 90rpx;
  display: flex;
  flex-direction: column;
}

.banner-head {
  font-size: 40rpx;
  font-weight: bold;
  line-height: 60rpx;
}

.banner-head2 {
  font-size: 28rpx;
  margin-top: 40rpx;
}

.left-mess-box {
  max-width: 80%;
  display: flex;
  flex-direction: column;
}

.time-mess {
  color: #666;
  font-size: 20rpx;
  margin-left: 10rpx;
}

.right-mess-box {
  align-items: flex-end;
}

.right-time-mess {
  margin-right: 10rpx;
}

/* 授权 */

/* pages/login/login.wxss */

.show-btn {
  margin-top: 100rpx;
  color: #2c2;
}

.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  width: 630rpx;
  overflow: hidden;
  position: fixed;
  top: 30%;
  left: 0;
  z-index: 9999;
  background: #f9f9f9;
  margin: -170rpx 65rpx;
  border-radius: 16rpx;
}

.modal-title {
  line-height: 100rpx;
  font-size: 36rpx;
  color: #000;
  text-align: center;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
}

.modal-content {
  padding: 50rpx 32rpx;
}

.modal-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 24rpx;
}

.modal-input text {
  color: #666;
  text-align: center;
}

.input {
  width: 100%;
  height: 82rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  color: #333;
}

.input-holder-lh {
  color: #666;
  font-size: 28rpx;
  width: 90%;
  margin: 10px auto;
  background-color: white;
  padding: 2px 10px;
  border-radius: 4px;
  height: 32px;
  border: 1px solid #e0e0e3 !important;
}

.modal-footer {
  display: flex;
  flex-direction: row;
  height: 86rpx;
  font-size: 34rpx;
  line-height: 86rpx;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-footer button::after {
  border: none;
}

.btn-cancel {
  color: #666;
  text-align: center;
  border: none;
  border-radius: 0;
  flex: 1;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 30rpx;
  line-height: 86rpx;
}

.button-hover {
  background-color: white;
}

.btn-confirm {
  color: rgb(25, 189, 107);
  text-align: center;
  border-radius: 0 !important;
  flex: 1;
  font-size: 30rpx;
  line-height: 86rpx;
}

.tip-head {
  text-align: center;
  color: black;
  font-size: 40rpx;
  line-height: 100rpx;
  margin: 10rpx 30rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.07);
  padding-bottom: 10rpx;
}

.tip-images {
  text-align: center;
}

.tip-images image {
  height: 100rpx !important;
  width: 100rpx;
}

.tip-secdend-head {
  text-align: center;
  color: rgba(102, 102, 102, 0.7);
  line-height: 50rpx;
  margin-top: 30rpx;
  font-size: 28rpx;
  padding-bottom: 10rpx;
}

.talk-left-messbox {
  max-width: 80%;
}

.talk-left-messbox image.picture {
  width: 300rpx !important;
  border-radius: 4px !important;
  border: 1px solid #ddd;
}

.fuzhi-tips {
  width: 25px;
  position: absolute;
  bottom: 10px;
  /* right: 1px; */
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 4px;
  font-size: 12px;
  padding: 5px;
  z-index: 999;
}

.fuzhi-tips-left {
  width: 26px;
  position: absolute;
  bottom: 2px;
  /* left: 0px; */
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 4px;
  font-size: 12px;
  padding: 5px;
}

.fuzhi-tips text {
  width: 30px;
  text-align: center;
}

.fuzhi-tips:after {
  content: "";
  border: 5px solid rgba(0, 0, 0, 0.8);
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  width: 0px;
  height: 0px;
  position: absolute;
  right: 12px;
  top: 26px;
}

.btn-contactme {
  padding: 0px;
  background-color: transparent;
  border: none !important;
  line-height: inherit;
  display: flex;
  flex-direction: row;
  text-align: left;
}

.btn-contactme::after {
  border: none;
}

/*mask*/

.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

/*content*/

.drawer_box {
  width: 650rpx;
  overflow: hidden;
  position: fixed;
  top: 40%;
  left: 0;
  z-index: 9999999;
  background: #fff !important;
  margin: -150px 0rpx 0 50rpx;
  border-radius: 8px;
  opacity: 1;
}

.drawer_title {
  padding: 15px;
  font: 20px "microsoft yahei";
  text-align: center;
  background: #ffff !important;
}

.drawer_content {
  max-height: 300px;
  overflow-y: scroll; /*超出父盒子高度可滚动*/
  background: #ffff !important;
}

.btn_ok {
  padding: 10px;
  font: 20px "microsoft yahei";
  text-align: center;
  border-top: 1px solid #e8e8ea;
  color: #3cc51f;
  background-color: #ffff !important;
}

.top {
  padding-top: 8px;
}

.bottom {
  padding-bottom: 8px;
}

.title {
  font-size: 32rpx;
  font: 300 28rpx/30px "microsoft yahei";
  color: black;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.title image {
  height: 14px;
  width: 14px;
  margin-right: 10rpx;
}

.comp-content {
  line-height: 24px;
  display: inline-block;
  font: 300 28rpx/30px "microsoft yahei";
  padding-right: 0rpx;
  word-break: break-all;
}

.input_base {
  border: 2rpx solid #ccc;
  padding-left: 10rpx;
  margin-right: 50rpx;
}

.input_h30 {
  height: 30px;
  line-height: 30px;
}

.input_h60 {
  height: 60px;
}

.input_view {
  font: 12px "microsoft yahei";
  background: #fff;
  color: #000;
  line-height: 30px;
}

input {
  font: 12px "microsoft yahei";
  background: #fff;
  color: #000;
}

radio {
  margin-right: 20px;
}

.grid {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40rpx;
  padding-top: 10px !important;
}

.comp-img image {
  height: 55px;
  width: 55px;
}

.comp-img {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 0 20px;
  padding-bottom: 0px !important;
}

.comp-img view {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: 20rpx;
}

.comp-img view text {
  font-size: 26rpx;
  color: #666;
}

.btn-shouquan {
  margin: 0;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.address-text {
  display: flex;
  align-items: center;
  flex-direction: row !important;
  margin-left: 0px !important;
  text-align: left;
}

.address-text image {
  height: 14px;
  width: 14px;
}

.btn-shouquan text {
  display: inline-block !important;
}

.talkleft-shouquan {
  max-width: 100%;
}

.comp-tag {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tags {
  padding: 10rpx;
  border-radius: 8rpx;
  border: 1px solid rgba(0, 0, 0, 0.07);
  font: 300 24rpx/28px "microsoft yahei";
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  line-height: 24rpx;
}

.modal-title-callback {
  display: flex;
  justify-content: flex-end;
  position: relative;
  box-sizing: border-box;
  height: 180rpx;
  text-align: center;
  flex-direction: column;
}

.callback-img {
  position: absolute;
  height: 120px;
  width: 148px;
  top: -60px;
  left: 84px;
}

.modal-title-callback text {
  margin-top: 15px;
  font-size: 40rpx;
  font-weight: 600;
  line-height: 40rpx;
}

.callback-tips text {
  font-size: 24rpx;
  color: #333;
}

.callback-tips {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  line-height: 44rpx;
}

.tips-tittle {
  font-size: 16px !important;
  color: #666 !important;
  font-weight: 600 !important;
  margin-bottom: 10px;
}

.color-orange {
  color: #fa7e37 !important;
}

.color-gry {
  color: #888 !important;
}

.btn {
  border-radius: 4px;
}

.btn-ouline {
  color: #4ad79f;
  border: 1px solid #4ad79f;
}

.btn-green {
  color: #ffff !important;
  background-color: #4ad79f;
  border: 1px solid #4ad79f !important;
}

.bottom-button {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 15px;
}

.bottom-button button {
  width: 130px;
  line-height: 36px;
  font-size: 16px;
}

.bottom-button button::after {
  border: none;
}

.up-arrow {
  position: absolute;
  top: 0;
  right: 30px;
}

.addwx-content {
  display: flex;
  flex-direction: row;
  color: #fff;
  font-size: 28rpx;
  position: absolute;
  top: 40px;
  left: 30px;
  flex-wrap: nowrap;
}

.addwx-content2 {
  width: 268px;
  top: 100px !important;
}

.addwx-number {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  line-height: 20px;
  text-align: center;
  background-color: white;
  color: rgba(0, 0, 0, 0.5) !important;
  margin-right: 10rpx;
  flex-shrink: 0;
}

.addwx-content image {
  height: 20px;
  width: 20px;
  margin: 0 10rpx;
}

.addwx-content view {
  display: inline-flex;
  align-content: center;
  justify-content: center;
}

.down-arrow {
  position: absolute;
  top: 130px;
  right: 70px;
}

.tip-img {
  height: 250px;
  width: 300px;
  margin: 190px auto;
}

.addtip {
  position: fixed;
  top: -8rpx;
  right: 20rpx;
  padding: 40rpx;
  z-index: 9999;
  font-size: 32rpx;
  width: 460rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.addtip image {
  height: 48rpx;
  width: 48rpx;
}

.tipcontent {
  background-color: white;
  border-radius: 16rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
  padding: 20rpx;
  position: relative;
}

.trangel {
  position: absolute;
  top: -2rpx;
  right: 100rpx;
  z-index: 9999;
}

.viewSound {
  width: 118px;
  height: 27px;
  position: fixed;
  background: #000 no-repeat;
  background-image: url('data:image/gif;base64,R0lGODlhCgH9AOZ/ALS0tB0dHaSkpJ+fn9bW1nd3d8zMzAQEBEBAQDAwMOnp6by8vLa2tikpKX5+frCwsA4ODhkZGa2traysrFlZWYqKim5ubqioqL6+vi0tLYWFhZaWlpSUlLKysnt7e3p6enh4eGFhYe7u7jk5OUZGRhUVFZiYmJKSkpCQkCAgIMnJyY6OjsfHx0xMTIODgzQ0NCQkJHNzc09PT2xsbGhoaGVlZWRkZEhISD4+PiIiIjw8PDIyMgkJCV9fX0NDQxERESYmJoCAgMDAwODg4KCgoHBwcFBQUNDQ0PDw8P7+/vz8/PHx8ff39/39/fPz8/T09Pr6+uzs7OLi4uvr65ubm/v7+9vb29zc3Pb29tHR0bq6uoyMjOTk5Li4uJycnM/Pz2tra87Ozvj4+Ofn5zY2NlRUVKamptjY2FNTU6Ojo1dXV7u7u9TU1MTExFFRUfLy8nV1derq6tra2ubm5lxcXEtLS/X19dLS0qurq8HBwXFxcd/f38PDw////wAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDQ5QjREM0I1NTBGMTFFOTlDMDhFQjgzMjE0NDY0RkUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDQ5QjREM0E1NTBGMTFFOTlDMDhFQjgzMjE0NDY0RkUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJGRjBCQ0Q1NkI2OTJBQTEwQzEyQUIyNUIxRjExMDk5NyIgc3RSZWY6ZG9jdW1lbnRJRD0iRkYwQkNENTZCNjkyQUExMEMxMkFCMjVCMUYxMTA5OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFFAB/ACwAAAAACgH9AAAH/4B+goOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/AAMKHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmTKFOqXMmypcuXMGPKnEmTVA4ZBahcYCDkQRoUNBBAqEnsgIwBQ/ooXcpUqRIWLhoQ9RUAxZSmWLP2MVDjwFRcAahA0UoWqxQaXr/KOgDHTtm3WP+zjFALC4YBuHixbklLV5WbJXkDM20ToW8qC4ITL5UCxLApB4oj95mSwPEoxJIjK4BhGRSazJmvlOjcCYYT0JkZkN7E4whq0DFWZ4L8OrMYzrIrpWBSGzSA3JUu9EZNArgkGEmGgxZiPJIX5ajnNm/E4zT0zFSmN6JzHfQSHtoXPegOukX4RAeQkM+M4jyiF+sz33F/qEZ8yUr40he04r5kqfsNAoB/kRkR4CBtEKhYCAcKkoWCiRXRoB9JQRiYAxNWaCFeQWS4YV4dNqjhh2WFeOCIJGplYoAopojVivu16CJTMNIn44xK1ejejTjqeB6PM/oYHpAuCqkdkSkaOR3/kiQq2RyTHzppHJQbSgkclRZamRuWEGopG5cKerkamASKSRqZ/pnZGZr3qWkZm/G56Ric68lpGJ3k2dkXnt3pSRef1/mpFqDQCfoVocoZOhWiwylKFKO9OVoTpLVJShOlr1k6E6aoaSoTp6B5GhOomYkKE6mSmfoSqpGp6hKrirnaEqyJycoSrYLZuhKugemqkhU4alXAhF8EmxUYEwphLFY9AJcBAgEoYsayTfmgyAEv4DZTAmwshcdQh9BGrVLRIiLDGH00gaFMEUTR1AKIqDGuUk8kMoISTNEgkwZZ6XBIAPP2sUYiXTSFBLgvaZFVbIdcMS8IicSB1Q0xKYvV/wmIbDDvDohAUAVWFMQkQFZc6DfICOMSkIgNWZX7EnxZ4YAIsMt+kAgGWBkwExdZDYBIEcsyUdghOSTXlM0yaYwVE6MZAoG7wXKQyAlZARgTCVp5gEgBwTLhciE/PBEXTQdIkdUY4BnCgxw4rhvusTUFkTUiWLsoR9qGlCB2U04gLFMARhv8AyIcpAgFGYkUjpUJUwmXFeOH8HDXhxK+1wRWSmhLUwJkyfwvzxb6jMgBxWKVhlrjZXUG3oVkoJ6CAJhMiLhMJWE1URlcnpUXibxwlX8AsF4IAro3xTtdSmdFRyJAkDqA7INEMEdWSzStVgkiaIUF4oiUwAB5UMygCP8PKmhVeV/2aRVHDorAwZtyBHA/euo5Qz/VgFpd8bUhOeD/GhYfsJ8gDjCyrIjhdn2JQPbytz9DIGABoHlCBYaGngJmRQ+raUHgsHIFBB5iBxyAWmDCYAHrJYIHEiBLB3JDO6wgoTiMOAACNMCCN5BFChIAg+YUEYEwkOUMfiNNCsnShAII8BAR0IEM6BCCMtxgB0FkhA/QpZUleLAzPMjDWzDQwFAcoAIbbAoWPGccCPiwLEuwwBE1gQAClEUJ5tFOCVzzlixYCxQwmFZZoBCy80CAD3hRAcU4AQMi4KssWIije3jgv7cQIAYmnMQBjMCAMGZFBAg40AFcEBgoaMH/AimIBASMMAARvoUNO9zPXxIzhwd8oAwvKIF+IAADEtDABEcoHl4kEMUABQCCoKkCEqwjmTcwaEKGsAAxP4SBUCITiUT4kBTU8MxFvKBgBIqCB4RXzfc8wJLDUQAIetnNRKQgCGYbThK0gIY1lnN0CFgBzSRThTXMoIvvlAQQerCBL4gBL1PQggtuQM58YiIACNhDVqiQgIIatBN0bMr5HkqKiDJlohQVhUWXgtGMgmKjSumoRz0B0j6IdKScKOlJUaoJlbLUXgUIgkxnStOa2jQICshKF27K05vSgIL04cEEAqYUJvTxEjsgglKXytSmOpUIHtkCUZdShcpcwgigqunIAfY21T5sABNYzUxHANZVpcDrqlnlCA8O2VUBgDWtHKHfVOvwVrF2JALzDBjG6iqZj0CgAAAQgmAHS9jCGvawiE0sYgWgyEvoQLGQZc5LJ0vZylr2spjNrGY3y9nOevazoA2taEdL2tKa9rSoTa1qV8va1rr2tbCNrWxnS9va2va2uM2tbnfL29769rfADa5wh0vc4hr3uMhNrnKXy9zmOve50I1uRwIBACH5BAUUAH8ALKEApgAbAAgAAAcwgDBFg4SFhoeFJEZ9jI2Oj5CORIuRlZaTlpmQmJqdfZyemaChlUQkQ6ipqqusqluBACH5BAUUAH8ALKEAlgAfAAgAAAc0gCRDg4SFhoeIQyNGfY2Oj5CRkn0IjJOXmJSWmZyPlZ2gjZ+hnaOkmQgNQausra6vsEEpgQAh+QQFFAB/ACyhAIUAIgAIAAAHNIA6QoOEhYaHiIUXRn2Njo+QkZKPQ4yTl5iUlpmckpWdoJCfoaSjpKBDO0SrrK2ur7CtW4EAIfkEBRQAfwAsoQB0ACYACQAABziAPCmDhIWGh4iJP0Z9jY6PkJGSk0GMk5eYlJaZnJmVnaCXn6Gkj6OlpaeooUEQCa+wsbKztLURgQAh+QQFFAB/ACyhAGQAKgAIAAAHMYBGfYOEhYaHiImFKYKKjo+KjJCTlH2SlZiJl5mchJudnJ+gmCkIR6eoqaqrrK2pEYEAIfkEBRQAfwAsoQBTAC0ACAAABzqAMEWDhIWGh4iJiGVGfY6PkJGSk5STQo2VmZqbl5uen5CdoKOaoqSnkqaoq31CdUiwsbKztLW2tQCBADs=');
  background-position-y: 2px;
  background-position-x: 23px;
  background-size: 112px;
  border-radius: 5px;
  text-align: center;
  padding: 15px;
  top: calc(100% / 2 - 120px);
  left: calc(100% / 2 - 75px);
  opacity: 0.8;
  padding-top: 111px;
  color: #fff;
  z-index: 9999;
}

.hide {
  display: none;
}

.wxPreEmoji {
  height: 60rpx !important;
  width: 60rpx !important;
  margin: 0 !important;
}

.bibox {
  bottom: 0;
  position: fixed;
  z-index: 9999;
  white-space: nowrap;
  display: flex;
  width: 100%;
  background-color: #eee;
}

.inview {
  display: inline-block;
  padding: 5px 15px;
  background-color: #fff;
  border-radius: 15px;
  margin: 3%;
  font-size: 26rpx;
  font-family: 黑体;
  color: #888;
}
button::after{
display:block;
box-shadow: none;
}
/* 地理位置消息 */
.address-text {
  display: flex;
  align-items: flex-end;
  flex-direction: row !important;
  margin-right: 0px !important;
  text-align: right;
}

.address-text image {
  height: 14px;
  width: 14px;
}

.btn-contactme {
  padding: 0px;
  background-color: transparent;
  border: none !important;
  line-height: inherit;
  display: flex;
  flex-direction: row;
  text-align: left;
}

.btn-contactme::after {
  border: none;
}