頁面修畫

goto.js

@@ -3,18 +3,28 @@ $('#sec03-slider').slick({
     arrows: false,
     slidesToShow: 1,
     slidesToScroll: 1,
-    infinite:false,
-    
-   
+    infinite:true,
 });
+
+$('#sec03-slider-next').click(function(){
+$('#sec03-slider').slick('slickNext')
+});
+
 // sec05 熱門作品 手機輪播
 $('#sec05-moblie-slider').slick({
     arrows: false,
     slidesToShow: 1,
     slidesToScroll: 1,
     infinite:true,
+   
 
 });
+$('#sec05-slider-next').click(function(){
+  $('#sec05-moblie-slider').slick('slickNext')
+  });
+
+ 
+
 // sec05桌機輪播
 $('#sec05-destop-slider').slick({
     arrows: true,
@@ -61,8 +71,11 @@ $('#sec04-moblie-container').slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     infinite:false,
-    centerMode: true,
+    // centerMode: true,
 });
+$('#sec04-slider-next').click(function(){
+  $('#sec04-moblie-container').slick('slickNext')
+  });
 
 // 手機板menu彈跳視窗
 $("#menu-box2").hide();

style.css

@@ -17,6 +17,10 @@
   }
 }
 
+body {
+  background: #fff;
+}
+
 body .learn-more {
   color: #fff;
   width: 30%;
@@ -221,6 +225,10 @@ body .learn-more:hover {
   }
 }
 
+#banner #banner-container .youtube #youtube-text {
+  height: 500px;
+}
+
 #banner #banner-container .youtube hr {
   width: 12vw;
   height: 2px;
@@ -240,7 +248,7 @@ body .learn-more:hover {
 }
 
 #banner #banner-container .youtube h1 {
-  font-size: 40px;
+  font-size: 35px;
   padding-top: 0;
 }
 
@@ -553,26 +561,59 @@ body .learn-more:hover {
 #sec02-moblie #sec02-container #sec02-top-box {
   position: absolute;
   top: 1px;
+  left: 20px;
+}
+
+@media screen and (max-width: 350px) {
+  #sec02-moblie #sec02-container #sec02-top-box {
+    left: 10px;
+  }
 }
 
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 {
   color: #000;
 }
 
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
+  width: 120px;
+  height: 150px;
+}
+
+@media screen and (max-width: 350px) {
+  #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
+    width: 100px;
+    height: 130px;
+  }
+}
+
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
   width: 80px;
   height: 120px;
   border-radius: 50%;
 }
 
+@media screen and (max-width: 350px) {
+  #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
+    width: 70px;
+    height: 100px;
+  }
+}
+
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
   font-size: 12px;
+  text-align: left;
 }
 
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
   font-size: 30px;
 }
 
+@media screen and (max-width: 350px) {
+  #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
+    font-size: 25px;
+  }
+}
+
 #sec03 {
   padding-top: 15vw;
   padding-bottom: 5vw;
@@ -643,14 +684,20 @@ body .learn-more:hover {
 #sec03-moblie .sec03-table-title, #sec03-moblie .sec03-table-title2 {
   font-family: 微軟正黑體;
   font-weight: 900;
-  font-size: 15px;
-  padding: 0 !important;
-  margin-bottom: 20px;
+  font-size: 14px;
+  display: inline-block;
   color: #9B9B9B;
 }
 
 #sec03-moblie .contant-toggle {
+  display: inline-block;
   color: #000;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #000;
+}
+
+#sec03-moblie #sec03-slider {
+  padding-top: 5vw;
 }
 
 #sec03-moblie #sec03-slider .slick-slide img {
@@ -964,15 +1011,12 @@ body .learn-more:hover {
   padding: 15px;
 }
 
-#sec05-moblie #sec05-container #sec05-moblie-slider {
-  width: 100vw;
-}
-
-#sec05-moblie #sec05-container #sec05-moblie-slider .sec05-moblie-box {
+#sec05-moblie #sec05-moblie-slider .sec05-moblie-box {
+  padding: 20px;
   margin: 30px;
 }
 
-#sec05-moblie #sec05-container #sec05-moblie-slider .sec05-moblie-box .card {
+#sec05-moblie #sec05-moblie-slider .sec05-moblie-box .card {
   border: none;
 }
 

style.scss

@@ -16,6 +16,7 @@ $navbgcolor: #313131;
     }
 }
 body {
+    background: #fff;
     .learn-more {
         color: #fff;
         width: 30%;
@@ -180,13 +181,15 @@ body {
         .youtube {
             width: 80vw;
             padding-top: 10vw;
-            
             margin: 0 auto;
             color: #fff;
             @media screen and(max-width:$moblie) {
                 padding-top: 30vw;
             }
            
+            #youtube-text{
+                height: 500px;
+            }
             hr {
                 width: 12vw;
                 height: 2px;
@@ -202,8 +205,9 @@ body {
                 font-size: 18px;
             }
             h1{
-                font-size: 40px;
+                font-size: 35px;
                 padding-top: 0;
+               
                 @media screen and(max-width:$moblie) {
                     font-size: 25px;
                     padding: 15px 0px;
@@ -441,6 +445,7 @@ body {
         .sec02-top1-box {
             img {
                 width: 80px;
+               
             }
             span {
                 font-size: 30px;
@@ -451,23 +456,48 @@ body {
         }
         #sec02-content {
             position: relative;
+        
         }
         #sec02-top-box {
             position: absolute;
             top: 1px;
+            left:20px;
+            @media screen and(max-width:350px) {
+                left:10px;
+            }
             .sec02-box1 {
                 color: #000;
-
+                #top1{
+                    width: 120px;
+                    height: 150px;
+                    @media screen and(max-width:350px) {
+                        width: 100px;
+                        height: 130px;
+                    }
+                }
                 img {
                     width: 80px;
                     height: 120px;
                     border-radius: 50%;
+                    @media screen and(max-width:350px) {
+                        width: 70px;
+                        height: 100px;
+                    }
+                   
                 }
                 .sec02-top-text {
                     font-size: 12px;
+                    text-align: left;
+                    @media screen and(max-width:350px) {
+                        
+                        
+                    }
 
                     span {
                         font-size: 30px;
+                        @media screen and(max-width:350px) {
+                            font-size: 25px;
+                        }
                     }
                 }
             }
@@ -534,17 +564,21 @@ body {
     .sec03-table-title,.sec03-table-title2 {
         font-family: 微軟正黑體;
         font-weight: 900;
-        font-size: 15px;
-        padding: 0 !important;
-        margin-bottom: 20px;
+        font-size: 14px;
+        display: inline-block;
+       
         color:#9B9B9B;
     }
     .contant-toggle{
+        display: inline-block;
         color:#000;
+      padding-bottom: 10px;
+      border-bottom: 2px solid #000;
     
     }
     
     #sec03-slider {
+        padding-top: 5vw;
         .slick-slide img {
             display: inline;
         }
@@ -792,18 +826,19 @@ body {
         font-weight: 900;
         padding: 15px;
     }
-    #sec05-container {
+ 
         #sec05-moblie-slider {
-            width: 100vw;
+          
 
             .sec05-moblie-box {
-                margin: 30px;
+              padding: 20px;
+              margin: 30px;
                 .card {
                     border: none;
                 }
             }
         }
-    }
+    
 }
 // sec06 NFT資訊
 #sec06 {