HeNan_HanJia/Code/src/components/Zhot/index.module.scss

.Zhot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  :global {
    .ZHll {
      width: 60%;
      height: 100%;
      padding: 3% 3% 1% 3%;
      // 标题
      .h2Titele {
        padding: 0 50px;
        position: relative;
        display: inline-block;
        color: #eacf60;
        font-size: 26px;
        & > img {
          position: absolute;
          top: 60%;
          left: 0;
          transform: translateY(-50%);
          width: 40px;
          height: auto;
        }
        .h2TimgR {
          left: auto;
          right: 0;
        }
      }

      .ZH1main {
        width: 100%;
        height: calc(100% - 50px);
        display: flex;
        align-items: center;
        position: relative;
        padding: 12px 0 60px;
        .ZH1main1 {
          max-height: 100%;
          overflow-y: auto;
          &::-webkit-scrollbar {
            display: none;
          }
          // 一级介绍
          .ZH1txt {
            font-size: 14px;
            line-height: 24px;
            color: #fffddc;
            p {
              font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
                'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
                sans-serif !important;
              margin-bottom: 10px;
            }
            h3 {
              color: #eacf60;
              font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
                'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
                sans-serif !important;
              margin-bottom: 8px;
            }
          }

          // 二级
          .ZH1_2 {
            margin-top: 10px;
            display: flex;
            .ZH1_2ll {
              padding-top: 5px;
              width: 100px;
              margin-right: 10px;

              .ZH1_2llRow {
                margin-bottom: 20px;
                cursor: pointer;
                color: #fffddc;
                font-size: 14px;
                position: relative;
                padding-left: 24px;
                transition: all 0.3s;
                & > img {
                  position: absolute;
                  top: 0;
                  left: 0;
                  height: 20px;
                  &:nth-of-type(2) {
                    opacity: 0;
                  }
                }
                // &:hover {
                //   color: #eacf60;
                //   & > img {
                //     opacity: 0;
                //     &:nth-of-type(2) {
                //       opacity: 1;
                //     }
                //   }
                // }
              }
              .ZH1_2llRowAc {
                color: #eacf60;
                & > img {
                  opacity: 0;
                  &:nth-of-type(2) {
                    opacity: 1;
                  }
                }
              }
            }
            .ZH1_2rr {
              width: calc(100% - 110px);
              font-size: 14px;
              line-height: 24px;
              color: #fffddc;
              p {
                font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
                  'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
                  sans-serif !important;
                margin-bottom: 10px;
              }
            }
          }

          // 三级图片
          .adm-image {
            width: 90%;
            margin: 0 auto;
            height: auto;
            min-height: 60px;
            margin-bottom: 10px;
            .adm-image-tip {
              min-height: 60px;
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: contain !important;
              max-height: 160px;
            }
          }
        }
        .ZH1main2 {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 46px;
          display: flex;
          align-items: center;
          .back1 {
            position: relative;
            #BtnRight {
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              position: relative;
              width: 46px;
              height: 46px;
            }
          }
          // 相关文物
          .ZH1main2rr {
            margin-left: 10px;
            height: 36px;
            width: calc(100% - 60px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .ZH1main2rr1 {
              color: #eacf60;
              font-weight: 700;
              width: 82px;
            }
            .ZH1main2rr2 {
              width: calc(100% - 82px);
              height: 100%;
              overflow: auto;
              white-space: nowrap;
              &::-webkit-scrollbar {
                display: none;
              }
              .ZH1main2rr2Row {
                margin: 0 8px;
                cursor: pointer;
                width: auto;
                height: 36px;
                line-height: 34px;
                padding: 0 10px;
                color: #fffddc;
                display: inline-block;
                border: 1px solid #fffddc;
                border-radius: 20px;
                transition: all 0.3s;
                &:hover {
                  background-color: #eacf60;
                  border-color: transparent;
                  color: #a55b41;
                }
              }
              .ZH1main2rr2RowAc {
                background-color: #eacf60;
                border-color: transparent;
                color: #a55b41;
              }
            }
          }
        }
      }
    }
    .ZHrr {
      width: 40%;
    }

    // -----------------三级信息
    .ZH1main1Son {
      width: 100%;
      max-height: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }

      // 模型 视频
      .H2model {
        width: 100%;
        height: 200px;
        .H2modelSon {
          iframe {
            width: 100%;
            height: 100%;
          }
        }

        video {
          object-fit: contain !important;
          width: 100%;
          height: 100%;
        }
      }
    }

    // 屏幕>=1200
    @media screen and (min-width: 1200px) {
      .ZHll {
        .h2Titele {
          font-size: 30px;
        }
        .ZH1main {
          .ZH1main1 {
            // 一级介绍
            .ZH1txt {
              h3 {
                font-size: 12px;
              }
              p {
                font-size: 10px;
                line-height: 20px;
              }
            }
          }
          // 二级
          .ZH1main1 {
            .ZH1_2 {
              .ZH1_2ll {
                .ZH1_2llRow {
                  font-size: 10px;
                }
              }
              .ZH1_2rr {
                p {
                  font-size: 10px;
                  line-height: 20px;
                }
              }
            }
          }
        }
      }
      .ZH1main2rr1 {
        font-size: 12px !important;
        width: 66px !important;
      }
      .ZHll .ZH1main .ZH1main2 .ZH1main2rr .ZH1main2rr2 {
        width: calc(100% - 60px);
        height: 30px;
        .ZH1main2rr2Row {
          height: 30px;
          line-height: 28px;
          font-size: 12px;
        }
      }
    }
  }
}