diff --git a/src/api/common.js b/src/api/common.js
index 143784c..9aad1c7 100644
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -8,3 +8,22 @@ export function client_list(data) {
     data
   })
 }
+
+// /api/userinfo/update_password
+export function update_password(data) {
+  return request({
+    url: '/api/user/update_password',
+    method: 'post',
+    data
+  })
+}
+
+// /api/userinfo/getinfo
+export function getinfo(data) {
+  return request({
+    url: '/api/user/getinfo',
+    method: 'post',
+    data
+  })
+}
+
diff --git a/src/api/reagent/database.js b/src/api/reagent/database.js
new file mode 100644
index 0000000..83ed2f3
--- /dev/null
+++ b/src/api/reagent/database.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function msds_db_list(data) {
+  return request({
+    url: '/api/drug/msds_db_list',
+    method: 'post',
+    data
+  })
+}
+
+export function dangerous_db_list(data) {
+  return request({
+    url: '/api/drug/dangerous_db_list',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/user/user.js b/src/api/user/user.js
index b7ad691..944898d 100644
--- a/src/api/user/user.js
+++ b/src/api/user/user.js
@@ -16,7 +16,7 @@ export function get_user_list(data) {
   })
 }
 
-//  /api/user/add
+//  /api/userinfo/add
 export function add(data) {
   return request({
     url: '/api/user/add',
@@ -34,7 +34,7 @@ export function user_power(data) {
   })
 }
 
-// /api/user/update
+// /api/userinfo/update
 export function update(data) {
   return request({
     url: '/api/user/update',
@@ -43,7 +43,7 @@ export function update(data) {
   })
 }
 
-// /api/user/del
+// /api/userinfo/del
 export function del(data) {
   return request({
     url: '/api/user/del',
@@ -116,7 +116,7 @@ export function get_role_name_list(data) {
 }
 // export function getInfo(token) {
 //   return request({
-//     url: '/vue-admin-template/user/info',
+//     url: '/vue-admin-template/userinfo/info',
 //     method: 'get',
 //     params: { token }
 //   })
@@ -124,7 +124,7 @@ export function get_role_name_list(data) {
 //
 // export function logout() {
 //   return request({
-//     url: '/api/user/logout',
+//     url: '/api/userinfo/logout',
 //     method: 'post'
 //   })
 // }
diff --git a/src/assets/rms/主概览-白-60px.png b/src/assets/rms/主概览-白-60px.png
new file mode 100644
index 0000000..8774f51
Binary files /dev/null and b/src/assets/rms/主概览-白-60px.png differ
diff --git a/src/assets/rms/主界面-黑-80px.png b/src/assets/rms/主界面-黑-80px.png
new file mode 100644
index 0000000..1ab4258
Binary files /dev/null and b/src/assets/rms/主界面-黑-80px.png differ
diff --git a/src/assets/rms/常用-白-32px.png b/src/assets/rms/常用-白-32px.png
new file mode 100644
index 0000000..8830509
Binary files /dev/null and b/src/assets/rms/常用-白-32px.png differ
diff --git a/src/assets/rms/登录-白-100px.png b/src/assets/rms/登录-白-100px.png
new file mode 100644
index 0000000..d4eafcd
Binary files /dev/null and b/src/assets/rms/登录-白-100px.png differ
diff --git a/src/components/Detail/index.vue b/src/components/Detail/index.vue
index 4e1fd2b..3d6d9f0 100644
--- a/src/components/Detail/index.vue
+++ b/src/components/Detail/index.vue
@@ -42,17 +42,16 @@ export default {
   background-color: white;
   align-items: center;
   width: 15.75rem;
-  height: 6rem;
+  height: 8.75rem;
   display: flex;
   justify-content: space-between;
+  padding: 0 1.5rem 0 1.5rem;
   .detail-img{
-    margin: 1rem;
     img{
       height: 4rem;
     }
   }
   .detail-text{
-    margin: 1rem;
     .detail-count{
       font-size: 2.25rem;
       font-weight: bold;
diff --git a/src/components/UserForm/index.vue b/src/components/UserForm/index.vue
index 924ef01..243f952 100644
--- a/src/components/UserForm/index.vue
+++ b/src/components/UserForm/index.vue
@@ -52,7 +52,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col v-if="$route.path !=='/userinfo/index'" :span="12">
           <el-form-item label="是否启用" prop="is_enabled">
             <el-switch v-model="formData.is_enabled" />
           </el-form-item>
@@ -115,13 +115,6 @@ export default {
       }, {
         'label': '女',
         'value': 0
-      }],
-      role_idOptions: [{
-        'label': '选项一',
-        'value': 1
-      }, {
-        'label': '选项二',
-        'value': 2
       }]
     }
   },
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 33e7e29..7ec68d1 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main" :style="{'height': this.$store.getters.isMain ? 'calc(100vh - 130px)' : 'calc(100vh - 60px)'}">
+  <section class="app-main" :style="{'height': this.$store.getters.isMain ? 'calc(78vh)' : 'calc(92vh)'}">
     <transition name="fade-transform" mode="out-in">
       <router-view :key="key" />
     </transition>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 1e3bbb6..b23df37 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="navbar" :style="{...obj,'height': this.$store.getters.isMain ? '130px' : '60px'}">
+  <div class="navbar" :style="{...obj,'height': this.$store.getters.isMain ? '22vh' : '8vh'}">
     <div class="header-top">
       <div class="header-top-item"><img src="@/assets/login/logo-white.png" alt=""> </div>
-      <div v-if="!$store.getters.isMain" class="header-top-item mid">RMS后台管理系统</div>
+      <div v-if="!$store.getters.isMain"><img class="log-img" src="@/assets/rms/主概览-白-60px.png" alt=""></div>
       <div class="header-top-item">
         <el-badge :value="39">
           <img style="height: 23px" src="@/assets/0-常用/预警管理-白.png" alt="">
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div v-if="$store.getters.isMain" class="header-title">
-      RMS后台管理系统
+      <img src="@/assets/rms/主概览-白-60px.png" alt="">
     </div>
     <div v-if="$store.getters.isMain" class="header-desc">
       为您提供基于物联网的智慧实验室物资管理解决方案
@@ -85,9 +85,9 @@ export default {
   .header-title{
     width: 100%;
     text-align: center;
-    font-size: 2.5rem;
-    font-weight: 600;
-    color: #FFFFFF;
+    img{
+      height: 4.375rem;
+    }
   }
   .header-desc{
     width: 100%;
@@ -196,4 +196,7 @@ export default {
     }
   }
 }
+.log-img{
+  height: 2.5rem;
+}
 </style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 3a61c8a..8617649 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <!--    <logo v-if="showLogo" :collapse="isCollapse" />-->
-    <div class="user">
+    <div class="user" @click="handleUserClick">
       <div class="user-pic"><el-avatar :size="50" :src="circleUrl" /></div>
       <div class="user-name">程小红</div>
       <div class="user-role">管理员</div>
@@ -59,6 +59,11 @@ export default {
     isCollapse() {
       return !this.sidebar.opened
     }
+  },
+  methods: {
+    handleUserClick() {
+      this.$router.push('/userinfo/index')
+    }
   }
 }
 </script>
@@ -70,6 +75,7 @@ export default {
   flex-direction:column;
   justify-content: center;
   align-items: center;
+  margin-bottom: 2rem;
   div{
     margin-top: 1rem;
   }
diff --git a/src/permission.js b/src/permission.js
index fce9271..d26d6e0 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -16,7 +16,7 @@ router.beforeEach(async(to, from, next) => {
   // set page title
   document.title = getPageTitle(to.meta.title)
 
-  // determine whether the user has logged in
+  // determine whether the userinfo has logged in
   const hasToken = store.getters.token
 
   if (hasToken) {
@@ -25,48 +25,29 @@ router.beforeEach(async(to, from, next) => {
       next({ path: '/' })
       NProgress.done()
     } else {
+      const pa = to.path.split('/')[1]
+      const pathMap = {
+        'reagent': 'reagent',
+        'user': 'user',
+        'userinfo': store.getters.classification
+      }
+      const pat = pathMap[pa]
       if (to.name) {
+        // 设置header栏样式根据主预览页面不同
         if (to.path === '/reagent/mainoverview/index') {
           store.commit('settings/CHANGE_SETTING', { key: 'isMain', value: true })
         } else {
           store.commit('settings/CHANGE_SETTING', { key: 'isMain', value: false })
         }
-        if (to.path.indexOf('reagent') !== -1) {
-          store.commit('user/SET_CLASS', 'reagent')
-        }
-        if (to.path.indexOf('user') !== -1) {
-          store.commit('user/SET_CLASS', 'user')
-        }
+        store.commit('user/SET_CLASS', pat)
         next()
       } else {
-        if (to.path.indexOf('reagent') !== -1) {
-          store.commit('user/SET_CLASS', 'reagent')
-        }
-        if (to.path.indexOf('user') !== -1) {
-          store.commit('user/SET_CLASS', 'user')
-        }
+        store.commit('user/SET_CLASS', pat)
         store.commit('permission/SET_ROUTES', asyncRoutes)
         resetRouter()
         router.addRoutes(asyncRoutes)
         next({ ...to, replace: true })
       }
-      // const hasGetUserInfo = store.getters.name
-      // if (hasGetUserInfo) {
-      //   next()
-      // } else {
-      //   try {
-      //     // get user info
-      //     // await store.dispatch('user/getInfo')
-      //
-      //     next()
-      //   } catch (error) {
-      //     // remove token and go to login page to re-login
-      //     // await store.dispatch('user/resetToken')
-      //     Message.error(error || 'Has Error')
-      //     next(`/login?redirect=${to.path}`)
-      //     NProgress.done()
-      //   }
-      // }
     }
   } else {
     /* has no token*/
diff --git a/src/router/index.js b/src/router/index.js
index ca70731..ef5da3a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ Vue.use(Router)
 /* Layout */
 import reagentRouter from './modules/reagent'
 import userRouter from '@/router/modules/user'
+import Layout from '@/layout'
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -43,6 +44,18 @@ export const constantRoutes = [
     component: () => import('@/views/home/index'),
     hidden: true
   },
+  {
+    path: '/userinfo',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'index',
+        name: 'User',
+        component: () => import('@/views/userinfo/index')
+      }
+    ]
+  },
   {
     path: '/',
     redirect: '/home'
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index aeb5ee5..711cefa 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,7 +1,7 @@
 import { asyncRoutes, constantRoutes } from '@/router'
 
 /**
- * Use meta.role to determine if the current user has permission
+ * Use meta.role to determine if the current userinfo has permission
  * @param roles
  * @param route
  */
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 4fe515b..fd04726 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -11,7 +11,6 @@ const state = {
 
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {
-    console.log(key, value)
     // eslint-disable-next-line no-prototype-builtins
     if (state.hasOwnProperty(key)) {
       state[key] = value
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 7024378..cd7545f 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -32,7 +32,7 @@ const mutations = {
 }
 
 const actions = {
-  // // user login
+  // // userinfo login
   // login({ commit }, userInfo) {
   //   const { user_name, password } = userInfo
   //   return new Promise((resolve, reject) => {
@@ -47,7 +47,7 @@ const actions = {
   //   })
   // },
   //
-  // // get user info
+  // // get userinfo info
   // getInfo({ commit, state }) {
   //   return new Promise((resolve, reject) => {
   //     getInfo(state.token).then(response => {
@@ -68,7 +68,7 @@ const actions = {
   //   })
   // },
 
-  // user logout
+  // userinfo logout
   logout({ commit, state }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 32ae341..6f83be5 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -12,14 +12,15 @@
     transition: width 0.28s;
     width: $sideBarWidth !important;
     background-color: $menuBg;
-    min-height: calc(100vh - 10rem);
+    //min-height: calc(100vh - 10rem);
     position: fixed;
     font-size: 0px;
     top: 6rem;
     bottom: 0;
     left: 0;
     z-index: 1001;
-    overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -35,14 +36,9 @@
     }
 
     .el-scrollbar {
-      height: 100%;
+      height: 70vh;
     }
 
-    &.has-logo {
-      .el-scrollbar {
-        height: calc(100% - 50px);
-      }
-    }
 
     .is-horizontal {
       display: none;
@@ -73,7 +69,7 @@
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: $menuHover !important;
+        //background-color: $menuHover !important;
       }
     }
 
@@ -87,7 +83,7 @@
       background-color: $subMenuActiveText !important;
 
       &:hover {
-        background-color: $menuHover !important;
+        //background-color: $menuHover !important;
       }
     }
   }
diff --git a/src/utils/request.js b/src/utils/request.js
index a1c994c..e10e125 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -60,7 +60,7 @@ service.interceptors.response.use(
         //   cancelButtonText: 'Cancel',
         //   type: 'warning'
         // }).then(() => {
-        //   store.dispatch('user/resetToken').then(() => {
+        //   store.dispatch('userinfo/resetToken').then(() => {
         //     location.reload()
         //   })
         // })
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index dc751ac..cacdf02 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -6,7 +6,7 @@
       <div class="login-title">一站式智慧实验室管理服务</div>
     </div>
     <div class="login-container-mid">
-      <div class="login-container-mid-top">RMS后台管理系统</div>
+      <div class="login-container-mid-top"><img src="@/assets/rms/登录-白-100px.png" alt=""></div>
       <img class="login-container-mid-mid" src="@/assets/login/分隔条.png" alt="">
       <div class="login-container-mid-bottom">为您提供基于物联网的智慧实验室物资管理解决方案</div>
     </div>
@@ -77,7 +77,7 @@ export default {
   data() {
     // const validateUsername = (rule, value, callback) => {
     //   if (!validUsername(value)) {
-    //     callback(new Error('Please enter the correct user name'))
+    //     callback(new Error('Please enter the correct userinfo name'))
     //   } else {
     //     callback()
     //   }
@@ -139,7 +139,7 @@ export default {
               this.loading = false
             }
           )
-          // this.$store.dispatch('user/login', this.loginForm).then(() => {
+          // this.$store.dispatch('userinfo/login', this.loginForm).then(() => {
           //   this.$router.push({ path: this.redirect || '/' })
           //   this.loading = false
           // }).catch(() => {
@@ -226,10 +226,9 @@ $cursor: #fff;
       margin-bottom: 1.25rem;
     }
     .login-container-mid-top{
-      font-size: 6.25rem;
-      font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei,serif;
-      font-weight: 400;
-      color: #FFFFFF;
+      img{
+        width: 49.3125rem;
+      }
     }
     .login-container-mid-bottom{
       font-size: 28px;
diff --git a/src/views/reagent/database/index.vue b/src/views/reagent/database/index.vue
index 0e6c235..eb00f85 100644
--- a/src/views/reagent/database/index.vue
+++ b/src/views/reagent/database/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div v-if="show" class="main-container">
+    <div v-if="show" class="main-container-text">
       <div class="title">{{ $route.fullPath.indexOf('msds') !== -1 ? 'MSDS数据库' : '危化品数据库' }}</div>
       <div class="header">
         <el-input v-model="value" placeholder="请输入内容" />
-        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
       </div>
       <div class="kws-title">最近搜索</div>
       <el-divider />
@@ -13,102 +13,79 @@
       </div>
       <div class="kws-title">搜索结果</div>
       <el-divider />
-      <div class="search-item-container">
+      <div
+        v-loading="loading"
+        class="search-item-container"
+        element-loading-text="拼命加载中"
+      >
         <div v-for="item in searchItem" :key="item.code" class="search-item" @click="handleInfo(item)">
           <div class="search-img">
-            <img src="@/assets/3-主概览/今日入库.png">
+            <img v-if="$route.fullPath.indexOf('msds') !== -1" src="@/assets/11-化学品数据库/MSDS.png" alt="">
+            <img v-else src="@/assets/11-化学品数据库/危化品.png" alt="">
           </div>
           <div class="content">
             <div class="name">{{ item.name }}</div>
-            <div class="code">{{ item.code }}</div>
+            <div class="code">{{ item.cas_number }}</div>
           </div>
         </div>
       </div>
     </div>
-    <div v-else class="main-container">
+    <div v-else class="main-container-text">
       <div class="title">{{ $route.fullPath.indexOf('msds') !== -1 ? 'MSDS数据库' : '危化品数据库' }}</div>
       <div class="header">
         <el-button @click="handleBack">返回上级</el-button>
         <div class="title-sub">{{ currentItem.name }}</div>
       </div>
-      <el-descriptions :column="1" border size="small">
-        <el-descriptions-item label="英文名称">kooriookami</el-descriptions-item>
-        <el-descriptions-item label="CAS码">18100000000</el-descriptions-item>
-        <el-descriptions-item label="分子式">苏州市</el-descriptions-item>
-        <el-descriptions-item label="分子量">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
-        <el-descriptions-item label="物理数据">kooriookami</el-descriptions-item>
-        <el-descriptions-item label="毒理数据">18100000000</el-descriptions-item>
-        <el-descriptions-item label="用途">苏州市</el-descriptions-item>
-        <el-descriptions-item label="稳定性">kooriookami</el-descriptions-item>
-        <el-descriptions-item label="生态性">18100000000</el-descriptions-item>
-        <el-descriptions-item label="注意事项">苏州市</el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions :column="1" border size="small">
-        <el-descriptions-item label="试剂属性">kooriookami</el-descriptions-item>
-        <el-descriptions-item label="储存禁忌">18100000000</el-descriptions-item>
-        <el-descriptions-item label="储存方法">苏州市</el-descriptions-item>
-        <el-descriptions-item label="柜体储存要求">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
-        <el-descriptions-item label="领用归还规定">kooriookami</el-descriptions-item>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="英文名称">{{ currentItem.english_name }}</el-descriptions-item>
+        <el-descriptions-item label="CAS码">{{ currentItem.cas_number }}</el-descriptions-item>
+        <el-descriptions-item label="分子式">{{ currentItem.molecular_formula }}</el-descriptions-item>
+        <el-descriptions-item label="分子量">{{ currentItem.molecular_weight }}</el-descriptions-item>
+        <el-descriptions-item label="物理数据">{{ currentItem.physical_data }}</el-descriptions-item>
+        <el-descriptions-item label="毒理数据">{{ currentItem.toxicity_data }}</el-descriptions-item>
+        <el-descriptions-item label="用途">{{ currentItem.use }}</el-descriptions-item>
+        <el-descriptions-item label="稳定性">{{ currentItem.stability }}</el-descriptions-item>
+        <el-descriptions-item label="生态性">{{ currentItem.ecological }}</el-descriptions-item>
+        <el-descriptions-item label="注意事项">{{ currentItem.precautions }}</el-descriptions-item>
+        <el-descriptions-item :style="{'hight':'80px'}" />
+        <el-descriptions-item v-if="$route.path.indexOf('msds') === -1" :label-style="{'background': '#ffcc99'}" label="试剂属性">{{ currentItem.drug_attribute }}</el-descriptions-item>
+        <el-descriptions-item v-if="$route.path.indexOf('msds') === -1" :label-style="{'background': '#ffcc99'}">
+          <template slot="label">
+            存储禁忌 <i class="el-icon-warning-outline" />
+          </template>
+          {{ currentItem.storage_taboo }}</el-descriptions-item>
+        <el-descriptions-item :label-style="{'background': '#ffcc99','width':'120px'}" label="储存方法">{{ currentItem.storage_method }}</el-descriptions-item>
+        <el-descriptions-item :label-style="{'background': '#ffcc99'}" label="柜体储存要求">{{ currentItem.client_storage_require }}</el-descriptions-item>
+        <el-descriptions-item :label-style="{'background': '#ffcc99'}" label="领用归还规定">{{ currentItem.provision }}</el-descriptions-item>
       </el-descriptions>
     </div>
   </div>
 </template>
 
 <script>
+import { msds_db_list, dangerous_db_list } from '@/api/reagent/database'
+import stringify from '@/utils/stringify'
 export default {
   name: 'Database',
   data() {
     return {
-      searchItem: [
-        {
-          name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
-          code: '226883-66-5'
-        },
-        {
-          name: '4,6-二氯-2-丙基硫代嘧啶-5-胺',
-          code: '145783-15-9'
-        },
-        {
-          name: '3-辛酰基硫代丙基三乙氧基硅烷',
-          code: '220727-26-4'
-        },
-        {
-          name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
-          code: '226883-66-15'
-        },
-        {
-          name: '4,6-二氯-2-丙基硫代嘧啶-5-胺',
-          code: '145783-15-19'
-        },
-        {
-          name: '3-辛酰基硫代丙基三乙氧基硅烷',
-          code: '220727-26-14'
-        },
-        {
-          name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
-          code: '226883-66-25'
-        },
-        {
-          name: '4,6-二氯-2-丙基硫代嘧啶-5-胺',
-          code: '145783-15-29'
-        },
-        {
-          name: '3-辛酰基硫代丙基三乙氧基硅烷',
-          code: '220727-26-24'
-        }
-      ],
+      searchItem: [],
+      total: 0,
       searchKWs: [
         '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
         '甲醛', '乙醇'
-        // , '三氯甲烷',
-        // '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
-        // '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐'
       ],
       value: '',
       currentItem: {},
-      show: true
+      show: true,
+      page: 1,
+      page_size: 15,
+      loading: false
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     handleInfo(item) {
       this.currentItem = item
@@ -116,14 +93,36 @@ export default {
     },
     handleBack() {
       this.show = true
+    },
+    handleSearch() {
+      this.getList()
+    },
+    getList() {
+      const data = {
+        seach_word: this.value,
+        page: this.page,
+        page_size: this.page_size
+      }
+      this.loading = true
+      if (this.$route.fullPath.indexOf('msds') !== -1) {
+        msds_db_list(stringify(data)).then(res => {
+          this.searchItem = res.data.data_list
+          this.total = res.data.total_cout
+        }).finally(() => { this.loading = false })
+      } else {
+        dangerous_db_list(stringify(data)).then(res => {
+          this.searchItem = res.data.data_list
+          this.total = res.data.total_cout
+        }).finally(() => { this.loading = false })
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.main-container{
-  height:calc(100vh - 12rem) ;
+.main-container-text{
+  min-height:calc(100vh - 110px) ;
   padding: 1rem;
   margin: 1rem;
   background: white;
@@ -165,7 +164,7 @@ export default {
   }
   .search-item-container{
     overflow-y: scroll;
-    max-height: 24rem;
+    max-height: 30%;
     .search-item{
       display: flex;
       align-items: center;
@@ -190,5 +189,9 @@ export default {
     }
   }
 }
-
+</style>
+<style>
+.my-lable{
+  background: #ffcc99
+}
 </style>
diff --git a/src/views/reagent/inventory/index.vue b/src/views/reagent/inventory/index.vue
index 0dc35f9..4835f69 100644
--- a/src/views/reagent/inventory/index.vue
+++ b/src/views/reagent/inventory/index.vue
@@ -20,7 +20,7 @@
     <el-table
       :data="tableData"
       :header-cell-style="headerStyle"
-      height="530"
+      height="71vh"
       @selection-change="handleSelectionChange"
     >
       <el-table-column
@@ -68,6 +68,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -140,6 +141,7 @@
       </el-table>
       <div style="text-align: center">
         <el-pagination
+          background
           layout="prev, pager, next"
           :current-page.sync="history_page"
           :total="history_total"
diff --git a/src/views/reagent/mainoverview/index.vue b/src/views/reagent/mainoverview/index.vue
index 912de85..82c1b2b 100644
--- a/src/views/reagent/mainoverview/index.vue
+++ b/src/views/reagent/mainoverview/index.vue
@@ -79,7 +79,7 @@
           <el-table
             v-loading="rloading"
             :data="remainingData"
-            height="230"
+            height="38vh"
             style="width: calc(100% - 1.25rem)"
             element-loading-text="拼命加载中"
           >
@@ -96,6 +96,7 @@
           </el-table>
           <div style="text-align: center">
             <el-pagination
+              background
               layout="prev, pager, next"
               :total="rtotal"
               :disabled="rloading"
@@ -121,7 +122,6 @@
           <div class="content" style="overflow: auto">
             <el-table
               :data="tableData"
-              height="170"
             >
               <el-table-column
                 align="center"
@@ -262,6 +262,7 @@
       </el-table>
       <div style="text-align: center">
         <el-pagination
+          background
           layout="prev, pager, next"
           hide-on-single-page
           :disabled="loadingReagent"
@@ -660,6 +661,7 @@ export default {
     font-size: 36px;
     font-weight: bold;
     color: #303133;
+    margin-top: 3rem;
   }
   .desc{
     font-size: 14px;
@@ -673,10 +675,10 @@ export default {
 }
 #pie{
   width: 30rem;
-  height: 13rem;
+  height: 18rem;
 }
 #line{
   width: 65rem;
-  height: 16rem;
+  height: 15.25rem;
 }
 </style>
diff --git a/src/views/reagent/management/index.vue b/src/views/reagent/management/index.vue
index 27725df..eae5037 100644
--- a/src/views/reagent/management/index.vue
+++ b/src/views/reagent/management/index.vue
@@ -26,7 +26,7 @@
       :data="tableData"
       element-loading-text="拼命加载中"
       :header-cell-style="headerStyle"
-      height="530"
+      height="71vh"
       @selection-change="handleSelectionChange"
     >
       <el-table-column
@@ -123,6 +123,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -159,6 +160,7 @@
       </el-table>
       <div style="text-align: center">
         <el-pagination
+          background
           layout="prev, pager, next"
           :current-page.sync="history_page"
           :total="history_total"
@@ -201,6 +203,7 @@
       </el-table>
       <div style="text-align: center">
         <el-pagination
+          background
           layout="prev, pager, next"
           :current-page.sync="user_page"
           :total="user_total"
diff --git a/src/views/reagent/receivingandreturn/index.vue b/src/views/reagent/receivingandreturn/index.vue
index 2d943d2..8988594 100644
--- a/src/views/reagent/receivingandreturn/index.vue
+++ b/src/views/reagent/receivingandreturn/index.vue
@@ -17,7 +17,7 @@
           element-loading-text="拼命加载中"
           :data="tableData"
           style="width: 100%"
-          height="560"
+          height="78vh"
           :header-cell-style="headerStyle"
         >
           <el-table-column
@@ -44,6 +44,7 @@
       </div>
       <div class="page">
         <el-pagination
+          background
           layout="prev, pager, next"
           :total="total"
           hide-on-single-page
diff --git a/src/views/reagent/report/inventoryconsum/index.vue b/src/views/reagent/report/inventoryconsum/index.vue
index 01ad428..aa32687 100644
--- a/src/views/reagent/report/inventoryconsum/index.vue
+++ b/src/views/reagent/report/inventoryconsum/index.vue
@@ -3,8 +3,8 @@
     <div class="title">库存消耗</div>
     <div class="header">
       <div class="header-left">
-        <el-button  @click="$router.push('/reagent/report/index')">返回上一级</el-button>
-        <el-input v-model="selectReagentValue"  placeholder="请输入搜索试剂名称" />
+        <el-button @click="$router.push('/reagent/report/index')">返回上一级</el-button>
+        <el-input v-model="selectReagentValue" placeholder="请输入搜索试剂名称" />
         <el-date-picker
           v-model="start_time"
           type="datetime"
@@ -17,7 +17,7 @@
           placeholder="选择过期日期"
           value-format="yyyy-MM-dd HH:mm:ss"
         />
-        <el-button  type="primary" icon="el-icon-search" @click="searchReagent">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="searchReagent">搜索</el-button>
       </div>
       <div class="header-right">
         <el-button>导出报告</el-button>
@@ -29,7 +29,7 @@
       element-loading-text="拼命加载中"
       :header-cell-style="headerStyle"
       :data="reagentData"
-      height="460"
+      height="71vh"
     >
       <el-table-column align="center" property="name" label="试剂名称" />
       <el-table-column align="center" property="purity" label="纯度" />
@@ -43,6 +43,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -108,7 +109,7 @@ export default {
 .main-content-container{
   margin: 1rem;
   background: white;
-  min-height: calc(100vh - 12rem);
+  //min-height: calc(100vh - 12rem);
   padding: 1rem;
   .title {
     font-size: 1.25rem;
diff --git a/src/views/reagent/report/reagentconsum/index.vue b/src/views/reagent/report/reagentconsum/index.vue
index e2ee25e..830a098 100644
--- a/src/views/reagent/report/reagentconsum/index.vue
+++ b/src/views/reagent/report/reagentconsum/index.vue
@@ -29,7 +29,7 @@
       element-loading-text="拼命加载中"
       :header-cell-style="headerStyle"
       :data="reagentData"
-      height="460"
+      height="71vh"
     >
       <el-table-column align="center" property="name" label="试剂名称" />
       <el-table-column align="center" property="purity" label="纯度" />
@@ -46,6 +46,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
diff --git a/src/views/reagent/report/reagentinfo/index.vue b/src/views/reagent/report/reagentinfo/index.vue
index b516c2e..dbd11b7 100644
--- a/src/views/reagent/report/reagentinfo/index.vue
+++ b/src/views/reagent/report/reagentinfo/index.vue
@@ -25,7 +25,7 @@
       element-loading-text="拼命加载中"
       :header-cell-style="headerStyle"
       :data="reagentData"
-      height="460"
+      height="71vh"
     >
       <el-table-column align="center" property="name" label="试剂名称" />
       <el-table-column align="center" property="english_name" label="英文名称" />
@@ -44,6 +44,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -109,7 +110,7 @@ export default {
 .main-content-container{
   margin: 1rem;
   background: white;
-  min-height: calc(100vh - 12rem);
+  //min-height: calc(100vh - 12rem);
   padding: 1rem;
   .title {
     font-size: 1.25rem;
diff --git a/src/views/reagent/report/record/index.vue b/src/views/reagent/report/record/index.vue
index 497579e..f443953 100644
--- a/src/views/reagent/report/record/index.vue
+++ b/src/views/reagent/report/record/index.vue
@@ -48,7 +48,7 @@
       element-loading-text="拼命加载中"
       :header-cell-style="headerStyle"
       :data="reagentData"
-      height="490"
+      height="65vh"
     >
       <el-table-column align="center" property="name" label="试剂名称" />
       <el-table-column align="center" property="english_name" label="英文名称" />
@@ -71,6 +71,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -157,7 +158,7 @@ export default {
 .main-content-container{
   margin: 1rem;
   background: white;
-  min-height: calc(100vh - 110px);
+  //min-height: calc(100vh - 110px);
   padding: 1rem;
   .title {
     font-size: 1.25rem;
diff --git a/src/views/reagent/report/storeinfo/index.vue b/src/views/reagent/report/storeinfo/index.vue
index 00c10ff..ad2af3b 100644
--- a/src/views/reagent/report/storeinfo/index.vue
+++ b/src/views/reagent/report/storeinfo/index.vue
@@ -17,7 +17,7 @@
       element-loading-text="拼命加载中"
       :header-cell-style="headerStyle"
       :data="reagentData"
-      height="460"
+      height="71vh"
     >
       <el-table-column align="center" property="name" label="试剂名称" />
       <el-table-column align="center" property="cas_number" label="CAS码" />
@@ -28,6 +28,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -89,7 +90,7 @@ export default {
 .main-content-container{
   margin: 1rem;
   background: white;
-  min-height: calc(100vh - 12rem);
+  //min-height: calc(100vh - 12rem);
   padding: 1rem;
   .title {
     font-size: 1.25rem;
diff --git a/src/views/reagent/report/usefrequency/index.vue b/src/views/reagent/report/usefrequency/index.vue
index 96edbe1..2d20f2c 100644
--- a/src/views/reagent/report/usefrequency/index.vue
+++ b/src/views/reagent/report/usefrequency/index.vue
@@ -37,7 +37,7 @@
       element-loading-text="拼命加载中"
       :header-cell-style="headerStyle"
       :data="reagentData"
-      height="530"
+      height="71vh"
     >
       <el-table-column align="center" property="name" label="试剂名称" />
       <el-table-column align="center" property="purity" label="纯度" />
@@ -56,6 +56,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -125,7 +126,7 @@ export default {
 .main-content-container{
   margin: 1rem;
   background: white;
-  min-height: calc(100vh - 110px);
+  //min-height: calc(100vh - 110px);
   padding: 1rem;
   .title {
     font-size: 1.25rem;
diff --git a/src/views/reagent/report/userconsum/index.vue b/src/views/reagent/report/userconsum/index.vue
index d1c6455..6dd3573 100644
--- a/src/views/reagent/report/userconsum/index.vue
+++ b/src/views/reagent/report/userconsum/index.vue
@@ -30,7 +30,7 @@
       element-loading-text="拼命加载中"
       :header-cell-style="headerStyle"
       :data="reagentData"
-      height="460"
+      height="71vh"
     >
       <el-table-column align="center" property="name" label="用户头像" />
       <el-table-column align="center" property="create_user_name" label="用户名称" />
@@ -46,6 +46,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -113,7 +114,7 @@ export default {
 .main-content-container{
   margin: 1rem;
   background: white;
-  min-height: calc(100vh - 12rem);
+  //min-height: calc(100vh - 12rem);
   padding: 1rem;
   .title {
     font-size: 1.25rem;
diff --git a/src/views/reagent/report/warehousinginfo/index.vue b/src/views/reagent/report/warehousinginfo/index.vue
index dc05bb8..d4ab2c9 100644
--- a/src/views/reagent/report/warehousinginfo/index.vue
+++ b/src/views/reagent/report/warehousinginfo/index.vue
@@ -30,7 +30,7 @@
       element-loading-text="拼命加载中"
       :header-cell-style="headerStyle"
       :data="reagentData"
-      height="460"
+      height="71vh"
     >
       <el-table-column align="center" property="name" label="试剂名称" />
       <el-table-column align="center" property="manufacturer" label="生产厂家" />
@@ -44,6 +44,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -111,7 +112,7 @@ export default {
 .main-content-container{
   margin: 1rem;
   background: white;
-  min-height: calc(100vh - 12rem);
+  //min-height: calc(100vh - 12rem);
   padding: 1rem;
   .title {
     font-size: 1.25rem;
diff --git a/src/views/reagent/warehousing/index.vue b/src/views/reagent/warehousing/index.vue
index 7c0132b..8fbec04 100644
--- a/src/views/reagent/warehousing/index.vue
+++ b/src/views/reagent/warehousing/index.vue
@@ -78,6 +78,7 @@
     </div>
     <div class="page">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
@@ -116,6 +117,7 @@
       </el-table>
       <div style="text-align: right">
         <el-pagination
+          background
           layout="total, prev, pager, next"
           :current-page.sync="reagent_page"
           :total="reagent_total"
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 0f1986e..5a2728b 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -28,7 +28,7 @@
       element-loading-text="拼命加载中"
       :data="tableData"
       :header-cell-style="headerStyle"
-      height="530"
+      height="71vh"
       @selection-change="handleSelectionChange"
     >
       <el-table-column
@@ -105,6 +105,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
diff --git a/src/views/user/role/index.vue b/src/views/user/role/index.vue
index c15f64c..ab5ec6d 100644
--- a/src/views/user/role/index.vue
+++ b/src/views/user/role/index.vue
@@ -13,7 +13,7 @@
       element-loading-text="拼命加载中"
       :data="tableData"
       :header-cell-style="headerStyle"
-      height="530"
+      height="71vh"
       @selection-change="handleSelectionChange"
     >
       <el-table-column
@@ -53,6 +53,7 @@
     </el-table>
     <div style="text-align: center">
       <el-pagination
+        background
         layout="prev, pager, next"
         :current-page.sync="page"
         :total="total"
diff --git a/src/views/userinfo/index.vue b/src/views/userinfo/index.vue
new file mode 100644
index 0000000..64564e0
--- /dev/null
+++ b/src/views/userinfo/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <div class="title">个人资料</div>
+    <div class="content-container">
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="基本信息" name="first">
+          <div class="avatar"><el-avatar :size="50" :src="circleUrl" /></div>
+          <div class="form-custom">
+            <UserForm
+              v-loading="loading"
+              :roledata="roledata"
+              :propsformdata="pdata"
+              element-loading-text="拼命加载中"
+              @handlesubmit="handleForm"
+            />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="修改密码" name="second">
+          <div class="form-container-text">
+            <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="70px" class="demo-ruleForm">
+              <el-form-item label="旧密码" prop="old_password">
+                <el-input v-model="ruleForm.old_password" type="password" autocomplete="off" show-password />
+              </el-form-item>
+              <el-form-item label="新密码" prop="new_password">
+                <el-input v-model="ruleForm.new_password" type="password" autocomplete="off" show-password />
+              </el-form-item>
+              <el-form-item label="确认密码" prop="new_password1">
+                <el-input v-model="ruleForm.new_password1" type="password" autocomplete="off" show-password />
+              </el-form-item>
+            </el-form>
+            <div style="text-align: center">
+              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import { update_password, getinfo } from '@/api/common'
+import stringify from '@/utils/stringify'
+import UserForm from '@/components/UserForm'
+import { get_role_name_list, update } from '@/api/user/user'
+export default {
+  name: 'User',
+  components: { UserForm },
+  data() {
+    var validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入密码'))
+      } else {
+        if (this.ruleForm.new_password1 !== '') {
+          this.$refs.ruleForm.validateField('new_password1')
+        }
+        callback()
+      }
+    }
+    var validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== this.ruleForm.new_password) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      pdata: {},
+      circleUrl: 'https://t7.baidu.com/it/u=2006997523,200382512&fm=193&f=GIF',
+      activeName: 'first',
+      roledata: [],
+      loading: false,
+      ruleForm: {
+        new_password: '',
+        new_password1: '',
+        old_password: ''
+      },
+      rules: {
+        new_password: [
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        new_password1: [
+          { validator: validatePass2, trigger: 'blur' }
+        ],
+        old_password: [
+          { required: true, message: '请输入密码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    get_role_name_list().then(
+      res => {
+        this.roledata = res.data
+      }
+    )
+    this.getUserInfo()
+  },
+  methods: {
+    getUserInfo() {
+      this.loading = true
+      getinfo().then(res => {
+        this.pdata = res.data
+      }).finally(() => { this.loading = false })
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          update_password(stringify(this.ruleForm)).then(res => {
+            this.$store.commit('user/SET_TOKEN', res.data.token)
+            this.$message.success(res.msg)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    handleForm(form) {
+      const data = { ...this.pdata, ...form }
+      update(stringify(data)).then(res => {
+        this.$message.success(res.msg)
+        this.dialogVisible = false
+        this.getUserInfo()
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title {
+  text-align: center;
+  font-size: 28px;
+  font-weight: bold;
+  color: #303133;
+  line-height: 0px;
+  margin: 3rem 0 3rem 0;
+}
+.content-container{
+    margin: 0 20rem 0 20rem;
+    background: white;
+}
+.el-tabs{
+  padding: 2rem 3rem 2rem 3rem;
+}
+.form-container-text {
+  margin: 6rem 13rem 6rem 13rem;
+}
+.avatar {
+  text-align: center;
+  margin-top:2.6875rem;
+}
+.form-custom{
+  margin: 5rem 0 5rem 0;
+}
+</style>