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

.Tab1 {
  width: 100%;
  height: 100%;
  background-color: #837b68;

  :global {
    .Tab1main {
      width: 100%;
      height: 100%;
      padding: 60px 40px 40px;

      .Tab1main1 {
        height: 100%;

        .t1Tit {
          font-weight: 700;
          font-size: 24px;
          color: var(--themeColor);
          text-align: center;
        }

        .videoBox {
          margin-top: 40px;
          width: 100%;
          height: calc(100% - 160px);
          display: flex;
          flex-wrap: wrap;

          .videoRow {
            flex-shrink: 0;
            width: calc(20% - 30px);
            margin: 20px 15px;
            height: 40%;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            padding: 10px;
            border-radius: 6px;


            &>div {
              width: 100%;
              height: calc(100% - 40px);
              position: relative;

              // 阴影
              .maskPlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, .4);
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 60px;
              }

              &>video {
                position: absolute;
                // top: 50%;
                // transform: translateY(-50%);
                // left: 0;
                width: 100%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
                object-fit: fill;
              }

              &>img {
                width: 100%;
                height: 100%;
                // object-fit: contain !important;
              }
            }

            p {
              flex: 1;
              display: inline-block;
              font-size: 16px;
              text-align: center;
              padding: 0 5px;
              margin-top: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #47392C;
              // color: #fff;
            }

            &:hover {
              box-shadow: 1px 1px 5px 5px rgba(74, 64, 61, .8);
            }
          }


        }
      }
    }
  }
}