squi-DAHUA/index.css

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

.user-list-container {
    background-image: url("./image/frame_sphy@2x.png");
    background-size: contain;
    right: calc(10 / 576 * 1rem);
    top: calc(50% + calc(52 * 2 / 576 * 1rem));
    transform: translateY(calc(-50% - calc(52 / 576 * 1rem)));
    position: fixed;
    width: calc(943 / 576 * 1rem);
    height: calc(1579 / 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(402 / 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);
    cursor: pointer;
}

.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;
}