update

layouts/partials/navbar.html

@@ -22,6 +22,7 @@
             服務
           </a>
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <li><a class="dropdown-item" href="/youtube-views-zh/dm/">影音流量推手</a></li>
             <li><a class="dropdown-item" href="/ad-operation/dm/">AI 廣告投放</a></li>
             <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
             <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
@@ -32,7 +33,6 @@
             <li><a class="dropdown-item" href="/blog-traffic/dm/">創業家專案</a></li>
             <li><a class="dropdown-item" href="/seo-image/dm/">形象 SEO</a></li>
             <li><a class="dropdown-item" href="/youtube-views/dm/">YouTube View Booster</a></li>
-            <li><a class="dropdown-item" href="/youtube-views-zh/dm/">影音流量推手</a></li>
           </ul>
         </li>
         <li class="nav-item">

layouts/youtube-views-zh/single.html

@@ -31,46 +31,78 @@
   <main id="youtube-views-zh">
     <section class="header">
       <div class="container">
-        <div class="row g-0">
-          <div class="col-12 col-md-4">
+        <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>
+            <!-- <p>
               您費盡心思製作的影片沒有達到理想的觀看數嗎？<br>
               想在短時間內提升 YouTube 影片瀏覽量嗎？<br>
               不管是不是網紅都適用 <br>
               保證 100% 真人觀看數 <br>
               快速曝光您的品牌 <br>
-            </p>
+            </p> -->
+            <p>影音流量推手使用最新 AI 投放技術，
+              致力於增加您在　YouTube　的真人觀看數
+              不僅快速看見成效、精準符合目標客群
+              和市場，更無設定限制。能夠在指定區
+              域推播、增加收視率，讓精心製作的影片
+              為您帶來更強大的話語權 <span class="position-absolute">🔥🔥🔥</span></p>
             <button class="contact-btn my-5">立即諮詢</button>
           </div>
-          <div class="col-12 col-md-8">
-            <div class="banner d-none d-md-block"></div>
-            <img src="/imgs/dm/youtube-views-mb.png" alt="" class="img-fluid d-block d-md-none">
+          <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"> -->
           </div>
         </div>
       </div>
     </section>
 
-    <div class="container">
-      <div class="row justify-content-center align-items-center">
-        <div class="col-12 col-md-6 col-lg-4 info-content">
+    <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="">
+          <p class="q-text">
+            我的影片始終沒有人觀看怎麼辦 <br>
+            想讓 YT 頻道創造更多頂級流量 <br>
+            想了解快速增加流量的秘訣是什麼 <br>
+            我希望影片可以在特定區域推播
+          </p>
+        </div>
+        <div class="col-lg-6 position-relative d-flex justify-content-center">
+          <img src="/imgs/dm/yt-views/元素-06.png" alt="">
+          <p class="a-text">
+            絕不操作無效觀看 <br>
+            AI 投放精準打中目標客群 <br>
+            將成效數字裡面隱含的秘密都告知您 <br>
+            要選擇國家或縣市，都沒有限制！
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <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">
           <h4>
-            最低價 <strong>NT$0.4元/1view</strong>
-            <br>
+            最低價 <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">
           <p>
-            影音流量推手為透過Google廣告投放，快速增漲YouTube影片的有效觀看數！
-            <br>
-            您只需提供指定網址與目標觀看受眾群，結案提供廣告成效報告與報表。
+            短時間內大量曝光您的 YouTube 影片 <br>
+            將影片快速推播給指定地區與目標客群 <br>
+            保證 100% 真人觀看數 <br>
+            低價與高品質服務 <br>
+            線上一鍵即可選購多種方案 <br>
+            立即打造您的高度競爭力！
           </p>
         </div>
-        <div class="col-12 col-md-6">
-          <img src="/imgs/dm/youtube-views-02.png" alt="" class="img-fluid">
-        </div>
       </div>
 
-      <img src="/imgs/dm/youtube-views-03.png" alt="" class="img-fluid position-absolute" style="right: 0;">
+      <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;">
 
       <div class="row g-4 g-xl-5 card-group">
@@ -228,10 +260,107 @@
         </div>
       </div>
 
-      <img src="/imgs/dm/youtube-views-04.png" alt="" class="img-fluid my-5 d-none d-lg-block">
-      <img src="/imgs/dm/youtube-views-04-mb.jpg" alt="" class="img-fluid my-5 d-block d-lg-none">
 
-      <div class="row justify-content-center direction-list">
+      <div class="pick-point">
+        <img src="/imgs/dm/yt-views/元素-07.png" alt="" class="bg-img">
+        <div class="chat-img">
+          <img src="/imgs/dm/yt-views/元素-08.png" alt="">
+          <p>加速達標時間</p>
+        </div>
+        <ul>
+          <li>
+            <p>選擇影片的秘訣 <span>加分題！！！</span></p>
+          </li>
+          <li>
+            <p>★ 影片主題：有關 <span>時事or熱門話題</span></p>
+          </li>
+          <li>
+            <p>★ 影片時長：<span>15秒～3分鐘</span>以內（時間越短效果最佳）總長不可以超過 10 分鐘</p>
+          </li>
+          <li>
+            <p>★★★ 重點：<span>前15秒為精華區！</span>將取決觀眾要不要點進您的影片</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="trust-item">
+      <p>您可以信任我們</p>
+    </div>
+
+    <div class="container-fluid data-content">
+      <img src="/imgs/dm/yt-views/元素-18.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="">
+        </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="">
+        </div>
+        <div class="col-12 col-lg-6 px-4 mt-5 mt-lg-0">
+          <section class="title">
+            <h4>值得信任</h4>
+            <h3>操作經驗豐富</h3>
+            <h4>累積眾多客戶與合作夥伴</h4>
+          </section>
+          <img src="/imgs/dm/yt-views/元素-12.png" alt="">
+        </div>
+        <div class="col-12 col-lg-6 px-4 mt-5 mt-lg-0">
+          <section class="title">
+            <h4>成效報告</h4>
+            <span class="d-flex">
+              <h4>達標後提供真實數據</h4>
+              <h3>觀看來源有跡可循</h3>
+            </span>
+            <small>成效總覽與受眾分析</small>
+          </section>
+          <img src="/imgs/dm/yt-views/元素-13.png" alt="">
+        </div>
+      </div>
+
+      <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">
+
+        <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%;">
+      </section>
+    </div>
+
+    <div class="trust-item">
+      <p>幫您比價</p>
+    </div>
+
+    <div class="price-block">
+      <p>以 1 萬次觀看數、以相同條件下，評估 1 個觀看數會花費多少費用</p>
+      <img src="/imgs/dm/yt-views/元素-20.png" alt="" class="img-fluid">
+    </div>
+
+    <div class="trust-item">
+      <p>影音流量推手 QA</p>
+    </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">
+
+      <div class="row pt-5 justify-content-center direction-list">
         <div class="col-12 col-md-7 px-4 px-md-0 content">
           <section class="d-flex flex-column">
             <h5>什麼是 YouTube 觀看數？</h5>
@@ -248,9 +377,9 @@
               為確保正確計算您的 YouTube 觀看數，請勿同時購買多項服務。
             </p>
           </section>
-          <img src="/imgs/dm/youtube-views-05.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/youtube-views-05.png" alt="" class="position-absolute d-none d-md-block"
             style="width: 150px; left: -180px; top: 170px;">
-          <img src="/imgs/dm/youtube-views-06.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/youtube-views-06.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">
@@ -286,11 +415,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/youtube-views-07.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/youtube-views-07.png" alt="" class="position-absolute d-none d-md-block"
             style="width: 170px; left: -190px; top: -10px;">
-          <img src="/imgs/dm/youtube-views-08.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/youtube-views-08.png" alt="" class="position-absolute d-none d-md-block"
             style="width: 170px; right: -190px; top: -230px;">
-          <img src="/imgs/dm/youtube-views-09.png" alt="" class="position-absolute d-none d-md-block"
+          <img src="/imgs/dm/yt-views/youtube-views-09.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">
@@ -306,23 +435,6 @@
       </div>
     </div>
 
-    <div class="data-content">
-      <section class="position-relative">
-        <h4>實際案例 <br>
-          目標觀看次數 <strong>5000 次，三日內達標！</strong> <br>
-          且收視率高達 64.30%
-        </h4>
-        <img src="/imgs/dm/youtube-views-10.png" alt="" class="img-fluid">
-      </section>
-
-      <p class="mx-3">
-        針對目標客群設定廣告投放之對象：包括生活型態、興趣、愛好等
-        <br>
-        EX 針對醫療相關、健康與個人護理設定潛在目標對象進行投放
-      </p>
-      <img src="/imgs/dm/youtube-views-11.png" alt="" class="img-fluid" style="max-width: 800px; width: 100%;">
-    </div>
-
     <section class="my-3 my-lg-4 d-flex align-items-center justify-content-center flex-column flex-md-row data-text">
       <p>想了解更多嗎？</p>
     </section>
@@ -370,7 +482,7 @@
   </main>
 
   {{ partial "footer.html" . }}
-  
+
   <script type="application/javascript">
     var doNotTrack = false;
     if (!doNotTrack) {

static/css/style.css

@@ -2911,30 +2911,24 @@
   padding: 4.8rem 0 3rem;
 }
 #youtube-views-zh .header p {
+  max-width: 330px;
+  text-align: start;
   line-height: 35px;
   font-size: 18px;
   font-weight: bold;
   color: #656565;
 }
+@media (max-width: 991px) {
+  #youtube-views-zh .header p {
+    max-width: 100%;
+  }
+}
 @media (max-width: 414px) {
   #youtube-views-zh .header p {
     font-size: 14px;
   }
 }
-#youtube-views-zh .header .row {
-  height: 1000px;
-}
 @media (max-width: 991px) {
-  #youtube-views-zh .header .row {
-    height: 700px;
-  }
-}
-@media (max-width: 767px) {
-  #youtube-views-zh .header .row {
-    height: auto;
-  }
-}
-@media (max-width: 767px) {
   #youtube-views-zh .header .row div {
     text-align: center;
   }
@@ -2974,7 +2968,7 @@
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  background-image: url("/imgs/dm/youtube-views-01.png");
+  background-image: url("/imgs/dm/yt-views/youtube-views-01.png");
 }
 @media (max-width: 1200px) {
   #youtube-views-zh .header .banner {
@@ -2987,6 +2981,48 @@
     height: 1000px;
   }
 }
+#youtube-views-zh .qa-block {
+  padding-top: 30px;
+  background-color: #e3c1dc;
+}
+#youtube-views-zh .qa-block img {
+  width: 100%;
+}
+#youtube-views-zh .qa-block .q-text,
+#youtube-views-zh .qa-block .a-text {
+  font-size: 1.3vw;
+  position: absolute;
+  font-weight: bold;
+}
+@media (max-width: 991px) {
+  #youtube-views-zh .qa-block .q-text,
+  #youtube-views-zh .qa-block .a-text {
+    font-size: 2.5vw;
+  }
+}
+#youtube-views-zh .qa-block .q-text {
+  width: 25vw;
+  top: 3.3vw;
+  right: 13.5vw;
+}
+@media (max-width: 991px) {
+  #youtube-views-zh .qa-block .q-text {
+    width: 100%;
+    top: 7vw;
+    right: -24%;
+  }
+}
+#youtube-views-zh .qa-block .a-text {
+  top: 3.7vw;
+  right: 5vw;
+}
+@media (max-width: 991px) {
+  #youtube-views-zh .qa-block .a-text {
+    top: 7.5vw;
+    right: unset;
+    left: 46vw;
+  }
+}
 @media (max-width: 767px) {
   #youtube-views-zh .info-content {
     text-align: center;
@@ -2994,7 +3030,7 @@
 }
 #youtube-views-zh .info-content h4 {
   font-weight: bold;
-  line-height: 35px;
+  line-height: 40px;
   margin-bottom: 30px;
 }
 #youtube-views-zh .info-content h4 strong {
@@ -3011,6 +3047,92 @@
     margin: auto;
   }
 }
+#youtube-views-zh .info-content img {
+  max-width: 380px;
+  margin-right: 30px;
+}
+#youtube-views-zh .pick-point {
+  display: flex;
+  justify-content: center;
+  margin: 150px auto;
+  position: relative;
+}
+#youtube-views-zh .pick-point ul {
+  padding: 0;
+  list-style: none;
+}
+#youtube-views-zh .pick-point ul li span {
+  color: #ea5413;
+  font-size: 20px;
+  font-weight: bold;
+}
+#youtube-views-zh .pick-point .bg-img {
+  width: 100%;
+  position: absolute;
+  top: -100px;
+  z-index: -1;
+}
+#youtube-views-zh .pick-point .chat-img {
+  right: 80px;
+  top: -20px;
+  position: absolute;
+}
+@media (max-width: 991px) {
+  #youtube-views-zh .pick-point .chat-img {
+    right: -30px;
+  }
+}
+@media (max-width: 767px) {
+  #youtube-views-zh .pick-point .chat-img {
+    left: 67%;
+    right: unset;
+  }
+}
+@media (max-width: 575px) {
+  #youtube-views-zh .pick-point .chat-img {
+    display: none;
+  }
+}
+#youtube-views-zh .pick-point .chat-img img {
+  width: 250px;
+}
+@media (max-width: 991px) {
+  #youtube-views-zh .pick-point .chat-img img {
+    width: 200px;
+  }
+}
+#youtube-views-zh .pick-point .chat-img p {
+  color: #fff;
+  position: absolute;
+  top: 32px;
+  right: 45px;
+  font-size: 24px;
+}
+@media (max-width: 991px) {
+  #youtube-views-zh .pick-point .chat-img p {
+    top: 26px;
+    right: 40px;
+    font-size: 18px;
+  }
+}
+#youtube-views-zh .trust-item {
+  padding: 5px 0;
+  background-color: #ea5413;
+}
+#youtube-views-zh .trust-item p {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 0;
+}
+#youtube-views-zh .price-block {
+  padding: 50px 150px;
+}
+#youtube-views-zh .price-block p {
+  text-align: center;
+  font-size: 20px;
+}
 #youtube-views-zh .card-group {
   margin: 170px auto 50px;
 }
@@ -3064,79 +3186,69 @@
   color: #656565;
 }
 #youtube-views-zh .data-content {
+  position: relative;
+}
+#youtube-views-zh .data-content .bg-img {
+  position: absolute;
+  top: -5px;
+  right: 0;
+  left: 0;
+  width: 100%;
+  z-index: -1;
+}
+#youtube-views-zh .data-content .row {
+  padding: 0 5vw;
+}
+#youtube-views-zh .data-content .row > div {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 150px;
+  justify-content: center;
 }
-#youtube-views-zh .data-content section h4 {
-  position: absolute;
-  top: 35%;
-  left: 50%;
+#youtube-views-zh .data-content .row img {
   width: 100%;
-  font-size: 28px;
+  max-width: 500px;
+}
+#youtube-views-zh .data-content .title {
+  margin-bottom: 10px;
   text-align: center;
+}
+#youtube-views-zh .data-content .title h3 {
+  color: #ea5413;
+  font-size: 20px;
   font-weight: bold;
-  line-height: 40px;
-  transform: translate(-50%, -50%);
 }
-@media (max-width: 1200px) {
-  #youtube-views-zh .data-content section h4 {
-    top: 40%;
-  }
+#youtube-views-zh .data-content .title h4 {
+  color: #000;
+  font-size: 18px;
+  font-weight: bold;
 }
-@media (max-width: 767px) {
-  #youtube-views-zh .data-content section h4 {
-    top: 36%;
-    font-size: 18px;
-    line-height: normal;
-  }
+#youtube-views-zh .data-content .info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-@media (max-width: 575px) {
-  #youtube-views-zh .data-content section h4 {
-    top: 40%;
-  }
+#youtube-views-zh .data-content .info img {
+  max-width: 700px;
 }
-#youtube-views-zh .data-content section h4 strong {
+#youtube-views-zh .data-content .info h4 {
+  text-align: center;
+  font-weight: bold;
+}
+#youtube-views-zh .data-content .info h4 strong {
   font-size: 34px;
   color: #ea5413;
 }
 @media (max-width: 767px) {
-  #youtube-views-zh .data-content section h4 strong {
+  #youtube-views-zh .data-content .info h4 strong {
     font-size: 24px;
   }
 }
 @media (max-width: 414px) {
-  #youtube-views-zh .data-content section h4 strong {
+  #youtube-views-zh .data-content .info h4 strong {
     font-size: 22px;
   }
 }
-#youtube-views-zh .data-content section img {
-  margin-top: 150px;
-}
-@media (max-width: 991px) {
-  #youtube-views-zh .data-content section img {
-    height: 500px;
-    -o-object-fit: cover;
-       object-fit: cover;
-  }
-}
-@media (max-width: 767px) {
-  #youtube-views-zh .data-content section img {
-    margin-top: 80px;
-    height: 400px;
-  }
-}
-@media (max-width: 575px) {
-  #youtube-views-zh .data-content section img {
-    height: 280px;
-  }
-}
-#youtube-views-zh .data-content p {
-  font-weight: bold;
-  line-height: 35px;
-  color: #656565;
-}
 
 /* youtube-views-zh End */
 /* seo-image Start */
@@ -3816,7 +3928,7 @@
   font-weight: bold;
   line-height: 38px;
   text-align: center;
-  color: #6D6D6D;
+  color: #6d6d6d;
 }
 @media (max-width: 1200px) {
   .about-content h2 {
@@ -3864,7 +3976,7 @@
   width: 90px;
   display: block;
   margin: 70px auto;
-  background-color: #E4562A;
+  background-color: #e4562a;
 }
 .about-content .project-item h2 {
   margin-top: 20px;
@@ -4207,7 +4319,7 @@
   top: 75%;
   left: 45%;
   content: "";
-  background-color: #EA5413;
+  background-color: #ea5413;
 }
 @media (max-width: 767px) {
   .news-main-content h1::after {

static/css/style.scss

@@ -1733,7 +1733,6 @@
 }
 
 @media (max-width: 767px) {
-
   // .header {
   //   height: 70vh;
   // }
@@ -2520,7 +2519,7 @@
   }
 
   .card-content {
-    &>div {
+    & > div {
       display: flex;
       flex-direction: column;
       // border: 2px solid #ffebe2;
@@ -3099,7 +3098,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);
@@ -3159,29 +3158,25 @@
     padding: 4.8rem 0 3rem;
 
     p {
+      max-width: 330px;
+      text-align: start;
       line-height: 35px;
       font-size: 18px;
       font-weight: bold;
       color: #656565;
 
+      @media (max-width: 991px) {
+        max-width: 100%;
+      }
+
       @media (max-width: 414px) {
         font-size: 14px;
       }
     }
 
     .row {
-      height: 1000px;
-
-      @media (max-width: 991px) {
-        height: 700px;
-      }
-
-      @media (max-width: 767px) {
-        height: auto;
-      }
-
       div {
-        @media (max-width: 767px) {
+        @media (max-width: 991px) {
           text-align: center;
         }
       }
@@ -3221,7 +3216,7 @@
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
-      background-image: url("/imgs/dm/youtube-views-01.png");
+      background-image: url("/imgs/dm/yt-views/youtube-views-01.png");
 
       @media (max-width: 1200px) {
         top: -10vw;
@@ -3234,6 +3229,42 @@
     }
   }
 
+  .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;
+        left: 46vw;
+      }
+    }
+  }
+
   .info-content {
     @media (max-width: 767px) {
       text-align: center;
@@ -3241,7 +3272,7 @@
 
     h4 {
       font-weight: bold;
-      line-height: 35px;
+      line-height: 40px;
       margin-bottom: 30px;
 
       strong {
@@ -3259,6 +3290,90 @@
         margin: auto;
       }
     }
+
+    img {
+      max-width: 380px;
+      margin-right: 30px;
+    }
+  }
+
+  .pick-point {
+    display: flex;
+    justify-content: center;
+    margin: 150px auto;
+    position: relative;
+    ul {
+      padding: 0;
+      list-style: none;
+      li {
+        span {
+          color: #ea5413;
+          font-size: 20px;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .bg-img {
+      width: 100%;
+      position: absolute;
+      top: -100px;
+      z-index: -1;
+    }
+
+    .chat-img {
+      right: 80px;
+      top: -20px;
+      position: absolute;
+      @media (max-width: 991px) {
+        right: -30px;
+      }
+      @media (max-width: 767px) {
+        left: 67%;
+        right: unset;
+      }
+      @media (max-width: 575px) {
+        display: none;
+      }
+      img {
+        width: 250px;
+        @media (max-width: 991px) {
+          width: 200px;
+        }
+      }
+      p {
+        color: #fff;
+        position: absolute;
+        top: 32px;
+        right: 45px;
+        font-size: 24px;
+        @media (max-width: 991px) {
+          top: 26px;
+          right: 40px;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+
+  .trust-item {
+    padding: 5px 0;
+    background-color: #ea5413;
+    p {
+      color: #fff;
+      font-size: 24px;
+      font-weight: bold;
+      text-align: center;
+      margin-bottom: 0;
+    }
+  }
+
+  .price-block {
+    padding: 50px 150px;
+    p {
+      text-align: center;
+      font-size: 20px;
+    }
   }
 
   .card-group {
@@ -3324,37 +3439,53 @@
   }
 
   .data-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 150px;
+    position: relative;
+    .bg-img {
+      position: absolute;
+      top: -5px;
+      right: 0;
+      left: 0;
+      width: 100%;
+      z-index: -1;
+    }
+    .row {
+      padding: 0 5vw;
+      & > 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;
+      }
+    }
 
-    section {
+    .info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      img {
+        max-width: 700px;
+      }
       h4 {
-        position: absolute;
-        top: 35%;
-        left: 50%;
-        width: 100%;
-        font-size: 28px;
         text-align: center;
         font-weight: bold;
-        line-height: 40px;
-        transform: translate(-50%, -50%);
-
-        @media (max-width: 1200px) {
-          top: 40%;
-        }
-
-        @media (max-width: 767px) {
-          top: 36%;
-          font-size: 18px;
-          line-height: normal;
-        }
-
-        @media (max-width: 575px) {
-          top: 40%;
-        }
-
         strong {
           font-size: 34px;
           color: #ea5413;
@@ -3368,32 +3499,80 @@
           }
         }
       }
-
-      img {
-        margin-top: 150px;
-
-        @media (max-width: 991px) {
-          height: 500px;
-          object-fit: cover;
-        }
-
-        @media (max-width: 767px) {
-          margin-top: 80px;
-          height: 400px;
-        }
-
-        @media (max-width: 575px) {
-          height: 280px;
-        }
-      }
-    }
-
-    p {
-      font-weight: bold;
-      line-height: 35px;
-      color: #656565;
     }
   }
+
+  // .data-content {
+  //   display: flex;
+  //   flex-direction: column;
+  //   align-items: center;
+  //   margin-bottom: 150px;
+
+  //   section {
+  //     h4 {
+  //       position: absolute;
+  //       top: 35%;
+  //       left: 50%;
+  //       width: 100%;
+  //       font-size: 28px;
+  //       text-align: center;
+  //       font-weight: bold;
+  //       line-height: 40px;
+  //       transform: translate(-50%, -50%);
+
+  //       @media (max-width: 1200px) {
+  //         top: 40%;
+  //       }
+
+  //       @media (max-width: 767px) {
+  //         top: 36%;
+  //         font-size: 18px;
+  //         line-height: normal;
+  //       }
+
+  //       @media (max-width: 575px) {
+  //         top: 40%;
+  //       }
+
+  //       strong {
+  //         font-size: 34px;
+  //         color: #ea5413;
+
+  //         @media (max-width: 767px) {
+  //           font-size: 24px;
+  //         }
+
+  //         @media (max-width: 414px) {
+  //           font-size: 22px;
+  //         }
+  //       }
+  //     }
+
+  //     img {
+  //       margin-top: 150px;
+
+  //       @media (max-width: 991px) {
+  //         height: 500px;
+  //         object-fit: cover;
+  //       }
+
+  //       @media (max-width: 767px) {
+  //         margin-top: 80px;
+  //         height: 400px;
+  //       }
+
+  //       @media (max-width: 575px) {
+  //         height: 280px;
+  //       }
+  //     }
+  //   }
+
+  //   p {
+  //     font-weight: bold;
+  //     line-height: 35px;
+  //     color: #656565;
+  //   }
+  // }
 }
 
 /* youtube-views-zh End */
@@ -3848,15 +4027,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;
     }
 
@@ -4113,7 +4292,7 @@
     font-weight: bold;
     line-height: 38px;
     text-align: center;
-    color: #6D6D6D;
+    color: #6d6d6d;
 
     @media (max-width: 1200px) {
       font-size: 22px;
@@ -4158,7 +4337,7 @@
     width: 90px;
     display: block;
     margin: 70px auto;
-    background-color: #E4562A;
+    background-color: #e4562a;
   }
 
   .project-item {
@@ -4193,10 +4372,10 @@
       img {
         width: 70px;
         margin: 0 10px;
-        transition: all .3s;
+        transition: all 0.3s;
 
         &:hover {
-          opacity: .8;
+          opacity: 0.8;
         }
 
         @media (max-width: 767px) {
@@ -4422,10 +4601,10 @@
       border: 1px solid #ea5413;
       border-radius: 0.5rem;
       background-color: #fff;
-      transition: all .3s;
+      transition: all 0.3s;
 
       &:hover {
-        opacity: .8;
+        opacity: 0.8;
       }
 
       a {
@@ -4452,10 +4631,10 @@
 
     a {
       text-decoration: none;
-      transition: all .3s;
+      transition: all 0.3s;
 
       &:hover {
-        opacity: .8;
+        opacity: 0.8;
       }
     }
 
@@ -4512,10 +4691,10 @@
           border-radius: 10px;
           color: #000;
           background-color: #e1e1e1;
-          transition: all .3s;
+          transition: all 0.3s;
 
           &:hover {
-            opacity: .8;
+            opacity: 0.8;
           }
         }
       }
@@ -4550,7 +4729,7 @@
       top: 75%;
       left: 45%;
       content: "";
-      background-color: #EA5413;
+      background-color: #ea5413;
 
       @media (max-width: 767px) {
         height: 0.2rem;
@@ -4598,4 +4777,4 @@
   }
 }
 
-/* news-content End */
+/* news-content End */

webSite/config.toml

@@ -50,80 +50,80 @@ page = ["HTML"]
     url  = ""
     weight = 3
 
+[[menu.main]]
+    identifier="youtube-views-zh"
+    name = "影音流量推手"
+    url = "/youtube-views-zh/dm/"
+    weight = 1
+    parent = "home"
+
 [[menu.main]]
     identifier="ad-operation"
     name = "AI 廣告投放"
     url = "/ad-operation/dm/"
-    weight = 1
+    weight = 2
     parent = "home"
 
 [[menu.main]]
     identifier="bigdata"
     name = "大數據分析"
     url = "/bigdata/dm/"
-    weight = 2
+    weight = 3
     parent = "home"
 
 [[menu.main]]
     identifier="crawler"
     name = "資訊爬蟲"
     url = "/crawler/dm/"
-    weight = 3
+    weight = 4
     parent = "home"
 
 [[menu.main]]
     identifier="research"
     name = "企業系統研發委外"
     url = "/research/dm/"
-    weight = 4
+    weight = 5
     parent = "home"
 
 [[menu.main]]
     identifier="seo-search"
     name = "SEO 搜尋排名優化"
     url = "/seo/dm/"
-    weight = 5
+    weight = 6
     parent = "home"
     
 [[menu.main]]
     identifier="video-making"
     name = "影片製作服務"
     url = "/video-making/dm/"
-    weight = 6
+    weight = 7
     parent = "home"
 
 [[menu.main]]
     identifier="seo"
     name = "新聞 AI 主播媒體聯播網"
     url = "/ai-anchor/dm/"
-    weight = 7
+    weight = 8
     parent = "home"
 
 [[menu.main]]
     identifier="blog-traffic"
     name = "創業家專案"
     url = "/blog-traffic/dm/"
-    weight = 8
+    weight = 9
     parent = "home"
 
 [[menu.main]]
     identifier="seo-image"
     name = "形象 SEO"
     url = "/seo-image/dm/"
-    weight = 9
+    weight = 10
     parent = "home"
 
 [[menu.main]]
     identifier="youtube-views"
     name = "YouTube View Booster"
     url = "/youtube-views/dm/"
-    weight = 10
-    parent = "home"
-
-[[menu.main]]
-    identifier="youtube-views-zh"
-    name = "影音流量推手"
-    url = "/youtube-views-zh/dm/"
     weight = 11
     parent = "home"
 

webSite/content/youtube-views-zh/dm.md

@@ -6,7 +6,7 @@ categories = ["video-making"]
 layout = "video-making"
 banner = ""
 packageTitle = "影音流量推手"
-packageSub = "你成為網紅的最短距離"
+packageSub = "YouTube View Booster"
 packageBg = ""
 description_01 = ""
 description_02 = ""