h5-2019-wechat/src/pages/invitation/page.scss

.swiper-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.swiper-slide{
  overflow: hidden;
}

@keyframes rotate{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.musicbox {
  position: fixed;
  top: 0.8rem;
  right: 0.1rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  z-index: 130;

  .on {
    animation: rotate 3s linear infinite;
  }

  img {
    width: 100%;
    height: 100%;
  }
}


.mainPage{
  background: url(https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_bg.jpg);
  width: 100%;
  height: 100%;

  .subPage{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    div{
      padding: 0 20%;
      text-align: center;
      .main_main{
        width: 100%;
      }
      .main_title{
        width: 194px;
        margin-top: 60px;
        animation-delay: 0.5s;
      }

      .main_happy{
        margin-top: 37px;
        width: 133px;
        animation-delay: 1s;
      }
    }
  }

  .main_logo{
    position: absolute;
    top: 3vh;
    width: 100px;
    right: 26px;
  }
}

.yqhPage{
  background: url(https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_bg.jpg);
  width: 100%;
  height: 100%;

  .subPage{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    .sub_title{
      text-align: center;
      .yqh_title{
        width: 65vw;
      }
      .yqh_title_min{
        width: 67vw;
        margin-top: 8px;
      }
    }
    text-align: center;
    .yqh{
      margin-top: 5vh;
      text-align: center;
      height: 520px;
      .div_xz{
        height: 500px;
        z-index: 2;
        position: relative;
        overflow: hidden;
        div{
          div{
            width: 100%;
            top: 8%;
            left: 21%;
            position: absolute;
            z-index: 5;
            white-space: nowrap;
            display: inline-block;
            text-align: left;
            a{
              width: 34px;
              height: 34px;
              border-radius: 50%;
              display: inline-block;
              position: relative;
              overflow: hidden;
              vertical-align: middle;
              img{
                width: 100%;
                height: 100%;
              }
            }
            span{
              margin-left: .1rem;
              color: #9d886d;
              font-size: .12rem;
              vertical-align: middle;
            }
          }
        
          img{
            height: 100%;
            position: relative;
            animation-duration: 2s;
          }
        }
      }
      .div_xf_top{
        height: 150px;
        bottom: 0;
        z-index: 3;
        position: relative;
        margin-top: -130px;
        img{
          height: 100%;
        }
      }
      .div_xf_down{
        height: 238px;
        bottom: 0;
        z-index: 1;
        position: relative;
        margin-top: -238px;
        img{
          height: 100%;
        }
      }
      .yqh_happy{
        margin-top: 4vh;
        width: 133px;
      }
    }
    @media screen and(max-height:600px){
      .yqh{
        margin-top: 5vh;
        text-align: center;
        height: 420px;
        .div_xz{
          height: 400px;
          z-index: 2;
          position: relative;
          overflow: hidden;
          div{
            img{
              height: 100%;
              position: relative;
            }
          }
        }
        .div_xf_top{
          height: 120px;
          bottom: 0;
          z-index: 3;
          position: relative;
          margin-top: -120px;
          img{
            height: 100%;
          }
        }
        .div_xf_down{
          height: 191px;
          bottom: 0;
          z-index: 1;
          position: relative;
          margin-top: -191px;
          img{
            height: 100%;
          }
        }
        .yqh_happy{
          margin-top: 4vh;
          width: 133px;
        }
      }
    }
  }
}

.hylcPage{
  background: url(https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_bg.jpg);
  width: 100%;
  height: 100%;

  .subPage{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    .sub_title{
      text-align: center;
      .hylc_title_hy{
        margin-top: 8px;
      }
    }
    >div{
      padding: 0 36px;
      position: relative;
      ul{
        position: relative;
        overflow: hidden;
        margin-top: 50px;
        &::after{
          content: '';
          width: 1px;
          height: calc(100% - 20px);
          background: #6c503b;
          position: absolute;
          left: 74px;
          top: 10px;
        }
        li{
          align-items: center;
          &:not(:first-child){
            margin-top: 20px;
          }
          span{
            &:first-child{
              width: 70px;
            }
            color: #fff;
            font-size: 12px;
          }
          div{
            margin-left: 12px;
            color: #ddbc75;
            font-size: 14px;
          }
          &::after{
            content: '';
            width: 5px;
            height: 5px;
            background-color: #fff;
            border-radius: 50%;
            left: 72px;
            position: absolute;
            z-index: 1;
            // margin-top: 8px;
          }
        }
      }
      @media screen and(max-height:600px){
        ul{
          margin-top: 36px;
          li {
            &:not(:first-child){
              margin-top: 15px;
            }
          }
        }
      }
    }
  }
  .hylc_title{
    width: 65vw;
  }

  .hylc_title_hy{
    width: 34vw;
  }

  .sub_bottom{
    text-align: center;
    margin-top: 44px;
    img{
      width: 104px;
    }
  }
  @media screen and(max-height:600px){
    .sub_bottom{
      margin-top: 30px;
    }
  }
}

.chxzPage{
  background: url(https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_bg.jpg);
  width: 100%;
  height: 100%;
  .subPage{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    .sub_title{
      text-align: center;
      .chxz_title{
        width: 65vw;
      }
      .chxz_title_ch{
        width: 34vw;
        margin-top: 8px;
      }
      .chxz_desc{
        margin-top: 80px;
        width: 100%;
      }
    }
    >div{
      padding: 0 38px;
      position: relative;
    }

    .amap{
      height: 210px;
      margin-top: 20px;
    }

    .sub_bottom{
      margin-top: 5vh;
      text-align: center;
      img{
        width: 104px;
      }
    }
  }
}