diff --git a/package-lock.json b/package-lock.json
index afcaadb..bafad6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2467,6 +2467,14 @@
       "integrity": "sha512-L8vcjDTCOIJk7wFvmlEUN7AsSb8T+2JrdP7KINBjzr24TJ5Mwj590sLu3BC7zNZowvJWa/JtPmD8eJCzdtDWjA==",
       "dev": true
     },
+    "aes-decrypter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+      "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
+      "requires": {
+        "pkcs7": "^0.2.3"
+      }
+    },
     "agent-base": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
@@ -5870,6 +5878,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -6171,6 +6184,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-shim": {
+      "version": "4.5.14",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.14.tgz",
+      "integrity": "sha512-7SwlpL+2JpymWTt8sNLuC2zdhhc+wrfe5cMPI2j0o6WsPdfAiPwmFy2f0AocPB4RQVBOZ9kNTgi5YF7TdhkvEg=="
+    },
     "es6-promise": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
@@ -7791,6 +7809,22 @@
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
       "dev": true
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -8436,6 +8470,11 @@
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -8676,6 +8715,11 @@
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-generator-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
@@ -10187,6 +10231,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "m3u8-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+      "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -10517,6 +10566,14 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -10880,6 +10937,11 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "mux.js": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+      "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+    },
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -11514,8 +11576,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -11951,6 +12012,11 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-headers": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.3.tgz",
+      "integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA=="
+    },
     "parse-json": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
@@ -12124,6 +12190,11 @@
         "node-modules-regexp": "^1.0.0"
       }
     },
+    "pkcs7": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
+      "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
+    },
     "pkg-dir": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
@@ -12898,8 +12969,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -13661,12 +13731,28 @@
         "aproba": "^1.1.1"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -15510,6 +15596,11 @@
         }
       }
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
+    },
     "tsutils": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
@@ -15816,6 +15907,11 @@
         "prepend-http": "^1.0.1"
       }
     },
+    "url-toolkit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.0.tgz",
+      "integrity": "sha512-Rde0c9S4fJK3FaHim3DSgdQ8IFrSXcZCpAJo9T7/FA+BoQGhK0ow3mpwGQLJCPYsNn6TstpW7/7DzMpSpz9F9w=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -15908,6 +16004,99 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "video.js": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+      "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+      "requires": {
+        "babel-runtime": "^6.9.2",
+        "global": "4.3.2",
+        "safe-json-parse": "4.0.0",
+        "tsml": "1.0.1",
+        "videojs-font": "2.1.0",
+        "videojs-ie8": "1.1.2",
+        "videojs-vtt.js": "0.12.6",
+        "xhr": "2.4.0"
+      }
+    },
+    "videojs-contrib-hls": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-hls/-/videojs-contrib-hls-5.15.0.tgz",
+      "integrity": "sha512-18zbMYZ0XRBKTPEayA9bFTWWrqhT9b4G8+zf0czJLD7Epe5PcK1I/3dflTHQeQ5rwlWir+/XnFU3sMg/B2MMcw==",
+      "requires": {
+        "aes-decrypter": "1.0.3",
+        "global": "^4.3.0",
+        "m3u8-parser": "2.1.0",
+        "mux.js": "4.3.2",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^5.19.1 || ^6.2.0",
+        "videojs-contrib-media-sources": "4.7.2",
+        "webwackify": "0.1.6"
+      }
+    },
+    "videojs-contrib-media-sources": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-media-sources/-/videojs-contrib-media-sources-4.7.2.tgz",
+      "integrity": "sha512-e6iCHWBFuV05EGo7v+pS9iepObXnJ9joms467gzi8ZjpKVb3ifha9M0Ja24Rd8JfvYpzjltsgDVtGFDvIg4hQQ==",
+      "requires": {
+        "global": "^4.3.0",
+        "mux.js": "4.3.2",
+        "video.js": "^5.17.0 || ^6.2.0",
+        "webwackify": "0.1.6"
+      }
+    },
+    "videojs-flash": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/videojs-flash/-/videojs-flash-2.2.1.tgz",
+      "integrity": "sha512-mHu6TD12EKkxMvr8tg4AcfV/DuVLff427nneoZom3N9Dd2bv0sJOWwdLPQH1v5BCuAuXAVuAOba56ovTl+G3tQ==",
+      "requires": {
+        "global": "^4.4.0",
+        "video.js": "^6 || ^7",
+        "videojs-swf": "5.4.2"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+          "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "^0.11.10"
+          }
+        }
+      }
+    },
+    "videojs-font": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+      "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+    },
+    "videojs-hotkeys": {
+      "version": "0.2.26",
+      "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.26.tgz",
+      "integrity": "sha512-/QSjdpzF8aoC4idtQeGDbyeoOgMmmJWlzKZSTtCkNKinT09QMxrczys35q9EiCQXJApIsHGZ5i28mGVCe1gLQw=="
+    },
+    "videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
+      "requires": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "videojs-swf": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/videojs-swf/-/videojs-swf-5.4.2.tgz",
+      "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+      "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -16038,6 +16227,18 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-video-player": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vue-video-player/-/vue-video-player-5.0.2.tgz",
+      "integrity": "sha512-IZXeRGGSX4YIp54G0Q5cB7iqh6Ok6Dpa2jRkjdyvMWw7MShJuh54/d5QNb1CZ+CvZUzX/TH7osnpir7mBNcFvQ==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "video.js": "^6.6.0",
+        "videojs-contrib-hls": "^5.12.2",
+        "videojs-flash": "^2.1.0",
+        "videojs-hotkeys": "^0.2.20"
+      }
+    },
     "vuescroll": {
       "version": "4.15.0",
       "resolved": "https://registry.npmjs.org/vuescroll/-/vuescroll-4.15.0.tgz",
@@ -16541,6 +16742,11 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "webwackify": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/webwackify/-/webwackify-0.1.6.tgz",
+      "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
+    },
     "whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
@@ -16845,6 +17051,17 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "xml-name-validator": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
@@ -16875,8 +17092,7 @@
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "y18n": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index 95b9b4a..fc77dab 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "vue-parallax": "^1.1.1",
     "vue-property-decorator": "^8.3.0",
     "vue-router": "^3.1.5",
+    "vue-video-player": "^5.0.2",
     "vuescroll": "^4.15.0",
     "vuex": "^3.1.2",
     "vuex-class": "^0.3.2"
diff --git a/src/App.vue b/src/App.vue
index 3d79b80..55ce770 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,16 +2,10 @@
   <div id="app">
     <el-container>
       <el-main>
-        <mainHeader
-          @showModal="showModal"
-          @onShowCreateModal="showCreateModal"
-        ></mainHeader>
+        <mainHeader @showModal="showModal" @onShowCreateModal="showCreateModal"></mainHeader>
         <router-view />
-        <mainFooter />
-        <Login
-          :show="modalShow"
-          @closeModal="showModal"
-        />
+        <!-- <mainFooter /> -->
+        <Login :show="modalShow" @closeModal="showModal" />
         <CreateModal
           v-if="isLogin"
           :showCreateModal="isCreateModalShow"
@@ -28,9 +22,10 @@ import Vue from 'vue'
 import Component from 'vue-class-component'
 import mainHeader from '@/components/header.vue'
 import mainFooter from '@/components/footer.vue'
-import { Mutation, State } from 'vuex-class'
+import { Mutation, State, Getter, namespace } from 'vuex-class'
 const Login = () => import('./components/loginModal.vue')
 const CreateModal = () => import('./components/createBlog.vue')
+const HOME_MODULE = namespace('MODULE_HOME')
 
 import { verifyToken } from './api/login'
 import { createBlog } from '@/api/blog'
@@ -40,10 +35,12 @@ import { createBlog } from '@/api/blog'
 })
 export default class App extends Vue {
   @State('isLogin') public isLogin!: boolean
-  @Mutation('SET_LOGIN') public setLogin!: (isLogin: boolean) => void;
-  @Mutation('SET_USERINFO') public setUseInfo!: (res: any) => void;
-  public modalShow: boolean = false;
-  public isCreateModalShow: boolean = false;
+  @HOME_MODULE.Getter('getIntroduction') public intro: any
+  @Mutation('SET_LOGIN') public setLogin!: (isLogin: boolean) => void
+  @Mutation('SET_USERINFO') public setUseInfo!: (res: any) => void
+  @HOME_MODULE.Mutation('updateBlogs') public updateBlogs!: (data: any) => void
+  public modalShow: boolean = false
+  public isCreateModalShow: boolean = false
   public showModal(show: boolean) {
     this.modalShow = show
   }
@@ -63,8 +60,12 @@ export default class App extends Vue {
       createBlog(newBlog, localStorage.token)
         .then((res: any) => {
           if (res.result._id) {
-            //   this.getBlogInfo()
-            this.$router.push(`/content/${res.result._id}`)
+            if (res.mediaType === 'blog') {
+              this.$router.push(`/content/${res.result._id}`)
+            }
+            if (res.result.cat === this.intro.nav) {
+              this.updateBlogs(res.result)
+            }
           }
         })
         .catch(() => {
diff --git a/src/api/file.ts b/src/api/file.ts
index 9c0c1aa..797532f 100644
--- a/src/api/file.ts
+++ b/src/api/file.ts
@@ -16,3 +16,22 @@ export const uploadImg = (imgFile: any, token: string) => {
       })
   })
 }
+
+export const uploadFiles = (files: any, token: string) => {
+  return new Promise((resolve, reject) => {
+    const formdata = new FormData()
+    files.forEach((file: any) => {
+      formdata.append('data', file)
+    })
+    axios
+      .post(`${process.env.VUE_APP_URL}/myWeb/uploadFiles`, formdata, {
+        headers: { authorization: 'Bearer ' + token, 'Content-Type': 'multipart/form-data' },
+      })
+      .then((res) => {
+        resolve(res.data.result)
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}
diff --git a/src/components/CardView.vue b/src/components/CardView.vue
index 049e7f1..ba58653 100644
--- a/src/components/CardView.vue
+++ b/src/components/CardView.vue
@@ -1,20 +1,28 @@
 <template>
   <el-card class="box-card">
-    <div class="info">
+    <div v-if="mediaType === 'blog'" class="media_blog">
       <div>
-        <h3
-          @click="select(id)"
-          class="title"
-        >{{ title }}<i class="el-icon-right"></i></h3>
+        <h3 @click="select(id)" class="title">{{ title }}<i class="el-icon-right"></i></h3>
         <div class="insight"><i class="el-icon-chat-line-round">&nbsp;0</i> <i class="el-icon-view">&nbsp; 0</i></div>
       </div>
       <span class="time">
-        <el-tag
-          type="info"
-          size="small"
-        >{{ formatTime(time) }}</el-tag>
+        <el-tag type="info" size="small">{{ formatTime(time) }}</el-tag>
       </span>
     </div>
+    <div class="media_multi" v-else>
+      <div class="des-box">
+        <h3 class="title">{{ title }}</h3>
+        <el-tag size="mini" type="info">{{ formatTime(time) }}</el-tag>
+      </div>
+      <div class="media_box">
+        <videoPlayer
+          class="video-player vjs-custom-skin"
+          ref="videoPlayer"
+          :playsinline="true"
+          :options="playerOptions"
+        />
+      </div>
+    </div>
   </el-card>
 </template>
 
@@ -22,23 +30,61 @@
 import Vue from 'vue'
 import { format } from '../utils/formatTime'
 import Component from 'vue-class-component'
+import { videoPlayer } from 'vue-video-player'
+import 'video.js/dist/video-js.css'
 
 @Component({
+  name: 'CardView',
   props: {
     title: String,
     time: String,
     id: String,
     cat: String,
+    mediaType: String,
+    mediaSources: Array,
   },
+  components: { videoPlayer },
 })
 export default class CardView extends Vue {
-  public select (id: string): void {
+  public playerOptions: any = {
+    playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
+    autoplay: false, // 如果为true,浏览器准备好时开始回放。
+    muted: false, // 默认情况下将会消除任何音频。
+    loop: false, // 是否视频一结束就重新开始。
+    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+    language: 'zh-CN',
+    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+    sources: [],
+    poster: '', // 封面地址
+    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+    controlBar: {
+      timeDivider: true, // 当前时间和持续时间的分隔符
+      durationDisplay: true, // 显示持续时间
+      remainingTimeDisplay: false, // 是否显示剩余时间功能
+      fullscreenToggle: true, // 是否显示全屏按钮
+    },
+  }
+
+  public select(id: string): void {
     this.$emit('select', id)
   }
 
-  public formatTime (time: string) {
+  public formatTime(time: string) {
     return format(time)
   }
+
+  public mounted() {
+    this.$nextTick(() => {
+      const sources = this.$props.mediaSources
+      this.playerOptions.sources = sources.map((source: string) => {
+        return {
+          type: 'video/mp4',
+          src: `http://localhost:8080/static/` + source,
+        }
+      })
+    })
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -49,15 +95,13 @@ export default class CardView extends Vue {
   box-shadow: none !important;
   border: none;
   margin: 0 auto;
-  .title {
-    cursor: pointer;
-    font-size: $blog-title-size;
-  }
-  .info {
+  .media_blog {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     .title {
+      cursor: pointer;
+      font-size: $blog-title-size;
       margin-bottom: 10px;
       i {
         display: none;
@@ -77,5 +121,20 @@ export default class CardView extends Vue {
       }
     }
   }
+  .media_multi {
+    .des-box {
+      display: flex;
+      justify-content: space-between;
+      .title {
+        font-size: $blog-title-size;
+        margin-bottom: 10px;
+      }
+    }
+
+    .media_box {
+      padding: 20px;
+      border-radius: 10px;
+    }
+  }
 }
 </style>
diff --git a/src/components/createBlog.vue b/src/components/createBlog.vue
index 2c2d11f..95c3e58 100644
--- a/src/components/createBlog.vue
+++ b/src/components/createBlog.vue
@@ -65,6 +65,69 @@
           ></el-option>
         </el-select>
       </el-form-item>
+      <el-form-item
+        label="媒体类型"
+        prop="media_type"
+      >
+        <el-select
+          @change="onMediaSelet"
+          filterable
+          v-model="form.media_type"
+          placeholder="选择博客媒体类型"
+        >
+          <el-option
+            key="1"
+            label="文章"
+            value="blog"
+          ></el-option>
+          <el-option
+            key="2"
+            label="图片"
+            value="image"
+          ></el-option>
+          <el-option
+            key="3"
+            label="音乐"
+            value="music"
+          ></el-option>
+          <el-option
+            key="4"
+            label="视频"
+            value="vedio"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        label="媒体文件"
+        prop="mediaSources"
+        style="margin-left: 10px;display:block"
+      >
+        <el-button
+          type="primary"
+          @click="openFileInput"
+        >add</el-button>
+        <div style="display:block">
+          <el-tag
+            class="url"
+            size="mini"
+            type="success"
+            v-if="form.mediaSources.length"
+            v-for="(url,index) in form.mediaSources"
+            :key="index"
+            :closable="true"
+            @close="removeFile(url)"
+          >{{url}}</el-tag>
+        </div>
+        <input
+          id="fileInput"
+          type="file"
+          @change="fileChange"
+          v-show="false"
+          multiple="multiple"
+          accept="image/jpg,image/jpeg, image/png, video/mp4, audio/*"
+        >
+        </input>
+      </el-form-item>
     </el-form>
     <div
       slot="footer"
@@ -85,6 +148,7 @@
 
 <script>
 import { getBlogCats } from '@/api/blog'
+import { uploadFiles } from '@/api/file'
 export default {
   props: {
     showCreateModal: {
@@ -98,12 +162,15 @@ export default {
         title: '',
         tag: '',
         cat: '',
+        media_type: '',
+        mediaSources: []
       },
       tags: [],
       cats: [],
       formRules: {
         title: [{ required: true, message: '请输入主题', trigger: 'change' }],
         cat: [{ required: true, message: '请选择种类', trigger: 'change' }],
+        media_type: [{ required: true, message: '请选择媒体类型', trigger: 'change' }],
       },
     }
   },
@@ -116,18 +183,19 @@ export default {
         title: this.form.title,
         tags: this.tags,
         cat: this.form.cat,
+        mediaType: this.form.media_type,
+        mediaSources: this.form.mediaSources,
         isTech: false,
       }
       this.$refs.blogForm.validate((valid) => {
         if (valid) {
           this.$emit('onCreateBlog', newBlog)
         } else {
-          return false
+          throw new Error('invalid');
         }
       })
       this.$refs.blogForm.resetFields()
       this.tags = []
-      this.cats = []
     },
     addTag () {
       if (this.form.tag) {
@@ -138,6 +206,25 @@ export default {
     onCatSelect (val) {
       this.form.cat = val
     },
+    onMediaSelet (val) {
+      this.form.media_type = val;
+    },
+
+    fileChange (e) {
+      uploadFiles(e.target.files, localStorage.token).then((res) => {
+        this.form.mediaSources.push(...res.fileUrls)
+      }).catch((err) => {
+        this.$message.error('Cannot upload files' + err.toString());
+      })
+    },
+    openFileInput () {
+      document.getElementById('fileInput').click()
+    },
+    removeFile (url) {
+      const index = this.form.mediaSources.indexOf(url);
+      this.form.mediaSources.splice(index, 1)
+    }
+
   },
   mounted () {
     this.$nextTick(() => {
@@ -154,6 +241,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#fileInput {
+  width: 0;
+  height: 0;
+}
+.url {
+  margin: 0 5px;
+}
 .tagInput {
   display: flex;
   justify-content: space-between;
diff --git a/src/components/footer.vue b/src/components/footer.vue
index 0b4bf3f..7e486f1 100644
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -1,39 +1,5 @@
 <template>
-  <!-- 
-    footer 分为两行 第一行 三列  左边为 nav导航 中间为 小号logo 右边为social connect
-                   第二行 一列 个人邮箱
- -->
   <div class="footer">
-    <!-- <el-row>
-      <el-col :span="8">
-        <div class="flex-left">
-          <p class="footer-nav"><a href="">Anything</a></p>
-          <p class="footer-nav"><a href="">Music</a></p>
-          <p class="footer-nav"><a href="">Dota</a></p>
-          <p class="footer-nav"><a href="">Bambi</a></p>
-        </div>
-      </el-col>
-      <el-col :span="8">
-        <div class="flex-center">
-          <h2 class="main-font first-letter">A</h2>
-          <h2 class="main-font reset-letter">BOUT LIFE</h2>
-        </div>
-      </el-col>
-      <el-col :span="8">
-        <div class="flex-right">
-          <p class="footer-nav">
-            <a href="https://github.com/mryanshenghong">
-              <i class="iconfont iconsocialgithub"></i>
-            </a>
-          </p>
-          <p class="footer-nav">
-            <a href="http://www.linkedin.com/in/shenghongyan">
-              <i class="iconfont iconsociallinkedin"></i>
-            </a>
-          </p>
-        </div>
-      </el-col>
-    </el-row> -->
     <el-row>
       <el-col>
         <div class="email">©2020<a href="mailto:mryanshenghong@gamil.com">&nbsp; Shenghong Yan</a></div>
diff --git a/src/components/header.vue b/src/components/header.vue
index 42bb07e..da3007c 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -74,6 +74,10 @@ export default class Header extends Vue {
     }
   }
 
+  public goHome() {
+    this.$router.push('/')
+  }
+
   private onLogout() {
     userLogout(this.userInfo.email)
       .then((res: any) => {
@@ -90,10 +94,6 @@ export default class Header extends Vue {
         })
       })
   }
-
-  public goHome() {
-    this.$router.push('/')
-  }
 }
 </script>
 
diff --git a/src/shims-global.d.ts b/src/shims-global.d.ts
index 51246d1..51be405 100644
--- a/src/shims-global.d.ts
+++ b/src/shims-global.d.ts
@@ -5,6 +5,7 @@ declare module 'element-ui'
 declare module 'element-ui/lib/locale/lang/zh-CN'
 declare module 'element-ui/lib/locale/lang/en'
 declare module 'element-ui/lib/locale'
+declare module 'vue-video-player'
 
 declare module '*.vue' {
   import Vue, { VNode } from 'vue'
diff --git a/src/store/home/mutations.ts b/src/store/home/mutations.ts
index 5516dc6..77b1390 100644
--- a/src/store/home/mutations.ts
+++ b/src/store/home/mutations.ts
@@ -16,4 +16,12 @@ export const HomeMutation: MutationTree<HomeState> = {
       blogs,
     })
   },
+  updateBlogs(state: HomeState, blog: any) {
+    const blogs = state.blogs
+    blogs.push(blog)
+    Object.assign(state, {
+      ...state,
+      blogs,
+    })
+  },
 }
diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
index 9889e23..adc61dd 100644
--- a/src/views/home/Home.vue
+++ b/src/views/home/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <div class="home-nav">
-      <h1 class="home-title">{{ intro.title }}</h1>
+      <h1 v-if="!isSm" class="home-title">{{ intro.title }}</h1>
       <div class="blog-navs">
         <p class="blog-nav"><a @click="getBlogsAndInfo('Anything')">Anything</a></p>
         <p class="blog-nav"><a @click="getBlogsAndInfo('Music')">Music</a></p>
@@ -9,26 +9,10 @@
         <p class="blog-nav"><a @click="getBlogsAndInfo('Bambi')">Bambi</a></p>
       </div>
     </div>
-    <el-col
-      :xs="24"
-      :sm="24"
-      :md="12"
-      :lg="12"
-      :xl="12"
-    >
-      <Introduction
-        :content='intro.content'
-        :media="intro.media"
-        :media_type="intro.media_type"
-      />
+    <el-col v-if="!isSm" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+      <Introduction :content="intro.content" :media="intro.media" :media_type="intro.media_type" />
     </el-col>
-    <el-col
-      :xs="24"
-      :sm="24"
-      :md="12"
-      :lg="12"
-      :xl="12"
-    >
+    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
       <Blogs />
     </el-col>
   </div>
@@ -48,23 +32,39 @@ const homeModule = namespace('MODULE_HOME')
   components: { Introduction, Blogs },
 })
 export default class Home extends Vue {
-  @homeModule.Getter('getIntroduction') public intro!:
-    {
-      nav: string,
-      title: string,
-      content: string,
-      media_type: string,
-      media: string,
-    }
+  public isSm: boolean = false
+  @homeModule.Getter('getIntroduction') public intro!: {
+    nav: string
+    title: string
+    content: string
+    media_type: string
+    media: string
+  }
   @homeModule.Action('changIntroduction') public getBlogsAndInfo!: (navName: string) => void
   public created() {
+    window.addEventListener('resize', this.handleResize)
     this.getBlogsAndInfo(this.intro.nav)
   }
+
+  public handleResize() {
+    let clientWidth = document.documentElement.clientWidth
+    if (clientWidth < 768) {
+      this.isSm = true
+    } else {
+      this.isSm = false
+    }
+  }
+
+  public mounted() {
+    this.$nextTick(() => {
+      this.handleResize()
+    })
+  }
 }
 </script>
 <style scoped lang="scss">
 .home {
-  height: calc(100vh - 58px);
+  height: calc(100vh - 108px);
   margin-top: 30px;
   font-family: 'main-font';
   .home-nav {
diff --git a/src/views/home/components/Blogs.vue b/src/views/home/components/Blogs.vue
index 93d360a..cb2c777 100644
--- a/src/views/home/components/Blogs.vue
+++ b/src/views/home/components/Blogs.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="blogs-wrapper">
-    <vuescroll
-      ref="vs"
-      :ops="scrollOptions"
-    >
+    <vuescroll ref="vs" :ops="scrollOptions">
       <div class="blog-list">
         <CardView
           v-for="(blog, index) in intro.blogs"
@@ -12,6 +9,8 @@
           :cat="blog.cat"
           :id="blog.id"
           :key="blog.id"
+          :mediaType="blog.mediaType"
+          :mediaSources="blog.mediaSources"
           @select="viewContent"
         />
       </div>
@@ -26,7 +25,7 @@ import { namespace } from 'vuex-class'
 import vuescroll from 'vuescroll'
 import CardView from '@/components/CardView.vue'
 import { Blog } from '@/store/home'
-import VueRouter from 'vue-router'
+
 const homeModule = namespace('MODULE_HOME')
 
 @Component({
@@ -39,21 +38,21 @@ export default class Blogs extends Vue {
   public scrollOptions: object = {
     vuescroll: {
       mode: 'native',
-      wheelScrollDuration: 1000,
+      wheelScrollDuration: 100,
       detectResize: true,
     },
     scrollPanel: {
-      easing: 'easeInOutQuart',
+      speed: 300,
     },
     bar: {
       size: 0,
     },
   }
-  public created (): void {
+  public created(): void {
     const vs = this.$refs.vs as vuescroll
   }
 
-  public viewContent (id: string) {
+  public viewContent(id: string) {
     this.$router.push(`/content/${id}`)
   }
 }
@@ -61,8 +60,7 @@ export default class Blogs extends Vue {
 
 <style lang="scss" scoped>
 .blogs-wrapper {
-  //   overflow-y: scroll !important;
-  height: calc(100vh - 158px) !important;
+  height: calc(100vh - 176px) !important;
   padding-top: 30px;
   .blog-list {
     padding-left: 20px;
diff --git a/src/views/home/components/Introduction.vue b/src/views/home/components/Introduction.vue
index 1b73c1f..e5e2b86 100644
--- a/src/views/home/components/Introduction.vue
+++ b/src/views/home/components/Introduction.vue
@@ -1,30 +1,13 @@
 <template>
   <div id="intro-wrapper">
-    <el-col :span='24'>
+    <el-col :span="24">
       <div class="intro-content">
         <div class="intro-detail">
-          <p
-            class="intro-sentence"
-            v-for="(sentence,index) in content"
-          >{{sentence}}</p>
+          <p class="intro-sentence" v-for="(sentence, index) in content">{{ sentence }}</p>
         </div>
-        <transition
-          name="blur"
-          mode="out-in"
-        >
-          <img
-            v-if="media_type==='img'"
-            class="intro-img"
-            :src="media"
-            alt=""
-            :key="media"
-          />
-          <video
-            v-if="media_type==='video'"
-            class="intro-video"
-            :src="media"
-            controls
-          />
+        <transition name="blur" mode="out-in">
+          <img v-if="media_type === 'img'" class="intro-img" :src="media" alt="" :key="media" />
+          <video v-if="media_type === 'video'" class="intro-video" :src="media" controls />
         </transition>
       </div>
     </el-col>
@@ -38,26 +21,24 @@ const IntroProps = Vue.extend({
   props: {
     content: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     media_type: {
       type: String,
-      default: ''
+      default: '',
     },
     media: {
       type: String,
-      default: ''
-    }
-  }
+      default: '',
+    },
+  },
 })
-export default class Introduction extends IntroProps {
-
-}
+export default class Introduction extends IntroProps {}
 </script>
 <style lang="scss" scoped>
 #intro-wrapper {
   font-weight: 500;
-  height: calc(100vh - 158px) !important;
+  height: calc(100vh - 146px) !important;
   .intro-content {
     .intro-detail {
       margin-top: 20px;
@@ -68,12 +49,14 @@ export default class Introduction extends IntroProps {
       margin-bottom: 30px;
     }
     .intro-img {
-      width: 100%;
+      //   width: 100%;
+      max-width: 400px;
       height: auto;
       padding-left: 10px;
     }
     .intro-video {
-      width: 100%;
+      //   width: 100%;
+      max-width: 400px;
       height: auto;
       padding-left: 10px;
     }
diff --git a/vue.config.js b/vue.config.js
index b9d0563..32905a8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -88,6 +88,6 @@ module.exports = {
   },
   devServer: {
     open: true,
-    port: 8080,
+    port: 8081,
   },
 }