浏览代码

add login page zishiying

fengchang 1 年之前
父节点
当前提交
447786ca19

+ 1 - 0
hichina-main-front-mobile-first/src/layouts/MainLayout.vue

@@ -69,6 +69,7 @@
             v-if="$q.screen.gt.xs"
           />
           <q-btn
+            @click="goPage('/auth/login')"
             flat
             dense
             no-wrap

+ 41 - 0
hichina-main-front-mobile-first/src/pages/LoginPage.vue

@@ -0,0 +1,41 @@
+<template>
+  <q-page>
+    <div style="height: 82px"></div>
+    <div class="row q-mb-xl justify-center">
+      <div
+        class="col-10 col-sm-5 col-md-3 rounded-borders login-border shadow-7"
+      >
+        <div class="text-h5 text-left text-weight-bold text-black q-pa-md">
+          Login
+        </div>
+        <div class="col-12 q-pa-md">
+          <q-input color="blue-12" v-model="text" label="Enter your username">
+            <template v-slot:prepend>
+              <q-icon name="account_circle" />
+            </template>
+          </q-input>
+        </div>
+        <div class="col-12 q-pa-md">
+          <q-input color="blue-12" v-model="text" label="Enter your password">
+            <template v-slot:prepend>
+              <q-icon name="lock" />
+            </template>
+          </q-input>
+        </div>
+        <div class="col-12 q-pa-md">
+          <q-btn color="primary" label="Login" />
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: "LoginPage",
+};
+</script>
+<style lang="sass" scoped>
+.login-border
+  border-radius: 10px
+</style>

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

@@ -30,6 +30,11 @@ const routes = [
       { path: "", component: () => import("pages/DestinationPage.vue") },
     ],
   },
+  {
+    path: "/auth/login",
+    component: () => import("layouts/MainLayout.vue"),
+    children: [{ path: "", component: () => import("pages/LoginPage.vue") }],
+  },
 
   // Always leave this as last one,
   // but you can also remove it