// 相对路径
@import "assets/scss/_screen";
@import "assets/scss/_variables";
@import "assets/scss/_mixins";

// camera-detail页中有左右header的card
%card-wrapper{
  .card-wrapper {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .card-label{
        font-size: 13px;
      }
    }
    // 覆盖
    .el-card__header {
      padding: 7px 20px;
    }
    .el-card__body {
      padding: 7px 0;
    }
  }  
}

// 页面基础样式
%page-base{
  padding: 20px 30px;
  overflow-y: auto;
  // .page-header{
  //   margin-bottom: 20px;
  //   .page-title {
  //     @include ellipsis;
  //     max-width: 300px;
  //     font-size: 20px;
  //     color: $admin-title-color;
  //   }
  // }
  .el-card{
    margin-bottom: 20px;
    &:last-child{
      margin-bottom: 0;
    }
  }
  // admin页card基本样式
  .cf-title{
    font-size: 16px;
    color: white;
  }
}

// 表单一行有多个元素时，一行排列;
%multi-form-item{
  .multi-form-item{
    display: flex;
  }
}

// dialog通用样式
%dialog-base{
  .el-dialog__title{
    font-size: 16px;
  }
  .el-form-item__label{
    font-size: 13px;
  }
}

// 分割线
%split{
  .split{
    margin: 15px 0;
    width: 100%;
    border-bottom: 1px solid #ebeef5;
  }
}

// 拥有左右header的card默认样式
%card-base{
  .card-wrapper{
    .card-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

// 拥有左右header的card默认样式
%card-base-table{
  @extend %card-base;
  .card-wrapper{
    .card-main{
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-table{
        // 在 flex-direction: column 下 flex: 1(1 1 0) 的元素显示异常，需要修改为-> flex: 1 1 auto;
        flex: auto;
      }
      .el-pagination{
        margin-top: 20px;
      }
    }
  }
}

// add-item的btn存在边界情况，内容不居中;
// .add-item-btn {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   width: 20%;
// }

// 覆盖elem样式: form-item包含多个元素时，并排一行排列
// .el-form-item__content {
//   display: flex;
//   .add-item-btn{
//     margin-left: 10px;
//   }
// }

// 时间轴
.el-popover{
  word-break: normal;
}
%timeline-item{
  .timeline-item{
    position: relative;
    margin-left: 5px;
    border-left: 2px solid #409eff;
    word-break: break-all;
    &::before{
      content: '';
      position: absolute;
      left: -7px;
      top: 10px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #409eff;
    }
    &:first-child{
      &::before{
        top: 5px;
      }
      .header{
        padding-top: 0;
      }
    }
    .lineborder{
      padding-left: 20px;
    }
    .header{
      padding: 5px 0 5px 0;
      font-weight: bold;
    }
    .item{
      padding-bottom: 5px;
      line-height: 1.8;
      .title{
        color: #606266;
        .text{
          color: #303133;
        }
      }
    }
    img{
      margin: 10px 0;
      width: 90%;
    }
  }
}


%el-pagination-common {
  margin-top: 20px;
  text-align: center;
}
.hover-zoom-img-wrapper{
  z-index: 4000 !important;
}

.common-bg-corner{
  background-repeat: no-repeat;
  background-image: url('~common/guotu-img/corner-1.png'), url('~common/guotu-img/corner-3.png'), url('~common/guotu-img/corner-2.png');
  background-position: top left, bottom left, bottom right;
  padding: 3px;
  background-size: 12px 12px;
  position: relative;
  .inner-container{
    background: linear-gradient(360deg, rgba(#000000, 0.8) 0%, rgba(#493A14, 0.8) 100%);
    border: 1px solid #6E674E;
  }
  .close-btn{
    top: -8px;
    right: -8px;
    position: absolute;
    width: 18px;
    height: 18px;
    img{
      width: 100%;
      height: 100%;
    }
    &:hover{
      cursor: pointer;
    }
  }
}
.info-table-common{
  width: 90vw;
  position: fixed;
  height: 30vh;
  left: 30px;
  bottom: 10px;
  z-index: 100;
  .inner-container{
    width: 100%;
    height: 100%;
    .info-title{
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 0px 1px 4px #DCD277;
      .info-name{
        border-bottom: 1px solid;
        border-image: linear-gradient(90deg, rgba(255, 222, 76, 0), rgba(255, 222, 76, 1), rgba(255, 222, 76, 0)) 1 1;
        height: 70%;
        padding: 0 10px;
      }
    }
    .info-table{
      height: calc(100% - 40px);
      .top-table{
        height: calc(100% - 40px);
        overflow: auto;
        padding: 0 10px;
        .el-table{
          background-color: transparent;
          color: #E4E7C1;
          .el-table__header{
            background-color: rgba(#7A713D, 0.36);
            color: #FFEEB1;
            th{
              color: #FFEEB1;
            }
          }
          tr{
            background-color: transparent;
            &:hover{
              background-color: rgba(#7A713D, 0.36);
              td{
                background-color: rgba(#7A713D, 0.36);
              }
            }
            th{
              background-color: transparent;
              border-bottom: 1px solid #6E674E;
            }
            td{
              border-bottom: 1px solid #6E674E;
            }
          }
        }
      }
      .bottom-pagination{
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #E4E7C1;
        .el-pagination{
          .btn-prev, .btn-next, li{
            background-color: transparent;
            color: #E4E7C1;
          }
          li.active{
            background-color: #9F9853;
          }
        }
      }
    }
  }
}

::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track{
  background: transparent;
}
::-webkit-scrollbar-thumb{
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background-color: rgba(#796B3D, 0.76);
}
