HNBWY_Model/webNew/src/pages/Home/index.module.scss

.Home {
  width: 100%;
  height: 100vh;

  // height: 100vh;
  // background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(207, 202, 189, 1));
  background-image: url('../../assets/img/bg.png');
  background-size: 100% 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #741A1A;
  }

  &::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  :global {


    .modelTxtBox {
      z-index: 10;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }

    .activeTxtBox {
      opacity: 1;
      pointer-events: auto;
    }


    .title {
      width: 100%;
      height: 90px;
      // background-color: #741A1A;
      background-image: url('../../assets/img/topBg.png');
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      position: relative;

      .logo {
        width: 195px;
        margin-left: 70px;

        &>img {
          width: 100%;
        }
      }
    }

    .mainBox {
      width: 1400px;
      margin: 0px auto 50px;
      // height: calc(100% - 170px);
      position: relative;

      .searchBox {
        .searchBoxTop {
          display: flex;
          height: 40px;

          &>div {
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            padding-left: 26px;
            color: #777676;
            position: relative;
            margin-right: 40px;

            &::before {
              content: '';
              position: absolute;
              top: 7px;
              left: 0;
              width: 20px;
              height: 20px;
              background-image: url('../../assets/img/jiantou.png');
              background-size: 100% 100%;
            }

          }

          .active {
            color: #9F5342;
            pointer-events: none;

            &::before {
              background-image: url('../../assets/img/jiantouAc.png');
            }

            &::after {
              content: '';
              position: absolute;
              bottom: -10px;
              left: 43px;
              width: 20px;
              height: 20px;
              background-image: url('../../assets/img/topAc.png');
              background-size: 100% 100%;
              z-index: 99;
            }
          }
        }

        .searchBoxAcBox {
          padding: 0px 0 12px;
          border-bottom: 1px solid #C7AA68;

          .searchBoxAcMain {
            width: 100%;
            overflow-x: auto;

            &::-webkit-scrollbar {
              width: 6px;
              height: 6px;
            }

            &::-webkit-scrollbar-thumb {
              border-radius: 10px;
              background-color: #c1a463;
            }

            &::-webkit-scrollbar-track {
              border-radius: 10px;
            }

            .appSw {
              background-color: #9F5342;
              // display: flex;

              // flex-wrap: wrap;
              .swiper-slide {
                // display: inline-block;
                width: auto !important;

                .row {
                  cursor: pointer;
                  padding: 8px 30px;
                  color: #E1CEA4;
                  font-size: 14px;
                  position: relative;

                  &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                    width: 1px;
                    height: 16px;
                    background-color: #E1CEA4;
                  }
                }

                &:last-child {
                  .row {
                    &::before {
                      background-color: transparent;
                    }
                  }
                }
              }



              .active {
                background-color: #C1A463;
                color: #fff;
                pointer-events: none;
              }
            }
          }
        }

        .seatchinputBox {
          height: 40px;
          margin: 10px 0 15px;
          display: flex;

          .search {
            // background-color: #fff;
            background-image: url('../../assets/img/Union.png');
            background-size: 100% 100%;
            position: relative;
            width: calc(100% - 120px);
            padding-left: 10px;

            .ant-input-affix-wrapper {
              background-color: transparent;
              border: none;
              height: 40px;
              line-height: 40px;
            }

            .ant-input-affix-wrapper-focused,
            .ant-input-affix-wrapper:focus {
              box-shadow: none
            }

            .searchBtn {
              position: absolute;
              top: 5px;
              left: 0;
              cursor: pointer;
              width: 30px;
              height: 30px;
              z-index: 2;
            }

            .searchClear {
              position: absolute;
              top: 5px;
              right: 0;
              cursor: pointer;
              width: 30px;
              height: 30px;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .rightBtn {
            width: 120px;
            height: 100%;
            cursor: pointer;
            background-image: url('../../assets/img/Intersect.png');
            background-size: 100% 100%;
            color: #fff;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

      }

      .modelBox {
        // border-radius: 3px 3px 0 0;
        // margin-top: 10px;
        // box-shadow: 0px 0px 5px 3px #ccc;
        // background-color: rgba(255, 255, 255, 0.5000);
        width: 100%;
        // height: calc(100% - 300px);
        // overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        // padding: 0px 15px 0;

        .modelBox_row {
          border-radius: 6px;
          overflow: hidden;
          cursor: pointer;
          width: 264px;
          height: 264px;
          background-color: #CFCABD;
          margin: 0 20px 20px 0;
          position: relative;

          .modelBox_row_hover {
            opacity: 0;
            position: none;
            transition: opacity .3s;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            padding: 50px;
            font-size: 24px;
            line-height: 34px;
            backdrop-filter: blur(4px);
            background-color: rgba(0, 0, 0, .8);
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 6px;
            width: 100%;
            height: 100%;
          }

          &:hover {
            // background-color: #C1A463;

            .modelBox_row_hover {
              opacity: 1;
            }
          }

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

          &>img {
            width: 264px;
            height: 264px;
            object-fit: cover;
          }

          p {
            height: 40px;
            display: flex;
            align-items: center;
            background-color: #741A1A;
            text-align: center;
            color: #fff;
            font-size: 16px;

            .row_txt1 {
              height: 100%;
              width: 100px;
              background-color: rgba(255, 255, 255, .6);
              line-height: 40px;
              border-right: 2px solid #fff;
            }

            .row_txt2 {
              height: 100%;
              flex: 1;
              line-height: 40px;
            }
          }
        }

        .noneList {
          width: 100%;
          height: 100%;
          height: 500px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          position: relative;

          .incoBox {
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            margin-bottom: 15px;
            background-color: #BE262B;
            border-radius: 50%;
            color: #fff;
            font-weight: 700;
          }

          &>p {
            font-weight: 700;
            font-size: 20px;
          }
        }
      }


      .page {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}