Newer
Older
DH_Apicture / src / views / RongyunCommunication / rongyuncss / index.scss
@ZZJ ZZJ 24 days ago 7 KB 更新融云样式
#tipModal {
  // :deep(.el-dialog) {
  width: 680px !important;
  height: 328px !important;
  background: url('@/assets/images/rongYunImg/popwindow-bg.png') no-repeat !important;
  background-size: 100% 100% !important;
  padding: 20px !important;
  :deep(.el-dialog__title) {
    color: #ffffff !important;
  }
}

#ryAcceptModal {
  width: 980px !important;
  height: 758px !important;
  background: url('@/assets/images/rongYunImg/popwindow-bg.png') no-repeat !important;
  background-size: 100% 100% !important;
  padding: 20px !important;

  .el-dialog__header {
    border: none;

    .el-dialog__title {
      color: #ffffff !important;
    }
  }

  .el-dialog__body {
    padding: 0;
    width: 100%;
    padding: 10px;
    height: calc(100% - 80px);
  }

  .el-dialog {
    width: 680px;
    height: 628px;
    background: url('@/assets/images/rongYunImg/popwindow-bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 20px;
  }

  .titleRy {
    font-size: 24px;
    font-family: YouSheBiaoTi;
    font-weight: 400;
    color: #f9feff;
    height: 30px;
    line-height: 30px;
    background: linear-gradient(0deg, #9bd8ff 0%, #d4edff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 20px;
    text-align: left;
    // width: 100%;
  }

  .rong-container-app {
    width: 100%;
    height: 600px;
    position: relative;

    .rong-video-box-app {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow: auto;

      .video-item {
        box-sizing: border-box;
        width: 100%;
        height: calc(100% - 10px);
        position: relative;

        .video-user-id {
          position: absolute;
          top: 5px;
          padding: 0 5px;
          border-radius: 2px;
          z-index: 100;
          font-size: 14px;
          color: #58fdff;
          display: inline-block;
          width: 100%;
          text-align: center;
        }

        .video-media-type {
          position: absolute;
          top: 30px;
          left: 0;
          display: block;
          width: 100%;
          height: calc(100% - 30px);
          background: url('@/assets/images/rongYunImg/yuyin_bg.png') no-repeat;
          background-size: 100% 100%;
        }

        video {
          width: 100%;
          height: 100%;
        }
      }

      .first-child {
        position: absolute;
        right: 0;
        top: 0;
        width: 30%;
        height: 30%;
        z-index: 999;
      }

      .video-item-4 {
        width: 50%;
        height: calc(50% - 10px);
      }

      .video-item-8 {
        width: 25%;
        height: calc(50% - 10px);
      }
    }

    .rong-action-app {
      position: absolute;
      width: 100%;
      height: 50px;
      bottom: 10px;
      display: flex;
      justify-content: center;

      .hunupBtn {
        width: 40px;
        height: 40px;
      }
    }
  }

  :deep(.el-dialog__headerbtn) {
    background-color: red !important;
  }
  .el-icon-close {
    width: 16px;
    height: 16px;
    vertical-align: 2px;
    border-radius: 50%;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-origin: 100% 50%;
    &:before {
      transform: scale(0.6);
      display: inline-block;
      vertical-align: -3px;
    }
    &:hover {
      background-color: #b4bccc;
      color: #fff;
      width: 12px !important;
      height: 12px !important;
    }
  }
}

.responseDialog {
  .dialog-footer {
    position: absolute;
    right: 40px;
    bottom: 30px;
  }
  .tipsHeader {
    font-size: 18px;
    color: #fff;
  }
}

.voiceDilog {
  position: fixed;
  right: 10px;
  bottom: 10px;
  border-radius: 10px;
  width: 170px;
  height: 90px;
  background: #185d7fba;
  user-select: none;
  z-index: 9999999;
  padding: 5px;

  .voiceHeader {
    padding: 10px;
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 12px;
    img {
      margin-right: 10px;
    }
  }

  .submit {
    position: absolute;
    left: 50%;
    width: 90px;
    margin-left: -35px;
    bottom: 20px;
    font-size: 12px;
  }

  .vioceIcon {
    width: 14px;
    height: 18px;
  }
}

.contactBoxRY {
  line-height: 22px;
  height: 590px;
  position: relative;
  background: #071645;
  // background: linear-gradient(to right bottom, rgba(4, 92, 196, 0.3), rgba(6, 28, 63, 1));
  box-shadow: 0 0 0 1px rgba(33, 109, 206, 1), inset 0 0 20px rgba(33, 109, 206, 1);
  top: calc(50% - 320px);
  z-index: 3;
  .onlinery {
    color: green;
  }
  .offlinery {
    color: red;
  }
  .el-dialog__header {
    text-align: left;
  }
  .tableBox {
    width: 100%;
    height: 100%;
    padding: 10px 20px;
  }
  .chooseBox {
    color: #d7e2ff;
    margin-bottom: 10px;
  }
  .el-dialog__title {
    color: #f9feff;
  }
  // tabs
  .el-tabs__item {
    color: #eee;
  }
  // 表格
  .tableRY {
    height: 340px;
    border: 1px solid #325bc1;
    border-radius: 2px;

    .el-table {
      width: 100%;
      height: 100%;
      --el-table-border-color: transparent;
      --el-table-bg-color: #001a51 !important;

      .el-table__header-wrapper {
        th {
          background-color: #083089 !important;
          border-color: transparent;
          color: #9cdfee;
          font-size: 14px;
          font-weight: 400;
          text-align: center;
        }
      }

      .el-table__body-wrapper {
        tr {
          background-color: #05225e;
          border-color: transparent;

          &.el-table__row--striped {
            td {
              &.el-table__cell {
                background: rgb(20 43 119);
              }
            }
          }

          td {
            border-color: transparent;
            color: #d1deee;
            font-size: 14px;
            text-align: center;
            background: none;
          }
        }
      }
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
      background-color: transparent;
    }

    .el-table__body tr.current-row > td.el-table__cell {
      background-color: rgba(0, 125, 142, 0.3) !important;
    }
    .paginationBox {
      .el-pagination {
        margin-top: 15px;
        justify-content: right;
        --el-pagination-bg-color: rgba(11, 52, 116, 0.5);

        & button:disabled {
          background-color: rgba(11, 52, 116, 0.5);
          color: #409eff;
        }

        .el-pagination__total {
          color: #fff;
        }
        .btn-next,
        .btn-prev {
          color: #409eff;
        }
        .el-pager {
          li {
            color: #fff;
            &.is-active {
              color: #409eff;
            }
          }
        }

        .el-pagination__jump {
          .el-pagination__goto,
          .el-pagination__classifier {
            color: #409eff;
          }

          .el-input {
            height: 26px;

            .el-input__wrapper {
              background-color: transparent;
              box-shadow: 0 0 0 1px #409eff inset;

              .el-input__inner {
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
  // 群呼
  .grouoDiv {
    padding: 5px 20px 20px 20px;
    margin-top: 20px;
    height: 410px;
    overflow-y: auto;
    .TabLine {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #073770;
      padding-right: 8px;
      .Line {
        display: inline-block;
        padding: 5px 5px 5px 8px;
        color: #eee;
        font-size: 16px;
        margin-right: 10px;
      }
      .el-checkbox__label {
        color: #fff;
      }
    }
    .checkboxClass {
      padding: 10px 0 30px 0;
      :deep(.el-checkbox) {
        width: 95px;
        margin-bottom: 4px;
      }
    }
  }

  .el-tabs__item {
    color: #d5dee7;
    font-size: 13px;
    padding: 0;
    border-bottom: 2px solid #3a3030;
  }

  .is-active {
    color: #00b4ff;
  }

  .el-tabs__active-bar {
    color: #00b4ff;
  }

  .el-input__wrapper {
    background: transparent !important;
    box-shadow: none;
    border: 1px solid #4364ac;
  }
}