refine code && document

README.md

@@ -8,11 +8,9 @@
 **注意：该项目目前使用element-ui@1.3.3版本,所以最低兼容 Vue 2.3.0**
 
 ## 前言
-> 这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目，所以数据请求都是用了mockjs模拟。注意：在次项目基础上改造开发时请移除mock文件。
+> 这半年来一直在用vue写管理后台，目前后台已经有百来个个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包.由于是个人项目，所以数据请求都是用了mockjs模拟。注意：在次项目基础上改造开发时请移除mock文件。
 
-后续会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统（如权限验证，二次登录等），如何二次开发组件（如富文本），如何整合七牛等等文章，各种后台开发经验等等。莫急~~
-
-相应需求，开了一个qq群 591724180 方便大家交流
+写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
 
  - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
  - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
@@ -20,12 +18,14 @@
  - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
  - [手摸手，带你封装一个vue component](https://segmentfault.com/a/1190000009090836)
 
+ 相应需求，开了一个qq群 591724180 方便大家交流
+
  **如有问题请先看上述文章和Wiki,若不能满足，欢迎issue和pr~**
- 
+
  **该项目并不是一个脚手架，更倾向于是一个集成解决方案方案**
- 
+
  **该项目不支持低版本游览器，有需求请自行添加polyfill[详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
- 
+
 
 ## 功能
 - 登录/注销
@@ -47,6 +47,7 @@
 - table example
 - 动态table example
 - 拖拽table example
+- 内联编辑table example
 - form example
 - 多环境发布
 - dashboard

src/components/Charts/mixchart.vue

@@ -51,7 +51,6 @@
             backgroundColor: '#344b58',
             title: {
               text: '统计',
-              subtext: 'from http://gallery.echartsjs.com',
               x: '4%',
               textStyle: {
                 color: '#fff',

src/views/charts/index.vue

 <template>
   <div class="components-container" >
     <code>
-      这里的所有的图表都基于echarts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实echarts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。
+      这里的所有的图表都基于ECharts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实ECharts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。<a target='_blank' class='lin' href="https://segmentfault.com/a/1190000009762198#articleHeader16">相关教程</a>
     </code>
   </div>
 </template>

src/views/charts/keyboard.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-       <keyboardChart height='100%' width='100%' />
+      <keyboardChart height='100%' width='100%' />
     </div>
-
   </div>
 </template>
+
 <script>
     import keyboardChart from 'components/Charts/keyboard';
-
     export default {
       components: { keyboardChart }
     };
@@ -16,9 +15,9 @@
 
 <style scoped>
 .chart-container{
-    position: relative;
-    width: 100%;
-    height: 90%;
+  position: relative;
+  width: 100%;
+  height: 90%;
 }
 </style>
 

src/views/charts/keyboard2.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-       <keyboardChart2 id='apple' height='100%' width='100%' />
+      <keyboardChart2 id='apple' height='100%' width='100%' />
     </div>
-
   </div>
 </template>
+
 <script>
     import keyboardChart2 from 'components/Charts/keyboard2';
-
     export default {
       components: { keyboardChart2 }
     };
@@ -16,9 +15,9 @@
 
 <style scoped>
 .chart-container{
-    position: relative;
-    width: 100%;
-    height: 90%;
+  position: relative;
+  width: 100%;
+  height: 90%;
 }
 </style>
 

src/views/charts/line.vue

 <template>
   <div class="components-container" style='height:100vh'>
-    https://github.com/ecomfe/echarts/blob/master/index.js
-    http://echarts.baidu.com/tutorial.html
     <div class='chart-container'>
-       <lineMarker height='100%' width='100%' />
+      <lineMarker height='100%' width='100%' />
     </div>
-
   </div>
 </template>
+
 <script>
     import lineMarker from 'components/Charts/lineMarker';
-
     export default {
       components: { lineMarker }
     };
@@ -18,9 +15,9 @@
 
 <style scoped>
 .chart-container{
-    position: relative;
-    width: 100%;
-    height: 80%;
+  position: relative;
+  width: 100%;
+  height: 80%;
 }
 </style>
 

src/views/charts/mixchart.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-       <mixchart id='apple' height='100%' width='100%' />
+      <mixchart id='apple' height='100%' width='100%' />
     </div>
-
   </div>
 </template>
+
 <script>
     import mixchart from 'components/Charts/mixchart';
-
     export default {
       components: { mixchart }
     };
@@ -16,10 +15,10 @@
 
 <style scoped>
 .chart-container{
-    position: relative;
-    width: 100%;
-    height: 90%;
-    padding-bottom: 40px;
+  position: relative;
+  width: 100%;
+  height: 90%;
+  padding-bottom: 40px;
 }
 </style>
 

src/views/components/countTo.vue

 <template>
   <div class="components-container">
-    <code>countTo 组件 <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>线上地址</a></code>
+    <code> <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>countTo component</a></code>
 
-  <count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
+    <count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
       :separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false' />
     <div style='margin-left: 25%;margin-top: 40px;'>
       <label class="label" for="startValInput">startVal:  <input type="number" v-model.number='setStartVal' name='startValInput' /></label>
@@ -20,9 +20,9 @@
             :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27; :autoplay=false&gt;</code>
   </div>
 </template>
+
 <script>
      import countTo from 'vue-count-to';
-
      export default {
        components: { countTo },
        data() {

src/views/components/dndlist.vue

 <template>
   <div class="components-container">
-    <code>拖拽https://github.com/SortableJS/Vue.Draggable 项目：Vue.Draggable</code>
+    <code>drag-list base on <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a></code>
     <div class="editor-container">
        <DndList :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池" />
     </div>

src/views/components/index.vue

 <template>
   <div class="components-container">
-    <code>这里暂时列出了自己在项目中自己封装和用到的组件，如有补充可以提<a href='https://github.com/PanJiaChen/vue-element-admin/issues' target='_blank'>issue</a><br/>
-    我个人崇尚自己封装组件，因为很多组件会和业务后高度的耦合，很多时候第三方封装是满足不了需求的，如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
+    <code>这里暂时列出了自己在项目中用到的组件和一些自己封装的组件，如有补充可以提<a target='_blank' href='https://github.com/PanJiaChen/vue-element-admin/issues'> issue </a><br/>
+    我个人崇尚自己封装组件，因为很多组件会和业务后高度的耦合，而且第三方封装的组件灵活性可控性都不高，如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
     </code>
   </div>
 </template>

src/views/components/jsoneditor.vue

 <template>
   <div class="components-container" style='height:100vh'>
-    <code>有校验</code>
+    <code>jsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>,lint base on json-lint </code>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value"></json-editor>
     </div>
   </div>
 </template>
+
 <script>
     import jsonEditor from 'components/jsonEditor';
     const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]';
@@ -21,8 +22,8 @@
 
 <style scoped>
 .editor-container{
-    position: relative;
-    height: 100%;
+  position: relative;
+  height: 100%;
 }
 </style>
 

src/views/components/markdown.vue

 <template>
   <div class="components-container">
-    <code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <code>Markdown 我们这里选用了 <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader14'> 相关文章 </a></code>
     <div class="editor-container">
-      <MdEditor  id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor>
+      <MdEditor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor>
     </div>
     <el-button @click='markdown2Html' style="margin-top:80px;" type="primary">转为HTML<i class="el-icon-document el-icon--right"></i></el-button>
     <div v-html="html"></div>
   </div>
 </template>
+
 <script>
     import MdEditor from 'components/MdEditor';
-
     export default {
       components: { MdEditor },
       data() {
         return {
-          content: 'Simplemde',
+          content: '## Simplemde',
           html: ''
         }
       },

src/views/errlog/index.vue

 <template>
   <div class="errPage-container">
-     <!--error code-->
-   <err-code/>
-    <!--error code-->
+    <err-code/>
+
     <h3>请点击右上角bug小图表</h3>
-     <code>
+    <code>
       现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会怎增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在Vue官网提供了一个方法来捕获处理异常
     </code>
     <a href="#"><img src='../../../documentImg/code1.png'></a>
-
   </div>
 </template>
+
 <script>
     import errCode from './errcode';
-    // import code1Img from
     export default {
       components: { errCode },
-      data() {
-        return {
-
-        }
-      },
       methods: {
         back() {
           this.$router.go(-1)
@@ -28,6 +21,7 @@
       }
     };
 </script>
+
 <style scoped>
 .errPage-container{
   padding: 30px;

src/views/error/401.vue

@@ -4,7 +4,7 @@
     <el-row>
       <el-col :span="12">
         <h1 class="text-jumbo text-ginormous">Oops!</h1>
-         gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面
+        gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面
         <h2>你没有权限去该页面</h2>
         <h6>如有不满请联系你领导</h6>
         <ul class="list-unstyled">
@@ -26,9 +26,9 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
     import errGif from 'assets/401.gif';
-
     export default {
       data() {
         return {
@@ -50,38 +50,38 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .errPage-container {
-        width: 800px;
-        margin: 100px auto;
-        .pan-back-btn {
-            background: #008489;
-            color: #fff;
-        }
-        .pan-gif {
-            margin: 0 auto;
-            display: block;
-        }
-        .pan-img{
-            display: block;
-            margin: 0 auto;
-        }
-        .text-jumbo {
-            font-size: 60px;
-            font-weight: 700;
-            color: #484848;
-        }
-        .list-unstyled {
-            font-size: 14px;
-            li {
-                padding-bottom: 5px;
-            }
-            a {
-                color: #008489;
-                text-decoration: none;
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
+  .errPage-container {
+    width: 800px;
+    margin: 100px auto;
+    .pan-back-btn {
+      background: #008489;
+      color: #fff;
+    }
+    .pan-gif {
+      margin: 0 auto;
+      display: block;
+    }
+    .pan-img {
+      display: block;
+      margin: 0 auto;
+    }
+    .text-jumbo {
+      font-size: 60px;
+      font-weight: 700;
+      color: #484848;
+    }
+    .list-unstyled {
+      font-size: 14px;
+      li {
+        padding-bottom: 5px;
+      }
+      a {
+        color: #008489;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
         }
+      }
     }
+  }
 </style>

src/views/error/404.vue

@@ -9,7 +9,7 @@
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-         <div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
+        <div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
         <a href="/" class="bullshit__return-home">返回首页</a>
@@ -17,6 +17,7 @@
     </div>
   </div>
 </template>
+
 <script>
   export default {
     computed: {
@@ -26,6 +27,7 @@
     }
   }
 </script>
+
 <style rel="stylesheet/scss" lang="scss" scoped>
   .wscn-http404 {
     position: relative;

src/views/example/table/dynamictable.vue

 <template>
   <div class="app-container">
     <div class="filter-container">
-    <el-checkbox-group v-model="formThead">
+      <el-checkbox-group v-model="formThead">
         <el-checkbox label="apple">apple</el-checkbox>
         <el-checkbox label="banana">banana</el-checkbox>
         <el-checkbox label="orange">orange</el-checkbox>
@@ -18,22 +18,21 @@
     </el-table>
   </div>
 </template>
-<script>
-
 
-export default {
-  data() {
-    return {
-      tableData: [{
-        name: '水果',
-        list: [{ name: 'apple', value: 10 }, { name: 'banana', value: 20 }, { name: 'orange', value: 20 }]
-      }, {
-        name: '水果2',
-        list: [{ name: 'apple2', value: 12 }, { name: 'banana2', value: 22 }, { name: 'orange', value: 20 }]
-      }],
-      formThead: ['apple', 'banana']
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          name: '水果',
+          list: [{ name: 'apple', value: 10 }, { name: 'banana', value: 20 }, { name: 'orange', value: 20 }]
+        }, {
+          name: '水果2',
+          list: [{ name: 'apple2', value: 12 }, { name: 'banana2', value: 22 }, { name: 'orange', value: 20 }]
+        }],
+        formThead: ['apple', 'banana']
+      }
     }
-  }
-};
+  };
 </script>
 

src/views/example/table/table.vue

@@ -22,10 +22,10 @@
       <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
       <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
       <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
-      <el-checkbox class="filter-item" @change='tableKey=tableKey+1'  v-model="showAuditor">显示审核人</el-checkbox>
+      <el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
     </div>
 
-    <el-table  :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
 
       <el-table-column align="center" label="序号" width="65">
         <template scope="scope">
@@ -58,10 +58,9 @@
         </template>
       </el-table-column>
 
-
       <el-table-column width="80px" label="重要性">
         <template scope="scope">
-           <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
+          <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
         </template>
       </el-table-column>
 
@@ -71,28 +70,28 @@
         </template>
       </el-table-column>
 
-       <el-table-column class-name="status-col" label="状态" width="90">
+      <el-table-column class-name="status-col" label="状态" width="90">
         <template scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>
       </el-table-column>
 
-      <el-table-column  align="center" label="操作" width="150">
+      <el-table-column align="center" label="操作" width="150">
         <template scope="scope">
           <el-button v-if="scope.row.status!='published'" size="small" type="success" @click="handleModifyStatus(scope.row,'published')">发布
           </el-button>
           <el-button v-if="scope.row.status!='draft'" size="small" @click="handleModifyStatus(scope.row,'draft')">草稿
           </el-button>
           <el-button v-if="scope.row.status!='deleted'" size="small" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
-            </el-button>
+          </el-button>
         </template>
       </el-table-column>
 
     </el-table>
 
     <div v-show="!listLoading" class="pagination-container">
-      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
-        :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
+        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
       </el-pagination>
     </div>
 
@@ -138,14 +137,14 @@
     </el-dialog>
 
     <el-dialog title="阅读数统计" :visible.sync="dialogPvVisible" size="small">
-       <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
-          <el-table-column prop="key" label="渠道"> </el-table-column>
-          <el-table-column  prop="pv" label="pv"> </el-table-column>
+      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
+        <el-table-column prop="key" label="渠道"> </el-table-column>
+        <el-table-column prop="pv" label="pv"> </el-table-column>
       </el-table>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogPvVisible = false">确 定</el-button>
       </span>
-    </el-dialog >
+    </el-dialog>
 
   </div>
 </template>

src/views/excel/index.vue

@@ -32,6 +32,7 @@
     </el-table>
   </div>
 </template>
+
 <script>
 import { getList } from 'api/article';
 export default {

src/views/layout/AppMain.vue

@@ -11,9 +11,7 @@
       name: 'AppMain',
       computed: {
         key() {
-          return this.$route.name !== undefined
-                        ? this.$route.name + +new Date()
-                        : this.$route + +new Date()
+          return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
         }
       }
     }

src/views/layout/Layout.vue

 <template>
     <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
         <div class="sidebar-wrapper">
-            <Sidebar class="sidebar-container"/>
+            <Sidebar class="sidebar-container" />
         </div>
         <div class="main-container">
             <Navbar/>
@@ -27,9 +27,9 @@
       }
     }
 </script>
+
 <style rel="stylesheet/scss" lang="scss" scoped>
     @import "src/styles/mixin.scss";
-
     .app-wrapper {
         @include clearfix;
         position: relative;

src/views/layout/Levelbar.vue

@@ -34,6 +34,7 @@
       }
     }
 </script>
+
 <style rel="stylesheet/scss" lang="scss" scoped>
     .app-levelbar.el-breadcrumb {
         display: inline-block;

src/views/layout/Navbar.vue

@@ -6,15 +6,15 @@
         <el-dropdown class="avatar-container" trigger="click">
             <div class="avatar-wrapper">
                 <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
-                <i class="el-icon-caret-bottom"/>
+                <i class="el-icon-caret-bottom" />
             </div>
             <el-dropdown-menu class="user-dropdown" slot="dropdown">
-                <router-link  class='inlineBlock' to="/">
+                <router-link class='inlineBlock' to="/">
                     <el-dropdown-item>
                         首页
                     </el-dropdown-item>
                 </router-link>
-                <router-link  class='inlineBlock' to="/admin/profile">
+                <router-link class='inlineBlock' to="/admin/profile">
                     <el-dropdown-item>
                         设置
                     </el-dropdown-item>
@@ -62,6 +62,7 @@
       }
     }
 </script>
+
 <style rel="stylesheet/scss" lang="scss" scoped>
     .navbar {
         height: 50px;

src/views/layout/Sidebar.vue

@@ -16,6 +16,7 @@
       }
     }
 </script>
+
 <style rel="stylesheet/scss" lang="scss" scoped>
     .el-menu {
         min-height: 100%;

src/views/layout/SidebarItem.vue

@@ -34,6 +34,7 @@
       }
     }
 </script>
+
 <style rel="stylesheet/scss" lang="scss" scoped>
     .wscn-icon {
         margin-right: 10px;

src/views/permission/index.vue

 <template>
   <div class="app-container">
-     <div style='margin-bottom:15px;'>你的权限： {{roles}}</div>
-     切换权限：
-      <el-radio-group v-model="role">
-        <el-radio-button label="editor"></el-radio-button>
-      </el-radio-group>
+    <div style='margin-bottom:15px;'>你的权限： {{roles}}</div>
+    切换权限：
+    <el-radio-group v-model="role">
+      <el-radio-button label="editor"></el-radio-button>
+    </el-radio-group>
   </div>
 </template>
 

src/views/theme/index.vue

@@ -76,17 +76,17 @@ export default {
 </script>
 
 <style scoped>
-.box-card{
-  width: 400px;
-  margin: 20px auto;
-}
-.block{
-  padding: 30px 24px;
-}
-.alert-item{
-  margin-bottom: 10px;
-}
-.tag-item{
-  margin-right: 15px;
-}
+  .box-card{
+    width: 400px;
+    margin: 20px auto;
+  }
+  .block{
+    padding: 30px 24px;
+  }
+  .alert-item{
+    margin-bottom: 10px;
+  }
+  .tag-item{
+    margin-right: 15px;
+  }
 </style>