圖片修正更新

goto.js

@@ -54,12 +54,14 @@ $(function () {
       {
         breakpoint: 600, // RWD在1024寬度時切換顯示數量
         settings: {
+          arrows: false,
           slidesToShow: 1, //一次顯示3個
           slidesToScroll: 1,//切換下一頁時移動3個
         }
       }, {
         breakpoint: 600,// RWD在600寬度時切換顯示數量
         settings: {
+          arrows: false,
           slidesToShow: 1,//一次顯示2個
           slidesToScroll: 1,//切換下一頁時移動2個
         }

index.html

@@ -258,9 +258,8 @@
     <!-- sec02-Top-box- 手機板-->
     <section id="sec02-moblie">
         <div id="sec02-container" class="container-fluid">
-            <div class="sec02-top1-box" class="row">
-                <div class="col-12">
-                    <div style="text-align:right;" class="col-6"></div>
+            <div class="sec02-top1-box" >
+                <div>
                     <h1>TOP SELLERS</h1>
                     <h1>THIS WEEK</h1>
                 </div>
@@ -278,7 +277,7 @@
                         <div class="sec02-top-text"><span>2</span>Trevorjonesart</div>
                         <div class="sec02-top-text" style="display: block;">（特雷弗瓊斯）</div>
                     </div>
-                    <div class="sec02-box1 col-4  order-3 ">
+                    <div class="sec02-box1 col-4  order-3 " style="padding: 0;">
                         <img src="./img/sec02/top3webp.webp" alt="">
                         <div class="sec02-top-text"><span>3</span>muratpak</div>
                         <div class="sec02-top-text" style="display: block;">(派克)</div>
@@ -292,7 +291,7 @@
     <!-- 排名區塊-電腦版 -->
     <section id="sec03">
         <div id="sec03-table" class="container-fluid">
-            <div class="row">
+            <div class="row" >
                 <div class="col-md-6 col-lg-6">
                     <h1 class="sec03-table-title">COMMUNITY PICKS</h1>
 
@@ -518,8 +517,8 @@
     </section>
     <!-- 排名區塊-手機板 -->
     <section id="sec03-moblie">
-        <div id="sec03-table" class="container-fluid">
-            <div class="row" style="padding:0; margin: 0;">
+        <div id="sec03-table" class="container-fluid"  style="padding:0;">
+            <div class="row" style="padding:0; margin: 0; width: 90vw;" >
                 <div id="sec03-title-1" class="col-6" style="padding:0; margin: 0;">
                     <h1 class="sec03-table-title">COMMUNITY PICKS</h1>
                 </div>
@@ -530,7 +529,7 @@
             <img id="sec03-slider-next" style="position: absolute;" class="arrow-table" src="./img/arrow-table.png"
                 alt="">
             <div id="sec03-slider" class="row">
-                <div id="sec03-slider1" class="col-12" style="box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);">
+                <div id="sec03-slider1" class="col-12">
 
                     <table class="table">
 
@@ -641,7 +640,7 @@
                         </tbody>
                     </table>
                 </div>
-                <div id="sec03-slider2" class="col-6" style=" box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.3);">
+                <div id="sec03-slider2" class="col-6">
                     <table class="table ">
                         <tbody>
 
@@ -753,8 +752,7 @@
             <div id="sec04-container" class="row row-cols-1 row-cols-md-4 g-4">
                 <div class="col">
                     <div class="card">
-                        <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQHOgMWQbkyqPm6B&w=1000&h=522&url=https%3A%2F%2Fstorage.googleapis.com%2Fwww-cw-com-tw%2Farticle%2F202106%2Farticle-60b598d06e107.jpg&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQGlZiYPWM75RYW0"
-                            class="card-img-top" alt="...">
+                        <img src="./img/sec04/sec04-img-01.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
                             <p class="card-text">【林之晨專欄】特斯拉2月原本要接受比特幣購車，5月卻改口說太耗能而喊停。背後的真相為何？這樣的耗能值得嗎？近期北美科技圈的熱門議題......
@@ -769,8 +767,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="./img/sec04box2.png"
-                            class="card-img-top" alt="...">
+                        <img src="./img/sec04/sec04-img02.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">APENFT項目是致力於將世界級的藝術品註冊為NFTs。</h5>
                             <p class="card-text">這類藝術品的規模有多大，大多數NFT都可以當成藝術品，比如卡牌，比如NBA TOP SHOT,那麼這個數據劃分其實有很大不一樣.......
@@ -784,8 +781,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQHOgMWQbkyqPm6B&w=1000&h=522&url=https%3A%2F%2Fstorage.googleapis.com%2Fwww-cw-com-tw%2Farticle%2F202106%2Farticle-60b598d06e107.jpg&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQGlZiYPWM75RYW0"
-                            class="card-img-top" alt="...">
+                        <img src="./img/sec04/sec04-img-01.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
                             <p class="card-text">【林之晨專欄】特斯拉2月原本要接受比特幣購車，5月卻改口說太耗能而喊停。背後的真相為何？這樣的耗能值得嗎？近期北美科技圈的熱門議題......
@@ -798,8 +794,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="./img/sec04box2.png"
-                            class="card-img-top" alt="...">
+                        <img src="./img/sec04/sec04-img02.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">APENFT項目是致力於將世界級的藝術品註冊為NFTs。</h5>
                             <p class="card-text">這類藝術品的規模有多大，大多數NFT都可以當成藝術品，比如卡牌，比如NBA TOP SHOT,那麼這個數據劃分其實有很大不一樣.......
@@ -824,8 +819,7 @@
             <div id="sec04-moblie-container" class="row row-cols-1 row-cols-md-4 g-4">
                 <div class="col">
                     <div class="card">
-                        <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQHOgMWQbkyqPm6B&w=1000&h=522&url=https%3A%2F%2Fstorage.googleapis.com%2Fwww-cw-com-tw%2Farticle%2F202106%2Farticle-60b598d06e107.jpg&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQGlZiYPWM75RYW0"
-                            class="card-img-top" alt="...">
+                        <img src="./img/sec04/sec04-img-01.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
                             <p class="card-text">【林之晨專欄】特斯拉2月原本要接受比特幣購車，5月卻改口說太耗能而喊停。背後的真相為何？這樣的耗能值得嗎？近期北美科技圈的熱門議題......
@@ -839,8 +833,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="./img/sec04box2.png"
-                            class="card-img-top" alt="...">
+                        <img src="./img/sec04/sec04-img02.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">APENFT項目是致力於將世界級的藝術品註冊為NFTs。</h5>
                             <p class="card-text">這類藝術品的規模有多大，大多數NFT都可以當成藝術品，比如卡牌，比如NBA TOP SHOT,那麼這個數據劃分其實有很大不一樣.......
@@ -855,7 +848,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="./img/sec04box2.png"
+                        <img src="./img/sec04/sec04-img-01.webp" class="card-img-top" alt="...">
                             class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
@@ -870,8 +863,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/197261231_115136084144760_7228421096070991603_n.png?_nc_cat=109&ccb=1-3&_nc_sid=730e14&_nc_ohc=X3OJOaoolioAX96GsF0&_nc_ht=scontent.ftpe13-2.fna&oh=19d08354444bb8629451b616bb69d1a3&oe=60DEBBF5"
-                            class="card-img-top" alt="...">
+                        <img src="./img/sec04/sec04-img02.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">APENFT項目是致力於將世界級的藝術品註冊為NFTs。</h5>
                             <p class="card-text">這類藝術品的規模有多大，大多數NFT都可以當成藝術品，比如卡牌，比如NBA TOP SHOT,那麼這個數據劃分其實有很大不一樣.......
@@ -3337,7 +3329,7 @@
                 <div style="height: 480px" id="sec06-container" class="row">
                     <div class="col-lg-3 h-100">
                         <div class="card">
-                            <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQEfCe0Wa6AbcoTq&w=1000&h=522&url=https%3A%2F%2Fstorage.googleapis.com%2Fwww-cw-com-tw%2Farticle%2F202103%2Farticle-6049c5a18f37c.jpg&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQGy_UtwawoXrsPb"
+                            <img src="./img/sec06/sec06-01.webp"
                                 class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">誰要買這個啦！推特執行長賣推文「加密熱潮」新標的，NFT是什麼？</h5>
@@ -3355,7 +3347,7 @@
                     </div>
                     <div class="col-lg-3 h-100">
                         <div class="card">
-                            <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/201236812_115143364144032_8042637130702346240_n.png?_nc_cat=106&ccb=1-3&_nc_sid=730e14&_nc_ohc=wnzcy7cxZUEAX_BB-hm&_nc_ht=scontent.ftpe13-2.fna&oh=bb799ad063e1de0495c3fa4a220d4372&oe=60E1CE85"
+                            <img src="./img/sec06/sec06-02.webp"
                                 class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景~門票/體育、活動門票系列</h5>
@@ -3373,7 +3365,7 @@
                     </div>
                     <div class="col-lg-3 h-100">
                         <div class="card">
-                            <img src="./img/sec06.png" class="card-img-top" alt="...">
+                            <img src="./img/sec06/sec06-03.png" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景~紀錄/身分驗證、實體資產和文件記錄</h5>
                                 <p class="card-text">NFT
@@ -3388,7 +3380,7 @@
                     </div>
                     <div class="col-lg-3 h-100">
                         <div class="card">
-                            <img src="./img/sec06-02webp.webp" class="card-img-top" alt="...">
+                            <img src="./img/sec06/sec06-04.webp" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景~遊戲/藝術</h5>
                                 <p class="card-text">NFT 主要應用場景之一就是遊戲。基於區塊鏈技術的NFT
@@ -3402,7 +3394,7 @@
                     </div>
                     <div class="col-lg-3 h-100">
                         <div class="card">
-                            <img src="./img/sec06-03.png" class="card-img-top" alt="...">
+                            <img src="./img/sec06/sec06-05.png" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景~音樂/虛擬世界</h5>
                                 <p class="card-text">NFT 市場有望為音樂迷們打開虛擬收藏品的世界。在K-pop 領域，許多歌迷已經接受了NFT 收藏品這種形式——獨立發行的專輯備受追捧。NFT
@@ -3416,7 +3408,7 @@
                     </div>
                     <div class="col-lg-3 h-100">
                         <div class="card">
-                            <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/199736752_115142487477453_8806712894992115858_n.png?_nc_cat=108&ccb=1-3&_nc_sid=730e14&_nc_ohc=f632SfbRzKoAX_CCRNo&_nc_ht=scontent.ftpe13-2.fna&oh=d3e9a6af8aca9151d5b8f8cf13c86340&oe=60E22786"
+                            <img src="./img/sec06/sec06-06.png"
                                 class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景~域名/技能</h5>
@@ -3432,7 +3424,7 @@
     
                     <div class="col-lg-3 h-100">
                         <div class="card">
-                            <img src="./img/sec06-04.png" class="card-img-top" alt="...">
+                            <img src="./img/sec06/sec06-07.png" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">當下火熱的NFT有沒投資價值？一般人如何通過參與NFT獲得收益？</h5>
                                 <p class="card-text">
@@ -3447,7 +3439,7 @@
     
                     <div class="col-lg-3 h-100">
                         <div class="card">
-                            <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQGPzKGLC4W9ZOtx&w=862&h=450&url=https%3A%2F%2Fwww.blockchainappfactory.com%2Fimages%2Fog_images%2Findex.png&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQE10mYSe0P8G-hh"
+                            <img src="./img/sec06/sec06-08.jpg"
                                 class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景時尚/娛樂</h5>

style.css

@@ -13,7 +13,7 @@
 
 @media screen and (max-width: 767px) {
   .container-fluid {
-    width: 100vw;
+    width: 90vw;
   }
 }
 
@@ -50,6 +50,12 @@ body .learn-more:hover {
   z-index: 20;
 }
 
+@media screen and (max-width: 767px) {
+  #Navigation {
+    width: 100vw;
+  }
+}
+
 #Navigation #logo {
   padding-top: 1.3vw;
 }
@@ -600,8 +606,10 @@ body .learn-more:hover {
 
 #sec02-moblie {
   background: #414141;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #414141), color-stop(30%, transparent), color-stop(55%, #fff));
+  background: linear-gradient(180deg, #414141 50%, transparent 30%, #fff 55%);
   padding-top: 3vw;
-  padding-bottom: 20vw;
+  padding-bottom: 10vw;
 }
 
 @media screen and (min-width: 1025px) {
@@ -614,7 +622,7 @@ body .learn-more:hover {
   padding: 15px;
   font-weight: 900;
   color: #fff;
-  text-align: right;
+  width: 100vw;
 }
 
 #sec02-moblie #sec02-container .sec02-top1-box img {
@@ -629,20 +637,9 @@ body .learn-more:hover {
   text-align: center;
 }
 
-#sec02-moblie #sec02-container #sec02-content {
-  position: relative;
-}
-
 #sec02-moblie #sec02-container #sec02-top-box {
-  width: 100vw;
-  position: absolute;
-  top: 1px;
-}
-
-@media screen and (max-width: 350px) {
-  #sec02-moblie #sec02-container #sec02-top-box {
-    left: 10px;
-  }
+  width: 95vw;
+  margin: 5px;
 }
 
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 {
@@ -741,7 +738,6 @@ body .learn-more:hover {
 }
 
 #sec03-moblie {
-  padding-top: 40vw;
   position: relative;
 }
 
@@ -786,7 +782,9 @@ body .learn-more:hover {
 
 #sec03-moblie #sec03-slider #sec03-slider1,
 #sec03-moblie #sec03-slider #sec03-slider2 {
-  margin: 0 5px;
+  margin-left: 10px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 }
 
 @media screen and (max-width: 350px) {

style.scss

@@ -12,8 +12,9 @@ $navbgcolor: #313131;
     width: 80vw;
     margin: 0 auto;
     @media screen and(max-width:$moblie) {
-        width: 100vw;
+        width: 90vw;
     }
+
 }
 body {
     background: #fff;
@@ -43,6 +44,9 @@ body {
     color: #fff;
     position: fixed;
     z-index: 20;
+    @media screen and(max-width:$moblie) {
+        width: 100vw;
+    }
     #logo {
         padding-top: 1.3vw;
         @media screen and(max-width:$moblie) {
@@ -476,8 +480,9 @@ body {
 // sec02 top排名手機板
 #sec02-moblie {
     background: #414141;
+    background: linear-gradient(180deg, #414141 50%, transparent 30%, #fff 55%);
     padding-top: 3vw;
-    padding-bottom: 20vw;
+    padding-bottom: 10vw;
 
     @media screen and(min-width:$desktop) {
         display: none;
@@ -486,7 +491,8 @@ body {
         padding: 15px;
         font-weight: 900;
         color: #fff;
-        text-align: right;
+       
+        width: 100vw;
         .sec02-top1-box {
             img {
                 width: 80px;
@@ -498,17 +504,11 @@ body {
                 text-align: center;
             }
         }
-        #sec02-content {
-            position: relative;
-        }
+       
         #sec02-top-box {
-            width: 100vw;
-            position: absolute;
-            top: 1px;
-
-            @media screen and(max-width:350px) {
-                left: 10px;
-            }
+            width: 95vw;
+            margin: 5px;
+           
             .sec02-box1 {
                 color: #000;
 
@@ -593,7 +593,7 @@ body {
 }
 // sec03排名table-手機板
 #sec03-moblie {
-    padding-top: 40vw;
+
     position: relative;
     .arrow-table {
         position: fixed;
@@ -629,8 +629,8 @@ body {
         }
         #sec03-slider1,
         #sec03-slider2 {
-            margin: 0 5px;
-
+         margin-left: 10px;
+         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
             @media screen and(max-width:350px) {
                 margin: 0 5px;
             }