feats

src/pages/invitation/index.vue

@@ -79,7 +79,7 @@
               <div class="sub_title">
                 <img :class="['chxz_title', (swiper || {}).activeIndex === 3 ? 'animated zoomIn': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title.png">
                 <img :class="['chxz_title_ch', (swiper || {}).activeIndex === 3 ? 'animated fadeInLeft': '']" style="animation-delay: 0.5s;" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title_ch.png">
-                <img :class="['chxz_title_ch', (swiper || {}).activeIndex === 3 ? 'animated fadeIn': '']" style="animation-delay: 1s;" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_ch_desc.png">
+                <img :class="['chxz_desc', (swiper || {}).activeIndex === 3 ? 'animated fadeIn': '']" style="animation-delay: 1s;" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_ch_desc.png">
               </div>
               <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="15" :class="['amap', (swiper || {}).activeIndex === 3 ? 'animated fadeIn': '']" style="animation-delay: 1s;">
                 <el-amap-marker :position="mapCenter" :events="events"></el-amap-marker>
@@ -90,6 +90,22 @@
             </div>
           </div>
         </div>
+        <div class="swiper-slide hydlPage">
+          <div>
+            <div class="subPage">
+              <div class="sub_title">
+                <img :class="['hydl_title', (swiper || {}).activeIndex === 4 ? 'animated zoomIn': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title.png">
+                <img :class="['hydl_title_en', (swiper || {}).activeIndex === 4 ? 'animated fadeIn': '']" style="animation-delay: 0.5s;" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/invitation_letter.png">
+              </div>
+              <div class="sub_content">
+                <img :class="['sub_content_img', (swiper || {}).activeIndex === 4 ? 'animated fadeInUp': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/welcome.png" alt="">
+              </div>
+              <div class="sub_bottom">
+                <img src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/bottom-logo.png">
+              </div>
+            </div>
+          </div>
+        </div>
     </div>
   </div>
 </template>

src/pages/invitation/page.scss

@@ -255,7 +255,7 @@
         li{
           align-items: center;
           &:not(:first-child){
-            margin-top: 20px;
+            margin-top: 17px;
           }
           span{
             &:first-child{
@@ -360,3 +360,45 @@
     }
   }
 }
+
+.hydlPage{
+  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;
+      .hydl_title{
+        width: 65vw;
+      }
+      .hydl_title_en{
+        width: 65vw;
+        margin-top: 8px;
+      }
+    }
+    
+    .sub_content {
+      padding: 60px 0 40px;
+
+      .sub_content_img {
+        display: block;
+        margin: 0 auto;
+        height: 48vh;
+      }
+    }
+
+    .sub_bottom{
+      margin-top: 5vh;
+      text-align: center;
+      img{
+        width: 104px;
+      }
+    }
+  }
+}