.bdColor[data-v-14c7d49e] {
  color: #0052CC;
}
.textColor[data-v-14c7d49e] {
  color: #0052cc;
}
.warningText[data-v-14c7d49e] {
  color: #e6a23c;
}
.dangerText[data-v-14c7d49e] {
  color: #d9001b;
}
.successText[data-v-14c7d49e] {
  color: #67c23a;
}
.warningBg[data-v-14c7d49e] {
  background-color: #e6a23c;
}
.dangerBg[data-v-14c7d49e] {
  background-color: #d9001b;
}
.successBg[data-v-14c7d49e] {
  background-color: #67c23a;
}
.primaryBg[data-v-14c7d49e] {
  background-color: #4573d8;
}
.grayBg[data-v-14c7d49e] {
  background-color: #aaaaaa;
}
.fl_sb[data-v-14c7d49e] {
  display: flex;
  justify-content: space-between;
}
.fl_as[data-v-14c7d49e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl_st[data-v-14c7d49e] {
  display: flex;
  align-items: center;
  justify-content: start;
}
.fl_cc[data-v-14c7d49e] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl_wrap[data-v-14c7d49e] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.colorPr[data-v-14c7d49e] {
  color: #2662f0;
}
.colorTxt892[data-v-14c7d49e] {
  color: #8f92a1;
}
.textDUb[data-v-14c7d49e] {
  text-decoration: underline;
  white-space: pre-wrap;
}
.fz14[data-v-14c7d49e] {
  font-size: 14px;
}
.fz_20[data-v-14c7d49e] {
  font-size: 22px;
  font-weight: 400;
  color: #566770;
}
.fz_waming[data-v-14c7d49e] {
  color: #e6a23c;
}
.text5[data-v-14c7d49e] {
  display: inline-block;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt20[data-v-14c7d49e] {
  margin-top: 20px !important;
}
.noData[data-v-14c7d49e] {
  margin: 200px 0;
  text-align: center;
}
.el-button--primary[data-v-14c7d49e]:not(.is-disabled) {
  border: 1px solid #0052CC;
  color: #0052CC;
  background: #fff;
}
.el-button--primary[data-v-14c7d49e]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button[data-v-14c7d49e]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button--primary.solid[data-v-14c7d49e] {
  color: #FFF;
  background-color: #0052CC;
  border-color: #0052CC;
}
.el-button[data-v-14c7d49e] {
  min-width: 80px;
  border-radius: 12px;
}
.el-input__inner[data-v-14c7d49e] {
  border-radius: 8px;
}
.el-button--primary.bg[data-v-14c7d49e] {
  border-radius: 30px;
  border: 1px solid #0052cc;
  color: #fff;
  background: #0052cc;
}
.el-button--primary.bg2f[data-v-14c7d49e] {
  width: 100%;
  border: 1px solid #0052CC;
  color: #fff;
  background: #0052CC;
}
.el-table[data-v-14c7d49e] {
  overflow: hidden;
  border-radius: 4px;
}
.el-table .el-table__cell[data-v-14c7d49e] {
  padding: 22px 0;
}
.el-table .el-table__body-wrapper[data-v-14c7d49e] {
  padding-right: 20px;
}
.el-date-editor .el-range-separator[data-v-14c7d49e] {
  width: 10%;
}
.tabsRgBt[data-v-14c7d49e] {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}
.message-title[data-v-14c7d49e] {
  cursor: pointer;
}
.handle-row[data-v-14c7d49e] {
  margin-top: 30px;
}
.container-bottom[data-v-14c7d49e] {
  margin-top: 50px;
  text-align: right;
}
.containerMsg .btns[data-v-14c7d49e] {
  margin-bottom: 20px;
  text-align: right;
}
.containerMsg .title[data-v-14c7d49e] {
  min-width: 250px;
}
.containerMsg .timer[data-v-14c7d49e] {
  text-align: right;
  flex: 1;
  margin-right: 20px;
}
.noread[data-v-14c7d49e],
.read[data-v-14c7d49e] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: red;
  border-radius: 4px;
  margin-left: 15px;
  height: 20px;
  padding: 5px 8px;
  padding-top: 2px;
  box-sizing: border-box;
}
.noread[data-v-14c7d49e] {
  color: #000;
  background-color: #d7d7d7;
}
.uls[data-v-14c7d49e] {
  display: flex;
  align-items: center;
}
.uls li[data-v-14c7d49e] {
  width: 30%;
}

.bdColor[data-v-71386d9d] {
  color: #0052CC;
}
.textColor[data-v-71386d9d] {
  color: #0052cc;
}
.warningText[data-v-71386d9d] {
  color: #e6a23c;
}
.dangerText[data-v-71386d9d] {
  color: #d9001b;
}
.successText[data-v-71386d9d] {
  color: #67c23a;
}
.warningBg[data-v-71386d9d] {
  background-color: #e6a23c;
}
.dangerBg[data-v-71386d9d] {
  background-color: #d9001b;
}
.successBg[data-v-71386d9d] {
  background-color: #67c23a;
}
.primaryBg[data-v-71386d9d] {
  background-color: #4573d8;
}
.grayBg[data-v-71386d9d] {
  background-color: #aaaaaa;
}
.fl_sb[data-v-71386d9d] {
  display: flex;
  justify-content: space-between;
}
.fl_as[data-v-71386d9d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl_st[data-v-71386d9d] {
  display: flex;
  align-items: center;
  justify-content: start;
}
.fl_cc[data-v-71386d9d] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl_wrap[data-v-71386d9d] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.colorPr[data-v-71386d9d] {
  color: #2662f0;
}
.colorTxt892[data-v-71386d9d] {
  color: #8f92a1;
}
.textDUb[data-v-71386d9d] {
  text-decoration: underline;
  white-space: pre-wrap;
}
.fz14[data-v-71386d9d] {
  font-size: 14px;
}
.fz_20[data-v-71386d9d] {
  font-size: 22px;
  font-weight: 400;
  color: #566770;
}
.fz_waming[data-v-71386d9d] {
  color: #e6a23c;
}
.text5[data-v-71386d9d] {
  display: inline-block;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt20[data-v-71386d9d] {
  margin-top: 20px !important;
}
.noData[data-v-71386d9d] {
  margin: 200px 0;
  text-align: center;
}
.el-button--primary[data-v-71386d9d]:not(.is-disabled) {
  border: 1px solid #0052CC;
  color: #0052CC;
  background: #fff;
}
.el-button--primary[data-v-71386d9d]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button[data-v-71386d9d]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button--primary.solid[data-v-71386d9d] {
  color: #FFF;
  background-color: #0052CC;
  border-color: #0052CC;
}
.el-button[data-v-71386d9d] {
  min-width: 80px;
  border-radius: 12px;
}
.el-input__inner[data-v-71386d9d] {
  border-radius: 8px;
}
.el-button--primary.bg[data-v-71386d9d] {
  border-radius: 30px;
  border: 1px solid #0052cc;
  color: #fff;
  background: #0052cc;
}
.el-button--primary.bg2f[data-v-71386d9d] {
  width: 100%;
  border: 1px solid #0052CC;
  color: #fff;
  background: #0052CC;
}
.el-table[data-v-71386d9d] {
  overflow: hidden;
  border-radius: 4px;
}
.el-table .el-table__cell[data-v-71386d9d] {
  padding: 22px 0;
}
.el-table .el-table__body-wrapper[data-v-71386d9d] {
  padding-right: 20px;
}
.el-date-editor .el-range-separator[data-v-71386d9d] {
  width: 10%;
}
.tabsRgBt[data-v-71386d9d] {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}
.message-title[data-v-71386d9d] {
  cursor: pointer;
}
.handle-row[data-v-71386d9d] {
  margin-top: 30px;
}
.container-bottom[data-v-71386d9d] {
  margin-top: 50px;
  text-align: right;
}
.containerMsg .btns[data-v-71386d9d] {
  margin-bottom: 20px;
  text-align: right;
}
.containerMsg .title[data-v-71386d9d] {
  min-width: 250px;
  max-width: 80%;
  line-height: 30px;
}
.containerMsg .timer[data-v-71386d9d] {
  text-align: right;
  flex: 1;
  margin-right: 20px;
}
.noread[data-v-71386d9d],
.read[data-v-71386d9d] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: red;
  border-radius: 4px;
  margin-left: 15px;
  height: 20px;
  padding: 5px 8px;
  padding-top: 2px;
  box-sizing: border-box;
}
.noread[data-v-71386d9d] {
  color: #000;
  background-color: #d7d7d7;
}
.uls[data-v-71386d9d] {
  display: flex;
  align-items: center;
}
.uls li[data-v-71386d9d] {
  width: 30%;
}

.bdColor {
  color: #0052CC;
}
.textColor {
  color: #0052cc;
}
.warningText {
  color: #e6a23c;
}
.dangerText {
  color: #d9001b;
}
.successText {
  color: #67c23a;
}
.warningBg {
  background-color: #e6a23c;
}
.dangerBg {
  background-color: #d9001b;
}
.successBg {
  background-color: #67c23a;
}
.primaryBg {
  background-color: #4573d8;
}
.grayBg {
  background-color: #aaaaaa;
}
.fl_sb {
  display: flex;
  justify-content: space-between;
}
.fl_as {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl_st {
  display: flex;
  align-items: center;
  justify-content: start;
}
.fl_cc {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl_wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.colorPr {
  color: #2662f0;
}
.colorTxt892 {
  color: #8f92a1;
}
.textDUb {
  text-decoration: underline;
  white-space: pre-wrap;
}
.fz14 {
  font-size: 14px;
}
.fz_20 {
  font-size: 22px;
  font-weight: 400;
  color: #566770;
}
.fz_waming {
  color: #e6a23c;
}
.text5 {
  display: inline-block;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt20 {
  margin-top: 20px !important;
}
.noData {
  margin: 200px 0;
  text-align: center;
}
.el-button--primary:not(.is-disabled) {
  border: 1px solid #0052CC;
  color: #0052CC;
  background: #fff;
}
.el-button--primary:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button--primary.solid {
  color: #FFF;
  background-color: #0052CC;
  border-color: #0052CC;
}
.el-button {
  min-width: 80px;
  border-radius: 12px;
}
.el-input__inner {
  border-radius: 8px;
}
.el-button--primary.bg {
  border-radius: 30px;
  border: 1px solid #0052cc;
  color: #fff;
  background: #0052cc;
}
.el-button--primary.bg2f {
  width: 100%;
  border: 1px solid #0052CC;
  color: #fff;
  background: #0052CC;
}
.el-table {
  overflow: hidden;
  border-radius: 4px;
}
.el-table .el-table__cell {
  padding: 22px 0;
}
.el-table .el-table__body-wrapper {
  padding-right: 20px;
}
.el-date-editor .el-range-separator {
  width: 10%;
}
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
  background-color: #f0f2f5;
  color: #1d1d1f;
  transition: background-color 0.3s, color 0.3s;
}
/* 暗黑模式 */
.dark-mode body {
  background-color: #1a1a1a;
  color: #f5f5f7;
}
/* 图标样式 */
[class^="icon-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
/* 图标定义 */
.icon-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23666' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
}
.dark-mode .icon-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23bbb' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
}
.icon-more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23666' d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm0 160c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm0 160c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32z'/%3E%3C/svg%3E");
}
.dark-mode .icon-more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23bbb' d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm0 160c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm0 160c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32z'/%3E%3C/svg%3E");
}
.icon-moon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23666' d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6.8-17.4 4.4C63.3 114.4 48 170.9 48 256c0 110.5 89.5 200 200 200s200-89.5 200-200S330.5 56 220.5 56c-16.3 0-32 1.8-47 5.3z'/%3E%3C/svg%3E");
}
.icon-sun {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f9d71c' d='M256 512A256 256 0 0 0 256 0a256 256 0 0 0 0 512zm0-384a128 128 0 0 1 0 256 128 128 0 0 1 0-256zM256 51.2a204.8 204.8 0 1 1 0 409.6 204.8 204.8 0 0 1 0-409.6z'/%3E%3C/svg%3E");
}
.icon-emoji {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%23666' d='M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm174.4 176c-21.6 14.4-49.6 24-80.4 24-30.8 0-58.8-9.6-80.4-24C64.4 370.3 48 321.1 48 256c0-65.1 16.4-114.3 43.6-152h360.8c27.2 37.7 43.6 86.9 43.6 152 0 65.1-16.4 114.3-43.6 152z'/%3E%3C/svg%3E");
}
.dark-mode .icon-emoji {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%23bbb' d='M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm174.4 176c-21.6 14.4-49.6 24-80.4 24-30.8 0-58.8-9.6-80.4-24C64.4 370.3 48 321.1 48 256c0-65.1 16.4-114.3 43.6-152h360.8c27.2 37.7 43.6 86.9 43.6 152 0 65.1-16.4 114.3-43.6 152z'/%3E%3C/svg%3E");
}
.icon-attach {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23666' d='M216 0h80c13.3 0 24 10.7 24 24v168c0 13.3-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24V24c0-13.3 10.7-24 24-24zm0 264c0-13.3 10.7-24 24-24h128c13.3 0 24 10.7 24 24v80c0 13.3-10.7 24-24 24H240c-13.3 0-24-10.7-24-24v-80zM504 464H48c-26.5 0-48-21.5-48-48V128c0-26.5 21.5-48 48-48h456c26.5 0 48 21.5 48 48v288c0 26.5-21.5 48-48 48z'/%3E%3C/svg%3E");
}
.dark-mode .icon-attach {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23bbb' d='M216 0h80c13.3 0 24 10.7 24 24v168c0 13.3-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24V24c0-13.3 10.7-24 24-24zm0 264c0-13.3 10.7-24 24-24h128c13.3 0 24 10.7 24 24v80c0 13.3-10.7 24-24 24H240c-13.3 0-24-10.7-24-24v-80zM504 464H48c-26.5 0-48-21.5-48-48V128c0-26.5 21.5-48 48-48h456c26.5 0 48 21.5 48 48v288c0 26.5-21.5 48-48 48z'/%3E%3C/svg%3E");
}
.icon-capture {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23666' d='M360 128h-72c-13.3 0-24-10.7-24-24V24c0-13.3-10.7-24-24-24H144c-13.3 0-24 10.7-24 24v80c0 13.3-10.7 24-24 24H24C10.7 128 0 138.7 0 152v304c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V152c0-13.3-10.7-24-24-24zM192 384c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80zm0-128c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z'/%3E%3C/svg%3E");
}
.dark-mode .icon-capture {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23bbb' d='M360 128h-72c-13.3 0-24-10.7-24-24V24c0-13.3-10.7-24-24-24H144c-13.3 0-24 10.7-24 24v80c0 13.3-10.7 24-24 24H24C10.7 128 0 138.7 0 152v304c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V152c0-13.3-10.7-24-24-24zM192 384c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80zm0-128c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z'/%3E%3C/svg%3E");
}
.icon-send {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 153 483.4l-64-160c-1.8-4.6-1.6-9.7.6-14.2s5.4-8.3 10.1-10.1l416-64c12.1-1.9 24.2 3.4 31.2 13.5z'/%3E%3C/svg%3E");
}
.icon-camera {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M149.1 64.8L138.7 96h-25.4v-31.2L96 85.3v31.2H64V85.3L46.3 64.8 32 80v48h320V80L465.7 64.8 448 85.3V64H64v16zM416 128H96c-17.7 0-32 14.3-32 32v256c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32zm0 256H96V160h320v224zM256 352c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm0-96c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z'/%3E%3C/svg%3E");
}
.icon-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23333' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
}
/* 页面容器 */
.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  height: 70vh;
  display: flex;
  flex-direction: column;
}
/* 页面标题 */
.page-header {
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}
.dark-mode .page-header {
  border-bottom-color: #333;
}
.page-header h1 {
  font-size: 24px;
  font-weight: 600;
}
/* 主内容区 */
.main-content {
  display: flex;
  flex: 1;
  gap: 20px;
  height: calc(100% - 80px);
}
/* 消息区域 */
.message-area {
  flex: 3;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.dark-mode .message-area {
  background-color: #2d2d2d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* 消息头部 */
.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.dark-mode .message-header {
  border-bottom-color: #3d3d3d;
}
.chat-info .chat-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.online-status {
  font-size: 14px;
  color: #666;
}
.dark-mode .online-status {
  color: #aaa;
}
.message-controls {
  display: flex;
  gap: 10px;
}
.control-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}
.control-btn:hover {
  background-color: #f0f0f0;
}
.dark-mode .control-btn:hover {
  background-color: #3d3d3d;
}
/* 消息列表 */
.message-list {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f9f9f9;
}
.dark-mode .message-list {
  background-color: #1e1e1e;
}
/* 滚动条样式 */
.message-list::-webkit-scrollbar {
  width: 6px;
}
.message-list::-webkit-scrollbar-track {
  background: transparent;
}
.message-list::-webkit-scrollbar-thumb {
  background-color: rgba(150, 150, 150, 0.5);
  border-radius: 3px;
}
.message-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(150, 150, 150, 0.8);
}
/* 时间分割线 */
.time-divider {
  text-align: center;
  margin: 15px 0;
  font-size: 12px;
  color: #999;
}
/* 消息项 */
.message-item {
  display: flex;
  margin-bottom: 30px;
  max-width: 80%;
  -webkit-animation: fadeIn 0.3s ease;
          animation: fadeIn 0.3s ease;
}
.message-item.received {
  align-self: flex-start;
}
.message-item.sent {
  margin-left: auto;
  flex-direction: row-reverse;
}
/* 头像 */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 10px;
}
/* 消息气泡 */
.message-bubble {
  padding: 10px 15px;
  border-radius: 18px;
  position: relative;
  line-height: 1.5;
  max-width: 70%;
  word-break: break-all;
}
.received-bubble {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-top-left-radius: 4px;
}
.dark-mode .received-bubble {
  background-color: #333;
  border-color: #444;
}
.sent-bubble {
  background-color: #0052cc;
  color: #fff;
  border-top-right-radius: 4px;
}
/* 消息时间 */
.message-time {
  font-size: 11px;
  margin-top: 5px;
  display: block;
  opacity: 0.8;
  text-align: right;
}
/* 消息输入区域 */
.message-input-container {
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
}
.dark-mode .message-input-container {
  border-top-color: #3d3d3d;
}
.input-tools {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}
.tool-btn:hover {
  background-color: #f0f0f0;
}
.dark-mode .tool-btn:hover {
  background-color: #3d3d3d;
}
.input-form {
  display: flex;
  gap: 10px;
}
.message-input {
  flex: 1;
  padding: 12px 18px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  resize: none;
  outline: none;
  font-size: 14px;
  background-color: #f9f9f9;
  transition: all 0.2s;
}
.dark-mode .message-input {
  background-color: #333;
  border-color: #444;
  color: #f5f5f5;
}
.message-input:focus {
  border-color: #0078d7;
  background-color: #fff;
}
.dark-mode .message-input:focus {
  background-color: #3d3d3d;
}
.send-btn {
  padding: 0 18px;
  background-color: #0078d7;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: background-color 0.2s;
}
.send-btn:hover {
  background-color: #005a9e;
}
.send-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
/* 个人信息区域 */
.profile-area {
  flex: 1;
  max-width: 320px;
}
.profile-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dark-mode .profile-card {
  background-color: #2d2d2d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* 个人头像区域 */
.profile-header {
  padding: 25px 20px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.dark-mode .profile-header {
  border-bottom-color: #3d3d3d;
}
.avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 15px;
}
.profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 4px solid #f0f0f0;
}
.dark-mode .profile-avatar {
  border-color: #3d3d3d;
}
.avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #0078d7;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
.avatar-edit:hover {
  background-color: #005a9e;
}
.profile-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
}
.profile-role {
  color: #666;
  font-size: 14px;
}
.dark-mode .profile-role {
  color: #aaa;
}
/* 个人信息详情 */
.profile-details {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.dark-mode .profile-details {
  border-bottom-color: #3d3d3d;
}
.details-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}
.dark-mode .details-title {
  color: #ddd;
}
.info-list {
  list-style: none;
}
.info-item {
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  font-weight: 600;
}
.info-active {
  border-bottom: 1px solid #0052CC !important;
  color: #0052CC;
}
.info-item .el-badge {
  width: calc(100% - 40px);
  display: inline-block;
  margin-left: 10px;
  position: relative;
}
.info-item .el-badge span {
  max-width: 100%;
  text-align: left;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: -20px;
}
.info-item .el-badge .el-badge__content {
  position: absolute;
  top: -20px;
}
.dark-mode .info-item {
  border-bottom-color: #3d3d3d;
}
.info-item:last-child {
  border-bottom: none;
}
.info-label {
  color: #666;
  font-size: 14px;
}
.dark-mode .info-label {
  color: #aaa;
}
.info-value {
  font-size: 14px;
  text-align: right;
}
/* 账户状态 */
.account-status {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.dark-mode .account-status {
  border-bottom-color: #3d3d3d;
}
.status-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00c853;
}
.status-text {
  flex: 1;
  font-size: 14px;
}
.status-btn {
  background: none;
  border: none;
  color: #0078d7;
  font-size: 14px;
  cursor: pointer;
  padding: 5px 0;
}
.status-btn:hover {
  text-decoration: underline;
}
/* 操作按钮 */
.profile-actions {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.action-btn {
  padding: 12px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: center;
}
.edit-profile {
  background-color: #0078d7;
  color: white;
}
.edit-profile:hover {
  background-color: #005a9e;
}
.change-pwd {
  background-color: #f0f0f0;
  color: #333;
}
.dark-mode .change-pwd {
  background-color: #3d3d3d;
  color: #f5f5f5;
}
.change-pwd:hover {
  background-color: #e0e0e0;
}
.dark-mode .change-pwd:hover {
  background-color: #4d4d4d;
}
/* 动画效果 */
@-webkit-keyframes fadeIn {
from {
    opacity: 0;
    transform: translateY(10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes fadeIn {
from {
    opacity: 0;
    transform: translateY(10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.ripple-container .blue-ripple {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
}
.ripple-container .blue-ripple span,
.ripple-container .blue-ripple div,
.ripple-container .blue-ripple .div {
  width: 3px;
  border-radius: 18px;
  margin-right: 4px;
}
.ripple-container .blue-ripple div {
  background: rgba(0, 0, 0, 0.16);
}
.ripple-container .blue-ripple .div {
  background: rgba(0, 0, 0, 0.16);
}
@-webkit-keyframes bar {
0% {
    background: #3370ff;
    margin-top: 5%;
    height: 10%;
}
50% {
    background: #3370ff;
    margin-top: 0;
    height: 100%;
}
100% {
    background: #3370ff;
    margin-top: 5%;
    height: 10%;
}
}
@keyframes bar {
0% {
    background: #3370ff;
    margin-top: 5%;
    height: 10%;
}
50% {
    background: #3370ff;
    margin-top: 0;
    height: 100%;
}
100% {
    background: #3370ff;
    margin-top: 5%;
    height: 10%;
}
}
.ripple-container .blue-ripple span:nth-child(1) {
  -webkit-animation: bar 2s 0.2s infinite linear;
          animation: bar 2s 0.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(2) {
  -webkit-animation: bar 2s 0.4s infinite linear;
          animation: bar 2s 0.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(3) {
  -webkit-animation: bar 2s 0.6s infinite linear;
          animation: bar 2s 0.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(4) {
  -webkit-animation: bar 2s 0.8s infinite linear;
          animation: bar 2s 0.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(5) {
  -webkit-animation: bar 2s 1s infinite linear;
          animation: bar 2s 1s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(6) {
  -webkit-animation: bar 2s 1.2s infinite linear;
          animation: bar 2s 1.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(7) {
  -webkit-animation: bar 2s 1.4s infinite linear;
          animation: bar 2s 1.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(8) {
  -webkit-animation: bar 2s 1.6s infinite linear;
          animation: bar 2s 1.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(9) {
  -webkit-animation: bar 2s 1.8s infinite linear;
          animation: bar 2s 1.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(10) {
  -webkit-animation: bar 2s 2s infinite linear;
          animation: bar 2s 2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(11) {
  -webkit-animation: bar 2s 2.2s infinite linear;
          animation: bar 2s 2.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(12) {
  -webkit-animation: bar 2s 2.4s infinite linear;
          animation: bar 2s 2.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(13) {
  -webkit-animation: bar 2s 2.6s infinite linear;
          animation: bar 2s 2.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(14) {
  -webkit-animation: bar 2s 2.8s infinite linear;
          animation: bar 2s 2.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(15) {
  -webkit-animation: bar 2s 3s infinite linear;
          animation: bar 2s 3s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(16) {
  -webkit-animation: bar 2s 3.2s infinite linear;
          animation: bar 2s 3.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(17) {
  -webkit-animation: bar 2s 3.4s infinite linear;
          animation: bar 2s 3.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(18) {
  -webkit-animation: bar 2s 3.6s infinite linear;
          animation: bar 2s 3.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(19) {
  -webkit-animation: bar 2s 3.8s infinite linear;
          animation: bar 2s 3.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(20) {
  -webkit-animation: bar 2s 4s infinite linear;
          animation: bar 2s 4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(21) {
  -webkit-animation: bar 2s 4.2s infinite linear;
          animation: bar 2s 4.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(22) {
  -webkit-animation: bar 2s 4.4s infinite linear;
          animation: bar 2s 4.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(23) {
  -webkit-animation: bar 2s 4.6s infinite linear;
          animation: bar 2s 4.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(24) {
  -webkit-animation: bar 2s 4.8s infinite linear;
          animation: bar 2s 4.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(25) {
  -webkit-animation: bar 2s 5s infinite linear;
          animation: bar 2s 5s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(26) {
  -webkit-animation: bar 2s 5.2s infinite linear;
          animation: bar 2s 5.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(27) {
  -webkit-animation: bar 2s 5.4s infinite linear;
          animation: bar 2s 5.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(28) {
  -webkit-animation: bar 2s 5.6s infinite linear;
          animation: bar 2s 5.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(29) {
  -webkit-animation: bar 2s 5.8s infinite linear;
          animation: bar 2s 5.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(30) {
  -webkit-animation: bar 2s 6s infinite linear;
          animation: bar 2s 6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(31) {
  -webkit-animation: bar 2s 6.2s infinite linear;
          animation: bar 2s 6.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(32) {
  -webkit-animation: bar 2s 6.4s infinite linear;
          animation: bar 2s 6.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(33) {
  -webkit-animation: bar 2s 6.6s infinite linear;
          animation: bar 2s 6.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(34) {
  -webkit-animation: bar 2s 6.8s infinite linear;
          animation: bar 2s 6.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(35) {
  -webkit-animation: bar 2s 7s infinite linear;
          animation: bar 2s 7s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(36) {
  -webkit-animation: bar 2s 7.2s infinite linear;
          animation: bar 2s 7.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(37) {
  -webkit-animation: bar 2s 7.4s infinite linear;
          animation: bar 2s 7.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(38) {
  -webkit-animation: bar 2s 7.6s infinite linear;
          animation: bar 2s 7.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(39) {
  -webkit-animation: bar 2s 7.8s infinite linear;
          animation: bar 2s 7.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(40) {
  -webkit-animation: bar 2s 8s infinite linear;
          animation: bar 2s 8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(41) {
  -webkit-animation: bar 2s 8.2s infinite linear;
          animation: bar 2s 8.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(42) {
  -webkit-animation: bar 2s 8.4s infinite linear;
          animation: bar 2s 8.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(43) {
  -webkit-animation: bar 2s 8.6s infinite linear;
          animation: bar 2s 8.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(44) {
  -webkit-animation: bar 2s 8.8s infinite linear;
          animation: bar 2s 8.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(45) {
  -webkit-animation: bar 2s 9s infinite linear;
          animation: bar 2s 9s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(46) {
  -webkit-animation: bar 2s 9.2s infinite linear;
          animation: bar 2s 9.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(47) {
  -webkit-animation: bar 2s 9.4s infinite linear;
          animation: bar 2s 9.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(48) {
  -webkit-animation: bar 2s 9.6s infinite linear;
          animation: bar 2s 9.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(49) {
  -webkit-animation: bar 2s 9.8s infinite linear;
          animation: bar 2s 9.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(50) {
  -webkit-animation: bar 2s 10s infinite linear;
          animation: bar 2s 10s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(51) {
  -webkit-animation: bar 2s 10.2s infinite linear;
          animation: bar 2s 10.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(52) {
  -webkit-animation: bar 2s 10.4s infinite linear;
          animation: bar 2s 10.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(53) {
  -webkit-animation: bar 2s 10.6s infinite linear;
          animation: bar 2s 10.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(54) {
  -webkit-animation: bar 2s 10.8s infinite linear;
          animation: bar 2s 10.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(55) {
  -webkit-animation: bar 2s 11s infinite linear;
          animation: bar 2s 11s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(56) {
  -webkit-animation: bar 2s 11.2s infinite linear;
          animation: bar 2s 11.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(57) {
  -webkit-animation: bar 2s 11.4s infinite linear;
          animation: bar 2s 11.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(58) {
  -webkit-animation: bar 2s 11.6s infinite linear;
          animation: bar 2s 11.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(59) {
  -webkit-animation: bar 2s 11.8s infinite linear;
          animation: bar 2s 11.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(60) {
  -webkit-animation: bar 2s 12s infinite linear;
          animation: bar 2s 12s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(61) {
  -webkit-animation: bar 2s 12.2s infinite linear;
          animation: bar 2s 12.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(62) {
  -webkit-animation: bar 2s 12.4s infinite linear;
          animation: bar 2s 12.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(63) {
  -webkit-animation: bar 2s 12.6s infinite linear;
          animation: bar 2s 12.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(64) {
  -webkit-animation: bar 2s 12.8s infinite linear;
          animation: bar 2s 12.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(65) {
  -webkit-animation: bar 2s 13s infinite linear;
          animation: bar 2s 13s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(66) {
  -webkit-animation: bar 2s 13.2s infinite linear;
          animation: bar 2s 13.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(67) {
  -webkit-animation: bar 2s 13.4s infinite linear;
          animation: bar 2s 13.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(68) {
  -webkit-animation: bar 2s 13.6s infinite linear;
          animation: bar 2s 13.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(69) {
  -webkit-animation: bar 2s 13.8s infinite linear;
          animation: bar 2s 13.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(70) {
  -webkit-animation: bar 2s 14s infinite linear;
          animation: bar 2s 14s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(71) {
  -webkit-animation: bar 2s 14.2s infinite linear;
          animation: bar 2s 14.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(72) {
  -webkit-animation: bar 2s 14.4s infinite linear;
          animation: bar 2s 14.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(73) {
  -webkit-animation: bar 2s 14.6s infinite linear;
          animation: bar 2s 14.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(74) {
  -webkit-animation: bar 2s 14.8s infinite linear;
          animation: bar 2s 14.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(75) {
  -webkit-animation: bar 2s 15s infinite linear;
          animation: bar 2s 15s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(76) {
  -webkit-animation: bar 2s 15.2s infinite linear;
          animation: bar 2s 15.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(77) {
  -webkit-animation: bar 2s 15.4s infinite linear;
          animation: bar 2s 15.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(78) {
  -webkit-animation: bar 2s 15.6s infinite linear;
          animation: bar 2s 15.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(79) {
  -webkit-animation: bar 2s 15.8s infinite linear;
          animation: bar 2s 15.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(80) {
  -webkit-animation: bar 2s 16s infinite linear;
          animation: bar 2s 16s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(81) {
  -webkit-animation: bar 2s 16.2s infinite linear;
          animation: bar 2s 16.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(82) {
  -webkit-animation: bar 2s 16.4s infinite linear;
          animation: bar 2s 16.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(83) {
  -webkit-animation: bar 2s 16.6s infinite linear;
          animation: bar 2s 16.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(84) {
  -webkit-animation: bar 2s 16.8s infinite linear;
          animation: bar 2s 16.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(85) {
  -webkit-animation: bar 2s 17s infinite linear;
          animation: bar 2s 17s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(86) {
  -webkit-animation: bar 2s 17.2s infinite linear;
          animation: bar 2s 17.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(87) {
  -webkit-animation: bar 2s 17.4s infinite linear;
          animation: bar 2s 17.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(88) {
  -webkit-animation: bar 2s 17.6s infinite linear;
          animation: bar 2s 17.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(89) {
  -webkit-animation: bar 2s 17.8s infinite linear;
          animation: bar 2s 17.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(90) {
  -webkit-animation: bar 2s 18s infinite linear;
          animation: bar 2s 18s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(91) {
  -webkit-animation: bar 2s 18.2s infinite linear;
          animation: bar 2s 18.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(92) {
  -webkit-animation: bar 2s 18.4s infinite linear;
          animation: bar 2s 18.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(93) {
  -webkit-animation: bar 2s 18.6s infinite linear;
          animation: bar 2s 18.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(94) {
  -webkit-animation: bar 2s 18.8s infinite linear;
          animation: bar 2s 18.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(95) {
  -webkit-animation: bar 2s 19s infinite linear;
          animation: bar 2s 19s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(96) {
  -webkit-animation: bar 2s 19.2s infinite linear;
          animation: bar 2s 19.2s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(97) {
  -webkit-animation: bar 2s 19.4s infinite linear;
          animation: bar 2s 19.4s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(98) {
  -webkit-animation: bar 2s 19.6s infinite linear;
          animation: bar 2s 19.6s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(99) {
  -webkit-animation: bar 2s 19.8s infinite linear;
          animation: bar 2s 19.8s infinite linear;
}
.ripple-container .blue-ripple span:nth-child(100) {
  -webkit-animation: bar 2s 20s infinite linear;
          animation: bar 2s 20s infinite linear;
}

.bdColor[data-v-5d903f9d] {
  color: #0052CC;
}
.textColor[data-v-5d903f9d] {
  color: #0052cc;
}
.warningText[data-v-5d903f9d] {
  color: #e6a23c;
}
.dangerText[data-v-5d903f9d] {
  color: #d9001b;
}
.successText[data-v-5d903f9d] {
  color: #67c23a;
}
.warningBg[data-v-5d903f9d] {
  background-color: #e6a23c;
}
.dangerBg[data-v-5d903f9d] {
  background-color: #d9001b;
}
.successBg[data-v-5d903f9d] {
  background-color: #67c23a;
}
.primaryBg[data-v-5d903f9d] {
  background-color: #4573d8;
}
.grayBg[data-v-5d903f9d] {
  background-color: #aaaaaa;
}
.fl_sb[data-v-5d903f9d] {
  display: flex;
  justify-content: space-between;
}
.fl_as[data-v-5d903f9d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl_st[data-v-5d903f9d] {
  display: flex;
  align-items: center;
  justify-content: start;
}
.fl_cc[data-v-5d903f9d] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl_wrap[data-v-5d903f9d] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.colorPr[data-v-5d903f9d] {
  color: #2662f0;
}
.colorTxt892[data-v-5d903f9d] {
  color: #8f92a1;
}
.textDUb[data-v-5d903f9d] {
  text-decoration: underline;
  white-space: pre-wrap;
}
.fz14[data-v-5d903f9d] {
  font-size: 14px;
}
.fz_20[data-v-5d903f9d] {
  font-size: 22px;
  font-weight: 400;
  color: #566770;
}
.fz_waming[data-v-5d903f9d] {
  color: #e6a23c;
}
.text5[data-v-5d903f9d] {
  display: inline-block;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt20[data-v-5d903f9d] {
  margin-top: 20px !important;
}
.noData[data-v-5d903f9d] {
  margin: 200px 0;
  text-align: center;
}
.el-button--primary[data-v-5d903f9d]:not(.is-disabled) {
  border: 1px solid #0052CC;
  color: #0052CC;
  background: #fff;
}
.el-button--primary[data-v-5d903f9d]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button[data-v-5d903f9d]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button--primary.solid[data-v-5d903f9d] {
  color: #FFF;
  background-color: #0052CC;
  border-color: #0052CC;
}
.el-button[data-v-5d903f9d] {
  min-width: 80px;
  border-radius: 12px;
}
.el-input__inner[data-v-5d903f9d] {
  border-radius: 8px;
}
.el-button--primary.bg[data-v-5d903f9d] {
  border-radius: 30px;
  border: 1px solid #0052cc;
  color: #fff;
  background: #0052cc;
}
.el-button--primary.bg2f[data-v-5d903f9d] {
  width: 100%;
  border: 1px solid #0052CC;
  color: #fff;
  background: #0052CC;
}
.el-table[data-v-5d903f9d] {
  overflow: hidden;
  border-radius: 4px;
}
.el-table .el-table__cell[data-v-5d903f9d] {
  padding: 22px 0;
}
.el-table .el-table__body-wrapper[data-v-5d903f9d] {
  padding-right: 20px;
}
.el-date-editor .el-range-separator[data-v-5d903f9d] {
  width: 10%;
}
.new-msg[data-v-5d903f9d] {
  width: 100%;
  height: 90vh;
  background-color: #f2f2f2;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.new-msg .new-msg-dialog[data-v-5d903f9d] {
  width: 800px;
  background-color: #fff;
  overflow: hidden;
  margin: 0 auto;
  padding: 20px 40px;
  margin-bottom: 20px;
}
[data-v-5d903f9d] img {
  max-width: 100% !important;
}
.form-label .left[data-v-5d903f9d] {
  width: 200px;
}

.bdColor[data-v-294160e0] {
  color: #0052CC;
}
.textColor[data-v-294160e0] {
  color: #0052cc;
}
.warningText[data-v-294160e0] {
  color: #e6a23c;
}
.dangerText[data-v-294160e0] {
  color: #d9001b;
}
.successText[data-v-294160e0] {
  color: #67c23a;
}
.warningBg[data-v-294160e0] {
  background-color: #e6a23c;
}
.dangerBg[data-v-294160e0] {
  background-color: #d9001b;
}
.successBg[data-v-294160e0] {
  background-color: #67c23a;
}
.primaryBg[data-v-294160e0] {
  background-color: #4573d8;
}
.grayBg[data-v-294160e0] {
  background-color: #aaaaaa;
}
.fl_sb[data-v-294160e0] {
  display: flex;
  justify-content: space-between;
}
.fl_as[data-v-294160e0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl_st[data-v-294160e0] {
  display: flex;
  align-items: center;
  justify-content: start;
}
.fl_cc[data-v-294160e0] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl_wrap[data-v-294160e0] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.colorPr[data-v-294160e0] {
  color: #2662f0;
}
.colorTxt892[data-v-294160e0] {
  color: #8f92a1;
}
.textDUb[data-v-294160e0] {
  text-decoration: underline;
  white-space: pre-wrap;
}
.fz14[data-v-294160e0] {
  font-size: 14px;
}
.fz_20[data-v-294160e0] {
  font-size: 22px;
  font-weight: 400;
  color: #566770;
}
.fz_waming[data-v-294160e0] {
  color: #e6a23c;
}
.text5[data-v-294160e0] {
  display: inline-block;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt20[data-v-294160e0] {
  margin-top: 20px !important;
}
.noData[data-v-294160e0] {
  margin: 200px 0;
  text-align: center;
}
.el-button--primary[data-v-294160e0]:not(.is-disabled) {
  border: 1px solid #0052CC;
  color: #0052CC;
  background: #fff;
}
.el-button--primary[data-v-294160e0]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button[data-v-294160e0]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button--primary.solid[data-v-294160e0] {
  color: #FFF;
  background-color: #0052CC;
  border-color: #0052CC;
}
.el-button[data-v-294160e0] {
  min-width: 80px;
  border-radius: 12px;
}
.el-input__inner[data-v-294160e0] {
  border-radius: 8px;
}
.el-button--primary.bg[data-v-294160e0] {
  border-radius: 30px;
  border: 1px solid #0052cc;
  color: #fff;
  background: #0052cc;
}
.el-button--primary.bg2f[data-v-294160e0] {
  width: 100%;
  border: 1px solid #0052CC;
  color: #fff;
  background: #0052CC;
}
.el-table[data-v-294160e0] {
  overflow: hidden;
  border-radius: 4px;
}
.el-table .el-table__cell[data-v-294160e0] {
  padding: 22px 0;
}
.el-table .el-table__body-wrapper[data-v-294160e0] {
  padding-right: 20px;
}
.el-date-editor .el-range-separator[data-v-294160e0] {
  width: 10%;
}
.tabsRgBt[data-v-294160e0] {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}
.message-title[data-v-294160e0] {
  cursor: pointer;
}
.handle-row[data-v-294160e0] {
  margin-top: 30px;
}
.container-bottom[data-v-294160e0] {
  margin-top: 50px;
  text-align: right;
}
.containerMsg[data-v-294160e0] {
  height: 75vh;
}
.containerMsg .btns[data-v-294160e0] {
  margin-bottom: 20px;
  text-align: right;
}
.containerMsg .title[data-v-294160e0] {
  min-width: 250px;
}
.containerMsg .timer[data-v-294160e0] {
  text-align: right;
  flex: 1;
  margin-right: 20px;
}
.noread[data-v-294160e0],
.read[data-v-294160e0] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: red;
  border-radius: 4px;
  margin-left: 15px;
  height: 20px;
  padding: 5px 8px;
  padding-top: 2px;
  box-sizing: border-box;
}
.noread[data-v-294160e0] {
  color: #000;
  background-color: #d7d7d7;
}
.uls[data-v-294160e0] {
  display: flex;
  align-items: center;
}
.uls li[data-v-294160e0] {
  width: 30%;
}
.newxx-ul[data-v-294160e0] {
  width: 100%;
}
.newxx-ul .newxx-li[data-v-294160e0] {
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
}
.newxx-ul .newxx-li span[data-v-294160e0] {
  display: inline-block;
}
.newxx-ul .newxx-li .title[data-v-294160e0] {
  min-width: 250px;
}
.newxx-ul .newxx-li .step[data-v-294160e0] {
  font-size: 12px;
}
.newxx-ul .newxx-li .timer[data-v-294160e0] {
  float: right;
}

.bdColor[data-v-2bf50377] {
  color: #0052CC;
}
.textColor[data-v-2bf50377] {
  color: #0052cc;
}
.warningText[data-v-2bf50377] {
  color: #e6a23c;
}
.dangerText[data-v-2bf50377] {
  color: #d9001b;
}
.successText[data-v-2bf50377] {
  color: #67c23a;
}
.warningBg[data-v-2bf50377] {
  background-color: #e6a23c;
}
.dangerBg[data-v-2bf50377] {
  background-color: #d9001b;
}
.successBg[data-v-2bf50377] {
  background-color: #67c23a;
}
.primaryBg[data-v-2bf50377] {
  background-color: #4573d8;
}
.grayBg[data-v-2bf50377] {
  background-color: #aaaaaa;
}
.fl_sb[data-v-2bf50377] {
  display: flex;
  justify-content: space-between;
}
.fl_as[data-v-2bf50377] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl_st[data-v-2bf50377] {
  display: flex;
  align-items: center;
  justify-content: start;
}
.fl_cc[data-v-2bf50377] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl_wrap[data-v-2bf50377] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.colorPr[data-v-2bf50377] {
  color: #2662f0;
}
.colorTxt892[data-v-2bf50377] {
  color: #8f92a1;
}
.textDUb[data-v-2bf50377] {
  text-decoration: underline;
  white-space: pre-wrap;
}
.fz14[data-v-2bf50377] {
  font-size: 14px;
}
.fz_20[data-v-2bf50377] {
  font-size: 22px;
  font-weight: 400;
  color: #566770;
}
.fz_waming[data-v-2bf50377] {
  color: #e6a23c;
}
.text5[data-v-2bf50377] {
  display: inline-block;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt20[data-v-2bf50377] {
  margin-top: 20px !important;
}
.noData[data-v-2bf50377] {
  margin: 200px 0;
  text-align: center;
}
.el-button--primary[data-v-2bf50377]:not(.is-disabled) {
  border: 1px solid #0052CC;
  color: #0052CC;
  background: #fff;
}
.el-button--primary[data-v-2bf50377]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button[data-v-2bf50377]:hover {
  background: #0052CC;
  border-color: #0052CC;
  color: #FFF;
}
.el-button--primary.solid[data-v-2bf50377] {
  color: #FFF;
  background-color: #0052CC;
  border-color: #0052CC;
}
.el-button[data-v-2bf50377] {
  min-width: 80px;
  border-radius: 12px;
}
.el-input__inner[data-v-2bf50377] {
  border-radius: 8px;
}
.el-button--primary.bg[data-v-2bf50377] {
  border-radius: 30px;
  border: 1px solid #0052cc;
  color: #fff;
  background: #0052cc;
}
.el-button--primary.bg2f[data-v-2bf50377] {
  width: 100%;
  border: 1px solid #0052CC;
  color: #fff;
  background: #0052CC;
}
.el-table[data-v-2bf50377] {
  overflow: hidden;
  border-radius: 4px;
}
.el-table .el-table__cell[data-v-2bf50377] {
  padding: 22px 0;
}
.el-table .el-table__body-wrapper[data-v-2bf50377] {
  padding-right: 20px;
}
.el-date-editor .el-range-separator[data-v-2bf50377] {
  width: 10%;
}
.container[data-v-2bf50377] {
  position: relative;
}
.tabsRgBt[data-v-2bf50377] {
  position: absolute;
  right: 30px;
  top: 30px;
}
[data-v-2bf50377] .el-tabs__header .el-tabs__item {
  font-size: 18px;
}

