xlyErp / xlyUmi

.quickQuote {
  width: 100vw;
  height: 100vh;
  padding-top: 50px;

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;

    :global {
      .ant-btn-primary {
        border-radius: 5px;
      }
    }

    .back {
      position: absolute;
      top: 16px;
      left: 360px;
      z-index: 10;
    }

    .leftTree {
      width: 250px;
      height: 100%;
      background: #3274b7;
      padding: 10px 0 0 10px;
      overflow: hidden;

      :global {
        .ant-tree {
          background: transparent;

          .ant-tree-treenode {
            padding-bottom: 10px;
          }

          .ant-tree-title {
            color: #fff;
            font-size: 16px;
            font-weight: bold;
          }

          .ant-tree-node-content-wrapper.ant-tree-node-selected {
            background-color: #00a183;
          }

          .ant-tree-node-content-wrapper:hover {
            background-color: #009688;
          }
        }

      }
    }

    .overFlow {
      overflow: auto;
    }

    .rightContent {
      flex: 1;
      background: #f8fafe;
      overflow: auto;

      .divider {
        color: #000;
        font-size: 18px;

        &:before,
        &:after {
          // border-width: 2px;
          border-color: #d7d7d7;
        }
      }

      .tabs {
        height: auto;

        :global {
          .ant-tabs-nav-wrap {
            padding-left: 20px;
          }

          .ant-tabs-tab-btn {
            font-size: 16px;
          }
        }
      }

      .hideTab {
        :global {
          .ant-tabs-nav {
            display: none;
          }
        }
      }

      .viewTable,
      .viewTable1 {
        width: 100%;
        height: auto;
        padding: 0 20px 0 10px;
        flex: 1;

        :global {
          .viewStyle {
            background-color: transparent;
          }

          .ant-form-item-label {
            background-color: transparent !important;
            color: #000 !important;
            flex: 0 0 100px !important;
            max-width: 100px !important;
          }

          .ant-form-item-control {
            flex: 1;
            max-width: calc(100% - 100px);
          }

          .viewStyle {
            .ant-input-number {
              width: 100% !important;
            }

            .ant-col {
              margin-bottom: 2px;
            }
          }
        }

        .subViewTable {
          width: 100%;
          height: auto;

          :global {
            .ant-form-item-row {
              flex-direction: row-reverse;
            }

            .ant-form-item-label {
              flex: 0 0 25px !important;
              max-width: 25px !important;

              >label {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: center;

                &::before {
                  content: none;
                  width: 0;
                }

                &::after {
                  content: none;
                  width: 0;
                }
              }
            }

            .ant-form-item-control {
              flex: 1;
              max-width: calc(100% - 25px);
            }

            .viewStyle >.ant-col-24 {
              padding-left: 100px;
            }
          }
        }
      }

      .viewTable1 {
        padding: 0 20px 0 0;
      }

      .boxRadio {
        width: 100%;
        height: 30px;
        padding: 10px 0 0 10px;
      }

      .boxPart1 {
        width: 100%;
        height: auto;
        display: flex;
        padding: 0 10px 0 10px;

        .boxPart1Left {
          flex: 1;
          border-right: 1px solid #d7d7d7;
        }

        .boxPart1Right {
          width: auto;
          height: auto;

          .boxRreview {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;

            :global {
              .ant-image {
                padding: 15px;
              }
            }

            .noImg {
              width: 300px;
              height: 300px;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid #d7d7d7;
              font-size: 16px;

              &:first-child {
                border-left: 0;
              }
            }

            .boxRreviewTitile {
              width: 100%;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 18px;
            }
          }
        }
      }

      .boxPinbanInfo {
        width: 100%;
        height: auto;
        padding: 0 10px 0 10px;
        display: flex;
        position: relative;

        >div:first-child {
          flex: 1;
          border-right: 1px solid #d7d7d7;
        }

        >div:nth-child(2) {
          >div:first-child {
            display: flex;
          }
        }

        .boxComponent {
          width: 400px;
          height: 300px;
          position: relative;

          // overflow: hidden;
          .boxComponentWidth {
            position: absolute;
            bottom: -10px;
            left: 0px;
            width: 400px;
            height: 10px;
            border: 1px solid #333;
            border-top: transparent;

            .boxComponentWidthTitle {
              width: 400px;
              height: 10px;
              position: absolute;
              top: 15px;
              left: 0px;
              line-height: 10px;
              font-size: 18px;
              text-align: center;
            }
          }
        }

        .boxComponent1 {
          width: 200px;
          height: 300px;
          // border: 1px solid #d7d7d7;
          position: relative;
          overflow: hidden;
        }

      }

      .boxPinbanBtn {
        position: absolute;
        top: 0;
        left: 200px;
      }

      .boxPart2 {
        width: 100%;
        height: auto;
      }

      .many {
        width: 100%;
        height: 235px;
        padding: 0 10px 0 10px;
        position: relative;

        .btns {
          position: absolute;
          top: -50px;
          right: 10px;
          height: 40px;
          min-width: 40px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          background-color: #f8fafe;
          gap: 10px;

          :global {
            .ant-btn {
              border-radius: 5px;
            }
          }

          .confirmOrder {
            background-color: #53b637;
            border-color: #53b637;
          }
        }
      }

      .materialsLine {
        display: flex;

        .materialsViewTable {
          flex: 1;

          :global {
            .ant-col-4 .ant-col-7 {
              flex-basis: 50px !important;
            }
          }
        }

        .materialsBtns {
          width: 80px;
          display: flex;
          align-items: center;
          justify-content: space-around;

          :global {
            .ant-btn:nth-child(2) {
              background-color: #53b637;
              border-color: #53b637;
            }
          }
        }
      }
    }
  }
}