logo 问题

.env.staging

@@ -1,5 +1,3 @@
-NODE_ENV = production
-
 # just a flag
 ENV = 'staging'
 

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vue-cli-service serve",
     "build:prod": "vue-cli-service build",
-    "build:stage": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
     "lint": "vue-cli-service lint",

src/layout/components/Sidebar/Logo.vue

@@ -2,11 +2,11 @@
   <div class="sidebar-logo-container" :class="{ collapse: collapse }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <img v-if="logoCollapse" :src="logoCollapse" class="sidebar-logo" />
         <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" />
+        <img v-if="logoExpand" :src="logoExpand" class="sidebar-logo2" />
         <h1 class="sidebar-title">{{ title }}</h1>
       </router-link>
     </transition>
@@ -25,7 +25,8 @@ export default {
   data() {
     return {
       title: 'Vue Admin Template',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
+      logoCollapse: require('../../../assets/images/logo3.png'),
+      logoExpand: require('../../../assets/images/logo2.png')
     };
   },
 };
@@ -46,7 +47,6 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
   text-align: center;
   overflow: hidden;
 
@@ -61,6 +61,13 @@ export default {
       margin-right: 12px;
     }
 
+    & .sidebar-logo2 {
+      width: 118px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+
     & .sidebar-title {
       display: inline-block;
       margin: 0;

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="{ 'has-logo': showLogo }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <!-- logo 非生产环境展示 -->
+    <logo v-if="showLogo && isProd" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -29,6 +30,9 @@ export default {
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters(['sidebar']),
+    isProd() {
+      return process.env.NODE_ENV !== 'production'
+    },
     routes() {
       //修改的代码
       let menuRouter = this.$store.state.user.menu,

src/settings.js

@@ -11,5 +11,5 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether show the logo in sidebar
    */
-  sidebarLogo: false,
+  sidebarLogo: true,
 };

src/views/login/index.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="login-container">
+  <div class="login-container" :style="{backgroundImage: isProd ? 'url('+ pageBg +')' : null}">
     <div class="logo">
-      <!-- <img src="../../assets/images/logo.png" /> -->
+      <img v-if="isProd" class="img1" src="../../assets/images/logo.png" />
+      <img v-else src="../../assets/images/logo2.png" class="img2" />
     </div>
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" :class="{prod: isProd}" auto-complete="on" label-position="left">
       <div class="title-container">
-        <h3 class="title">病案数据治理与服务平台</h3>
+        <h3 class="title">
+          <span v-if="isProd" class="title">滨州医学院烟台附属医院<br></span>
+          病案数据治理与服务平台
+        </h3>
       </div>
 
       <el-form-item>
@@ -38,7 +42,7 @@
       <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click.native.prevent="handleLogin">登录</el-button>
 
     </el-form>
-    <div class="msg">北京菁苗健康科技有限公司提供技术支持</div>
+    <div class="msg">Copyright 北京菁苗健康科技有限公司</div>
   </div>
 </template>
 
@@ -64,6 +68,7 @@ export default {
       }
     };
     return {
+      pageBg: require('../../assets/images/loginbj.jpg'),
       loginForm: {
         username: '',
         password: '',
@@ -78,6 +83,11 @@ export default {
       preUrl: ''
     };
   },
+  computed: {
+    isProd() {
+      return process.env.NODE_ENV === 'production'
+    }
+  },
   watch: {
     $route: {
       handler: function (route) {
@@ -166,26 +176,18 @@ $cursor: #000;
 }
 .msg {
   position: fixed;
-  bottom: 38px;
+  bottom: 20px;
   left: 0;
   right: 0;
   text-align: center;
   color: #fff;
-  font-size: 24px;
-}
-.logo {
-  padding-left: 59px;
-  padding-top: 63px;
-  img {
-    width: 304px;
-  }
+  font-size: 16px;
 }
 /* reset element-ui css */
 .login-container {
   position: relative;
   .el-input {
     display: inline-block;
-    height: 47px;
     width: 85%;
 
     input {
@@ -195,7 +197,6 @@ $cursor: #000;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
       color: $light_gray;
-      height: 47px;
       caret-color: $cursor;
 
       &:-webkit-autofill {
@@ -219,28 +220,44 @@ $cursor: #000;
 $bg: #fff;
 $dark_gray: #889aa4;
 $light_gray: #000;
+::v-deep .el-form-item__content {
+  line-height: 1;
+}
 .logo {
-  img {
+  .img1 {
+    padding-top: 40px;
+    padding-left: 40px;
     width: 400px;
   }
+  .img2 {
+    width: 240px;
+    padding-top: 20px;
+    padding-left: 20px;
+  }
 }
 .login-container {
   min-height: 100%;
   width: 100%;
-  // background: url('../../assets/images/loginbj.jpg') no-repeat;
+  background-repeat: no-repeat;
   background-size: 100% 100%;
   overflow: hidden;
 
   .login-form {
     background: #fff;
     position: absolute;
-    left: 50%;
+    width: 400px;
     top: 50%;
-    transform: translate(-50%, -50%);
-    width: 520px;
+    right: 50%;
+    transform: translate(50%, -50%);
     max-width: 100%;
-    padding: 59px 35px 0;
-    border-radius: 28px;
+    padding: 35px 35px 0;
+    border-radius: 12px;
+    &.prod {
+      top: 200px;
+      right: 100px;
+      width: 360px;
+      transform: none;
+    }
   }
 
   .tips {
@@ -267,18 +284,18 @@ $light_gray: #000;
     position: relative;
 
     .title {
-      font-size: 26px;
+      font-size: 20px;
       color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
+      margin: 0px auto 20px auto;
       font-weight: bold;
+      text-align: center;
     }
   }
 
   .show-pwd {
     position: absolute;
     right: 10px;
-    top: 7px;
+    top: 14px;
     font-size: 16px;
     color: $dark_gray;
     cursor: pointer;