main.less 8.3 KB
* { scrollbar-width: thin; /* 滚动条宽度有三种:thin、auto、none */ }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0 }
body, button, input, select, textarea { font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;color: #333; -ms-overflow-style: scrollbar }
button, input, select, textarea { font-size: 100% }
a { color: #333; text-decoration: none;outline: 0 }
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img, area, a { border: 0; outline: 0 }
address, caption, cite, code, dfn, em, th, var, i { font-style: normal; font-weight: normal }
code, kbd, pre, samp { font-family: courier new, courier, monospace }
ol, ul { list-style: none }
body { background: #fff;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
small { font-size: 12px }
h1, h2, h3, h4, h5, h6 { font-size: 100% }
sup { vertical-align: text-top }
sub { vertical-align: text-bottom }
legend { color: #000 }
a, input { -webkit-tap-highlight-color: rgba(0,0,0,0); }
div{ -webkit-overflow-scrolling: touch; }
input, textarea, button, select { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-appearance: none; -moz-appearance: none; border-radius: 0; background:none; outline:none; }
input[type='checkbox'] { -webkit-appearance: checkbox; }
iframe{border: none; width: 100%;}

@media screen and (max-device-width: 828px) {
  body { -webkit-text-size-adjust: none; }
}

/****************flexbox**************/
.flex {display:flex;}
.inline-flex {display:inline-flex;}
.flex-center{justify-content: center;align-items: center;}
/*横向或纵向*/
.flex-row {flex-direction:row;}
.flex-col {flex-direction:column;}
.flex-row-reverse {flex-direction:row-reverse;}
.flex-col-reverse {flex-direction:column-reverse;}
.flex-wrap {flex-wrap:wrap;}
/*主轴对齐方式*/
.flex-justify-start {justify-content:flex-start;}
.flex-justify-end {justify-content:flex-end;}
.flex-justify-center {justify-content:center;}
.flex-justify-between {justify-content:space-between;}
.flex-justify-around {justify-content:space-around;}
/*侧轴对齐方式*/
.flex-align-start {align-items:flex-start;}
.flex-align-end {align-items:flex-end;}
.flex-align-center {align-items:center;}
.flex-align-baseline {align-items:baseline;}
.flex-align-stretch {align-items:stretch;}
/*主轴换行时行在侧轴的对齐方式,必须定义flex-wrap为换行*/
.flex-content-start {align-content:flex-start;}
.flex-content-end {align-content:flex-end;}
.flex-content-center {align-content:center;}
.flex-content-between {align-content:space-between;}
.flex-content-around {align-content:space-around;}
.flex-content-stretch {align-content:stretch;}
/*允许子元素收缩*/
.flex-child-grow {flex-grow: 1;}/*允许拉伸*/
.flex-child-shrink {flex-shrink: 1;}/*允许收缩*/
.flex-child-noshrink {flex-shrink: 0;}/*不允许收缩*/
.flex-child-average {flex:1;}/*平均分布,兼容旧版必须给宽度*/
.flex-child-first {order: 1;}/*排第一个*/
/*子元素在侧轴的对齐方式*/
.flex-child-align-start {align-self:flex-start;}
.flex-child-align-end {align-self:flex-end;}
.flex-child-align-center {align-self:center;}
.flex-child-align-baseline {align-self:baseline;}
.flex-child-align-stretch {align-self:stretch;}

.wrapper { opacity: 0.9 }
.rem-wrap { width: 10rem; margin: 0 auto; position: relative; display: block; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hide { display: none; }
.full-height{height:100%;}
.full-width{width:100%;}
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.clear { clear: both; }
.overflow-hide { overflow: hidden; }
.normal { font-weight: normal; }
.bold { font-weight: bold; }
.radius { border-radius: 5px; }
.font-34 { font-size: 34px; }
.font-30 { font-size: 30px; }
.font-24 { font-size: 24px; }
.font-20 { font-size: 20px; }
.font-18 { font-size: 18px; }
.font-16 { font-size: 16px; }
.font-15 { font-size: 15px; }
.font-14 { font-size: 14px; }
.font-13 { font-size: 13px; }
.font-12 { font-size: 12px; }
.border-box{box-sizing: border-box;}
.img-cover{object-fit: cover}
.border { border: 1px solid #ebebeb; }
.border-top { border-top: 1px solid #ebebeb; }
.border-bottom { border-bottom: 1px solid #ebebeb; }
.border-left { border-left: 1px solid #ebebeb; }
.border-right { border-right: 1px solid #ebebeb; }
.margin { margin: 10px; }
.margin-top { margin-top: 10px; }
.margin-right { margin-right: 10px; }
.margin-bottom { margin-bottom: 10px; }
.margin-left { margin-left: 10px; }
.mt--10{ margin-top: -10px; }
.mt-5 { margin-top: 5px; }
.mr-5 { margin-right: 5px; }
.mb-5 { margin-bottom: 5px; }
.ml-5 { margin-left: 5px; }
.mt-15 { margin-top: 15px; }
.mr-15 { margin-right: 15px; }
.mb-15 { margin-bottom: 15px; }
.ml-15 { margin-left: 15px; }
.mt-20 { margin-top: 20px; }
.mr-20 { margin-right: 20px; }
.mb-20 { margin-bottom: 20px; }
.ml-20 { margin-left: 20px; }
.padding { padding: 10px; }
.padding-top { padding-top: 10px; }
.padding-right { padding-right: 10px; }
.padding-bottom { padding-bottom: 10px; }
.padding-left { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.pointer{cursor: pointer;}
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { word-wrap: normal; white-space: nowrap; }
.lines-height-2{line-height: 2;}
.lines-height-15{line-height: 1.5;}
.lines-1{text-overflow:ellipsis;-webkit-line-clamp:1;display: -webkit-box;overflow:hidden;-webkit-box-orient: vertical;}
.lines-2{text-overflow:ellipsis;-webkit-line-clamp:2;display: -webkit-box;overflow:hidden;-webkit-box-orient: vertical;word-break: break-all;}
.row2 { word-break: break-all; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; }

// 数据展示
.data-item {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 44px;
  border: 1px solid #f1f1f1;
  font-size: 13px;
  background: #f5f5f5;
  dt {
    flex-shrink: 0;
    min-width: 150px;
    padding: 0 10px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    // line-height: 44px;
    // text-align: center;
  }
  dd {
    flex-grow: 1;
    height: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    box-sizing: border-box;
    background: #fff;
    word-break: break-word;
  }
}

// 查看图片
.viewImg {
  width: 146px;
  height: 146px;
  border-radius: 6px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.a4-box {
  height: 75vh;
  overflow-y: auto;
  padding-top: 15px;
  box-sizing: border-box;

  .a4 {
    width: 795px;
    min-height: 1124px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px 5px rgba(170, 170, 170, 0.5);
    display: flex;
    flex-direction: column;
    padding: 90px;
    margin: 10px auto 25px auto;
    box-sizing: border-box;

    .title {
      font-size: 2.8em;
      font-family: 黑体;
      text-align: center;
      padding: 0.2em 0;
      letter-spacing: 10px;
    }

    .border-bottom-red {
      border-bottom: 2px solid red;
    }

    .data-box{
      padding: 10px 20px
    }

    .text-indent {
      text-indent: 2em;
    }
  }
}
// 3d弹框样式
.monitorDiv {
  background: rgba(11, 42, 76, 0.6);
  border: 1px solid #62a2cd;
  color: #fff;
  opacity: 0.8;
  z-index: 9999;
  .title {
    line-height: 25px;
    background: linear-gradient(
      90deg,
      rgba(57, 243, 254, 0.93) 42%,
      rgba(29, 134, 177, 0) 100%
    );
    padding: 0 10px;
    color: #06303b;
  }
  .content {
    line-height: 25px;
    padding: 6px 2px;
    padding-right: 10px;
    .label {
      color: #3AF1FE;
      padding: 0 10px;
    }
    .item {
      position: relative;
    }
  }
}
.warnDiv {
  background: rgba(76, 13, 11, 0.6);
  border: 1px solid #cd6a62;
  .title {
    background: linear-gradient(
      90deg,
      rgba(243, 125, 105, 0.7) 42%,
      rgba(29, 134, 177, 0) 100%
    );
    color: #3b1106;
  }
  .content {
    .label {
      color: rgb(245, 214, 214);
    }
  }
}


// 多选框颜色
.el-checkbox__inner {
  border: 1px solid #000!important;
}