菜单顶部logo样式调整

src/layout/components/Navbar.vue

@@ -6,17 +6,17 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-        <!-- <search id="header-search" class="right-menu-item" /> -->
+        <!-- <search id="header-search" class="right-menu-item" />
 
-<!--        <el-tooltip content="项目文档" effect="dark" placement="bottom">
+        <el-tooltip content="项目文档" effect="dark" placement="bottom">
           <Doc class="right-menu-item hover-effect" />
         </el-tooltip> -->
 
-        <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
-<!--        <el-tooltip content="布局设置" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="布局设置" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip> -->
 
@@ -24,11 +24,13 @@
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
+          <!-- <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar"> -->
+          <span>{{ time }}</span>
+          <span style="margin-left: 30px;">{{ user.user.nickName }}</span>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-<!--          <span style="display:block;" @click="show = true">
+          <!-- <span style="display:block;" @click="show = true">
             <el-dropdown-item>
               布局设置
             </el-dropdown-item>
@@ -50,28 +52,30 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
-import Doc from '@/components/Doc'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+// import Doc from '@/components/Doc'
+// import Screenfull from '@/components/Screenfull'
+// import SizeSelect from '@/components/SizeSelect'
+// import Search from '@/components/HeaderSearch'
 import Avatar from '@/assets/images/avatar.png'
 
 export default {
   components: {
     Breadcrumb,
-    Hamburger,
-    Screenfull,
-    SizeSelect,
-    Search,
-    Doc
+    Hamburger
+    // Screenfull,
+    // SizeSelect,
+    // Search,
+    // Doc
   },
   data() {
     return {
       Avatar: Avatar,
-      dialogVisible: false
+      dialogVisible: false,
+      timer: null,
+      time: ''
     }
   },
   computed: {
@@ -81,6 +85,9 @@ export default {
       'user',
       'baseApi'
     ]),
+    ...mapState([
+      'user'
+    ]),
     show: {
       get() {
         return this.$store.state.settings.showSettings
@@ -93,6 +100,13 @@ export default {
       }
     }
   },
+  created() {
+    this.getTime()
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer)
+    this.timer = null
+  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
@@ -110,6 +124,22 @@ export default {
       this.$store.dispatch('LogOut').then(() => {
         location.reload()
       })
+    },
+    getTime() {
+      this.timer = setTimeout(() => {
+        const date = new Date()
+        const year = date.getFullYear() // 年
+        const month = date.getMonth() + 1 // 月
+        const day = date.getDate() // 日
+        let hour = date.getHours() // 时
+        hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
+        let minute = date.getMinutes() // 分
+        minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
+        let second = date.getSeconds() // 秒
+        second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
+        this.time = `${year}年${month}月${day}日 ${hour}:${minute}:${second}`
+        requestAnimationFrame(this.getTime.bind(this))
+      }, 1000)
     }
   }
 }
@@ -178,6 +208,10 @@ export default {
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
 
         .user-avatar {
           cursor: pointer;
@@ -188,10 +222,11 @@ export default {
 
         .el-icon-caret-bottom {
           cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
+          // position: absolute;
+          // right: -20px;
+          // top: 25px;
+          font-size: 16px;
+          margin-left: 10px;
         }
       }
     }

src/layout/components/Sidebar/Logo.vue

@@ -3,11 +3,11 @@
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+        <!-- <h1 v-else class="sidebar-title">{{ title }} </h1> -->
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
+        <!-- <h1 class="sidebar-title">{{ title }} </h1> -->
       </router-link>
     </transition>
   </div>
@@ -25,6 +25,7 @@ export default {
   },
   data() {
     return {
+      // title: '东盟IOT-后台管理',
       title: '中控管理系统-后台管理',
       logo: Logo
     }
@@ -49,13 +50,14 @@ export default {
   line-height: 50px;
   text-align: center;
   overflow: hidden;
+  background-color: #fff;
 
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
+      // width: 32px;
       height: 32px;
       vertical-align: middle;
       margin-right: 6px;

src/views/login.vue

@@ -2,24 +2,26 @@
   <div class="login" :style="'background-image:url('+ Background +');'">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
       <h3 class="title">
-        中控 后台管理系统
+        <span class="CN">用户登录</span>
+        <span class="EN">LOGIN</span>
       </h3>
       <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
+        <el-input v-model="loginForm.password" show-password type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="code">
-        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
+        <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" style="width: 63%" @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
         </el-input>
         <div class="login-code">
-          <img :src="codeUrl" @click="getCode">
+          <img :src="codeUrl">
+          <i class="el-icon-refresh" @click="getCode" />
         </div>
       </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
@@ -169,14 +171,21 @@ export default {
   }
   .title {
     margin: 0 auto 30px auto;
-    text-align: center;
+    text-align: left;
     color: #707070;
+    .CN {
+      color: #474747;
+    }
+    .EN {
+      color: #d4d4d4;
+      margin-left: 10px;
+    }
   }
 
   .login-form {
     border-radius: 6px;
     background: #ffffff;
-    width: 285px;
+    width: 335px;
     padding: 25px 25px 5px 25px;
     .el-input {
       height: 38px;
@@ -195,13 +204,23 @@ export default {
   }
   .login-code {
     width: 33%;
-    display: inline-block;
     height: 38px;
     float: right;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     img{
-      cursor: pointer;
       vertical-align:middle;
-	  width: 100%;
+      width: 80%;
+      height: 38px;
+      padding: 5px;
+      border: 1px solid rgb(217,217,217);
+      border-radius: 3px;
+    }
+    i {
+      color: rgb(135,135,135);
+      margin-left: 5px;
+      cursor: pointer;
     }
   }
 </style>