update

index2.html

@@ -36,157 +36,152 @@
         </div>
         <div class='Analytics-report-title'>
           <h1 class='fw-bold'>微電影網路聲量調查報告</h1>
-          <!-- <h1 class='fw-bold'>Preformance One Pager Template</h1> -->
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ratione maiores quasi cum itaque,
             architecto esse unde eum quas quis quaerat,</p>
         </div>
+        <div style="height: 75vh;" class="d-flex align-items-center justify-content-center">
+          <div>
+            <h1 style="font-size: 72px;">封面圖片</h1>
+          </div>
+        </div>
       </div>
-      <!-- <div style="font-size: 20px; margin-top: -20px;" class='text-end me-3'>1</div> -->
     </div>
     <div class='Analytics-report-page'>
-      <h1 class="text-center">目錄</h1>
-      <!-- <div style="font-size: 20px; margin-top: -20px;" class='text-end me-3'>1</div> -->
+      <div class='container-fluid'>
+        <img style="position: absolute;" class='Orange' src="./img/背景橘.png" alt="">
+        <img style="position: absolute;" class='Purple' src="./img/背景紫.png" alt="">
+        <div class='text-end'>
+          <img class='choozmo mt-1' src="./img/logo_choozmo.webp" alt="">
+        </div>
+        <div class='Analytics-report-title'>
+          <h1 class='fw-bold'>微電影網路聲量調查報告</h1>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ratione maiores quasi cum itaque,
+            architecto esse unde eum quas quis quaerat,</p>
+        </div>
+        <div style="height: 75vh;" class="d-flex align-items-center justify-content-center">
+          <div>
+            <h1 style="font-size: 72px;">封面圖片</h1>
+          </div>
+        </div>
+      </div>
     </div>
     <!-- 第一頁 -->
     <div class='Analytics-report-page'>
-      <div class='Analytics-chart mt-3'>
-        <div class="row px-0 mx-0">
-          <div class="col-6">
-            <h4 class='fw-bold'>觀眾喜好的影音類型</h4>
-            <p>
-              据圖表顯示，影音類型佔最高比例的電影/微電影為觀眾較常觀看的内容，音樂/MV内容則佔据第二。連續劇/偶像劇/美食/旅游/綜藝/八卦/笑話趣味影片/影集/電玩/動漫等内容類型也有高達25%~38%的觀眾喜歡，顯示現代觀眾的分眾特性，各種主題都有人支持。
-            </p>
-            <h2 class='Data-h2 fw-bold mt-3'>觀眾較常收看之影音類型</h2>
-            <canvas id="myChart2" width="200" height="200"></canvas>
-
-          </div>
-          <div class="col-6">
-            <div class='mb-3'>
+      <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
+      <img style="position: absolute;" class='Purple2' src="./img/背景紫.png" alt="">
+      <div class='text-end mb-3'>
+        <img class='choozmo mt-1' src="./img/logo_choozmo.webp" alt="">
+      </div>
+      <div class='Analytics-chart'>
+        <div class="row mx-0">
+          <div class="row mx-0">
+            <div class="col-6">
+              <h2 class='Data-h2 fw-bold'>觀眾較常收看之影音類型</h2>
+              <canvas id="myChart2" width="200" height="200"></canvas>
+              <h4 class='fw-bold'>觀眾喜好的影音類型</h4>
+              <p>
+                据圖表顯示，影音類型佔最高比例的電影/微電影為觀眾較常觀看的内容，音樂/MV内容則佔据第二。連續劇/偶像劇/美食/旅游/綜藝/八卦/笑話趣味影片/影集/電玩/動漫等内容類型也有高達25%~38%的觀眾喜歡，顯示現代觀眾的分眾特性，各種主題都有人支持。
+              </p>
+  
+            </div>
+            <div class="col-6">
               <h2 class='Data-h2 fw-bold'>微電影廣告吸引力面向</h2>
-              <canvas id="myChart" width="200" height="200"></canvas>
-              <div>
-                <h4 class='fw-bold'>微電影吸引力面向</h4>
-                <p>不同的微電影題材間接影響了觀眾的觀看行爲和留下深刻的印象，大致可分為：</p>
-                <ul>
-                  <li style="list-style-type: disc">
-                    能引起情感共鳴；
-                  </li>
-                  <li>
-                    故事結構精巧、出乎意料；
-                  </li>
-                  <li>
-                    劇情與產品契合巧妙融合度高
-                  </li>
-                </ul>
+              <div class='mb-3'>
+                <div class="my-3">
+                  <!-- <h4 class='fw-bold mt-3'>微電影吸引力面向</h4> -->
+                  <p>不同的微電影題材間接影響了觀眾的觀看行爲和留下深刻的印象，大致可分為：</p>
+                  <ul>
+                    <li style="list-style-type: disc">
+                      能引起情感共鳴；
+                    </li>
+                    <li>
+                      故事結構精巧、出乎意料；
+                    </li>
+                    <li>
+                      劇情與產品契合巧妙融合度高
+                    </li>
+                  </ul>
+                  <p>不到30%的人則會受到微電影的製作精良場面浩大以及體驗度高而被吸引。</p>
+                </div>
+                <canvas id="myChart" width="200" height="200"></canvas>
               </div>
             </div>
           </div>
-          <div class='row mx-0 px-0'>
+          <div class='row mx-0'>
+            <h2 class='Data-h2 fw-bold'>媒體行銷之比較</h2>
             <div class="col-6">
-              <h4 class='fw-bold'>廣告時長和故事類型 </h4>
-              <!-- <h1 class='fw-bold'>Preformance One Pager Template</h1> -->
-              <p>微電影透過各種故事類型來呈現内容，因此不同的主題有不同的合適觀看時間。据圖標顯示:</p>
-              <ul>
-                <li style="list-style-type: disc">
-                  親情類、搞笑類故事更傾向于選擇0~5分鐘的時長來表達；
-                </li>
-                <li>
-                  愛情類、懸疑類故事則更多數為6~10分鐘；
-                </li>
-                <li>
-                  夢想類、公益類故事時間分配比較均勻，從0~16分鐘以上都較為普遍。
-                </li>
-              </ul>
-            </div>
-            <div class="col-6">
-              <h2 class='Data-h2 fw-bold mt-1'>廣告時長與故事類型</h2>
-              <div class='border mb-2 pb-3'>
-                <div class="row px-0 mx-0">
-                  <div class="col-6">
-                    <div class='adv-type'>
-                      <div class='row mx-0 px-0'>
-                        <div class="col-6">
-                          <i style="font-size: 48px; color:#920783;" class="fas fa-laugh-beam"></i>
-                        </div>
-                        <div class='col-6 px-0'>
-                          <p>搞笑</p>
-                          <p>0~5分鐘</p>
-                        </div>
-                      </div>
-                    </div>
-                    <div class='adv-type'>
-                      <div class='row mx-0 px-0'>
-                        <div class="col-6">
-                          <i style="font-size: 48px; color:#920783;" class="fas fa-house-user"></i>
-                        </div>
-                        <div class='col-6 px-0'>
-                          <p>親情</p>
-                          <p>0~5分鐘</p>
-                        </div>
-                      </div>
-                    </div>
-                    <div class='adv-type'>
-                      <div class='row mx-0 px-0'>
-                        <div class="col-6">
-                          <i style="font-size: 48px; color:#920783;" class="fas fa-heart"></i>
-                        </div>
-                        <div class='col-6 px-0'>
-                          <p>愛情</p>
-                          <p>5~10分鐘</p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+              <table class="table-1 table table-bordered mt-3">
+                <thead>
+                  <tr>
+                    <th scope="col" style="width: 20%;"></th>
+                    <th scope="col" class='text-center'>廣告</th>
+                    <th scope="col" class='text-center'>微電影</th>
+                    <th scope="col" class='text-center'>電影</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th scope="row">時間</th>
+                    <td class='text-center'>10分-60分</td>
+                    <td class='text-center'>1分-30分</td>
+                    <td class='text-center'>90分-120分</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">平台</th>
+                    <td>主要為電視，延伸至網路</td>
+                    <td>主要為網路，延伸至電視或電影院</td>
+                    <td>主要為電影院延伸至電視以及網路</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">內容</th>
+                    <td>以傳達產品與品牌為主</td>
+                    <td>透過劇情來傳達品牌認同度</td>
+                    <td>著重故事情節，無明顯商業宣傳</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">喜好程度</th>
+                    <td class='text-center'>低</td>
+                    <td class='text-center'>中</td>
+                    <td class='text-center'> 高</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">故事性強</th>
+                    <td></td>
+                    <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
+                    <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
 
-                  <div class="col-6">
-                    <div class='adv-type'>
-                      <div class='row mx-0 px-0'>
-                        <div class="col-6">
-                          <i style="font-size: 48px; color:#920783;" class="fas fa-ghost"></i>
-                        </div>
-                        <div class='col-6 px-0'>
-                          <p>懸疑</p>
-                          <p>5~10分鐘</p>
-                        </div>
-                      </div>
-                    </div>
-                    <div class='adv-type'>
-                      <div class='row mx-0 px-0'>
-                        <div class="col-6">
-                          <i style="font-size: 48px; color:#920783" class="fas fa-hand-holding-heart"></i>
-                        </div>
-                        <div class='col-6 px-0'>
-                          <p>公益</p>
-                          <p>0~16分鐘</p>
-                        </div>
-                      </div>
-                    </div>
-                    <div class='adv-type'>
-                      <div class='row mx-0 px-0'>
-                        <div class="col-6">
-                          <i style="font-size: 48px; color:#920783;" class="fas fa-rocket"></i>
-                        </div>
-                        <div class='col-6 px-0'>
-                          <p>夢想</p>
-                          <p>0~16分鐘</p>
-                        </div>
-                      </div>
-                    </div>
+                  </tr>
+                  <tr>
+                    <th scope="row">趣味性</th>
+                    <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
+                    <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
+                    <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
 
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-8">
-              <h2 class='Data-h2 fw-bold mt-5'>微電影與其他的影像形式比較分析(FB)</h2>
+                  </tr>
+                  <tr>
+                    <th scope="row">品質</th>
+                    <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
+                    <td></td>
+                    <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
 
-              <canvas id="myChart-bar" width="200" height="200"></canvas>
+                  </tr>
+                  <tr>
+                    <th scope="row">話題性</th>
+                    <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
+                    <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
+                    <td></td>
+
+                  </tr>
+                </tbody>
+              </table>
             </div>
-            <div class="col-4">
-              <p>綜觀而言，黑手阿爸與那些足球教我的事兩部影片於臉書的反應較為熱烈，主要是由於該兩則貼文皆有融合留言抽獎活動，因此，貼文的按讚數、觀看次數及留言數，皆有明顯的高聲量表現。
-                除此之外，貼文的標題以及開頭文字也是一大因素，從經濟部的GreenCampus
-                綠光篇貼文與其他貼文比較起來，由於其他的貼文標題及開頭皆是採用較為口語的文字敘述，像是與觀眾對話，較能夠吸引使用者繼續閱讀及觀看，因此在觀看數與按讚數都較高。
-                註:"愛是最短的距離---織足藏樂館"無臉書觀看次</p>
+            <div class="col-6">
+              <div class="mt-3">
+                <h4 class='fw-bold'>微電影發展模式之建構</h4>
+                <p class='mb-3'>微電影介於廣告與電影之間，運用吸引人的劇情內容，巧妙地將品牌精神與產品行銷，融入故事情節當中，再透過劇情傳達訴求，提升品牌認同與產品的好感度，進而產生消費行為。</p>
+                <p class='mb-3'>微電影兼具兩者的廣告效益和娛樂效果，更別説是新時代的速食收看習慣，觀眾或許更喜歡通過微電影，快速得到想要的資訊。</p>
+                <p>微電影相比於電視及電影兩者，能夠在短時間內展現豐富的趣味性、故事性及話題性，充分反應時事，並且能夠放於各種平台供觀看。 </p>
+              </div>
             </div>
           </div>
           <!-- <div class='row px-0 mx-0'>
@@ -241,220 +236,296 @@
         </div>
 
       </div>
-      <div style="font-size: 20px; margin-top: -20px;" class='text-end me-3'>1</div>
+      <div class='pagenumber'><p>1</p></div>
     </div>
     <!-- 第二頁 -->
     <div class='Analytics-report-page'>
-      <div class="row px-0 mx-0">
-        <div class="col-6">
-          <h2 class='Data-h2 fw-bold'>媒體行銷之比較</h2>
-          <table class="table-1 table table-bordered">
-            <thead>
-              <tr>
-                <th scope="col" style="width: 20%;"></th>
-                <th scope="col" class='text-center'>廣告</th>
-                <th scope="col" class='text-center'>微電影</th>
-                <th scope="col" class='text-center'>電影</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th scope="row">時間</th>
-                <td class='text-center'>10分-60分</td>
-                <td class='text-center'>1分-30分</td>
-                <td class='text-center'>90分-120分</td>
-              </tr>
-              <tr>
-                <th scope="row">平台</th>
-                <td>主要為電視，延伸至網路</td>
-                <td>主要為網路，延伸至電視或電影院</td>
-                <td>主要為電影院延伸至電視以及網路</td>
-              </tr>
-              <tr>
-                <th scope="row">內容</th>
-                <td>以傳達產品與品牌為主</td>
-                <td>透過劇情來傳達品牌認同度</td>
-                <td>著重故事情節，無明顯商業宣傳</td>
-              </tr>
-              <tr>
-                <th scope="row">喜好程度</th>
-                <td class='text-center'>低</td>
-                <td class='text-center'>中</td>
-                <td class='text-center'> 高</td>
-              </tr>
-              <tr>
-                <th scope="row">故事性強</th>
-                <td></td>
-                <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
-                <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
-
-              </tr>
-              <tr>
-                <th scope="row">趣味性</th>
-                <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
-                <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
-                <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
-
-              </tr>
-              <tr>
-                <th scope="row">品質</th>
-                <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
-                <td></td>
-                <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
-
-              </tr>
-              <tr>
-                <th scope="row">話題性</th>
-                <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
-                <td class='text-center'> <i class="facebook-like fas fa-thumbs-up"></i></td>
-                <td></td>
-
-              </tr>
-            </tbody>
-          </table>
-          <div>
-            <h4 class='fw-bold'>微電影發展模式之建構</h4>
-            <p class='mb-3'>微電影介於廣告與電影之間，運用吸引人的劇情內容，巧妙地將品牌精神與產品行銷，融入故事情節當中，再透過劇情傳達訴求，提升品牌認同與產品的好感度，進而產生消費行為。</p>
-            <p class='mb-3'>微電影兼具兩者的廣告效益和娛樂效果，更別説是新時代的速食收看習慣，觀眾或許更喜歡通過微電影，快速得到想要的資訊。</p>
-            <p>微電影相比於電視及電影兩者，能夠在短時間內展現豐富的趣味性、故事性及話題性，充分反應時事，並且能夠放於各種平台供觀看。 </p>
-          </div>
-        </div>
-        <div class="col-6">
-          <h2 class='Data-h2 fw-bold mt-1'>廣告主演是否為明星佔比</h2>
-          <canvas id="myChart-pie" width="200" height="200"></canvas>
-          <div>
-            <p>總的來說，雖然廣告主偏好用明星來擔任微電影廣告的主角，但是依據本調查所分析的微電影素材中，觀察出一個有趣的現象，採用明星的微電影中，其中的主演演員均不是業內演藝圈一線的大咖演員。</p>
-          </div>
+      <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
+      <img style="position: absolute;" class='Purple2' src="./img/背景紫.png" alt="">
+      <div class='text-end mb-3'>
+        <img class='choozmo mt-1' src="./img/logo_choozmo.webp" alt="">
+      </div>
+      <div class='Analytics-chart'>
+        <div class="row mx-0">
+          <div class='row mx-0'>
+            <h2 class='Data-h2 fw-bold'>廣告主演是否為明星佔比</h2>
+            <div class="col-6">
+              <div class="row px-0 mx-0">
+                <div class="Doughnut-box col-6 px-0 border-end border-bottom">
+                  <canvas id="myChart-Doughnut1" width="200" height="200"></canvas>
+                  <p>產品廣告</p>
+                </div>
+                <div class="Doughnut-box col-6 px-0 border-start border-bottom">
+                  <canvas id="myChart-Doughnut2" width="200" height="200"></canvas>
+                  <p>品牌形象廣告</p>
+                </div>
+                <div class="Doughnut-box col-6 px-0 border-end border-top">
+                  <canvas id="myChart-Doughnut3" width="200" height="200"></canvas>
+                  <p>觀念廣告</p>
+                </div>
+                <div class="Doughnut-box col-6 px-0 border-start border-top">
+                  <canvas id="myChart-Doughnut4" width="200" height="200"></canvas>
+                  <p>政府公益</p>
+                </div>
+                <h2 class='Data-h2 fw-bold mt-3'>廣告時長與故事類型</h2>
+
+                <div class='border mb-2 pb-3'>
+                  <div class="row px-0 mx-0">
+                    <div class="col-6">
+                      <div class='adv-type'>
+                        <div class='row mx-0 px-0'>
+                          <div class="col-6">
+                            <i style="font-size: 48px; color:#920783;" class="fas fa-laugh-beam"></i>
+                          </div>
+                          <div class='col-6 px-0'>
+                            <p>搞笑</p>
+                            <p>0~5分鐘</p>
+                          </div>
+                        </div>
+                      </div>
+                      <div class='adv-type'>
+                        <div class='row mx-0 px-0'>
+                          <div class="col-6">
+                            <i style="font-size: 48px; color:#920783;" class="fas fa-house-user"></i>
+                          </div>
+                          <div class='col-6 px-0'>
+                            <p>親情</p>
+                            <p>0~5分鐘</p>
+                          </div>
+                        </div>
+                      </div>
+                      <div class='adv-type'>
+                        <div class='row mx-0 px-0'>
+                          <div class="col-6">
+                            <i style="font-size: 48px; color:#920783;" class="fas fa-heart"></i>
+                          </div>
+                          <div class='col-6 px-0'>
+                            <p>愛情</p>
+                            <p>5~10分鐘</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="col-6">
+                      <div class='adv-type'>
+                        <div class='row mx-0 px-0'>
+                          <div class="col-6">
+                            <i style="font-size: 48px; color:#920783;" class="fas fa-ghost"></i>
+                          </div>
+                          <div class='col-6 px-0'>
+                            <p>懸疑</p>
+                            <p>5~10分鐘</p>
+                          </div>
+                        </div>
+                      </div>
+                      <div class='adv-type'>
+                        <div class='row mx-0 px-0'>
+                          <div class="col-6">
+                            <i style="font-size: 48px; color:#920783" class="fas fa-hand-holding-heart"></i>
+                          </div>
+                          <div class='col-6 px-0'>
+                            <p>公益</p>
+                            <p>0~16分鐘</p>
+                          </div>
+                        </div>
+                      </div>
+                      <div class='adv-type'>
+                        <div class='row mx-0 px-0'>
+                          <div class="col-6">
+                            <i style="font-size: 48px; color:#920783;" class="fas fa-rocket"></i>
+                          </div>
+                          <div class='col-6 px-0'>
+                            <p>夢想</p>
+                            <p>0~16分鐘</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
 
-          <h2 class='Data-h2 fw-bold mt-1'>廣告類型與主演是否為明星佔比</h2>
-          <div class="row px-0 mx-0">
-            <div class="Doughnut-box col-6 px-0 border-end border-bottom">
-              <canvas id="myChart-Doughnut1" width="200" height="200"></canvas>
-              <p>產品廣告</p>
+                  </div>
+                </div>
+                <div>
+                  <h4 class='fw-bold'>廣告時長和故事類型 </h4>
+                  <p>微電影透過各種故事類型來呈現内容，因此不同的主題有不同的合適觀看時間。据圖標顯示:</p>
+                  <ul>
+                    <li style="list-style-type: disc">
+                      親情類、搞笑類故事更傾向于選擇0~5分鐘的時長來表達；
+                    </li>
+                    <li>
+                      愛情類、懸疑類故事則更多數為6~10分鐘；
+                    </li>
+                    <li>
+                      夢想類、公益類故事時間分配比較均勻，從0~16分鐘以上都較為普遍。
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </div>
-            <div class="Doughnut-box col-6 px-0 border-start border-bottom">
-              <canvas id="myChart-Doughnut2" width="200" height="200"></canvas>
-              <p>品牌形象廣告</p>
+            <div class="col-6">
+              <div class="mt-3">
+                <div>
+                  <h4 class='fw-bold'>各微電影類別與素人之關係</h4>
+                  <p class="mb-3">除此之外，從圖表中可以發現，在品牌形象類型的微電影中，雖然業主選擇明星來當主演的概率為最大，但是，業主選擇素人當主演的比例大幅高於產品廣告類型的微電影中素人當主演的比例。
+                  </p>
+                  <p class="mb-3">由此可以推論出，可能是業主希望自身品牌形象的微電影能夠離觀眾距離更近一點，縮短品牌與觀眾的距離。</p>
+                </div>
+                <h2 class='Data-h2 fw-bold'>廣告主演是否為明星佔比</h2>
+                <canvas id="myChart-pie" width="200" height="200"></canvas>
+                <div class="mt-3">
+                  <h4 class='fw-bold'>微電影與主演人物之關係</h4>
+                  <p>總的來說，廣告主偏好用明星來擔任微電影廣告的主角，由於明星的臉孔對於觀眾而言較為熟悉，觀眾比較會停留下來觀賞完影片，以達成宣傳目的。</p>
+                  <p>但是依據本調查所分析的微電影素材中，觀察出一個有趣的現象，採用明星的微電影中，其中的主演演員均不是業內演藝圈一線的大咖演員。</p>
+                </div>
+              </div>
             </div>
-            <div class="Doughnut-box col-6 px-0 border-end border-top">
-              <canvas id="myChart-Doughnut3" width="200" height="200"></canvas>
-              <p>觀念廣告</p>
+          </div>
+        </div>
+
+      </div>
+      <div class='pagenumber'><p>2</p></div>
+    </div>
+
+    <!-- 第三頁 -->
+    <div class='Analytics-report-page'>
+      <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
+      <img style="position: absolute;" class='Purple2' src="./img/背景紫.png" alt="">
+      <div class='text-end mb-3'>
+        <img class='choozmo mt-1' src="./img/logo_choozmo.webp" alt="">
+      </div>
+      <div class='Analytics-chart'>
+        <div class="row mx-0 px-0">
+          <div class="row mx-0">
+            <h2 class='Data-h2 fw-bold mt-1'>微電影與其他的影像形式比較分析</h2>
+            <div class="col-7">
+              <table class="table-1 table table-bordered">
+                <thead>
+                  <tr>
+                    <th scope="col" style="width: 18%;"></th>
+                    <th scope="col" class='text-center'>微電影<br>(工研院))</th>
+                    <th scope="col" class='text-center'>網紅<br>(howhow)</th>
+                    <th scope="col" class='text-center'>新聞專題 (眼球中央、科技新報)</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th scope="row" class='px-0 text-center'>時間長短</th>
+                    <td class='text-center'>1分鐘-5分鐘</td>
+                    <td class='text-center'>1分鐘-10分鐘</td>
+                    <td class='text-center'>2分鐘-15分鐘</td>
+                  </tr>
+                  <tr>
+                    <th scope="row" class="px-0 text-center">播放平台</th>
+                    <td>Facebook、YouTube</td>
+                    <td>Facebook、YouTube</td>
+                    <td>Facebook、YouTube</td>
+                  </tr>
+                  <tr>
+                    <th scope="row" class='text-center'>內容</th>
+                    <td>透過劇情傳達該產品的用途與涵義</td>
+                    <td>以無釐頭搞笑短劇的脚本結合品牌概念（業配）</td>
+                    <td>關心社會的趨勢與新聞</td>
+                  </tr>
+                  <tr>
+                    <th scope="row" class="text-center px-0">評估方式</th>
+                    <td class='text-center'>點擊率</td>
+                    <td class='text-center'>點擊率</td>
+                    <td class='text-center'>點擊率</td>
+                  </tr> 
+                  <tr>
+                    <th scope="row" class='text-center'>品質</th>
+                    <td class='text-center'>中</td>
+                    <td class='text-center'>中</td>
+                    <td class='text-center'>中</td>
+                  </tr>
+                  <tr>
+                    <th scope="row" class="text-center">話題性</th>
+                    <td class='text-center'>低</td>
+                    <td class='text-center'>高</td>
+                    <td class='text-center'>中</td>
+                  </tr>                
+                </tbody>
+              </table>
+              <!-- <h4 class='fw-bold'>電影與其他影片類型比較</h4> -->
             </div>
-            <div class="Doughnut-box col-6 px-0 border-start border-top">
-              <canvas id="myChart-Doughnut4" width="200" height="200"></canvas>
-              <p>政府公益</p>
+            <div class="col-5">
+              <table class="table-1 table table-bordered">
+                <thead>
+                  <tr>
+                    <th scope="col" style="width: 18%;"></th>
+                    <th scope="col" class='text-center'>微電影<br>(工研院))</th>
+                    <th scope="col" class='text-center'>網紅<br>(howhow)</th>
+                    <th scope="col" class='text-center'>新聞專題<br>(眼球中央、<br>科技新報)</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th scope="row">置入</th>
+                    <td class='text-center'>高</td>
+                    <td class='text-center'>高</td>
+                    <td class='text-center'>低</td>
+                  </tr>
+                  <tr>
+                    <th scope="row" class="px-0">喜好程度</th>
+                    <td class='text-center'>中</td>
+                    <td class='text-center'>高</td>
+                    <td class='text-center'> 中</td>
+                  </tr>
+                  <tr>
+                    <th scope="row" class="px-0">製片預算</th>
+                    <td class='text-center'>中</td>
+                    <td class='text-center'>高</td>
+                    <td class='text-center'>中</td>
+                  </tr>
+                  <tr>
+                    <th scope="row" class="px-0">不受時空限制</th>
+                    <td class='text-center'>低</td>
+                    <td class='text-center'>低</td>
+                    <td class='text-center'>低</td>
+                  </tr>
+                  <tr>
+                    <th scope="row" class="px-0">故事性強</th>
+                    <td class='text-center'>高</td>
+                    <td class='text-center'>中</td>
+                    <td class='text-center'>中</td>
+
+                  </tr>
+                  <tr>
+                    <th scope="row" class="px-0">趣味性</th>
+                    <td class='text-center'>中</td>
+                    <td class='text-center'>高</td>
+                    <td class='text-center'>中</td>
+                  </tr>
+                
+                </tbody>
+              </table>
             </div>
-            <div>
+            <div class="col-12">
               <p>
-                除此之外，從圖表中可以發現，在品牌形象類型的微電影中，雖然業主選擇明星來當主演的概率為最大，但是，業主選擇素人當主演的比例大幅高於產品廣告類型的微電影中素人當主演的比例。
-                由此可以推論出，可能是業主希望自身品牌形象的微電影能夠離觀眾距離更近一點，縮短品牌與觀眾的距離。
+                工研院之微電影透過具有張力的劇情來傳達產品服的用途及核心價值，將其信念明確的表達出來，相比於一般的新聞專題影片的單向播報新聞資訊，較難引起觀眾的共鳴及留下印象。而相較於網紅活動推廣或是品牌影片較為簡短的情境示意，工研院之微電影的故事主軸較為明顯。除此之外，基於工研院微電影之偏技術面之特性，對於多數觀眾可能無法一時之間完全理解，故它所引起的話題討論度相比於網紅的品牌宣傳影片較低。
               </p>
             </div>
           </div>
         </div>
-      </div>
-      <div style="font-size: 20px; margin-top: -20px;" class='text-end me-3'>2</div>
+        <div class="row px-0 mx-0">
+          <div class="row mx-0">
+            <h2 class='Data-h2 fw-bold'>微電影與其他的影像形式比較分析(FB)</h2>
+            <div class="col-12">
+              <canvas id="myChart-bar" width="200" height="200"></canvas>
+            </div>
+            <div class="col-12">
+              <!-- <h4 class='fw-bold'>工研院微電影聲量</h4> -->
 
-    </div>
-    <!-- 第三頁 -->
-    <div class='Analytics-report-page'>
-      <div class='Analytics-chart mt-3'>
-        <div class="col-6">
-          <h2 class='Data-h2 fw-bold mt-1'>微電影與其他的影像形式比較分析</h2>
-          <table class="table-1 table table-bordered">
-            <thead>
-              <tr>
-                <th scope="col" style="width: 18%;"></th>
-                <th scope="col" class='text-center'>微電影<br>(工研院))</th>
-                <th scope="col" class='text-center'>網紅<br>(howhow)</th>
-                <th scope="col" class='text-center'>新聞專題<br>(眼球中央、科技新報)</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th scope="row">時間長短</th>
-                <td class='text-center'>1分鐘-5分鐘</td>
-                <td class='text-center'>1分鐘-10分鐘</td>
-                <td class='text-center'>2分鐘-15分鐘</td>
-              </tr>
-              <tr>
-                <th scope="row">播放平台</th>
-                <td>Facebook、YouTube</td>
-                <td>Facebook、YouTube</td>
-                <td>Facebook、YouTube</td>
-              </tr>
-              <tr>
-                <th scope="row">內容</th>
-                <td>透過劇情傳達該產品的用途與涵義</td>
-                <td>以無釐頭搞笑短劇的脚本結合品牌概念（業配）</td>
-                <td>關心社會的趨勢與新聞</td>
-              </tr>
-              <tr>
-                <th scope="row">評估方式</th>
-                <td class='text-center'>點擊率</td>
-                <td class='text-center'>點擊率</td>
-                <td class='text-center'>點擊率</td>
-  
-              </tr>
-              <tr>
-                <th scope="row">置入</th>
-                <td class='text-center'>高</td>
-                <td class='text-center'>高</td>
-                <td class='text-center'>低</td>
-              </tr>
-              <tr>
-                <th scope="row">喜好程度</th>
-                <td class='text-center'>中</td>
-                <td class='text-center'>高</td>
-                <td class='text-center'> 中</td>
-              </tr>
-              <tr>
-                <th scope="row">製片預算</th>
-                <td class='text-center'>中</td>
-                <td class='text-center'>高</td>
-                <td class='text-center'>中</td>
-              </tr>
-              <tr>
-                <th scope="row">不受時空限制</th>
-                <td class='text-center'>低</td>
-                <td class='text-center'>低</td>
-                <td class='text-center'>低</td>
-              </tr>
-              <tr>
-                <th scope="row">故事性強</th>
-                <td class='text-center'>高</td>
-                <td class='text-center'>中</td>
-                <td class='text-center'>中</td>
-  
-              </tr>
-              <tr>
-                <th scope="row">趣味性</th>
-                <td class='text-center'>中</td>
-                <td class='text-center'>高</td>
-                <td class='text-center'>中</td>
-              </tr>
-              <tr>
-                <th scope="row">品質</th>
-                <td class='text-center'>中</td>
-                <td class='text-center'>中</td>
-                <td class='text-center'>中</td>
-              </tr>
-              <tr>
-                <th scope="row">話題性</th>
-                <td class='text-center'>低</td>
-                <td class='text-center'>高</td>
-                <td class='text-center'>中</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="col-6">
-          <h2 class='Data-h2 fw-bold mt-5'>電影與其他影片類型比較</h2>
-          <p>工研院之微電影透過具有張力的劇情來傳達產品服的用途及核心價值，將其信念明確的表達出來，相比於一般的新聞專題影片的單向播報新聞資訊，較難引起觀眾的共鳴及留下印象。而相較於網紅活動推廣或是品牌影片較為簡短的情境示意，工研院之微電影的故事主軸較為明顯。除此之外，基於工研院微電影之偏技術面之特性，對於多數觀眾可能無法一時之間完全理解，故它所引起的話題討論度相比於網紅的品牌宣傳影片較低。</p>
+           
+              <p>綜觀而言，黑手阿爸與那些足球教我的事兩部影片於臉書的反應較為熱烈，主要是由於該兩則貼文皆有融合留言抽獎活動，因此，貼文的按讚數、觀看次數及留言數，皆有明顯的高聲量表現。
+                除此之外，貼文的標題以及開頭文字也是一大因素，從經濟部的GreenCampus
+                綠光篇貼文與其他貼文比較起來，由於其他的貼文標題及開頭皆是採用較為口語的文字敘述，像是與觀眾對話，較能夠吸引使用者繼續閱讀及觀看，因此在觀看數與按讚數都較高。
+                註:"愛是最短的距離---織足藏樂館"無臉書觀看次</p>
+            </div>
+          </div>
         </div>
       </div>
-      <div style="font-size: 20px; margin-top: -20px;" class='text-end me-3'>3</div>
-
+      <div class='pagenumber'><p>3</p></div>
     </div>
   </section>
 
@@ -863,7 +934,7 @@
       type: 'bar', //圖表類型
       data: {
         //標題
-        labels: ['黑手阿爸', '微電影 激「立」預告片', '那些足球教我的事', '愛是最短的距離---織足藏樂館', 'GreenCampus 綠光篇1', 'GreenCampus 綠光篇2'],
+        labels: ['黑手阿爸', ['微電影', '激「立」預告片'], '那些足球教我的事', ['愛是最短的距離', '---織足藏樂館'], ['GreenCampus ', '綠光篇1'], ['GreenCampus ', '綠光篇2']],
         datasets: [
           {
             label: 'like',
@@ -889,11 +960,12 @@
         indexAxis: 'y',
         plugins: {
           legend: {
-            display: false,
+            // display: false,
             labels: {
+              padding: 5,
               font: {
                 display: false,
-                size: 9,
+                size: 16,
               },
             },
           },

style.css

@@ -18,6 +18,11 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 
+p {
+  line-height: 1.5 !important;
+  letter-spacing: 0.5px;
+}
+
 .table-1 {
   font-size: 12px;
 }
@@ -36,12 +41,21 @@ time, mark, audio, video {
 }
 
 .Analytics-report-page {
-  border: 1px solid #000;
   height: 1123px;
   position: relative;
   overflow-y: hidden;
 }
 
+.Analytics-report-page .pagenumber {
+  position: absolute;
+  bottom: 10px;
+  right: 15px;
+}
+
+.Analytics-report-page .pagenumber p {
+  font-size: 24px;
+}
+
 .Analytics-report-page .Orange {
   width: 200px;
   top: -120px;
@@ -55,6 +69,19 @@ time, mark, audio, video {
   left: -100px;
 }
 
+.Analytics-report-page .Orange2 {
+  width: 130px;
+  top: -80px;
+  left: -40px;
+  z-index: 30;
+}
+
+.Analytics-report-page .Purple2 {
+  width: 150px;
+  top: -60px;
+  left: -100px;
+}
+
 #myChart {
   margin-top: 10px;
   margin: 0 auto !important;
@@ -112,6 +139,12 @@ li {
   margin-left: 20px;
 }
 
+@media print {
+  body {
+    -webkit-print-color-adjust: exact;
+  }
+}
+
 .Data-h2 {
   text-align: center;
   padding: .5rem;
@@ -126,7 +159,7 @@ li {
 }
 
 .choozmo {
-  width: 240px;
+  width: 200px;
 }
 
 .adv-type {
@@ -139,7 +172,7 @@ li {
 
 #myChart-bar {
   margin: 0 auto !important;
-  width: 450px !important;
-  height: 250px !important;
+  width: 600px !important;
+  height: 350px !important;
 }
 /*# sourceMappingURL=style.css.map */

style.scss

@@ -18,6 +18,10 @@ time, mark, audio, video {
 	font: inherit;
 	vertical-align: baseline;
 };
+p{
+	line-height: 1.5 !important;
+	letter-spacing: 0.5px;
+}
 .table-1{
 	font-size: 12px;
 }
@@ -32,10 +36,18 @@ time, mark, audio, video {
 	font-size: 20px;
 }
 .Analytics-report-page{
-	border:1px solid #000;
+	// border:1px solid #000;
 	height: 1123px;
 	position: relative;
 	overflow-y: hidden;
+	.pagenumber{
+		position: absolute;
+		bottom:10px;
+		right:15px;
+		p{
+			font-size: 24px;
+		}
+	}
 	.Orange{
 		width: 200px;
 		top:-120px;
@@ -49,6 +61,19 @@ time, mark, audio, video {
 		// z-index: 50;
 	
 	}
+	.Orange2{
+		width: 130px;
+		top:-80px;
+		left: -40px;
+		z-index: 30;
+	}
+	.Purple2{
+		width: 150px;
+		top:-60px;
+		left: -100px;
+		// z-index: 50;
+	
+	}
 }
 #myChart{	
 	margin-top: 10px;
@@ -99,11 +124,21 @@ li{
 	list-style: disc;
 	margin-left:20px;
 }
+@media print { 
+	body { 
+	 -webkit-print-color-adjust: exact; 
+
+	 
+	} 
+   }
+
 .Data-h2{
 	text-align: center;
 	padding: .5rem;
 	color:#fff;
 	background: linear-gradient(20deg, #EA5413, #920783);
+	
+	
 }
 .Analytics-report-title{
 	margin-left: auto;
@@ -113,7 +148,7 @@ li{
 
 
 .choozmo{
-	width: 240px;
+	width: 200px;
 }
 .adv-type{
 	margin-top: 15px;
@@ -123,8 +158,8 @@ li{
 }
 #myChart-bar{
 	margin: 0 auto !important;
-	width: 450px !important;
-	height: 250px !important;
+	width: 600px !important;
+	height: 350px !important;
 }
 // .Purple{
 // 	width: 200px;