@import url("./avue-ui/index.scss");

.common-search-content {
  width: 100%;
  height: 100%;
  overflow: auto;

  .search-content {
    width: 1645px;
    height: calc(100% - 128px);
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: $COLOR_BG_MAIN;
    position: relative;
    display: flex;

    .search-content-right {
      width: calc(100% - 200px);
      @screeningAllCHeight: 30px;
      display: flex;
      flex-direction: column;
      position: relative;

      .screening-all {
        width: 100%;
        margin-bottom: 15px;
        font-size: 14px;
        color: #4E4E4E;
        display: flex;
        flex-direction: column;

        .filter-sort {
          width: 100%;
          padding: 14px 20px 15px;
          box-sizing: border-box;
          border-bottom: 1px solid $COLOR_BORDER_TWO;
          display: flex;
          justify-content: space-between;

          .left,
          .right {
            display: flex;
          }

          .label {
            flex-shrink: 0;
            width: 95px;
            height: $screeningAllCHeight;
            line-height: $screeningAllCHeight;
            font-size: 14px;
          }

          .left {
            .px-item {
              height: $screeningAllCHeight;
              font-size: 14px;
              cursor: pointer;
              display: flex;
              align-items: center;

              &+.px-item {
                margin-left: 40px;
              }

              &.current {
                color: $COLOR_MAIN;

                .caret-box {
                  i.active {
                    color: $COLOR_MAIN;
                  }
                }
              }

              .caret-box {
                margin-left: 5px;
                display: flex;
                flex-direction: column;

                i {
                  font-size: 12px;
                  color: #D4D4D4;

                }

                .el-icon-caret-top {
                  margin-bottom: -2.5px;
                }

                .el-icon-caret-bottom {
                  margin-top: -2.5px;
                }
              }
            }
          }

          .right {
            align-items: center;

            .list-switch {
              display: flex;
              align-items: center;

              .line {
                display: block;
                width: 1px;
                height: 14px;
                margin: 0 12px;
                background: #D1D1D1;
              }

              i {
                font-size: 18px;
                color: #C6CACE;
                cursor: pointer;

                &.active {
                  color: #F0A340;
                }
              }
            }
          }
        }
      }

      .list-wrapper {
        width: 100%;
        height: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        overflow-y: auto;


        .list-box {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
        }

        .list {
          flex-shrink: 0;
          width: 264px;
          padding: 20px 20px 15px;
          margin-bottom: 20px;
          margin-right: 20px;
          box-sizing: border-box;
          border-radius: 10px;
          background-color: #FFFFFF;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
          display: flex;
          flex-direction: column;
          position: relative;

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

          &:hover {
            .add-div {
              display: flex;
              transition-duration: 0.4s;
              bottom: 0;
              box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
            }

            .chioce-btn {
              display: flex;
            }
          }

          .img-box {
            width: 100%;
            height: 224px;
            margin-bottom: 10px;
            overflow: hidden;
            transform: scale(1);

            .img {
              width: 100%;
              height: 100%;
              object-fit: scale-down;
              border-radius: 6px;
              transition: all .6s;

              &:hover {
                transform: scale(1.2);
              }
            }

          }

          .title,
          .name,
          .type-list {
            width: 100%;
            font-size: 14px;
            font-weight: 400;
            color: #454545;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .name {
            font-size: 16px;
            font-weight: 600;
            line-height: 26px;
          }

          .type-list {
            margin: 2px 0;
            display: flex;

            .tLi {
              flex: 1;
            }
          }

          .title {
            margin-top: 5px;
            margin-bottom: 8px;
            font-size: 16px;
          }

          .action-btn {
            display: flex;
            align-items: center;

            span {
              flex: 1;
              font-size: 14px;
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .res-type {
            display: block;
            width: 44px;
            height: 24px;
            text-align: center;
            position: absolute;
            top: 10px;
            left: 10px;
            color: #fff;
            line-height: 22px;
            font-size: 12px;

            &.style1 {
              background-color: #FFB100;
            }

            &.style2 {
              background-color: #E34624;
            }

            &.style3 {
              background-color: #FFDC2F;
            }

            &.style4 {
              background-color: #7FD126;
            }

            &.style5 {
              background-color: #6B75FF;
            }
          }

          .chioce-btn {
            width: 30px;
            height: 30px;
            font-size: 18px;
            border-radius: 50%;
            color: #fff;
            background-color: $COLOR_MAIN;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
            display: none;
            align-items: center;
            justify-content: center;
          }

          .add-div {
            display: none;
            width: 100%;
            height: 64px;
            padding: 16px 40px;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0;
            border-radius: 0px 0px 4px 4px;
            justify-content: center;
            position: absolute;
            bottom: 0;
            left: 0;
            transition-duration: 0.4s;

            span {
              flex-shrink: 0;
              display: inline-block;
              width: 88px;
              height: 30px;
              border-radius: 2px;
              text-align: center;
              line-height: 30px;
              cursor: pointer;

              &.btn-add-list-border {
                // 清单
                color: $COLOR_TEXT;
                border: 1px solid $COLOR_TEXT;

                &:hover {
                  color: #fff;
                  background: $COLOR_MAIN;
                }
              }

              &.btn-add-collect-border {
                // 收藏
                color: #F7B500;
                border: 1px solid #F7B500;

                &:hover {
                  color: #fff;
                  background-color: #F7B500;
                }
              }

              &.btn-add-del-border {
                // 删除
                color: red;
                border: 1px solid red;

                &:hover {
                  color: #fff;
                  background-color: red;
                }
              }

              &+span {
                margin-left: 45px;
              }
            }

          }


        }

        .no-data {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          p {
            width: 100%;
            text-align: center;
            font-size: 16px;
            background: url(../assets/images/cp/no-data.png) 60% center no-repeat;
            background-size: auto 326px;
            padding-top: 355px;

            span {
              color: $COLOR_TEXT;
            }
          }
        }
      }
    }
  }
}
