guoyao-jiankang/public/camera/css/demo.css

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-family: "Microsoft YaHei","PingFang SC","Hiragino Sans GB";
    color: #2e2c2c;
    background-color: #fff;
}

#app {
    height: 100%;
    width: 100%;
}

.el-container {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
}

.el-header {
    background: transparent;
    color: #fff;
    text-align: center;
    line-height: 60px;
    position: relative;
    z-index: 10;
}

html .el-main, body .el-main {
    padding: 0;
}

.relative {
    position: relative;
}

.text-right {
    text-align: right;
}

.float-l {
    float: left;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inline-block {
    display: inline-block;
}

.el-dialog__body {
    padding: 20px;
}

.w30 {
    width: 30px;
}

.w34 {
    width: 34px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}

.w140 {
    width: 140px;
}

.w-precent-100 {
    width: 100%;
}

.w-precent-3 {
    width: 3%;
}

.h40 {
    height: 40px;
}

.mg-t-15 {
    margin-top: 15px;
}

.mg-0 {
    margin: 0px;
}

.el-icon-arrow-left, .el-icon-arrow-right {
    width: 25px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
}

.select-date {
    height: 25px;
    width:138px !important;
}

.date-panel {
    width: calc(100% - 240px);
}

.input-box-client {
    width: 90%;
    margin: 5px auto;
}

.el-input input {
    border-radius: 0;
    border: 1px solid #d1d2d3;
    color: #2e2c2c;
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB";
}

i.tree-search-icon {
    position: absolute;
    cursor: pointer;
    top: 7px;
    right: 1px;
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url('../img/search-N.png') no-repeat;
    
}
i.tree-search-icon:hover {
    background: url('../img/search-H.png') no-repeat;
}
i.tree-search-icon {
    transition: unset;
}

.record-normal {
    background: url("../img/ptz/tool/record-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);

}

.record-normal:hover {
    background: url("../img/ptz/tool/record-hover.png");
}

.recording-normal {
    background: url("../img/ptz/tool/recording-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.recording-normal:hover {
    background: url("../img/ptz/tool/recording-hover.png");
}

.audio-normal {
    background: url("../img/ptz/tool/audio-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.audio-normal:hover {
    background: url("../img/ptz/tool/audio-hover.png");
}

.audio-no-normal {
    background: url("../img/ptz/tool/audio-no-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.audio-no-normal:hover {
    background: url("../img/ptz/tool/audio-no-hover.png");
}

.snap1-icon {
    background: url("../img/ptz/tool/snap1.png");
    background-size: 100% 100%;
    width: 16px;
    height: 17px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.snap1-icon:hover {
    background: url("../img/ptz/tool/snap1-h.png");
}

.talk-normal {
    background: url("../img/ptz/tool/talk-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.talk-normal:hover {
    background: url("../img/ptz/tool/talk-hover.png");
}

.talking-normal {
    background: url("../img/ptz/tool/talking-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.talking-normal:hover {
    background: url("../img/ptz/tool/talking-hover.png");
}

.slow-normal {
    background: url("../img/ptz/tool/slow-n.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.slow-normal:hover {
    background: url("../img/ptz/tool/slow-h.png");
}

.speed-normal {
    background: url("../img/ptz/tool/speed-n.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.speed-normal:hover {
    background: url("../img/ptz/tool/speed-h.png");
}

.play-normal {
    background: url("../img/ptz/tool/play.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.play-normal:hover {
    background: url("../img/ptz/tool/play-hover.png");
}

.pause-normal {
    background: url("../img/ptz/tool/pause.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.pause-normal:hover {
    background: url("../img/ptz/tool/pause-hover.png");
}

.stop-normal {
    background: url("../img/ptz/tool/stop.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.stop-normal:hover {
    background: url("../img/ptz/tool/stop-hover.png");
}

.closeall-normal-icon {
    background: url("../img/ptz/tool/closeall-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
    transform: translate(0, 50%);

}

.closeall-normal-icon:hover {
    background: url("../img/ptz/tool/closeall-hover.png");
}

.p4-normal-icon {
    background: url("../img/ptz/tool/4-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
    position: absolute;
    right: 305px;

}

.p4-normal-icon:hover {
    background: url("../img/ptz/tool/4-hover.png");
}

.download-normal-icon {
    background: url("../img/ptz/tool/download-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);
}

.download-normal-icon:hover {
    background: url("../img/ptz/tool/download-hover.png");
}

.screen-normal-icon {
    background: url("../img/ptz/tool/screen-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);

}

.screen-normal-icon:hover {
    background: url("../img/ptz/tool/screen-hover.png");
}

.p16-normal-icon {
    background: url("../img/ptz/tool/16-normal.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 15px;
    transform: translate(0, 50%);

}

.p16-normal-icon:hover {
    background: url("../img/ptz/tool/16-hover.png");
}

.el-slider-step {
    width:100px;
    display:inline-block;
    position:absolute;
    right:185px;
}

.timeline-div {
    height: 25px;
    line-height: 25px;
    margin: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
    font-size: 13px;
}
.timeline-div p, .timeline-main {
    margin: 0;
}
.time-point {
    cursor: pointer;
    border-radius: 50%;    
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}
.time-point-active {
    background: red;
    color: #fff;
}
.timeline-no {
    position: absolute;
    left: 11px;
}
.timeline-no-p {
    margin: 0;
    height: 26px;
    line-height: 26px;
    color: #999;
}
.font-red {
    color: red;
}
.timeline-no-span {
    display: inline-block;
    width: 17px;
    overflow: hidden;
}
.timeline-title {
    width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.select-date .el-input__icon {
    line-height: 25px;
}
.select-date .el-input__inner {
    height: 25px;
    line-height: 25px;
    border: none;
}
.el-time-panel {
    left: -30px;
}
.record-date-form .el-form-item {
    margin-bottom: 15px;
}

.tool-span {
    padding: 3px 5px;
    border-radius: 2px;
    background: #6D6F72;
    color: #fff;
    margin-left: 15px;
    font-size: 10px;
    display: inline-block;
    position: relative;
    top: 5px;
}

.tool-span:hover {
    background: #F23838;
}

.tooltip-style {
    overflow: visible;
    width: 208px;
}

.tooltip-style .title {
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 20px;
}

.tooltip-style .content {
    line-height: 20px;
}

.shop-video {
    color: #2e2c2c;
}

.shop-video .el-footer {
    background-color: #ebeced;
    bottom: 0;
    border-top: 1px solid #ddd;
    padding: 0;
    overflow-y: auto;
}

.shop-video .el-container {
    border: 1px solid #ddd;
    border-top: 0;
}

.el-aside {
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
.el-aside .ztree {
    position: absolute;
    width: 100%;
    top: 43px;
    bottom: 0;
}

.shop-tree-box {
    position: absolute;
    overflow: hidden;
    width: 100%;
    top: 36px;
    bottom: 0;

    
}
.shop-tree-box .el-button--default {
    background-color: transparent;
    border-color: transparent;
}

.holder-fold {
    bottom: 60px;
}
.holder-unfold {
    bottom: 275px;
}

.shop-info-photo {
    width: 200px;
    height: 100px;
    margin-top: 15px;
    margin-right: 25px;
    float: left;
    background: #ddd;
}

.shop-info-ul {
    overflow: hidden;
    margin-top: 15px;
    font-size: 12px;
}
.shop-info-li {
    float: left;
    width: calc((100% - 80px) / 2);
    margin-bottom: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-left: 20px;
}

.li-name {
    color: #77797c;
}

.search {
    width: 180px;
    margin-top: 15px;
    margin-left: 10px;
}

.el-input-group__append {
    padding: 0 14px;
}

.focus,
.no-focus {
    position: absolute;
    top: 15px;
    right: 18px;
    cursor: pointer;
}

.focus-icon {
    display: inline-block;
    width: 20px;
    height: 18px;
    line-height: 20px;
    vertical-align: bottom;
    background: url(../img/clientIcon.png) no-repeat;
    background-position: -1px -82px;
}

.no-focus-icon {
    display: inline-block;
    width: 20px;
    height: 18px;
    line-height: 20px;
    vertical-align: bottom;
    background: url(../img/clientIcon.png) no-repeat;
    background-position: -21px -82px;
}

.evaluate-title {
    margin: 0;
    padding: 0;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #ddd;

    
}

.el-alert-event {
    position: absolute;
    bottom: 40px;
}

.left-ul {
    overflow: initial;
    height: 36px;
    line-height: 36px;
    border-bottom: 1px solid #f23838;
    position: relative;

    
}
.left-ul .active {
    color: #2e2c2c;
    position: relative;
}
.current-icon {
    position: absolute;
    bottom: -2px;
    left: 35px;
    margin-left: -6px;
    width: 12px;
    height: 8px;
    background: url(../img/up-icon.png)
}
.left-li {
    width: 33%;
    color: #666;
    text-align: center;
    cursor: pointer;

   
}

.left-li:hover {
    color: #2e2c2c;
}

.ztree {
    overflow: auto;
}

.shop-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-channel-icon {
    width: 35px;
    height: 35px;
    margin: 0 auto;
    background: url(../img/clientIcon.png) no-repeat;
}

.online-channel-icon {
    background-position: -623px -4px;
}

.offLine-channel-icon {
    background-position: -663px -4px;
}

.channel-name {
    color: #777977;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50%;
    float: left;
    text-align: center;
    cursor: pointer;
}

.shop-name-text {
    display: inline-block;
    width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    margin: 0 auto;
}

.vertical-t {
    vertical-align: top;
}

.cs-box {
    padding: 0;
    height: 100%;
}

.his-icon {
    background: url(../img/clientIcon.png);
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-top: 5px;
    display: none;
    float: left;
    cursor: pointer;
}

.open-channel {
    background-position: -263px -84px;
    display: block;
}

.close-channel {
    background-position: -304px -84px;
    display: block;
}

.his-active {
    background-color: #f4e1e1;
    color: #ee3f1f;
}

.his-box,
.attention-box {
    overflow: auto;
    position: absolute;
    top: 36px;
    right: 0;
    left: 0;
    bottom: 0;
}

.video-shop-task-result {
    height: 100%;
}

.red {
    color: #f23838;
}

.green {
    color: #23b85a;
}

.del,
.edit {
    position: absolute;
    width: 15px;
    height: 15px;
    right: 0;
    display: none;
}

.text-area {
    width: 200px;
    height: 135px;
}

.mgb0 {
    margin-bottom: 0;
}

.submit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    line-height: 5px;
    width: 100%;
}


.event-drop-down {
    width: 200px;
}

.event-desc {
    max-width: 220px !important;
    word-break: break-word;
    position: absolute;
    top: 231px;
    left: 500px;
}


.el-select-dropdown-item {
    width: 190px;
}

.cursor {
    cursor: pointer;
}

.tooltip-smallItemName {
    max-width: 200px !important;
    background: rgba(0, 0, 0, .5) !important;
}

.videoShopTask-tip.el-tooltip__popper.is-dark {
    max-width: 200px !important;
    max-height: 600px !important;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    background: #FFFFE1;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    padding: 3px;

}

.explain-1 {
    font-weight: bold;
    margin-top: 3px;
}

.explain-2 {
    font-weight: 10px;
    margin-top: 10px;
}

.explain-3 {
    margin-top: 3px;
}

.percentage-explain {
    background: url('../img/evaluation-result-percentage-explain.png') no-repeat;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}
#showDev_001 {
    display: none;
}
.download-ul {
    position: absolute;
    right: 9px;
    z-index: 1;
    top: 35px;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.download-ul li {
    list-style: none;
    line-height: 36px;
    padding: 0 20px;
    margin: 0;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    outline: none;
}

.download-ul li:hover {
    background-color: #ecf5ff;
    color: red;
}

.el-dropdown-menu__item {
    line-height: 22px;
    padding: 0px 12px;
    font-size: 12px;
}
.el-dropdown {
    font-size: 12px;
    margin-left: 15px;
    vertical-align: sub;
}
.el-dropdown-menu {
    padding: 5px 0;
}
.fixed-bottom {
    bottom: 16px !important;
}

/* 加入组织树层级后删除如下样式 */
.ztree li span.button.noline_docu {
    width: 1px !important;
}
.ztree .tree-item .node_name {
    width: 127px !important;
    vertical-align: top;
}