update yt-views

layouts/youtube-views-zh/single.html

@@ -30,17 +30,11 @@
   {{ partial "pageFormBtn.html" . }}
   <main id="youtube-views-zh">
     <section class="header">
+      <img src="/imgs/dm/yt-views/image-01.png" alt="" class="bg-img">
       <div class="container">
         <div class="row g-0 align-items-center">
           <div class="col-12 col-lg-4">
             <h2 class="header-title">{{ .Params.packageTitle }} <br> <small>{{ .Params.packageSub }}</small></h2>
-            <!-- <p>
-              您費盡心思製作的影片沒有達到理想的觀看數嗎？<br>
-              想在短時間內提升 YouTube 影片瀏覽量嗎？<br>
-              不管是不是網紅都適用 <br>
-              保證 100% 真人觀看數 <br>
-              快速曝光您的品牌 <br>
-            </p> -->
             <p>影音流量推手使用最新 AI 投放技術，
               致力於增加您在　YouTube　的真人觀看數
               不僅快速看見成效、精準符合目標客群
@@ -50,9 +44,7 @@
             <button class="contact-btn my-5">立即諮詢</button>
           </div>
           <div class="col-12 col-lg-8">
-            <img src="/imgs/dm/yt-views/元素-02.png" alt="" class="img-fluid">
-            <!-- <div class="banner d-none d-md-block"></div> -->
-            <!-- <img src="/imgs/dm/yt-views/youtube-views-mb.png" alt="" class="img-fluid d-block d-md-none"> -->
+            <img src="/imgs/dm/yt-views/image-banner.png" alt="" class="img-fluid">
           </div>
         </div>
       </div>
@@ -61,7 +53,7 @@
     <div class="container-fluid qa-block">
       <div class="row align-items-end">
         <div class="col-lg-6 position-relative d-flex justify-content-center">
-          <img src="/imgs/dm/yt-views/元素-05.png" alt="">
+          <img src="/imgs/dm/yt-views/image-02.png" alt="">
           <p class="q-text">
             我的影片始終沒有人觀看怎麼辦 <br>
             想讓 YT 頻道創造更多頂級流量 <br>
@@ -70,7 +62,7 @@
           </p>
         </div>
         <div class="col-lg-6 position-relative d-flex justify-content-center">
-          <img src="/imgs/dm/yt-views/元素-06.png" alt="">
+          <img src="/imgs/dm/yt-views/image-03.png" alt="">
           <p class="a-text">
             絕不操作無效觀看 <br>
             AI 投放精準打中目標客群 <br>
@@ -83,14 +75,14 @@
 
     <div class="container pt-5 mt-5">
       <div class="row justify-content-center align-items-center info-content">
-        <div class="col-12 col-md-4">
+        <div class="col-12 col-lg-4 d-flex justify-content-center justify-content-lg-end">
           <h4>
             最低價 <br> <strong>NT$0.4元/1view</strong> <br>
             最快 1 週 感覺明顯成效
           </h4>
         </div>
-        <div class="col-12 col-md-8 d-flex align-items-center flex-column flex-lg-row">
-          <img src="/imgs/dm/yt-views/youtube-views-02.png" alt="" class="img-fluid">
+        <div class="col-12 col-lg-8 d-flex align-items-center flex-column flex-lg-row">
+          <img src="/imgs/dm/yt-views/image-04.png" alt="" class="img-fluid">
           <p>
             短時間內大量曝光您的 YouTube 影片 <br>
             將影片快速推播給指定地區與目標客群 <br>
@@ -102,8 +94,7 @@
         </div>
       </div>
 
-      <img src="/imgs/dm/yt-views/youtube-views-03.png" alt="" class="img-fluid position-absolute" style="right: 0;">
-      <img src="/imgs/dm/circle-01.webp" alt="" class="position-absolute" style="width: 50%; left: -18vw; z-index: -1;">
+      <img src="/imgs/dm/yt-views/image-05.png" alt="" class="img-fluid position-absolute" style="right: 0;">
 
       <div class="row g-4 g-xl-5 card-group">
         <div class="col-12 col-sm-6 col-lg-3">
@@ -262,9 +253,9 @@
 
 
       <div class="pick-point">
-        <img src="/imgs/dm/yt-views/元素-07.png" alt="" class="bg-img">
+        <img src="/imgs/dm/yt-views/image-06.png" alt="" class="bg-img">
         <div class="chat-img">
-          <img src="/imgs/dm/yt-views/元素-08.png" alt="">
+          <img src="/imgs/dm/yt-views/image-07.png" alt="">
           <p>加速達標時間</p>
         </div>
         <ul>
@@ -289,57 +280,58 @@
     </div>
 
     <div class="container-fluid data-content">
-      <img src="/imgs/dm/yt-views/元素-18.png" alt="" class="bg-img">
+      <img src="/imgs/dm/yt-views/image-08.png" alt="" class="bg-img">
       <div class="row align-items-start justify-content-center" style="padding-top: 100px;">
         <div class="col-12 col-lg-6 px-4">
           <section class="title">
             <h3>獨家 SEO 顯微鏡健檢技術</h3>
             <h4>幫助找尋核心主題，自動強化標的</h4>
           </section>
-          <img src="/imgs/dm/yt-views/元素-10.png" alt="">
+          <img src="/imgs/dm/yt-views/image-09.png" alt="">
         </div>
         <div class="col-12 col-lg-6 px-4 mt-5 mt-lg-0">
           <section class="title">
             <h3>工業局唯一認證 <br>
               AI智慧廣告投放技術</h3>
           </section>
-          <img src="/imgs/dm/yt-views/元素-11.png" alt="">
+          <img src="/imgs/dm/yt-views/image-10.png" alt="">
         </div>
-        <div class="col-12 col-lg-6 px-4 mt-5 mt-lg-0">
+        <div class="col-12 col-lg-6 px-4 mt-5">
           <section class="title">
             <h4>值得信任</h4>
             <h3>操作經驗豐富</h3>
             <h4>累積眾多客戶與合作夥伴</h4>
           </section>
-          <img src="/imgs/dm/yt-views/元素-12.png" alt="">
+          <img src="/imgs/dm/yt-views/image-11.png" alt="">
         </div>
-        <div class="col-12 col-lg-6 px-4 mt-5 mt-lg-0">
+        <div class="col-12 col-lg-6 px-4 mt-5">
           <section class="title">
             <h4>成效報告</h4>
-            <span class="d-flex">
-              <h4>達標後提供真實數據</h4>
-              <h3>觀看來源有跡可循</h3>
+            <span class="d-flex align-items-center">
+              <h4 class="mb-1 me-1">達標後提供真實數據</h4>
+              <h3 class="mb-1">觀看來源有跡可循</h3>
             </span>
             <small>成效總覽與受眾分析</small>
           </section>
-          <img src="/imgs/dm/yt-views/元素-13.png" alt="">
+          <img src="/imgs/dm/yt-views/image-12.png" alt="">
         </div>
       </div>
 
+      <img src="/imgs/dm/circle-01.webp" alt="" class="position-absolute" style="width: 50%; left: -18vw; z-index: -1;">
+
       <section class="info mt-5">
         <h4>實際案例 <br>
           目標觀看次數 <strong>5000 次，三日內達標！</strong> <br>
           且收視率高達 64.30%
         </h4>
-        <img src="/imgs/dm/yt-views/元素-19.png" alt="" class="my-4">
+        <img src="/imgs/dm/yt-views/image-13.png" alt="" class="my-4">
 
         <p class="mb-0">
           針對目標客群設定廣告投放之對象：包括生活型態、興趣、愛好等
           <br>
           EX 針對醫療相關、健康與個人護理設定潛在目標對象進行投放
         </p>
-        <img src="/imgs/dm/yt-views/youtube-views-11.png" alt="" class="img-fluid"
-          style="max-width: 800px; width: 100%;">
+        <img src="/imgs/dm/yt-views/image-14.png" alt="" class="img-fluid mb-4">
       </section>
     </div>
 
@@ -349,7 +341,7 @@
 
     <div class="price-block">
       <p>以 1 萬次觀看數、以相同條件下，評估 1 個觀看數會花費多少費用</p>
-      <img src="/imgs/dm/yt-views/元素-20.png" alt="" class="img-fluid">
+      <img src="/imgs/dm/yt-views/image-15.png" alt="" class="img-fluid">
     </div>
 
     <div class="trust-item">
@@ -357,8 +349,8 @@
     </div>
 
     <div class="container">
-      <img src="/imgs/dm/yt-views/youtube-views-04.png" alt="" class="img-fluid my-5 d-none d-lg-block">
-      <img src="/imgs/dm/yt-views/youtube-views-04-mb.jpg" alt="" class="img-fluid my-5 d-block d-lg-none">
+      <img src="/imgs/dm/yt-views/image-16.png" alt="" class="img-fluid my-5 d-none d-lg-block">
+      <img src="/imgs/dm/yt-views/image-16-mb.jpg" alt="" class="img-fluid my-5 d-block d-lg-none">
 
       <div class="row pt-5 justify-content-center direction-list">
         <div class="col-12 col-md-7 px-4 px-md-0 content">
@@ -377,9 +369,9 @@
               為確保正確計算您的 YouTube 觀看數，請勿同時購買多項服務。
             </p>
           </section>
-          <img src="/imgs/dm/yt-views/youtube-views-05.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/icon-01.png" alt="" class="position-absolute d-none d-md-block"
             style="width: 150px; left: -180px; top: 170px;">
-          <img src="/imgs/dm/yt-views/youtube-views-06.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/icon-02.png" alt="" class="position-absolute d-none d-md-block"
             style="width: 130px; right: -165px; top: -65px;">
         </div>
         <div class="col-12 col-md-7 px-4 px-md-0 content">
@@ -415,11 +407,11 @@
           <!-- 裝飾圖 -->
           <img src="/imgs/dm/circle-02.webp" alt="" class="position-absolute"
             style="width: 100vw; top: -60vw; left: -30vw; z-index: -1;">
-          <img src="/imgs/dm/yt-views/youtube-views-07.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/icon-03.png" alt="" class="position-absolute d-none d-md-block"
             style="width: 170px; left: -190px; top: -10px;">
-          <img src="/imgs/dm/yt-views/youtube-views-08.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/icon-04.png" alt="" class="position-absolute d-none d-md-block"
             style="width: 170px; right: -190px; top: -230px;">
-          <img src="/imgs/dm/yt-views/youtube-views-09.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/icon-05.png" alt="" class="position-absolute d-none d-md-block"
             style="width: 160px; right: -190px; top: 200px;">
         </div>
         <div class="col-12 col-md-7 px-4 px-md-0 content">
@@ -448,7 +440,7 @@
                 <h3 class="pageForm-title-h3">
                   【影音流量推手】
                   <br>
-                  快速提升影片觀看數
+                  快速提升 YouTube 影片觀看數
                 </h3>
               </div>
             </div>

layouts/youtube-views/single.html

@@ -253,7 +253,7 @@
         </div>
 
         <div class="col-12 col-lg-6">
-          <img src="/imgs/dm/youtube-01.png" alt="" class="img-fluid">
+          <img src="/imgs/dm/yt-views/stock-01.png" alt="" class="img-fluid">
         </div>
       </div>
       <img src="/imgs/bottom-line.png" alt="" class="position-absolute">
@@ -262,7 +262,7 @@
     <div class="container" style="margin-top: 80px;">
       <div class="row my-5 align-items-center justify-content-center">
         <div class="col-12 col-lg-6">
-          <img src="/imgs/dm/youtube-02.png" alt="" class="img-fluid">
+          <img src="/imgs/dm/yt-views/stock-02.png" alt="" class="img-fluid">
         </div>
         <div class="col-11 col-lg-6 mt-5 mt-lg-0">
           <h5 class="title">Is buying YouTube views safe and legal?</h5>
@@ -296,7 +296,7 @@
           </p>
         </div>
         <div class="col-12 col-lg-6">
-          <img src="/imgs/dm/youtube-03.png" alt="" class="img-fluid">
+          <img src="/imgs/dm/yt-views/stock-03.png" alt="" class="img-fluid">
         </div>
       </div>
     </div>
@@ -498,9 +498,9 @@
       </div>
     </div> -->
   </main>
-  
+
   {{ partial "footer.html" . }}
-  
+
   <script type="application/javascript">
     var doNotTrack = false;
     if (!doNotTrack) {

static/css/style.css

@@ -2933,6 +2933,14 @@
     text-align: center;
   }
 }
+#youtube-views-zh .header .bg-img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  bottom: 0;
+}
 #youtube-views-zh .header .header-title {
   padding-top: 10rem;
   margin-bottom: 30px;
@@ -2958,29 +2966,6 @@
     font-size: 22px;
   }
 }
-#youtube-views-zh .header .banner {
-  width: 100vw;
-  height: 1360px;
-  position: absolute;
-  top: 0;
-  right: -16vw;
-  z-index: -1;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: url("/imgs/dm/yt-views/youtube-views-01.png");
-}
-@media (max-width: 1200px) {
-  #youtube-views-zh .header .banner {
-    top: -10vw;
-  }
-}
-@media (max-width: 991px) {
-  #youtube-views-zh .header .banner {
-    top: 8vw;
-    height: 1000px;
-  }
-}
 #youtube-views-zh .qa-block {
   padding-top: 30px;
   background-color: #e3c1dc;
@@ -3051,6 +3036,11 @@
   max-width: 380px;
   margin-right: 30px;
 }
+@media (max-width: 991px) {
+  #youtube-views-zh .info-content img {
+    max-width: 500px;
+  }
+}
 #youtube-views-zh .pick-point {
   display: flex;
   justify-content: center;
@@ -3073,19 +3063,20 @@
   z-index: -1;
 }
 #youtube-views-zh .pick-point .chat-img {
-  right: 80px;
+  left: 65%;
   top: -20px;
   position: absolute;
 }
 @media (max-width: 991px) {
   #youtube-views-zh .pick-point .chat-img {
-    right: -30px;
+    left: 75%;
+    top: 3px;
   }
 }
 @media (max-width: 767px) {
   #youtube-views-zh .pick-point .chat-img {
-    left: 67%;
-    right: unset;
+    left: 70%;
+    top: 10px;
   }
 }
 @media (max-width: 575px) {
@@ -3101,6 +3092,11 @@
     width: 200px;
   }
 }
+@media (max-width: 767px) {
+  #youtube-views-zh .pick-point .chat-img img {
+    width: 170px;
+  }
+}
 #youtube-views-zh .pick-point .chat-img p {
   color: #fff;
   position: absolute;
@@ -3115,6 +3111,12 @@
     font-size: 18px;
   }
 }
+@media (max-width: 767px) {
+  #youtube-views-zh .pick-point .chat-img p {
+    top: 20px;
+    right: 25px;
+  }
+}
 #youtube-views-zh .trust-item {
   padding: 5px 0;
   background-color: #ea5413;
@@ -3129,6 +3131,11 @@
 #youtube-views-zh .price-block {
   padding: 50px 150px;
 }
+@media (max-width: 991px) {
+  #youtube-views-zh .price-block {
+    padding: 50px;
+  }
+}
 #youtube-views-zh .price-block p {
   text-align: center;
   font-size: 20px;
@@ -3223,12 +3230,16 @@
   font-size: 18px;
   font-weight: bold;
 }
+#youtube-views-zh .data-content .title small {
+  color: #000;
+}
 #youtube-views-zh .data-content .info {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 #youtube-views-zh .data-content .info img {
+  width: 100%;
   max-width: 700px;
 }
 #youtube-views-zh .data-content .info h4 {
@@ -3236,6 +3247,8 @@
   font-weight: bold;
 }
 #youtube-views-zh .data-content .info h4 strong {
+  display: inline-block;
+  margin: 7px 0;
   font-size: 34px;
   color: #ea5413;
 }

static/css/style.scss

@@ -1733,6 +1733,7 @@
 }
 
 @media (max-width: 767px) {
+
   // .header {
   //   height: 70vh;
   // }
@@ -2519,7 +2520,7 @@
   }
 
   .card-content {
-    & > div {
+    &>div {
       display: flex;
       flex-direction: column;
       // border: 2px solid #ffebe2;
@@ -3098,7 +3099,7 @@
       filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
     }
 
-    .content > div {
+    .content>div {
       margin-bottom: 40px;
       padding: 0px 15px;
       border-left: 1px solid rgba(0, 0, 0, 0.125);
@@ -3182,6 +3183,15 @@
       }
     }
 
+    .bg-img {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      bottom: 0;
+    }
+
     .header-title {
       padding-top: 10rem;
       margin-bottom: 30px;
@@ -3205,58 +3215,43 @@
         }
       }
     }
-
-    .banner {
-      width: 100vw;
-      height: 1360px;
-      position: absolute;
-      top: 0;
-      right: -16vw;
-      z-index: -1;
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-image: url("/imgs/dm/yt-views/youtube-views-01.png");
-
-      @media (max-width: 1200px) {
-        top: -10vw;
-      }
-
-      @media (max-width: 991px) {
-        top: 8vw;
-        height: 1000px;
-      }
-    }
   }
 
   .qa-block {
     padding-top: 30px;
     background-color: #e3c1dc;
+
     img {
       width: 100%;
     }
+
     .q-text,
     .a-text {
       font-size: 1.3vw;
       position: absolute;
       font-weight: bold;
+
       @media (max-width: 991px) {
         font-size: 2.5vw;
       }
     }
+
     .q-text {
       width: 25vw;
       top: 3.3vw;
       right: 13.5vw;
+
       @media (max-width: 991px) {
         width: 100%;
         top: 7vw;
         right: -24%;
       }
     }
+
     .a-text {
       top: 3.7vw;
       right: 5vw;
+
       @media (max-width: 991px) {
         top: 7.5vw;
         right: unset;
@@ -3294,6 +3289,10 @@
     img {
       max-width: 380px;
       margin-right: 30px;
+
+      @media (max-width: 991px) {
+        max-width: 500px;
+      }
     }
   }
 
@@ -3302,9 +3301,11 @@
     justify-content: center;
     margin: 150px auto;
     position: relative;
+
     ul {
       padding: 0;
       list-style: none;
+
       li {
         span {
           color: #ea5413;
@@ -3322,36 +3323,53 @@
     }
 
     .chat-img {
-      right: 80px;
+      left: 65%;
       top: -20px;
       position: absolute;
+
       @media (max-width: 991px) {
-        right: -30px;
+        left: 75%;
+        top: 3px;
       }
+
       @media (max-width: 767px) {
-        left: 67%;
-        right: unset;
+        left: 70%;
+        top: 10px;
       }
+
       @media (max-width: 575px) {
         display: none;
       }
+
       img {
         width: 250px;
+
         @media (max-width: 991px) {
           width: 200px;
         }
+
+        @media (max-width: 767px) {
+          width: 170px;
+        }
       }
+
       p {
         color: #fff;
         position: absolute;
         top: 32px;
         right: 45px;
         font-size: 24px;
+
         @media (max-width: 991px) {
           top: 26px;
           right: 40px;
           font-size: 18px;
         }
+
+        @media (max-width: 767px) {
+          top: 20px;
+          right: 25px;
+        }
       }
     }
   }
@@ -3359,6 +3377,7 @@
   .trust-item {
     padding: 5px 0;
     background-color: #ea5413;
+
     p {
       color: #fff;
       font-size: 24px;
@@ -3370,6 +3389,11 @@
 
   .price-block {
     padding: 50px 150px;
+
+    @media (max-width: 991px) {
+      padding: 50px;
+    }
+
     p {
       text-align: center;
       font-size: 20px;
@@ -3440,6 +3464,7 @@
 
   .data-content {
     position: relative;
+
     .bg-img {
       position: absolute;
       top: -5px;
@@ -3448,45 +3473,61 @@
       width: 100%;
       z-index: -1;
     }
+
     .row {
       padding: 0 5vw;
-      & > div {
+
+      &>div {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
       }
+
       img {
         width: 100%;
         max-width: 500px;
       }
     }
+
     .title {
       margin-bottom: 10px;
       text-align: center;
+
       h3 {
         color: #ea5413;
         font-size: 20px;
         font-weight: bold;
       }
+
       h4 {
         color: #000;
         font-size: 18px;
         font-weight: bold;
       }
+
+      small {
+        color: #000;
+      }
     }
 
     .info {
       display: flex;
       flex-direction: column;
       align-items: center;
+
       img {
+        width: 100%;
         max-width: 700px;
       }
+
       h4 {
         text-align: center;
         font-weight: bold;
+
         strong {
+          display: inline-block;
+          margin: 7px 0;
           font-size: 34px;
           color: #ea5413;
 
@@ -4027,15 +4068,15 @@
       }
     }
 
-    .table-striped > tbody > tr:nth-child(odd) > td,
-    .table-striped > tbody > tr:nth-child(odd) > th {
+    .table-striped>tbody>tr:nth-child(odd)>td,
+    .table-striped>tbody>tr:nth-child(odd)>th {
       box-shadow: none;
       background-color: #fdeae1;
       border-bottom-width: 0px !important;
     }
 
-    .table-striped > tbody > tr:nth-child(even) > td,
-    .table-striped > tbody > tr:nth-child(even) > th {
+    .table-striped>tbody>tr:nth-child(even)>td,
+    .table-striped>tbody>tr:nth-child(even)>th {
       border-bottom-width: 0px !important;
     }
 
@@ -4777,4 +4818,4 @@
   }
 }
 
-/* news-content End */
+/* news-content End */