页面修改

src/components/label_background_article/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/label_background_article/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/label_background_article/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/label_link_paragraph/left.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="tour3 section-block">
+      <div class="pd-img">
+        <a
+          href="/"
+          title="大笨鐘"
+          style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence7.jpg');"
+        ></a>
+      </div>
+      <div class="pd-content">
+        <h2 class="block-title">段落連結 - 圖左</h2>
+        <p
+          class="title-teaser"
+        >鐘樓坐落在泰晤士河畔，是倫敦的標誌之一。於1859年5月31日建成，高320英尺（約合97.5公尺），是世界第三高鐘樓。外牆上有四面巨大的鐘表朝向東南西北四個方向，分針有14英尺長（約合4.27公尺），國會開會期間，鐘面會發出光芒。大本鐘直徑7公尺，重13.5公噸，為英國最大的鐘。 大笨鐘的命名來源眾說紛紜，有一種說法稱大笨鐘的名字來自於班傑明·豪爾爵士，他負責修建了西敏宮。 2009年6月1日，歡慶啟用150週年。2012年6月26日，英國政府宣布為慶祝伊麗莎白二世登基60周年，將大笨鐘所在的鐘樓正式改名為伊麗莎白塔</p>
+        <a href="/" class="wl-btn wl-btn-radius pd-link">了解更多資訊</a>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.tour3 {
+  display: flex;
+  padding: 20px 0;
+}
+.tour3 .pd-img {
+  flex-basis: 66%;
+}
+.tour3 .pd-img a {
+  padding-bottom: 66.237%;
+  background-size: cover;
+  background-position: center;
+  display: block;
+  width: 100%;
+  text-decoration: none;
+  color: var(--q-color-primary);
+}
+.tour3 .pd-content {
+  flex-basis: 34%;
+  padding: 10px 0 30px 30px;
+}
+.tour3 .pd-content .block-title {
+  margin-bottom: 20px;
+  font-size: 32px;
+  padding: 0;
+  margin: 0;
+  line-height: unset;
+  font-weight: 600;
+}
+.tour3 .pd-content .title-teaser {
+  margin-bottom: 20px;
+  color: #666;
+  line-height: 1.8;
+  font-size: 16px;
+}
+.tour3 .pd-content .pd-link {
+  background-color: var(--q-color-primary);
+  color: #fff;
+  padding: 12px 30px;
+  border-radius: 50px;
+  background-clip: padding-box;
+  font-size: 15px;
+}
+@media only screen and (max-width: 1200px) {
+  .tour3 {
+    display: block !important;
+  }
+  .tour3 .pd-img {
+    flex-basis: 100% !important;
+  }
+  .tour3 .pd-content {
+    padding: 20px 10px 30px !important;
+    flex-basis: 100% !important;
+  }
+  .tour3 .pd-content .block-title {
+    margin-bottom: 5px !important;
+  }
+}
+@media only screen and (max-width: 800px) {
+  .tour3 {
+    padding: 20px !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/label_link_paragraph/right.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="tour4 section-block">
+      <div class="pd-content">
+        <h2 class="block-title">段落連結 - 圖左</h2>
+        <p
+          class="title-teaser"
+        >鐘樓坐落在泰晤士河畔，是倫敦的標誌之一。於1859年5月31日建成，高320英尺（約合97.5公尺），是世界第三高鐘樓。外牆上有四面巨大的鐘表朝向東南西北四個方向，分針有14英尺長（約合4.27公尺），國會開會期間，鐘面會發出光芒。大本鐘直徑7公尺，重13.5公噸，為英國最大的鐘。 大笨鐘的命名來源眾說紛紜，有一種說法稱大笨鐘的名字來自於班傑明·豪爾爵士，他負責修建了西敏宮。 2009年6月1日，歡慶啟用150週年。2012年6月26日，英國政府宣布為慶祝伊麗莎白二世登基60周年，將大笨鐘所在的鐘樓正式改名為伊麗莎白塔</p>
+        <a href="/" class="wl-btn wl-btn-radius pd-link">了解更多資訊</a>
+      </div>
+      <div class="pd-img">
+        <a
+          href="/"
+          title="大笨鐘"
+          style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence7.jpg');"
+        ></a>
+      </div>
+      
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.tour4 {
+  display: flex;
+  padding: 20px 0;
+}
+.tour4 .pd-img {
+  flex-basis: 66%;
+}
+.tour4 .pd-img a {
+  padding-bottom: 66.237%;
+  background-size: cover;
+  background-position: center;
+  display: block;
+  width: 100%;
+  text-decoration: none;
+  color: var(--q-color-primary);
+}
+.tour4 .pd-content {
+      flex-basis: 34%;
+    padding: 10px 30px 30px 0;
+}
+.tour4 .pd-content .block-title {
+  margin-bottom: 20px;
+  font-size: 32px;
+  padding: 0;
+  margin: 0;
+  line-height: unset;
+  font-weight: 600;
+}
+.tour4 .pd-content .title-teaser {
+  margin-bottom: 20px;
+  color: #666;
+  line-height: 1.8;
+  font-size: 16px;
+}
+.tour4 .pd-content .pd-link {
+  background-color: var(--q-color-primary);
+  color: #fff;
+  padding: 12px 30px;
+  border-radius: 50px;
+  background-clip: padding-box;
+  font-size: 15px;
+}
+@media only screen and (max-width: 1200px) {
+  .tour4 {
+    display: block !important;
+  }
+  .tour4 .pd-img {
+    flex-basis: 100% !important;
+  }
+  .tour4 .pd-content {
+    padding: 20px 10px 30px !important;
+    flex-basis: 100% !important;
+  }
+  .tour4 .pd-content .block-title {
+    margin-bottom: 5px !important;
+  }
+}
+@media only screen and (max-width: 800px) {
+  .tour4 {
+    padding: 20px !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/label_link_picture/left.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="tour5 section-block">
+      <a
+        href="/"
+        title="波蘭"
+        class="pd-img"
+        style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence9.jpg');"
+      ></a>
+      <a
+        href="/"
+        title="波蘭"
+        class="pd-img"
+        style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence10.jpg');"
+      ></a>
+      <div class="pd-content">
+        <h2 class="block-title">圖片連結 - 圖左</h2>
+        <p
+          class="title-teaser"
+        >波蘭共和國（波蘭語：Rzeczpospolita Polska），簡稱波蘭，是位於中歐的共和制國家，北面瀕臨波羅的海，西面與德國接壤，南部與捷克和斯洛伐克為鄰，烏克蘭和白俄羅斯在東，東北部和立陶宛及俄羅斯加里寧格勒州接壤。面積312,679平方公里，位居歐洲第十；人口約3863萬人，位居歐洲第九。目前為歐盟、北約、聯合國、經濟合作與發展組織、世貿組織等國際組織的成員。</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.tour5 {
+  display: flex;
+  padding: 20px 0;
+  flex-wrap: wrap;
+}
+.tour5 > * {
+  display: block;
+  margin-right: 20px;
+  flex-basis: calc(33.333% - 15px);
+}
+.tour5 .pd-img::before {
+  content: "";
+  float: left;
+  padding-top: 100%;
+  box-sizing: border-box;
+}
+.tour5 .pd-img {
+  background-size: cover;
+  background-position: center;
+  text-decoration: none;
+  color: var(--q-color-primary);
+}
+.tour5 > :nth-child(3n) {
+  margin-right: 0;
+}
+.tour5 .pd-content .block-title {
+  font-size: 32px;
+  font-weight: 600;
+  padding: 0;
+  margin: 0;
+  line-height: unset;
+}
+.tour5 .pd-content .title-teaser {
+  font-size: 16px;
+  color: #666;
+  line-height: 1.8;
+  padding: 0;
+  margin: 0;
+}
+@media only screen and (max-width: 800px) {
+  .tour5 {
+    padding: 20px;
+  }
+}
+@media only screen and (max-width: 1200px) {
+  .tour5 > * {
+    flex-basis: calc(50% - 10px);
+    margin-bottom: 20px;
+  }
+  .tour5 > :nth-child(even) {
+    margin-right: 0;
+  }
+  .tour5 .pd-content {
+    padding: 0 10px;
+    margin-bottom: 0;
+    margin-right: 0;
+    flex-basis: 100%;
+  }
+}
+</style>
\ No newline at end of file

src/components/label_link_picture/right.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="tour6 section-block">
+      <div class="pd-content">
+        <h2 class="block-title">圖片連結 - 圖右</h2>
+        <p
+          class="title-teaser"
+        >波蘭共和國（波蘭語：Rzeczpospolita Polska），簡稱波蘭，是位於中歐的共和制國家，北面瀕臨波羅的海，西面與德國接壤，南部與捷克和斯洛伐克為鄰，烏克蘭和白俄羅斯在東，東北部和立陶宛及俄羅斯加里寧格勒州接壤。面積312,679平方公里，位居歐洲第十；人口約3863萬人，位居歐洲第九。目前為歐盟、北約、聯合國、經濟合作與發展組織、世貿組織等國際組織的成員。</p>
+      </div>
+      <a
+        href="/"
+        title="波蘭"
+        class="pd-img"
+        style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence9.jpg');"
+      ></a>
+      <a
+        href="/"
+        title="波蘭"
+        class="pd-img"
+        style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence10.jpg');"
+      ></a>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.tour6 {
+  display: flex;
+  padding: 20px 0;
+  flex-wrap: wrap;
+}
+.tour6 > * {
+  display: block;
+  margin-right: 20px;
+  flex-basis: calc(33.333% - 15px);
+}
+.tour6 .pd-img::before {
+  content: "";
+  float: left;
+  padding-top: 100%;
+  box-sizing: border-box;
+}
+.tour6 .pd-img {
+  background-size: cover;
+  background-position: center;
+  text-decoration: none;
+  color: var(--q-color-primary);
+}
+.tour6 > :nth-child(3n) {
+  margin-right: 0;
+}
+.tour6 .pd-content .block-title {
+  font-size: 32px;
+  font-weight: 600;
+  padding: 0;
+  margin: 0;
+  line-height: unset;
+}
+.tour6 .pd-content .title-teaser {
+  font-size: 16px;
+  color: #666;
+  line-height: 1.8;
+  padding: 0;
+  margin: 0;
+}
+@media only screen and (max-width: 800px) {
+  .tour6 {
+    padding: 20px;
+  }
+}
+@media only screen and (max-width: 1200px) {
+  .tour6 > * {
+    flex-basis: calc(50% - 10px) !important;
+    margin-bottom: 20px;
+  }
+  .tour6 > :nth-child(3n) {
+    margin-right: 0 !important;
+  }
+  .tour6 .pd-content {
+    padding: 0 10px !important;
+    margin-bottom: 20px !important;
+    margin-right: 0 !important;
+    flex-basis: 100% !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/label_other/diy-form.vue

+<template>
+  <div class="q-mt-lg">
+    <div class="form1 section-block">
+      <h2 class="block-title q-mb-lg">專人服務</h2>
+      <q-form @submit="onSubmit" class="q-gutter-md">
+        <div class="row q-gutter-xl desktop-only q-mb-lg q-pl-md">
+          <q-input
+            filled
+            v-model="params.name"
+            label="如何稱呼您"
+            class="col"
+            lazy-rules
+            :rules="[ val => val && val.length > 0 || '請填寫您的稱呼']"
+          />
+          <q-input
+            filled
+            v-model="params.phone"
+            label="聯絡電話"
+            class="col"
+            lazy-rules
+            :rules="[ val => val && val.length > 0 || '請填寫您的聯絡電話哦']"
+          />
+        </div>
+        <div class="row mobile-only q-mb-lg">
+          <q-input
+            filled
+            v-model="params.name"
+            label="如何稱呼您"
+            class="col"
+            lazy-rules
+            :rules="[ val => val && val.length > 0 || '請填寫您的稱呼']"
+          />
+        </div>
+        <div class="row mobile-only q-mb-lg">
+          <q-input
+            filled
+            v-model="params.phone"
+            label="聯絡電話"
+            class="col"
+            lazy-rules
+            :rules="[ val => val && val.length > 0 || '請填寫您的聯絡電話哦']"
+          />
+        </div>
+        <div class="row q-mb-lg">
+          <q-input
+            filled
+            v-model="params.eMail"
+            label="聯絡E-Mail"
+            type="email"
+            class="col"
+            lazy-rules
+            :rules="[ val => val && val.length > 0 || '請填寫您的聯絡E-Mail哦']"
+          />
+        </div>
+        <div class="row q-mb-lg">
+          <q-input filled v-model="params.remark" label="備註" class="col" type="textarea" />
+        </div>
+        <div class="row q-mb-lg">
+          <q-btn type="submit" unelevated color="primary" size="lg" label="送出" class="col" />
+        </div>
+      </q-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      params: {
+        name: "",
+        phone: "",
+        eMail: "",
+        remark: ""
+      }
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.$q.notify({
+        color: "green-4",
+        textColor: "white",
+        icon: "cloud_done",
+        message: "提交成功"
+      });
+    }
+  }
+};
+</script>
+
+<style>
+.form1 .block-title {
+  font-size: 24px;
+  font-weight: 600;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 30px;
+  line-height: unset;
+}
+</style>
\ No newline at end of file

src/components/label_other/diy-title.vue

+<template>
+  <div class="q-mt-lg">
+    <div class="title1">
+      <h2 class="title">標題</h2>
+      <div class="subtitle">Schloss Neuschwanstein</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.title1 {
+  text-align: center;
+  padding: 20px 0 0;
+}
+.title1 .title {
+  font-size: 33px;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  line-height: unset;
+  font-weight: 600;
+}
+.title1 .subtitle {
+  font-size: 16px;
+  color: #999;
+}
+</style>
\ No newline at end of file

src/components/label_other/downloadTable.vue

+<template>
+  <div class="q-mt-lg section-block download1">
+      <div class="group-title">國內旅遊自由行</div>
+    <q-markup-table class="" flat separator="vertical">
+      <thead>
+        <tr>
+          <th class="text-left my-th-head" style="width:100px">檔案下載</th>
+          <th class="text-left my-th-head">標題</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <q-btn
+              type="a"
+              href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317742_rsz.jpg"
+              target="_blank"
+              label="下載"
+              color="primary"
+            />
+          </td>
+          <td>
+            <a
+              href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317742_rsz.jpg"
+              target="_blank"
+            >✨澎湖自由行三日✨ 超優惠的澎湖又來囉！ 每個人團費只要$2020元喔</a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <q-btn
+              type="a"
+              href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317742_rsz.jpg"
+              target="_blank"
+              label="下載"
+              color="primary"
+            />
+          </td>
+          <td>
+            <a
+              href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317783_rsz.jpg"
+              target="_blank"
+            >✨北京五日✨ 還記得一路過關斬將，打怪上位 最後升職成「魏貴人」的魏瓔珞嗎！</a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <q-btn
+              type="a"
+              href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317742_rsz.jpg"
+              target="_blank"
+              label="下載"
+              color="primary"
+            />
+          </td>
+          <td>
+            <a
+              href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572318022_rsz.jpg"
+              target="_blank"
+            >2018澎湖花火節的時間出來了</a>
+          </td>
+        </tr>
+      </tbody>
+    </q-markup-table>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.my-th-head {
+  font-size: 18px !important;
+  font-weight: 600 !important;
+}
+.download1 .group-title {
+    margin: 0;
+    padding: 0;
+    line-height: unset;
+    margin-bottom: 20px;
+    font-size: 24px;
+    text-align: center;
+    font-weight: 600;
+    text-align: center;
+}
+</style>
\ No newline at end of file

src/components/label_other/empty.vue

+<template>
+  <div class="empty">&nbsp;</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.empty{
+    width: 100%;
+    height: 40px;
+}
+</style>
\ No newline at end of file

src/components/label_other/paragraph.vue

+<template>
+  <div class="q-mt-lg">
+    <div
+      class="section-block paragraph1"
+    >今天新天鵝堡（Schloss Neuschwanstein）和舊天鵝堡（Schloss Hohenschwangau）的所在地區，在中世紀建有四座古堡。到了19世紀，這些古堡已經是一片殘垣斷壁。其中一座稱為「前天鵝石城堡（舊天鵝堡）」，在1830年代由馬克西米利安二世（路德維希二世的父親）所下令建造的「高天鵝堡」取代。其西南方的另一座「女人石城堡」，也早已不復存在。剩下的兩座稱為「前高天鵝堡」和「後高天鵝堡」，就在現今新天鵝堡所在的位置上。新天鵝堡，位在德國巴伐利亞省福森市，在德國東南與奧地利的邊界上，城堡就蓋在隸屬阿爾卑斯山山脈一個近一千公尺高的山頂上。 路德維希二世決定在此地興建他的「夢幻城堡」，因此下令將前後高天鵝堡的廢墟炸掉，清除前後天鵝堡廢墟後在原址興建新天鵝堡。 在1868年5月15日在給作曲家華格納的信中，國王路德維希二世提到希望在前高地城堡的古堡廢墟上建造一座城堡，風格取自中世紀德國騎士城堡。路德維希建堡的啟發有幾個：一個是他父親馬克西米利安二世的早期建堡計劃；另一個更重要的啟發則是他在1867年前往埃森納赫旅行中和弟弟奧托一世共同遊覽的瓦爾特堡。天鵝堡中的歌劇廳（Saengersaal）和騎士浴室（Ritterbad）的設計就採用了瓦爾特堡的設計圖為藍本。此外路德維希還受到西班牙摩爾人建築風格的影響。他想把天鵝堡建成作曲家華格納作品中的幻想的日耳曼傳說世界。城堡的設計主要交付給劇場布景設計師克里斯蒂安·揚克（Christian Jank）設計。城堡中隨處可見典型的哥德式建築細節，而所有門窗、列柱迴廊則呈現巴洛克風格，主要廳堂的裝飾則是拜占庭式的瀝金濕壁畫。也許因為新天鵝堡的名字，整個城堡中所有的水龍頭以及家具和房間配飾都是形態各異、栩栩如生的天鵝造型。城堡內裝飾極其奢華，從天花板、燈飾、牆壁到日常用具，無一不是工匠精雕細琢之作。 國王路德維希最後在他自己建築的新天鵝堡中的逗留是他在1886年6月9日被軟禁時。他在1886年6月13日於施坦貝爾格湖逝死時，新天鵝堡還沒有完工。在17年的建築時間裡，他只逗留過172天，那時候只有三分之一的房間是完工的。國王路德維希從未想讓新天鵝堡公諸於眾，在他看來寧願將此堡毀壞，也不能讓它失去其神秘魅力。但是在他死後六個星期，城堡對外開放，並在旺季（六月到八月）接待每天達5000人。為了保證通順的參觀路線，一些房間在此後完工。其中包括王位廳（Thronsaal）的帶有巴伐利亞動物世界圖案的馬賽克地板。此地板有2百萬塊的小馬賽克石組成，工程歷時兩年之久。</div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.paragraph1 {
+  line-height: 2;
+  font-size: 17px;
+  padding: 20px 0;
+  color: #666;
+}
+</style>
\ No newline at end of file

src/components/label_other/photo.vue

+<template>
+  <section class="photo1 section-block">
+    <div class="photo">
+      <img src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_banner7.jpg" alt />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.photo1 .photo {
+    margin: 20px 0;
+    text-align: center;
+}
+.photo1 .photo img {
+    width: 100%;
+}
+</style>
\ No newline at end of file

src/components/label_paragraph_title/paragraph-after.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="about9">
+      <div class="about-img">
+        <div
+          class="img"
+          style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_about3.jpg');"
+        ></div>
+      </div>
+      <div class="about-main">
+        <div class="about-inner">
+          <h2 class="about-title">段落標題 - 圖後</h2>
+          <div class="about-sub-title">劉愷琦</div>
+          <div
+            class="about-content"
+          >畢業於舊金山大學運動休閒管理系，擁有十年以上旅遊相關經歷，不僅年紀輕輕就成立自己的旅遊體驗公司，並出版多本旅遊相關書籍，不時舉辦各面向旅遊商務講座及課程，期盼能藉由旅遊幫助人們打破日常框架，體驗各種自然人文，拓展生活視野新思路。</div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.about9 {
+  padding: 20px 0;
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1200px;
+}
+.about9 > * {
+  flex: 1;
+}
+.about9 .about-img .img {
+  width: 110%;
+  background-size: cover;
+  padding-bottom: 70%;
+  background-position: center;
+}
+.about9 .about-inner {
+  padding: 50px;
+  background-color: #fff;
+  transform: translate(-40px, 40px);
+}
+.about9 .about-inner .about-title {
+  font-size: 25px;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  line-height: unset;
+  font-weight: 600;
+  border-bottom: 2px solid #eee;
+}
+.about9 .about-inner .about-sub-title {
+  font-size: 19px;
+  margin-bottom: 5px;
+  margin: 0;
+  padding: 0;
+  line-height: unset;
+  font-weight: 600;
+}
+body.large .about9 .about-inner .about-content {
+  font-size: 16px;
+  color: #666;
+  line-height: 1.8;
+}
+
+@media only screen and (max-width: 800px) {
+  .about9 {
+    padding: 20px !important;
+  }
+}
+@media only screen and (max-width: 1200px) {
+  .about9 {
+    display: block !important;
+    max-width: 768px !important;
+  }
+  .about9 .about-img .img {
+    width: 100% !important;
+  }
+  .about9 .about-inner {
+    transform: translate(0) !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/label_paragraph_title/paragraph-left.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="about7 section-block">
+      <div
+        class="pd-img"
+        style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_about1.jpg');"
+      ></div>
+      <div
+        class="pd-img"
+        style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_about2.jpg');"
+      ></div>
+      <div class="pd-content">
+        <h2 class="block-title">段落標題 - 圖左</h2>
+        <p
+          class="title-teaser"
+        >創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.about7 {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px 0;
+}
+.about7 .pd-img {
+  background-size: cover;
+  background-position: center;
+}
+.about7 > * {
+  display: block;
+  margin-right: 40px;
+  flex-basis: calc(33.333% - 27px);
+}
+.about7 > ::before {
+  content: "";
+  float: left;
+  padding-top: 100%;
+}
+.about7 > :nth-child(3n) {
+  margin-right: 0;
+}
+.about7 .pd-content .block-title {
+  font-size: 33px;
+  margin-bottom: 20px;
+  margin: 0;
+  padding: 0;
+  line-height: unset;
+  font-weight: 600;
+}
+.about7 .pd-content .title-teaser {
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #999;
+}
+@media only screen and (max-width: 800px) {
+  .about7 {
+    padding: 20px !important;
+  }
+}
+@media only screen and (max-width: 1200px) {
+  .about7 > * {
+    margin-right: 20px !important;
+    flex-basis: calc(50% - 10px) !important;
+    margin-bottom: 30px !important;
+  }
+  .about7 .pd-content {
+    margin-bottom: 0 !important;
+    margin-right: 0 !important;
+    flex-basis: 100% !important;
+  }
+  .about7>:nth-child(even) {
+    margin-right: 0 !important;
+}
+}
+</style>
\ No newline at end of file

src/components/label_paragraph_title/paragraph-right.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="about8 section-block">
+      <div class="pd-content">
+        <h2 class="block-title">段落標題 - 圖右</h2>
+        <p
+          class="title-teaser"
+        >創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</p>
+      </div>
+      <div
+        class="pd-img"
+        style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_about1.jpg');"
+      ></div>
+      <div
+        class="pd-img"
+        style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_about2.jpg');"
+      ></div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.about8 {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px 0;
+}
+.about8 .pd-img {
+  background-size: cover;
+  background-position: center;
+}
+.about8 > * {
+  display: block;
+  margin-right: 40px;
+  flex-basis: calc(33.333% - 27px);
+}
+.about8 .pd-img::before {
+    content: '';
+    float: left;
+    padding-top: 100%;
+}
+.about8 > :nth-child(3n) {
+  margin-right: 0 !important;
+}
+.about8 .pd-content .block-title {
+  font-size: 33px;
+  margin-bottom: 20px;
+  margin: 0;
+  padding: 0;
+  line-height: unset;
+  font-weight: 600;
+}
+.about8 .pd-content .title-teaser {
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #999;
+}
+@media only screen and (max-width: 800px) {
+  .about8 {
+    padding: 20px !important;
+  }
+}
+@media only screen and (max-width: 1200px) {
+  .about8 .pd-content {
+    margin-bottom: 30px !important;
+    margin-right: 0 !important;
+    flex-basis: 100% !important;
+  }
+  .about8 > * {
+    margin-right: 20px !important;
+    flex-basis: calc(50% - 10px) !important;
+    margin-bottom: 20px !important;
+  }
+}
+</style>
\ No newline at end of file

src/components/label_paragraph_title/paragraph1.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/label_paragraph_title/paragraph2.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/label_paragraph_title/paragraph3.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/label_picture/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/label_picture/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/label_picture/diy-img-one.vue

+<template>
+  <div>
+    <section class="tour2 section-block">
+      <h2 class="block-title">圖片 - 3x1</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>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script>
+//圖片 - 3x1
+export default {};
+</script>
+
+<style>
+.tour2 {
+}
+.tour2 .block-title {
+  font-size: 22px;
+  font-weight: 600;
+  padding:0;
+  margin:0;
+  line-height: unset;
+}
+.tour2 .title-teaser {
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #999;
+}
+.tour2 .pd-list {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 0;
+  margin: 0;
+}
+.tour2 .pd-list .pd-box {
+  padding: 0;
+  margin: 0;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  flex-basis: calc(33.333% - 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;
+}
+.tour2 .pd-list .pd-box:last-child {
+  margin-right: 0px;
+}
+a {
+  text-decoration: none;
+  color: var(--q-color-primary);
+}
+.tour2 .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;
+}
+.tour2 .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;
+}
+.tour2 .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;
+}
+.tour2 .pd-box .pd-img .pd-price .price small {
+  padding: 0 4px;
+  font-size: 14px;
+}
+.tour2 .pd-box .pd-content {
+  padding: 15px 15px 20px;
+}
+.tour2 .pd-box .pd-title {
+  font-size: 15px;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #333;
+}
+
+@media only screen and (max-width: 1200px) {
+  .tour2 .pd-list .pd-box {
+    flex-basis: calc(50% - 10px) !important;
+  }
+  .tour2 .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) {
+  .tour2 .pd-list .pd-box {
+    flex-basis: 100% !important;
+    margin-right: 0 !important;
+  }
+}
+</style>

src/components/label_picture/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/label_picture/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/label_picture/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/label_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/label_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/label_slider/big.vue

+<template>
+  <q-carousel
+    v-model="slide"
+    transition-prev="slide-right"
+    transition-next="slide-left"
+    :autoplay="5000"
+    swipeable
+    animated
+    control-color="white"
+    padding
+    arrows
+    infinite
+    height="470px"
+    class="bg-primary text-white shadow-1 q-mt-lg q-mb-xl"
+  >
+    <q-carousel-slide
+      v-for="(x, i) in swipers"
+      :key="i"
+      @click="clickSlideHandler(x.path)"
+      :name="i"
+      :img-src="x.pic_url"
+    />
+  </q-carousel>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      slide: 0,
+      swipers: [
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
+          path:
+            "https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500802_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500810_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500763_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500815_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500828_rsz.jpg",
+          path: "/"
+        }
+      ]
+    };
+  },
+  methods: {
+    clickSlideHandler(url) {
+      if (url && url.length > 1) {
+        location.href = url;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/components/label_slider/small.vue

+<template>
+  <q-carousel
+    v-model="slide"
+    transition-prev="slide-right"
+    transition-next="slide-left"
+    :autoplay="5000"
+    swipeable
+    animated
+    control-color="white"
+    padding
+    arrows
+    infinite
+    height="235px"
+    class="bg-primary text-white shadow-1 q-mt-lg q-mb-xl"
+  >
+    <q-carousel-slide
+      v-for="(x, i) in swipers"
+      :key="i"
+      @click="clickSlideHandler(x.path)"
+      :name="i"
+      :img-src="x.pic_url"
+    />
+  </q-carousel>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      slide: 0,
+      swipers: [
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
+          path:
+            "https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500802_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500810_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500763_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500815_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500828_rsz.jpg",
+          path: "/"
+        }
+      ]
+    };
+  },
+  methods: {
+    clickSlideHandler(url) {
+      if (url && url.length > 1) {
+        location.href = url;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/components/label_video/video-one.vue

+<template>
+<div class="q-mt-lg">
+  <section class="vedio1 section-block">
+    <div class="vedio-wrap">
+      <div class="vedio">
+        <q-video class="iframe" src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0" />
+      </div>
+    </div>
+    <div class="content">
+      <h2 class="block-title">影片 - 1</h2>
+      <p
+        class="block-desc"
+      >創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</p>
+    </div>
+  </section>
+</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+@media only screen and (max-width: 1200px) {
+  .vedio1 > * {
+    width: 100% !important;
+  }
+  .vedio1 .content {
+    padding-top: 0px !important;
+    padding-left: 0 !important;
+    margin: 0 !important;
+  }
+  .vedio1 .content .block-title {
+    margin: 0 !important;
+  }
+}
+.vedio1 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0 0;
+}
+.vedio1 > * {
+  position: relative;
+  width: 50%;
+}
+.vedio1 .vedio {
+  overflow: hidden;
+  padding-top: 56.25%;
+  position: relative;
+}
+.vedio1 .vedio .iframe {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.vedio1 .content {
+  padding-left: 40px;
+}
+.vedio1 .content .block-title {
+  font-size: 25px;
+  margin-bottom: 0px;
+  font-weight:600;
+}
+.vedio1 .content .block-desc {
+  line-height: 1.8;
+  font-size: 16px;
+  color: #666;
+}
+</style>
\ No newline at end of file

src/components/label_video/video-two.vue

+<template>
+  <div class="q-mt-lg">
+    <section class="vedio2 section-block">
+      <div class="vedio-wrap">
+        <div class="vedio">
+          <q-video class="iframe" src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0" />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+@media only screen and (max-width: 1200px) {
+  /* .vedio1 > * {
+    width: 100% !important;
+  }
+  .vedio1 .content {
+    padding-top: 0px !important;
+    padding-left: 0 !important;
+    margin: 0 !important;
+  }
+  .vedio1 .content .block-title {
+    margin: 0 !important;
+  } */
+}
+.vedio2 {
+  padding: 0 0;
+}
+.vedio2 .vedio-wrap{
+      position: relative;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 800px;
+}
+.vedio2 .vedio {
+    overflow: hidden;
+    padding-top: 56.25%;
+    position: relative;
+}
+.vedio2 .vedio .iframe {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+</style>
\ No newline at end of file

src/components/search_b/style4.vue

+<template>
+  <div style="margin-top:-60px">
+    <q-carousel
+      v-model="slide"
+      :autoplay="5000"
+      swipeable
+      animated
+      control-color="white"
+      padding
+      infinite
+      height="550px"
+      class="bg-primary text-white shadow-1"
+    >
+      <q-carousel-slide
+        v-for="(x, i) in swipers"
+        :key="i"
+        @click="clickSlideHandler(x.path)"
+        :name="i"
+        :img-src="x.pic_url"
+      />
+    </q-carousel>
+  </div>
+</template>
+
+<script>
+import popup from "../props/index";
+export default {
+  //搜索区块（Banner）-轮播淡出
+  components: {
+    popup
+  },
+  data() {
+    return {
+      slide: 0,
+      swipers: [
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
+          path:
+            "https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500802_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500810_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500763_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500815_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500828_rsz.jpg",
+          path: "/"
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.$root.$emit("change-head-style", 2);
+  },
+  methods: {
+    clickSlideHandler(url) {
+      if (url && url.length > 1) {
+        location.href = url;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.showbox {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  height: 345px;
+  background: #fff;
+  left: 0;
+  top: 56px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+}
+.showspbox {
+  position: absolute;
+  box-sizing: border-box;
+  width: calc(41.6667% - 22px);
+  height: 345px;
+  background: #fff;
+  left: 0;
+  top: 56px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+}
+.my-menu-link {
+  background-color: rgb(237, 237, 237) !important;
+}
+.area-box .h3 {
+  font-size: 22px;
+  color: #333;
+  font-weight: 600;
+  padding: 0;
+  height: unset;
+  list-style: unset;
+  margin: 0;
+  cursor: pointer;
+}
+.area-box .h4 {
+  font-size: 18px;
+  color: #424242;
+  padding: 0;
+  height: unset;
+  list-style: unset;
+  margin: 0;
+  margin-right: 20px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.area-box .h5 {
+  font-size: 16px;
+  color: #636363;
+  padding: 0;
+  height: unset;
+  list-style: unset;
+  margin: 0;
+  margin-right: 12px;
+  cursor: pointer;
+}
+.area-box .h6 {
+  font-size: 14px;
+  color: gray;
+  padding: 0;
+  height: unset;
+  list-style: unset;
+  margin: 0;
+  text-align: right;
+  cursor: pointer;
+}
+.area-box .h6:hover,
+.area-box .h5:hover,
+.area-box .h4:hover,
+.area-box .h3:hover {
+  color: var(--q-color-primary);
+}
+.area-box .to-end {
+  align-items: flex-end;
+}
+.chosen-box {
+  padding: 15px;
+  min-height: 30vh;
+}
+.chosen-box .title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #111;
+  margin-bottom: 5px;
+}
+.chosen-box .split-word{
+  font-size:15px;
+  color:#333;
+  line-height:56px;
+}
+</style>
\ No newline at end of file

src/components/search_b/style5.vue

+<template>
+  <div style="margin-top:-60px">
+    <q-carousel
+      v-model="slide"
+      :autoplay="5000"
+      swipeable
+      animated
+      control-color="white"
+      padding
+      arrows
+      navigation
+      transition-prev="slide-right"
+      transition-next="slide-left"
+      infinite
+      height="666px"
+      class="bg-primary text-white shadow-1"
+    >
+      <q-carousel-slide
+        v-for="(x, i) in swipers"
+        :key="i"
+        @click="clickSlideHandler(x.path)"
+        :name="i"
+        :img-src="x.pic_url"
+      />
+    </q-carousel>
+  </div>
+</template>
+
+<script>
+import popup from "../props/index";
+export default {
+  //搜索区块（Banner）-轮播横
+  components: {
+    popup
+  },
+  data() {
+    return {
+      slide: 0,
+      swipers: [
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
+          path:
+            "https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500802_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500810_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500763_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500815_rsz.jpg",
+          path: "/"
+        },
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500828_rsz.jpg",
+          path: "/"
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.$root.$emit("change-head-style", 2);
+  },
+  methods: {
+    clickSlideHandler(url) {
+      if (url && url.length > 1) {
+        location.href = url;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.showbox {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  height: 345px;
+  background: #fff;
+  left: 0;
+  top: 56px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+}
+.showspbox {
+  position: absolute;
+  box-sizing: border-box;
+  width: calc(41.6667% - 22px);
+  height: 345px;
+  background: #fff;
+  left: 0;
+  top: 56px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+}
+.my-menu-link {
+  background-color: rgb(237, 237, 237) !important;
+}
+.area-box .h3 {
+  font-size: 22px;
+  color: #333;
+  font-weight: 600;
+  padding: 0;
+  height: unset;
+  list-style: unset;
+  margin: 0;
+  cursor: pointer;
+}
+.area-box .h4 {
+  font-size: 18px;
+  color: #424242;
+  padding: 0;
+  height: unset;
+  list-style: unset;
+  margin: 0;
+  margin-right: 20px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.area-box .h5 {
+  font-size: 16px;
+  color: #636363;
+  padding: 0;
+  height: unset;
+  list-style: unset;
+  margin: 0;
+  margin-right: 12px;
+  cursor: pointer;
+}
+.area-box .h6 {
+  font-size: 14px;
+  color: gray;
+  padding: 0;
+  height: unset;
+  list-style: unset;
+  margin: 0;
+  text-align: right;
+  cursor: pointer;
+}
+.area-box .h6:hover,
+.area-box .h5:hover,
+.area-box .h4:hover,
+.area-box .h3:hover {
+  color: var(--q-color-primary);
+}
+.area-box .to-end {
+  align-items: flex-end;
+}
+.chosen-box {
+  padding: 15px;
+  min-height: 30vh;
+}
+.chosen-box .title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #111;
+  margin-bottom: 5px;
+}
+.chosen-box .split-word{
+  font-size:15px;
+  color:#333;
+  line-height:56px;
+}
+</style>
\ No newline at end of file

src/components/search_b/style6.vue

+<template>
+  <div>
+    <div
+      class="banner-style6 desktop-only"
+      :style="{backgroundImage:`url('${swipers[0].pic_url}')`}"
+      @click="clickSlideHandler(swipers[0].path)"
+    ></div>
+    <div
+      class="banner-style6 mobile-only"
+      :style="{paddingBottom:'80%',backgroundImage:`url('${swipers[0].pic_url}')`}"
+      @click="clickSlideHandler(swipers[0].path)"
+    ></div>
+  </div>
+</template>
+
+<script>
+import popup from "../props/index";
+export default {
+  //搜索区块（Banner）-无轮播（大）
+  components: {
+    popup
+  },
+  data() {
+    return {
+      slide: 0,
+      swipers: [
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
+          path:
+            "https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.$root.$emit("change-head-style", 2);
+  },
+  methods: {
+    clickSlideHandler(url) {
+      if (url && url.length > 1) {
+        location.href = url;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.banner-style6 {
+  margin-top: -60px;
+  width: 100%;
+  background-color: #f1f1f1;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding-bottom:30%;
+}
+</style>
\ No newline at end of file

src/components/search_b/style7.vue

+<template>
+  <div>
+    <div
+      class="banner-style6 desktop-only"
+      :style="{backgroundImage:`url('${swipers[0].pic_url}')`}"
+      @click="clickSlideHandler(swipers[0].path)"
+    ></div>
+    <div
+      class="banner-style6 mobile-only"
+      :style="{paddingBottom:'80%',backgroundImage:`url('${swipers[0].pic_url}')`}"
+      @click="clickSlideHandler(swipers[0].path)"
+    ></div>
+  </div>
+</template>
+
+<script>
+import popup from "../props/index";
+export default {
+  //搜索区块（Banner）-无轮播（中）
+  components: {
+    popup
+  },
+  data() {
+    return {
+      slide: 0,
+      swipers: [
+        {
+          pic_url:
+            "https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
+          path:
+            "https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.$root.$emit("change-head-style", 2);
+  },
+  methods: {
+    clickSlideHandler(url) {
+      if (url && url.length > 1) {
+        location.href = url;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.banner-style6 {
+  margin-top: -60px;
+  width: 100%;
+  background-color: #f1f1f1;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding-bottom:25%;
+}
+</style>
\ No newline at end of file

src/pages/Index.vue

@@ -29,12 +29,12 @@
     <about-center></about-center>
     <!-- <about-left></about-left>
     <about-right></about-right> -->
-    <!-- <about1></about1> -->
-    <!-- <about2></about2> -->
-    <about3></about3>
-    <!-- <about4></about4> -->
-    <!-- <about5></about5> -->
-    <about6></about6>
+    <!-- <paragraph1></paragraph1> -->
+    <!-- <paragraph2></paragraph2> -->
+    <paragraph3></paragraph3>
+    <!-- <paragraph-left></paragraph-left> -->
+    <!-- <paragraph-right></paragraph-right> -->
+    <paragraph-after></paragraph-after>
     <!-- <plink-left></plink-left> -->
     <plink-right></plink-right>
     <!-- <ilink-left></ilink-left> -->
@@ -74,14 +74,14 @@ import videoOne from "../components/label_video/video-one";
 import videoTwo from "../components/label_video/video-two";
 //自訂版型(影片)white_label_video -End
 
-//自訂版型(圖片) white_label_picture -Start
+//自訂版型(圖片)和挑選自有行程(圖片) white_label_picture和b2b -Start
 import diyImgOne from "../components/label_picture/diy-img-one";
 import diyImgTwo from "../components/label_picture/diy-img-two";
 import diyImgThree from "../components/label_picture/diy-img-three";
 import diyImgFour from "../components/label_picture/diy-img-four";
 import diyImgFive from "../components/label_picture/diy-img-five";
 import diyImgSix from "../components/label_picture/diy-img-six";
-//自訂版型(圖片) white_label_picture -End
+//自訂版型(圖片)和挑選自有行程(圖片) white_label_picture和b2b -End
 
 //自訂版型(QRcode)white_label_qrcode -Start
 import qrLeft from "../components/label_qrcode/left";
@@ -95,23 +95,23 @@ import aboutCenter from "../components/label_background_article/center";
 //自訂版型(背景圖)white_label_background_article  -ENd
 
 //自訂版型(段落標題)white_label_paragraph_title  -Start
-import about1 from "../components/label_paragraph_title/about1";
-import about2 from "../components/label_paragraph_title/about2";
-import about3 from "../components/label_paragraph_title/about3";
-import about4 from "../components/label_paragraph_title/about4";
-import about5 from "../components/label_paragraph_title/about5";
-import about6 from "../components/label_paragraph_title/about6";
+import paragraph1 from "../components/label_paragraph_title/paragraph1";
+import paragraph2 from "../components/label_paragraph_title/paragraph2";
+import paragraph3 from "../components/label_paragraph_title/paragraph3";
+import paragraphleft from "../components/label_paragraph_title/paragraph-left";
+import paragraphright from "../components/label_paragraph_title/paragraph-right";
+import paragraphafter from "../components/label_paragraph_title/paragraph-after";
 //自訂版型(段落標題)white_label_paragraph_title  -End
 
-//自訂版型(段落連結)white_label_link_paragraph -Start
+//自訂版型(段落連結)和挑選自有行程(段落連結)white_label_link_paragraph和b2b_LinkP -Start
 import plinkLeft from "../components/label_link_paragraph/left";
 import plinkRight from "../components/label_link_paragraph/right";
-//自訂版型(段落連結)white_label_link_paragraph -End
+//自訂版型(段落連結)和挑選自有行程(段落連結)white_label_link_paragraph和b2b_LinkP -End
 
-//自訂版型(圖片連結)white_label_link_picture -Start
+//自訂版型(圖片連結)和挑選自有行程(圖片連結)white_label_link_picture和b2b_LinkPicture -Start
 import ilinkLeft from "../components/label_link_picture/left";
 import ilinkRight from "../components/label_link_picture/right";
-//自訂版型(圖片連結)white_label_link_picture -End
+//自訂版型(圖片連結)和挑選自有行程(圖片連結)white_label_link_picture和b2b_LinkPicture -End
 
 //自訂版型(輪播圖)white_label_slider -Start
 import swiperBig from "../components/label_slider/big";
@@ -153,12 +153,12 @@ export default {
     aboutLeft,
     aboutRight,
     aboutCenter,
-    about1,
-    about2,
-    about3,
-    about4,
-    about5,
-    about6,
+    paragraph1,
+    paragraph2,
+    paragraph3,
+    paragraphleft,
+    paragraphright,
+    paragraphafter,
     plinkLeft,
     plinkRight,
     ilinkLeft,