html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  font-size: .12rem;
}
.wrapper .message-wrap .m-panel {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.wrapper .message-wrap {
  height: 100%;
}
.wrapper .m-panel .empty {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .15rem;
}
.wrapper .message-wrap .panel_item {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  height: .7rem;
  width: 100%;
  padding: .1rem;
}
.wrapper .message-wrap .panel_item .panel_avatar {
  width: .5rem;
  min-width: .5rem;
  height: .5rem;
  border-radius: 5px;
  overflow: hidden;
  background-size: 100% 100%;
}
.wrapper .message-wrap .panel_item .panel_count {
  width: .2rem;
  height: .2rem;
  background-color: #f33;
  border-radius: 50%;
  color: #fff;
  line-height: .2rem;
  text-align: center;
}
.wrapper .message-wrap .panel_item .panel_avatar img {
  width: 100%;
  height: 100%;
}
.wrapper .message-wrap .panel_lastMsg {
  width: 100%;
  padding-right: .4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrapper .message-wrap .panel_item .msg-right {
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-left: .1rem;
  height: .5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--var-border-color-gray);
}
.wrapper .message-wrap .panel_item .panel_text {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: .1rem;
  flex: 1;
  overflow: hidden;
}
.wrapper .message-wrap .panel_lastMsg {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrapper .message-wrap .panel_lastMsg img {
  width: .2rem;
  height: .2rem;
}
.wrapper .message-wrap .panel_item .panel_multi-row {
  display: flex;
  justify-content: space-between;
}
.wrapper .message-wrap .panel_item .msg-time {
  width: .4rem;
  min-width: .4rem;
  height: 100%;
  font-size: .11rem;
  text-align: right;
  color: var(--var-color-gray2);
}

/**
  通讯录
*/
.address-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: var(--var-bg-color-gray);
}
.address-wrap .menu-wrap {
  background-color: #fff;
}
.address-wrap .menu-wrap .menu-item {
  width: 100%;
  height: .7rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  padding: .1rem;
}
.address-wrap .menu-wrap .menu-avator {
  width: .5rem;
  min-width: .5rem;
  height: .5rem;
  border-radius: 5px;
  overflow: hidden;
  background-color: #dedfe0;
}
.address-wrap .menu-wrap .menu-avator img {
  width: .5rem;
  height: .5rem;
}
.address-wrap .menu-wrap .menu-content {
  flex: 1;
  height: .5rem;
  display: flex;
  align-items: center;
  padding-left: .1rem;
  color: var(--var-color-black);
  font-size: .17rem;
  font-weight: 600;
  margin-left: .1rem;
  border-bottom: 1px solid var(--var-border-color-gray);
}
.menu-item .count {
  margin-right: 0.2rem;
  color: #f33;
  font-weight: 500;
  font-size: .16rem;
}
.address-wrap .concat-wrap {
  margin-top: .2rem;
  width: 100%;
  background-color: #fff;
  flex: 1;
}
.address-wrap .concat-wrap .panel_item {
  width: 100%;
  height: .7rem;
  padding: .1rem;
  display: flex;
}
.address-wrap .concat-wrap .panel_avatar {
  width: .5rem;
  height: .5rem;
  border-radius: .06rem;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--var-avator-bg-color);
}
.address-wrap .concat-wrap .panel_avatar img {
  width: 100%;
  height: 100%;
}
.address-wrap .concat-wrap .panel_text {
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: .1rem;
  font-size: .15rem;
  border-bottom: 1px solid var(--var-border-color-gray);
}
/**
  发现
*/
.find-container {
  height: 100%;
}
.find-container .find-item {
  width: 100%;
  height: .7rem;
  display: flex;
  justify-content: space-between;
  padding: .1rem;
  align-items: center;
  border-bottom: 1px solid var(--var-border-color-gray);
}
.find-container .find-item .find-avator {
  width: .4rem;
  min-width: .4rem;
  height: .4rem;
  /*background: url('../img/nim_avatar_default.png') no-repeat center;*/
  /*background-size: 100% 100%;*/
  border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}
.find-container .find-item .find-avator img {
  width: 100%;
  height: 100%;
}
.find-container .find-item .find-content {
  margin-left: .1rem;
  flex: 1;
  display: flex;
  align-items: center;
}
/**
我的
*/
.person-wrap {
  display: flex;
  flex-direction: column;
  background-color: var(--var-border-color-gray);
}
.person-wrap .account-wrap {
  height: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .15rem;
  background-color: #fff;
  border: 1px solid var(--var-border-color-gray);
}
.person-wrap .account-wrap .account-avator {
  width: .5rem;
  min-width: .5rem;
  height: .5rem;
}
.person-wrap .account-wrap .account-avator img {
  width: 100%;
  height: 100%;
}
.person-wrap .account-wrap .account-content {
  flex: 1;
  margin-left: .1rem;
  color: var(--var-text-color-gary3);
  line-height: .2rem;
  overflow: auto;
}
.person-wrap .person-item {
  width: 100%;
  height: .7rem;
  display: flex;
  justify-content: space-between;
  padding: .15rem;
  align-items: center;
  border-bottom: 1px solid var(--var-border-color-gray);
}
.person-wrap .person-item .person-avator {
  display: flex;
  align-items: center;
  width: .2rem;
  min-width: .2rem;
  height: 100%;
  background: url('../img/nim_avatar_default.png') no-repeat center;
  background-size: .2rem .2rem;
}
.person-wrap .person-item .person-avator img {
  width: .2rem;
  background-color: #fff;
}
.person-wrap .person-item .person-content {
  margin-left: .1rem;
  flex: 1;
  display: flex;
  align-items: center;
}
.person-wrapper {
  margin-top: .15rem;
  background-color: #fff;
}
.person-setting {
  margin-top: .1rem;
  background-color: #fff;
}

.next-link {
  width: .2rem;
  height: .2rem;
  background: url(../img/nim_arrow_right.png) no-repeat center;
  background-size: 100% 100%;
}
/*.search-mask {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*}*/
/*.search-mask .search-wrap {*/
/*  flex: 1;*/
/*}*/
.play-icon {
  
}