// 施工记录详情组件
.cts-log {
  border-bottom: 1px solid $border-color;
  font-size: $font-size-24;

  .cts-log-content {
    display: flex;
    @include padding-style();

    .item-left {}

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

      .title {
        display: flex;
        justify-content: space-between;
        font-size: $font-size-30;

        .name {
          .group-name{
            font-size: $font-size-24;
            color: $color-font-sub;
            margin-left: 20px;
          }
        }

        .status {}
      }

      .time {
        margin-top: 20px;
        color: $color-font-sub;
        display: flex;
        justify-content: space-between;

        .date {}
      }

      .info {
        margin-top: 20px;
        word-break: break-all;
      }

      .info-sub {
        margin-top: 20px;
        color: $color-font-sub;
        word-break: break-all;
      }

      .imgs-list {
        margin-top: 20px;
        display: flex;

        image {
          width: 112px;
          height: 112px;
          margin-right: 10px;
        }
      }

      .record-time {
        margin-top: 20px;
        display: flex;

        .iconfont {}

        .record-time-text {
          // flex: 1;
          margin-left: 12px;
        }

        .record-time-status {
          width: 120px;
          height: 44px;
          line-height: 44px;
          text-align: center;
          position: relative;
          margin-left: 20px;

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

          image {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }

      .area {
        margin-top: 20px;
        display: flex;

        .iconfont {}

        .area-text {
          flex: 1;
          margin-left: 12px;
        }
      }

      .worker-info {
        margin-top: 20px;
        display: flex;
        align-items: center;

        .iconfont {}

        .worker-info-list {
          margin-left: 20px + 12px;
          display: flex;
          align-items: center;
        }

        .worker-info-text {
          flex: 1;
          margin-left: 12px;
        }
      }

      .address, .group {
        margin-top: 20px;
        display: flex;

        .iconfont {
          // font-size: 138px;
        }

        .text {
          flex: 1;
          margin-left: 12px;
        }
      }

      .comment {
        margin-top: 10px;
        background-color: $color-bg;
        @include padding-style(24px, 10px);

        .comment-more {

          text {
            &.iconfont {
              font-size: 22px;
            }

            &:nth-child(2) {
              color: $color-font-sub;
            }

            &:nth-child(3) {
              color: $color-btn;
            }
          }
        }

        .comment-list {
          margin-top: 20px;

          .comment-list-item {
            display: flex;

            .comment-left {}

            .comment-right {
              flex: 1;
              margin-left: 12px;
              margin-top: 6px;



              .comment-title {
                .comment-name {
                  color: $color-blue;
                }

                .comment-text {
                  word-break: break-all;
                }
              }

              .imgs-list {
                image {}
              }

              .time {
                .date {}
              }
            }
          }
        }
      }
    }
  }
}