頁面修正

about/about.css

@@ -42,13 +42,6 @@ body .arrow:hover {
           box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
 }
 
-@media screen and (max-width: 767px) {
-  body .arrow {
-    position: absolute;
-    bottom: 200px;
-  }
-}
-
 #Navigation {
   background: rgba(112, 112, 112, 0.5);
   height: 4.5vw;
@@ -253,6 +246,10 @@ body .arrow:hover {
   }
 }
 
+#banner #banner-container .banner-des-about .banner-3 img {
+  margin-bottom: -45px;
+}
+
 @media screen and (min-width: 1025px) {
   #banner #banner-container .banner-m {
     display: none;
@@ -278,9 +275,16 @@ body .arrow:hover {
   background: rgba(141, 194, 31, 0.8);
 }
 
+@media screen and (min-width: 1025px) {
+  #banner #banner-container ul {
+    margin-left: 8px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   #banner #banner-container ul {
     margin-top: 5vw;
+    margin: 10px auto;
   }
 }
 

about/about.scss

@@ -28,6 +28,7 @@ body {
         width: 45px;
         height: 40px;
         z-index: 10;
+        
         a{
             margin: 30px 0px;
         }
@@ -41,10 +42,7 @@ body {
         &:hover {
             box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
         }
-        @media screen and(max-width:$moblie) {
-            position: absolute;
-            bottom: 200px;
-        }
+       
     }
 }
 #Navigation {
@@ -204,6 +202,12 @@ body {
                     }
                 }
             }
+            .banner-3 {
+              
+                img {
+                 margin-bottom: -45px;
+                }
+            }
         }
 
         .banner-m {
@@ -223,10 +227,15 @@ body {
         }
 
         ul {
+
             text-align: center;
             background: rgba(141, 194, 31, 0.8);
+            @media screen and(min-width:$desktop) {
+              margin-left: 8px;
+            }
             @media screen and(max-width:$moblie) {
                 margin-top: 5vw;
+                margin:10px auto ;
             }
             .nav-item {
                 padding: 10px;

about/goto2.js

@@ -138,7 +138,7 @@ $(document).ready(function () {
 
                         aboutInt += ' \
                         <div class="banner-des row vertical align-items-end">\
-                            <div class="col-2 pe-0">\
+                            <div class="banner-3 col-2 pe-0">\
                                 <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
                             </div>\
                             <div class="banner-0 col-9 text-white">\
@@ -273,9 +273,9 @@ if (jQuery(window).width() < 767) {
         var y = window.scrollY;
     
         if (y > 550) {
-            $(".nav").css({"position":"fixed","top":"55px","width":"96vw","margin":"0 auto","z-index":"10"});
+            $(".nav").css({"position":"fixed","top":"45px","margin":"10px auto","z-index":"10"});
         } else {
-            $(".nav").css({"position":"static","margin":"10px 0px"});
+            $(".nav").css({"position":"static"});
         }
     
     });

about/index.html

@@ -97,28 +97,31 @@
            
             <!-- 手機板 -->
             <a style="text-decoration: none;" href="../index.html"><div class="banner-m row vertical align-items-end px-0 mx-0"></div></a>
-            <ul class="nav row nav-pills mb-3 justify-content-md-center rounded-pill" id="pills-tab" role="tablist">
-                <li class="nav-item col-3 col-lg-1" role="presentation">
-                    <button class="nav-item2 border-0 bg-transparent text-white" id="pills-home-tab"
-                        data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab"
-                        aria-controls="pills-home" aria-selected="true">公司簡介</button>
-                </li>
-                <li class="nav-item col-3 col-lg-1" role="presentation">
-                    <button class="nav-item2 border-0 bg-transparent text-white" id="pills-profile-tab"
-                        data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab"
-                        aria-controls="pills-profile" aria-selected="false">個案賞析</button>
-                </li>
-                <li class="nav-item col-3 col-lg-1" role="presentation">
-                    <button class="nav-item2 border-0 bg-transparent text-white" id="pills-contact-tab"
-                        data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab"
-                        aria-controls="pills-contact" aria-selected="false">精彩影音</button>
-                </li>
-                <li class="nav-item col-3 col-lg-1" role="presentation">
-                    <button class="nav-item2 border-0 bg-transparent text-white" id="pills-contact2-tab"
-                        data-bs-toggle="pill" data-bs-target="#pills-contact2" type="button" role="tab"
-                        aria-controls="pills-contact" aria-selected="false">秘技分享</button>
-                </li>
-            </ul>
+       
+                
+                <ul class="nav row nav-pills mb-3 col-12 justify-content-md-center rounded-pill" id="pills-tab" role="tablist">
+                    <li class="nav-item col-3 col-lg-1" role="presentation">
+                        <button class="nav-item2 border-0 bg-transparent text-white" id="pills-home-tab"
+                            data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab"
+                            aria-controls="pills-home" aria-selected="true">公司簡介</button>
+                    </li>
+                    <li class="nav-item col-3 col-lg-1" role="presentation">
+                        <button class="nav-item2 border-0 bg-transparent text-white" id="pills-profile-tab"
+                            data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab"
+                            aria-controls="pills-profile" aria-selected="false">個案賞析</button>
+                    </li>
+                    <li class="nav-item col-3 col-lg-1" role="presentation">
+                        <button class="nav-item2 border-0 bg-transparent text-white" id="pills-contact-tab"
+                            data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab"
+                            aria-controls="pills-contact" aria-selected="false">精彩影音</button>
+                    </li>
+                    <li class="nav-item col-3 col-lg-1" role="presentation">
+                        <button class="nav-item2 border-0 bg-transparent text-white" id="pills-contact2-tab"
+                            data-bs-toggle="pill" data-bs-target="#pills-contact2" type="button" role="tab"
+                            aria-controls="pills-contact" aria-selected="false">秘技分享</button>
+                    </li>
+                </ul>
+           
             <div class="tab-content" id="pills-tabContent">
                 <div class="sec01 tab-pane fade show active" id="pills-home" role="tabpanel"
                     aria-labelledby="pills-home-tab">