更改登录页面

src/page/login/index.vue

@@ -1,121 +1,151 @@
 <template>
-  <div class="login-container"
-       ref="login"
-       @keyup.enter.native="handleLogin">
-    <top-color v-show="false"></top-color>
-    <div class="login-weaper animated bounceInDown">
-      <div class="login-left">
-        <div class="login-time">
-          {{time}}
+    <div class="login-container"
+         ref="login"
+         :class="backgroundClass"
+         @keyup.enter.native="handleLogin">
+        <top-color v-show="false"></top-color>
+        <div class="login-weaper animated bounceInDown">
+            <!--      <div class="login-left">
+                    <div class="login-time">
+                      {{time}}
+                    </div>
+                     &lt;!&ndash;<img class="img" src="/img/logoTubao.png" alt="">&ndash;&gt;
+                    <p class="title">{{ $t('login.info') }}</p>
+                      &lt;!&ndash;$t 国际化vue-i18n中英文切换 &ndash;&gt;
+                  </div>-->
+            <div class="login-border">
+                <div class="login-main">
+                    <h4 class="login-title">
+                        {{ $t('login.title') }}
+                        <top-lang></top-lang>
+                    </h4>
+                    <userLogin v-if="activeName==='user'"></userLogin>
+                    <codeLogin v-else-if="activeName==='code'"></codeLogin>
+                    <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
+                    <!--          <div class="login-menu">
+                                <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
+                                &lt;!&ndash;<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>&ndash;&gt;
+                                <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>
+                              </div>-->
+                </div>
+
+            </div>
         </div>
-         <!--<img class="img" src="/img/logoTubao.png" alt="">-->
-        <p class="title">{{ $t('login.info') }}</p>
-          <!--$t 国际化vue-i18n中英文切换 -->
-      </div>
-      <div class="login-border">
-        <div class="login-main">
-          <h4 class="login-title">
-            {{ $t('login.title') }}
-            <top-lang></top-lang>
-          </h4>
-          <userLogin v-if="activeName==='user'"></userLogin>
-          <codeLogin v-else-if="activeName==='code'"></codeLogin>
-          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
-          <div class="login-menu">
-            <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
-            <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
-            <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>
-          </div>
+        <div class="el-login-footer">
+            <img src="/img/bg/icp.png" alt="" height="14px" style="margin-right:2px">
+            <span>
+              <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37021302000853"><span
+                  style="color: white">鲁公网安备 37021302000853号  </span></a>
+              <a href="https://beian.miit.gov.cn/"><span style="color: white">鲁ICP备2021000559号</span></a>
+              青岛途宝软件开发有限公司</span>
         </div>
-
-      </div>
     </div>
-  </div>
 </template>
 <script>
-  import userLogin from "./userlogin"; // 账号密码登录按钮
-  import codeLogin from "./codelogin";  // 手机号登录按钮
-  import thirdLogin from "./thirdlogin"; // 第三方登录按钮
-  import {mapGetters} from "vuex";
-  import {dateFormat} from "@/util/date";  // 处理日期格式
-  import {validatenull} from "@/util/validate"; // 判断是否是空null
-  import topLang from "@/page/index/top/top-lang"; // 左侧背景颜色版
-  import topColor from "@/page/index/top/top-color"; // 中英文翻译组建
-  import {getQueryString, getTopUrl} from "@/util/util";
+import userLogin from "./userlogin"; // 账号密码登录按钮
+import codeLogin from "./codelogin";  // 手机号登录按钮
+import thirdLogin from "./thirdlogin"; // 第三方登录按钮
+import {mapGetters} from "vuex";
+import {dateFormat} from "@/util/date";  // 处理日期格式
+import {validatenull} from "@/util/validate"; // 判断是否是空null
+import topLang from "@/page/index/top/top-lang"; // 左侧背景颜色版
+import topColor from "@/page/index/top/top-color"; // 中英文翻译组建
+import {getQueryString, getTopUrl} from "@/util/util";
 
-  export default {
+export default {
     name: "login",
     components: {
-      userLogin,
-      codeLogin,
-      thirdLogin,
-      topLang,
-      topColor
+        userLogin,
+        codeLogin,
+        thirdLogin,
+        topLang,
+        topColor
     },
     data() {
-      return {
-        time: "",
-        activeName: "user",
-        socialForm: {
-          tenantId: "000000",
-          source: "",
-          code: "",
-          state: "",
-        }
-      };
+        return {
+            time: "",
+            activeName: "user",
+            socialForm: {
+                tenantId: "",
+                source: "",
+                code: "",
+                state: "",
+            }
+        };
     },
     watch: {
-      $route() {
-        this.handleLogin();
-      }
+        $route() {
+            this.handleLogin();
+        }
     },
     created() {
-      this.handleLogin();
-      this.getTime();
+        this.handleLogin();
+        this.getTime();
     },
     mounted() {
     },
     computed: {
-      ...mapGetters(["website", "tagWel"])
+        ...mapGetters(["website", "tagWel"]),
+        backgroundClass() {
+            const domain = window.location.hostname
+            if ('e.win-fl.com' === domain) {
+                return 'bg-yf';
+            }
+            return 'bg-default';
+        }
     },
     props: [],
     methods: {
-      getTime() {
-        setInterval(() => {
-          this.time = dateFormat(new Date());
-        }, 1000);
-      },
-      handleLogin() {
-        const topUrl = getTopUrl();
-        const redirectUrl = "/oauth/redirect/";
-        this.socialForm.source = getQueryString("source");
-        this.socialForm.code = getQueryString("code");
-        this.socialForm.state = getQueryString("state");
-          console.log(this.socialForm,'socialForm')
-        if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
-          let source = topUrl.split("?")[0];
-          source = source.split(redirectUrl)[1];
-          this.socialForm.source = source;
+        getTime() {
+            setInterval(() => {
+                this.time = dateFormat(new Date());
+            }, 1000);
+        },
+        handleLogin() {
+            const topUrl = getTopUrl();
+            const redirectUrl = "/oauth/redirect/";
+            this.socialForm.source = getQueryString("source");
+            this.socialForm.code = getQueryString("code");
+            this.socialForm.state = getQueryString("state");
+            console.log(this.socialForm, 'socialForm')
+            if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
+                let source = topUrl.split("?")[0];
+                source = source.split(redirectUrl)[1];
+                this.socialForm.source = source;
+            }
+            if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
+                const loading = this.$loading({
+                    lock: true,
+                    text: '第三方系统登录中,请稍后。。。',
+                    spinner: "el-icon-loading"
+                });
+                this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
+                    window.location.href = topUrl.split(redirectUrl)[0];
+                    this.$router.push({path: this.tagWel.value});
+                    loading.close();
+                }).catch(() => {
+                    loading.close();
+                });
+            }
         }
-        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
-          const loading = this.$loading({
-            lock: true,
-            text: '第三方系统登录中,请稍后。。。',
-            spinner: "el-icon-loading"
-          });
-          this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
-            window.location.href = topUrl.split(redirectUrl)[0];
-            this.$router.push({path: this.tagWel.value});
-            loading.close();
-          }).catch(() => {
-            loading.close();
-          });
-        }
-      }
     }
-  };
+};
 </script>
 
 <style lang="scss">
-  @import "@/styles/login.scss";
+@import "@/styles/login.scss";
+
+.el-login-footer {
+    height: 40px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-family: Arial;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 </style>

src/page/login/userlogin.vue

@@ -1,298 +1,297 @@
 <template>
-  <el-form class="login-form"
-           status-icon
-           :rules="loginRules"
-           ref="loginForm"
-           :model="loginForm"
-           label-width="0">
-<!--    <el-form-item v-if="tenantMode" prop="tenantId">-->
-    <el-form-item v-if="saveTenantId == ''" prop="tenantId">
-      <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">
-      <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">
-      <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-checkbox v-model="rememberMe" style="color:#9c9c9c;">记住密码</el-checkbox>
-      <el-button
-          type="primary"
-          size="small"
-          style="margin-top: 10px"
-          @click.native.prevent="handleLogin"
-          class="login-submit">{{$t('login.submit')}}
-      </el-button>
-    </el-form-item>
-    <el-dialog
-        title="用户信息选择"
-        append-to-body
-        :visible.sync="userBox"
-        :close-on-click-modal="false"
-        width="350px">
-      <avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/>
-    </el-dialog>
-  </el-form>
+    <el-form class="login-form"
+             status-icon
+             :rules="loginRules"
+             ref="loginForm"
+             :model="loginForm"
+             label-width="0">
+        <el-form-item v-if="saveTenantId == ''" prop="tenantId">
+            <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">
+            <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">
+            <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-checkbox v-model="rememberMe" style="color:#FFF;">记住密码</el-checkbox>
+            <el-button
+                type="primary"
+                size="small"
+                style="margin-top: 10px"
+                @click.native.prevent="handleLogin"
+                class="login-submit">{{$t('login.submit')}}
+            </el-button>
+        </el-form-item>
+        <el-dialog
+            title="用户信息选择"
+            append-to-body
+            :visible.sync="userBox"
+            :close-on-click-modal="false"
+            width="350px">
+            <avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/>
+        </el-dialog>
+    </el-form>
 </template>
 
 <script>
-  import {mapGetters} from "vuex";
-  import {info} from "@/api/system/tenant";
-  import {getCaptcha} from "@/api/user";
-  import {getTopUrl} from "@/util/util";
-  import CryptoJS from '@/util/crypto'
-  import {getDomainName} from '@/api/login';
-  export default {
+import {mapGetters} from "vuex";
+import {info} from "@/api/system/tenant";
+import {getCaptcha} from "@/api/user";
+import {getTopUrl} from "@/util/util";
+import CryptoJS from '@/util/crypto'
+import {getDomainName} from '@/api/login';
+export default {
     name: "userlogin",
     data() {
-      return {
-        tenantMode: this.website.tenantMode,
-        rememberMe:false,
-        loginForm: {
-          //企业ID
-          tenantId: '',
-          //部门ID
-          deptId: "",
-          //角色ID
-          roleId: "",
-          //用户名
-          username: '',
-          //密码
-          password: "",
-          //账号类型
-          type: "account",
-          //验证码的值
-          code: "",
-          //验证码的索引
-          key: "",
-          //预加载白色背景
-          image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
-        },
-        loginRules: {
-          tenantId: [
-            {required: false, message: "请输入企业ID", trigger: "blur"}
-          ],
-          username: [
-            {required: true, message: "请输入用户名", trigger: "blur"}
-          ],
-          password: [
-            {required: true, message: "请输入密码", trigger: "blur"},
-            {min: 1, message: "密码长度最少为6位", trigger: "blur"}
-          ]
-        },
-        passwordType: "password",
-        userBox: false,
-        userForm: {
-          deptId: '',
-          roleId: ''
-        },
-        userOption: {
-          labelWidth: 70,
-          submitBtn: true,
-          emptyBtn: false,
-          submitText: '登录',
-          column: [
-            {
-              label: '部门',
-              prop: 'deptId',
-              type: 'select',
-              props: {
-                label: 'deptName',
-                value: 'id'
-              },
-              dicUrl: '/api/blade-system/dept/select',
-              span: 24,
-              display: false,
-              rules: [{
-                required: true,
-                message: "请选择部门",
-                trigger: "blur"
-              }],
+        return {
+            tenantMode: this.website.tenantMode,
+            rememberMe:false,
+            loginForm: {
+                //企业ID
+                tenantId: '',
+                //部门ID
+                deptId: "",
+                //角色ID
+                roleId: "",
+                //用户名
+                username: '',
+                //密码
+                password: "",
+                //账号类型
+                type: "account",
+                //验证码的值
+                code: "",
+                //验证码的索引
+                key: "",
+                //预加载白色背景
+                image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
             },
-            {
-              label: '角色',
-              prop: 'roleId',
-              type: 'select',
-              props: {
-                label: 'roleName',
-                value: 'id'
-              },
-              dicUrl: '/api/blade-system/role/select',
-              span: 24,
-              display: false,
-              rules: [{
-                required: true,
-                message: "请选择角色",
-                trigger: "blur"
-              }],
+            loginRules: {
+                tenantId: [
+                    {required: false, message: "请输入企业ID", trigger: "blur"}
+                ],
+                username: [
+                    {required: true, message: "请输入用户名", trigger: "blur"}
+                ],
+                password: [
+                    {required: true, message: "请输入密码", trigger: "blur"},
+                    {min: 1, message: "密码长度最少为6位", trigger: "blur"}
+                ]
             },
-          ]
-        },
-        saveTenantId: '',
-      };
+            passwordType: "password",
+            userBox: false,
+            userForm: {
+                deptId: '',
+                roleId: ''
+            },
+            userOption: {
+                labelWidth: 70,
+                submitBtn: true,
+                emptyBtn: false,
+                submitText: '登录',
+                column: [
+                    {
+                        label: '部门',
+                        prop: 'deptId',
+                        type: 'select',
+                        props: {
+                            label: 'deptName',
+                            value: 'id'
+                        },
+                        dicUrl: '/api/blade-system/dept/select',
+                        span: 24,
+                        display: false,
+                        rules: [{
+                            required: true,
+                            message: "请选择部门",
+                            trigger: "blur"
+                        }],
+                    },
+                    {
+                        label: '角色',
+                        prop: 'roleId',
+                        type: 'select',
+                        props: {
+                            label: 'roleName',
+                            value: 'id'
+                        },
+                        dicUrl: '/api/blade-system/role/select',
+                        span: 24,
+                        display: false,
+                        rules: [{
+                            required: true,
+                            message: "请选择角色",
+                            trigger: "blur"
+                        }],
+                    },
+                ]
+            },
+            saveTenantId: '',
+        };
     },
     async created() {
-      this.getTenant();
-      this.refreshCode();
-      await getDomainName(window.location.hostname).then(res => {
-          console.log(res,'域名')
-        this.saveTenantId = res.data.data.tenantId? res.data.data.tenantId: '';
-        this.loginForm.tenantId = res.data.data.tenantId? res.data.data.tenantId: '';
-      })
-      if (this.saveTenantId == '') {
-        if(localStorage.getItem("tenantId")) this.loginForm.tenantId = CryptoJS.decrypt(localStorage.getItem("tenantId")) //企业ID
-      }
-      if(localStorage.getItem("username")) this.loginForm.username = CryptoJS.decrypt(localStorage.getItem("username")) //用户名
-      if(localStorage.getItem("password")) this.loginForm.password = CryptoJS.decrypt(localStorage.getItem("password")) //密码
-      if(localStorage.getItem("rememberMe")) this.rememberMe = JSON.parse(localStorage.getItem("rememberMe"))
+        this.getTenant();
+        this.refreshCode();
+        await getDomainName(window.location.hostname).then(res => {
+            console.log(res,'域名')
+            this.saveTenantId = res.data.data.tenantId? res.data.data.tenantId: '';
+            this.loginForm.tenantId = res.data.data.tenantId? res.data.data.tenantId: '';
+        })
+        if (this.saveTenantId == '') {
+            if(localStorage.getItem("tenantId")) this.loginForm.tenantId = CryptoJS.decrypt(localStorage.getItem("tenantId")) //企业ID
+        }
+        if(localStorage.getItem("username")) this.loginForm.username = CryptoJS.decrypt(localStorage.getItem("username")) //用户名
+        if(localStorage.getItem("password")) this.loginForm.password = CryptoJS.decrypt(localStorage.getItem("password")) //密码
+        if(localStorage.getItem("rememberMe")) this.rememberMe = JSON.parse(localStorage.getItem("rememberMe"))
     },
     mounted() {
     },
     watch: {
-      'loginForm.deptId'() {
-        const column = this.findObject(this.userOption.column, "deptId");
-        if (this.loginForm.deptId.includes(",")) {
-          column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
-          column.display = true;
-        } else {
-          column.dicUrl = '';
-        }
-      },
-      'loginForm.roleId'() {
-        const column = this.findObject(this.userOption.column, "roleId");
-        if (this.loginForm.roleId.includes(",")) {
-          column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
-          column.display = true;
-        } else {
-          column.dicUrl = '';
+        'loginForm.deptId'() {
+            const column = this.findObject(this.userOption.column, "deptId");
+            if (this.loginForm.deptId.includes(",")) {
+                column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
+                column.display = true;
+            } else {
+                column.dicUrl = '';
+            }
+        },
+        'loginForm.roleId'() {
+            const column = this.findObject(this.userOption.column, "roleId");
+            if (this.loginForm.roleId.includes(",")) {
+                column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
+                column.display = true;
+            } else {
+                column.dicUrl = '';
+            }
         }
-      }
     },
     computed: {
-      ...mapGetters(["tagWel", "userInfo"])
+        ...mapGetters(["tagWel", "userInfo"])
     },
     props: {
     },
     methods: {
-      refreshCode() {
-        if (this.website.captchaMode) {
-          getCaptcha().then(res => {
-            const data = res.data;
-            this.loginForm.key = data.key;
-            this.loginForm.image = data.image;
-          })
-        }
-      },
-      showPassword() {
-        this.passwordType === ""
-          ? (this.passwordType = "password")
-          : (this.passwordType = "");
-      },
-      submitLogin (form, done) {
-        if (form.deptId !== '') {
-          this.loginForm.deptId = form.deptId;
-        }
-        if (form.roleId !== '') {
-          this.loginForm.roleId = form.roleId;
-        }
-        this.handleLogin();
-        done();
-      },
-      handleLogin() {
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            const loading = this.$loading({
-              lock: true,
-              text: '登录中,请稍后。。。',
-              spinner: "el-icon-loading"
-            });
-            if (this.rememberMe == true){
-              localStorage.setItem('tenantId', CryptoJS.encrypt(this.loginForm.tenantId))
-              localStorage.setItem('username', CryptoJS.encrypt(this.loginForm.username))
-              localStorage.setItem('password', CryptoJS.encrypt(this.loginForm.password))
-              localStorage.setItem('rememberMe', this.rememberMe)
-            }else {
-              localStorage.removeItem("tenantId");
-              localStorage.removeItem("username");
-              localStorage.removeItem("password");
-              localStorage.removeItem("rememberMe");
+        refreshCode() {
+            if (this.website.captchaMode) {
+                getCaptcha().then(res => {
+                    const data = res.data;
+                    this.loginForm.key = data.key;
+                    this.loginForm.image = data.image;
+                })
+            }
+        },
+        showPassword() {
+            this.passwordType === ""
+                ? (this.passwordType = "password")
+                : (this.passwordType = "");
+        },
+        submitLogin (form, done) {
+            if (form.deptId !== '') {
+                this.loginForm.deptId = form.deptId;
             }
-            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
-              if (this.website.switchMode) {
-                const deptId = this.userInfo.dept_id;
-                const roleId = this.userInfo.role_id;
-                if (deptId.includes(",") || roleId.includes(",")) {
-                  this.loginForm.deptId = deptId;
-                  this.loginForm.roleId = roleId;
-                  this.userBox = true;
-                  loading.close();
-                  return false;
+            if (form.roleId !== '') {
+                this.loginForm.roleId = form.roleId;
+            }
+            this.handleLogin();
+            done();
+        },
+        handleLogin() {
+            this.$refs.loginForm.validate(valid => {
+                if (valid) {
+                    const loading = this.$loading({
+                        lock: true,
+                        text: '登录中,请稍后。。。',
+                        spinner: "el-icon-loading"
+                    });
+                    if (this.rememberMe == true){
+                        localStorage.setItem('tenantId', CryptoJS.encrypt(this.loginForm.tenantId))
+                        localStorage.setItem('username', CryptoJS.encrypt(this.loginForm.username))
+                        localStorage.setItem('password', CryptoJS.encrypt(this.loginForm.password))
+                        localStorage.setItem('rememberMe', this.rememberMe)
+                    }else {
+                        localStorage.removeItem("tenantId");
+                        localStorage.removeItem("username");
+                        localStorage.removeItem("password");
+                        localStorage.removeItem("rememberMe");
+                    }
+                    this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
+                        if (this.website.switchMode) {
+                            const deptId = this.userInfo.dept_id;
+                            const roleId = this.userInfo.role_id;
+                            if (deptId.includes(",") || roleId.includes(",")) {
+                                this.loginForm.deptId = deptId;
+                                this.loginForm.roleId = roleId;
+                                this.userBox = true;
+                                loading.close();
+                                return false;
+                            }
+                        }
+                        this.$router.push({path: this.tagWel.value});
+                        loading.close();
+                    }).catch(() => {
+                        loading.close();
+                        this.refreshCode();
+                    });
                 }
-              }
-              this.$router.push({path: this.tagWel.value});
-              loading.close();
-            }).catch(() => {
-              loading.close();
-              this.refreshCode();
             });
-          }
-        });
-      },
-      getTenant() {
-        let domain = getTopUrl();
-        // 临时指定域名，方便测试
-        //domain = "https://bladex.vip";
-        info(domain).then(res => {
-          const data = res.data;
-          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})`;
-          }
-        })
-      }
+        },
+        getTenant() {
+            let domain = getTopUrl();
+            // 临时指定域名，方便测试
+            //domain = "https://bladex.vip";
+            info(domain).then(res => {
+                const data = res.data;
+                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})`;
+                }
+            })
+        }
     }
-  };
+};
 </script>
 
 <style>

src/styles/login.scss

@@ -1,184 +1,198 @@
 .login-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
-  background-image: url("/img/bg/bg.jpg");
-  background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    // background-image: var(--login-bg-image, url("/img/bg/yf-main-1.jpg"));
+    background-size: 100% 100%;
+    &.bg-default {
+        background-image: url("/img/bg/other-default.jpg");
+    }
+    &.bg-yf {
+        background-image: url("/img/bg/yf-main-1.jpg");
+    }
 }
 
 .login-weaper {
-  margin: 0 auto;
-  width: 1000px;
-  box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
-
-  .el-input-group__append {
-    border: none;
-  }
+    // margin: 0 auto;
+    position: absolute;
+    right:12vw;
+    width: 500px;
+    box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
+    border-radius: 40px;
+    .el-input-group__append {
+        border: none;
+    }
 }
 
 .login-left,
 .login-border {
-  position: relative;
-  min-height: 500px;
-  align-items: center;
-  display: flex;
+    position: relative;
+    min-height: 440px;
+    align-items: center;
+    display: flex;
 }
 
 .login-left {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-  justify-content: center;
-  flex-direction: column;
-  background-color: #409EFF;
-  color: #fff;
-  float: left;
-  width: 50%;
-  position: relative;
+    border-top-left-radius: 40px;
+    border-bottom-left-radius: 40px;
+    justify-content: center;
+    flex-direction: column;
+    //background-color: #409EFF;
+    color: #fff;
+    float: left;
+    width: 50%;
+    position: relative;
+    background:
+        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
+        #409EFF;
 }
 
 .login-left .img {
-  width: 280px;
+    width: 280px;
 }
 
 .login-time {
-  position: absolute;
-  left: 25px;
-  top: 25px;
-  width: 100%;
-  color: #fff;
-  font-weight: 200;
-  opacity: 0.9;
-  font-size: 18px;
-  overflow: hidden;
+    position: absolute;
+    left: 25px;
+    top: 25px;
+    width: 100%;
+    color: #fff;
+    font-weight: 200;
+    opacity: 0.9;
+    font-size: 18px;
+    overflow: hidden;
 }
 
 .login-left .title {
-  margin-top: 60px;
-  text-align: center;
-  color: #fff;
-  font-weight: 300;
-  letter-spacing: 2px;
-  font-size: 25px;
+    margin-top: 60px;
+    text-align: center;
+    color: #fff;
+    font-weight: 300;
+    letter-spacing: 2px;
+    font-size: 25px;
 }
 
 .login-border {
-  border-left: none;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  color: #fff;
-  background-color: #fff;
-  width: 50%;
-  float: left;
-  box-sizing: border-box;
+    border-left: none;
+    border-radius: 40px;
+    color: #fff;
+    background-color: #0050A6;
+    opacity: 0.8;
+    width: 100%;
+    float: left;
+    box-sizing: border-box;
 }
 
 .login-main {
-  margin: 0 auto;
-  width: 65%;
-  box-sizing: border-box;
+    margin: 0 auto;
+    width: 65%;
+    box-sizing: border-box;
 }
 
 .login-main > h3 {
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 .login-main > p {
-  color: #76838f;
+    color: #76838f;
 }
 
 .login-title {
-  color: #333;
-  margin-bottom: 40px;
-  font-weight: 500;
-  font-size: 22px;
-  text-align: center;
-  letter-spacing: 4px;
+    color: #fff;
+    margin-bottom: 40px;
+    font-weight: 500;
+    font-size: 22px;
+    text-align: center;
+    letter-spacing: 4px;
+    .el-dropdown{
+        color: #fff;
+    }
 }
 
 .login-menu {
-  margin-top: 40px;
-  width: 100%;
-  text-align: center;
+    margin-top: 40px;
+    width: 100%;
+    text-align: center;
 
-  a {
-    color: #999;
-    font-size: 12px;
-    margin: 0px 8px;
-  }
+    a {
+        color: #999;
+        font-size: 12px;
+        margin: 0px 8px;
+    }
 }
 
 .login-submit {
-  width: 100%;
-  height: 45px;
-  border: 1px solid #409EFF;
-  background: none;
-  font-size: 18px;
-  letter-spacing: 2px;
-  font-weight: 300;
-  color: #409EFF;
-  cursor: pointer;
-  margin-top: 30px;
-  font-family: "neo";
-  transition: 0.25s;
+    width: 100%;
+    height: 45px;
+    border: 1px solid #fff;
+    background: none;
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-weight: 300;
+    color: #fff;
+    cursor: pointer;
+    margin-top: 30px;
+    font-family: "neo";
+    transition: 0.25s;
 }
 
 .login-form {
-  margin: 10px 0;
+    margin: 10px 0;
 
-  i {
-    color: #333;
-  }
+    i {
+        color: #fff;
+    }
 
-  .el-form-item__content {
-    width: 100%;
-  }
-
-  .el-form-item {
-    margin-bottom: 12px;
-  }
-
-  .el-input {
-    input {
-      padding-bottom: 10px;
-      text-indent: 5px;
-      background: transparent;
-      border: none;
-      border-radius: 0;
-      color: #333;
-      border-bottom: 1px solid rgb(235, 237, 242);
+    .el-form-item__content {
+        width: 100%;
+    }
+
+    .el-form-item {
+        margin-bottom: 12px;
     }
 
-    .el-input__prefix {
-      i {
-        padding: 0 5px;
-        font-size: 16px !important;
-      }
+    .el-input {
+        input {
+            padding-bottom: 10px;
+            text-indent: 5px;
+            background: transparent;
+            border: none;
+            border-radius: 0;
+            color: #fff;
+            border-bottom: 1px solid rgb(235, 237, 242);
+        }
+
+        .el-input__prefix {
+            i {
+                padding: 0 5px;
+                font-size: 16px !important;
+            }
+        }
     }
-  }
 }
 
 .login-code {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  margin: 0 0 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin: 0 0 0 10px;
 }
 
 .login-code-img {
-  margin-top: 2px;
-  width: 100px;
-  height: 38px;
-  background-color: #fdfdfd;
-  border: 1px solid #f0f0f0;
-  color: #333;
-  font-size: 14px;
-  font-weight: bold;
-  letter-spacing: 5px;
-  line-height: 38px;
-  text-indent: 5px;
-  text-align: center;
-  cursor:pointer!important;
+    margin-top: 2px;
+    width: 100px;
+    height: 38px;
+    background-color: #fdfdfd;
+    border: 1px solid #f0f0f0;
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    letter-spacing: 5px;
+    line-height: 38px;
+    text-indent: 5px;
+    text-align: center;
+    cursor:pointer!important;
 }