📦 登录 | 公众号 | 投放管理路由

src/hooks/useFormLayout.ts

@@ -0,0 +1,10 @@
+const useFormLayout = (label: number) => {
+  const rate = 4;
+
+  return {
+    labelCol: { span: label },
+    wrapperCol: { span: label * rate },
+  };
+};
+
+export default useFormLayout;

src/router/modules/constant.ts

@@ -1,13 +1,13 @@
 import { RouteConfig } from "@/types/route";
 
-export const Home: RouteConfig = {
-  name: "Home",
-  path: "/home",
+export const Login: RouteConfig = {
+  name: "Login",
+  path: "/login",
   hidden: true,
   meta: {
-    title: "首页",
+    title: "登录",
   },
-  component: () => import("@/views/Home.vue"),
+  component: () => import("@/views/Login.vue"),
 };
 
 export const About: RouteConfig = {
@@ -20,6 +20,6 @@ export const About: RouteConfig = {
   component: () => import("@/views/About.vue"),
 };
 
-const constantRoutes: RouteConfig[] = [Home, About];
+const constantRoutes: RouteConfig[] = [Login, About];
 
 export default constantRoutes;

src/scss/index.scss

@@ -3,9 +3,10 @@
 @import "./antd.scss";
 // @import "./components/index.scss";
 // @import "./views/index.scss";
-
-p {
-  margin-bottom: 0 !important;
+body {
+  p {
+    margin-bottom: 0;
+  }
 }
 
 .web-wrapper {
@@ -15,6 +16,11 @@ p {
     height: 100%;
     overflow-y: auto;
   }
+
+  .web-container {
+    background: url(http://normal-image.xiaovv-web.com/normal/2020-11-13-background.svg)
+      #f0f2f5 no-repeat top left / contain fixed;
+  }
 }
 
 .clearfix {

src/views/Home.vue

@@ -1,27 +0,0 @@
-<template>
-  <div class="home">
-    <a-button type="primary">按钮</a-button>
-    <confirm-button label="点我"
-                    @click="add" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import ConfirmButton from "@/components/confirm-button/index.vue";
-
-export default defineComponent({
-  name: "Home",
-  components: {
-    ConfirmButton,
-  },
-  setup() {
-    const title = ref("test");
-    const add = () => {
-      console.log("on confirm");
-    };
-
-    return { title, add };
-  },
-});
-</script>

src/views/Login.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="login-wrap">
+    <div class="login-container">
+      <p class="title">精准投放后台</p>
+      <a-form :model="forms"
+              v-bind="layout">
+        <a-form-item>
+          <a-input v-model:value="forms.username"
+                   size="large"
+                   placeholder="请输入用户名">
+            <template #prefix>
+              <user-outlined />
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-input-password v-model:value="forms.password"
+                            size="large"
+                            type="password"
+                            placeholder="请输入密码">
+            <template #prefix>
+              <lock-outlined />
+            </template>
+          </a-input-password>
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary"
+                    block
+                    size="large"
+                    shape="round"
+                    @click="onLogin">登录</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, reactive, ref, toRefs } from "vue";
+import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
+
+import useFormLayout from "@/hooks/useFormLayout";
+import useApp from "@/hooks/useApp";
+
+const Login = defineComponent({
+  name: "Login",
+  components: {
+    UserOutlined,
+    LockOutlined,
+  },
+  setup() {
+    const { router } = useApp();
+    const formLayout = useFormLayout(6);
+
+    const data = reactive({
+      forms: {
+        username: "",
+        password: "",
+      },
+      layout: formLayout,
+    });
+
+    const onLogin = () => {
+      router.replace("/");
+    };
+
+    return { ...toRefs(data), onLogin };
+  },
+});
+
+export default Login;
+</script>
+
+<style lang="scss" scoped>
+.login-wrap {
+  height: 100vh;
+  background: url(http://normal-image.xiaovv-web.com/normal/2020-11-13-background.svg) #f0f2f5 no-repeat top left / contain;
+
+  .title {
+    font-size: 40px;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  .login-container {
+    padding-top: 120px;
+    margin: auto;
+    width: 20vw;
+  }
+}
+</style>

src/views/Page1.vue

@@ -1,32 +0,0 @@
-<template>
-  <div>page 1
-    <p v-confirm="test">test</p>
-    <a-button @click="doCopy">复制</a-button>
-  </div>
-</template>
-
-<script lang="ts">
-import useClipboard from "@/hooks/useClipboard";
-import { defineComponent, onMounted } from "vue";
-
-const Page1 = defineComponent({
-  setup() {
-    const clip = useClipboard();
-
-    const doCopy = () => {
-      clip.$copyText("copy success");
-    };
-
-    const test = () => {
-      console.log("call back");
-    };
-
-    return {
-      doCopy,
-      test,
-    };
-  },
-});
-
-export default Page1;
-</script>

src/views/Page2.vue

@@ -1,6 +0,0 @@
-<template>
-  <div>
-    <div>page 2</div>
-    <router-view></router-view>
-  </div>
-</template>

src/views/Page3.vue

@@ -1,6 +0,0 @@
-<template>
-  <div>
-    <div>page 3</div>
-    <router-view></router-view>
-  </div>
-</template>

src/views/Page4.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>page 4</div>
-</template>

src/views/Page5.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>page 5</div>
-</template>

src/views/Page6.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>Page 6</div>
-</template>

src/views/account/account.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>公众号管理</div>
+</template>

src/views/put/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

src/views/put/put-ad-account.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>投放广告账号</div>
+</template>

src/views/put/put-ad-plan.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>投放广告计划</div>
+</template>

src/views/put/put-book.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>投放书籍</div>
+</template>

src/views/put/put-data.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>投放数据</div>
+</template>