Merge branch 'modifyWebsite' of fxie/hichina2023 into master

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

@@ -72,14 +72,15 @@
         v-bind:key="index"
       >
         <div class="q-pa-md">
-          <q-card class="cursor-pointer" flat bordered>
+          <q-card class="cursor-pointer" flat bordered style="height: 530px">
             <q-img
               @click="goPage('/blog-detail/' + item.value.blogId)"
               :src="item.value.headImageUrl"
+              style="height: 300px"
               placeholder-src="https://photoprism.hichinatravel.com/api/v1/t/2bfc32550ae040956f7e861566d26c487c0143e7/32mcf2k4/tile_224"
             />
 
-            <q-card-section>
+            <q-card-section style="max-height: 200px; overflow: hidden">
               <div class="text-overline text-orange-9">
                 {{ item.value.createdTime }}
               </div>

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>

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

@@ -141,14 +141,16 @@
             class="cursor-pointer"
             flat
             bordered
+            style="height: 530px"
           >
             <q-img
               @click="goPage('/blog-detail/' + item.value.blogId)"
               :src="item.value.headImageUrl"
+              style="height: 300px"
               placeholder-src="https://photoprism.hichinatravel.com/api/v1/t/2bfc32550ae040956f7e861566d26c487c0143e7/32mcf2k4/tile_224"
             />
 
-            <q-card-section>
+            <q-card-section style="max-height: 200px; overflow: hidden">
               <div class="text-overline text-orange-9">
                 {{ item.value.createdTime }}
               </div>
@@ -167,10 +169,12 @@
             class="cursor-pointer"
             flat
             bordered
+            style="height: 400px"
           >
             <q-img
               @click="goPage('/product-detail/' + item.value.skuGroupId)"
               :src="item.value.imageUrl"
+              style="height: 220px"
               placeholder-src="https://photoprism.hichinatravel.com/api/v1/t/2bfc32550ae040956f7e861566d26c487c0143e7/32mcf2k4/tile_224"
             />
 

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

@@ -63,14 +63,15 @@
         v-bind:key="index"
       >
         <div class="q-pa-md">
-          <q-card class="cursor-pointer" flat bordered>
+          <q-card class="cursor-pointer" flat bordered style="height: 500px">
             <q-img
               @click="goPage('/product-detail/' + item.skuGroupId)"
               :src="item.imageUrl"
+              style="height: 300px"
               placeholder-src="https://photoprism.hichinatravel.com/api/v1/t/2bfc32550ae040956f7e861566d26c487c0143e7/32mcf2k4/tile_224"
             />
 
-            <q-card-section>
+            <q-card-section style="max-height: 200px; overflow: hidden">
               <div class="text-subtitle1 text-pink">
                 Start from ￥{{ item.minPrice }}
               </div>

hichina-main-front-mobile-first/src/router/index.js

@@ -1,6 +1,11 @@
-import { route } from 'quasar/wrappers'
-import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
-import routes from './routes'
+import { route } from "quasar/wrappers";
+import {
+  createRouter,
+  createMemoryHistory,
+  createWebHistory,
+  createWebHashHistory,
+} from "vue-router";
+import routes from "./routes";
 
 /*
  * If not building with SSR mode, you can
@@ -14,7 +19,9 @@ import routes from './routes'
 export default route(function (/* { store, ssrContext } */) {
   const createHistory = process.env.SERVER
     ? createMemoryHistory
-    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+    : process.env.VUE_ROUTER_MODE === "history"
+    ? createWebHistory
+    : createWebHashHistory;
 
   const Router = createRouter({
     scrollBehavior: () => ({ left: 0, top: 0 }),
@@ -23,8 +30,15 @@ export default route(function (/* { store, ssrContext } */) {
     // Leave this as is and make changes in quasar.conf.js instead!
     // quasar.conf.js -> build -> vueRouterMode
     // quasar.conf.js -> build -> publicPath
-    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
-  })
+    history: createHistory(
+      process.env.MODE === "ssr" ? void 0 : process.env.VUE_ROUTER_BASE
+    ),
+  });
+  Router.beforeEach((to, from, next) => {
+    const pageTitle = to.meta.title || "Default Title";
+    document.title = pageTitle;
+    next();
+  });
 
-  return Router
-})
+  return Router;
+});

hichina-main-front-mobile-first/src/router/routes.js

@@ -2,43 +2,79 @@ const routes = [
   {
     path: "/",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/IndexPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/IndexPage.vue"),
+        meta: { title: "HiChina Travel Home" },
+      },
+    ],
   },
   {
     path: "/guideintro",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/GuideIntroPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/GuideIntroPage.vue"),
+        meta: { title: "HiChina Travel Guidebook" },
+      },
     ],
   },
   {
     path: "/blog",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/BlogPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/BlogPage.vue"),
+        meta: { title: "HiChina Travel Blog" },
+      },
+    ],
   },
   {
     path: "/product",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/TravelShopPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/TravelShopPage.vue"),
+        meta: { title: "HiChina Travel Shop" },
+      },
     ],
   },
   {
     path: "/destination",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/DestinationPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/DestinationPage.vue"),
+        meta: { title: "HiChina Travel Destination" },
+      },
     ],
   },
   {
     path: "/auth/login",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/LoginPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/LoginPage.vue"),
+        meta: { title: "HiChina Travel Login" },
+      },
+    ],
   },
   {
     path: "/auth/register",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/RegisterPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/RegisterPage.vue"),
+        meta: { title: "HiChina Travel Register" },
+      },
+    ],
   },
   {
     path: "/product-detail/:skuGroupId",
@@ -64,7 +100,13 @@ const routes = [
   {
     path: "/contact",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/ContactPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/ContactPage.vue"),
+        meta: { title: "HiChina Travel Contact" },
+      },
+    ],
   },
   {
     path: "/my-blogs",