add button to contact page

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

@@ -12,18 +12,64 @@
           >customerservice@hichinatrip.com</a
         >
       </div>
-      <div class="text-center text-subtitle1">
-        Our co-workers will will response ASAP
+    </div>
+    <div class="text-center text-subtitle1">
+      Our co-workers will will response ASAP
+    </div>
+    <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>Plan your journey.</div>
+          </q-card-section>
+        </q-card>
       </div>
-      <div class="text-center text-h5 text-grey-13">
-        Also, add us on Wechat/WhatsAPP!
+      <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="text-center">
-        <q-img
-          style="width: 300px"
-          src="https://photoprism.hichinatravel.com/api/v1/t/d68ee79239386b14869f548a423de4bcc7e3cb31/32mcf2k4/fit_2048"
-          alt=""
-        />
+      <div>
+        <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>
       </div>
     </div>
   </q-page>
@@ -32,6 +78,33 @@
 <script>
 export default {
   name: "ContactPage",
-  setup() {},
+  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>