新增组件

package.json

 {
-    "name": "million",
-    "version": "0.0.1",
-    "description": "tw",
-    "productName": "million app",
-    "cordovaId": "org.cordova.quasar.app",
-    "capacitorId": "",
-    "author": "罗超 <alex9012@vip.qq.com>",
-    "private": true,
-    "scripts": {
-        "test": "echo \"No test specified\" && exit 0",
-        "dev": "quasar dev -m ssr",
-        "build": "quasar build -m ssr",
-        "build:pwa": "quasar build -m pwa"
-    },
-    "dependencies": {
-        "@quasar/extras": "^1.0.0",
-        "axios": "^0.18.1",
-        "quasar": "^1.0.0",
-        "vue-i18n": "^8.0.0"
-    },
-    "devDependencies": {
-        "@quasar/app": "^1.0.0"
-    },
-    "engines": {
-        "node": ">= 10.18.1",
-        "npm": ">= 6.13.4",
-        "yarn": ">= 1.21.1"
-    },
-    "browserslist": [
-        "last 1 version, not dead, ie >= 11"
-    ]
-}
\ No newline at end of file
+  "name": "million",
+  "version": "0.0.1",
+  "description": "tw",
+  "productName": "million app",
+  "cordovaId": "org.cordova.quasar.app",
+  "capacitorId": "",
+  "author": "罗超 <alex9012@vip.qq.com>",
+  "private": true,
+  "scripts": {
+    "test": "echo \"No test specified\" && exit 0",
+    "dev": "quasar dev -m ssr",
+    "build": "quasar build -m ssr",
+    "build:pwa": "quasar build -m pwa"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.0.0",
+    "axios": "^0.18.1",
+    "qrcode.vue": "^1.7.0",
+    "qrcodejs2": "^0.0.2",
+    "quasar": "^1.0.0",
+    "vue-i18n": "^8.0.0"
+  },
+  "devDependencies": {
+    "@quasar/app": "^1.0.0"
+  },
+  "engines": {
+    "node": ">= 10.18.1",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
+  },
+  "browserslist": [
+    "last 1 version, not dead, ie >= 11"
+  ]
+}

quasar.conf.js

@@ -133,7 +133,9 @@ module.exports = function( /* ctx */ ) {
                 'QChip',
                 'QTab',
                 'QSelect',
-                'QVideo'
+                'QVideo',
+                'QImg',
+                'QResizeObserver'
             ],
 
             directives: [

src/App.vue

@@ -11,6 +11,10 @@ export default {
 </script>
 <style>
 @import url("//at.alicdn.com/t/font_1890699_yf7nftejbw.css");
+@font-face {
+  font-family: "oswald";
+  src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
+}
 body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
     Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
@@ -18,10 +22,16 @@ body {
     Microsoft JhengHei;
   background-color: #f6f6f6;
 }
+
 .section-block {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 20px;
+}
+@media only screen and (max-width: 1200px) {
+  .section-block {
+    max-width: 768px !important;
+    padding:0 20px !important;
+  }
 }
 </style>
\ No newline at end of file

src/components/about/about1.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="section-block about6">
+      <h2 class="about-title">段落標題 - 1x1</h2>
+      <ul class="about-list">
+        <li class="list-item">
+          <div
+            class="content"
+          >創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</div>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.about6 {
+  margin: 0 auto;
+  padding: 20px 0;
+}
+.about6 .about-title {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 25px;
+  font-weight: 600;
+
+  line-height: unset;
+}
+.about6 .about-list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.about6 .about-list .list-item:nth-child(odd) {
+  margin-right: 50px;
+}
+.about6 .about-list .list-item {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  padding-top: 15px;
+  flex: 1;
+  border-top: 3px solid #eee;
+}
+.about6 .about-list .list-item .content {
+  font-size: 16px;
+  line-height: 1.8;
+  color: #666;
+}
+@media only screen and (max-width: 800px) {
+  .about6 {
+    padding: 20px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .about6 .about-list {
+    display: block !important;
+  }
+  .about6 .about-list .list-item:nth-child(odd) {
+    margin-right: 0 !important;
+  }
+  .about6 .about-list .list-item {
+    margin-bottom: 30px !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/about/about2.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="section-block about4">
+      <h2 class="about-title">段落標題 - 2x1</h2>
+      <ul class="about-list">
+        <li class="list-item">
+          <h3 class="about-list-title">國外旅遊</h3>
+          <div
+            class="content"
+          >我們提供各國在地導遊精心設計的行程，不論是蜜月、家庭、親子還是企業旅遊，我們都有貼心適合您的行程，且不定時推出季節限定的秘密景點，讓您輕鬆遨遊世界各地。</div>
+        </li>
+        <li class="list-item">
+          <h3 class="about-list-title">國內旅遊</h3>
+          <div
+            class="content"
+          >精心安排多樣化的不論是國內行程，團體旅遊、環島遊、自由行、高鐵鐵路旅遊或租車遊，或是外島秘境，或是超高評價的主題旅遊如苗栗草莓季、賞櫻團、綠島溫泉、澎湖花火節，我們都提供最舒適驚喜的旅遊方式輕鬆玩遍台灣。</div>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.about4 {
+  margin: 0 auto;
+  padding: 20px 0;
+}
+.about4 .about-title {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 25px;
+  font-weight: 600;
+
+  line-height: unset;
+}
+.about4 .about-list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.about4 .about-list .list-item:nth-child(odd) {
+  margin-right: 50px;
+}
+.about4 .about-list .list-item {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  padding-top: 15px;
+  flex: 1;
+  border-top: 3px solid #eee;
+}
+.about4 .about-list .list-item .content {
+  font-size: 16px;
+  line-height: 1.8;
+  color: #666;
+}
+.about4 .about-list .list-item .about-list-title {
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  margin-bottom: 15px;
+  font-weight: 600;
+  line-height: unset;
+}
+@media only screen and (max-width: 800px) {
+  .about4 {
+    padding: 20px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .about4 .about-list {
+    display: block !important;
+  }
+  .about4 .about-list .list-item:nth-child(odd) {
+    margin-right: 0 !important;
+  }
+  .about4 .about-list .list-item {
+    margin-bottom: 30px !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/about/about3.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="section-block about5">
+      <h2 class="about-title">段落標題 - 2x2</h2>
+      <ul class="about-list">
+        <li class="list-item">
+          <h3 class="about-list-title">國外旅遊</h3>
+          <div
+            class="content"
+          >我們提供各國在地導遊精心設計的行程，不論是蜜月、家庭、親子還是企業旅遊，我們都有貼心適合您的行程，且不定時推出季節限定的秘密景點，讓您輕鬆遨遊世界各地。</div>
+        </li>
+        <li class="list-item">
+          <h3 class="about-list-title">國內旅遊</h3>
+          <div
+            class="content"
+          >精心安排多樣化的不論是國內行程，團體旅遊、環島遊、自由行、高鐵鐵路旅遊或租車遊，或是外島秘境，或是超高評價的主題旅遊如苗栗草莓季、賞櫻團、綠島溫泉、澎湖花火節，我們都提供最舒適驚喜的旅遊方式輕鬆玩遍台灣。</div>
+        </li>
+        <li class="list-item">
+          <h3 class="about-list-title">機票</h3>
+          <div class="content">提供各大航空公司國際機票訂位，20萬條航線、5000個機場機票查詢預訂服務，讓您快速搞定機位，規劃夢想旅途不再煩惱！</div>
+        </li>
+        <li class="list-item">
+          <h3 class="about-list-title">票券</h3>
+          <div
+            class="content"
+          >一次解決各種交通票券、美食餐券、泡湯券、季節主題票券、住宿券、滑雪體驗、主題樂園門票、Wifi上網、一日遊、多日遊票券，更不定期有特惠組合套票，輕鬆搭配免排隊！</div>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.about5 {
+  margin: 0 auto;
+  padding: 20px 0;
+}
+.about5 .about-title {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 25px;
+  font-weight: 600;
+
+  line-height: unset;
+}
+.about5 .about-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.about5 .about-list .list-item:nth-child(odd) {
+  margin-right: 50px;
+}
+.about5 .about-list .list-item {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  margin-bottom: 40px;
+  padding-top: 15px;
+  width: calc(50% - 25px);
+  border-top: 3px solid #eee;
+}
+.about5 .about-list .list-item .content {
+  font-size: 16px;
+  line-height: 1.8;
+  color: #666;
+}
+.about5 .about-list .list-item .about-list-title {
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  margin-bottom: 15px;
+  font-weight: 600;
+  line-height: unset;
+}
+@media only screen and (max-width: 800px) {
+  .about5 {
+    padding: 20px 20px 0 !important;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .about5 .about-list {
+    display: block !important;
+  }
+  .about5 .about-list .list-item:nth-child(odd) {
+    margin-right: 0 !important;
+  }
+  .about5 .about-list .list-item {
+    width: 100% !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/about/about4.vue

+<template>
+  <div class="q-mt-lg"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/components/about/center.vue

+<template>
+  <div class="q-mt-lg">
+    <section
+      class="about3"
+      style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_bg1.jpg');"
+    >
+      <div class="section-block">
+        <div class="about-main">
+          <h2 class="about-title">背景圖 - 文中</h2>
+          <div
+            class="about-content"
+          >創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.about3 {
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.about3 .section-block {
+  display: flex;
+  justify-content: center;
+}
+.about3::after {
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  content: "";
+  right: 0;
+  position: absolute;
+  bottom: 0;
+}
+.about3 .about-main {
+  position: relative;
+  padding: 100px 0;
+  z-index: 2;
+  width: 50%;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.about3 .about-main .about-title {
+  margin-bottom: 35px;
+  font-size: 38px;
+  margin: 0;
+  padding: 0;
+  line-height: unset;
+  font-weight: 600;
+}
+.about3 .about-main .about-content {
+  font-size: 16px;
+  line-height: 2.1;
+  margin: 0;
+  padding: 0;
+}
+@media only screen and (max-width: 1200px) {
+  .about3 .about-main {
+    padding-right: 30px !important;
+    padding-left: 30px !important;
+    width: 100% !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/about/left.vue

+<template>
+<div class="q-mt-lg">
+  <section
+    class="about1"
+    style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_bg1.jpg');"
+  >
+    <div class="section-block">
+      <div class="about-main">
+        <h2 class="about-title">背景圖 - 文左</h2>
+        <div
+          class="about-content"
+        >創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</div>
+      </div>
+    </div>
+  </section>
+</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.about1 {
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.about1::after {
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  content: "";
+  right: 0;
+  position: absolute;
+  bottom: 0;
+}
+.about1 .about-main {
+  position: relative;
+  padding: 100px 0;
+  z-index: 2;
+  width: 50%;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.about1 .about-main .about-title {
+  margin-bottom: 35px;
+  font-size: 38px;
+  margin: 0;
+  padding: 0;
+  line-height: unset;
+  font-weight: 600;
+}
+.about1 .about-main .about-content {
+  font-size: 16px;
+  line-height: 2.1;
+  margin: 0;
+  padding: 0;
+}
+@media only screen and (max-width: 1200px) {
+  .about1 .about-main {
+    padding-right: 30px !important;
+    padding-left: 30px !important;
+    width: 100% !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/about/right.vue

+<template>
+<div class="q-mt-lg">
+  <section
+    class="about2"
+    style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_bg1.jpg');"
+  >
+    <div class="section-block">
+      <div class="about-main">
+        <h2 class="about-title">背景圖 - 文右</h2>
+        <div
+          class="about-content"
+        >創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</div>
+      </div>
+    </div>
+  </section>
+</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.about2 {
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.about2 .section-block {
+    display: flex;
+    justify-content: flex-end;
+}
+.about2::after {
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  content: "";
+  right: 0;
+  position: absolute;
+  bottom: 0;
+}
+.about2 .about-main {
+  position: relative;
+  padding: 100px 0;
+  z-index: 2;
+  width: 50%;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.about2 .about-main .about-title {
+  margin-bottom: 35px;
+  font-size: 38px;
+  margin: 0;
+  padding: 0;
+  line-height: unset;
+  font-weight: 600;
+}
+.about2 .about-main .about-content {
+  font-size: 16px;
+  line-height: 2.1;
+  margin: 0;
+  padding: 0;
+}
+@media only screen and (max-width: 1200px) {
+  .about2 .about-main {
+    padding-right: 30px !important;
+    padding-left: 30px !important;
+    width: 100% !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/diy-module-img/diy-img-five.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="scence2 section-block">
+      <div class="content">
+        <h2 class="block-title"></h2>
+        <p class="title-teaser">需要下次旅程的靈感嗎？看看其他人都去哪些景點</p>
+      </div>
+      <div class="scence-wrap">
+        <ul class="scence-list">
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence1.jpg');"
+            >
+              <h4 class="scence-title">西班牙</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence3.jpg');"
+            >
+              <h4 class="scence-title">韓國</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence4.jpg');"
+            >
+              <h4 class="scence-title">荷蘭</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence5.jpg');"
+            >
+              <h4 class="scence-title">日本</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence6.jpg');"
+            >
+              <h4 class="scence-title">菲律賓</h4>
+            </a>
+          </li>
+          <!-- <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence6.jpg');"
+            >
+              <h4 class="scence-title">菲律賓</h4>
+            </a>
+          </li>-->
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+//圖片 - 4x1
+export default {};
+</script>
+
+<style>
+.scence2 {
+}
+.scence2 .block-title {
+  font-size: 22px;
+  font-weight: 600;
+  padding: 0;
+  margin: 0;
+  line-height: unset;
+}
+.scence2 .title-teaser {
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #999;
+}
+.scence2 .scence-wrap {
+  margin-top: 15px;
+}
+.scence2 .scence-list {
+  margin-left: -8px;
+  margin-right: -8px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+}
+.scence2 .scence-list > * {
+  padding: 0;
+  margin: 0;
+  display: block;
+  flex: 1;
+  margin: 8px;
+  transition: -webkit--webkit-transform 0.2s ease,
+    -webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
+    -webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
+    -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
+    box-shadow 0.2s ease;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
+}
+.scence2 .scence-list > *:last-child {
+  margin-right: 0px;
+}
+.scence2 .scence-list > * a {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 300px;
+  background-size: cover;
+  background-position: center;
+}
+.scence2 .scence-list > * a::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  height: 80px;
+  content: "";
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.02) 0,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+}
+.scence2 .scence-list > * a .scence-title {
+  position: absolute;
+  display: block;
+  padding: 0 16px 16px;
+  white-space: pre-wrap;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #fff;
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+  word-break: break-all;
+  z-index: 2;
+}
+.scence2 .scence-list > * {
+  display: block;
+  width: calc(25% - 16px);
+  margin: 8px;
+  transition: -webkit--webkit-transform 0.2s ease,
+    -webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
+    -webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
+    -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
+    box-shadow 0.2s ease;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
+}
+@media only screen and (min-width: 1200px) {
+  .scence2 .scence-list > * {
+    display: inline-block !important;
+    vertical-align: middle !important;
+    width: 180px !important;
+  }
+}
+@media only screen and (max-width: 800px) {
+  .scence2 {
+    margin-top: 40px;
+  }
+  .scence2 .scence-wrap {
+    margin-top: -12px;
+  }
+  .scence2 .scence-wrap {
+    height: 310px !important;
+    overflow: hidden !important;
+  }
+  .scence2 .scence-list {
+    padding-bottom: 30px !important;
+    width: 100% !important;
+    display: block !important;
+    white-space: nowrap !important;
+    overflow-y: scroll !important;
+  }
+  .scence2 .scence-list > * {
+    display: inline-block !important;
+    vertical-align: middle !important;
+    width: 180px !important;
+  }
+}
+</style>

src/components/diy-module-img/diy-img-four.vue

+<template>
+  <div class="q-mt-md">
+    <section class="pr1 section-block">
+      <div class="pr-banner-block">
+        <ul class="pr-banner-list">
+          <li>
+            <a
+              href="/"
+              title="冰島極光"
+              style="background-image: url('https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9829/pr1/9829pr11571996536_x68.png');"
+            ></a>
+          </li>
+          <li>
+            <a
+              href="/"
+              title="大阪美食"
+              style="background-image: url('https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9829/pr1/9829pr11571996579_x68.jpg');"
+            ></a>
+          </li>
+          <li>
+            <a
+              href="/"
+              title="繡球花特輯"
+              style="background-image: url('https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9829/pr1/9829pr11571996620_x68.jpg');"
+            ></a>
+          </li>
+          <li>
+            <a
+              href="/"
+              title="浪漫法國"
+              style="background-image: url('https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9829/pr1/9829pr11571996710_x68.jpg');"
+            ></a>
+          </li>
+        </ul>
+      </div>
+      <div class="pr-text-block">
+        <h2 class="block-title">熱門排行榜</h2>
+        <p class="title-teaser">看看大家都去哪些熱門景點</p>
+        <ul class="pr-text-list">
+          <li>
+            <a href="/">
+              <h3 class="pd-title">愛在北海道花火燦爛時~海洋公園、函館夜景、三大蟹、溫泉5日</h3>
+              <div class="price">
+                <small class="unit">NT$</small>36,800
+                <small class="unit">元起</small>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              <h3 class="pd-title">特選酷戀泰國～帝王蟹吃到飽、夢幻世界、羅馬劇場、河畔夜市5＋1日</h3>
+              <div class="price">
+                <small class="unit">NT$</small>16,999
+                <small class="unit">元起</small>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              <h3 class="pd-title">遇見內蒙古那達慕５日、敕勒川草原住星空蒙古包、銀肯響沙灣、成吉思汗陵</h3>
+              <div class="price">
+                <small class="unit">NT$</small>30,900
+                <small class="unit">元起</small>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              <h3 class="pd-title">秒購經典荷比法～羊角村、阿丹塔登頂、四大遊船、六特色餐9日</h3>
+              <div class="price">
+                <small class="unit">NT$</small>67,900
+                <small class="unit">元起</small>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+//圖片 - 4x1
+export default {};
+</script>
+
+<style>
+.pr1 {
+  padding: 20px 0;
+  display: flex;
+  flex-flow: row wrap;
+}
+.pr1 .pr-banner-block {
+  flex: 1;
+  flex-basis: 70%;
+  margin-right: 30px;
+}
+.pr1 .pr-banner-block .pr-banner-list {
+  font-size: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.pr1 .pr-banner-block .pr-banner-list li:nth-child(odd) {
+  margin-right: 20px;
+}
+.pr1 .pr-banner-block .pr-banner-list li:nth-child(-n + 2) {
+  margin-bottom: 20px;
+}
+.pr1 .pr-banner-block .pr-banner-list li {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(50% - 10px);
+}
+.pr1 .pr-banner-block .pr-banner-list li a {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: block;
+  width: 100%;
+  padding-bottom: 66.237%;
+  background-size: cover;
+  background-position: center;
+
+  transition: -webkit--webkit-transform 0.2s ease,
+    -webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
+    -webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
+    -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+.pr1 .pr-text-block {
+  padding: 25px 30px;
+  flex: 1;
+  flex-basis: calc(30% - 30px);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
+  background-color: #fff;
+  width: 100%;
+}
+.pr1 .block-title {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: unset;
+  padding: 0;
+  margin: 0;
+}
+.pr1 .title-teaser {
+  margin: 0;
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #999;
+  line-height: unset;
+  padding: 0;
+}
+.pr1 .pr-text-list {
+  border: 0;
+  vertical-align: baseline;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pr1 .pr-text-block .pr-text-list li {
+  display: block;
+  border-bottom: 1px solid #eee;
+  margin: 0;
+  padding: 0;
+}
+.pr1 .pr-text-block .pr-text-list li:last-child {
+  border: none;
+}
+.pr1 .pr-text-block .pr-text-list a {
+  padding: 10px 0;
+  display: block;
+  color: #333;
+  font-size: 16px;
+}
+.pr1 .pr-text-block .pr-text-list a .pd-title {
+  padding: 0;
+  margin: 0;
+  margin-bottom: 4px;
+  font-weight: 400;
+  line-height: unset;
+  font-size: 1.17em;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.pr1 .pr-text-block .pr-text-list .price {
+  text-align: right;
+  color: #00afff;
+  font-size: 20px;
+  font-weight: 700;
+  font-family: "oswald";
+}
+.pr1 .pr-text-block .pr-text-list .price .unit {
+  font-size: 14px;
+}
+@media only screen and (max-width: 1200px) {
+  .pr1 .pr-banner-block {
+    flex-basis: 100% !important;
+    margin-right: 0 !important;
+    margin-bottom: 20px !important;
+  }
+  .pr1 .pr-text-block .pr-text-list a {
+    display: flex !important;
+    padding: 12px 0 !important;
+  }
+  .pr1 .pr-text-block .pr-text-list a .pd-title {
+    width: calc(100% - 150px) !important;
+    margin-bottom: 0 !important;
+    white-space: nowrap !important;
+    text-overflow: ellipsis !important;
+    overflow: hidden !important;
+    word-break: break-all !important;
+  }
+  .pr1 .pr-text-block .pr-text-list .price {
+    width: 150px !important;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .pr1 .pr-banner-block {
+    margin-bottom: 10px !important;
+  }
+  .pr1 .pr-banner-block .pr-banner-list li {
+    width: 100% !important;
+    margin-right: 0 !important;
+    margin-bottom: 20px !important;
+  }
+}
+</style>

src/components/diy-module-img/diy-img-one.vue

 <template>
-  <div class="q-mt-lg">
+  <div>
     <section class="tour2 section-block">
       <h2 class="block-title">圖片 - 3x1</h2>
       <p class="title-teaser">看看大家都去哪些熱門景點</p>
@@ -85,6 +85,7 @@
 </template>
 
 <script>
+//圖片 - 3x1
 export default {};
 </script>
 
@@ -94,6 +95,9 @@ export default {};
 .tour2 .block-title {
   font-size: 22px;
   font-weight: 600;
+  padding:0;
+  margin:0;
+  line-height: unset;
 }
 .tour2 .title-teaser {
   margin-bottom: 10px;

src/components/diy-module-img/diy-img-six.vue

+<template>
+  <div class="q-mt-md section-block my-bg-grey">
+    <q-resize-observer @resize="onResize" />
+    <h2 class="block-title">圖片 - 6x1圓</h2>
+    <q-carousel
+      v-model="slide"
+      transition-prev="slide-right"
+      transition-next="slide-left"
+      swipeable
+      animated
+      control-color="primary"
+      navigation
+      padding
+      arrows
+      height="100%"
+      class="my-bg-grey text-black shadow-1 rounded-borders no-shadow"
+    >
+      <template v-for="(x, i) in showImages">
+        <q-carousel-slide :name="i" :key="i" class="column no-wrap">
+          <div class="row fit justify-start q-col-gutter no-wrap" :class="{'q-gutter-lg':x.length>1}">
+            <div style="flex:1" v-for="(y, yi) in x" :key="yi">
+              <q-img :img-style="{borderRadius:'50%'}" :ratio="1/1" :src="y.pic_url" />
+              <div class="q-mt-md" style="color: #666;text-align: center;font-weight: 400;">
+                  {{y.text}}
+              </div>
+            </div>
+          </div>
+        </q-carousel-slide>
+      </template>
+    </q-carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      slide: 0,
+      imgs: [
+        {
+          pic_url: "https://cdn.quasar.dev/img/mountains.jpg",
+          text:
+            "魅力歐洲～法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日"
+        },
+        {
+          pic_url: "https://cdn.quasar.dev/img/parallax1.jpg",
+          text: "夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日"
+        },
+        {
+          pic_url: "https://cdn.quasar.dev/img/parallax1.jpg",
+          text: "樂天世界塔水族館．景福宮韓服體驗．7017首爾路．東大門CHEF秀4日"
+        },
+        {
+          pic_url: "https://cdn.quasar.dev/img/mountains.jpg",
+          text:
+            "魅力歐洲～法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日"
+        },
+        {
+          pic_url: "https://cdn.quasar.dev/img/parallax1.jpg",
+          text: "夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日"
+        },
+        {
+          pic_url: "https://cdn.quasar.dev/img/parallax1.jpg",
+          text: "樂天世界塔水族館．景福宮韓服體驗．7017首爾路．東大門CHEF秀4日"
+        }
+      ],
+      showImages: []
+    };
+  },
+  methods: {
+    onResize(size) {
+      this.showImages = [];
+      if (size.width >= 800) {
+        let temp = [];
+        this.imgs.forEach((x, i) => {
+          temp.push(x);
+          if ((i > 0 && (i + 1) % 3 == 0) || i == this.imgs.length - 1) {
+            this.showImages.push(temp);
+            temp = [];
+          }
+        });
+        console.log(this.showImages);
+      } else if (size.width >= 560) {
+        let temp = [];
+        this.imgs.forEach((x, i) => {
+          temp.push(x);
+          if ((i > 0 && (i + 1) % 2 == 0) || i == this.imgs.length - 1) {
+            this.showImages.push(temp);
+            temp = [];
+          }
+        });
+      } else {
+        this.imgs.forEach((x, i) => {
+          let temp = [];
+          temp.push(x);
+          this.showImages.push(temp);
+        });
+      }
+      // {
+      //   width: 20 // width of container (in px)
+      //   height: 50 // height of container (in px)
+      // }
+    }
+  }
+};
+</script>
+
+<style>
+.my-bg-grey {
+  background: #f6f6f6;
+}
+.my-bg-grey .block-title {
+  font-size: 22px;
+  font-weight: 600;
+  padding:0;
+  margin:0;
+  line-height: unset;
+  text-align: center;
+  margin-top: 25px;
+}
+</style>
\ No newline at end of file

src/components/diy-module-img/diy-img-three.vue

+<template>
+  <div>
+    <section class="scence1 section-block">
+      <div class="content">
+        <h2 class="block-title">圖片 - 4x3</h2>
+        <p class="title-teaser">需要下次旅程的靈感嗎？看看其他人都去哪些景點</p>
+      </div>
+      <div class="scence-wrap">
+        <ul class="scence-list">
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence1.jpg');"
+            >
+              <h4 class="scence-title">西班牙</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence2.jpg');"
+            >
+              <h4 class="scence-title">峇里島</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence3.jpg');"
+            >
+              <h4 class="scence-title">韓國</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence4.jpg');"
+            >
+              <h4 class="scence-title">荷蘭</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence5.jpg');"
+            >
+              <h4 class="scence-title">日本</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence6.jpg');"
+            >
+              <h4 class="scence-title">菲律賓</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence7.jpg');"
+            >
+              <h4 class="scence-title">巴黎</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence8.jpg');"
+            >
+              <h4 class="scence-title">德國</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence9.jpg');"
+            >
+              <h4 class="scence-title">紐西蘭</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence10.jpg');"
+            >
+              <h4 class="scence-title">荷蘭</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence11.jpg');"
+            >
+              <h4 class="scence-title">澳洲</h4>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+              class="img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence12.jpg');"
+            >
+              <h4 class="scence-title">冰島</h4>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+//圖片 - 4x1
+export default {};
+</script>
+
+<style>
+.scence1 {
+}
+.scence1 .block-title {
+  font-size: 22px;
+  font-weight: 600;
+  padding: 0;
+  margin: 0;
+  line-height: unset;
+}
+.scence1 .title-teaser {
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #999;
+}
+.scence1 .scence-wrap {
+  margin-top: 15px;
+}
+.scence1 .scence-list {
+  margin-left: -8px;
+  margin-right: -8px;
+  display: flex;
+  flex-wrap: wrap;
+  padding:0;
+}
+.scence1 .scence-list > * {
+  padding: 0;
+  margin: 0;
+  display: block;
+  width: calc(25% - 16px);
+  margin: 8px;
+  transition: -webkit--webkit-transform 0.2s ease,
+    -webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
+    -webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
+    -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
+    box-shadow 0.2s ease;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
+}
+.scence1 .scence-list > *:last-child {
+  margin-right: 0px;
+}
+.scence1 .scence-list > * a {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-bottom: 44%;
+  background-size: cover;
+  border: 0;
+}
+.scence1 .scence-list > * a::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 50%;
+  content: "";
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.02) 0,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+}
+.scence1 .scence-list > * a .scence-title {
+  position: absolute;
+  display: block;
+  padding: 0 16px 16px;
+  white-space: pre-wrap;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #fff;
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+  word-break: break-all;
+}
+.scence1 .scence-list > * {
+  display: block;
+  width: calc(25% - 16px);
+  margin: 8px;
+  transition: -webkit--webkit-transform 0.2s ease,
+    -webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
+    -webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
+    -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
+    box-shadow 0.2s ease;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
+}
+@media only screen and (min-width: 1200px) {
+  .scence1 .scence-list > :hover {
+    transform: translate(0, -4px) !important;
+    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
+  }
+}
+@media only screen and (max-width: 800px) {
+  .scence1 .scence-wrap {
+    height: 135px !important;
+    overflow: hidden !important;
+  }
+  .scence1 .scence-list {
+    padding-bottom: 30px !important;
+    width: 100% !important;
+    display: block !important;
+    white-space: nowrap !important;
+    overflow-y: scroll !important;
+  }
+  .scence1 .scence-list > * {
+    display: inline-block !important;
+    vertical-align: middle !important;
+    width: 280px !important;
+  }
+}
+</style>

src/components/diy-module-img/diy-img-two.vue

+<template>
+  <div>
+    <section class="tour1 section-block">
+      <h2 class="block-title">圖片 - 4x1</h2>
+      <p class="title-teaser">看看大家都去哪些熱門景點</p>
+      <ul class="pd-list">
+        <li class="pd-box">
+          <a href="/" title="魅力歐洲～法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日" class="pd-link">
+            <div
+              class="pd-img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence1.jpg');"
+            >
+              <div class="pd-price">
+                <div class="price">
+                  8
+                  <small class="unit">天</small> 67,000
+                  <small class="unit">元起</small>
+                </div>
+              </div>
+            </div>
+            <div class="pd-content">
+              <h3 class="pd-title">魅力歐洲～法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日</h3>
+            </div>
+          </a>
+        </li>
+        <li class="pd-box">
+          <a href="/" title="夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日" class="pd-link">
+            <div
+              class="pd-img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence2.jpg');"
+            >
+              <div class="pd-price">
+                <div class="price">
+                  5
+                  <small class="unit">天</small> 25,900
+                  <small class="unit">元起</small>
+                </div>
+              </div>
+            </div>
+            <div class="pd-content">
+              <h3 class="pd-title">夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日</h3>
+            </div>
+          </a>
+        </li>
+        <li class="pd-box">
+          <a href="/" title="樂天世界塔水族館．景福宮韓服體驗．7017首爾路．東大門CHEF秀4日" class="pd-link">
+            <div
+              class="pd-img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence3.jpg');"
+            >
+              <div class="pd-price">
+                <div class="price">
+                  4
+                  <small class="unit">天</small> 20,900
+                  <small class="unit">元起</small>
+                </div>
+              </div>
+            </div>
+            <div class="pd-content">
+              <h3 class="pd-title">樂天世界塔水族館．景福宮韓服體驗．7017首爾路．東大門CHEF秀4日</h3>
+            </div>
+          </a>
+        </li>
+        <li class="pd-box">
+          <a href="/" class="pd-link">
+            <div
+              class="pd-img"
+              style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence4.jpg');"
+            >
+              <div class="pd-price">
+                <div class="price">
+                  10
+                  <small class="unit">天</small>
+                  65,900
+                  <small class="unit">元起</small>
+                </div>
+              </div>
+            </div>
+            <div class="pd-content">
+              <h3 class="pd-title">特選東北德～童話大道．柏林．小瑞士．羊角村．四世界遺產．雙遊船10日</h3>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script>
+//圖片 - 4x1
+export default {};
+</script>
+
+<style>
+.tour1 {
+}
+.tour1 .block-title {
+  font-size: 22px;
+  font-weight: 600;
+  padding:0;
+  margin:0;
+}
+.tour1 .title-teaser {
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #999;
+}
+.tour1 .pd-list {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 0;
+  margin: 0;
+}
+.tour1 .pd-list .pd-box {
+  padding: 0;
+  margin: 0;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  width: calc(25% - 15px);
+  border-radius: 3px;
+  background-clip: padding-box;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
+  transition: -webkit--webkit-transform 0.2s ease,
+    -webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
+    -webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
+    -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
+    box-shadow 0.2s ease;
+  background-color: #fff;
+  list-style: none;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.tour1 .pd-list .pd-box:last-child {
+  margin-right: 0px;
+}
+a {
+  text-decoration: none;
+  color: var(--q-color-primary);
+}
+.tour1 .pd-box .pd-img {
+  position: relative;
+  width: 100%;
+  padding-bottom: 66.237%;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  background-position: center;
+}
+.tour1 .pd-box .pd-img .pd-price {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 100%;
+  border-bottom: 4px solid var(--q-color-primary);
+  text-align: right;
+}
+.tour1 .pd-box .pd-img .pd-price .price {
+  display: inline-block;
+  padding: 4px 12px 0;
+  color: #fff;
+  font-size: 22px;
+  font-weight: 700;
+  background-color: var(--q-color-primary);
+  -webkit-border-radius: 5px 0 0;
+  -webkit-background-clip: padding-box;
+  -moz-border-radius: 5px 0 0;
+  -moz-background-clip: padding;
+  border-radius: 5px 0 0;
+  background-clip: padding-box;
+}
+.tour1 .pd-box .pd-img .pd-price .price small {
+  padding: 0 4px;
+  font-size: 14px;
+}
+.tour1 .pd-box .pd-content {
+  padding: 15px 15px 20px;
+}
+.tour1 .pd-box .pd-title {
+  font-size: 15px;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #333;
+}
+
+@media only screen and (max-width: 1200px) {
+  .tour1 .pd-list .pd-box {
+    flex-basis: calc(50% - 10px) !important;
+  }
+  .tour1 .pd-list .pd-box:nth-child(even) {
+    margin-right: 0 !important;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .pd-box:hover {
+    transform: translate(0, -4px) !important;
+    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
+  }
+}
+@media only screen and (max-width: 425px) {
+  .tour1 .pd-list .pd-box {
+    flex-basis: 100% !important;
+    margin-right: 0 !important;
+  }
+}
+</style>

src/components/qrcode/left.vue

+<template>
+  <div  class="q-mt-md">
+    <section class="qrcode1 section-block">
+      <a href="/" target="_blank" class="img">
+        <img
+          src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_qrcode.jpg"
+          alt="TripSaaS 官網"
+        />
+      </a>
+      <a href="/" target="_blank" class="img">
+        <img
+          src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_qrcode.jpg"
+          alt="TripSaaS 官網"
+        />
+      </a>
+      <div class="content">
+        <h2 class="block-title">QRcode - 左</h2>
+        <p class="title-teaser">
+          掃描 QR code 加入重游旅遊官方帳號，有任何需要我們都會在這邊為您一對一服務唷！
+          <br />加入重游開始一段美好旅行吧！
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+   
+<script>
+import QrcodeVue from "qrcode.vue";
+export default {
+  components: {
+    QrcodeVue
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+<style>
+.qrcode1 {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.qrcode1 .img {
+  display: block;
+  margin-right: 20px;
+  width: 180px;
+}
+a {
+  text-decoration: none;
+  color: var(--q-color-primary);
+}
+.qrcode1 .img img {
+  display: block;
+  width: 100%;
+  border: 0;
+  margin: 0;
+}
+.qrcode1 .content {
+  padding-left: 40px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+}
+.qrcode1 .block-title {
+  font-size: 22px;
+  font-weight: 600;
+  padding: 0;
+  margin: 0;
+  line-height: unset;
+}
+.qrcode1 .title-teaser {
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #999;
+}
+@media only screen and (max-width: 800px) {
+  .qrcode1 {
+    padding: 20px !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .qrcode1 .content {
+    padding-left: 0 !important;
+    width: 100% !important;
+    padding-top: 20px !important;
+    text-align: center !important;
+  }
+}
+@media only screen and (max-width: 480px) {
+  .qrcode1 .img {
+    width: calc(50% - 20px) !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/qrcode/right.vue

+<template>
+  <div class="q-mt-md">
+    <section class="qrcode2 section-block">
+      <div class="content">
+        <h2 class="block-title">QRcode - 右</h2>
+        <p class="title-teaser">
+          掃描 QR code 加入重游旅遊官方帳號，有任何需要我們都會在這邊為您一對一服務唷！
+          <br />加入重游開始一段美好旅行吧！
+        </p>
+      </div>
+      <a href="/" target="_blank" class="img">
+        <img
+          src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_qrcode.jpg"
+          alt="TripSaaS 官網"
+        />
+      </a>
+      <a href="/" target="_blank" class="img">
+        <img
+          src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_qrcode.jpg"
+          alt="TripSaaS 官網"
+        />
+      </a>
+    </section>
+  </div>
+</template>
+   
+<script>
+import QrcodeVue from "qrcode.vue";
+export default {
+  components: {
+    QrcodeVue
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+<style>
+.qrcode2 {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.qrcode2 .img {
+  display: block;
+  margin-right: 20px;
+  width: 180px;
+}
+a {
+  text-decoration: none;
+  color: var(--q-color-primary);
+}
+.qrcode2 .img img {
+  display: block;
+  width: 100%;
+  border: 0;
+  margin: 0;
+}
+.qrcode2 .content {
+  width: calc(100% - 400px);
+  padding-right: 40px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+}
+.qrcode2 .block-title {
+  font-size: 22px;
+  font-weight: 600;
+  padding: 0;
+  margin: 0;
+  line-height: unset;
+}
+.qrcode2 .title-teaser {
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #999;
+}
+@media only screen and (max-width: 800px) {
+  .qrcode2 {
+    padding: 20px !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .qrcode2 .content {
+    padding-right: 0 !important;
+    width: 100% !important;
+    padding-bottom: 20px !important;
+    text-align: center !important;
+  }
+}
+@media only screen and (max-width: 480px) {
+  .qrcode2 .img {
+    width: calc(50% - 20px) !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/videos/video-one.vue

@@ -38,7 +38,7 @@ export default {};
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  padding: 0 16px;
+  padding: 0 0;
 }
 .vedio1 > * {
   position: relative;

src/components/videos/video-two.vue

@@ -29,7 +29,7 @@ export default {};
   } */
 }
 .vedio2 {
-  padding: 0 16px;
+  padding: 0 0;
 }
 .vedio2 .vedio-wrap{
       position: relative;

src/pages/Index.vue

@@ -14,6 +14,19 @@
     <video-one></video-one>
     <!-- <video-two></video-two> -->
     <diy-img-one></diy-img-one>
+    <diy-img-two></diy-img-two>
+    <diy-img-three></diy-img-three>
+    <diy-img-four></diy-img-four>
+    <diy-img-five></diy-img-five>
+    <diy-img-six></diy-img-six>
+    <qr-left></qr-left>
+    <!-- <qr-right></qr-right> -->
+    <about-center></about-center>
+    <!-- <about-left></about-left>
+    <about-right></about-right> -->
+    <!-- <about1></about1> -->
+    <!-- <about2></about2> -->
+    <about3></about3>
   </q-page>
 </template>
 
@@ -32,6 +45,19 @@ import headStyle11 from "../components/swiper/style11";
 import videoOne from "../components/videos/video-one";
 import videoTwo from "../components/videos/video-two";
 import diyImgOne from "../components/diy-module-img/diy-img-one";
+import diyImgTwo from "../components/diy-module-img/diy-img-two";
+import diyImgThree from "../components/diy-module-img/diy-img-three";
+import diyImgFour from "../components/diy-module-img/diy-img-four";
+import diyImgFive from "../components/diy-module-img/diy-img-five";
+import diyImgSix from "../components/diy-module-img/diy-img-six";
+import qrLeft from "../components/qrcode/left";
+import qrRight from "../components/qrcode/right";
+import aboutLeft from "../components/about/left";
+import aboutRight from "../components/about/right";
+import aboutCenter from "../components/about/center";
+import about1 from "../components/about/about1";
+import about2 from "../components/about/about2";
+import about3 from "../components/about/about3";
 export default {
   name: "PageIndex",
   components: {
@@ -48,7 +74,20 @@ export default {
     headStyle11,
     videoOne,
     videoTwo,
-    diyImgOne
+    diyImgOne,
+    diyImgTwo,
+    diyImgThree,
+    diyImgFour,
+    diyImgFive,
+    diyImgSix,
+    qrLeft,
+    qrRight,
+    aboutLeft,
+    aboutRight,
+    aboutCenter,
+    about1,
+    about2,
+    about3
   },
   data() {
     return {