更新处理bug、增加iconicon

public/js/config.js

@@ -8,7 +8,7 @@ window.global_config = {
   // BASE_URL: 'http://221.224.53.27:10144',
   //  BASE_URL:'http://172.16.0.14:10143',
   // BASE_URL: 'http://172.16.0.135:8083' //沪上阿姨
-  BASE_URL: 'http://172.16.100.40:8083'
+  BASE_URL: 'http://221.224.53.27:20018'
   //  BASE_URL:'http://172.16.0.107:10143',
   // BASE_URL: 'http://172.16.0.36:10143' //吴国建
   // BASE_URL:'http://172.16.0.114:10143' //胡志豪

src/assets/styles/element.less

@@ -12,7 +12,6 @@
 }
 
 .el-button--default {
-  background: rgba(242, 63, 58, 0.1);
   color: #F23F3A;
   border-color: #F23F3A;
 
@@ -344,18 +343,60 @@ input[maxlength='32']:not([disabled]) {
 .el-loading-spinner .path {
   stroke: #F4453E;
 }
-.el-upload-list__item.is-success .el-upload-list__item-name:focus, .el-upload-list__item.is-success .el-upload-list__item-name:hover{
+
+.el-upload-list__item.is-success .el-upload-list__item-name:focus,
+.el-upload-list__item.is-success .el-upload-list__item-name:hover {
   color: #F4453E;
-  i{
+
+  i {
     color: #F4453E;
     cursor: pointer;
-    transition: all .5s cubic-bezier(.55,0,.1,1)
+    transition: all .5s cubic-bezier(.55, 0, .1, 1)
   }
 }
-// .el-upload-list__item:hover{
-//   background-color:#F4453E ;
-//   .el-upload-list__item-name,.el-upload-list__item-name i{
-//     color: #fff;
-//   }
-  
-// }
+
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover,
+.el-select-dropdown__item.selected,
+.el-dialog__headerbtn .el-dialog__close:hover {
+  color: #F4453E;
+}
+
+.el-upload-list__item {
+  .el-upload-list__item-name {
+    .el-icon-document {
+      font-family: "iconfont" !important;
+      font-size: 16px;
+      font-style: normal;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    .el-icon-document:before {
+      content: '\e616'
+    }
+  }
+}
+
+.el-breadcrumb__inner {
+  color: #A5A5A5;
+}
+
+.el-select .el-input__inner:focus {
+  border-color: #F4453E;
+}
+
+.el-progress-bar__inner {
+  background-color: #F4453E;
+}
+
+.el-pagination.is-background .el-pager li:not(.active):hover {
+  color: #F4453E;
+}
+
+// maxlength 
+.maxlength-input {
+  .el-input__inner {
+    padding-right: 48px;
+  }
+}

src/layout/components/Navbar.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <el-header class="el-Navbar" style="height:80px">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item>首页</el-breadcrumb-item>
-        <el-breadcrumb-item>{{$route.meta.title}}</el-breadcrumb-item>
+    <el-header class="el-Navbar" style="height: 80px">
+      <el-breadcrumb separator-class="el-icon-arrow-right separator">
+        <el-breadcrumb-item>沪上阿姨</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
       </el-breadcrumb>
       <el-dropdown>
         <span class="el-dropdown-link">
@@ -12,16 +12,24 @@
           <i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown" trigger="click" style="width: 160px">
+          <el-dropdown-item @click.native="changePassword"
+            >修改密码</el-dropdown-item
+          >
           <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </el-header>
+    <edit ref="changePassword" />
   </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 import { logout } from '@/api/login'
+import edit from '@/pages/userManagement/components/edit.vue'
 export default {
+  components: {
+    edit
+  },
   props: {
     activeMenu: {
       type: String,
@@ -44,10 +52,15 @@ export default {
   }),
   methods: {
     logout() {
-      logout().then(() => {
-        this.$router.push('/')
+      logout().then(res => {
+        if (res.code == 0) {
+          this.$router.push('/')
+        }
       })
     },
+    changePassword() {
+      this.$refs.changePassword.openClose()
+    }
   }
 }
 </script>

src/layout/components/Sidebar/menuList.vue

@@ -16,7 +16,7 @@
       >
         <template slot="title">
           <span>
-            <i :class="item.meta.icon"></i>
+            <i :class="item.meta.icon" class="iconfont"></i>
             <span slot="title">{{ item.meta.title }}</span>
           </span>
         </template>
@@ -37,7 +37,7 @@
           :key="item.name"
         >
           <span class="icon_left"> </span>
-          <i :class="item.meta.icon"></i>
+          <i :class="item.meta.icon" class="iconfont"></i>
           <span slot="title">
             {{ item.meta.title }}
           </span>

src/layout/components/index.less

@@ -4,6 +4,16 @@
   justify-content: space-between;
   align-items: center;
 
+  .el-breadcrumb__separator[class*=icon] {
+    margin: 0;
+  }
+.el-icon-arrow-right:before{
+  content:'>'
+}
+  .el-breadcrumb__inner {
+    color: #A5A5A5 !important;
+  }
+
   .el-dropdown {
     cursor: pointer;
 
@@ -16,12 +26,14 @@
         font-size: 14px;
       }
 
-      .el-icon-arrow-down:before {
-        content: '\e790';
+      .el-icon-arrow-down {
+        box-shadow: 0px 3px 6px rgba(4, 0, 0, 0.08);
+        margin-left: 20px;
       }
 
       .el-icon--right {
-        font-size: 24px;
+        font-size: 20px;
+        line-height: 20px;
       }
 
       .userImg {

src/main.js

@@ -4,7 +4,8 @@ import router from './router'
 import store from './store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import '../static/iconfont/iconfont.css'
+// import '../static/iconfont/iconfont.css'
+import '../static/font_hsy/iconfont.css'
 import pubFun from '@/utils/pubFun'
 import '@/assets/theme/index.css'
 import '@/assets/styles/element.less'

src/pages/classification/edit.vue

@@ -4,17 +4,22 @@
     :visible.sync="dialogVisible"
     width="33%"
     :before-close="handleClose"
-    append-to-body
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    :append-to-body="true"
     v-loading.fullscreen.lock="fullscreenLoading"
   >
     <el-form label-width="100px" :model="form" ref="form" :rules="rules">
       <el-form-item label="分类名称：" prop="name">
-        <el-input placeholder="请输入" v-model="form.name"></el-input>
+        <el-input
+          placeholder="请输入名称"
+          v-model="form.name"
+          maxlength="64"
+          show-word-limit
+        ></el-input>
       </el-form-item>
-      <el-form-item label required>
-        <template slot="label" class="status">
-          <span>状&#8195;&emsp;态</span>：
-        </template>
+      <el-form-item label prop="status">
+        <template slot="label"> <span>状&#8195;&emsp;态</span>： </template>
         <el-radio-group v-model="form.status">
           <el-radio :label="1">启用</el-radio>
           <el-radio :label="0">禁用</el-radio>
@@ -36,11 +41,12 @@
             placeholder="请输入手机号"
             v-onlyInt
             maxlength="11"
+            show-word-limit
             v-model="item.value"
           ></el-input>
-          <i class="el-icon-plus" @click="addjurisdiction"></i>
+          <i class="iconfont icon-a-zu903" @click="addjurisdiction"></i>
           <i
-            class="el-icon-minus"
+            class="iconfont icon-a-zu904"
             v-if="form.role.length != 1"
             @click="deletjurisdiction(index)"
           ></i>
@@ -48,7 +54,7 @@
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+      <el-button size="small" @click="handleClose">取 消</el-button>
       <el-button
         size="small"
         style="margin-left: 60px"
@@ -71,12 +77,12 @@ export default {
       }
     }
     return {
-      fullscreenLoading:false,
+      fullscreenLoading: false,
       dialogVisible: false,
       classString: {},
       form: {
         name: '',
-        status: 0,
+        status: 1,
         role: [{ value: '' }]
       },
       rules: {
@@ -91,7 +97,7 @@ export default {
       this.$parent.search()
       this.form = {
         name: '',
-        status: 0,
+        status: 1,
         role: [{ value: '' }]
       }
       this.$refs['form'].resetFields()
@@ -117,10 +123,14 @@ export default {
         if (data.code == 0) {
           this.form = data.data
           let role = []
-          this.form.role.forEach(item => {
-            role.push({ value: item })
-          })
-          this.form.role = role
+          if (this.form.role.length != 0) {
+            this.form.role.forEach(item => {
+              role.push({ value: item })
+            })
+            this.form.role = role
+          } else {
+            this.form.role = [{ value: '' }]
+          }
         }
       })
     },
@@ -161,56 +171,56 @@ export default {
      * @method 新增
      * **/
     addclass(val) {
-      api.POST('/doc/type/add', val).then(data => {
-        if (data.code == 0) {
-          this.handleClose()
-          this.$message.success(data.message)
+      api
+        .POST('/doc/type/add', val)
+        .then(data => {
+          if (data.code == 0) {
+            this.handleClose()
+            this.$message.success(data.message)
+            this.fullscreenLoading = false
+          }
+        })
+        .catch(() => {
           this.fullscreenLoading = false
-        }
-      }).catch(()=>{
-        this.fullscreenLoading = false
-      })
+        })
     },
     /**
      * @method 编辑
      * **/
     editclass(val) {
       val.typeId = this.form.typeId
-      api.POST('/doc/type/update', val).then(data => {
-        if (data.code == 0) {
-          this.handleClose()
-          this.$message.success(data.message)
+      api
+        .POST('/doc/type/update', val)
+        .then(data => {
+          if (data.code == 0) {
+            this.handleClose()
+            this.$message.success(data.message)
+            this.fullscreenLoading = false
+          }
+        })
+        .catch(() => {
           this.fullscreenLoading = false
-        }
-      }).catch(()=>{
-        this.fullscreenLoading = false
-      })
+        })
     }
   }
 }
 </script>
 <style lang="less" scoped>
-.status {
-  padding: 0 12px 0 0;
-}
-.status::before {
-  content: '*';
-  color: #f56c6c;
-  margin-right: 4px;
-}
 .form_item_content {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
 }
-.el-icon-plus,
-.el-icon-minus {
-  border: 1px solid #f23f3a;
+.icon-a-zu903 {
   color: #f23f3a;
-  font-size: 30px;
   margin-left: 10px;
-  border-radius: 4px;
+  margin-right: 20px;
+  cursor: pointer;
+  font-size: 22px;
+}
+.icon-a-zu904 {
   cursor: pointer;
+  font-size: 22px;
 }
 .el-icon-minus {
   margin-right: 16px;

src/pages/classification/index.vue

@@ -4,38 +4,34 @@
     v-loading.fullscreen.lock="fullscreenLoading"
   >
     <div class="classification_list_headerSelect">
-      <el-form
-        slot="form"
-        style="display: inline"
-        :model="form"
-        inline
-        :addList="true"
-      >
-        <el-form-item class="header_top_form" label="分类名称：">
-          <el-input
-            v-model.trim="form.name"
-            size="small"
-            placeholder="请输入"
-            clearable
-          ></el-input>
-        </el-form-item>
-        <el-form-item class="header_top_form" label="状态：">
-          <el-select
-            v-model="form.status"
-            clearable
-            size="small"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+      <div class="classification-list-btn">
+        <el-form ref="form" :model="form" inline label-width="90px">
+          <el-form-item class="header_top_form" label="分类名称：" prop="name">
+            <el-input
+              v-model.trim="form.name"
+              size="small"
+              placeholder="请输入"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item class="header_top_form" label="状态：" prop="status">
+            <el-select
+              v-model="form.status"
+              clearable
+              size="small"
+              placeholder="请选择"
             >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div style="margin-right: 23px">
           <el-button
             size="small"
             style="width: 88px"
@@ -43,21 +39,28 @@
             @click="search"
             >查询</el-button
           >
-        </el-form-item>
-      </el-form>
-      <el-button
-        size="small"
-        style="width: 104px; margin-right: 23px"
-        @click="addList"
-        >新增</el-button
-      >
+          <el-button size="small" style="width: 88px" @click="resetForm('form')"
+            >重置</el-button
+          >
+        </div>
+      </div>
+      <div style="text-align: right">
+        <el-button
+          size="small"
+          style="width: 104px; margin-right: 23px"
+          @click="addList"
+          icon="iconfont icon-a-zu13"
+          >新增</el-button
+        >
+      </div>
     </div>
     <el-table
+      ref="editTable"
       :data="tableData"
       style="width: 100%"
       stripe
       :header-cell-style="{ background: '#F7F7F7' }"
-      height="66vh"
+      :height="screenHeight"
     >
       <el-table-column
         v-for="(item, index) in listData"
@@ -147,7 +150,7 @@ export default {
           align: 'center'
         },
         {
-          name: '状态',
+          name: '禁用/启用',
           value: 'status',
           width: '',
           minWidth: '',
@@ -167,18 +170,39 @@ export default {
           minWidth: '',
           align: 'center'
         }
-      ]
+      ],
+      screenHeight: document.body.clientHeight - 370,
+      tableDataheight: 0
     }
   },
   mounted() {
+    this.screenHeight = document.body.clientHeight - 370
+    window.onresize = () => {
+      return (() => {
+        this.screenHeight = document.body.clientHeight - 370
+      })()
+    }
     this.tableDataList()
   },
   methods: {
     /**
+     * @method 重置
+     * **/
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.search()
+    },
+    /**
      * @method 搜索
      * **/
     search() {
-      this.form.pageNum = 1
+      if (sessionStorage.getItem('classifica')) {
+        this.form.pageNum = Number(sessionStorage.getItem('classifica'))
+        sessionStorage.removeItem('classifica')
+      } else {
+        this.form.pageNum = 1
+      }
+
       this.tableDataList()
     },
     /**
@@ -206,6 +230,10 @@ export default {
             this.form.pageSize = res.data.pageSize
             this.form.total = res.data.totalCount
             this.fullscreenLoading = false
+            this.$nextTick(() => {
+              this.$refs.editTable.bodyWrapper.scrollTop = this.tableDataheight
+              this.tableDataheight = 0
+            })
           }
         })
         .catch(() => {
@@ -214,7 +242,7 @@ export default {
     },
     /**
      * @method 分页条数
-     * **/ 
+     * **/
     handleSizeChange(val) {
       this.form.pageNum = 1
       this.form.pageSize = val
@@ -222,13 +250,15 @@ export default {
     },
     /**
      * @method 分页
-     * **/ 
+     * **/
     handleCurrentChange(val) {
       this.form.pageNum = val
       this.tableDataList()
     },
     // 编辑
     edit(val) {
+      this.tableDataheight = this.$refs.editTable.bodyWrapper.scrollTop
+      sessionStorage.setItem('classifica', this.form.pageNum)
       let code = {
         title: '分类编辑',
         show: false,
@@ -250,6 +280,8 @@ export default {
      * @method 切换状态
      * **/
     switchChange(val, item) {
+      this.tableDataheight = this.$refs.editTable.bodyWrapper.scrollTop
+      sessionStorage.setItem('classifica', this.form.pageNum)
       val ? (val = 1) : (val = 0)
       let code = {
         id: item.typeId,
@@ -260,7 +292,7 @@ export default {
         .then(data => {
           if (data.code == 0) {
             this.search()
-            this.$message.success(data.data)
+            this.$message.success(data.message)
           }
         })
         .catch(() => {
@@ -273,12 +305,16 @@ export default {
 <style lang="less">
 .classification_list {
   .classification_list_headerSelect {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    .classification-list-btn {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
     margin-bottom: 32px;
     .el-form-item {
-      margin-bottom: 0;
+      margin-bottom: 10px;
       margin-right: 60px;
       .el-input__inner {
         background: #f5f5f5;
@@ -286,6 +322,10 @@ export default {
         border-radius: 17px;
       }
     }
+    .icon-a-zu13 {
+      font-size: 11px;
+      margin-right: 5px;
+    }
   }
 }
 </style>

src/pages/fileManagement/detail.vue

@@ -4,6 +4,9 @@
     :visible.sync="dialogVisible"
     width="50%"
     :before-close="handleClose"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    :append-to-body="true"
   >
     <template>
       <el-table
@@ -32,14 +35,14 @@
           prop="createUser"
           align="center"
           show-overflow-tooltip
-          label="创建人"
+          label="操作人"
         >
         </el-table-column>
         <el-table-column
           prop="createTime"
           align="center"
           show-overflow-tooltip
-          label="创建时间"
+          label="操作时间"
         >
         </el-table-column>
         <el-table-column label="操作" align="center">
@@ -50,7 +53,7 @@
       </el-table>
     </template>
     <span slot="footer" class="dialog-footer">
-      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+      <el-button size="small" @click="handleClose">取 消</el-button>
     </span>
   </el-dialog>
 </template>
@@ -88,6 +91,8 @@ export default {
      * @method 下载
      * **/
     download(val) {
+      // let code = val.docUrl.split('http://221.224.53.27:80')
+      // code = 'http://172.16.100.40:8083' + code[1]
       fetch(val.docUrl, {
         method: 'get',
         responseType: 'arraybuffer'

src/pages/fileManagement/edit.vue

@@ -4,18 +4,22 @@
     :visible.sync="dialogVisible"
     width="33%"
     :before-close="handleClose"
-     v-loading.fullscreen.lock="fullscreenLoading"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    v-loading.fullscreen.lock="fullscreenLoading"
   >
     <el-form :model="form" ref="form" :rules="rules" label-width="100px">
       <el-form-item label="分类名称：" prop="typeId">
         <el-select
+          filterable
           placeholder="请选择"
           v-model="form.typeId"
           @visible-change="visbleChange"
           @change="classifyChange"
         >
           <el-option
-            v-for="(item,index) in classifyList"
+            v-for="(item, index) in classifyList"
             :key="index"
             :label="item.name"
             :value="item.typeId"
@@ -23,15 +27,12 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="文件名称：" prop="name">
-        <el-input placeholder="请输入" v-model.trim="form.name"></el-input>
-      </el-form-item>
+
       <el-form-item label="上传文件：" prop="docUrl">
         <div>
           <el-upload
             class="upload-demo"
-            action
-            :http-request="api_import"
+            :action="url"
             :on-success="handleSuccess"
             :on-remove="handleRemove"
             multiple
@@ -39,16 +40,31 @@
             :on-exceed="handleExceed"
             :file-list="fileList"
             :before-upload="beforeAvatarUpload"
+            accept=".pdf, application/pdf"
           >
-            <el-button size="small" type="primary">点击上传</el-button>
-            <div slot="tip" class="el-upload__tip">仅支持pdf文件</div>
+            <el-button
+              size="small"
+              style="background: #579ef8; border-color: #579ef8"
+              type="primary"
+              >点击上传</el-button
+            >
+            <div slot="tip" class="el-upload__tip">
+              仅支持pdf文件,文件名称保存时生效
+            </div>
           </el-upload>
         </div>
       </el-form-item>
-      <el-form-item required>
-        <template slot="label" class="status"
-          ><span>状&#8195;&emsp;态</span>：</template
-        >
+      <el-form-item label="文件名称：" prop="name">
+        <el-input
+          class="maxlength-input"
+          placeholder="请输入"
+          maxlength="64"
+          show-word-limit
+          v-model.trim="form.name"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="status">
+        <template slot="label"><span>状&#8195;&emsp;态</span>：</template>
         <el-radio-group v-model="form.status">
           <el-radio :label="1">启用</el-radio>
           <el-radio :label="0">禁用</el-radio>
@@ -72,24 +88,27 @@ import * as api from '@/api/api'
 export default {
   data() {
     return {
-      fullscreenLoading:false,
+      fullscreenLoading: false,
       dialogVisible: false,
       form: {
         docUrl: '',
         id: '',
         linkUrl: '',
         name: '',
-        status: 0,
+        status: 1,
         typeId: ''
       },
       refList: {},
       fileList: [],
       classifyList: [],
-      rules:{
-        typeId:[{required:true,trigger:'change',message:'请选择分类名称'}],
-        name:[{required:true,trigger:'blur',message:'请输入文件名称'}],
-        docUrl:[{required:true,trigger:'click',message:'请上传文件'}]
-      }
+      rules: {
+        typeId: [
+          { required: true, trigger: 'change', message: '请选择分类名称' }
+        ],
+        name: [{ required: true, trigger: 'blur', message: '请输入文件名称' }],
+        docUrl: [{ required: true, trigger: 'click', message: '请上传文件' }]
+      },
+      url: window.global_config.BASE_URL + '/api/file/local/upload'
     }
   },
   methods: {
@@ -104,7 +123,7 @@ export default {
         id: '',
         linkUrl: '',
         name: '',
-        status: 0,
+        status: 1,
         typeId: '',
         fileSize: ''
       }
@@ -131,7 +150,7 @@ export default {
       api.GET('/doc/getDetail', { id: this.refList.id }).then(data => {
         if (data.code == 0) {
           this.form = data.data
-          this.fileList = [{name:this.form.name,url:this.form.docUrl}]
+          this.fileList = [{ name: this.form.name, url: this.form.docUrl }]
         }
       })
     },
@@ -160,22 +179,29 @@ export default {
     /**
      * @method 上传
      * **/
-    api_import(file) {
-      const files = {
-        file: file.file
-      }
-      api.IMPORT('/api/file/local/upload', files).then(data => {
-        if (data.code == 0) {
-          data.data.name = data.data.fileName
-          this.fileList = [data.data]
-          this.form.docUrl = data.data.url
-          this.form.fileSize = data.data.size
-          this.$message.success('上传成功')
-        }
-      }).catch(()=>{
-        this.fileList = []
-      })
-    },
+    // api_import(file) {
+    //   const files = {
+    //     file: file.file
+    //   }
+    //   api
+    //     .IMPORT('/api/file/local/upload', files)
+    //     .then(data => {
+    //       if (data.code == 0) {
+    //         this.form.name == ''
+    //           ? (this.form.name = file.file.name)
+    //           : this.form.name
+
+    //         // data.data.name = this.form.name
+    //         // this.fileList = [data.data]
+    //         this.form.docUrl = data.data.url
+    //         this.form.fileSize = data.data.size
+    //         this.$message.success('上传成功')
+    //       }
+    //     })
+    //     .catch(() => {
+    //       this.fileList = []
+    //     })
+    // },
     /**
      * @method 文件上传限制
      * **/
@@ -187,13 +213,21 @@ export default {
     /**
      * @method 上传成功
      * **/
-    handleSuccess(file,fileList) {
-      console.log(file,fileList)
+    handleSuccess(file, fileList) {
+      this.form.name == ''
+        ? (this.form.name = fileList.name.split('.pdf')[0].substring(0, 64))
+        : this.form.name
+      file.data.name = this.form.name
+      this.fileList = [file.data]
+      this.form.docUrl = file.data.url
+      this.form.fileSize = file.data.size
+      this.$message.success('上传成功')
     },
     /**
      * @method 文件删除
      * **/
     handleRemove(files, fileList) {
+      this.form.name = ''
       this.fileList = fileList
       this.form.docUrl = ''
       this.form.fileSize = ''
@@ -232,30 +266,36 @@ export default {
      * @method 新增文件
      * **/
     addfile(val) {
-      api.POST('/doc/addDoc', val).then(data => {
-        if (data.code == 0) {
-          this.$message.success(data.message)
-          this.handleClose()
+      api
+        .POST('/doc/addDoc', val)
+        .then(data => {
+          if (data.code == 0) {
+            this.$message.success(data.message)
+            this.handleClose()
+            this.fullscreenLoading = false
+          }
+        })
+        .catch(() => {
           this.fullscreenLoading = false
-        }
-      }).catch(()=>{
-        this.fullscreenLoading = false
-      })
+        })
     },
     /**
      * @method 编辑文件
      * **/
     editfile(val) {
       val.id = this.form.id
-      api.PUT('/doc/updateDoc',val).then(data => {
-        if (data.code == 0) {
-          this.$message.success(data.message)
-          this.handleClose()
+      api
+        .PUT('/doc/updateDoc', val)
+        .then(data => {
+          if (data.code == 0) {
+            this.$message.success(data.message)
+            this.handleClose()
+            this.fullscreenLoading = false
+          }
+        })
+        .catch(() => {
           this.fullscreenLoading = false
-        }
-      }).catch(()=>{
-        this.fullscreenLoading = false
-      })
+        })
     }
   }
 }

src/pages/fileManagement/index.vue

@@ -4,55 +4,56 @@
     v-loading.fullscreen.lock="fullscreenLoading"
   >
     <div class="fileManagement_List_headerSelect">
-      <el-form
-        slot="form"
-        style="display: inline"
-        :model="form"
-        inline
-        :addList="true"
-      >
-        <el-form-item class="header_top_form" label="分类名称：">
-          <el-select
-            clearable
-            size="small"
-            placeholder="请选择"
-            v-model="form.typeId"
-            @visible-change="visbleChange"
+      <div class="fileManagement-list-btn">
+        <el-form style="display: inline" :model="form" ref="form" inline>
+          <el-form-item
+            class="header_top_form"
+            label="分类名称："
+            prop="typeId"
           >
-            <el-option
-              v-for="(item, index) in classifyList"
-              :key="index"
-              :label="item.name"
-              :value="item.typeId"
+            <el-select
+              clearable
+              filterable
+              size="small"
+              placeholder="请选择"
+              v-model="form.typeId"
+              @visible-change="visbleChange"
             >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item class="header_top_form" label="文件名称：">
-          <el-input
-            clearable
-            v-model.trim="form.name"
-            placeholder="请输入"
-            size="small"
-          ></el-input>
-        </el-form-item>
-        <el-form-item class="header_top_form" label="状态：">
-          <el-select
-            v-model="form.status"
-            clearable
-            size="small"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              <el-option
+                v-for="(item, index) in classifyList"
+                :key="index"
+                :label="item.name"
+                :value="item.typeId"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item class="header_top_form" label="文件名称：" prop="name">
+            <el-input
+              clearable
+              v-model.trim="form.name"
+              placeholder="请输入"
+              size="small"
+            ></el-input>
+          </el-form-item>
+          <el-form-item class="header_top_form" label="状态：" prop="status">
+            <el-select
+              v-model="form.status"
+              clearable
+              size="small"
+              placeholder="请选择"
             >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div style="margin-right: 23px">
           <el-button
             size="small"
             type="primary"
@@ -60,21 +61,29 @@
             @click="search"
             >查询</el-button
           >
-        </el-form-item>
-      </el-form>
-      <el-button
-        size="small"
-        style="width: 104px; margin-right: 23px"
-        @click="addList"
-        >新增</el-button
-      >
+          <el-button size="small" style="width: 88px" @click="resetForm('form')"
+            >重置</el-button
+          >
+        </div>
+      </div>
+
+      <div style="text-align: right">
+        <el-button
+          size="small"
+          style="width: 104px; margin-right: 23px"
+          icon="iconfont icon-a-zu13"
+          @click="addList"
+          >新增</el-button
+        >
+      </div>
     </div>
     <el-table
       :data="tableData"
       style="width: 100%"
       stripe
       :header-cell-style="{ background: '#F7F7F7' }"
-      height="66vh"
+      :height="screenHeight"
+      ref="editTable"
     >
       <el-table-column
         v-for="(item, index) in listData"
@@ -164,7 +173,7 @@ export default {
         },
         {
           name: '链接地址',
-          value: 'docUrl',
+          value: 'linkUrl',
           width: '',
           minWidth: '',
           align: 'center'
@@ -200,19 +209,34 @@ export default {
         status: '',
         typeId: ''
       },
-      classifyList: []
+      classifyList: [],
+      screenHeight:document.body.clientHeight-370,
+      tableDataheight: 0
     }
   },
   mounted() {
+    this.screenHeight = document.body.clientHeight-370;
+      window.onresize = () => {
+        return (() => {
+          this.screenHeight = document.body.clientHeight-370;
+        })();
+      };
     this.listDataInit()
   },
   methods: {
     /**
+     * @method 重置
+     * **/
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.search()
+    },
+    /**
      * @method 分类下拉列表
      * **/
     visbleChange(val) {
       if (val) {
-        api.POST('/doc/type/dropList').then(data => {
+        api.GET('/doc/type/dropListAll').then(data => {
           if (data.code == 0) {
             this.classifyList = data.data
           }
@@ -223,7 +247,12 @@ export default {
      * @method 搜索
      * **/
     search() {
-      this.form.pageNum = 1
+      if (sessionStorage.getItem('filemanage')) {
+        this.form.pageNum = Number(sessionStorage.getItem('filemanage'))
+        sessionStorage.removeItem('filemanage')
+      } else {
+        this.form.pageNum = 1
+      }
       this.listDataInit()
     },
     /**
@@ -252,6 +281,10 @@ export default {
             this.form.pageSize = res.data.pageSize
             this.form.total = res.data.totalCount
             this.fullscreenLoading = false
+            this.$nextTick(() => {
+              this.$refs.editTable.bodyWrapper.scrollTop = this.tableDataheight
+              this.tableDataheight = 0
+            })
           }
         })
         .catch(() => {
@@ -285,6 +318,8 @@ export default {
     },
     // 编辑
     edit(val) {
+      this.tableDataheight = this.$refs.editTable.bodyWrapper.scrollTop
+      sessionStorage.setItem('filemanage', this.form.pageNum)
       let code = {
         title: '文件编辑',
         show: false,
@@ -294,6 +329,8 @@ export default {
     },
     // 历史版本
     history(val) {
+      this.tableDataheight = this.$refs.editTable.bodyWrapper.scrollTop
+      sessionStorage.setItem('filemanage', this.form.pageNum)
       const code = {
         id: val.id
       }
@@ -303,6 +340,8 @@ export default {
      * @method 状态修改
      * **/
     statusChange(val, item) {
+      this.tableDataheight = this.$refs.editTable.bodyWrapper.scrollTop
+      sessionStorage.setItem('filemanage', this.form.pageNum)
       val ? (val = 1) : (val = 0)
       let code = {
         id: item.id,
@@ -326,12 +365,18 @@ export default {
 <style lang="less">
 .fileManagement_List {
   .fileManagement_List_headerSelect {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    .fileManagement-list-btn{
+      display: flex;
+      justify-content: space-between;
+      align-items:center;
+      margin-bottom: 10px;
+      .el-input__suffix{
+        height: 32px;
+      }
+    }
     margin-bottom: 32px;
     .el-form-item {
-      margin-bottom: 0;
+      margin-bottom: 10px;
       margin-right: 60px;
       .el-input__inner {
         background: #f5f5f5;
@@ -339,6 +384,10 @@ export default {
         border-radius: 17px;
       }
     }
+    .icon-a-zu13 {
+      font-size: 11px;
+      margin-right: 5px;
+    }
   }
 }
 </style>

src/pages/login/index.less

@@ -7,6 +7,7 @@
   background-color: #f4e1e4 !important;
   width: 100vw;
   min-height: 100vh;
+  height: 100vh !important;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -39,15 +40,9 @@
 
   .form-box {
     background: #fff;
-    // display: flex;
-    // flex-direction: column;
-    // justify-content: center;
     width: 25vw;
     height: 50vh;
     padding: 5vh;
-    // position: fixed;
-    // right: 5vw;
-    // top: 15vh;
     border-radius: 2vh;
     z-index: 2;
 
@@ -75,7 +70,7 @@
       }
 
       .el-form-item {
-        margin-bottom: 2vh;
+        // margin-bottom: 2vh;
       }
 
       .el-form-item__label {
@@ -105,7 +100,7 @@
         border-color: linear-gradient(90deg, #FA6253 0%, #F23D39 100%);
         opacity: 1;
         border-radius: 46px;
-        font-size: 28px;
+        font-size: 3vh;
         font-weight: 400
       }
     }

src/pages/login/index.vue

@@ -10,20 +10,19 @@
             maxlength="11"
             v-model.trim="form.account"
             prefix-icon="el-icon-user"
-            placeholder="请输入"
-            onkeyup="this.value=this.value.replace(/[.]/g,'');"
+            placeholder="请输入账号"
           ></el-input>
         </el-form-item>
         <el-form-item prop="password">
           <el-input
             prefix-icon="el-icon-lock"
-            placeholder="请输入"
+            placeholder="请输入密码"
             v-model="form.password"
             show-password
-            @keyup.enter.native="loginFun"
+            @keyup.enter.native="loginFun('form')"
           ></el-input>
         </el-form-item>
-        <el-button type="primary" class="loginButton" @click="loginFun"
+        <el-button type="primary" class="loginButton" @click="loginFun('form')"
           >登录
         </el-button>
       </el-form>
@@ -37,23 +36,9 @@ import { mapMutations } from 'vuex'
 export default {
   name: 'Login',
   data() {
-    const validateUsername = (rule, value, callback) => {
-      if (!/^1[3456789]\d{9}$/.test(value)) {
-        callback(new Error('请输入正确的手机号'))
-      } else {
-        callback()
-      }
-    }
-    const validateUser = (rule, value, callback) => {
-      if (!/^1[3456789]\d{9}$/.test(value)) {
-        callback(new Error('请输入正确的手机号'))
-      } else {
-        callback()
-      }
-    }
     const validatePass = (rule, value, callback) => {
-      if (value.length < 5) {
-        callback(new Error('密码不能小于5位'))
+      if (value == '') {
+        callback(new Error('密码不能为空'))
       } else {
         callback()
       }
@@ -64,7 +49,7 @@ export default {
         password: ''
       },
       loginRules: {
-        // account: [{ required: true, trigger: 'blur', validator: validateUser }],
+        account: [{ required: true, trigger: 'blur', message: '账号不能为空' }],
         password: [{ required: true, trigger: 'blur', validator: validatePass }]
       }
     }
@@ -76,18 +61,21 @@ export default {
     ...mapMutations({
       clearRouter: 'permission/ClEAR_LIST'
     }),
-    loginFun() {
-      // ? this.$md5(this.form.password) : ''
-      let params = {
-        account: this.form.account,
-        password: this.form.password
-      }
-      login(params).then(res => {
-        localStorage.setItem('Token', res.data.token)
-        localStorage.setItem('userInfo', JSON.stringify(res.data))
-        this.$store.commit('getLoginReturnInformation', res.data)
-        sessionStorage.setItem('currentPage', '/index')
-        this.$router.push('/index')
+    loginFun(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          let params = {
+            account: this.form.account,
+            password: this.form.password
+          }
+          login(params).then(res => {
+            localStorage.setItem('Token', res.data.token)
+            localStorage.setItem('userInfo', JSON.stringify(res.data))
+            this.$store.commit('getLoginReturnInformation', res.data)
+            sessionStorage.setItem('currentPage', '/index')
+            this.$router.push('/index')
+          })
+        }
       })
     }
   }

src/pages/userManagement/components/edit.vue

@@ -0,0 +1,170 @@
+<template>
+  <el-dialog
+    title="修改密码"
+    :visible.sync="dialogVisible"
+    width="33%"
+    :before-close="handleClose"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    v-loading.fullscreen.lock="fullscreenLoading"
+  >
+    <el-form
+      v-if="dialogVisible"
+      :model="number"
+      ref="number"
+      :rules="rules"
+      label-width="100px"
+      label-position="right"
+    >
+      <el-form-item label prop="oldPassword">
+        <template slot="label" class="status"><span>原密码</span>：</template>
+        <el-input
+          placeholder="请输入原密码"
+          v-model.trim="number.oldPassword"
+          show-password
+          minlength="6"
+          maxlength="18"
+          show-word-limit
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label prop="newPassword">
+        <template slot="label" class="status"><span>新密码</span>：</template>
+        <el-input
+          placeholder="请输入新密码"
+          v-model.trim="number.newPassword"
+          show-password
+          minlength="6"
+          maxlength="18"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item label prop="password">
+        <template slot="label" class="status"><span>确认密码</span>：</template>
+        <el-input
+          placeholder="请输入确认密码"
+          v-model.trim="number.password"
+          show-password
+          minlength="6"
+          maxlength="18"
+          show-word-limit
+        >
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="small" @click="handleClose">取 消</el-button>
+      <el-button
+        size="small"
+        style="margin-left: 60px"
+        type="primary"
+        @click="submit('number')"
+        >确 定</el-button
+      >
+    </span>
+  </el-dialog>
+</template>
+<script>
+import * as api from '@/api/api'
+export default {
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (value == '') {
+        callback(new Error('原密码不能为空'))
+      } else if (value.length < 6 || value.length > 18) {
+        callback(new Error('密码不能小于6位，大于18位'))
+      } else {
+        callback()
+      }
+    }
+    const validatenewPassword = (rule, value, callback) => {
+      if (value == '') {
+        callback(new Error('新密码不能为空'))
+      } else if (value.length < 6 || value.length > 18) {
+        callback(new Error('密码不能小于6位，大于18位'))
+      } else {
+        callback()
+      }
+    }
+    const validatenewPass = (rule, value, callback) => {
+      if (value == '') {
+        callback(new Error('确认密码不能为空'))
+      } else if (value != this.number.newPassword) {
+        callback(new Error('确认密码与新密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      fullscreenLoading: false,
+      dialogVisible: false,
+      number: {
+        account: JSON.parse(localStorage.getItem('userInfo')).account,
+        newPassword: '',
+        oldPassword: '',
+        password: ''
+      },
+      id: '',
+      rules: {
+        oldPassword: [
+          { required: true, trigger: 'blur', validator: validatePass }
+        ],
+        newPassword: [
+          { required: true, trigger: 'blur', validator: validatenewPassword }
+        ],
+        password: [
+          { required: true, trigger: 'blur', validator: validatenewPass }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.dialogVisible = false
+      this.$refs['number'].resetFields()
+    },
+    openClose() {
+      this.dialogVisible = true
+    },
+    /**
+     * @method 确定提交
+     * **/
+    submit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.fullscreenLoading = true
+          let code = {
+            account: this.number.account,
+            newPassword: this.number.newPassword,
+            oldPassword: this.number.oldPassword,
+            password: this.number.password
+          }
+          api
+            .POST('/update', code)
+            .then(res => {
+              if (res.code == 0) {
+                this.handleClose()
+                this.$message.success(res.message)
+                this.fullscreenLoading = false
+              }
+            })
+            .catch(() => {
+              this.fullscreenLoading = false
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+// .status {
+//   padding: 0 12px 0 0;
+// }
+// .status::before {
+//   content: '*';
+//   color: #f56c6c;
+//   margin-right: 4px;
+// }
+</style>

src/pages/userManagement/detail.vue

@@ -4,6 +4,9 @@
     :visible.sync="dialogVisible"
     width="33%"
     :before-close="handleClose"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    :append-to-body="true"
     v-loading.fullscreen.lock="fullscreenLoading"
   >
     <el-form :model="number" ref="number" :rules="rules" label-width="100px">
@@ -12,15 +15,25 @@
           ><span>密&#8195;&emsp;码</span>：</template
         >
         <el-input
+          :type="type"
           placeholder="请输入"
           v-model.trim="number.password"
+          autocomplete="off"
           minlength="6"
           maxlength="18"
-        ></el-input>
+          show-word-limit
+          readonly
+          @focus="focus"
+          onfocus="this.removeAttribute('readonly')"
+        >
+          <template slot="suffix">
+            <span class="el-icon-view" @click="elIconView"> </span>
+          </template>
+        </el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+      <el-button size="small" @click="handleClose">取 消</el-button>
       <el-button
         size="small"
         style="margin-left: 60px"
@@ -36,13 +49,17 @@ import * as api from '@/api/api'
 export default {
   data() {
     const validatePass = (rule, value, callback) => {
-      if (value.length < 6 || value.length > 18) {
-        callback(new Error('密码不能小于6位，大于18位'))
+      if (value == '') {
+        callback(new Error('密码不能为空'))
+      } else if (value.length < 6 || value.length > 18) {
+        callback(new Error('密码不能小于6位'))
       } else {
         callback()
       }
     }
     return {
+      type: 'text',
+      readonlsy: true,
       fullscreenLoading: false,
       dialogVisible: false,
       number: {
@@ -55,8 +72,14 @@ export default {
     }
   },
   methods: {
+    elIconView() {
+      this.type == 'password' ? (this.type = 'text') : (this.type = 'password')
+    },
+    focus() {
+      this.type = 'password'
+    },
     handleClose() {
-      this.number.password = ''
+      this.type = 'password'
       this.dialogVisible = false
       this.$parent.search()
       this.$refs['number'].resetFields()
@@ -81,7 +104,7 @@ export default {
             .then(res => {
               if (res.code == 0) {
                 this.handleClose()
-                this.$message.success(res.data)
+                this.$message.success(res.message)
                 this.fullscreenLoading = false
               }
             })
@@ -94,13 +117,5 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
-// .status {
-//   padding: 0 12px 0 0;
-// }
-// .status::before {
-//   content: '*';
-//   color: #f56c6c;
-//   margin-right: 4px;
-// }
+<style lang="less">
 </style>

src/pages/userManagement/edit.vue

@@ -4,28 +4,50 @@
     :visible.sync="dialogVisible"
     width="33%"
     :before-close="handleClose"
-     v-loading.fullscreen.lock="fullscreenLoading"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    v-loading.fullscreen.lock="fullscreenLoading"
   >
     <el-form ref="form" :model="form" label-width="100px" :rules="rules">
       <el-form-item prop="account">
         <template slot="label" class="status"
           ><span>账&#8195;&emsp;号</span>：</template
         >
-        <el-input placeholder="请输入" v-model.trim="form.account"></el-input>
+        <el-input
+          placeholder="请输入"
+          v-model.trim="form.account"
+          maxlength="32"
+          show-word-limit
+        ></el-input>
       </el-form-item>
       <el-form-item prop="name">
         <template slot="label" class="status"
           ><span>姓&#8195;&emsp;名</span>：</template
         >
-        <el-input placeholder="请输入" v-model.trim="form.name"></el-input>
+        <el-input
+          type="text"
+          placeholder="请输入"
+          v-model.trim="form.name"
+          maxlength="32"
+          show-word-limit
+        ></el-input>
       </el-form-item>
-      <el-form-item prop="password">
+      <el-form-item prop="password" v-if="userString.show">
         <template slot="label" class="status"
           ><span>密&#8195;&emsp;码</span>：</template
         >
-        <el-input placeholder="请输入" v-model.trim="form.password"></el-input>
+        <el-input
+          autoComplete="new-password"
+          show-password
+          placeholder="请输入"
+          v-model.trim="form.password"
+          minlength="6"
+          maxlength="18"
+          show-word-limit
+        ></el-input>
       </el-form-item>
-      <el-form-item label>
+      <el-form-item label prop="status">
         <template slot="label" class="status"
           ><span>状&#8195;&emsp;态</span>：</template
         >
@@ -52,14 +74,16 @@ import * as api from '@/api/api'
 export default {
   data() {
     const validatePass = (rule, value, callback) => {
-      if (value.length < 6 || value.length > 18) {
-        callback(new Error('密码不能小于6位，大于18位'))
+      if (value == '') {
+        callback(new Error('密码不能为空'))
+      } else if (value.length < 6 || value.length > 18) {
+        callback(new Error('密码不能小于6位'))
       } else {
         callback()
       }
     }
     return {
-      fullscreenLoading:false,
+      fullscreenLoading: false,
       dialogVisible: false,
       radio: '',
       title: '',
@@ -67,7 +91,7 @@ export default {
         account: '',
         name: '',
         password: '',
-        status: 0,
+        status: 1,
         userId: ''
       },
       userString: {},
@@ -86,7 +110,7 @@ export default {
         account: '',
         name: '',
         password: '',
-        status: '',
+        status: 1,
         userId: ''
       }
       this.$refs['form'].resetFields()
@@ -138,30 +162,36 @@ export default {
      * @method 新增
      * **/
     addListData(val) {
-      api.POST('/user/add', val).then(data => {
-        if (data.code == 0) {
-          this.handleClose()
-          this.$message.success(data.message)
+      api
+        .POST('/user/add', val)
+        .then(data => {
+          if (data.code == 0) {
+            this.handleClose()
+            this.$message.success(data.message)
+            this.fullscreenLoading = false
+          }
+        })
+        .catch(() => {
           this.fullscreenLoading = false
-        }
-      }).catch(()=>{
-        this.fullscreenLoading = false
-      })
+        })
     },
     /**
      * @method 编辑
      * **/
     editListData(val) {
       val.userId = this.form.userId
-      api.POST('/user/update', val).then(data => {
-        if (data.code == 0) {
-          this.handleClose()
-          this.$message.success(data.message)
+      api
+        .POST('/user/update', val)
+        .then(data => {
+          if (data.code == 0) {
+            this.handleClose()
+            this.$message.success(data.message)
+            this.fullscreenLoading = false
+          }
+        })
+        .catch(() => {
           this.fullscreenLoading = false
-        }
-      }).catch(()=>{
-        this.fullscreenLoading = false
-      })
+        })
     }
   }
 }

src/pages/userManagement/index.vue

@@ -4,24 +4,26 @@
     class="userManagement_list"
   >
     <div class="userManagement_list_headerSelect">
-      <el-form slot="form" style="display: inline" inline :addList="true">
-        <el-form-item class="header_top_form" label="账号：">
-          <el-input
-            placeholder="请输入"
-            size="small"
-            v-model.trim="form.account"
-            clearable
-          ></el-input>
-        </el-form-item>
-        <el-form-item class="header_top_form" label="姓名：">
-          <el-input
-            placeholder="请输入"
-            size="small"
-            v-model.trim="form.name"
-            clearable
-          ></el-input>
-        </el-form-item>
-        <el-form-item>
+      <div class="userManagement-list-btn">
+        <el-form :model="form" ref="form" style="display: inline" inline>
+          <el-form-item class="header_top_form" label="账号：" prop="account">
+            <el-input
+              placeholder="请输入"
+              size="small"
+              v-model.trim="form.account"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item class="header_top_form" label="姓名：" prop="name">
+            <el-input
+              placeholder="请输入"
+              size="small"
+              v-model.trim="form.name"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <div style="margin-right: 23px">
           <el-button
             size="small"
             type="primary"
@@ -29,21 +31,28 @@
             @click="search"
             >查询</el-button
           >
-        </el-form-item>
-      </el-form>
-      <el-button
-        size="small"
-        style="width: 104px; margin-right: 23px"
-        @click="addList"
-        >新增</el-button
-      >
+          <el-button size="small" style="width: 88px" @click="resetForm('form')"
+            >重置</el-button
+          >
+        </div>
+      </div>
+      <div style="text-align: right">
+        <el-button
+          size="small"
+          style="width: 104px; margin-right: 23px"
+          icon="iconfont icon-a-zu13"
+          @click="addList"
+          >新增</el-button
+        >
+      </div>
     </div>
     <el-table
       :data="tableData"
+      ref="editTable"
       style="width: 100%"
       stripe
       :header-cell-style="{ background: '#F7F7F7' }"
-      height="66vh"
+      :height="screenHeight"
     >
       <el-table-column
         v-for="(item, index) in listData"
@@ -151,18 +160,39 @@ export default {
         name: '',
         start: '',
         total: 0
-      }
+      },
+      screenHeight: document.body.clientHeight - 370,
+      tableDataheight: 0
     }
   },
   mounted() {
+    this.screenHeight = document.body.clientHeight - 370
+    window.onresize = () => {
+      return (() => {
+        this.screenHeight = document.body.clientHeight - 370
+      })()
+    }
     this.listDataInit()
   },
   methods: {
     /**
+     * @method 重置
+     * **/
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.search()
+    },
+    /**
      * @method 搜索
      * **/
     search() {
-      this.form.pageNum = 1
+      if (sessionStorage.getItem('usermanage')) {
+        this.form.pageNum = Number(sessionStorage.getItem('usermanage'))
+        sessionStorage.removeItem('usermanage')
+      } else {
+        this.form.pageNum = 1
+      }
+
       this.listDataInit()
     },
     /**
@@ -190,6 +220,10 @@ export default {
             this.form.pageSize = res.data.pageSize
             this.form.total = res.data.totalCount
             this.fullscreenLoading = false
+            this.$nextTick(() => {
+              this.$refs.editTable.bodyWrapper.scrollTop = this.tableDataheight
+              this.tableDataheight = 0
+            })
           }
         })
         .catch(() => {
@@ -223,6 +257,8 @@ export default {
     },
     // 编辑
     edit(val) {
+      this.tableDataheight = this.$refs.editTable.bodyWrapper.scrollTop
+      sessionStorage.setItem('usermanage', this.form.pageNum)
       let code = {
         title: '编辑用户',
         show: false,
@@ -232,6 +268,8 @@ export default {
     },
     // 重置密码
     resetPasswords(val) {
+      this.tableDataheight = this.$refs.editTable.bodyWrapper.scrollTop
+      sessionStorage.setItem('usermanage', this.form.pageNum)
       let code = {
         id: val.userId
       }
@@ -241,19 +279,24 @@ export default {
      * @method 状态修改
      * **/
     statusChange(val, item) {
+      this.tableDataheight = this.$refs.editTable.bodyWrapper.scrollTop
+      sessionStorage.setItem('usermanage', this.form.pageNum)
       val ? (val = 1) : (val = 0)
       let code = {
         id: item.userId,
         status: val
       }
-      api.PUT('/user/updateSwitch', code).then(data => {
-        if (data.code == 0) {
+      api
+        .PUT('/user/updateSwitch', code)
+        .then(data => {
+          if (data.code == 0) {
+            this.search()
+            this.$message.success(data.message)
+          }
+        })
+        .catch(() => {
           this.search()
-          this.$message.success(data.message)
-        }
-      }).catch(()=>{
-        this.search()
-      })
+        })
     }
   }
 }
@@ -261,12 +304,15 @@ export default {
 <style lang="less">
 .userManagement_list {
   .userManagement_list_headerSelect {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    .userManagement-list-btn {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
     margin-bottom: 32px;
     .el-form-item {
-      margin-bottom: 0;
+      margin-bottom: 10px;
       margin-right: 60px;
       .el-input__inner {
         background: #f5f5f5;
@@ -274,6 +320,10 @@ export default {
         border-radius: 17px;
       }
     }
+    .icon-a-zu13 {
+      font-size: 11px;
+      margin-right: 5px;
+    }
   }
 }
 </style>

src/router/routes.js

@@ -20,7 +20,7 @@ export const appRouter = [{
     path: '/index',
     meta: {
       title: '分类管理',
-      icon: 'el-icon-files'
+      icon: 'icon-a-lujing3'
     },
     component: () => import('@/pages/classification')
   },
@@ -31,7 +31,7 @@ export const appRouter = [{
     path: '/fileManagement',
     meta: {
       title: '文件管理',
-      icon: 'el-icon-folder-opened'
+      icon: 'icon-a-zu8'
     },
     component: () => import('@/pages/fileManagement')
   },
@@ -42,7 +42,7 @@ export const appRouter = [{
     path: '/userManagement',
     meta: {
       title: '用户管理',
-      icon: 'el-icon-s-custom'
+      icon: 'icon-a-zu10'
     },
     component: () => import('@/pages/userManagement')
   }

static/font_hsy/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

static/font_hsy/demo_index.html

@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2880374" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">组 904</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">组 903</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">组 829</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">组 850</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">组 3</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">组 10</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">组 13</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe611;</span>
+                <div class="name">路径 3</div>
+                <div class="code-name">&amp;#xe611;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">组 8</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">组 1</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1635484775543') format('woff2'),
+       url('iconfont.woff?t=1635484775543') format('woff'),
+       url('iconfont.ttf?t=1635484775543') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-zu904"></span>
+            <div class="name">
+              组 904
+            </div>
+            <div class="code-name">.icon-a-zu904
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-zu903"></span>
+            <div class="name">
+              组 903
+            </div>
+            <div class="code-name">.icon-a-zu903
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-zu829"></span>
+            <div class="name">
+              组 829
+            </div>
+            <div class="code-name">.icon-a-zu829
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-zu850"></span>
+            <div class="name">
+              组 850
+            </div>
+            <div class="code-name">.icon-a-zu850
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-zu3"></span>
+            <div class="name">
+              组 3
+            </div>
+            <div class="code-name">.icon-a-zu3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-zu10"></span>
+            <div class="name">
+              组 10
+            </div>
+            <div class="code-name">.icon-a-zu10
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-zu13"></span>
+            <div class="name">
+              组 13
+            </div>
+            <div class="code-name">.icon-a-zu13
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-lujing3"></span>
+            <div class="name">
+              路径 3
+            </div>
+            <div class="code-name">.icon-a-lujing3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-zu8"></span>
+            <div class="name">
+              组 8
+            </div>
+            <div class="code-name">.icon-a-zu8
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-zu1"></span>
+            <div class="name">
+              组 1
+            </div>
+            <div class="code-name">.icon-a-zu1
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-zu904"></use>
+                </svg>
+                <div class="name">组 904</div>
+                <div class="code-name">#icon-a-zu904</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-zu903"></use>
+                </svg>
+                <div class="name">组 903</div>
+                <div class="code-name">#icon-a-zu903</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-zu829"></use>
+                </svg>
+                <div class="name">组 829</div>
+                <div class="code-name">#icon-a-zu829</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-zu850"></use>
+                </svg>
+                <div class="name">组 850</div>
+                <div class="code-name">#icon-a-zu850</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-zu3"></use>
+                </svg>
+                <div class="name">组 3</div>
+                <div class="code-name">#icon-a-zu3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-zu10"></use>
+                </svg>
+                <div class="name">组 10</div>
+                <div class="code-name">#icon-a-zu10</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-zu13"></use>
+                </svg>
+                <div class="name">组 13</div>
+                <div class="code-name">#icon-a-zu13</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-lujing3"></use>
+                </svg>
+                <div class="name">路径 3</div>
+                <div class="code-name">#icon-a-lujing3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-zu8"></use>
+                </svg>
+                <div class="name">组 8</div>
+                <div class="code-name">#icon-a-zu8</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-zu1"></use>
+                </svg>
+                <div class="name">组 1</div>
+                <div class="code-name">#icon-a-zu1</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

static/font_hsy/iconfont.css

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2880374 */
+  src: url('iconfont.woff2?t=1635484775543') format('woff2'),
+       url('iconfont.woff?t=1635484775543') format('woff'),
+       url('iconfont.ttf?t=1635484775543') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-a-zu904:before {
+  content: "\e619";
+}
+
+.icon-a-zu903:before {
+  content: "\e618";
+}
+
+.icon-a-zu829:before {
+  content: "\e616";
+}
+
+.icon-a-zu850:before {
+  content: "\e617";
+}
+
+.icon-a-zu3:before {
+  content: "\e614";
+}
+
+.icon-a-zu10:before {
+  content: "\e615";
+}
+
+.icon-a-zu13:before {
+  content: "\e610";
+}
+
+.icon-a-lujing3:before {
+  content: "\e611";
+}
+
+.icon-a-zu8:before {
+  content: "\e612";
+}
+
+.icon-a-zu1:before {
+  content: "\e613";
+}
+

static/font_hsy/iconfont.json

@@ -0,0 +1,79 @@
+{
+  "id": "2880374",
+  "name": "沪上阿姨",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "25285617",
+      "name": "组 904",
+      "font_class": "a-zu904",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "25285616",
+      "name": "组 903",
+      "font_class": "a-zu903",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "25095667",
+      "name": "组 829",
+      "font_class": "a-zu829",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "25095668",
+      "name": "组 850",
+      "font_class": "a-zu850",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "25068452",
+      "name": "组 3",
+      "font_class": "a-zu3",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "25068453",
+      "name": "组 10",
+      "font_class": "a-zu10",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "25068448",
+      "name": "组 13",
+      "font_class": "a-zu13",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "25068449",
+      "name": "路径 3",
+      "font_class": "a-lujing3",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "25068450",
+      "name": "组 8",
+      "font_class": "a-zu8",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "25068451",
+      "name": "组 1",
+      "font_class": "a-zu1",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    }
+  ]
+}