个人中心/表单icon

src/assets/iconfonts/iconfont.css

@@ -0,0 +1,76 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3409379 */
+  src: url('iconfont.woff2?t=1653383362524') format('woff2'),
+       url('iconfont.woff?t=1653383362524') format('woff'),
+       url('iconfont.ttf?t=1653383362524') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 14px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 32px;
+}
+
+.icon-yonghuyouxiang-fanbai:before {
+  content: "\e616";
+}
+
+.icon-shoujihaoma-fanbai:before {
+  content: "\e615";
+}
+
+.icon-yonghunicheng-fanbai:before {
+  content: "\e614";
+}
+
+.icon-anquanshezhi-fanbai:before {
+  content: "\e613";
+}
+
+.icon-dengluzhanghao-fanbai:before {
+  content: "\e612";
+}
+
+.icon-suoshubumen-fanbai:before {
+  content: "\e611";
+}
+
+.icon-zhuangtai-fanbai:before {
+  content: "\e610";
+}
+
+.icon-a-zu33:before {
+  content: "\e60d";
+}
+
+.icon-a-lujing259:before {
+  content: "\e60c";
+}
+
+.icon-shouye5:before {
+  content: "\e60b";
+}
+
+.icon-shouye4:before {
+  content: "\e60a";
+}
+
+.icon-shouye3:before {
+  content: "\e609";
+}
+
+.icon-shouye2:before {
+  content: "\e608";
+}
+
+.icon-shouye1:before {
+  content: "\e607";
+}
+
+.icon-shouye:before {
+  content: "\e605";
+}
+

src/assets/iconfonts/iconfont.json

@@ -0,0 +1,114 @@
+{
+  "id": "3409379",
+  "name": "库房综合管理系统",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "29943155",
+      "name": "用户邮箱-反白",
+      "font_class": "yonghuyouxiang-fanbai",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "29943067",
+      "name": "手机号码-反白",
+      "font_class": "shoujihaoma-fanbai",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "29943063",
+      "name": "用户昵称-反白",
+      "font_class": "yonghunicheng-fanbai",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "29943055",
+      "name": "安全设置-反白",
+      "font_class": "anquanshezhi-fanbai",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "29942791",
+      "name": "登录账号-反白",
+      "font_class": "dengluzhanghao-fanbai",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "29942549",
+      "name": "所属部门-反白",
+      "font_class": "suoshubumen-fanbai",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "29932079",
+      "name": "状态-反白",
+      "font_class": "zhuangtai-fanbai",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "29795508",
+      "name": "定位",
+      "font_class": "a-zu33",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "29794660",
+      "name": "关闭",
+      "font_class": "a-lujing259",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "29794633",
+      "name": "系统管理",
+      "font_class": "shouye5",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "29794580",
+      "name": "档案配置",
+      "font_class": "shouye4",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "29794435",
+      "name": "库房管理",
+      "font_class": "shouye3",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "29794316",
+      "name": "门类管理",
+      "font_class": "shouye2",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "29794182",
+      "name": "档案管理",
+      "font_class": "shouye1",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "29793951",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    }
+  ]
+}

src/assets/styles/iconfont.css

@@ -1,23 +0,0 @@
-@font-face {
-  font-family: 'iconfont';  /* project id 3409379 */
-  src: url('?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_3409379_8kgavncra7e.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_3409379_8kgavncra7e.woff') format('woff'),
-  url('//at.alicdn.com/t/font_3409379_8kgavncra7e.ttf') format('truetype'),
-  url('#iconfont') format('svg');
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: .16rem;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.font-icon {
-  width: 2em;
-  height: 2em;
-  fill: currentColor;
-  overflow: hidden;
-}
-

src/assets/styles/index.scss

@@ -4,7 +4,7 @@
 @import 'element-ui';
 @import 'sidebar';
 @import 'btn';
-@import 'iconfont.css';
+@import '~@/assets/iconfonts/iconfont.css';
 @import 'yxk-admin';
 
 body {

src/assets/styles/yxk-admin.scss

@@ -465,6 +465,7 @@
 .el-dialog{
   position: relative;
   width: 620px;
+  margin-top: 16vh !important;
   padding: 2px;
   background: linear-gradient(135deg, transparent 10px, #339CFF 0) top left, 
               linear-gradient(-135deg, transparent 10px, #339CFF 0) top right, 
@@ -634,3 +635,7 @@
 .is-leaf::before  {
   color: transparent;
 }
+
+.el-input__prefix{
+  left: 8px;
+}

src/main.js

@@ -18,7 +18,7 @@ import permission from './components/Permission'
 import './assets/styles/element-variables.scss'
 // global css
 import './assets/styles/index.scss'
-import './assets/icons/iconfont.js'
+import './assets/iconfonts/iconfont.js'
 
 // 代码高亮
 import VueHighlightJS from 'vue-highlightjs'

src/views/system/dept/index.vue

@@ -6,9 +6,10 @@
     <div class="head-container">
       <div v-if="crud.props.searchToggle" class="head-search">
         <!-- 搜索 -->
-        <el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
         <date-range-picker v-model="query.createTime" class="date-item" />
-        <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery">
+        <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
+          <i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
           <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
         </el-select>
         <rrOperation />

src/views/system/job/module/header.vue

@@ -3,9 +3,10 @@
     v-if="crud.props.searchToggle"
     class="head-search"
   >
-    <el-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+    <el-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
     <date-range-picker v-model="query.createTime" class="date-item" />
-    <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery">
+    <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
+      <i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
       <el-option v-for="item in dict.dict.job_status" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
     <rrOperation />

src/views/system/log/search.vue

@@ -4,6 +4,7 @@
       v-model="query.blurry"
       clearable
       size="small"
+      prefix-icon="el-icon-search"
       placeholder="请输入你要搜索的内容"
       style="width: 200px;"
       class="filter-item"

src/views/system/menu/index.vue

@@ -6,7 +6,7 @@
     <div class="head-container">
       <div v-if="crud.props.searchToggle" class="head-search">
         <!-- 搜索 -->
-        <el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
         <date-range-picker v-model="query.createTime" class="date-item" />
         <rrOperation />
       </div>

src/views/system/role/index.vue

@@ -4,7 +4,7 @@
     <div class="head-container">
       <div v-if="crud.props.searchToggle" class="head-search">
         <!-- 搜索 -->
-        <el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
         <date-range-picker v-model="query.createTime" class="date-item" />
         <rrOperation />
       </div>

src/views/system/user/center.vue

@@ -1,106 +1,97 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
-        <el-card class="box-card">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <div slot="header" class="clearfix">
-            <span class="title">个人信息</span>
+    <el-row class="container-main" :gutter="20">
+      <el-col class="container-left" :xs="24" :sm="24" :md="8" :lg="6" :xl="5">
+        <span class="right-top-line" />
+        <span class="left-bottom-line" />
+        <div class="user-content">
+          <h4 class="info-title">个人信息</h4>
+          <div class="el-upload">
+            <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" @click="toggleShow">
+            <myUpload
+              v-model="show"
+              :headers="headers"
+              :url="updateAvatarApi"
+              @crop-upload-success="cropUploadSuccess"
+            />
           </div>
-          <div class="user-content">
-            <div style="text-align: center">
-              <div class="el-upload">
-                <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" @click="toggleShow">
-                <myUpload
-                  v-model="show"
-                  :headers="headers"
-                  :url="updateAvatarApi"
-                  @crop-upload-success="cropUploadSuccess"
-                />
+          <ul class="user-info">
+            <li><div style="height: 100%"><i class="iconfont icon-dengluzhanghao-fanbai" /> 登录账号<div class="user-right">{{ user.username }}</div></div></li>
+            <li><i class="iconfont icon-yonghunicheng-fanbai" /> 用户昵称 <div class="user-right">{{ user.nickName }}</div></li>
+            <li><i class="iconfont icon-suoshubumen-fanbai" /> 所属部门 <div class="user-right"> {{ user.dept.name }}</div></li>
+            <li><i class="iconfont icon-shoujihaoma-fanbai" /> 手机号码 <div class="user-right">{{ user.phone }}</div></li>
+            <li><i class="iconfont icon-yonghuyouxiang-fanbai" /> 用户邮箱 <div class="user-right">{{ user.email }}</div></li>
+            <li>
+              <i class="iconfont icon-anquanshezhi-fanbai" /> 安全设置
+              <div class="user-right">
+                <a @click="$refs.pass.dialog = true">修改密码</a>
+                <a @click="$refs.email.dialog = true">修改邮箱</a>
               </div>
-            </div>
-            <ul class="user-info">
-              <li><div style="height: 100%"><svg-icon icon-class="login" /> 登录账号<div class="user-right">{{ user.username }}</div></div></li>
-              <li><svg-icon icon-class="user1" /> 用户昵称 <div class="user-right">{{ user.nickName }}</div></li>
-              <li><svg-icon icon-class="dept" /> 所属部门 <div class="user-right"> {{ user.dept.name }}</div></li>
-              <li><svg-icon icon-class="phone" /> 手机号码 <div class="user-right">{{ user.phone }}</div></li>
-              <li><svg-icon icon-class="email" /> 用户邮箱 <div class="user-right">{{ user.email }}</div></li>
-              <li>
-                <svg-icon icon-class="anq" /> 安全设置
-                <div class="user-right">
-                  <a @click="$refs.pass.dialog = true">修改密码</a>
-                  <a @click="$refs.email.dialog = true">修改邮箱</a>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </el-card>
+            </li>
+          </ul>
+        </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
-        <!--    用户资料    -->
-        <el-card class="box-card user-info-right">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="用户资料" name="first">
-              <el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="small" label-width="65px">
-                <el-form-item label="昵称" prop="nickName">
-                  <el-input v-model="form.nickName" style="width: 35%" />
-                  <span style="color: #C0C0C0;margin-left: 10px;">用户昵称不作为登录使用</span>
-                </el-form-item>
-                <el-form-item label="手机号" prop="phone">
-                  <el-input v-model="form.phone" style="width: 35%;" />
-                  <span style="color: #C0C0C0;margin-left: 10px;">手机号码不能重复</span>
-                </el-form-item>
-                <el-form-item label="性别">
-                  <el-radio-group v-model="form.gender" style="width: 178px">
-                    <el-radio label="男">男</el-radio>
-                    <el-radio label="女">女</el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item label="">
-                  <el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存配置</el-button>
-                </el-form-item>
-              </el-form>
-            </el-tab-pane>
-            <!--    操作日志    -->
-            <el-tab-pane label="操作日志" name="second">
-              <el-table v-loading="loading" :data="data" style="width: 100%;">
-                <el-table-column prop="description" label="行为" />
-                <el-table-column prop="requestIp" label="IP" />
-                <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
-                <el-table-column prop="browser" label="浏览器" />
-                <el-table-column prop="time" label="请求耗时" align="center">
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
-                    <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
-                    <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  align="right"
-                >
-                  <template slot="header">
-                    <div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i class="el-icon-refresh" style="margin-left: 40px" /></div>
-                  </template>
-                  <template slot-scope="scope">
-                    <span>{{ scope.row.createTime }}</span>
-                  </template>
-                </el-table-column>
-              </el-table>
-              <!--分页组件-->
-              <el-pagination
-                :total="total"
-                :current-page="page + 1"
-                style="margin-top: 8px;"
-                layout="total, prev, pager, next, sizes"
-                @size-change="sizeChange"
-                @current-change="pageChange"
-              />
-            </el-tab-pane>
-          </el-tabs>
-        </el-card>
+      <el-col class="container-right user-info-right" :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
+        <span class="right-top-line" />
+        <span class="left-bottom-line" />
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="用户资料" name="first">
+            <el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="small" label-width="65px">
+              <el-form-item label="昵称" prop="nickName">
+                <el-input v-model="form.nickName" style="width: 35%" />
+                <span style="color:#999;margin-left: 22px;">用户昵称不作为登录使用</span>
+              </el-form-item>
+              <el-form-item label="手机号" prop="phone">
+                <el-input v-model="form.phone" style="width: 35%;" />
+                <span style="color: #999;margin-left: 22px;">手机号码不能重复</span>
+              </el-form-item>
+              <el-form-item label="性别">
+                <el-radio-group v-model="form.gender" style="width: 178px">
+                  <el-radio label="男">男</el-radio>
+                  <el-radio label="女">女</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="">
+                <el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存配置</el-button>
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+          <!--    操作日志    -->
+          <el-tab-pane label="操作日志" name="second">
+            <el-table v-loading="loading" :data="data" style="width: 100%;">
+              <el-table-column prop="description" label="行为" />
+              <el-table-column prop="requestIp" label="IP" />
+              <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
+              <el-table-column prop="browser" label="浏览器" />
+              <el-table-column prop="time" label="请求耗时" align="center">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
+                  <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
+                  <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                align="right"
+              >
+                <template slot="header">
+                  <div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i class="el-icon-refresh" style="margin-left: 40px" /></div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.createTime }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <!--分页组件-->
+            <el-pagination
+              :total="total"
+              :current-page="page + 1"
+              style="margin-top: 8px;"
+              layout="total, prev, pager, next, sizes"
+              @size-change="sizeChange"
+              @current-change="pageChange"
+            />
+          </el-tab-pane>
+        </el-tabs>
       </el-col>
     </el-row>
     <updateEmail ref="email" :email="user.email" />
@@ -202,49 +193,66 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .avatar {
+  .user-content{
+    color: #fff;
+    .iconfont{
+      margin-right: 12px;
+    }
+  }
+  .info-title{
+    margin: 0;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #359AFC;
+    text-align: center;
+    letter-spacing: 2px;
+    background-color: #02255F;
+  }
+  .el-upload{
+    display: block;
     width: 120px;
     height: 120px;
     border-radius: 50%;
+    margin: 40px auto 60px auto;
+    overflow: hidden;
+    .avatar {
+      width: 100%;
+      height: 100%;
+    }
   }
   .user-info {
-    padding-left: 0;
+    padding: 0 22px;
     list-style: none;
     li{
-      border-bottom: 1px solid #F0F3F4;
-      padding: 11px 0;
-      font-size: 13px;
+      border-bottom: 1px dashed #113D72;
+      font-size: 14px;
+      height: 41px;
+      line-height: 40px;
     }
     .user-right {
       float: right;
       a{
-        color: #317EF3;
+        margin-left: 20px;
+        color: #3A99FD;
       }
     }
   }
-  .user-content{
-    padding: 20px;
-    color: #fff;
-    .svg-icon{
-          position: relative;
-          left: -100px;
-          filter: drop-shadow(#fff 100px 0);
-        }
-  }
-  .title{
-    color: #fff;
-  }
+
   .user-info-right{
-    padding: 20px !important;
     .el-tabs__item{
       font-size: 16px;
       color: #fff;
     }
     .el-form{
+      padding: 0 20px;
       .el-form-item__label{
         color: #339CFF;
       }
       .el-input__inner{
+        height: 36px;
+        line-height: 36px;
         color: #fff;
         border: 1px solid #339CFF;
         background: transparent;
@@ -253,6 +261,8 @@ export default {
         color: #fff;
       }
       .el-button{
+        font-size: 16px;
+        padding: 7px 20px;
         color: #fff;
         background: #3A99FD;
       }

src/views/system/user/index.vue

@@ -38,6 +38,7 @@
               clearable
               size="small"
               placeholder="输入名称或者邮箱搜索"
+              prefix-icon="el-icon-search"
               style="width: 200px;"
               class="filter-item"
               @keyup.enter.native="crud.toQuery"
@@ -49,9 +50,10 @@
               size="small"
               placeholder="状态"
               class="filter-item"
-              style="width: 90px"
+              style="width: 100px"
               @change="crud.toQuery"
             >
+              <i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
               <el-option
                 v-for="item in enabledTypeOptions"
                 :key="item.key"