Explorar el Código

登录页样式

zhangxiaomu hace 1 año
padre
commit
fd8ece6b79

BIN
src/assets/images/left-bgimg.png


BIN
src/assets/images/login-logo.png


+ 0 - 4
src/index.less

@@ -547,10 +547,6 @@
   z-index: 10
 }
 
-.form-class {
-  width: 100%;
-  padding-top: 12px !important;
-}
 
 .vxe-footer--column.col--ellipsis > .vxe-cell {
   display: block !important;

+ 8 - 8
src/view/login/login-form.vue

@@ -143,9 +143,7 @@ export default {
 </script>
 <style lang="less" scoped>
 
-/deep/.ivu-form-item {
-  margin-bottom: 20px !important;
-}
+
 
 /deep/ input::-webkit-input-placeholder {
   -webkit-text-fill-color: #95A8CB !important;
@@ -168,15 +166,17 @@ export default {
 }
 
 .login-class {
-  background: #1B365D;
+  background: #3B6EE5;
   border-radius: 8px;
-  height: 45px;
+  height: 40px;
+  border-radius: 44px;
 }
 
 /deep/ .ivu-btn > span {
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 40px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  font-family: "PingFang SC";
 }
 
 /deep/.ivu-form-item-error-tip{

+ 31 - 114
src/view/login/login.less

@@ -10,133 +10,50 @@
   width: 100%;
   height: 100%;
   background: #f0f2f5;
-  position: fixed;
   min-height: 100%;
   background-image: url('../../assets/images/login.svg');
   background-repeat: no-repeat;
-  //background-size: cover;
   background-size: 100% 100%;
   background-position: center;
   min-width: 1220px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
 
-  &-con {
-
-    &-header {
-      font-size: 16px;
-      font-weight: 300;
-      text-align: center;
-      padding: 30px 0;
-    }
-
-
-    .form-con {
-      //position: absolute;
-      //top: 23vh;
-      //left: 57vw;
-      //width: 32vw;
-      //height: 62vh;
-      //top: 20%;
-      //left: 38%;
-      //width: 30%;
-      //height: 55%;
-      //top:50%;
-      //left: 50%;
-      width: 550px;
-      height: 380px;
-      margin-top: -50px;
-      //margin-top: -250px;
-      //margin-left: -230px;
-      //min-width: 460px;
-      //min-height: 480px;
-      //background: linear-gradient(181.51deg, rgba(255, 255, 255, 0.5) -0.89%, rgba(255, 255, 255, 0.5) 41.59%);
-      //background: #fff;
-      //opacity: 0.86;
-      mix-blend-mode: normal;
-      backdrop-filter: blur(50px);
-      /* Note: backdrop-filter has minimal browser support */
-      border-radius: 5px;
-
-      .hj-logo {
-        //padding-top: 20px;
-        display: flex;
-        justify-content: center;
-      }
-
-      .tab-class {
-        width: 60%;
-        margin-left: 20%;
-        padding-top: 15px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .btn-class {
-          cursor: pointer;
-          font-weight: 500;
-          font-size: 20px;
-          line-height: 40px;
-          display: flex;
-          align-items: center;
-          color: #1B365D;
-        }
-
-        .btn-active-class {
-          cursor: pointer;
-          font-weight: 500;
-          text-decoration: underline;
-          text-underline-offset: 10px;
-          font-size: 20px;
-          line-height: 40px;
-          display: flex;
-          align-items: center;
-          color: #1B365D;
-        }
-      }
-
-      .content {
-        padding-top: 25px;
-        width: 66%;
-        margin-left: 17%;
-        justify-content: center;
-        align-items: center;
-      }
+.tab-class {
+  display: flex;
+  align-items: center;
+  gap:32px;
 
-      .scan {
-        //padding-top: 6%;
-        width: 70%;
-        height: 296px;
-        margin-left: 15%;
-        justify-content: center;
-        align-items: center;
-        display: flex;
+  .btn-class {
+    cursor: pointer;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    color: #6E7484;
+    font-family:"PingFang SC";
+    gap:10px
+  }
 
-        .scan-image {
-          width: 150px;
-          height: 150px;
-          border: 1px solid #1B365D;
-          border-radius: 8px;
-        }
-      }
-    }
+  .btn-active-class {
+    cursor: pointer;
+    font-weight: 500;
+    text-decoration: underline;
+    text-underline-offset: 10px;
+    font-size: 16px;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    color: #1E55D5;
+    font-family:"PingFang SC";
+    gap:10px
 
-    .login-tip {
-      font-size: 16px;
-      text-align: center;
-      color: #c3c3c3;
-    }
   }
 }
 
-//.title{
-//  color: #f35626;
-//  background: coral;
-//  background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
-//  -webkit-background-clip: text;
-//  -webkit-text-fill-color: transparent;
-//  -webkit-animation: hue 10s infinite linear;
-//  letter-spacing: 10px;
-//}
-
 @-webkit-keyframes hue {
   from {
     -webkit-filter: hue-rotate(0deg);

+ 84 - 59
src/view/login/login.vue

@@ -6,13 +6,6 @@
 <template>
   <div class="login">
 
-    <div class="login-con">
-      <div class="login_body">
-        <!--        <div class="login_title">-->
-        <!--          {{ $route.name === 'login_hegii' ? $t('login_hegii'): $t('login_dealer')}}-->
-        <!--        </div>-->
-        <div style="clear: both;"></div>
-      </div>
       <div class="lang-class">
         <!--语言-->
         <SelectPop v-model="lang" ref="lang" :multiple="false"
@@ -23,52 +16,59 @@
                    :options="langList"
                    labelKey="label"
                    valueKey="key"
-                   @on-select="changeLang">
+                   @on-select="changeLang" style="width: 90px">
         </SelectPop>
       </div>
+
+      <!--  中间部分  -->
       <div class="form-class">
-        <div class="form-con">
-          <div class="hj-logo">
-            <div style="display: flex;align-items: center">
-              <img :src="dk_logo" style="width: 60px;height: 60px;"/>
-              <img :src="dk_mini" style="width: 208px;height: 80px;margin-left: 10px"/>
-              <div style="font-size: 50px;font-weight: bold;color: #1B3769;">智云版</div>
-            </div>
+        <!--    左侧部分    -->
+        <div class="login-left">
+          <img :src="login_logo" style="margin:40px 0 0 40px"/>
+          <div style="font-family: PingFang SC;font-size: 44px;font-weight: 500;line-height: 61.6px;text-align: left;color: #FFFFFF;margin:180px 0 0 50px">泛家居建陶行业云服务</div>
+          <div style="margin:40px 0 0 50px;display: flex">
+            <Button shape="circle" class="left-button">免费体验</Button>
+            <Button shape="circle" class="left-button" style="margin-left: 20px" ghost>了解产品</Button>
           </div>
-          <!--          <div style="width: 90%;display: flex;justify-content: end">-->
-          <!--            {{ this.$config.loginSubTitle }}-->
-          <!--          </div>-->
-          <div class="tab-class">
-            <div :class="active == 0? 'btn-active-class':'btn-class' " id="user" @click="changeMode">密码登录</div>
-            <div :class="active == 1? 'btn-active-class':'btn-class' " id="scan" @click="changeMode">扫码登录</div>
-          </div>
-          <div v-show="active == 0" class="content">
-            <!--登录界面-->
-            <login-form v-if="step == 0" @on-success-valid="handleSubmit" :loading="loading"></login-form>
-            <!--选择公司-->
-            <div v-if="step == 1" style="overflow-y: auto;overflow-x:hidden;height: 300px;margin-bottom: 40px">
-              <DkButton v-for="(item,index) in joinedCpList" icon="iconfont iconfont icon-branch" :key="index"
-                        ref="save" type="text"
-                        style="margin-right: 10px;" @click="chooseCp(item)">
-                <div style="display: flex;margin-left: 20px">
-                  <div>{{ item.cpName }}</div>
+        </div>
+        <!--    右侧部分    -->
+        <div class="login-right">
+          <div style="width: 500px;">
+            <!--    欢迎登录      -->
+            <div style="height:100px;padding: 10px 26px 10px 26px;display:flex;flex-direction:column;gap: 10px;">
+              <div style="font-family: 'PingFang SC';font-weight: 500;font-size: 47px;line-height: 47px;color: #333333">欢迎登录</div>
+              <div style="font-family: 'PingFang SC';font-weight: 400;font-size: 16px;line-height: 24px;color: #6E7484">东科智云</div>
+            </div>
+            <!--    登录表单      -->
+            <div style="padding: 32px;display:flex;flex-direction:column;gap: 24px">
+              <div class="tab-class">
+                <div :class="active == 0? 'btn-active-class':'btn-class' " id="user" @click="changeMode">账号登录</div>
+                <div :class="active == 1? 'btn-active-class':'btn-class' " id="scan" @click="changeMode">扫码登录</div>
+              </div>
+              <div v-show="active == 0" class="content">
+                <!--登录界面-->
+                <login-form v-if="step == 0" @on-success-valid="handleSubmit" :loading="loading"></login-form>
+                <!--选择公司-->
+                <div v-if="step == 1" style="overflow-y: auto;overflow-x:hidden;height: 300px;margin-bottom: 40px">
+                  <DkButton v-for="(item,index) in joinedCpList" icon="iconfont iconfont icon-branch" :key="index"
+                            ref="save" type="text"
+                            style="margin-right: 10px;" @click="chooseCp(item)">
+                    <div style="display: flex;margin-left: 20px">
+                      <div>{{ item.cpName }}</div>
+                    </div>
+                  </DkButton>
                 </div>
-              </DkButton>
-              <!--              <div>-->
-              <!--                <Icon type="ios-arrow-round-forward" />-->
-              <!--              </div>-->
+              </div>
+              <div v-show="active == 1" id="scan-login" style="text-align: center; padding: 21px">
+                <img :src="qrcodeUrl" style="width: 250px;height: 250px" v-if="qrcodeUrl"/>
+              </div>
             </div>
           </div>
-          <div v-show="active == 1" id="scan-login" style="text-align: center; padding: 21px">
-            <img :src="qrcodeUrl" style="width: 250px;height: 250px" v-if="qrcodeUrl"/>
-          </div>
-
-          <div style="display: flex;justify-content: end;width: 98%">
-            ©2024 东科软件 All rights reserved
-          </div>
         </div>
       </div>
-    </div>
+      <div style="position:fixed;bottom: 20px;">
+        版权所有Copyright 2024 by 东科智云 | 备案号:京ICP备15085789号-1
+      </div>
   </div>
 </template>
 
@@ -77,6 +77,7 @@ import LoginForm from './login-form'
 import {mapActions} from 'vuex'
 import dk_logo from '@/assets/images/dongke_logo.png'
 import dk_mini from '@/assets/images/iboss_mini.png'
+import login_logo from '@/assets/images/login-logo.png'
 import {localRead, localSave} from "@/libs/base/util";
 import {getQrCode, checkLoginOpenId} from '@/api/system/user/login'
 import uuidv4 from 'uuid/v4'
@@ -95,6 +96,7 @@ export default {
       type: '',
       dk_logo,
       dk_mini,
+      login_logo,
       active: 0,// 默认在账户登录
       lang: self.$config.currentLang,
       langList: self.$config.languages,
@@ -187,7 +189,7 @@ export default {
      *   @date   : 2022/5/13 16:52
      *   @author : 洪旭东
      */
-    handleSubmit({userCode, userPwd, appCode}) {
+    async handleSubmit({userCode, userPwd, appCode}) {
       this.loading = true
       this.handleLogin({userCode, userPwd, appCode}).then(res => {
         this.$Message.destroy()
@@ -207,10 +209,9 @@ export default {
               console.log('dd',this.$config.expCp,this.joinedCpList)
               this.step = 1;
             } else {
-              // 登录后更新相关信息
-              this.afterLogin(res.data)
-
-              setTimeout(()=>{
+              (async () => {
+                // 登录后更新相关信息
+                await this.afterLogin(res.data)
                 // 登录后获取信息
                 this.getInfoAfterLogin(res.data).then(r => {
                   if (r.code == this.$config.SUCCESS_CODE) {
@@ -220,7 +221,7 @@ export default {
                     })
                   }
                 });
-              },50)
+              })();
             }
           }
         } else {
@@ -270,15 +271,39 @@ export default {
 </script>
 
 <style scoped>
-/*.form-con {*/
-/*  margin-top: 6vh;*/
-/*}*/
+.login-left{
+  width: 825px;
+  height:700px;
+  border-top-left-radius: 24px;
+  border-bottom-left-radius: 24px;
+  background: url('../../assets/images/left-bgimg.png') no-repeat,radial-gradient(45.91% 94.06% at 12.61% 5.94%, #597EFF 0%, #1750BD 82.72%);
 
-.lang-class {
+}
+
+.login-right{
+  background-color: #FFFFFF;
+  width: 555px;
+  height:700px;
   display: flex;
-  margin: 20px 20px;
-  width: 120px;
-  float: right;
+  justify-content: center;
+  align-items: center;
+  border-top-right-radius: 24px;
+  border-bottom-right-radius: 24px;
+}
+
+.left-button{
+  height:60px;
+  width: 150px;
+  font-family: PingFang HK;
+  font-size: 20px!important;
+  font-weight: 500;
+  line-height: 40px;
+}
+.lang-class {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 90px;
 }
 
 /*登录表格标题左右分布*/
@@ -332,8 +357,8 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: calc(100vh - 150px)
+  width: 1380px;
+  border-radius: 24px;
 }
 
 /deep/ .ivu-btn-text {