update

layouts/ad-operation/single.html

@@ -20,8 +20,8 @@
   {{ partial "navbar.html" . }}
   {{ partial "pageFormBtn.html" . }}
   <main id="ad-operation">
-    <section class="header">
-      <div class="banner d-flex flex-column align-items-center justify-content-center">
+    <section class="container header">
+      <!-- <div class="banner d-flex flex-column align-items-center justify-content-center">
         <img src="/imgs/dm/ad-operation-01.webp" alt="" class="img">
         <img src="/imgs/dm/word.png" alt="" class="text">
         <section style="opacity: 0;">
@@ -48,39 +48,68 @@
           </h4>
           <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
         </section>
-      </div>
+      </div> -->
 
-      <section class="img-content">
-        <img src="/imgs/dm/ad-operation-02.png" alt="">
-        <h4 class="left">大數據精準 <br> 抓取目標受眾</h4>
-        <h4 class="center">同時管理 <br> 數百檔廣告</h4>
-        <h4 class="right">工業局認證 <br> AI智慧廣告 <br> 投放技術</h4>
-      </section>
+      <div class="row align-items-center mt-5 pt-5 g-0">
+        <div class="col-12 col-lg-6 text-center position-relative">
+          <img src="/imgs/dm/ad-operation-04.png" alt="" class="header-lefttop">
+          <h2 class="header-title">{{ .Params.packageTitle }}</h2>
+          <p class="text-center px-3 my-4" style="font-size: 1.4rem;">{{ .Params.packageSub }}</p>
+          <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
+        </div>
+        <div class="col-12 col-lg-6 position-relative px-4 mt-5 mt-lg-0">
+          <img src="/imgs/dm/ad-operation-01.jpg" alt="" class="img-fluid">
+          <img src="/imgs/02.webp" alt="" class="header-right-cir img-fluid">
 
-      <div class="container category dm-description position-relative">
-        <h2 class="title mx-3 mx-sm-0">ChoozMo <br> AI 廣告投手</h2>
-        <section class="pt-4 pb-5 position-relative">
+          <!-- <div class="header-right header-dm" style="background-image: url('/imgs/dm/ad-operation-01.jpg');">
+            <img src="/imgs/02.webp" alt="" class="header-right-cir">
+            <img src="imgs/影片.webp" alt="" class="header-right-video">
+            <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
+            <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
+          </div> -->
+        </div>
+      </div>
+
+      <div class="container dm-description position-relative">
+        <!-- <h2 class="title mx-3 mx-sm-0">ChoozMo <br> AI 廣告投手</h2> -->
+        <span class="line"></span>
+        <section class="pt-4 pb-5">
           <h5>
-            廣告品質越好， 廣告付費就越少！
+            集仕多擁有專業投放廣告的豐富經驗 <br>
+            利用 <strong>獨家 SEO 顯微鏡健檢服務</strong> 和綁定 <strong>Google My Business</strong> 兩大分析系統。
             <br><br>
+            完整收集數據與分析報告， 為各大企業、 商家以最有效的廣告策略<br>
+            <strong>精準鎖定目標客群， 並適時地調整廣告策略。</strong>
+            <br><br>
+            透過 LINE 就能即時查詢分析報告，<br>
+            以達到出色的廣告效益， 提高品牌曝光量和知名度！
+          </h5>
+          <!-- <h5>
             集仕多擁有專業投放廣告的豐富經驗，利用 <strong>獨家 SEO 顯微鏡健檢服務</strong> 和綁定 <strong>Google My Business</strong> 兩大分析系統。
             <br><br>
             完整收集數據與分析報告， 為各大企業、 商家以最有效的廣告策略<br>
             <strong>精準鎖定目標客群， 並適時地調整廣告策略。</strong>
             <br><br>
             透過 LINE 就能即時查詢分析報告， 以達到出色的廣告效益， 提高品牌曝光量和知名度！
-          </h5>
-          <img src="/imgs/dm/ad-operation-04.png" alt="" class="header-lefttop">
+          </h5> -->
         </section>
-        <img src="/imgs/dm/circle-01.webp" alt="" class="purple-circle">
-        <div class="video-box mx-auto">
+        <img src="/imgs/dm/stock-img-05.png" alt="" class="stock-img">
+        <!-- <img src="/imgs/dm/circle-01.webp" alt="" class="purple-circle"> -->
+        <!-- <div class="video-box mx-auto">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/teVJmQz8jpQ" title="YouTube video player"
             frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen></iframe>
-        </div>
+        </div> -->
       </div>
 
+      <section class="img-content">
+        <img src="/imgs/dm/ad-operation-02.png" alt="">
+        <h4 class="left">大數據精準 <br> 抓取目標受眾</h4>
+        <h4 class="center">同時管理 <br> 數百檔廣告</h4>
+        <h4 class="right">工業局認證 <br> AI智慧廣告 <br> 投放技術</h4>
+      </section>
+
       <!-- <div class="row align-items-center justify-content-center g-0" style="padding: 100px 0;">
         <div class="col-12 col-md-6 text-center position-relative">
           <img src="/imgs/dm/operation_01.png" alt="" class="header-lefttop">
@@ -106,7 +135,7 @@
 
     <div class="container">
       <div class="row my-5 justify-content-center card-content px-3 px-sm-0">
-        <div class="col-12 col-md-5 mx-3">
+        <div class="col-12 col-md-10 col-lg-5 mx-3">
           <h3>獨家 SEO 顯微鏡健檢服務</h3>
 
           <div class="row mx-auto table">
@@ -137,7 +166,7 @@
           </div>
           <img class="img-fluid my-4" src="/imgs/dm/ad-operation-05.png" alt="">
         </div>
-        <div class="col-12 col-md-5 mx-3 mt-5 mt-md-0">
+        <div class="col-12 col-md-10 col-lg-5 mx-3 mt-5 mt-lg-0">
           <h3>Google My Business</h3>
           <h4>
             經營 <strong>Local SEO</strong>， 能更有效地曝光自己的品牌及商品。 <br>
@@ -146,7 +175,7 @@
           </h4>
           <img class="img-fluid my-auto" src="/imgs/dm/ad-operation-06.png" alt="">
         </div>
-        <div class="col-12 col-md-5 mx-3 mt-5">
+        <div class="col-12 col-md-10 col-lg-5 mx-3 mt-5">
           <h3>受眾目標分析</h3>
           <h4>
             研究品牌/產業/SEO顯微鏡

static/css/style.css

@@ -30,9 +30,9 @@
   background-color: #fff;
 }
 .navbar-nav .dropdown-menu .dropdown-item:hover {
-  color: #EA5413;
+  color: #ea5413;
   background-color: #fff;
-  padding: 8px 18px 8px 23px;
+  padding: 8px 17px 8px 23px;
 }
 .navbar-nav .signin-link {
   padding: 8px 18px;
@@ -75,7 +75,7 @@
 
 .header-title {
   font-size: 2.5rem;
-  line-height: 50px;
+  line-height: 55px;
   font-weight: 600;
   color: #000;
 }
@@ -1443,9 +1443,6 @@
   }
 }
 @media (max-width: 992px) {
-  .header-title {
-    font-size: 3rem;
-  }
   .cntheader .header-title {
     font-size: 2.2rem;
   }
@@ -2093,6 +2090,7 @@
 #ad-operation .img-content {
   display: flex;
   justify-content: center;
+  margin: -100px auto;
   position: relative;
   z-index: 100;
   width: 1300px;
@@ -2100,19 +2098,17 @@
 @media (max-width: 1200px) {
   #ad-operation .img-content {
     width: 1000px;
-    margin: -400px auto 0;
+    margin: -50px auto;
   }
 }
 @media (max-width: 991px) {
   #ad-operation .img-content {
     width: 700px;
-    margin: -300px auto 0;
   }
 }
 @media (max-width: 767px) {
   #ad-operation .img-content {
     width: 600px;
-    margin: -250px auto 0;
   }
 }
 @media (max-width: 575px) {
@@ -2243,6 +2239,12 @@
     right: 17px;
   }
 }
+#ad-operation .dm-description {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
 #ad-operation .dm-description h2 {
   margin: 0;
   padding: 8px 10px;
@@ -2255,12 +2257,51 @@
   background: #ea5413;
 }
 #ad-operation .dm-description h5 {
-  font-size: 16px;
-  line-height: 32px;
+  font-size: 22px;
+  letter-spacing: 2px;
+  line-height: 36px;
+}
+@media (max-width: 767px) {
+  #ad-operation .dm-description h5 {
+    font-size: 18px;
+  }
 }
 #ad-operation .dm-description h5 strong {
   padding-bottom: 3px;
-  background: linear-gradient(to bottom, #fff 50%, #ffebe2 50%);
+}
+#ad-operation .dm-description .line {
+  display: block;
+  width: 50px;
+  height: 7px;
+  margin: 80px auto 40px;
+  background-color: #ea5413;
+}
+#ad-operation .dm-description .stock-img {
+  position: absolute;
+  z-index: -10;
+  width: 100vw;
+  top: 100%;
+  height: 660px;
+}
+@media (max-width: 1200px) {
+  #ad-operation .dm-description .stock-img {
+    height: 535px;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .dm-description .stock-img {
+    height: 360px;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .dm-description .stock-img {
+    height: 300px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .dm-description .stock-img {
+    height: 235px;
+  }
 }
 #ad-operation .dm-description .purple-circle {
   top: 100px;
@@ -2432,13 +2473,25 @@
   background: #fff;
 }
 #ad-operation .header-lefttop {
-  width: 100%;
+  width: 170%;
   position: absolute;
-  left: -35vw;
-  top: 400px;
+  left: -22vw;
+  top: -225px;
   z-index: -1;
   opacity: 0.5;
 }
+@media (max-width: 991px) {
+  #ad-operation .header-lefttop {
+    width: 100%;
+    left: -24vw;
+    top: -250px;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .header-lefttop {
+    top: -26vw;
+  }
+}
 #ad-operation .category.dm-description {
   padding: 2rem 8rem;
 }

static/css/style.scss

@@ -26,12 +26,12 @@
       color: #999999;
       &:active {
         background-color: #fff;
-    }
-    &:hover {
-      color: #EA5413;
-      background-color: #fff;
-      padding: 8px 18px 8px 23px;
-  }
+      }
+      &:hover {
+        color: #ea5413;
+        background-color: #fff;
+        padding: 8px 17px 8px 23px;
+      }
     }
   }
   .signin-link {
@@ -87,7 +87,7 @@
 
 .header-title {
   font-size: 2.5rem;
-  line-height: 50px;
+  line-height: 55px;
   font-weight: 600;
   color: #000;
   @media (max-width: 768px) {
@@ -1401,9 +1401,6 @@
 }
 
 @media (max-width: 992px) {
-  .header-title {
-    font-size: 3rem;
-  }
   .cntheader .header-title {
     font-size: 2.2rem;
   }
@@ -2007,6 +2004,7 @@
   .img-content {
     display: flex;
     justify-content: center;
+    margin: -100px auto;
     // margin: -550px auto 0;
     position: relative;
     z-index: 100;
@@ -2014,15 +2012,16 @@
 
     @media (max-width: 1200px) {
       width: 1000px;
-      margin: -400px auto 0;
+      margin: -50px auto;
+      // margin: -400px auto 0;
     }
     @media (max-width: 991px) {
       width: 700px;
-      margin: -300px auto 0;
+      // margin: -300px auto 0;
     }
     @media (max-width: 767px) {
       width: 600px;
-      margin: -250px auto 0;
+      // margin: -250px auto 0;
     }
     @media (max-width: 575px) {
       left: -10px;
@@ -2119,6 +2118,10 @@
   }
 
   .dm-description {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     h2 {
       margin: 0;
       padding: 8px 10px;
@@ -2131,14 +2134,44 @@
       background: #ea5413;
     }
     h5 {
-      font-size: 16px;
-      line-height: 32px;
+      font-size: 22px;
+      letter-spacing: 2px;
+      line-height: 36px;
+      @media (max-width: 767px) {
+        font-size: 18px;
+      }
       strong {
         padding-bottom: 3px;
-        background: linear-gradient(to bottom, #fff 50%, #ffebe2 50%);
+        // background: linear-gradient(to bottom, #fff 50%, #ffebe2 50%);
         // border-bottom: 3px solid rgb(248, 228, 72);
       }
     }
+    .line {
+      display: block;
+      width: 50px;
+      height: 7px;
+      margin: 80px auto 40px;
+      background-color: #ea5413;
+    }
+    .stock-img {
+      position: absolute;
+      z-index: -10;
+      width: 100vw;
+      top: 100%;
+      height: 660px;
+      @media (max-width: 1200px) {
+        height: 535px;
+      }
+      @media (max-width: 991px) {
+        height: 360px;
+      }
+      @media (max-width: 767px) {
+        height: 300px;
+      }
+      @media (max-width: 575px) {
+        height: 235px;
+      }
+    }
     .purple-circle {
       top: 100px;
     }
@@ -2294,24 +2327,21 @@
     background: #fff;
   }
 
-  // .header-lefttop {
-  //   width: 60%;
-  //   position: absolute;
-  //   left: 10vw;
-  //   top: -13vw;
-  //   z-index: -1;
-  //   @media (max-width: 767px) {
-  //     left: 20vw;
-  //   }
-  // }
-
   .header-lefttop {
-    width: 100%;
+    width: 170%;
     position: absolute;
-    left: -35vw;
-    top: 400px;
+    left: -22vw;
+    top: -225px;
     z-index: -1;
     opacity: 0.5;
+    @media (max-width: 991px) {
+      width: 100%;
+      left: -24vw;
+      top: -250px;
+    }
+    @media (max-width: 991px) {
+      top: -26vw;
+    }
   }
 
   .category.dm-description {

webSite/content/ad-operation/dm.md

@@ -5,8 +5,8 @@ tags = ["ad-operation"]
 categories = ["ad-operation"]
 layout = "ad-operation"
 banner = "/imgs/dm/dm_ad-operation_1.jpeg"
-packageTitle = "智慧投放Google廣告 提高轉換率"
-packageSub = "只要Google廣告下得好，就能吸引新訪客光顧網站、提高線上銷售量、提升客戶回訪率，現在早鳥方案代操費用僅 1% "
+packageTitle = "Choozmo AI廣告投手"
+packageSub = "廣告品質越好，廣告付費就越少！"
 packageBg = "/imgs/dm/dm_ad-operation_1.jpeg"
 description_block1 = "廣告品質越好，廣告付費就越少，集仕多擁有專業投放廣告的豐富經驗，利用獨家 SEO 顯微鏡健檢服務和綁定 Google My Business 兩大分析系統，完整收集數據與分析報告，為各大企業、商家以最有效的廣告策略，精準鎖定目標客群，並適時地調整廣告策略，透過 LINE 就能即時查詢分析報告，以達到出色的廣告效益，提高品牌曝光量和知名度！"
 description_block2 = ""