diff --git a/package-lock.json b/package-lock.json
index fc05ba7..35ab76b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6151,6 +6151,12 @@
         }
       }
     },
+    "interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/interpret/download/interpret-1.2.0.tgz?cache=0&sync_timestamp=1571708682279&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Finterpret%2Fdownload%2Finterpret-1.2.0.tgz",
+      "integrity": "sha1-1QYaYiS+WOgIOYX1AU2EQ1lXYpY=",
+      "dev": true
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz",
@@ -9085,6 +9091,15 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npm.taobao.org/rechoir/download/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/redent/download/redent-1.0.0.tgz",
@@ -9469,6 +9484,15 @@
       "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
       "dev": true
     },
+    "sass": {
+      "version": "1.26.3",
+      "resolved": "https://registry.npm.taobao.org/sass/download/sass-1.26.3.tgz?cache=0&sync_timestamp=1583972683391&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass%2Fdownload%2Fsass-1.26.3.tgz",
+      "integrity": "sha1-QS31RIYUO3a1plzfdWnob0Rln0Y=",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
     "sass-graph": {
       "version": "2.2.4",
       "resolved": "https://registry.npm.taobao.org/sass-graph/download/sass-graph-2.2.4.tgz",
@@ -9909,6 +9933,17 @@
       "integrity": "sha1-Z6fQLHbJ2iT5nSCAj8re0ODgS+I=",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npm.taobao.org/shelljs/download/shelljs-0.8.3.tgz",
+      "integrity": "sha1-p/MxlSDr8J7oEnWyNorbKGZZsJc=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.2.tgz",
@@ -11163,6 +11198,24 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz",
       "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
     },
+    "vue-cli-plugin-vuetify": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npm.taobao.org/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.0.5.tgz",
+      "integrity": "sha1-Cbp4koZT/H44Aeo35RIPlXQT3aQ=",
+      "dev": true,
+      "requires": {
+        "semver": "^7.1.2",
+        "shelljs": "^0.8.3"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.1.3.tgz?cache=0&sync_timestamp=1581458265183&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.1.3.tgz",
+          "integrity": "sha1-5DRc5zBxxT8zZEXPwZ77HDEd8qY=",
+          "dev": true
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
@@ -11229,6 +11282,20 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.2.18",
+      "resolved": "https://registry.npm.taobao.org/vuetify/download/vuetify-2.2.18.tgz",
+      "integrity": "sha1-WkO+r3yPxm3PtYduFhn35Ex4gdo="
+    },
+    "vuetify-loader": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npm.taobao.org/vuetify-loader/download/vuetify-loader-1.4.3.tgz",
+      "integrity": "sha1-3xMjxVi+CYkId+X76BezpxpsU40=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.0"
+      }
+    },
     "vuex": {
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.1.3.tgz",
diff --git a/package.json b/package.json
index 585b7a8..c655c86 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,22 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "buildsuper": "vue-cli-service build --modern"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "crc-32": "^1.2.0",
+    "crypto-js": "^4.0.0",
     "register-service-worker": "^1.6.2",
+    "vconsole": "^3.3.4",
     "vue": "^2.6.11",
+    "vue-clipboard2": "^0.3.1",
     "vue-router": "^3.1.5",
+    "vue-svg-icon": "^1.2.9",
+    "vue-touch": "^2.0.0-beta.4",
+    "vuetify": "^2.2.11",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
@@ -20,7 +29,10 @@
     "@vue/cli-plugin-vuex": "~4.2.0",
     "@vue/cli-service": "~4.2.0",
     "node-sass": "^4.12.0",
+    "sass": "^1.19.0",
     "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-cli-plugin-vuetify": "~2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   }
 }
diff --git a/public/index.html b/public/index.html
index 4123528..bc51465 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 3943904..50ac4cc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,73 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <icon class="bg" name="canary"></icon>
+    <router-view />
   </div>
 </template>
 
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+export default {
+  name: "App",
+  data: () => {
+    return {};
+  },
+  methods: {
+    ...mapActions(["setBgImgUrl"]),
+    init() {
+      let url = `https://i.picsum.photos/id/${Math.floor(
+        Math.random() * 1000
+      )}/1920/1080.jpg`;
+      this.setBgImgUrl([url, this])
+      // Light theme
+      this.$vuetify.theme.themes.light.primary = '#000'
+      // Dark theme
+      this.$vuetify.theme.themes.dark.primary = '#fff'
+    }
+  },
+  created() {
+    this.init();
+  }
+};
+</script>
+
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Roboto", "Helvetica Neue", Helvetica, "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  /* text-align: center; */
+  // color: #2c3e50;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
 }
 
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+.bg {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: -100;
+  height: 10rem;
+  width: 10rem;
+  margin-top: -5rem;
+  margin-left: -5rem;
 }
-</style>
+
+#__vconsole {
+  display: none;
+}
+
+.vconsole-show {
+  display: block !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..145b6d1
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 4ec0c11..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/main.js b/src/main.js
index d12df39..c7ed902 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,11 +3,29 @@ import App from './App.vue'
 import './registerServiceWorker'
 import router from './router'
 import store from './store'
+import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false
 
+// icon-loader
+import Icon from 'vue-svg-icon/Icon.vue'
+Vue.component('icon', Icon);
+
+// 剪切板
+import VueClipboard from "vue-clipboard2";
+Vue.use(VueClipboard);
+
+// 手势控件
+import VueTouch from "vue-touch";
+Vue.use(VueTouch, {name: 'v-touch'})
+
+// vconsole
+import Vconsole from 'vconsole';
+new Vconsole();
+
 new Vue({
   router,
   store,
+  vuetify,
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..c75bb54
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+Vue.use(Vuetify);
+
+export default new Vuetify({
+   
+});
diff --git a/src/router/index.js b/src/router/index.js
index d36779e..d1ca182 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
@@ -8,16 +7,19 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: () => import(/* webpackChunkName: "home" */ '../views/Home/Home.vue')
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+    path: '/account',
+    name: 'Account',
+    component: () => import(/* webpackChunkName: "account" */ '../views/Account/Account.vue')
+  },
+	{
+		path: '*', // 页面不存在的情况下会跳到主页
+		redirect: '/',
+		name: 'notFound',
+		hidden: true
+	}
 ]
 
 const router = new VueRouter({
diff --git a/src/store/index.js b/src/store/index.js
index 332b916..a669171 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,10 +5,21 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    // 全局背景图片
+    bg_img_url: '',
   },
   mutations: {
+    // 设置全局背景图片
+    SET_BGIMGURL(state, bg_img_url) {
+      state.bg_img_url = bg_img_url;
+    },
   },
   actions: {
+    // 设置全局背景图片
+    setBgImgUrl({ commit }, arg) {
+      commit('SET_BGIMGURL', arg[0]);
+			localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
+    },
   },
   modules: {
   }
diff --git a/src/svg/canary.svg b/src/svg/canary.svg
new file mode 100644
index 0000000..0d88a06
--- /dev/null
+++ b/src/svg/canary.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1582191167349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" p-id="3271" fill="#E0E0E0"></path></svg>
\ No newline at end of file
diff --git a/src/utils/px2rem.js b/src/utils/px2rem.js
new file mode 100644
index 0000000..f30fb4d
--- /dev/null
+++ b/src/utils/px2rem.js
@@ -0,0 +1,7 @@
+//px2rem
+export function setHtmlFontSize() {
+  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
+  const htmlDom = document.getElementsByTagName('html')[0]
+  if (htmlWidth >= 500) htmlDom.style.fontSize = 500 / 10 + 'px'
+  else htmlDom.style.fontSize = htmlWidth / 10 + 'px'
+}
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/Account/Account.vue b/src/views/Account/Account.vue
new file mode 100644
index 0000000..7388b0b
--- /dev/null
+++ b/src/views/Account/Account.vue
@@ -0,0 +1,101 @@
+<template>
+  <v-app>
+    <v-sheet class="fill-height">
+      <!-- 标题栏 -->
+      <v-toolbar dark :src="bg_img_url">
+        <!-- 图片遮罩 -->
+        <template v-slot:img="{ props }">
+          <v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
+        </template>
+
+        <!-- 关闭按钮 -->
+        <v-btn icon :disabled="loading_switch">
+          <v-icon>mdi-arrow-left</v-icon>
+        </v-btn>
+        <!-- 标题 -->
+        <v-toolbar-title>账户</v-toolbar-title>
+        <v-spacer></v-spacer>
+      </v-toolbar>
+
+      <!-- 登录 -->
+      <v-sheet v-if="page_type == 'login'">
+        <v-form ref="form" v-model="valid" class="ma-4">
+          <!-- 教务账号 -->
+          <v-text-field
+            v-model="cid"
+            :counter="10"
+            :rules="[v => !!v || '请填入教务账号', v => (v && v.length == 10) || '请输入正确的账号']"
+            label="教务账号"
+            required
+            clearable
+            :disabled="loading_switch"
+          ></v-text-field>
+
+          <!-- 教务密码 -->
+          <v-text-field
+            v-model="pwd"
+            :rules="[v => !!v || '请填入教务密码']"
+            label="教务密码"
+            required
+            clearable
+            :disabled="loading_switch"
+            type="password"
+          ></v-text-field>
+
+          <!-- 提交 -->
+          <v-btn
+            color="success"
+            :disabled="!valid"
+            @click="resetValidation"
+            :loading="loading_switch"
+            class="float-right mt-5"
+          >验证账户</v-btn>
+        </v-form>
+      </v-sheet>
+
+      <!-- 账户系统 -->
+      <v-sheet>
+        
+      </v-sheet>
+    </v-sheet>
+  </v-app>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+export default {
+  name: "Add",
+  data: () => {
+    return {
+      valid: true,
+      cid: "",
+      pwd: "",
+      loading_switch: false,
+      page_type: "login",
+      user_info: {
+        name: '赵英博',
+        nick: '嘤嘤嘤',
+        id: '170521328',
+        cid: '2017002372',
+        created: '',
+        pwd: '',
+        
+      }
+    };
+  },
+  computed: {
+    ...mapState(["bg_img_url"])
+  },
+  methods: {
+    init() {}
+  },
+  created() {
+    this.init();
+  },
+  mounted() {}
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 8bd6c57..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
new file mode 100644
index 0000000..c7b9352
--- /dev/null
+++ b/src/views/Home/Home.vue
@@ -0,0 +1,216 @@
+<template>
+  <v-app id="home-app">
+    <!-- 顶部菜单 -->
+    <v-app-bar
+      app
+      relative
+      dark
+      :src="bg_img_url"
+    >
+      <!-- 图片遮罩 -->
+      <template v-slot:img="{ props }">
+        <v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
+      </template>
+
+      <!-- 抽屉按钮 -->
+      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+      <!-- 标题 -->
+      <v-toolbar-title>Canary 失物招领</v-toolbar-title>
+
+      <!-- 空白占位 -->
+      <v-spacer></v-spacer>
+
+      <!-- 搜索icon -->
+      <v-btn icon @click="banner_switch = !banner_switch">
+        <v-icon>mdi-magnify</v-icon>
+      </v-btn>
+
+      <!-- 刷新icon -->
+      <v-btn icon @click="loading_switch = !loading_switch">
+        <v-icon>mdi-refresh</v-icon>
+      </v-btn>
+
+      <!-- tab选项 -->
+      <template v-slot:extension>
+        <v-tabs grow>
+          <v-tab @click="page_type = 'lost'">失物</v-tab>
+          <v-tab @click="page_type = 'found'">招领</v-tab>
+        </v-tabs>
+      </template>
+    </v-app-bar>
+
+    <!-- 抽屉 -->
+    <v-navigation-drawer v-model="drawer" fixed temporary app>
+      <v-img :aspect-ratio="16/9" :src="bg_img_url" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)">
+        <v-row align="end" class="lightbox white--text pa-2 fill-height">
+          <v-col>
+            <div class="subheading">赵英博</div>
+            <div class="body-1">170521328</div>
+          </v-col>
+        </v-row>
+      </v-img>
+      <v-list>
+        <!-- 账户 -->
+        <v-list-item>
+          <v-list-item-icon>
+            <v-icon>mdi-account</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>账户</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+
+        <!-- 设置 -->
+        <v-list-item>
+          <v-list-item-icon>
+            <v-icon>mdi-cog</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>设置</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+
+        <!-- 分享 -->
+        <v-list-item>
+          <v-list-item-icon>
+            <v-icon>mdi-share</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>分享链接</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <!-- 主体内容 -->
+    <v-sheet class="fill-height" >
+      <!-- 空白占位 -->
+      <div id="sheets"></div>
+
+      <!-- 进度条 -->
+      <v-progress-linear
+        fixed
+        indeterminate
+        height="5"
+        color="primary"
+        :active="loading_switch"
+      ></v-progress-linear>
+      
+      <!-- 未登录提醒 -->
+      <v-banner single-line :value="banner_switch">
+        <div class="caption">您还未登录，登录后即可享受全部功能</div>
+        <template v-slot:actions>
+          <v-btn text color="primary">登录</v-btn>
+        </template>
+      </v-banner>
+
+      <!-- lost列表 -->
+      <v-sheet v-show="page_type=='lost'">
+        <v-container fluid >
+          <v-row no-gutters>
+            <Card v-for="(item, i) in found" :key="i" :content="item"></Card>
+          </v-row>
+        </v-container>
+      </v-sheet>
+
+      <!-- found列表 -->
+      <v-sheet v-show="page_type=='found'">
+        <v-container fluid>
+          <v-row no-gutters>
+            <Card v-for="(item, i) in found" :key="i" :content="item"></Card>
+          </v-row>
+        </v-container>
+      </v-sheet>
+    </v-sheet>
+
+    <v-bottom-sheet v-model="add_switch" persistent fullscreen @touchmove.prevent>
+      <Add :closeBottomSheet="closeBottomSheet"></Add>
+    </v-bottom-sheet>
+
+    <!-- 小圆纽 -->
+    <v-card-text style="height: 100px; position: fixed; bottom: 0">
+      <v-btn absolute dark fab right @click="add_switch = true">
+        <v-icon>mdi-plus</v-icon>
+      </v-btn>
+    </v-card-text>
+  </v-app>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+import Card from "./children/Card";
+import Add from "./children/Add";
+export default {
+  name: "Home",
+  data: () => {
+    return {
+      page_type: "lost",
+      drawer: false,
+      lost: [],
+      found: [],
+      // 加载条
+      loading_switch: false,
+      // 未登录banner
+      banner_switch: false,
+      // 新建窗口
+      add_switch: false
+    };
+  },
+  computed: {
+    ...mapState([
+      "bg_img_url"
+    ]),
+  },
+  methods: {
+    init() {
+      let item = {
+        title: "这是丢失的物品",
+        create_time: "2020-01-01",
+        img_url: "https://picsum.photos/1920/1080?random",
+        total_addr: "长理东区",
+        good_type: "lost",
+        good_id: "1111"
+      };
+      for (let i = 0; i < 10; i++) {
+        this.lost.push(item);
+        this.found.push(item);
+      }
+    },
+
+    // 关闭底部表单-add
+    closeBottomSheet() {
+      this.add_switch = false
+    },
+
+    // 设置空白占位的高度
+    resetSheetHeight(){
+      // 设置空白高度
+      document.getElementById(
+        "sheets"
+      ).style.height = document.getElementsByTagName("header")[0].style.height;
+      console.log('空白占位高度设置完成')
+    }
+  },
+  created() {
+    this.init();
+  },
+  mounted() {
+    // 设置空白占位的高度
+    this.resetSheetHeight()
+    // 屏幕变化的时候也更新高度
+    window.onresize = function temp() {
+      console.log('屏幕大小发生改变')
+			this.resetSheetHeight();
+		}.bind(this);
+  },
+  components: {
+    Card,
+    Add
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/Home/children/Add.vue b/src/views/Home/children/Add.vue
new file mode 100644
index 0000000..4dac4a0
--- /dev/null
+++ b/src/views/Home/children/Add.vue
@@ -0,0 +1,150 @@
+<template>
+  <v-sheet class="fill-height" >
+    <!-- 标题栏 -->
+    <v-toolbar dark :src="bg_img_url">
+      <!-- 图片遮罩 -->
+      <template v-slot:img="{ props }">
+        <v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
+      </template>
+
+      <!-- 关闭按钮 -->
+      <v-btn icon @click="close" :disabled="loading_switch">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+
+      <!-- 标题 -->
+      <v-toolbar-title>创建失物招领</v-toolbar-title>
+
+      <v-spacer></v-spacer>
+    </v-toolbar>
+
+    <v-form ref="form" v-model="valid" class="ma-4">
+      <!-- 信息类型 -->
+      <v-radio-group row color="primary" v-model="good_type" :disabled="loading_switch">
+        <v-radio label="捡到东西" value="found"></v-radio>
+        <v-radio label="丢了东西" value="lost"></v-radio>
+      </v-radio-group>
+
+      <!-- 标题 -->
+      <v-text-field
+        v-model="title"
+        :counter="10"
+        :rules="[v => !!v || '请填入标题', v => (v && v.length <= 10) || '标题不能超过十个字']"
+        label="标题"
+        required
+        clearable
+        :disabled="loading_switch"
+      ></v-text-field>
+
+      <!-- 内容 -->
+      <v-textarea
+        v-model="content"
+        :counter="50"
+        :rules="[v => !!v || '请填入内容', v => (v && v.length <= 50) || '内容不能超过五十个字']"
+        label="内容"
+        rows="3"
+        required
+        clearable
+        :disabled="loading_switch"
+      ></v-textarea>
+
+      <!-- 地区 -->
+      <v-select
+        v-model="total_addr"
+        :items="['长理东区', '长理南区', '长理西区']"
+        :rules="[v => !!v || '必须选择一个地区']"
+        label="地区"
+        required
+        :disabled="loading_switch"
+      ></v-select>
+
+      <!-- 详细地址 -->
+      <v-text-field
+        v-model="detail_addr"
+        :rules="[v => !!v || '请填入内容', v => (v && v.length <= 30) || '内容不能超过三十个字']"
+        label="详细地址"
+        required
+        clearable
+        :disabled="loading_switch"
+      ></v-text-field>
+
+      <!-- 联系方式 -->
+      <v-text-field
+        v-model="contact_content"
+        :rules="[v => (!!v ? (v && v.length >= 5) || '联系信息长度必须大于5' : true)]"
+        label="联系方式(选填)"
+        clearable
+        :disabled="loading_switch"
+      ></v-text-field>
+
+      <!-- 图片上传 -->
+      <v-file-input show-size label="图片上传" v-model="upload_file" :disabled="loading_switch"></v-file-input>
+
+      <v-btn color="error" class="mr-4" @click="reset" rounded :disabled="loading_switch">重置</v-btn>
+
+      <v-btn color="success" @click="resetValidation" rounded :loading="loading_switch">确认提交</v-btn>
+    </v-form>
+  </v-sheet>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+export default {
+  name: "Add",
+  props: ["closeBottomSheet"],
+  data: () => {
+    return {
+      // 表单自动验证结果 false为验证通过
+      valid: true,
+      // 标题
+      title: "",
+      // 内容
+      content: "",
+      // 地区
+      total_addr: "长理东区",
+      // 详细地址
+      detail_addr: "",
+      // 联系方式
+      contact_content: "",
+      // 信息类型
+      good_type: "found",
+      // 上传图片
+      upload_file: null,
+      // 上传加载
+      loading_switch: false
+    };
+  },
+  computed: {
+    ...mapState(["bg_img_url"])
+  },
+  methods: {
+    init() {},
+    // 触发验证
+    validate() {
+      this.$refs.form.validate();
+    },
+    // 重置整个表单
+    reset() {
+      this.$refs.form.reset();
+    },
+    // 隐藏错误显示
+    resetValidation() {
+      this.$refs.form.resetValidation();
+    },
+    // 关闭本页
+    close() {
+      this.$refs.form.reset();
+      this.closeBottomSheet()
+    },
+  },
+  created() {
+    this.init();
+  },
+  mounted() {
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/Home/children/Card.vue b/src/views/Home/children/Card.vue
new file mode 100644
index 0000000..11b54b7
--- /dev/null
+++ b/src/views/Home/children/Card.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-col cols="6" xs="6" sm="6" md="4" lg="3">
+    <v-card class="ma-2" raised>
+      <v-img
+        :src="content.img_url"
+        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+        :aspect-ratio="16/9"
+      ></v-img>
+
+      <v-list-item>
+        <v-list-item-content>
+          <p class="subtitle-2">{{content.title}}</p>
+          <div class="caption">{{content.total_addr}} {{content.create_time}}</div>
+        </v-list-item-content>
+      </v-list-item>
+    </v-card>
+  </v-col>
+</template>
+
+<script>
+export default {
+  name: "Card",
+  props: ["content"]
+};
+</script>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..ef6e86b
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  "transpileDependencies": [
+    "vuetify"
+  ]
+}
\ No newline at end of file