update Sponsors

fix wrongly written character avator

.gitignore

@@ -2,6 +2,8 @@
 node_modules
 /dist
 
+package-lock.json
+
 /tests/e2e/videos/
 /tests/e2e/screenshots/
 

README.md

@@ -4,183 +4,111 @@
     </a>
 </p>
 
-# iView Admin
+<h1>
+iView Admin
+    <h3>Vue.js 2.0 admin management system template based on iView.</h3>
+</h1>
 
 [![](https://img.shields.io/github/release/iview/iview-admin.svg)](https://github.com/iview/iview-admin/releases)
 [![](https://img.shields.io/travis/iview/iview-admin.svg?style=flat-square)](https://travis-ci.org/iview/iview-admin)
-[![vue](https://img.shields.io/badge/vue-2.5.10-brightgreen.svg?style=flat-square)](https://github.com/vuejs/vue)
-[![iview ui](https://img.shields.io/badge/iview-3.1.3-brightgreen.svg?style=flat-square)](https://github.com/iview/iview)
+[![vue](https://img.shields.io/badge/vue-2.5.17-brightgreen.svg?style=flat-square)](https://github.com/vuejs/vue)
+[![iview ui](https://img.shields.io/badge/iview-3.2.2-brightgreen.svg?style=flat-square)](https://github.com/iview/iview)
 [![npm](https://img.shields.io/npm/l/express.svg)]()
 
-[更新日志](https://github.com/iview/iview-admin/releases)
+<h2 align="center">Special Sponsors</h2>
+<table>
+      <tbody>
+        <tr>
+          <td align="center" valign="middle">
+            <a href="https://segmentfault.com/ls/1650000016424063" target="_blank">
+              <img width="300" src="https://file.iviewui.com/asd/asd-i-2.png">
+            </a>
+          </td>
+          <td align="center" valign="middle">
+            <a href="https://e.coding.net/?utm_source=iview" target="_blank">
+              <img width="300" src="https://file.iviewui.com/asd/asd-coding4.png">
+            </a>
+          </td>
+            <td align="center" valign="middle">
+            <a href="https://cn.udacity.com/fend/?utm_source=iviewui&utm_medium=banner&utm_campaign=fend" target="_blank">
+              <img width="300" src="https://file.iviewui.com/asd/asd-u-new-2.png">
+            </a>
+          </td>
+        </tr>
+      </tbody>
+</table>
 
-[使用文档](https://lison16.github.io/iview-admin-doc/#/)
+> If you'd like be a sponsor, to show your ads in GitHub and iView doc, please email admin@aresn.com to get more infomation.
 
-[在线访问](https://admin.iviewui.com/)
+## Introduction
 
-[简化版模板](https://github.com/iview/iview-admin/tree/template)
+iView Admin is a front-end management background integration solution. It based on [Vue.js](https://github.com/vuejs/vue) and use the UI Toolkit [iView](https://github.com/iview/iview).
 
-[教学视频(26课时)](https://segmentfault.com/ls/1650000016221751?utm_source=banner)
+- [Document](https://lison16.github.io/iview-admin-doc/)
+- [Preview](https://admin.iviewui.com/)
+- [Base template recommends using](https://github.com/iview/iview-admin/tree/template)
 
-`注：在线版本会在开发版本新小版本发布后更新到相应版本，所以如果想体验最新版本iview-admin，请clone完整项目代码到本地运行。`
+![image](https://file.iviewui.com/admin-dist/admin-preview.png)
 
-## Install
+## Features
+
+- Login / Logout
+- Permission Authentication
+    - A list of filters
+    - Permission to switch
+- i18n
+- Components
+    - Rich Text Editor
+    - Markdown Editor
+    - City Cascader
+    - Photos preview and edit
+    - Draggable list
+    - File upload
+    - Digital gradient
+    - split-pane
+- Form
+    - The article published
+    - Workflow
+- Table
+    - Drag-and-drop sort
+    - Searchable form
+    - Table export data
+        - Export to Csv file
+        - Export to Xls file
+    - Table to picture
+- Error Page
+    - 403
+    - 404
+    - 500
+- Router
+    - Dynamic routing
+    - With reference page
+- Theme
+- Shrink the sidebar
+- Tag navigation
+- Breadcrumb navigation
+- Full screen / exit full screen
+- Lock screen
+- The message center
+- Personal center
+
+## Getting started
 ```bush
+# clone the project
+git clone https://github.com/iview/iview-admin.git
+
 // install dependencies
 npm install
-```
-## Run
-### Development
-```bush
+
+// develop
 npm run dev
 ```
-### Production(Build)
+
+## Build
 ```bush
 npm run build
 ```
 
-## 简介
-&emsp;&emsp;iView admin是基于Vue.js，搭配使用[iView](https://www.iviewui.com) UI组件库形成的一套后台集成解决方案，由TalkingData前端可视化团队部分成员开发维护。iView admin遵守iView设计和开发约定，风格统一，设计考究，并且更多功能在不停开发中。
-如果您想查看iview-admin的更新动态，您可以到[更新日志](https://github.com/iview/iview-admin/releases)查看了解最新更新；如果您是新手，想快速入手iview-admin，您可以到[使用教程](https://github.com/iview/iview-admin/wiki)查看讲解；如果您想在线体验iview-admin，您可以到[在线访问](https://admin.iviewui.com/)体验。如果你只是想要一个清醒爽朗的界面，那你可以下载[简化版模板](https://github.com/iview/iview-admin/tree/template)来做开发。
-
-## 功能
-
-- 登录/登出
-- 权限管理
-    - 列表过滤
-    - 权限切换
-- 多语言切换
-- 组件
-    - 富文本编辑器
-    - Markdown编辑器
-    - 城市级联
-    - 图片预览编辑
-    - 可拖拽列表
-    - 文件上传
-    - 数字渐变
-    - split-pane
-- 表单编辑
-    - 文章发布
-    - 工作流
-- 表格
-    - 可拖拽排序
-    - 可编辑表格
-        - 行内编辑
-        - 单元格编辑
-    - 可搜索表格
-    - 表格导出数据
-        - 导出为Csv文件
-        - 导出为Xls文件
-    - 表格转图片
-- 错误页面
-    - 403页面
-    - 404页面
-    - 500页面
-- 高级路由
-    - 动态路由
-    - 带参页面
-- 换肤
-- 收缩侧边栏
-- tag标签导航
-- 面包屑导航
-- 全屏/退出全屏
-- 锁屏
-- 消息中心
-- 个人中心
-
-## 文件结构
-```shell
-.
-├── build  项目构建配置
-├── config  开发相关配置
-├── public  打包所需静态资源
-└── src
-    ├── api  AJAX请求
-    └── assets  项目静态资源
-        ├── icons  自定义图标资源
-        └── images  图片资源
-    ├── components  业务组件
-    ├── config  项目运行配置
-    ├── directive  自定义指令
-    ├── libs  封装工具函数
-    ├── locale  多语言文件
-    ├── mock  mock模拟数据
-    ├── router  路由配置
-    ├── store  Vuex配置
-    ├── view  页面文件
-    └── tests  测试相关
-```
-
-## Links
-
-- [TalkingData](https://github.com/TalkingData)
-- [iView](https://github.com/iview/iview)
-- [Vue](https://github.com/vuejs/vue)
-- [Webpack](https://github.com/webpack/webpack)
-
-## 效果展示
-
-- 响应式布局首页
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/home.gif)
-
-- 标签导航
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/page-tags.gif)
-
-- 权限管理
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/access.gif)
-
-- 可拖拽列表
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/dragable-list.gif)
-
-- 图片预览编辑
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/image-editor.gif)
-
-- 文件上传
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/upload.gif)
-
-- 数字渐变
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/count-to.gif)
-
-- split-pane
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/split-pane.gif)
-
-- 文章发布
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/article-publish.gif)
-
-- 工作流
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/workflow.gif)
-
-- 可拖拽表格
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/dragable-table.gif)
-
-- 可编辑表格
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/editable-table.gif)
-
-- 表格导出数据
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/exportable-table.gif)
-
-- 表格转图片
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/table2image.gif)
-
-- 错误页面
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/error-page.gif)
-
-- 锁屏
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/locking.gif)
-
-- 可收缩侧边栏
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/sidebarmenu.gif)
-
-- 主题切换
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/theme.gif)
-
-- 消息中心
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/message.gif)
-
-### 💖💖 If you find this project helpful, maybe you can buy me a coffee. 💖💖
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/code.png)
-
-
 ## License
 [MIT](http://opensource.org/licenses/MIT)
 

src/assets/images/icon-social-juejin.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1547543883733" class="icon" style="" viewBox="0 0 1272 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16831" xmlns:xlink="http://www.w3.org/1999/xlink" width="496.875" height="400"><defs><style type="text/css"></style></defs><path d="M729.64116345 165.27693991L634.32650881 90.125l-99.5625 78.52693991-5.17887981 4.16056009 104.74137981 83.50215546 105.09051682-83.50215546-9.77586218-7.53556009z m361.21228445 291.47198236l-456.78879245 360.19396555-456.49784537-359.99030128L110.125 511.12715547l523.93965546 413.11745671 524.23060335-413.35021555-67.44181091-54.14547436z m-456.78879245 29.21120673L385.4784479 290.00646554 318.06573237 344.12284454l315.96982771 249.16810336 316.28987101-249.40086136-67.41271555-54.14547436-248.84806008 196.21551682z" fill="#006cff" p-id="16832"></path></svg>

src/assets/images/icon-social-twitter.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1547543874130" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16498" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M511.8 0.6C229.2 0.6 0.1 229.7 0.1 512.3S229.2 1024 511.8 1024s511.7-229.1 511.7-511.7S794.4 0.6 511.8 0.6z m264.9 375.3c-0.1 0.1-0.1 0.2-0.2 0.3h0.2c-9 14.3-21.2 28.8-34.2 39.2-5.2 4.2-10.5 8.3-15.7 12.5v0.5c0.3 22.9-0.3 44.9-4.7 64.2-25.2 113.1-91.9 189.9-197.4 222.8-37.9 11.8-99.1 16.7-142.6 5.9-21.5-5.4-41-11.4-59.3-19.3-10.2-4.5-19.6-9.3-28.5-14.7l-8.8-5.3h0.5l-0.5-0.3c9.8 0.2 21.3 2.9 32.2 1.2 9.8-1.6 19.6-1.2 28.7-3.2 22.7-5 43-11.6 60.4-21.8 8.3-4.8 20.9-10.6 27-17.6-11.2 0.2-21.4-2.4-29.7-5.4-32.6-11.5-51.6-32.7-63.9-64.4h0.1c0-0.1-0.1-0.2-0.1-0.3 9.7 1.1 37.3 3.5 44.6-1.7-12.3-0.8-24.1-7.9-32.5-13.2-26.2-16.4-47.6-43.9-47.4-86.2v-0.3c3.5 1.7 6.9 3.3 10.4 4.9 6.6 2.8 13.3 4.3 21.1 5.9 3.1 0.7 9.3 2.4 13.2 1.4-5.1-5.8-13.2-9.7-18.4-16-14.7-18.3-28.7-45.3-25.2-77.4 0.5-4.7 1.3-9.4 2.6-14.3 2.5-9.7 6.5-18.3 10.8-26.2 0.2 0.1 0.4 0.2 0.5 0.3 2 4.2 6.4 7.2 9.1 10.6 8.6 10.7 19.2 20.3 30 28.7 36.7 28.7 69.9 46.4 123.1 59.5 13.5 3.3 29 5.9 45.1 5.9-1.9-5.8-2.7-13-2.7-20.5 0-9.7 1.3-19.6 3.3-26.8 9-32.1 28.5-55.2 57-67.6 6.9-3 14.4-5.2 22.4-6.9 4.1-0.6 8.2-1.1 12.3-1.6 39-0.7 59.8 13.5 79.6 31.6 16.8-1.4 38.7-10.8 51.6-17.4l12.6-6.9c0 0.1-0.1 0.3-0.1 0.4l0.1-0.1c-7.3 19.9-17.4 35.5-32.7 47.3-3.1 2.4-6.3 5.6-10 7.4 21.5-0.4 39.3-10 56.1-15.4v0.3z" fill="#2EB1EB" p-id="16499"></path><path d="M719.7 391.1s0.1 0 0.1-0.1c0 0-0.1 0-0.1 0.1zM726.8 428.4v-0.5 0.5zM336.4 479.9c3.3 0.7 9.9 2.7 13.8 1.2h-0.5l-0.1-0.1c-3.9 1-10.1-0.7-13.2-1.4-7.8-1.6-14.5-3.1-21.1-5.9-3.5-1.6-6.9-3.2-10.4-4.9v0.3c3.4 1.6 6.9 3.2 10.4 4.9 6.6 2.8 13.3 4.3 21.1 5.9zM719.6 391.4v0.2c21.9-0.2 39.8-10.1 56.9-15.4 0.1-0.1 0.1-0.2 0.2-0.3v-0.3c-16.9 5.3-34.6 14.9-56.1 15.4-0.4 0.1-0.7 0.3-1 0.4zM584.8 337.5c6.9-3 14.4-5.1 22.4-6.9 4.1-0.6 8.2-1 12.3-1.6 39-0.7 59.8 13.5 79.6 31.6 16.8-1.4 38.7-10.8 51.6-17.4 4.2-2.3 8.3-4.5 12.5-6.8 0-0.1 0.1-0.3 0.1-0.4l-12.6 6.9c-12.9 6.6-34.8 16-51.6 17.4-19.8-18.1-40.6-32.3-79.6-31.6-4.1 0.5-8.2 1-12.3 1.6-8 1.7-15.5 3.9-22.4 6.9-28.5 12.4-48 35.5-57 67.6-2 7.2-3.4 17.2-3.3 26.8 0-9.6 1.3-19.4 3.3-26.5 9-32.1 28.5-55.2 57-67.6zM385.2 568.5h-0.4c-7.3 5.2-34.9 2.8-44.6 1.7 0 0.1 0.1 0.2 0.1 0.3 10 1.1 38.2 3.6 44.9-2zM319.4 347.4c0.1 0.1 0.3 0.1 0.5 0.3 2 4.1 6.3 7.1 9.1 10.6 8.6 10.6 19.2 20.2 30 28.7 36.8 28.7 69.9 46.4 123.1 59.5 13.5 3.3 29.1 5.9 45.2 5.9 0-0.1-0.1-0.2-0.1-0.3-16.1 0-31.6-2.6-45.1-5.9-53.2-13.1-86.4-30.8-123.1-59.5-10.8-8.4-21.4-18-30-28.7-2.7-3.4-7.1-6.4-9.1-10.6-0.1-0.1-0.3-0.2-0.5-0.3-4.3 7.9-8.3 16.5-10.8 26.2-1.3 4.9-2.1 9.6-2.6 14.3 0.5-4.6 1.3-9.2 2.6-14 2.5-9.7 6.5-18.3 10.8-26.2zM317.7 683.2c9.9-1.6 19.6-1.2 28.7-3.2 22.8-5 43-11.6 60.4-21.8 8.4-4.9 21.3-10.8 27.3-17.9h-0.3c-6.1 7-18.7 12.8-27 17.6-17.4 10.2-37.7 16.8-60.4 21.8-9.1 2-18.9 1.6-28.7 3.2-10.9 1.7-22.4-1-32.2-1.2l0.5 0.3c9.7 0.4 21 2.9 31.7 1.2z" fill="#FFFFFF" p-id="16500"></path></svg>

src/assets/images/icon-social-zhihu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1547543863835" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16165" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M512 1024C229.236364 1024 0 794.763636 0 512S229.236364 0 512 0s512 229.236364 512 512-229.236364 512-512 512z m-129.861818-756.48s-36.212364 2.094545-48.989091 24.482909c-12.8 22.365091-54.318545 137.378909-54.318546 137.378909s13.847273 6.376727 37.28291-10.658909c23.435636-17.035636 30.882909-46.848 30.882909-46.848l42.589091-2.117818 1.070545 121.390545s-73.495273-1.070545-88.413091 0c-14.894545 1.047273-23.412364 40.448-23.412364 40.448h111.825455s-9.588364 67.095273-38.353455 116.084364c-28.741818 48.989091-83.060364 87.319273-83.060363 87.319273s39.424 15.965091 77.730909-6.4c38.353455-22.341818 66.629818-120.692364 66.629818-120.692364l89.925818 110.056727s8.192-52.386909-1.466182-67.188363c-9.658182-14.778182-62.208-74.286545-62.208-74.286546l-22.946909 20.247273 16.337455-65.117091h97.954909s0-38.353455-19.153455-40.494545c-19.176727-2.094545-78.801455 0-78.801454 0V371.898182h88.389818s-1.070545-39.400727-18.106182-39.400727h-143.755636l22.341818-64.954182z m169.984 61.184v358.562909h36.002909l13.102545 45.009455 63.348364-45.009455h89.064727V328.704h-201.518545z" fill="#0f84fd" p-id="16166"></path><path d="M594.781091 368.64h117.899636v277.876364h-41.890909l-53.364363 40.261818-11.636364-40.261818h-11.008V368.64z" fill="#0f84fd" p-id="16167"></path></svg>

src/components/main/components/user/user.less

@@ -1,5 +1,5 @@
 .user{
-  &-avator-dropdown{
+  &-avatar-dropdown{
     cursor: pointer;
     display: inline-block;
     // height: 64px;

src/components/main/components/user/user.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="user-avator-dropdown">
+  <div class="user-avatar-dropdown">
     <Dropdown @on-click="handleClick">
       <Badge :dot="!!messageUnreadCount">
-        <Avatar :src="userAvator"/>
+        <Avatar :src="userAvatar"/>
       </Badge>
       <Icon :size="18" type="md-arrow-dropdown"></Icon>
       <DropdownMenu slot="list">
@@ -21,7 +21,7 @@ import { mapActions } from 'vuex'
 export default {
   name: 'User',
   props: {
-    userAvator: {
+    userAvatar: {
       type: String,
       default: ''
     },

src/components/main/main.vue

@@ -12,7 +12,7 @@
     <Layout>
       <Header class="header-con">
         <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
-          <user :message-unread-count="unreadCount" :user-avator="userAvator"/>
+          <user :message-unread-count="unreadCount" :user-avatar="userAvatar"/>
           <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>
           <error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store>
           <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
@@ -79,8 +79,8 @@ export default {
     tagRouter () {
       return this.$store.state.app.tagRouter
     },
-    userAvator () {
-      return this.$store.state.user.avatorImgPath
+    userAvatar () {
+      return this.$store.state.user.avatarImgPath
     },
     cacheList () {
       const list = ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]

src/mock/login.js

@@ -5,14 +5,14 @@ const USER_MAP = {
     user_id: '1',
     access: ['super_admin', 'admin'],
     token: 'super_admin',
-    avator: 'https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png'
+    avatar: 'https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png'
   },
   admin: {
     name: 'admin',
     user_id: '2',
     access: ['admin'],
     token: 'admin',
-    avator: 'https://avatars0.githubusercontent.com/u/20942571?s=460&v=4'
+    avatar: 'https://avatars0.githubusercontent.com/u/20942571?s=460&v=4'
   }
 }
 

src/store/module/user.js

@@ -15,7 +15,7 @@ export default {
   state: {
     userName: '',
     userId: '',
-    avatorImgPath: '',
+    avatarImgPath: '',
     token: getToken(),
     access: '',
     hasGetInfo: false,
@@ -26,8 +26,8 @@ export default {
     messageContentStore: {}
   },
   mutations: {
-    setAvator (state, avatorPath) {
-      state.avatorImgPath = avatorPath
+    setAvatar (state, avatarPath) {
+      state.avatarImgPath = avatarPath
     },
     setUserId (state, id) {
       state.userId = id
@@ -111,7 +111,7 @@ export default {
         try {
           getUserInfo(state.token).then(res => {
             const data = res.data
-            commit('setAvator', data.avator)
+            commit('setAvatar', data.avatar)
             commit('setUserName', data.name)
             commit('setUserId', data.user_id)
             commit('setAccess', data.access)

src/view/join-page.vue

@@ -1,44 +1,66 @@
 <template>
   <div>
-    <Row :gutter="20">
+    <Card shadow title="社区">
+      <row class="join-page" :gutter="32">
+        <i-col span="10">
+          <img class="qq-group-img" src="../assets/images/icon-qr-qq-wechat.png">
+          <row type="flex" justify="center">
             <i-col span="12">
-        <Card title="iview-admin交流群(已满)" shadow>
-          <img class="qq-group-img" :src="qqFans" alt="">
-          <p class="qq-group-intro">本群为使用iview-admin或者对iview-admin感兴趣的开发者提供交流平台，在这里，解决你开发中的疑惑，共同进步。</p>
-        </Card>
+              <p>QQ 群号：621780943</p>
             </i-col>
-      <i-col span="12">
-        <Card title="iview-admin交流群2" shadow>
-          <img class="qq-group-img" :src="qqFans2" alt="">
-          <p class="qq-group-intro">本群为使用iview-admin或者对iview-admin感兴趣的开发者提供交流平台，在这里，解决你开发中的疑惑，共同进步。</p>
-        </Card>
+            <i-col span="12"></i-col>
+          </row>
         </i-col>
-    </Row>
+        <i-col span="14">
+          <div class="join-page-other">
+            <Button to="https://zhuanlan.zhihu.com/feview" target="_blank" size="large">
+              <img src="../assets/images/icon-social-zhihu.svg" class="join-page-other-icon">
+              iView 知乎专栏
+            </Button>
+            <Button to="https://juejin.im/user/56fe494539b0570054f2e032" target="_blank" size="large">
+              <img src="../assets/images/icon-social-juejin.svg" class="join-page-other-icon">
+              掘金
+            </Button>
+            <Button to="https://live.bilibili.com/1353202" target="_blank" size="large">
+              <img src="../assets/images/icon-social-bilibili.svg" class="join-page-other-icon">
+              活动直播间
+            </Button>
+            <Button to="https://twitter.com/iViewUI" target="_blank" size="large">
+              <img src="../assets/images/icon-social-twitter.svg" class="join-page-other-icon">
+              Twitter
+            </Button>
+          </div>
+        </i-col>
+      </row>
+    </Card>
   </div>
 </template>
 
 <script>
-import qqFans from '@/assets/images/qq-group1.jpg'
-import qqFans2 from '@/assets/images/qq-group2.jpg'
 export default {
   name: 'join_page',
   data () {
     return {
-      qqFans,
-      qqFans2
     }
   }
 }
 </script>
-
 <style>
-.qq-group-img{
-  display: block;
-  margin: 0 auto;
-  width: 240px;
-}
-.qq-group-intro{
-  padding: 20px;
-  font-size: 16px;
-}
+  .join-page{
+    text-align: center;
+  }
+  .qq-group-img{
+    width: 100%;
+  }
+  .join-page-other-icon{
+    width: 20px;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+  .join-page-other{
+    text-align: left;
+  }
+  .join-page-other .ivu-btn{
+    margin-right: 6px;
+  }
 </style>