From 879f2c37093a3eff877e40fd1a1a33184ec17257 Mon Sep 17 00:00:00 2001
From: zhoulingpo <zhoulingpo>
Date: Fri, 5 May 2023 11:35:39 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=AD=97=E5=85=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/setting.js            |   1 +
 src/router/modules/system.js          |  15 +
 src/views/System/dataDictionary.vue   | 438 ++++++++++++++++++++++++++
 src/views/System/dictionaryDetail.vue | 390 +++++++++++++++++++++++
 4 files changed, 844 insertions(+)
 create mode 100644 src/views/System/dataDictionary.vue
 create mode 100644 src/views/System/dictionaryDetail.vue

diff --git a/src/api/modules/setting.js b/src/api/modules/setting.js
index 59e65a2..c5f5f5e 100644
--- a/src/api/modules/setting.js
+++ b/src/api/modules/setting.js
@@ -24,4 +24,5 @@ export default {
       params:data
     })
   },
+
 }
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index bbce1ea..e2d3c41 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -57,6 +57,21 @@ const routes = [
         meta: {
           crumb: ['暂无权限']
         }
+      },{
+        path: 'dictionary',
+        name: 'dictionary',
+        component: () => import('../../views/System/dataDictionary.vue'),
+        meta: {
+          crumb: ['字典管理']
+        }
+      },
+      {
+        path: 'dicdeatil',
+        name: 'dicdeatil',
+        component: () => import('../../views/System/dictionaryDetail.vue'),
+        meta: {
+          crumb: ['字典详情']
+        }
       }
     ]
   }
diff --git a/src/views/System/dataDictionary.vue b/src/views/System/dataDictionary.vue
new file mode 100644
index 0000000..170786b
--- /dev/null
+++ b/src/views/System/dataDictionary.vue
@@ -0,0 +1,438 @@
+<template>
+  <div class="content-height system-user">
+    <div class="title">
+      <span>字典管理</span>
+    </div>
+    <div class="search">
+      <el-row>
+        <el-col :span="20">
+          <div class="search-box-left">
+            <label>数据字典编码:</label>
+            <el-input v-model="q.account" placeholder="请输入数据字典编码"></el-input>
+            <label>数据字典名称:</label>
+            <el-input v-model="q.account" placeholder="请输入数据字典名称"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="4" align="right">
+          <div class="search-box-right">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="operate-box">
+            <el-button @click="add">新增</el-button>
+            <el-button @click="getSelectUser">批量删除</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="table">
+      <vxe-table ref="userTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
+                 v-table-min-height="'calc(100vh - 320px)'">
+        <vxe-column show-overflow type="checkbox" width="77"></vxe-column>
+        <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
+          <template #default="{ row, rowIndex }">
+            {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
+          </template>
+        </vxe-column>
+        <vxe-column show-overflow show-header-overflow field="ACCOUNT" title="数据字典编码"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="CELLPHONE_NUMBER" title="数据字典名称"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="CREATEDATE" title="创建时间"></vxe-column>
+        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="text" @click="openRowData('view', row)">查看</el-button>
+            <el-button type="text" @click="openRowData('modify', row)">编辑</el-button>
+            <el-button type="text" class="del-btn" @click="deleteRow(row)">删除</el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="q.pageNo"
+        :page-sizes="[5, 10, 20]"
+        :page-size="q.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"/>
+    </div>
+    <!-- 新增/编辑/查看 用户 -->
+    <el-dialog :title="dialogTitle " :visible.sync="dialogUser" width="750px" :close-on-click-modal="false"
+               :close-on-press-escape="false" modal-append-to-body append-to-body>
+      <div class="user-form">
+        <el-form :model="form" label-width="186px" :disabled="mode === 'view'">
+          <el-form-item label="数据字典编码:" required>
+            <el-input v-model="form.account" maxlength="20" show-word-limit placeholder="请输入数据字典编码"></el-input>
+          </el-form-item>
+          <!--<el-form-item label="密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
+          <!--<el-input v-model="form.password" maxlength="20" type="password" placeholder="请输入密码"></el-input>-->
+          <!--</el-form-item>-->
+          <!--<el-form-item label="确认密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
+          <!--<el-input v-model="repassword" maxlength="20" type="password" placeholder="请确认密码"></el-input>-->
+          <!--</el-form-item>-->
+          <el-form-item label="数据字典名称:">
+            <el-input v-model="form.cellPhoneNumber" placeholder="请输入数据字典名称"></el-input>
+          </el-form-item>
+
+          <el-form-item label="姓名:" required>
+            <el-input v-model="form.usname" maxlength="20" show-word-limit placeholder="请输入姓名"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="done">
+          <el-button v-if="mode !== 'view'" type="primary" @click="sysUserAddUser">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { Base64 } from 'js-base64'
+export default {
+  name: 'User',
+  data () {
+    return {
+      q: {
+        account: '', // 用户名
+        roleName: '', // 角色名称
+        pageNo: 1,
+        pageSize: 10
+      },
+      total: 0,
+      tableData: [],
+      mode: '',
+      dialogUser: false,
+      form: {
+        account: '', // 用户名
+        cellPhoneNumber: '', // 手机号
+        department: '', // 部门
+        email: '', // 邮箱
+        password: '', // 密码
+        usid: '',
+        usname: '', // 姓名
+        roleIdList: [''] // 角色
+      },
+      repassword: '',
+      roleList: []
+    }
+  },
+  methods: {
+    search () {
+      this.q.pageNo = 1
+      this.sysUserList()
+    },
+    // 获取所有字典
+    sysUserList () {
+      this.$api.user.sysUserList(this.q).then(({ data }) => {
+        this.tableData = data.records
+        this.total = data.total
+        this.q.pageNo = data.current
+        this.q.pageSize = data.size
+        if (!data.records.length && this.q.pageNo !== 1) {
+          this.q.pageNo = 1
+          this.sysUserList()
+        }
+      })
+    },
+    // 重置
+    reset () {
+      this.q = {
+        account: '', // 用户名
+        roleName: '', // 角色名称
+        pageNo: 1,
+        pageSize: 10
+      }
+      this.total = 0
+      this.tableData = []
+      this.sysUserList()
+    },
+    // 单页数据量
+    handleSizeChange (val) {
+      this.q.pageSize = val
+      this.q.pageNo = 1
+      this.sysUserList()
+    },
+    // 第几页
+    handleCurrentChange (val) {
+      this.q.pageNo = val
+      this.sysUserList()
+    },
+    // 新增
+    add () {
+      this.mode = 'add'
+      this.form = {
+        account: '', // 用户名
+        cellPhoneNumber: '', // 手机号
+        department: '', // 部门
+        email: '', // 邮箱
+        password: '', // 密码
+        usid: '',
+        usname: '', // 姓名
+        roleIdList: [''] // 角色
+      }
+      this.repassword = ''
+      this.dialogUser = true
+    },
+    // // 启用/禁用
+    // sysUserIsUse (val, row) {
+    //   this.$confirm(val === '0' ? '此操作将禁用所选用户, 是否继续?' : '此操作将启用所选用户, 是否继续?', '提示', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     type: 'warning'
+    //   }).then(() => {
+    //     this.$api.user.sysUserIsUse({ USID: row.USID, type: val }).then(_ => {
+    //       this.$message.success('操作成功')
+    //       this.sysUserList()
+    //     })
+    //   }).catch(() => {
+    //     row.ISUSE = val === '1' ? '0' : '1'
+    //   })
+    // },
+    // 删除
+    deleteRow (row) {
+      this.deleteUser(row.USID)
+    },
+    // 新增用户
+    sysUserAddUser () {
+      const data = JSON.parse(JSON.stringify(this.form))
+      data.account = this.$JSEncrypt(data.account)
+      data.password = this.$JSEncrypt(data.password)
+      const jsonData = JSON.stringify(data)
+      this.$api.user.sysUserAddUser(Base64.encodeURI(jsonData)).then(_ => {
+        this.$message.success('操作成功')
+        this.dialogUser = false
+        this.reset()
+      })
+    },
+    // 编辑查看用户
+    openRowData (mode, row) {
+      if(mode=='view'){
+        this.$router.push({
+          path:'/system/dicdeatil',
+          query:{
+            id:this.$route.query.id,
+            pId:row.id
+          }
+        })
+      }else{
+        this.mode = mode
+        this.form = {
+          account: row.ACCOUNT, // 用户名
+          cellPhoneNumber: row.CELLPHONE_NUMBER, // 手机号
+          department: row.DEPARTMENT, // 部门
+          email: row.EMAIL, // 邮箱
+          password: '', // 密码
+          usid: row.USID, // 用户ID
+          usname: row.USNAME, // 姓名
+          roleIdList: [row.ROLEID] // 角色
+        }
+        this.repassword = ''
+        this.dialogUser = true
+      }
+
+    },
+
+    // 多选用户
+    getSelectUser () {
+      const users = this.$refs.userTable.getCheckboxRecords()
+      if (!users.length) {
+        return this.$message.warning('请选择数据后在进行操作')
+      }
+      const ids = users.map(item => item.USID).join(',')
+      this.deleteUser(ids)
+    },
+    // 删除用户
+    deleteUser (ids) {
+      this.$confirm('此操作将删除所选, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$api.user.sysUserDelete({ ids }).then(_ => {
+          this.$message.success('操作成功')
+          this.sysUserList()
+        })
+      })
+    },
+
+  },
+  computed: {
+    dialogTitle () {
+      switch (this.mode) {
+        case 'add':
+          return '新增'
+        case 'modify':
+          return '编辑'
+        case 'view':
+          return '查看'
+      }
+    }
+  },
+  created () {
+    this.sysUserList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.system-user {
+  .title {
+    border-bottom: 1px solid #EBEEF5;
+    height: 42px;
+    line-height: 42px;
+    margin: 0 18px 0 22px;
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+
+  .search {
+    .search-box-left {
+      padding-top: 20px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      label {
+        font-size: 14px;
+        font-weight: 400;
+        color: #595959;
+        margin-right: 5px;
+        padding-left: 22px;
+      }
+
+      .year {
+        ::v-deep .el-input__inner {
+          padding: 0 15px !important;
+        }
+      }
+
+      ::v-deep .el-input {
+        width: 167px;
+        margin-right: 5px;
+      }
+
+      @media screen and (max-width: 1366px) {
+        ::v-deep .el-input {
+          width: 135px;
+          margin-right: 5px;
+        }
+      }
+
+      ::v-deep .el-button {
+        float: right;
+      }
+    }
+
+    .search-box-right {
+      padding-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 14px;
+    }
+
+    .operate-box {
+      padding-left: 13px;
+      padding-bottom: 11px;
+      padding-top: 18px;
+    }
+  }
+
+  .table {
+    margin: 0 14px 0 13px;
+
+    ::v-deep .el-pagination {
+      margin-top: 13px;
+      padding-left: 20px;
+      padding-bottom: 10px;
+    }
+  }
+
+}
+
+.user-form {
+  padding-top: 26px;
+
+  ::v-deep .el-form {
+    padding-right: 79px;
+
+    .el-form-item {
+      margin-bottom: 10px;
+
+      .el-form-item__label {
+        height: 36px;
+        line-height: 36px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #262626;
+      }
+
+      .el-input__inner {
+        min-height: 36px;
+      }
+
+      .el-input__inner,
+      .el-textarea__inner {
+        font-size: 14px;
+        font-weight: 400;
+        color: #434343;
+      }
+
+      .el-select {
+        width: 100%;
+      }
+
+      .el-date-editor {
+        width: 100%;
+
+        .el-input__inner {
+          padding-left: 15px;
+        }
+
+        .el-input__suffix {
+          font-size: 16px;
+          margin-top: 2px;
+        }
+      }
+
+      .icon-auth {
+        .el-icon-arrow-up {
+          margin-top: 2px;
+          transform: rotateZ(0) !important;
+        }
+
+        .el-icon-arrow-up:before {
+          content: '';
+          background: url("../../assets/imgs/icon-user.png") no-repeat center center;
+          display: inline-block;
+          width: 12px;
+          height: 14px;
+          background-size: 100% 100%;
+        }
+      }
+
+      .el-button {
+        width: 80px;
+        height: 36px;
+        padding: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  .done {
+    text-align: center;
+    padding: 40px 0;
+
+    ::v-deep .el-button {
+      width: 80px;
+      height: 36px;
+      padding: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/System/dictionaryDetail.vue b/src/views/System/dictionaryDetail.vue
new file mode 100644
index 0000000..1072adf
--- /dev/null
+++ b/src/views/System/dictionaryDetail.vue
@@ -0,0 +1,390 @@
+<!-- 配置管理 - 标准法规属性管理详情页 -->
+<template>
+  <div class="content-height">
+    <div class="laws-details-header">
+       <span  class="back" title="返回" @click="back"><i class="el-icon-back" ></i>
+          </span>
+      <div class="title">
+        {{dictionaryName}}
+        ddfdddd</div>
+    </div>
+    <div class="search">
+      <el-row>
+        <el-col :span="20">
+          <div class="search-box-left">
+            <label>选项:</label>
+            <el-input v-model="q.account" placeholder="请输入选项"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="4" align="right">
+          <div class="search-box-right">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="operate-box">
+            <el-button @click="add">新增</el-button>
+            <el-button   @click="getSelectUser">删除</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="table">
+      <vxe-table ref="userTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
+                 v-table-min-height="'calc(100vh - 320px)'">
+        <vxe-column show-overflow type="checkbox" width="77"></vxe-column>
+        <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
+          <template #default="{ row, rowIndex }">
+            {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
+          </template>
+        </vxe-column>
+        <vxe-column show-overflow show-header-overflow field="ACCOUNT" title="选项"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="CELLPHONE_NUMBER" title="值"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="CREATEDATE" title="排序"></vxe-column>
+        <!--                <vxe-column show-overflow show-header-overflow title="启用/禁用" width="100" fixed="right">-->
+        <!--                    <template #default="{ row }">-->
+        <!--                        <el-switch v-model="row.ISUSE" active-value="1" inactive-value="0"-->
+        <!--                                   @change="(val) => sysUserIsUse(val, row)"></el-switch>-->
+        <!--                    </template>-->
+        <!--                </vxe-column>-->
+        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="text" @click="openRowData('view', row)">查看</el-button>
+            <el-button type="text" @click="openRowData('modify', row)">编辑</el-button>
+            <el-button type="text" class="del-btn" @click="deleteRow(row)">删除</el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="q.pageNo"
+        :page-sizes="[5, 10, 20]"
+        :page-size="q.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"/>
+
+    </div>
+    <el-dialog :title="dialogTitle " :visible.sync="dialogUser" width="750px" :close-on-click-modal="false"
+               :close-on-press-escape="false" modal-append-to-body append-to-body>
+      <div class="user-form">
+        <el-form :model="form" label-width="186px" :disabled="mode === 'view'">
+          <el-form-item label="选项:" props="account">
+            <el-input v-model="form.account" maxlength="20" show-word-limit placeholder="请输入选项"></el-input>
+          </el-form-item>
+          <!--<el-form-item label="密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
+          <!--<el-input v-model="form.password" maxlength="20" type="password" placeholder="请输入密码"></el-input>-->
+          <!--</el-form-item>-->
+          <!--<el-form-item label="确认密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
+          <!--<el-input v-model="repassword" maxlength="20" type="password" placeholder="请确认密码"></el-input>-->
+          <!--</el-form-item>-->
+          <el-form-item label="排序:">
+            <el-input v-model="form.cellPhoneNumber" placeholder="请输入排序"></el-input>
+          </el-form-item>
+          <el-form-item label="备注:">
+            <el-input v-model="form.department" maxlength="50" show-word-limit placeholder="请输入备注"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="done">
+          <el-button v-if="mode !== 'view'" type="primary" @click="sysUserAddUser">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'standLawsAttrDetails',
+  data(){
+    return{
+      form:{
+
+      },
+      total:0,
+      q:{
+        pageNo:1,
+        pageSize:10,
+        account:''
+      },
+      tableData:[{inde:1}],
+      mode:'',
+      dialogUser:false
+
+    }
+  },
+  methods:{
+    // 编辑查看用户
+    openRowData (mode, row) {
+      this.mode = mode
+      this.form = {
+        account: row.ACCOUNT, // 用户名
+        cellPhoneNumber: row.CELLPHONE_NUMBER, // 手机号
+        department: row.DEPARTMENT, // 部门
+        email: row.EMAIL, // 邮箱
+        password: '', // 密码
+        usid: row.USID, // 用户ID
+        usname: row.USNAME, // 姓名
+        roleIdList: [row.ROLEID] // 角色
+      }
+      this.dialogUser = true
+    },
+    sysUserAddUser(){
+
+    },
+    // 新增
+    add () {
+      this.mode = 'add'
+      this.form = {
+        account: '', // 用户名
+        cellPhoneNumber: '', // 手机号
+        department: '', // 部门
+        email: '', // 邮箱
+        password: '', // 密码
+        usid: '',
+        usname: '', // 姓名
+        roleIdList: [''] // 角色
+      }
+      this.dialogUser = true
+    },
+    // 批量删除
+    getSelectUser () {
+      const users = this.$refs.userTable.getCheckboxRecords()
+      if (!users.length) {
+        return this.$message.warning('请选择数据后在进行操作')
+      }
+      const ids = users.map(item => item.id).join(',')
+      this.deleteUser(ids)
+    },
+    // 删除
+    deleteRow (row) {
+      this.deleteUser(row.id)
+    },
+    // 删除用户
+    deleteUser (ids) {
+      this.$confirm('此操作将删除所选, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$api.user.sysUserDelete({ ids }).then(_ => {
+          this.$message.success('操作成功')
+          this.sysUserList()
+        })
+      })
+    },
+    handleSizeChange(size){
+      this.q.pageSize=size
+      this.loadData()
+    },
+    handleCurrentChange(page){
+      this.q.pageNo=page
+      this.loadData()
+    },
+    loadData(){
+
+    },
+    search() {
+      this.q.pageNo = 1
+      this.loadData()
+    },
+    reset() {
+      this.q = {
+        pageNo:1,
+        pageSize:10,
+        account:''
+      }
+      this.loadData()
+    },
+    back(){
+      this.$router.back(-1)
+    }
+  },
+  computed: {
+    dialogTitle () {
+      switch (this.mode) {
+        case 'add':
+          return '新增'
+        case 'modify':
+          return '编辑'
+        case 'view':
+          return '查看'
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.laws-details-header{
+  display: flex;
+  padding: 10px 10px 0;
+  .title{
+    height: 30px;
+    line-height: 30px;
+    margin-left: 50px;
+  }
+}
+.back{
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  background: #1890FF;
+  color: #fff;
+  border-radius: 50%;
+  //text-align: center;
+  line-height: 30px;
+  font-size: 25px;
+  font-weight: 700;
+  cursor: pointer;
+  text-align: center;
+  vertical-align: sub;
+
+}
+.search {
+  .search-box-left {
+    padding-top: 20px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #595959;
+      margin-right: 5px;
+      padding-left: 22px;
+    }
+
+    .year {
+      ::v-deep .el-input__inner {
+        padding: 0 15px !important;
+      }
+    }
+
+    ::v-deep .el-input {
+      width: 167px;
+      margin-right: 5px;
+    }
+
+    @media screen and (max-width: 1366px) {
+      ::v-deep .el-input {
+        width: 135px;
+        margin-right: 5px;
+      }
+    }
+
+    ::v-deep .el-button {
+      float: right;
+    }
+  }
+
+  .search-box-right {
+    padding-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 14px;
+  }
+
+  .operate-box {
+    padding-left: 13px;
+    padding-bottom: 11px;
+    padding-top: 18px;
+  }
+}
+
+.table {
+  margin: 0 14px 0 13px;
+
+  ::v-deep .el-pagination {
+    margin-top: 13px;
+    padding-left: 20px;
+    padding-bottom: 10px;
+  }
+}
+.user-form {
+  padding-top: 26px;
+
+  ::v-deep .el-form {
+    padding-right: 79px;
+
+    .el-form-item {
+      margin-bottom: 10px;
+
+      .el-form-item__label {
+        height: 36px;
+        line-height: 36px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #262626;
+      }
+
+      .el-input__inner {
+        min-height: 36px;
+      }
+
+      .el-input__inner,
+      .el-textarea__inner {
+        font-size: 14px;
+        font-weight: 400;
+        color: #434343;
+      }
+
+      .el-select {
+        width: 100%;
+      }
+
+      .el-date-editor {
+        width: 100%;
+
+        .el-input__inner {
+          padding-left: 15px;
+        }
+
+        .el-input__suffix {
+          font-size: 16px;
+          margin-top: 2px;
+        }
+      }
+
+      .icon-auth {
+        .el-icon-arrow-up {
+          margin-top: 2px;
+          transform: rotateZ(0) !important;
+        }
+
+        .el-icon-arrow-up:before {
+          content: '';
+          background: url("../../assets/imgs/icon-user.png") no-repeat center center;
+          display: inline-block;
+          width: 12px;
+          height: 14px;
+          background-size: 100% 100%;
+        }
+      }
+
+      .el-button {
+        width: 80px;
+        height: 36px;
+        padding: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  .done {
+    text-align: center;
+    padding: 40px 0;
+
+    ::v-deep .el-button {
+      width: 80px;
+      height: 36px;
+      padding: 0;
+    }
+  }
+}
+
+</style>