finish home page

package.json

@@ -10,8 +10,11 @@
     "core-js": "^3.6.4",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.11",
+    "vue-material": "^1.0.0-beta-11",
     "vue-router": "^3.1.5",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "roboto-fontface": "^0.6.0",
+    "material-design-icons": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.2.0",

public/img/icons/safari-pinned-tab.svg

@@ -1,149 +1,254 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
-fill="#000000" stroke="none">
-<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
--96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
-173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
-13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
-20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
--215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
-11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
--455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
--105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
-11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
--113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
-36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
--206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
--15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
--153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
-10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
--30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
-221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
--265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
--22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
--102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
--50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
--414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
-30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
--455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
--19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
-96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
--313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
--145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
--156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
--203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
--341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
-30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
-342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
-22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
--235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
--62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
--22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
--311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
--140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
-17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
--10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
--485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
--193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
-72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
-35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
--5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
--661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
-0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
--520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
--120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
--229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
-11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
--9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
-12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
-145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
--118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
--108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
--659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
-248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
-29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
--142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
--16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
--245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
-109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
--90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
--67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
--298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
-38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
-34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
-136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
-67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
-150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
-116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
-113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
-175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
-89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
-11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
-6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
-430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
-220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
-24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
-478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
-394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
-55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
-175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
-88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
-155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
-11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
-14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
-51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
-37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
-55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
-55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
-295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
-16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
-157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
-200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
-241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
-61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
-28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
-62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
-56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
-350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
-90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
-121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
-60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
-167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
-171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
-97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
-111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
-11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
-13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
-101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
-19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
-54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
-0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
-90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
-108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
-20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
--419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
--31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
--71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
--477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
--320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
--245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
--160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
--109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
-396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
-110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
--188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
--205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
-583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
-408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
-561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
--9615 0 20 -32z"/>
-</g>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="283px" height="283px" viewBox="0 0 283 283" enable-background="new 0 0 283 283" xml:space="preserve">  <image id="image0" width="283" height="283" x="0" y="0"
+    href="data:image/png;base64,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" />
 </svg>

src/App.vue

@@ -1,32 +1,140 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+    <div class="bg"></div>
     <router-view/>
   </div>
 </template>
 
 <style lang="scss">
+@import "./style/main";
+@import "./style/font";
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+body,
+button,
+input,
+select,
+textarea {
+  font: 12px/1.5tahoma, arial, \5b8b\4f53;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+}
+address,
+cite,
+dfn,
+em,
+var {
+  font-style: normal;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: couriernew, courier, monospace;
+}
+small {
+  font-size: 12px;
+}
+ul,
+ol {
+  list-style: none;
+}
+a {
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+sup {
+  vertical-align: text-top;
+}
+sub {
+  vertical-align: text-bottom;
+}
+legend {
+  color: #000;
+}
+fieldset,
+img {
+  border: 0;
+}
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+button {
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  outline: none;
+}
 #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;
+  /* 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: 0;
+  left: 0;
+  z-index: -100;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  background-image: linear-gradient(to bottom, #eaeaea, #ababab);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 </style>

src/components/HelloWorld.vue

@@ -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>

src/main.js

@@ -4,6 +4,23 @@ import './registerServiceWorker'
 import router from './router'
 import store from './store'
 
+// material
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/vue-material.min.css'
+import 'vue-material/dist/theme/default.css'
+import 'material-design-icons/iconfont/material-icons.css'
+Vue.use(VueMaterial)
+
+//px2rem
+window.onresize = setHtmlFontSize
+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'
+}
+setHtmlFontSize();
+
 Vue.config.productionTip = false
 
 new Vue({

src/router/index.js

@@ -1,6 +1,10 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+
+const linkActiveClass = 'my-link-active-class'
+
+// // pass custom class to Vue Material
+// Vue.material.router.linkActiveClass = linkActiveClass
 
 Vue.use(VueRouter)
 
@@ -8,16 +12,38 @@ 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: '/search',
+    name: 'Search',
+    component: () => import(/* webpackChunkName: "search" */ '../views/Search/Search.vue')
+  },
+  {
+    path: '/add',
+    name: 'Add',
+    component: () => import(/* webpackChunkName: "add" */ '../views/Add/Add.vue')
+  },
+  {
+    path: '/account',
+    name: 'Account',
+    component: () => import(/* webpackChunkName: "account" */ '../views/Account/Account.vue')
+  },
+  {
+    path: '/faq',
+    name: 'FAQ',
+    component: () => import(/* webpackChunkName: "faq" */ '../views/FAQ/FAQ.vue')
+  },
+  {
+    path: '/feedback',
+    name: 'Feedback',
+    component: () => import(/* webpackChunkName: "feedback" */ '../views/Feedback/Feedback.vue')
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: () => import(/* webpackChunkName: "settings" */ '../views/Settings/Settings.vue')
+  },
 ]
 
 const router = new VueRouter({

src/style/font.scss

@@ -0,0 +1,100 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+// @font-face {
+//   font-family: 'Material Icons';
+//   font-style: normal;
+//   font-weight: 400;
+//   src: url(/assets/MaterialIcons-Regular.eot); /* For IE6-8 */
+//   src: local('Material Icons'),
+//        local('MaterialIcons-Regular'),
+//        url(/assets/MaterialIcons-Regular.woff2) format('woff2'),
+//        url(/assets/MaterialIcons-Regular.woff) format('woff'),
+//        url(/assets/MaterialIcons-Regular.ttf) format('truetype');
+// }
+
+// .material-icons {
+//   font-family: 'Material Icons';
+//   font-weight: normal;
+//   font-style: normal;
+//   font-size: 24px;  /* Preferred icon size */
+//   display: inline-block;
+//   line-height: 1;
+//   text-transform: none;
+//   letter-spacing: normal;
+//   word-wrap: normal;
+//   white-space: nowrap;
+//   direction: ltr;
+
+//   /* Support for all WebKit browsers. */
+//   -webkit-font-smoothing: antialiased;
+//   /* Support for Safari and Chrome. */
+//   text-rendering: optimizeLegibility;
+
+//   /* Support for Firefox. */
+//   -moz-osx-font-smoothing: grayscale;
+
+//   /* Support for IE. */
+//   font-feature-settings: 'liga';
+// }

src/style/main.scss

@@ -0,0 +1 @@
+$main-color: #448aff;

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Add/Add.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="home" ref="home">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+            <md-icon>menu</md-icon>
+          </md-button>
+          <span class="md-title">Codebook</span>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button">
+            <md-icon>search</md-icon>
+          </md-button>
+          <md-menu md-align-trigger>
+            <md-button md-menu-trigger class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>Alphabetically</md-menu-item>
+              <md-menu-item>Recently Used</md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </div>
+      </md-app-toolbar>
+
+      <md-app-drawer :md-active.sync="menuVisible">
+        <div class="drawer-banner">
+          <md-icon class="default-avatar md-size-2x">face</md-icon>
+          <p class="md-title">Canary Codebook</p>
+          <p class="md-caption">zhaoyingbo@live.cn</p>
+        </div>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>person</md-icon>
+            <span class="md-list-item-text">Account</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>help</md-icon>
+            <span class="md-list-item-text">FAQ</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>question_answer</md-icon>
+            <span class="md-list-item-text">Provide Feedback</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>settings</md-icon>
+            <span class="md-list-item-text">Settings</span>
+          </md-list-item>
+          <md-list-item>
+            <md-icon>reply</md-icon>
+            <span class="md-list-item-text">Share</span>
+          </md-list-item>
+        </md-list>
+      </md-app-drawer>
+
+      <md-app-content>
+        <md-empty-state
+          md-icon="devices_other"
+          md-label="Create your first code"
+          md-description="Creating code, you'll be able to upload your information to the server and save it."
+          v-if="test_data.length == 0"
+        >
+          <md-button class="md-primary md-raised">Create first code</md-button>
+        </md-empty-state>
+
+        <div class="code-card" v-for="(code, index) in test_data" :key="index">
+          <p class="md-title">{{code.title}}</p>
+          <p class="md-caption">{{code.user_name}}</p>
+        </div>
+
+        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
+          <md-speed-dial-target>
+            <md-icon>add</md-icon>
+          </md-speed-dial-target>
+        </md-speed-dial>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menuVisible: false,
+      has_data: false,
+      clientHeight: "",
+      test_data: [
+        {
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'微信',
+          user_name:'15143211127',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },
+      ]
+    };
+  },
+  computed: {
+    ...mapState([])
+  },
+  methods: {
+    ...mapActions([]),
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
+    }
+  },
+  created() {},
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+    };
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.home {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .drawer-banner {
+    padding: 1rem 0.3rem 0.3rem 0.3rem;
+    box-sizing: border-box;
+    background: $main-color;
+    color: #fff;
+    .default-avatar {
+      color: #fff;
+      margin-bottom: 0.3rem;
+    }
+    .md-caption {
+      color: #fbfbfb;
+    }
+  }
+  .code-card {
+    padding: .3rem 0;
+    border-bottom: 1px #eee solid;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+</style>

src/views/FAQ/FAQ.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="home" ref="home">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+            <md-icon>menu</md-icon>
+          </md-button>
+          <span class="md-title">Codebook</span>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button">
+            <md-icon>search</md-icon>
+          </md-button>
+          <md-menu md-align-trigger>
+            <md-button md-menu-trigger class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>Alphabetically</md-menu-item>
+              <md-menu-item>Recently Used</md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </div>
+      </md-app-toolbar>
+
+      <md-app-drawer :md-active.sync="menuVisible">
+        <div class="drawer-banner">
+          <md-icon class="default-avatar md-size-2x">face</md-icon>
+          <p class="md-title">Canary Codebook</p>
+          <p class="md-caption">zhaoyingbo@live.cn</p>
+        </div>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>person</md-icon>
+            <span class="md-list-item-text">Account</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>help</md-icon>
+            <span class="md-list-item-text">FAQ</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>question_answer</md-icon>
+            <span class="md-list-item-text">Provide Feedback</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>settings</md-icon>
+            <span class="md-list-item-text">Settings</span>
+          </md-list-item>
+          <md-list-item>
+            <md-icon>reply</md-icon>
+            <span class="md-list-item-text">Share</span>
+          </md-list-item>
+        </md-list>
+      </md-app-drawer>
+
+      <md-app-content>
+        <md-empty-state
+          md-icon="devices_other"
+          md-label="Create your first code"
+          md-description="Creating code, you'll be able to upload your information to the server and save it."
+          v-if="test_data.length == 0"
+        >
+          <md-button class="md-primary md-raised">Create first code</md-button>
+        </md-empty-state>
+
+        <div class="code-card" v-for="(code, index) in test_data" :key="index">
+          <p class="md-title">{{code.title}}</p>
+          <p class="md-caption">{{code.user_name}}</p>
+        </div>
+
+        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
+          <md-speed-dial-target>
+            <md-icon>add</md-icon>
+          </md-speed-dial-target>
+        </md-speed-dial>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menuVisible: false,
+      has_data: false,
+      clientHeight: "",
+      test_data: [
+        {
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'微信',
+          user_name:'15143211127',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },
+      ]
+    };
+  },
+  computed: {
+    ...mapState([])
+  },
+  methods: {
+    ...mapActions([]),
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
+    }
+  },
+  created() {},
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+    };
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.home {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .drawer-banner {
+    padding: 1rem 0.3rem 0.3rem 0.3rem;
+    box-sizing: border-box;
+    background: $main-color;
+    color: #fff;
+    .default-avatar {
+      color: #fff;
+      margin-bottom: 0.3rem;
+    }
+    .md-caption {
+      color: #fbfbfb;
+    }
+  }
+  .code-card {
+    padding: .3rem 0;
+    border-bottom: 1px #eee solid;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+</style>

src/views/Feedback/Feedback.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="home" ref="home">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+            <md-icon>menu</md-icon>
+          </md-button>
+          <span class="md-title">Codebook</span>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button">
+            <md-icon>search</md-icon>
+          </md-button>
+          <md-menu md-align-trigger>
+            <md-button md-menu-trigger class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>Alphabetically</md-menu-item>
+              <md-menu-item>Recently Used</md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </div>
+      </md-app-toolbar>
+
+      <md-app-drawer :md-active.sync="menuVisible">
+        <div class="drawer-banner">
+          <md-icon class="default-avatar md-size-2x">face</md-icon>
+          <p class="md-title">Canary Codebook</p>
+          <p class="md-caption">zhaoyingbo@live.cn</p>
+        </div>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>person</md-icon>
+            <span class="md-list-item-text">Account</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>help</md-icon>
+            <span class="md-list-item-text">FAQ</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>question_answer</md-icon>
+            <span class="md-list-item-text">Provide Feedback</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>settings</md-icon>
+            <span class="md-list-item-text">Settings</span>
+          </md-list-item>
+          <md-list-item>
+            <md-icon>reply</md-icon>
+            <span class="md-list-item-text">Share</span>
+          </md-list-item>
+        </md-list>
+      </md-app-drawer>
+
+      <md-app-content>
+        <md-empty-state
+          md-icon="devices_other"
+          md-label="Create your first code"
+          md-description="Creating code, you'll be able to upload your information to the server and save it."
+          v-if="test_data.length == 0"
+        >
+          <md-button class="md-primary md-raised">Create first code</md-button>
+        </md-empty-state>
+
+        <div class="code-card" v-for="(code, index) in test_data" :key="index">
+          <p class="md-title">{{code.title}}</p>
+          <p class="md-caption">{{code.user_name}}</p>
+        </div>
+
+        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
+          <md-speed-dial-target>
+            <md-icon>add</md-icon>
+          </md-speed-dial-target>
+        </md-speed-dial>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menuVisible: false,
+      has_data: false,
+      clientHeight: "",
+      test_data: [
+        {
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'微信',
+          user_name:'15143211127',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },
+      ]
+    };
+  },
+  computed: {
+    ...mapState([])
+  },
+  methods: {
+    ...mapActions([]),
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
+    }
+  },
+  created() {},
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+    };
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.home {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .drawer-banner {
+    padding: 1rem 0.3rem 0.3rem 0.3rem;
+    box-sizing: border-box;
+    background: $main-color;
+    color: #fff;
+    .default-avatar {
+      color: #fff;
+      margin-bottom: 0.3rem;
+    }
+    .md-caption {
+      color: #fbfbfb;
+    }
+  }
+  .code-card {
+    padding: .3rem 0;
+    border-bottom: 1px #eee solid;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+</style>

src/views/Home.vue

@@ -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>

src/views/Home/Home.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="home" ref="home">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+            <md-icon>menu</md-icon>
+          </md-button>
+          <span class="md-title">Codebook</span>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button">
+            <md-icon>search</md-icon>
+          </md-button>
+          <md-menu md-align-trigger>
+            <md-button md-menu-trigger class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>Alphabetically</md-menu-item>
+              <md-menu-item>Recently Used</md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </div>
+      </md-app-toolbar>
+
+      <md-app-drawer :md-active.sync="menuVisible">
+        <div class="drawer-banner">
+          <md-icon class="default-avatar md-size-2x">face</md-icon>
+          <p class="md-title">Canary Codebook</p>
+          <p class="md-caption">zhaoyingbo@live.cn</p>
+        </div>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>person</md-icon>
+            <span class="md-list-item-text">Account</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>help</md-icon>
+            <span class="md-list-item-text">FAQ</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>question_answer</md-icon>
+            <span class="md-list-item-text">Provide Feedback</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>settings</md-icon>
+            <span class="md-list-item-text">Settings</span>
+          </md-list-item>
+          <md-list-item>
+            <md-icon>reply</md-icon>
+            <span class="md-list-item-text">Share</span>
+          </md-list-item>
+        </md-list>
+      </md-app-drawer>
+
+      <md-app-content>
+        <md-empty-state
+          md-icon="devices_other"
+          md-label="Create your first code"
+          md-description="Creating code, you'll be able to upload your information to the server and save it."
+          v-if="test_data.length == 0"
+        >
+          <md-button class="md-primary md-raised">Create first code</md-button>
+        </md-empty-state>
+
+        <div class="code-card" v-for="(code, index) in test_data" :key="index">
+          <p class="md-title">{{code.title}}</p>
+          <p class="md-caption">{{code.user_name}}</p>
+        </div>
+
+        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
+          <md-speed-dial-target>
+            <md-icon>add</md-icon>
+          </md-speed-dial-target>
+        </md-speed-dial>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menuVisible: false,
+      has_data: false,
+      clientHeight: "",
+      test_data: [
+        {
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'微信',
+          user_name:'15143211127',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },
+      ]
+    };
+  },
+  computed: {
+    ...mapState([])
+  },
+  methods: {
+    ...mapActions([]),
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
+    }
+  },
+  created() {},
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+    };
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.home {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .drawer-banner {
+    padding: 1rem 0.3rem 0.3rem 0.3rem;
+    box-sizing: border-box;
+    background: $main-color;
+    color: #fff;
+    .default-avatar {
+      color: #fff;
+      margin-bottom: 0.3rem;
+    }
+    .md-caption {
+      color: #fbfbfb;
+    }
+  }
+  .code-card {
+    padding: .3rem 0;
+    border-bottom: 1px #eee solid;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+</style>

src/views/Search/Search.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="home" ref="home">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+            <md-icon>menu</md-icon>
+          </md-button>
+          <span class="md-title">Codebook</span>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button">
+            <md-icon>search</md-icon>
+          </md-button>
+          <md-menu md-align-trigger>
+            <md-button md-menu-trigger class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>Alphabetically</md-menu-item>
+              <md-menu-item>Recently Used</md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </div>
+      </md-app-toolbar>
+
+      <md-app-drawer :md-active.sync="menuVisible">
+        <div class="drawer-banner">
+          <md-icon class="default-avatar md-size-2x">face</md-icon>
+          <p class="md-title">Canary Codebook</p>
+          <p class="md-caption">zhaoyingbo@live.cn</p>
+        </div>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>person</md-icon>
+            <span class="md-list-item-text">Account</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>help</md-icon>
+            <span class="md-list-item-text">FAQ</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>question_answer</md-icon>
+            <span class="md-list-item-text">Provide Feedback</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>settings</md-icon>
+            <span class="md-list-item-text">Settings</span>
+          </md-list-item>
+          <md-list-item>
+            <md-icon>reply</md-icon>
+            <span class="md-list-item-text">Share</span>
+          </md-list-item>
+        </md-list>
+      </md-app-drawer>
+
+      <md-app-content>
+        <md-empty-state
+          md-icon="devices_other"
+          md-label="Create your first code"
+          md-description="Creating code, you'll be able to upload your information to the server and save it."
+          v-if="test_data.length == 0"
+        >
+          <md-button class="md-primary md-raised">Create first code</md-button>
+        </md-empty-state>
+
+        <div class="code-card" v-for="(code, index) in test_data" :key="index">
+          <p class="md-title">{{code.title}}</p>
+          <p class="md-caption">{{code.user_name}}</p>
+        </div>
+
+        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
+          <md-speed-dial-target>
+            <md-icon>add</md-icon>
+          </md-speed-dial-target>
+        </md-speed-dial>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menuVisible: false,
+      has_data: false,
+      clientHeight: "",
+      test_data: [
+        {
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'微信',
+          user_name:'15143211127',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },
+      ]
+    };
+  },
+  computed: {
+    ...mapState([])
+  },
+  methods: {
+    ...mapActions([]),
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
+    }
+  },
+  created() {},
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+    };
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.home {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .drawer-banner {
+    padding: 1rem 0.3rem 0.3rem 0.3rem;
+    box-sizing: border-box;
+    background: $main-color;
+    color: #fff;
+    .default-avatar {
+      color: #fff;
+      margin-bottom: 0.3rem;
+    }
+    .md-caption {
+      color: #fbfbfb;
+    }
+  }
+  .code-card {
+    padding: .3rem 0;
+    border-bottom: 1px #eee solid;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+</style>

vue.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  productionSourceMap: false,
+  pwa: {
+    name: 'Codebook',
+    // themeColor: '#e54d42',
+    workboxOptions: {
+      skipWaiting: true
+    },
+    iconPaths: {
+      favicon32: 'favicon.ico',
+      favicon16: 'favicon.ico',
+      appleTouchIcon: 'favicon.ico',
+      maskIcon: 'favicon.ico',
+      msTileImage: 'favicon.ico'
+    }
+  }
+}