fix scroll issue & css

src/fe/healthpassport/css/all.css

@@ -10890,7 +10890,7 @@ button.swiper-pagination-bullet {
 }
 .form__item-agree {
   background: none;
-  margin-bottom: 0.5em;
+  margin-bottom: 1em;
 }
 .form__item-agree::before {
   display: none;
@@ -10906,13 +10906,13 @@ button.swiper-pagination-bullet {
 }
 .form__item-agree .label p {
   display: inline-block;
-  font-size: 1.3em;
+  font-size: 1.5em;
   margin-bottom: 0;
 }
 .form__item-agree .label__checkbox {
   display: inline-block;
-  width: 1em;
-  height: 1em;
+  width: 1.5em;
+  height: 1.5em;
   border: 1px solid #1E2846;
   margin-right: 0.5em;
   display: flex;

src/fe/healthpassport/css/component/_form.scss

@@ -39,7 +39,7 @@
         }
         &-agree {
             background: none;
-            margin-bottom: 0.5em;
+            margin-bottom: 1em;
             &::before {
                 display: none;
             }
@@ -53,13 +53,13 @@
                 align-items: center;
                 p {
                     display: inline-block;
-                    font-size: 1.3em;
+                    font-size: 1.5em;
                     margin-bottom: 0;
                 }
                 &__checkbox {
                     display: inline-block;
-                    width: 1em;
-                    height: 1em;
+                    width: 1.5em;
+                    height: 1.5em;
                     border: 1px solid $c-black;
                     margin-right: 0.5em;
                     display: flex;

src/fe/healthpassport/index.html

@@ -35,8 +35,7 @@
     </div>
     <!-- Loading End -->
   </div>
-  <div class="wrapper">
-    <div class="wrapper__line-scroll-fixed">
+  <div class="wrapper"> 
       <main class="main">
         <!-- 表單 form -->
         <section class="section register">
@@ -371,7 +370,7 @@
           </div>
         </section>
         <!-- 活動辦法 methods -->
-        <section class="section methods">
+        <section class="section methods wrapper__line-scroll-fixed">
           <div class="backform"><span><</span><p>回上一頁</p></div>
           <div class="section__container methods__container">
             <p>
@@ -397,7 +396,7 @@
           </div>
         </section>
         <!-- 護照 passport -->
-        <section class="section passport">
+        <section class="section passport wrapper__line-scroll-fixed">
           <div class="section__container passport__container">
             <div class="passport__intro">
               <div class="passport__intro__bg">
@@ -413,10 +412,10 @@
                 </div>
                 <div class="passport__intro__content">
                   <div class="passport__intro__nickname">
-                    <h2>王小美</h2>
+                    <h2></h2>
                   </div>
                   <div class="passport__intro__info">
-                    <p><span class="introGender">女性</span> / <span class="introAge">30-39歲 </span></p>
+                    <p><span class="introGender"></span> / <span class="introAge"></span></p>
                   </div>
                 </div>
               </div>
@@ -442,7 +441,6 @@
       </main>
       <footer class="footer">
       </footer>
-    </div>
   </div>
   <!-- Alert Modal -->
   <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

src/fe/healthpassport/js/base.js

@@ -39,10 +39,25 @@ base = function () {
 					if(userData === null) {
 						register.LinePicHandler(profile.pictureUrl)
 						sectionFadeIn(".register");
+						sectionFadeOut(".passport");
+						sectionFadeOut(".methods");
 					}else {
 						sectionFadeIn(".passport");
+						sectionFadeOut(".methods");
+						sectionFadeOut(".register");
 						passport.buildPassportHandler(userData)
 					}
+
+					// 測試用
+					// sectionFadeIn(".passport");
+					// sectionFadeOut(".methods");
+					// sectionFadeOut(".register");
+					// passport.buildPassportHandler(userData)
+
+					// register.LinePicHandler(profile.pictureUrl)
+					// sectionFadeIn(".register");
+					// sectionFadeOut(".passport");
+					// sectionFadeOut(".methods");
 				})
 		})
 
@@ -96,7 +111,7 @@ base = function () {
 
 	// page進入動態
 	function sectionFadeIn(el) {
-		// $(el).fadeIn();
+		$(el).show();
 		gsap.to(el, {
 			duration: 0.3,
 			autoAlpha: 1
@@ -105,10 +120,12 @@ base = function () {
 
 	// page離開動態
 	function sectionFadeOut(el) {
-		// $(el).fadeOut();
 		gsap.to(el, {
 			duration: 0.3,
-			autoAlpha: 0
+			autoAlpha: 0,
+			onComplete: function() {
+				$(el).hide();
+			}
 		})
 	}