diff --git a/package.json b/package.json
index cf846c7..edd1483 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.5.17"
+    "element-ui": "^2.4.5",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.2.0",
@@ -17,6 +20,10 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0-0",
+    "node-sass": "^4.10.0",
+    "sass-loader": "^7.1.0",
+    "style-resources-loader": "^1.2.1",
+    "vue-cli-plugin-element": "^1.0.0",
     "vue-template-compiler": "^2.5.17"
   },
   "eslintConfig": {
diff --git a/src/App.vue b/src/App.vue
index fcc5662..ce427d2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,21 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+  html,body {
+    padding: 0;
+    margin: 0;
+  }
 </style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 879051a..94d4bc1 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -35,6 +35,13 @@ export default {
   name: 'HelloWorld',
   props: {
     msg: String
+  },
+  data() {
+    return {
+      baseUrl: process.env.BASE_URL
+    }
+  },
+  mounted() {
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 63eb05f..a4213e8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import store from './store'
+import './plugins/element.js'
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  router,
+  store,
+  render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/element.js b/src/plugins/element.js
new file mode 100644
index 0000000..c48a6ef
--- /dev/null
+++ b/src/plugins/element.js
@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(Element)
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..b4a893f
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      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')
+    }
+  ]
+})
diff --git a/src/store.js b/src/store.js
new file mode 100644
index 0000000..3c7424e
--- /dev/null
+++ b/src/store.js
@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  }
+})
diff --git a/src/styles/about.scss b/src/styles/about.scss
new file mode 100644
index 0000000..ed43034
--- /dev/null
+++ b/src/styles/about.scss
@@ -0,0 +1,4 @@
+$red: red;
+.about {
+  background: $blue;
+}
\ No newline at end of file
diff --git a/src/styles/imports.scss b/src/styles/imports.scss
new file mode 100644
index 0000000..01a2924
--- /dev/null
+++ b/src/styles/imports.scss
@@ -0,0 +1 @@
+$blue: blue;
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
new file mode 100644
index 0000000..6c70810
--- /dev/null
+++ b/src/views/About.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1 class="green">This is an about page</h1>
+  </div>
+</template>
+<style lang="scss" scoped>
+  $red: red;
+  .about {
+    background: $blue;
+  }
+  .green {
+    color: green;
+  }
+  // @import "../styles/about.scss";
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..dcd81da
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,190 @@
+<template>
+  <el-container>
+    <el-header style="padding: 0;height: auto;">
+      <div>
+        <div class="logoDiv">
+          <img src="https://crypko.ai/static/images/logo-header.png" class="logo-icon">
+          <div class="myTab">
+            <el-button type="text">注册</el-button>
+            <el-button type="text">登录</el-button>
+          </div>
+        </div>
+        <div class="myMenu">
+          <el-menu mode="horizontal" style="border-bottom: none;">
+            <el-menu-item index="1">全部</el-menu-item>
+            <el-menu-item index="2">待出售</el-menu-item>
+            <el-menu-item index="3">可租赁</el-menu-item>
+            <el-menu-item index="4">最新</el-menu-item>
+          </el-menu>
+          <el-input style="width: 200px;" size="small" placeholder="编码、名称、#标签..." suffix-icon="el-icon-search"></el-input>
+        </div>
+      </div>
+    </el-header>
+    <el-main>
+      <div class="mainContainer">
+        <el-card v-for="(x, i) in cardList" :key="i" :body-style="{ padding: '0px' }" class="mycard">
+          <div class="imageContainer">
+            <img src="https://img.crypko.ai/daisy/03b2239f442b83f6516ead0461328346e1bf3422_sm.jpg" class="image">
+          </div>
+          <div class="card-below">
+            <div>
+              <span>{{x.name}}</span>
+            </div>
+            <div>
+              <span >{{x.gen}}</span>
+              <span>{{x.num}}</span>
+            </div>
+          </div>
+        </el-card>
+      </div>
+      <div style="margin-top: 4rem;margin-bottom: 2rem;">
+        <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="currentPage4"
+                :page-sizes="[100, 200, 300, 400]"
+                :page-size="100"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="400">
+        </el-pagination>
+      </div>
+    </el-main>
+    <el-footer style="border-top: solid 1px #e6e6e6;" class="myFooter">
+      <div>
+        <p>市场</p>
+        <p>常见问题</p>
+        <p>教程</p>
+      </div>
+      <div>
+        <p>关于</p>
+        <p>白皮书</p>
+        <p>关于</p>
+        <p>隐私政策</p>
+      </div>
+      <div>
+        <p>telegram</p>
+        <p>twitter</p>
+        <p>youtube</p>
+      </div>
+      <div>
+        <p>Copyright © 2018 Andoromeda</p>
+      </div>
+    </el-footer>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: 'home',
+  data() {
+    return {
+      currentDate: new Date(),
+      cardList: [
+          {
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          }
+      ]
+    }
+  }
+}
+</script>
+<style scoped>
+  .myMenu {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: solid 1px #e6e6e6;
+    padding: 0 2rem;
+  }
+  .logo-icon {
+    width: 300px;
+  }
+  .logoDiv {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 2rem;
+  }
+  .myTab {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .imageContainer {
+    height: 140px;
+    width: 140px;
+    position: relative;
+  }
+  .image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    z-index: 1;
+    transition-duration: .3s;
+    transition-property: all;
+    transition-timing-function: ease-out;
+    transform: translateZ(0);
+  }
+  .mainContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+  .card-below {
+    padding: 6px 10px;
+    background-color: rgb(134, 205, 123);
+    font-size: 14px;
+    color: #fff;
+  }
+  .mycard {
+    margin-right: 4rem;
+    margin-bottom: 4rem;
+  }
+  .myFooter {
+    display: flex;
+    padding: 20px 20px 40px 20px;
+    flex-direction: row;
+    height: auto!important;
+    justify-content: space-between;
+    font-size: 14px;
+    color: #909399;
+  }
+  .myFooter p {
+    line-height: 14px;
+  }
+</style>
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..a7ed18c
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,33 @@
+const path = require('path')
+module.exports = {
+    css: {
+        // loaderOptions: {
+        //     sass: {
+        //         data: `@import "@/styles/imports.scss";`
+        //     },
+        // },
+    },
+    configureWebpack: {},
+    chainWebpack: (config) => {
+        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
+        types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
+        config.module.rule('images').use('url-loader')
+            .loader('url-loader')
+            .tap(options => Object.assign(options, { limit: 10240 }));
+    },
+    pluginOptions: {},
+    devServer: {
+        host: '0.0.0.0',
+        port: 8081,
+    }
+};
+
+function addStyleResource(rule) {
+    rule.use('style-resource')
+        .loader('style-resources-loader')
+        .options({
+            patterns: [
+                path.resolve(__dirname, './src/styles/imports.scss'),
+            ],
+        })
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 7dc1fba..a5c5966 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1087,6 +1087,12 @@ async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
+async-validator@~1.8.1:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  dependencies:
+    babel-runtime "6.x"
+
 async@^1.5.2:
   version "1.5.2"
   resolved "http://registry.npmjs.org/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -1143,7 +1149,7 @@ babel-eslint@^10.0.1:
     eslint-scope "3.7.1"
     eslint-visitor-keys "^1.0.0"
 
-babel-helper-vue-jsx-merge-props@^2.0.3:
+babel-helper-vue-jsx-merge-props@^2.0.0, babel-helper-vue-jsx-merge-props@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
 
@@ -1168,6 +1174,13 @@ babel-plugin-transform-vue-jsx@^4.0.1:
   dependencies:
     esutils "^2.0.2"
 
+babel-runtime@6.x:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -1803,7 +1816,7 @@ copy-webpack-plugin@^4.6.0:
     p-limit "^1.0.0"
     serialize-javascript "^1.4.0"
 
-core-js@^2.5.7:
+core-js@^2.4.0, core-js@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
 
@@ -2115,7 +2128,7 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
-deepmerge@^1.5.2:
+deepmerge@^1.2.0, deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
 
@@ -2330,6 +2343,17 @@ electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.82:
   version "1.3.85"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.85.tgz#5c46f790aa96445cabc57eb9d17346b1e46476fe"
 
+element-ui@^2.4.5:
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.4.11.tgz#db6a2d37001b8fe5fff9f176fb58bb3908cfa9c9"
+  dependencies:
+    async-validator "~1.8.1"
+    babel-helper-vue-jsx-merge-props "^2.0.0"
+    deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
+
 elliptic@^6.0.0:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
@@ -4375,6 +4399,10 @@ normalize-url@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+
 npm-bundled@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
@@ -5280,6 +5308,10 @@ regenerate@^1.2.1, regenerate@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+
 regenerator-runtime@^0.12.0:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
@@ -5432,6 +5464,10 @@ requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -6077,6 +6113,10 @@ thread-loader@^1.2.0:
     loader-runner "^2.3.0"
     loader-utils "^1.1.0"
 
+throttle-debounce@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -6387,6 +6427,10 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-cli-plugin-element@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-cli-plugin-element/-/vue-cli-plugin-element-1.0.0.tgz#2ee8cfecb9a49aabdc1d4cb58934113bddf3b4c0"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "http://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
@@ -6423,6 +6467,10 @@ vue-loader@^15.4.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -6445,6 +6493,10 @@ vue@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
 
+vuex@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"
+
 watchpack@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"