页面更新

ruoyi-ui/src/views/login.vue

@@ -34,16 +34,42 @@
       </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
+         <div class="medTitle">
+           快捷登录
+         </div>
+         <div class="med_icons">
+           <div class="med_icons_item" @click="btns">
+             <img src="@/assets/images/icon_kjdl_dd@2x.png" alt="" class="icon">
+             <p>钉钉</p>
+           </div>
+           <div class="med_icons_item" @click="btns">
+             <img src="@/assets/images/icon_kjdl_wx@2x.png" alt="" class="icon">
+             <p>微信</p>
+           </div>
+           <div class="med_icons_item" @click="btns">
+             <img src="@/assets/images/icon_kjdl_qywx@2x.png" alt="" class="icon">
+             <p>企业微信</p>
+           </div>
+           <div class="med_icons_item" @click="btns">
+             <img src="@/assets/images/icon_kjdl_qq@2x.png" alt="" class="icon">
+             <p>QQ</p>
+           </div>
+         </div>
+      </el-form-item>
+      <el-form-item style="width:100%;margin-bottom: 0;">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          style="width:100%;background-color: #2865E1;"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
+        <p class="div_p">
+          * 使用快捷登录，请先绑定第三方账号
+        </p>
       </el-form-item>
     </el-form>
     <!--  底部  -->
@@ -97,6 +123,9 @@ export default {
     this.getCookie();
   },
   methods: {
+    btns() {
+      this.msgInfo('暂未开放')
+    },
     getCode() {
       getCodeImg().then(res => {
         this.codeUrl = "data:image/gif;base64," + res.img;
@@ -142,23 +171,90 @@ export default {
 <style rel="stylesheet/scss" lang="scss">
 .login {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   height: 100%;
   background-image: url("../assets/images/login-background.jpg");
   background-size: cover;
 }
+.div_p{
+  text-align: center;
+  font-size: 11px;
+  color: #AAAAAA;
+  line-height: 1;
+}
+.medTitle{
+  margin-top: 10px;
+  text-align: center;
+  line-height: 50px;
+  position: relative;
+  color: #343434;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  &::before{
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 2px;
+    border-radius: 1px;
+    background-color: #F4AD6B;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+.med_icons{
+  display: flex;
+  justify-content: space-around;
+  .med_icons_item{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    .icon{
+      width: 34px;
+      height: 34px;
+      margin-bottom: 6px;
+    }
+    p{
+      text-align: center;
+      font-size: 11px;
+      color: #666666;
+      line-height: 24px;
+      margin: 0;
+    }
+  }
+}
 .title {
-  margin: 0px auto 30px auto;
+  margin: 0px auto 40px auto;
   text-align: center;
-  color: #707070;
+  color: #343434;
+  padding:  0 15px;
+  position: relative;
+  font-weight: normal;
+  font-size: 22px;
+  &::before{
+    position: absolute;
+    content: '';
+    width: 145px;
+    height: 15px;
+    background-image: url('../assets/images/pic_dlbt_hx@2x.png');
+    background-size: 100% 100%;
+    bottom: -15px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 
 .login-form {
   border-radius: 6px;
   background: #ffffff;
   width: 400px;
-  padding: 25px 25px 5px 25px;
+  box-shadow: 0 0 25px #E3E3EA;
+  margin-right: 101px;
+  background-image: urk;
+  padding: 35px 25px 25px 25px;
   .el-input {
     height: 38px;
     input {