YPZZBWG/pc/src/pages/A2Main/GoodsSw/index.module.scss

.GoodsSw {
  height: calc(100% - 100px);

  :global {
    .noInfo {
      height: calc(100% - 100px);
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--themeColor);
      font-size: 40px;
      padding-top: 100px;
    }

    .goddsBox {
      height: calc(100% - 100px);




      // 第一个自动播发的盒子
      .goddsSwBox {
        height: calc(50% - 20px);
        border-bottom: 1px solid rgba(231, 219, 188, 0.50);
        position: relative;
        width: 100%;
        overflow-x: auto;

        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 0px;
          /*高宽分别对应横竖滚动条的尺寸*/
          height: 0px;
        }



        .goddsSw {
          display: flex;
          // position: absolute;
          // left: 0;
          // top: 0;
          height: 100%;

          .goddsRow {
            width: 25vw;
            color: #fff;
            padding: 0 10px 0 90px;
            display: flex;
            height: 100%;

            .name {
              width: 40px;
              margin-right: 20px;
              word-wrap: break-word;
              writing-mode: vertical-lr;
              writing-mode: tb-lr;
              font-size: 16px;
              color: #C8B992;
              padding-top: 20px;
              letter-spacing: 3px;
              position: relative;

              &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 7.5px;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #C8B992;
              }
            }

            .goddsImg {
              cursor: pointer;

              width: calc(100% - 80px);
              height: calc(100% - 80px);
              position: relative;

              &::before {
                pointer-events: none;
                content: '';
                position: absolute;
                bottom: -80px;
                left: 50%;
                transform: translateX(-50%);
                background: linear-gradient(rgba(231, 219, 188, 0), rgba(231, 219, 188, 1));
                width: 1px;
                height: 90px;
              }

              img {
                pointer-events: none;
                object-fit: contain;
              }
            }
          }
        }


      }



      .goddsSwBox2 {
        overflow-y: hidden;
        border-bottom: none;
        border-top: 1px solid rgba(231, 219, 188, 0.50);

        margin-top: 40px;

        .goddsSw {

          .goddsRow {
            padding: 0 90px 0 10px;

            .name {
              position: relative;
              top: 80px;
            }

            .goddsImg {
              top: 80px;

              &::before {
                bottom: auto;
                top: -80px;
                background: linear-gradient(rgba(231, 219, 188, 1), rgba(231, 219, 188, 0));
              }

            }
          }
        }
      }


    }

    .searchBox {
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;

      .searRow {
        margin: 20px;



        .ant-select-selector {
          border-radius: 0 6px 0px 6px;
          background-color: transparent;
          color: var(--themeColor);
          border: 1px solid var(--themeColor);

          .ant-select-selection-search-input::-webkit-input-placeholder {
            /* WebKit browsers */
            color: var(--themeColor);
          }

          .ant-select-selection-search-input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: var(--themeColor);
          }

          .ant-select-selection-search-input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: var(--themeColor);
          }

          .ant-select-selection-search-input:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: var(--themeColor);
          }

          .ant-select-selection-item {
            color: var(--themeColor);
          }

          .ant-select-selection-placeholder {
            color: var(--themeColor);
          }

        }

        .ant-select-arrow {
          color: var(--themeColor);
        }

        .anticon-down {
          color: var(--themeColor);
        }
      }

      .ant-input-affix-wrapper {
        border-radius: 0 6px 0px 6px;
        background-color: transparent;
        color: var(--themeColor);
        border: 1px solid var(--themeColor);

        .ant-input {
          background-color: transparent;
          color: var(--themeColor);

          &::-webkit-input-placeholder {
            /* WebKit browsers */
            color: var(--themeColor);
          }

          &:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: var(--themeColor);
          }

          &::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: var(--themeColor);
          }

          &:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: var(--themeColor);
          }
        }

        .ant-input-clear-icon {
          color: var(--themeColor);
        }
      }

    }

    // 藏品详情
    .goodsInfoBox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      transition: all .3s;
      backdrop-filter: blur(10px);
      padding-top: 30px;

      &>div {
        color: #fff;
      }
    }

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

    .curTitBox {
      border-radius: 0 0 4px 4px;
      border-top: 3px solid #b6ab97;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 370px;
      background-color: #726b56;

      .curClose {
        position: absolute;
        right: 15px;
        top: 15px;
        cursor: pointer;
        color: #98856f;
        font-size: 24px;
      }

      .curImg {
        margin: 70px auto 30px;
        width: 213px;
        height: 213px;
        position: relative;

        &>img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 1;
          transition: all 2s;
        }
      }

      &>p {
        font-size: 14px;
        color: #fff;
        text-align: center;
      }
    }
  }
}