完成首页组件

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@quasar/extras": "^1.0.0",
     "axios": "^0.18.1",
+    "js-md5": "^0.7.3",
     "qrcode.vue": "^1.7.0",
     "qrcodejs2": "^0.0.2",
     "quasar": "^1.0.0",

quasar.conf.js

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

src/components/about/about4.vue

 <template>
-  <div class="q-mt-lg"></div>
+  <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>
@@ -7,4 +24,59 @@ 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/about/about5.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/about/about6.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/diy-swiper/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/diy-swiper/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/ilinks/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/ilinks/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/navs/hor-big-tow.vue

@@ -2,7 +2,7 @@
   <q-header
     reveal
     elevated
-    :style="{background:baseData.nav.bg,color:'#FFF'}"
+    :style="{background:'transparent',color:'#FFF'}"
     height-hint="98"
   >
     <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">

src/components/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/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/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/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/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/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/plinks/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/plinks/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/pages/Index.vue

@@ -15,6 +15,11 @@
     <!-- <video-two></video-two> -->
     <diy-img-one></diy-img-one>
     <diy-img-two></diy-img-two>
+    <diy-title></diy-title>
+    <paragraph></paragraph>
+    <!-- <swiper-big></swiper-big> -->
+    <swiper-small></swiper-small>
+    <empty></empty>
     <diy-img-three></diy-img-three>
     <diy-img-four></diy-img-four>
     <diy-img-five></diy-img-five>
@@ -27,6 +32,16 @@
     <!-- <about1></about1> -->
     <!-- <about2></about2> -->
     <about3></about3>
+    <!-- <about4></about4> -->
+    <!-- <about5></about5> -->
+    <about6></about6>
+    <!-- <plink-left></plink-left> -->
+    <plink-right></plink-right>
+    <!-- <ilink-left></ilink-left> -->
+    <ilink-right></ilink-right>
+    <download-table></download-table>
+    <photo></photo>
+    <diy-form></diy-form>
   </q-page>
 </template>
 
@@ -58,6 +73,21 @@ import aboutCenter from "../components/about/center";
 import about1 from "../components/about/about1";
 import about2 from "../components/about/about2";
 import about3 from "../components/about/about3";
+import about4 from "../components/about/about4";
+import about5 from "../components/about/about5";
+import about6 from "../components/about/about6";
+import plinkLeft from "../components/plinks/left";
+import plinkRight from "../components/plinks/right";
+import ilinkLeft from "../components/ilinks/left";
+import ilinkRight from "../components/ilinks/right";
+import swiperBig from "../components/diy-swiper/big";
+import swiperSmall from "../components/diy-swiper/small";
+import empty from "../components/other/empty";
+import downloadTable from "../components/other/downloadTable";
+import diyTitle from "../components/other/diy-title";
+import paragraph from "../components/other/paragraph";
+import photo from "../components/other/photo";
+import diyForm from "../components/other/diy-form";
 export default {
   name: "PageIndex",
   components: {
@@ -87,11 +117,26 @@ export default {
     aboutCenter,
     about1,
     about2,
-    about3
+    about3,
+    about4,
+    about5,
+    about6,
+    plinkLeft,
+    plinkRight,
+    ilinkLeft,
+    ilinkRight,
+    swiperBig,
+    swiperSmall,
+    empty,
+    downloadTable,
+    diyTitle,
+    paragraph,
+    photo,
+    diyForm
   },
   data() {
     return {
-      styleType:8
+      styleType:1
     };
   }
 };