修改界面

.env.production

@@ -4,4 +4,4 @@ ENV = 'production'
 # base api
 VUE_APP_BASE_API = '/prod-api'
 
-VUE_APP_DOMAIN_PREFIX = 'http://14.22.116.132:81/ceres-admin-api'
+VUE_APP_DOMAIN_PREFIX = 'https://wechat.hnthee.com/ceres-admin-api'

src/layout/components/Sidebar/Logo.vue

@@ -11,7 +11,7 @@
         <h1 class="sidebar-title">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img src="../../../assets/images/logo.png" class="sidebar-logo">
+        <img src="../../../assets/images/white_logo.png" class="sidebar-logo">
         <h1 class="sidebar-title">{{ title }}</h1>
       </router-link>
     </transition>
@@ -29,7 +29,7 @@ export default {
   },
   data() {
     return {
-      title: 'cereShop平台端'
+      title: 'Thee平台端'
     }
   }
 }
@@ -50,7 +50,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #ffffff;
   text-align: center;
   overflow: hidden;
 
@@ -59,14 +59,14 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 159px;
+      height: 30px;
       vertical-align: middle;
       margin-right: 12px;
     }
 
     & .sidebar-title {
-      display: inline-block;
+      display: none;
       margin: 0;
       color: #fff;
       font-weight: 600;

src/settings.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  title: 'cereShop平台端',
+  title: 'Thee平台端',
 
   /**
    * @type {boolean} true | false

src/styles/variables.scss

@@ -1,14 +1,13 @@
 // sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#404F64;
+$menuActiveText:#183ECD;
+$subMenuActiveText:#183ECD; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#304156;
-$menuHover:#263445;
-
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+$menuBg:#ffffff;
+$menuHover:#DFECFF;
 
+$subMenuBg:#ffffff;
+$subMenuHover:#DFECFF;
 $sideBarWidth: 210px;
 
 // the :export directive is the magic sauce for webpack

src/views/login/index.vue

@@ -1,16 +1,24 @@
 <template>
   <div class="login">
+    <div class="login-left"></div>
+    <div class="login-right">
+      <img src="../../assets/images/login_yellow.png" class="login-right-yellow"/>
       <!-- 登录 -->
     <div v-if="getPassword" class="loginBox">
+      <el-row><img src="../../assets/images/login_logo.png" class=" loginBox-logo"/></el-row>
+      <el-row class="loginBox-point-box" style="z-index: -99;"><img src="../../assets/images/login_point.png" class=" loginBox-point"/></el-row>
+    
+
       <div v-if="getPassword" class="topText">平台登录</div>
       <div class="rightBox">
         <div class="tabTouch">
-          <div
+          <div  class="tabTouch"
             v-for="(item, index) in activeList"
             :key="index"
-            :class="[tabIndex != index ? 'touchOne' : 'touchTwo']"
-            @click="touchTab(index)"
-          >{{ item.name }}</div>
+          ><div :class="[tabIndex != index ? 'touchOne' : 'touchTwo']"
+            @click="touchTab(index)"><span class="span-label">{{ item.name }}</span> </div>
+            <div class="touch-space"></div>
+          </div>
         </div>
         <!-- 账户密码登录 -->
         <div v-if="!tabIndex">
@@ -29,8 +37,8 @@
                 maxlength="11"
                 auto-complete="off"
                 placeholder="请输入账户"
-                class="iptHeight"
-              />
+                class="iptHeight username"
+               ><i slot="prefix" class="el-input__icon icon-usericon"></i></el-input>
             </el-form-item>
             <el-form-item prop="password">
               <el-input
@@ -41,10 +49,10 @@
                 auto-complete="off"
                 placeholder="请输入密码"
                 @keyup.enter.native="handleLogin"
-              />
+              ><i slot="prefix" class="el-input__icon icon-password"></i></el-input>
             </el-form-item>
             <div class="boxBottom">
-              <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">自动登录</el-checkbox>
+              <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0; font-size: 14px;">自动登录</el-checkbox>
               <div class="forgetPsd" @click="runForgetPassord">忘记密码</div>
             </div>
 
@@ -53,7 +61,7 @@
                 :loading="loading"
                 size="medium"
                 type="primary"
-                style="width: 100%; border-radius: 20px"
+                class="btn-login"
                 @click.native.prevent="handleLogin"
               >
                 <span v-if="!loading">登 录</span>
@@ -80,7 +88,8 @@
                 auto-complete="off"
                 placeholder="请输入手机号码"
                 class="iptHeight"
-              />
+              >
+              <i slot="prefix" class="el-input__icon icon-phone"></i></el-input>
             </el-form-item>
             <el-form-item prop="code">
               <el-input
@@ -89,10 +98,10 @@
                 type="text"
                 class="iptHeight"
                 auto-complete="off"
-                style="width: 63%"
+                style="width: 70%"
                 placeholder="请输入验证码"
                 @keyup.enter.native="anhandleLogin"
-              />
+              ><i slot="prefix" class="el-input__icon icon-code"></i></el-input>
               <div class="login-code">
                 <el-button
                   class="codeBtn"
@@ -106,7 +115,7 @@
               </div>
             </el-form-item>
             <div class="boxBottom">
-              <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">自动登录</el-checkbox>
+              <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0; font-size: 14px;">自动登录</el-checkbox>
             </div>
 
             <el-form-item style="width: 100%">
@@ -114,10 +123,10 @@
                 :loading="loading"
                 size="medium"
                 type="primary"
-                style="width: 100%; border-radius: 20px"
+               class="btn-login"
                 @click.native.prevent="anhandleLogin"
               >
-                <span v-if="!loading">登录</span>
+                <span v-if="!loading">登 录</span>
                 <span v-else>登 录 中...</span>
               </el-button>
             </el-form-item>
@@ -129,11 +138,12 @@
     <!-- 找回密码 -->
     <div v-else class="loginBoxs">
       <div class="topback">找回密码</div>
-      <el-card class="box-card">
+      <div class="box-card">
         <div slot="header" class="clearfix">
-          <span style="margin-left: 25px">找回密码</span>
+          <span class="forgetbtnText">找回密码</span>
           <el-button
-            style="float: right; padding: 3px 0"
+            style="float: right; padding: 0px 0; color: #183ECD;"
+            class="forgetbtnText"
             type="text"
             @click="
               {
@@ -158,7 +168,7 @@
                   auto-complete="off"
                   placeholder="请输入手机号码"
                   class="iptHeight"
-                />
+                ><i slot="prefix" class="el-input__icon icon-phone"></i></el-input>
               </el-form-item>
               <el-form-item prop="code">
                 <el-input
@@ -167,9 +177,9 @@
                   type="text"
                   class="iptHeight"
                   auto-complete="off"
-                  style="width: 63%"
+                  style="width: 70%"
                   placeholder="请输入验证码"
-                />
+                  ><i slot="prefix" class="el-input__icon icon-code"></i></el-input>
                 <div class="login-code">
                   <el-button
                     class="codeBtn"
@@ -190,7 +200,7 @@
                   auto-complete="off"
                   placeholder="请输入密码"
                   class="iptHeight"
-                />
+                ><i slot="prefix" class="el-input__icon icon-password"></i></el-input>
               </el-form-item>
               <el-form-item prop="newPassword">
                 <el-input
@@ -200,14 +210,14 @@
                   auto-complete="off"
                   placeholder="请再次输入密码"
                   class="iptHeight"
-                />
+                ><i slot="prefix" class="el-input__icon icon-password"></i></el-input>
               </el-form-item>
               <el-form-item style="width: 100%">
                 <el-button
                   :loading="loading"
                   size="medium"
                   type="primary"
-                  style="width: 100%; border-radius: 20px"
+                  class="btn-login"
                   @click.native.prevent="resetPassword"
                 >
                   <span v-if="!loading">重 置 密 码</span>
@@ -217,11 +227,13 @@
             </el-form>
           </div>
         </div>
-      </el-card>
+      </div>
     </div>
     <!--  底部  -->
     <div class="login-footer">© 2019 cereshop</div>
     </div>
+    
+  </div>
 </template>
 
 <script>
@@ -259,11 +271,11 @@ export default {
       tabIndex: 0,
       activeList: [
         {
-          name: '账户密码登录',
+          name: '账户登录',
           id: 0
         },
         {
-          name: '手机号码登录',
+          name: '手机登录',
           id: 1
         }
       ],
@@ -452,32 +464,125 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 .topText {
-  font-size: 40px;
-  font-weight: bold;
-  color: #ffffff;
-  text-align: center;
-  position: absolute;
-  top: -70px;
-  left: 105px;
+  font-size: 23px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #183ECD;
+  line-height: 59px;
+  margin-top: 9px;
+}
+.icon-usericon{
+  background-image:url(../../assets/images/login_account.png) ;
+  background-size:cover;
+  width: 18px;
+    height: 18px;
+    background-size: cover;
+    margin-left: 4px;
+}
+.icon-password{
+  background-image:url(../../assets/images/login_password.png);
+  background-size:cover;
+  width: 18px;
+    height: 18px;
+    background-size: cover;
+    margin-left: 4px;
+}
+.icon-phone{
+  background-image:url(../../assets/images/login_phone.png) ;
+  background-size:cover;
+  width: 18px;
+    height: 18px;
+    background-size: cover;
+    margin-left: 4px;
+}
+.icon-code{
+  background-image:url(../../assets/images/login_code.png) ;
+  background-size:cover;
+  width: 18px;
+    height: 18px;
+    background-size: cover;
+    margin-left: 4px;
+}
+.el-checkbox__inner{
+  width: 14px;
+  height: 14px;
+}
+.el-checkbox__label{
+  font-size: 14px;
+  padding-left: 5px;
+}
+.el-form-item__content{
+  line-height: 36px;
 }
 .login {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+ 
+}
+
+ 
+.login-left {
+    flex:1;
+    height: 100%;
+    background-size: cover;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url('../../assets/images/login_bg.png');
+    background-position: center center;
+}
+
+  .login-right {
+    flex:1;
     height: 100%;
     background-size: cover;
     position: relative;
     display: flex;
+   
     justify-content: center;
     align-items: center;
-  background-image: url('../../assets/images/background.jpg');
+  }
+.login-right-yellow {
+  width: 119px;
+  height: 128px;
+  position: absolute;
+  top: 0%;
+  left: 0%;
 }
 .loginBox {
-  width: 360px !important;
-  height: 400px;
+  width: 460px !important;
+  height: 570px;
   background: #ffffff;
   position: absolute;
+  flex-direction: column;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.loginBox-logo{
+  width: 63px;
+  height: 63px;
+}
+.loginBox-point-box{
+  margin-top: -6px;
+}
+.loginBox-point{
+  width: 112px;
+  height: 28px;
+}
+.btn-login{
+  width: 100%; 
+  background-image: url('../../assets/images/pt-button.png');
+    background-position: center center;
+  border-radius: 6px;
+  font-size: 16px;
+}
 .topback {
   width: 1000px;
   height: 100px;
@@ -488,10 +593,18 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  display: none;
 }
 .loginBoxs {
-  width: 1000px;
-  height: 660px;
+  width: 460px;
+  height: 570px;
+}
+.forgetbtnText {
+  font-size: 16px;
+font-family: Source Han Sans CN;
+font-weight: 400;
+color: #666666;
+line-height: 43px;
 }
 .rightBox {
   margin: auto;
@@ -504,20 +617,54 @@ export default {
 }
 .tabTouch {
   display: flex;
-  justify-content: space-around;
-  align-content: center;
-  width: 360px;
-  margin-left: 8px;
+  flex-direction: row;
+  // justify-content: space-around;
+  // align-content: center;
+  // width: 360px;
+  // margin-left: 8px;
 }
 .touchOne {
+  width: 60px;
+  height: 43px;
+  display: flex;
+    justify-content: center;
+    align-items: center;
+
+  .span-label{
+    width: 60px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 14px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
     color: #666666;
-  padding: 20px;
+  }
 }
 .touchTwo {
-  border-bottom: 1px solid #1890ff;
-  padding: 20px;
-  color: #1890ff;
+  width: 60px;
+  height: 43px;
+  border-bottom: 1px solid #183ECD;
+  display: flex;
+    justify-content: center;
+    align-items: center;
+
+  .span-label{
+    width: 60px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 14px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #183ECD;
+  }
+}
+
+.touch-space{
+  width:24px;
+  height:1px;
 }
+
+
 .boxBottom {
   display: flex;
   justify-content: space-between;
@@ -525,6 +672,10 @@ export default {
     font-size: 14px;
     color: #1890ff;
     cursor: pointer;
+    font-family: Source Han Sans CN;
+font-weight: 400;
+color: #183ECD;
+line-height: 17px;
   }
 }
 .title {
@@ -536,7 +687,8 @@ export default {
 .login-form {
   border-radius: 6px;
   background: #ffffff;
-  padding: 25px 25px 5px 25px;
+  padding-top: 25px;
+  padding-bottom: 25px;
   .el-input {
     height: 38px;
     input {
@@ -550,17 +702,21 @@ export default {
   }
 }
 .iptHeight {
-  height: 54px !important;
+  border-radius: 3px;
+  height: 48px !important;
+  background: #F9F9F9;
   input {
-    height: 54px !important;
+    height: 48px !important;
+    background: #F9F9F9;
+    font-size: 14px;
   }
   span {
     display: flex;
     align-items: center;
   }
   .input-icon {
-    width: 20px;
-    height: 20px;
+    width: 24px;
+    height: 24px;
   }
 }
 .login-tip {
@@ -571,11 +727,11 @@ export default {
 .login-code {
   float: right;
   .codeBtn {
-    height: 54px;
+    height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100px;
+    width: 120px;
     background: #eeeeee;
     color: #666666;
     border: none;
@@ -588,7 +744,7 @@ export default {
   width: 100%;
   height: 100%;
   .clearfix {
-    width: 50%;
+    width: 100%;
     margin: 10% auto;
   }
 }
@@ -597,5 +753,6 @@ export default {
   bottom: 0;
   width: 100%;
   text-align: center;
+  display: none;
 }
 </style>