// ======================================= 默认样式 =======================================
page,
view,
scroll-view,
swiper,
movable-view,
cover-view,
text,
icon,
rich-text,
progress,
button,
checkbox,
form,
input,
label,
picker,
picker-view,
radio,
slider,
switch,
textarea,
navigator,
audio,
image,
video,
camera,
map,
canvas {
  box-sizing: border-box;
}

page {
  font-size: $font-size-28;
  background-color: $color-bg;
  color: $color-font-main;
  height: 100%;
  // font-family: 'PingFang SC';
  font-family: 'Noto Sans CJK SC';

  >view {
    min-height: 100%;
  }
}

// ======================================= 样式初始化 =======================================
//-- 主题
.theme {
  color: $theme;
}

.theme-sub {
  color: $theme-sub;
}

.theme-sub1 {
  color: $theme-sub1;
}

.theme-sub2 {
  color: $theme-sub2;
}

//-- 字体色
.color-font-main {
  color: $color-font-main;
}

.color-font-sub {
  color: $color-font-sub;
}

.color-font-sub1 {
  color: $color-font-sub1;
}

.color-font-sub2 {
  color: $color-font-sub2;
}

.color-font-sub3 {
  color: $color-font-sub3;
}

.color-font-sub4 {
  color: $color-font-sub4;
}

.color-font-sub5 {
  color: $color-font-sub5;
}

//-- 边框色
.border-color {
  color: $border-color;
}

//-- 元素色
.color-bg {
  color: $color-bg;
}

.color-bg-sub {
  color: $color-bg-sub;
}

.color-white {
  color: $color-white;
}

.color-icon {
  color: $color-icon;
}

.color-danger {
  color: $color-danger;
}

.color-btn {
  color: $color-btn;
}

.color-success {
  color: $color-success;
}

.color-green {
  color: $color-green;
}

.color-orange {
  color: $color-orange;
}

.color-orange-sub {
  color: $color-orange-sub;
}

.color-blue {
  color: $color-blue;
}

//-- 按钮背景色
.bg-btn {
  color: $bg-btn;
}

.bg-btn1 {
  color: $bg-btn1;
}

.bg-btn2 {
  color: $bg-btn2;
}

.bg-btn-login {
  color: $bg-btn-login;
}

// ======================================= 默认样式 =======================================
// 去除button的默认边框
button:after {
  border: none;
}

// iconfont样式
.iconfont {
  color: $color-icon;
  font-size: $font-size-28;
}

// 右箭头的样式
.iconicon_jiantou {
  font-size: $font-size-24;
}

// 下箭头样式
.iconicon_xiangxia {
  font-size: $font-size-38;
}

// ================================ 边距和边框 ================================
// 上面没有margin边距
.no-margin-top {
  margin-top: 0 !important;
}

// 上面距离20px
.margin-top {
  margin-top: 20px;
}

// 底部有按钮时，最外层view的底部距离
.bottom-wrap {
  padding-bottom: 148px;
}

// input输入框placeholder的字体颜色
.p-color {
  color: $color-font-sub3;
}

.border-top-main {
  border-top: $interval-main solid $color-bg;
}

.border-bottom-main {
  border-bottom: $interval-main solid $color-bg;
}

// ================================ 常用样式 ================================
// 超出部分内容省略号显示（只支持1行）
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 平行四边形样式
.quadrangle {
  position: relative;
  color: $color-white;
  display: inline-block;
  padding: 2px 10px;
  z-index: 0;
  font-size: $font-size-20;

  &::before {
    position: absolute;
    content: '';
    background-color: #FF646A;
    transform: skew(-20deg, 0);
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
  }
}


// 班组，施工日志的表单统一样式（这个可废弃，使用.list-edit代替）
.group-form {

  // 详情样式
  &.is-detail {
    .group-form-title {}

    .group-form-list {
      label {
        .text-right {
          text-align: left;
        }
      }

      .group-form-right {
        margin-left: 0;
      }
    }
  }

  .group-form-title {
    @include padding-margin-style();
    background-color: $color-bg;
    font-size: $font-size-34;
    color: $color-font-sub;
    display: flex;
    justify-content: space-between;
    align-items: center;

    // 白色背景，底部灰色边框
    &.white-bg {
      @include padding-style();
      margin-left: 0;
      background-color: $color-white;
      border-bottom: 1px solid $border-color;
      margin-top: 20px;
    }

    .group-form-title-nav {
      color: $theme;
      display: flex;
      align-items: center;
      font-size: $font-size-30;

      .iconfont {
        font-size: 50px;
        margin-left: 10px;
      }
    }
  }

  .group-form-list {
    margin-top: 20px;
    background-color: $color-white;

    label {
      @include padding-margin-style();
      display: flex;
      align-items: center;
      font-size: $font-size-30;
      border-bottom: 1px solid $border-color;
      // border:1px solid #f00;

      &.label-block {
        display: block;

        .content {
          margin-top: 30px;
          font-size: $font-size-30;
          // padding: 10px;
          // border: 1px solid #f00;
        }
      }

      .label {
        color: $color-font-main;
        margin-right: 22px;
        min-width: 200px;
      }

      .text-input,
      input {
        flex: 1;
        color: $color-font-sub;
        // border:1px solid #f00;
      }

      textarea {
        height: 150px;
        width: 100%;
        color: $color-font-sub;
      }

      // 替换textarea的穿透问题
      .textarea-text {
        width: 100%;
        height: 150px;
        color: $color-font-sub;
        word-break: break-all;
        line-height: 36px;
      }

      radio {
        margin-left: auto;
      }

      .iconfont {
        margin-left: 10px;
        font-size: $font-size-24;

        &.iconicon_jiantou {}
      }

      .text {
        color: $color-font-sub;
        flex: 1;

        >text {
          margin-right: 46px;
        }
      }

      picker {
        flex: 1;

        .picker {
          display: flex;
          align-items: center;
        }
      }

      .group-form-right {
        margin-left: auto;
        word-break: break-all;
      }

      .text-right {
        text-align: right;
        font-size: $font-size-30;
        color: $color-font-sub;
      }
    }

    .group-form-note {
      @include padding-margin-style();
      display: flex;
      padding-top: 10px;

      .iconfont {
        margin-top: 4px;
        font-size: $font-size-24;
        color: $color-danger;
      }

      >text {
        color: $color-font-sub;
        margin-left: 6px;
        font-size: $font-size-24;
      }
    }
  }

  .group-form-btn {
    @include padding-style();
    display: flex;
    justify-content: space-between;
    margin-top: 50px;

    >view {
      width: 318px;
      height: 96px;
      line-height: 96px;
      text-align: center;
      font-size: $font-size-34;
      border-radius: 10px;
      border: 1px solid $theme;
    }

    .btn-cancel {
      color: $theme;
      background-color: rgba(254, 241, 229, 1);
    }

    .btn-submit {
      color: $color-white;
      background-color: $theme;
    }
  }
}

// 列表/表单小规格样式
.list-edit-small {
  background-color: $color-white;
  margin-top: $interval-main;

  .list-edit-title {
    font-size: $font-size-30;
    display: flex;
    padding: 30px $interval-horizontal 20px $interval-horizontal;
  }

  .list-edit-item {
    font-size: $font-size-26;
    display: flex;
    padding: 0 $interval-horizontal 20px $interval-horizontal;

    .item-left {
      min-width: 156px;
      color: $color-font-sub;
    }

    .item-right {
      flex: 1;
      margin-left: 80px;

      .text-tip {
        @include text-label($color-success);
        margin-left: 30px;
      }
    }
  }
}

// 列表/表单样式
.list-edit {
  margin-top: 20px;
  background-color: $color-white;

  // 是否是详情
  &.is-detail {
    .list-edit-item {
      .item-left {}

      .item-right {
        text-align: left;
        justify-content: flex-start;

        .text {
          margin-left: 0;
        }
      }
    }
  }

  // 和item分开
  .list-edit-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $font-size-26;
    @include padding-style(0, $interval-horizontal);
    margin-left: 0;
    border-bottom: 1px solid $border-color;
    height: 80px;

    // 灰色背景
    &.item-bg-gray {
      margin-left: 0;
      background-color: $color-bg;
      padding-left: $interval-horizontal;
      border-bottom: none;
      font-size: $font-size-26;
      color: $color-font-sub;
    }

    .item-left {
      min-width: 200px;
    }

    .item-right {
      margin-left: auto;
      color: $color-font-sub;
      display: flex;
      align-items: center;
    }
  }

  // 右边按钮
  .item-right-link {
    margin-left: auto;
    text-align: right;
    color: $theme;
    font-size: $font-size-26;
  }

  // 竖向排版
  &.vertical {
    .list-edit-item {
      display: block;

      .item-left {
        width: 100%;
      }

      .item-right {
        width: 100%;
        text-align: left;
        margin-top: 20px;
        padding: 10px 0;
        font-size: $font-size-28;
        justify-content: flex-start;

        .text {
          text-align: left;
        }

        input {
          font-size: $font-size-28;
        }
      }
    }
  }

  .list-edit-item {
    @include padding-style();
    font-size: $font-size-30;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid $border-color;

    &:last-child {
      border: none;
    }

    .list-edit-note {
      font-size: 22px;
      color: $color-icon;
    }

    .item-left {
      min-width: 180px;
      display: flex;
      align-items: flex-start;
      color: $color-font-main;
      margin-right: 80px;

      .status {
        border-radius: 20px;
        border: 1px solid $color-danger;
        width: 92px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        color: $color-danger;
        font-size: $font-size-24;
        margin-left: 20px;
      }
    }

    .item-right {
      flex: 1;
      text-align: right;
      color: $color-font-sub;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      word-break: break-all;

      .text {
        flex: 1;
      }

      input {
        flex: 1;
        font-size: $font-size-30;
      }

      .text-note {
        margin-left: 16px;
      }

      // AtInput默认样式
      at-input {
        flex: 1;

        .at-input {
          padding: 0;
          margin: 0;
          background-color: $color-white;

          &:after {
            border: none;
          }

          .at-input__input {
            color: $color-font-sub;
            padding-right: 0;
          }
        }
      }

      cts-address {
        flex: 1;
      }

      cts-picker {
        flex: 1;
      }

      picker {
        flex: 1;

        .picker {
          display: flex;
        }
      }

      // 选择
      .choose {
        display: flex;
        flex-wrap: wrap;

        .choose-item {
          padding: 0 20px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          margin-right: 20px;
          background-color: $color-white;
          color: $color-font-sub;
          border: 1px solid $color-icon;
          border-radius: 4px;

          &.active {
            color: $color-white;
            background-color: $theme;
            border: 1px solid $theme;
          }
        }
      }

      .iconicon_jiantou {
        margin-left: 12px;
        margin-top: 10px;
        color: $color-icon;
      }
    }

    // AtTextarea多行文本框组件样式
    at-textarea {
      flex: 1;

      .at-textarea {
        border: none;
        background: none;
        font-size: $font-size-30;
        color: $color-font-sub;

        .at-textarea__textarea {
          font-size: $font-size-30;
        }

        .at-textarea__counter {
          color: $color-font-sub;
        }
      }
    }


  }
}

// 警告内容样式
.note-warning {
  display: flex;
  @include padding-style();
  color: $color-font-sub;

  .iconfont {
    font-size: $font-size-30;
    margin-right: 12px;
  }

  View {
    flex: 1;
    font-size: $font-size-24;
  }
}

// 列表统一样式，可配合MeList使用，有title表示有标题，则下边框有空隙
.list {
  &.title {
    .cts-list {
      .cts-list-item {
        padding-left: 0;
        margin-left: $interval-horizontal;
      }
    }
  }

  .list-title {
    @include padding-style();
    font-size: $font-size-34;
    background-color: $color-white;
    margin-top: 20px;
    border-bottom: 1px solid $border-color;
  }
}

// 列表样式，只是一个外壳样式，里面样式还是自己定义
.lists {
  background-color: $color-white;
  margin-top: 20px;

  .lists-title {
    @include padding-style();
    background-color: $color-bg;
    color: $color-font-sub;
    font-size: $font-size-30;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .iconfont {
    color: $color-icon;
  }

  .lists-item {
    @include padding-style();
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: none;
    }

    // 待处理样式
    .warning:not(.pay-status) {
      width: 92px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      background-color: $color-danger;
      border-radius: 20px;
      color: $color-white;
      margin: 0 20px;
      font-size: $font-size-24;
    }
  }

  // 使用了flex布局，若有多行在外层加div包起来
  .item-left {
    display: flex;
    align-items: center;
  }

  .item-right {
    display: flex;
    align-items: center;
    color: $color-font-sub;

    // 右边箭头
    .iconicon_jiantou {
      margin-left: 16px;
    }

    // 左边note样式
    .item-note {
      margin-right: 20px;
    }
  }
}

// AtDrawer的lists样式（item-left：头像，item-right: 名字或电话，选择框）
.drawer-list {
  height: calc(100% - 20px);

  .lists {
    height: calc(100% - 140px - 20px);
    overflow-y: scroll;

    .lists-item {
      .item-left {}

      .item-right {
        margin-left: 20px;
        flex: 1;
        display: flex;

        radio {
          margin-left: auto;
        }
      }
    }
  }
}

// 银行卡信息样式
.bank-model {
  background-color: $color-white;

  .bank-model-title {
    @include padding-style();
    font-size: $font-size-34;
    color: $color-font-main;
  }

  .bank-model-img {
    @include padding-style($interval-vertical, 40px);
    display: flex;
    justify-content: space-between;

    View {
      text-align: center;
      background-color: $color-bg;
      width: 328px;
      height: 204px;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 328px;
        height: 204px;
        border-radius: 10px;

        &.bank_upload {
          width: 92px;
          height: 92px;
        }
      }
    }
  }

  .idcard-btn {
    .btn {
      width: 100%;
    }
  }
}

// 底部按钮的绝对定位
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: $color-white;
}

// 步骤条的底部按钮样式，Button标签
.idcard-btn {
  font-size: $font-size-34;
  display: flex;
  @include padding-style();

  .btn {

    // 右边确认按钮
    &.btn1 {
      flex: 1;
      @include btn-style();
    }

    // 灰色按钮
    &.btn-confirm {
      @include btn-style($theme, $color-white, none);
    }

    // 左边"取消","重新上传"按钮
    &.btn3 {
      @include btn-style1(210px, 80px);
      margin-right: 30px;
      font-size: $font-size-34;
    }

    // 禁用按钮
    &.disabled {
      @include btn-style($color-white, $color-icon, $color-icon);
    }
  }
}

// 操作成功样式
.oper-success {
  position: relative;

  .bg-img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .oper-success-top {
    height: 400px;
    color: $color-white;
    text-align: center;
    padding-top: 97px;

    .iconicon_chenggong {
      display: block;
      font-size: 80px;
    }

    .text1 {
      font-size: $font-size-34;
      margin: 20px 0 10px 0;
    }

    .text2 {
      font-size: $font-size-28;
    }
  }

  .oper-success-btn {
    width: 100%;
    position: fixed;
    bottom: $interval-horizontal;
    left: 0;
    @include padding-style();

    .btn {
      margin-top: 30px;

      &.btn1 {
        @include btn-style1(666px, 96px);
        font-size: $font-size-34;
      }

      &.btn-confirm {
        @include btn-style($color-font-sub, $border-color, none)
      }
    }
  }
}

// 实名成功样式
.idcard-oper-success {
  position: relative;
  padding: 40px 0;

  .bg-img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .idcard-oper-success-top {
    text-align: center;

    .text1 {
      display: flex;
      align-items: center;
      justify-content: center;

      .confirm-img {
        width: 40px;
      }

      text {
        font-size: $font-size-34;
        margin-left: 12px;
        font-weight: bold;
      }
    }

    .text2 {
      font-size: $font-size-26;
      margin-top: 20px;
    }
  }
}

// 班组二维码和考勤码样式
.qr-code {
  height: 100%;

  .group-code-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .group-code-content {
    padding-top: 140px;

    .group-code-img {
      box-sizing: border-box;
      width: 630px;
      background-color: $color-white;
      margin: 0 auto;
      padding: 36px 0 $interval-vertical 0;
      border-radius: 10px;
      text-align: center;

      .group-code-name {
        color: $theme;
        font-size: 44px;
      }

      image {
        width: 600px;
        height: 600px;
        // border:1px solid #f00;
      }

      .group-code-note {
        color: #999;
      }

      .group-code-refresh {
        color: $theme;
        margin-top: 16px;
        display: flex;
        justify-content: center;
        align-items: center;

        .iconshuaxin {
          font-size: $font-size-34;
        }

        text {
          margin-left: 6px;
        }
      }
    }

    .group-code-btn {
      width: 666px;
      height: 84px;
      line-height: 84px;
      text-align: center;
      background-color: $color-white;
      color: $theme;
      font-size: $font-size-34;
      margin: 128px auto 0 50px;
      border-radius: 10px;
      position: relative;
    }

    .group-code-btn-checkwork {
      width: 348px;
      height: 64px;
      display: flex;
      align-items: center;
      // justify-content: flex-end;
      background-color: #FEF1E5;
      color: $color-orange;
      margin: 68px auto;
      position: relative;
      border-radius: 32px;

      .checkwork_icon {
        position: absolute;
        left: -6px;
        top: -6px;
        width: 80px;
        height: 80px;
        // background-color: red;
        border-radius: 50%;
      }

      .group-code-btn1 {
        margin-left: auto;

        .group-code-btn-text {}

        .iconicon_jiantou {
          color: $color-orange;
          margin: 0 18px 0 12px;
        }
      }

      .group-code-btn-confirm {
        margin: auto;

        .group-code-btn-text {
          color: $color-icon;
        }
      }

    }
  }
}

// 底部按钮样式-底部按钮外层
.footer-bar-wrap {
  height: 148px;
  // position: relative;
  // z-index: 0;
}

// 底部按钮样式
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 148px;
  background: $color-white;
  z-index: 9;
  display: flex;
  align-items: center;
  @include padding-style(0, $interval-horizontal);
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15);

  button {
    background: $color-white;
    font-size: $font-size-30;
    padding: 0;
    margin: 0;
    height: 80px;
    line-height: 80px;
    border-radius: 10px;

    &:after {
      display: none;
    }
  }

  .cover-view-btn {
    background: $color-white;
    font-size: $font-size-30;
    text-align: center;
    height: 80px;
    line-height: 80px;
    border-radius: 10px;
  }

  // 警告按钮
  .btn1 {
    width: 210px;
    border: 1PX solid $color-danger;
    color: $color-danger;
    margin-right: 20px;
    height: 74px;
  }

  // 确认按钮（表示确定/重要的按钮）
  .btn-confirm {
    flex: 1;
    background-color: $theme;
    color: $color-white;
  }

  // 操作按钮
  .btn-operation {
    flex: 1;
    border: 1PX solid $theme;
    color: $theme;
  }

  // 取消按钮
  .btn-cancel {
    flex: 1;
    border: 1PX solid $color-danger;
    color: $color-danger;
  }

  // 主题色字体，主题色透明背景，用于返回，取消
  .btn-return {
    flex: 1;
    // background-color: $color-bg;
    color: $theme;
    border: 1PX solid $theme;
  }

  // 主题色字体，主题色透明背景，用于保存，继续，解除（表示否定/取消/非重要的按钮）
  .btn-continue {
    flex: 1;
    background-color: $theme-sub2;
    color: $theme;
  }

  // 禁用按钮
  .disabled {
    flex: 1;
    background-color: $color-icon;
    color: $color-white;
    border: none;
  }

  // 按钮距离左边42px
  .btn-left {
    margin-left: 42px;
  }

  // 按钮距离右边42px
  .btn-right {
    margin-right: 42px;
  }

    // 小宽度按钮
  .btn-width-small {
    width: 186px;
    flex: none;
  }

  .btn3 {
    flex: 1;
    background-color: $color-white;
    color: $theme;
    border: 1PX solid $theme;
  }

  .btn4 {
    width: 210px;
    margin-right: 30px;
    color: $theme;
    background-color: #e8f1fa;
  }

  .success-cb-btn {
    flex: 1;

    .btn-confirm {
      margin-bottom: 20px;
    }
  }
}

// checkbox样式
.checkbox {
  .wx-checkbox-input {
    border-radius: 42px;
    /* 圆角 */
    width: 42px;
    /* 背景的宽 */
    height: 42px;
    /* 背景的高 */
    border: 1PX solid #C9C9C9;
  }

  .wx-checkbox-input-disabled {
    border-radius: 42px;
    /* 圆角 */
    width: 42px;
    /* 背景的宽 */
    height: 42px;
    /* 背景的高 */
    background: #f3f3f3;
    border: 1PX solid #C9C9C9;
  }

  .wx-checkbox-input.wx-checkbox-input-checked {
    background: $theme;
    border-color: $theme;

    &:before {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-size: $font-size-24;
      color: $color-white;
      background: transparent;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .wx-checkbox-input {
    border-radius: 42px;
    /* 圆角 */
    width: 42px;
    /* 背景的宽 */
    height: 42px;
    /* 背景的高 */
    border: 1PX solid #C9C9C9;
  }
}

// Radio组件默认样式
radio {
  $size: 28px;

  .wx-radio-input {
    border-radius: 100%;
    width: $size;
    height: $size;
    border: 1PX solid #C9C9C9;
  }

  .wx-radio-input-disabled {
    border-radius: 100%;
    width: $size;
    height: $size;
    background: #f3f3f3;
    border: 1PX solid #C9C9C9;
  }

  .wx-radio-input.wx-radio-input-checked {
    background: $theme;
    border-color: $theme;

    &:before {
      width: $size;
      height: $size;
      line-height: $size;
      text-align: center;
      font-size: $font-size-24;
      color: $color-white;
      background: transparent;
      transform: translate(-50%, -50%) scale($size/42);
    }
  }

  .wx-radio-input {
    border-radius: 100%;
    width: $size;
    height: $size;
    border: 1PX solid #C9C9C9;
  }
}

// rang提示
.warning-note {
  display: flex;
  align-items: center;
  color: $color-orange-sub;
  height: 88px;
  padding: 0 $interval-horizontal;
  background-color: #fefcec;
  margin-top: 20px;
  // margin-bottom: 20px;

  .icontongzhi {
    font-size: 42px;
  }

  .note-text {
    margin-left: 14px;
  }
}

// 调整工价，修改工价弹框样式
.salary-form {
  .list-edit {
    margin-top: 0;
    border-top: $interval-main solid $color-bg;
  }

  .note-warning {
    border-top: $interval-main solid $color-bg;

    view {
      color: $color-font-sub;
    }
  }

  .note-tip {
    @include padding-style();
    color: $color-font-sub;
    font-size: $font-size-24;
  }
}

// 设置领班样式
.leader-setting {
  .leader-setting-text {
    padding: 30px;
    background-color: $color-white;
    border-bottom: 1px solid $border-color;
  }

  .grade-float {
    height: 96px * 6 !important;
  }
}

// 粘性定位
.sticky {
  position: sticky;
  top: 0;
  z-index: 9;
}

// 施工日志列表样式
.cts-log {

  // 施工日志组件的MeThumb样式
  .comment-list {
    .cts-thumb {
      width: 40px;
      height: 40px;
      line-height: 40px;

      .thumb {
        font-size: 18px;
        // background-color: $color-btn;
      }
    }
  }

  // 施工日志组件的工人信息的MeThumb样式
  .worker-info {
    .cts-thumb {
      width: 56px;
      height: 56px;
      line-height: 56px;
      // position: relative;
      margin-left: -20px;

      .thumb {
        font-size: $font-size-24;
        // background-color: $color-btn;
      }
    }
  }
}

// 施工日志列表操作按钮
.construction-operation {
  display: flex;
  margin-top: 20px;

  .operation-btn {
    flex: 1;
    display: flex;
    // justify-content: center;
    align-items: center;
    height: 82px;

    .confirm {
      color: $color-green;
    }

    .iconfont {}

    .btn-text {
      color: $color-font-sub;
      margin-left: 10px;
    }
  }
}

// 项目看板tab样式
.nav-home {
  background-color: $color-white;
  // overflow: hidden;
  // height: 94px;
  border-bottom: $interval-main solid $color-bg;

  .nav {
    display: flex;
    align-items: center;
    padding: 0 $interval-horizontal;
    &.nav-disabled {
      .nav-item:not(.active) {
        color: $color-icon !important;
      }
    }

    .nav-item {
      margin-right: 40px;
      color: $color-font-sub;
      font-size: $font-size-30;
      position: relative;
      overflow: hidden;
      // font-weight: bold;
      height: 96px;
      line-height: 96px;
      &:last-child {
        margin-right: 0;
      }

      &.active {
        color: $theme;
        font-size: $font-size-34;
        margin-right: 40px;
        &::before {
            content: "";
            position: absolute;
            bottom: -8px;
            left: calc(100% / 2 - 32px);
            width: 64px;
            height: 16px;
            background-color: $theme;
            border-radius: 8px;
          }
      }

      .nav-status {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: $color-danger;
        position: absolute;
        right: -14px;
        top: 0;
        border-radius: 50%;
      }
    }
  }
}

// 弹框选择样式
.modal-children {
  padding-top: 10px;

  .modal-selector {
    display: flex;
    align-items: center;
    margin-top: 20px;

    .label {
      color: $color-font-sub;
      width: 140px;
      text-align: right;
      margin-right: 16px;
    }

    picker {
      flex: 1;

      .selector-input {
        display: flex;
        justify-content: space-between;
        align-items: center;
        @include padding-style(0, 18px);
        border-radius: 10px;
        // border: 1px solid #C3C3C3;
        border: 1PX solid $border-color;
        height: 80px;

        .input-text {}

        .iconfont {
          color: #9B9B9B;
        }
      }
    }

    // AtInput默认样式
      at-input {
        flex: 1;

        .at-input {
          padding: 0;
          margin: 0;
          background-color: $color-white;

          &:after {
            border: 1PX solid $border-color;
          }

          .at-input__input {
            color: $color-font-main;
            padding-right: 0;
            height: 80px;
            padding: 0 16px;
          }
        }
      }


  }
}

// 选择添加工人方式样式
.worker-add-way {
  font-size: $font-size-30;
  text-align: center;
  background-color: $color-white;

  .worker-add-way-title {
    height: 88px;
    line-height: 88px;
    border-bottom: 1px solid $border-color;
  }

  .worker-add-way-content {
    display: flex;
    border-bottom: 1px solid $border-color;

    .content-item {
      flex: 1;
      padding: 92px $interval-horizontal 64px $interval-horizontal;

      button {
        background: none;
        font-size: $font-size-30;
        padding: 0;
        color: $color-font-main;
        line-height: 1.2;
      }

      .iconfont {
        font-size: 58px;
        color: $theme;
        display: inline-block;
        width: 120px;
        height: 120px;
        line-height: 120px;
        background-color: $color-bg-sub;
        border-radius: 50%;
      }

      view {
        margin-top: 10px;
      }
    }
  }

  .worker-add-way-cancel {
    color: $theme;
    height: 88px;
    line-height: 88px;
  }
}

// 详细信息卡片样式（左：头像，右：姓名手机号等信息）
.info-card {
  width: 682px;
  margin: 0 auto;
  border-radius: 18px;
  @include padding-style(32px, $interval-horizontal);
  display: flex;
  align-items: center;
  background-color: $color-white;
  position: relative;
  overflow: hidden;

  // 右上角解除
  .info-remove {
    position: absolute;
    right: -76px;
    bottom: -76px;
    width: 152px;
    height: 152px;
    border-radius: 50%;
    background-color: #B7CAFF;
    text-align: center;
    padding-top: 8px;

    .info-remove-home {
      width: 50%;
      padding-left: 18px;

      .iconfont {
        color: $color-white;
        font-size: 22px;
      }

      .remove-text {
        font-size: $font-size-20;
        color: $color-white;
      }
    }
  }

  // 右上角文字
  .info-topright {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    margin: 10px;

    .topright-text {
      color: $color-font-sub;
      margin-right: 10px;
    }

    .confont {
      color: $color-font-sub;
    }
  }

  // 右上角状态
  .info-status {
    width: 82px;
    height: 75px;
    position: absolute;
    right: -5px;
    top: 0;
  }

  .info-left {}

  .info-right {
    margin-left: 18px;
    flex: 1;

    .info-item {
      // color: $color-font-sub;
      display: flex;
      align-items: center;

      &:nth-child(1) {
        font-size: $font-size-30;

        text {
          &:nth-child(2) {
            margin-left: 10px;
          }
        }
      }

      &:nth-child(2) {
        color: $color-font-sub;
        font-size: $font-size-26;
        margin-top: 10px;

        .item-text {
          margin-right: 16px;
        }

        &.theme {
          color: $theme;
        }
      }

      .info-tip {
        margin-left: 30px;
      }
    }
  }
}

// 头部信息模块样式
.header-info {
  padding: 20px 0;
  background: url('https://cts.lingzhuyun.com/#{$img-src}/imgs/home/home_bg04.png') no-repeat;
  background-size: contain;
  // background-color: $color-white;

  .info-card {
    box-shadow: 0px 0px 12px 0px rgba(48, 56, 81, 0.12);
  }
}

// 表格列表样式
.table-list {
  margin: 0 34px;

  @mixin list-item-grid($padding-interval) {
    .list-item {
      &:nth-child(1) {
        padding-left: $padding-interval;
      }

      &:nth-child(n + 2) {
        padding-right: $padding-interval;
      }
    }
  }

  // 表格2列
  &.small {
    @include list-item-grid(100px);
  }

  // 表格3列
  &.normal {
    @include list-item-grid(60px);
  }

  // 表格4列
  &.middle {
    @include list-item-grid(48px);
  }

  .table-list-header {
    background-color: $color-bg;
    display: flex;
    align-items: center;
    height: 76px;
    color: $color-font-sub4;
    font-size: $font-size-24;

    .list-item {
      flex: 1;

      &:nth-child(n + 2) {
        text-align: right;
      }

      &:last-child {
        .item-num {
          &::before {
            display: none;
          }
        }
      }

      .item-text {}
    }
  }

  .table-list-body {
    font-size: $font-size-24;

    .list-column {
      display: flex;
      align-items: center;
      height: 76px;

      &:nth-child(even) {
        background-color: $color-bg;
      }

      .list-item {
        flex: 1;

        &:nth-child(n + 2) {
          text-align: right;
        }
      }
    }
  }
}

// 施工记录页面样式
.construction {
  background-color: $color-white;

  // 新建
  .construction-create {
    position: fixed;
    z-index: 9;
    bottom: 210px;
    right: $interval-horizontal;
    background-color: rgba(0, 0, 0, .5);
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    color: $color-white;
    border-radius: 50%;
  }

  // 全部筛选
  .filter-popup {
    .filter-bg {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9;
    }

    .filter-content {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      background-color: $color-white;
      z-index: 9;

      .project-filter {
        .filter-all {
          color: $theme;

          .iconquanbushaixuan {
            color: $theme;
          }
        }

      }

      .filter-content-home {
        @include padding-style(0, $interval-horizontal);
        margin-bottom: 20px;
        min-height: 550px;

        .filter-nav {
          display: flex;

          .nav-item {
            height: 90px;
            line-height: 90px;
            margin-right: 80px;
            font-weight: bold;

            &.active {
              color: $theme;
              border-bottom: 4px solid $theme;
            }
          }
        }

        .filter-type {
          display: flex;
          flex-wrap: wrap;

          .type-item {
            min-width: 208px;
            padding: 0 20px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            font-size: $font-size-26;
            background-color: $border-color;
            margin-top: 20px;
            margin-right: 20px;

            &:nth-child(3n) {
              margin-right: 0;
            }

            &.active {
              color: $theme;
              background-color: #E4EBFF;
              position: relative;

              &::after {
                position: absolute;
                bottom: 0;
                right: 0;
                content: '';
                width: 27px;
                height: 33px;

                $img-src: 'ctsteam' !default;
                background: url('https://cts.lingzhuyun.com/#{$img-src}/imgs/choose.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
        }

        .filter-group-title {
          margin-top: 20px;
          @include padding-style(24px, 0);
          font-weight: bold;
        }

        // .filter-group {
        //   .group-item {}
        // }
      }

      .filter-content-btn {
        display: flex;

        .btn {
          width: 50%;
          height: 90px;
          line-height: 90px;
          text-align: center;
          font-size: $font-size-30;

          &:nth-child(1) {
            color: $color-font-sub;
            background-color: $color-bg;
          }

          &:nth-child(2) {
            color: $color-white;
            background-color: $theme;
          }
        }
      }
    }
  }

  // 普通筛选（按月）
  .project-filter-month {
    background-color: $color-white;
    color: $color-font-sub;
    font-size: $font-size-24;
    // margin-top: 20px;

    .project-filter-home {
      @include padding-style(0, $interval-horizontal);
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80px;

      .iconfont {
        font-size: $font-size-24;
      }

      .filter-time {
        display: flex;

        .iconicon_xiangxia {
          font-size: 36px;
          margin-left: 6px;
        }
      }

      .filter-all {
        display: flex;
        align-items: center;

        .iconfont {
          margin-top: 6px;
        }

        .filter-all-text {
          margin-right: 10px;
        }
      }
    }
  }

  // 施工记录列表
  .construction-list {
    background-color: $color-white;
  }
}

// 普通筛选（按天）
.project-filter {
  background-color: $color-white;
  color: $color-font-sub;
  font-size: $font-size-26;
  padding: 20px;

  .project-filter-home {
    @include padding-style(24px, 22px);
    display: flex;
    justify-content: space-between;
    border: 1px solid $color-icon;
    border-radius: 8px;

    .iconfont {
      font-size: $font-size-24;
    }

    .filter-time {
      display: flex;
      align-items: center;

      .time-left {
        margin-right: 40px;

        &.today {
          color: $color-btn;
        }
      }

      .time-right {
        display: flex;
        align-items: center;

        // .time-text {
        //   margin: 0 10px;
        // }

        .iconfont {
          padding: 0 10px;
        }

        .last-date,
        .next-date {
          color: $color-font-sub;
          border-bottom: 1px solid $color-icon;
        }

        .last-date {
          margin-right: 10px;
        }

        .next-date {
          margin-left: 10px;
        }
      }
    }

    .filter-all {
      display: flex;
      align-items: center;

      .iconfont {
        margin-top: 6px;
      }

      .filter-all-text {
        margin-left: 10px;
      }
    }
  }
}

// 导航样式
.content-nav {
  display: flex;
  padding: 0 34px;
  display: flex;
  align-items: center;
  // border-bottom: 20px solid $color-bg;

  &-item {
    padding: 30px 0;
    font-size: 32px;
    color: $color-font-sub;
    margin-right: 82px;

    &.cur {
      color: $color-font-main;
      font-weight: bold;

      .item-bg {
        display: block;
      }
    }

    .item-tit {
      position: relative;
    }

    .item-bg {
      display: none;
      position: absolute;
      left: 0;
      bottom: 2px;
      width: 100%;
      height: 8px;
      background: rgba(160, 185, 255, 0.6);
      border-radius: 4px;
    }
  }
}


// table div样式
.info-table {
  @include padding-style(0, $interval-horizontal);
  background-color: $color-white;
  .table {
    display: table;
    width: 100%;
    .tr {
      display: table-row;

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

      .th,
      .td {
        display: table-cell;
        padding: 24px;
      }
    }

    .thead {
      display: table-header-group;
      background-color: #ebf0fa;
      .tr {
        .th {
        }
      }
    }
    .tbody {
      display: table-row-group;
      .tr {
        .td {
          border-bottom: 1px solid $border-color;
          word-break: break-all;

          .td-status {
            // display: flex;
            // justify-content: space-between;
            // align-items: center;
            text {
              vertical-align: middle;
            }

            .iconfont {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}

// 状态小角标样式
.status-badge {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
  display: inline-block;
  &.danger {
    background-color: $color-danger;
  }
  &.success {
    background-color: $color-success;
  }
  &.info {
     background-color: $color-font-sub4;
  }
}

// 劳务-支付清单状态样式
.pay-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: $font-size-24;

  &.warning {
    background-color: #fee7dc;
    color: #e66a33;
  }

  &.success {
    background-color: rgba(7, 184, 91, 0.1);
    color: #07B85B;
  }


}

// 工资状态样式
.salary-status {
  &.info {
    color: $color-font-sub5;
  }

  &.warning {
    color: #e66a33;
  }

  &.success {
    color: #07B85B;
  }
}