squi-DAHUA/index.css

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

.user-list-container {
  background-image: url("./image/frame_sphy.png");
  background-size: contain;
  right: calc(58 / 576 * 1rem);
  top: calc(50% + calc(52 * 2 / 576 * 1rem));
  transform: translateY(calc(-50% - calc(52 / 576 * 1rem)));
  position: fixed;
  width: calc(1090 / 576 * 1rem);
  height: calc(1580 / 576 * 1rem);
}
.user-list-container .user-action {
  margin-top: calc(150 / 576 * 1rem);
  text-align: center;
}
.user-list-container .user-action > div {
  background-image: url("./image/frame_meeting.png");
  background-size: cover;
  display: inline-block;
  /* padding: 0 calc(118 / 576 * 1rem); */
  width: calc(476 / 576 * 1rem);
  height: calc(130 / 576 * 1rem);
  line-height: calc(130 / 576 * 1rem);
  font-size: calc(40 / 576 * 1rem);
  color: #39d6fe;
  cursor: pointer;
}
.user-list-container .user-search {
  margin-top: calc(60 / 576 * 1rem);
  display: flex;
}

.user-list-container .user-search input {
  flex: 1;
  box-sizing: border-box;
  padding: calc(46 / 576 * 1rem);
  height: calc(88 / 576 * 1rem);
  border-radius: 44px;
  border: 0 none;
  outline: none;
  background: #ffffff;
  margin: 0 calc(58 / 576 * 1rem);
  font-size: calc(40 / 576 * 1rem);
}
input::placeholder {
  color: #c5c5c5;
}
.user-list-container .user-list {
  margin: 0 calc(58 / 576 * 1rem);
  margin-top: calc(60 / 576 * 1rem);
}
dl,
dd,
dt {
  margin: 0;
  padding: 0;
}
.user-list-container .user-list .user-dep {
  /* font-size: calc(46 / 576 * 1rem); */
  /* color: #ffffff; */
}

.user-list-container .user-list .user-dep .dep-title {
  font-size: calc(46 / 576 * 1rem);
  color: #ffffff;
  line-height: calc(96 / 576 * 1rem);
}
.user-list-container .user-list .user-dep .dep-user {
  line-height: calc(96 / 576 * 1rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-list-container .user-list .user-dep .dep-user .dep-user-info {
  display: flex;
  flex-direction: column;
  font-size: calc(40 / 576 * 1rem);
  color: #ffffff;
}
.user-list-container
  .user-list
  .user-dep
  .dep-user
  .dep-user-info
  > div:last-child {
  color: #39d6fe;
}

.user-list-container .user-list .user-dep .dep-user .dep-user-action > img {
  width: calc(80 / 576 * 1rem);
  height: calc(80 / 576 * 1rem);
  margin-left: calc(37 / 576 * 1rem);
  cursor: pointer;
}
.video-container {
  position: fixed;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate3d(
    calc(-2663 / 2 / 576 * 1rem),
    calc(-1275 / 2 / 576 * 1rem),
    0
  );
}
.video-container .video-bar {
  width: calc(2123 / 576 * 1rem);
  height: calc(80 / 576 * 1rem);
  background: #06076b;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.video-container .video-action {
  width: calc(192 / 576 * 1rem);
  height: calc(60 / 576 * 1rem);
  line-height: calc(60 / 576 * 1rem);
  text-align: center;
  background: linear-gradient(0deg, #f74447 0%, #ff6665 100%);
  color: #ffffff;
  font-size: calc(32 / 576 * 1rem);
  margin-right: calc(28 / 576 * 1rem);
}
.video-container #vPlayArea {
  width: calc(2123 / 576 * 1rem);
  height: calc(1195 / 576 * 1rem);
  background: #06076b;
}
.video-container .video-user-content {
  width: calc(540 / 576 * 1rem);
  background: #000157;
  display: flex;
  flex-direction: column;
}
.video-container .video-user-title {
  border-bottom: 2px solid #191a7d;
  height: calc(98 / 576 * 1rem);
  line-height: calc(98 / 576 * 1rem);
  padding-left: calc(30 / 576 * 1rem);
  color: #ffffff;
  font-size: calc(30 / 576 * 1rem);
}

.video-container .video-user-list {
  border-bottom: 2px solid #191a7d;
  padding-left: calc(32 / 576 * 1rem);
  color: #ffffff;
  font-size: calc(30 / 576 * 1rem);
  flex: 1;
}

.video-container .video-user-action {
  height: calc(80 / 576 * 1rem);
  padding: 0 calc(32 / 576 * 1rem);
  color: #ffffff;
  font-size: calc(32 / 576 * 1rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.video-container .video-user-action > div {
  height: calc(60 / 576 * 1rem);
  line-height: calc(60 / 576 * 1rem);
  border: 2px solid #39d6fe;
  padding: 0 calc(30 / 576 * 1rem);
  color: #39d6fe;
  cursor: pointer;
}
.video-container .video-user-action > div:last-child {
  border-color: #fff;
  color: #fff;
}

.video-container.only-video .video-user-content {
  display: none;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #39d6fe;
  border-radius: 3px;
}