修改对应登录界面

src/page/login/customize/indexCustomize.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="login-container"
        ref="login"
-       @keyup.enter.native="handleLogin" :style="loginContainer">
+       @keyup.enter.native="handleLogin" :style="customize.loginContainer">
     <top-color v-show="false"></top-color>
-    <div class="login-weaper-customize animated bounceInDown" :style="loginWeaperCustomize">
-      <el-card class="box-card">
+    <div class="login-weaper-customize animated bounceInDown" :style="customize.loginWeaperCustomize">
+      <el-card class="box-card" :style="customize.loginCardCustomize">
         <userlogin-customize></userlogin-customize>
       </el-card>
     </div>
@@ -40,12 +40,20 @@
           code: "",
           state: "",
         },
-        loginContainer:{
-          backgroundImage:""
-        },
-        loginWeaperCustomize:{
-          height:"850px",
-        },
+        customize:{
+          loginContainer:{
+            backgroundImage:"",
+          },
+          loginWeaperCustomize:{
+            backgroundImage: "",
+            width: "1501px",
+            height:"829px",
+          },
+          loginCardCustomize:{
+            width:"700px",
+            height: "790px"
+          }
+        }
       };
     },
     watch: {
@@ -54,20 +62,7 @@
       }
     },
     created() {
-      let tanentType = this.$route.query.tanentType;
-      if(tanentType!==undefined){
-        tanentType = tanentType.toLocaleLowerCase();
-      }
-      if(tanentType==="mall"){
-        this.loginWeaperCustomize.height = "700px";
-        this.loginContainer.backgroundImage = "url(/img/customize/bg_mall.png)"
-      }else if(tanentType==="agent"){
-        this.loginWeaperCustomize.height = "600px";
-        this.loginContainer.backgroundImage = "url(/img/customize/bg-agent.png)"
-      }else{
-        this.loginWeaperCustomize.height = "700px";
-        this.loginContainer.backgroundImage = "url(/img/customize/bg-admin.png)"
-      }
+      this.initLoginSytle();
       this.handleLogin();
       this.getTime();
     },
@@ -76,6 +71,25 @@
     },
     props: [],
     methods: {
+      initLoginSytle(){
+        let tanentType = getTopUrl();
+        if(tanentType!==undefined){
+          tanentType = tanentType.toLocaleLowerCase();
+        }
+        if(tanentType==="https://mall.ldt.com"){ //商场
+          this.customize.loginContainer.backgroundImage = "url(/img/customize/bg-mall.png)";
+          this.customize.loginWeaperCustomize.backgroundImage = "url(/img/customize/bg-mall-container.png)";
+        }else if(tanentType==="https://agent.ldt.com"){ //代理
+          this.customize.loginContainer.background = "url('/img/customize/logo.png') 80% 10%/200px 70px no-repeat,url(/img/customize/bg-agent.png) center/cover no-repeat";
+          this.customize.loginWeaperCustomize.height = "650px";
+          this.customize.loginWeaperCustomize.backgroundImage = "none";
+          this.customize.loginCardCustomize.width = "600px";
+          this.customize.loginCardCustomize.height = "650px";
+        }else{ //平台
+          this.customize.loginContainer.backgroundImage = "url(/img/customize/bg-admin.png)";
+          this.customize.loginWeaperCustomize.backgroundImage = "url(/img/customize/bg-admin-container.png)";
+        }
+      },
       getTime() {
         setInterval(() => {
           this.time = dateFormat(new Date());
@@ -122,15 +136,16 @@
     width: 100%;
     height: 100%;
     margin: 0 auto;
-    background-size: cover;
-    background-position: center center;
-    background-repeat: no-repeat;
+    background-size: cover,cover;
+    background-position: center,top;
+    background-repeat: no-repeat,no-repeat;
   }
 
   .login-weaper-customize{
-    width: 602px;
-    height: 850px;
-    box-shadow: 15px 20px 49px 0px rgba(18, 105, 212, 0.2);
+    margin: 0 auto;
+    background-size: 100% 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
     border-radius: 20px;
 
     .el-input-group__append {
@@ -138,28 +153,9 @@
     }
 
     .box-card{
-      width: 100%;
-      height: 100%;
+      float: right;
+      box-shadow: 15px 20px 49px 0px rgba(18, 105, 212, 0.2);
       border-radius: 20px;
     }
   }
-
-  //平台大小
-  @media screen and (min-width: 800px){
-    .login-weaper-customize{
-      position: absolute;
-      right: 315px;
-    }
-  }
-
-  //手机大小
-  @media screen and (max-width: 800px) {
-    .login-weaper-customize{
-      margin:0 auto;
-    }
-    .login-container {
-      background-image: none;
-      background-color: rgb(17, 123, 255);
-    }
-  }
 </style>

src/page/login/customize/userloginCustomize.vue

@@ -1,81 +1,83 @@
 <template>
-  <el-form class="login-form"
-           status-icon
-           :rules="loginRules"
-           ref="loginForm"
-           :model="loginForm"
-           label-width="0px">
-    <el-form-item v-if="customize.logo">
-      <el-image src="/img/customize/logo.png" draggable="false"></el-image>
-    </el-form-item>
-    <el-form-item>
-      <h1 style="margin: 0">欢迎回来</h1>
-      <p style="width: 147px;height: 17px;font-size: 0.5rem;font-family: Source Han Sans SC;font-weight: bold;color: #646464;opacity: 0.7;">{{customize.tip}}</p>
-    </el-form-item>
-    <el-form-item v-if="tenantMode" prop="tenantId">
-      <p class="form-label">商编</p>
-      <el-input size="small"
-                @keyup.enter.native="handleLogin"
-                v-model="loginForm.tenantId"
-                auto-complete="off"
-                :placeholder="$t('login.tenantId')">
-<!--        <i slot="prefix" class="icon-quanxian"/>-->
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="username">
-      <p class="form-label">账号</p>
-      <el-input size="small"
-                @keyup.enter.native="handleLogin"
-                v-model="loginForm.username"
-                auto-complete="off"
-                :placeholder="$t('login.username')">
-<!--        <i slot="prefix" class="icon-yonghu"/>-->
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="password">
-      <p class="form-label">密码</p>
-      <el-input size="small"
-                @keyup.enter.native="handleLogin"
-                :type="passwordType"
-                v-model="loginForm.password"
-                auto-complete="off"
-                :placeholder="$t('login.password')">
-        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
-<!--        <i slot="prefix" class="icon-mima"/>-->
-      </el-input>
-    </el-form-item>
-    <el-form-item v-if="this.website.captchaMode" prop="code">
-      <el-row :span="24">
-        <el-col :span="16">
-          <el-input size="small"
-                    @keyup.enter.native="handleLogin"
-                    v-model="loginForm.code"
-                    auto-complete="off"
-                    :placeholder="$t('login.code')">
-            <i slot="prefix" class="icon-yanzhengma"/>
-          </el-input>
-        </el-col>
-        <el-col :span="8">
-          <div class="login-code">
-            <img :src="loginForm.image" class="login-code-img" @click="refreshCode"/>
-          </div>
-        </el-col>
-      </el-row>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary"
-                 size="small"
-                 @click.native.prevent="handleLogin"
-                 class="login-submit">立即登录
-      </el-button>
-    </el-form-item>
-    <el-dialog title="用户信息选择"
-               append-to-body
-               :visible.sync="userBox"
-               width="350px">
-      <avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/>
-    </el-dialog>
-  </el-form>
+  <div>
+    <el-form class="login-form"
+             status-icon
+             :rules="loginRules"
+             ref="loginForm"
+             :model="loginForm"
+             label-width="0px">
+      <el-form-item>
+        <el-image src="/img/customize/logo.png" draggable="false" v-if="customize.logo"></el-image>
+      </el-form-item>
+      <el-form-item>
+        <h1 style="margin: 0">欢迎回来</h1>
+        <p style="width: 147px;height: 17px;font-size: 0.5rem;font-family: Source Han Sans SC;font-weight: bold;color: #646464;opacity: 0.7;">{{customize.tip}}</p>
+      </el-form-item>
+      <el-form-item v-if="tenantMode" prop="tenantId">
+        <p class="form-label">商编</p>
+        <el-input size="small"
+                  @keyup.enter.native="handleLogin"
+                  v-model="loginForm.tenantId"
+                  auto-complete="off"
+                  :placeholder="$t('login.tenantId')">
+          <!--        <i slot="prefix" class="icon-quanxian"/>-->
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="username">
+        <p class="form-label">账号</p>
+        <el-input size="small"
+                  @keyup.enter.native="handleLogin"
+                  v-model="loginForm.username"
+                  auto-complete="off"
+                  :placeholder="$t('login.username')">
+          <!--        <i slot="prefix" class="icon-yonghu"/>-->
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <p class="form-label">密码</p>
+        <el-input size="small"
+                  @keyup.enter.native="handleLogin"
+                  :type="passwordType"
+                  v-model="loginForm.password"
+                  auto-complete="off"
+                  :placeholder="$t('login.password')">
+          <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
+          <!--        <i slot="prefix" class="icon-mima"/>-->
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="this.website.captchaMode" prop="code">
+        <el-row :span="24">
+          <el-col :span="16">
+            <el-input size="small"
+                      @keyup.enter.native="handleLogin"
+                      v-model="loginForm.code"
+                      auto-complete="off"
+                      :placeholder="$t('login.code')">
+              <i slot="prefix" class="icon-yanzhengma"/>
+            </el-input>
+          </el-col>
+          <el-col :span="8">
+            <div class="login-code">
+              <img :src="loginForm.image" class="login-code-img" @click="refreshCode"/>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary"
+                   size="small"
+                   @click.native.prevent="handleLogin"
+                   class="login-submit">立即登录
+        </el-button>
+      </el-form-item>
+      <el-dialog title="用户信息选择"
+                 append-to-body
+                 :visible.sync="userBox"
+                 width="350px">
+        <avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/>
+      </el-dialog>
+    </el-form>
+  </div>
 </template>
 
 <script>
@@ -89,7 +91,7 @@
     data() {
       return {
         customize:{
-          logo:false,
+          logo: true,
           tip:"",
         },
         logo: false,
@@ -177,20 +179,7 @@
       };
     },
     created() {
-      let tanentType = this.$route.query.tanentType;
-      if(tanentType!==undefined){
-        tanentType = tanentType.toLocaleLowerCase();
-      }
-      if(tanentType==="mall"){
-        this.customize.logo = true;
-        this.customize.tip = "商户更旺场更高效";
-      }else if(tanentType==="agent"){
-        this.customize.logo = false;
-        this.customize.tip = "消费更实惠更便捷";
-      }else{
-        this.customize.logo = true;
-        this.customize.tip = "全面对接数字时代";
-      }
+      this.initLoginSytle();
       this.getTenant();
       this.refreshCode();
     },
@@ -221,6 +210,22 @@
     },
     props: [],
     methods: {
+      initLoginSytle(){
+        let tanentType = getTopUrl();
+        if(tanentType!==undefined){
+          tanentType = tanentType.toLocaleLowerCase();
+        }
+        if(tanentType==="https://mall.ldt.com"){
+          this.customize.logo = true;
+          this.customize.tip = "商户更旺场更高效";
+        }else if(tanentType==="https://agent.ldt.com"){
+          this.customize.logo = false;
+          this.customize.tip = "消费更实惠更便捷";
+        }else{
+          this.customize.logo = true;
+          this.customize.tip = "全面对接数字时代";
+        }
+      },
       refreshCode() {
         if (this.website.captchaMode) {
           getCaptcha().then(res => {
@@ -283,7 +288,7 @@
           if (data.success && data.data.tenantId) {
             this.tenantMode = false;
             this.loginForm.tenantId = data.data.tenantId;
-            this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
+            // this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
           }
         })
       }