hichina-main-front-mobile-first/src/pages/ContactPage.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-page
-    ><div style="margion: 0 auto; min-height: 50px">
+  <q-page class="q-pt-lg q-pb-xl">
+    <div class="q-page-container q-ma-auto">
       <div class="text-center text-h5">
         You need help from our customer serivce?
       </div>
@@ -15,63 +15,97 @@
       <div class="text-center text-subtitle1">
         Our co-workers will will response ASAP
       </div>
-      <div class="text-center text-h5 text-grey-13">
-        Also, add us on Wechat/WhatsAPP!
-      </div>
-      <div class="text-center">
-        <q-img
-          style="width: 300px"
-          src="https://photoprism.hichinatravel.com/api/v1/t/d68ee79239386b14869f548a423de4bcc7e3cb31/32mcf2k4/fit_2048"
-          alt=""
-        />
+      <div class="row justify-center q-mt-md">
+        <div class="col-6 text-center">
+          <q-card
+            class="trip"
+            style="max-width: 300px; display: inline-block"
+            @click="
+              redirectToLink(
+                'https://docs.qq.com/form/page/DSWdXS0d0REt3Y3FO#/fill'
+              )
+            "
+          >
+            <q-card-section>
+              <q-img
+                src="https://assets.traveltriangle.com/blog/wp-content/uploads/2017/12/Travel-Plan.jpg"
+                alt="Image 1"
+              />
+            </q-card-section>
+            <q-card-section>
+              <div class="text-h6">Customize Your Trip</div>
+              <div>Personalize your journey.</div>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-6 text-center">
+          <q-card
+            class="ticket"
+            style="max-width: 300px; display: inline-block"
+          >
+            <q-card-section>
+              <q-img
+                src="https://as1.ftcdn.net/v2/jpg/01/23/56/18/1000_F_123561829_C1XI8R9kugI01FEbDvaF5LmDpmaorH7u.jpg"
+                alt="Image 2"
+              />
+            </q-card-section>
+            <q-card-section>
+              <div class="text-h6">Book Flights</div>
+              <div>
+                This functionality is currently under maintenance and will be
+                available soon.
+              </div>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12 text-center">
+          <div class="text-center text-h5 text-grey-13">
+            Also, add us on Wechat/WhatsAPP!
+          </div>
+        </div>
+
+        <div class="text-center">
+          <q-img
+            style="width: 300px"
+            src="https://photoprism.hichinatravel.com/api/v1/t/d68ee79239386b14869f548a423de4bcc7e3cb31/32mcf2k4/fit_2048"
+            alt=""
+          />
+        </div>
       </div>
     </div>
-    <!-- Messenger Chat Plugin Code -->
-    <div id="fb-root"></div>
-
-    <!-- Your Chat Plugin code -->
-    <div id="fb-customer-chat" class="fb-customerchat"></div>
   </q-page>
 </template>
 
 <script>
-import { ref, onMounted, onBeforeMount, getCurrentInstance } from "vue";
-import { useQuasar } from "quasar";
-import { api } from "boot/axios";
-import Qs from "qs";
 export default {
   name: "ContactPage",
-  setup() {
-    function setupChat() {
-      var chatbox = document.getElementById("fb-customer-chat");
-      chatbox.setAttribute("page_id", "1534271790187013");
-      chatbox.setAttribute("attribution", "biz_inbox");
-    }
-    function initFacebookSDK() {
-      window.fbAsyncInit = function () {
-        FB.init({
-          xfbml: true,
-          version: "v17.0",
-        });
-      };
-
-      (function (d, s, id) {
-        var js,
-          fjs = d.getElementsByTagName(s)[0];
-        if (d.getElementById(id)) return;
-        js = d.createElement(s);
-        js.id = id;
-        js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
-        fjs.parentNode.insertBefore(js, fjs);
-      })(document, "script", "facebook-jssdk");
-    }
-    onMounted(() => {
-      setupChat();
-    });
-
-    onBeforeMount(() => {
-      initFacebookSDK();
-    });
+  methods: {
+    redirectToLink(link) {
+      window.open(link, "_blank");
+    },
   },
 };
 </script>
+<style>
+.trip {
+  cursor: pointer;
+  width: 100%;
+  max-width: 350;
+  margin-bottom: 50px;
+  margin-top: 50px;
+  height: 300px;
+}
+
+.ticket {
+  width: 100%;
+  max-width: 350;
+  margin-bottom: 50px;
+  margin-top: 50px;
+  height: 300px;
+}
+
+.q-img {
+  max-width: 100%;
+  height: auto;
+}
+</style>