修改bug

修改bug

src/App.vue

@@ -1,11 +1,12 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+    <div id="app">
+        <router-view />
+    </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
 }
 </script>
+

src/layout/components/Navbar.vue

@@ -205,7 +205,6 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-
     </div>
   </div>
 </template>
@@ -222,7 +221,7 @@ import Search from '@/components/HeaderSearch'
 import axios from 'axios';
 import router, { resetRouter } from '@/router'
 import BASEURL from '@/utils/baseUrl'
-import { getUseType } from '@/utils/auth'
+import { getUseType,removeLoginStatus } from '@/utils/auth'
 
 export default {
   components: {
@@ -294,6 +293,8 @@ export default {
         this.$router.push(`/login`);
         this.$message.error(response.message);
       });
+
+      removeLoginStatus();
     },
     // async logout() {
     //   await this.$store.dispatch('user/logout')

src/permission.js

@@ -3,112 +3,123 @@ import store from './store'
 import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import { getToken,setUserUrl, setUseType,setWebSiteId,hashParams} from '@/utils/auth' // get token from cookie
+import { getToken, setUserUrl, setUseType, setWebSiteId, hashParams, setLoginStatus, getLoginStatus } from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
 import URL from '@/utils/baseUrl';
-import {getInfo} from '@/api/user'
+import { getInfo } from '@/api/user'
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
 
-router.beforeEach(async(to, from, next) => {
-  // start progress bar
-  NProgress.start()
+router.beforeEach(async (to, from, next) => {
+    // start progress bar
+    NProgress.start()
 
-  // set page title
-  document.title = getPageTitle(to.meta.title)
+    // set page title
+    document.title = getPageTitle(to.meta.title)
 
-  // determine whether the user has logged in
-  const hasToken = getToken()
-  //检测token的状态
-  await store.dispatch('user/logoutStatus')
+    // determine whether the user has logged in
+    const hasToken = getToken()
+    //检测token的状态
+    await store.dispatch('user/logoutStatus')
 
-  if (hasToken) {
-    if (to.path === '/login') {
-      
-      // Retrieve userurl
-      const userurl = hashParams();
-      if(userurl){
-        setUserUrl(userurl, 86400) 
-      }
-  
-      const userInfo = await getInfo();
-      console.log("User Info:", userInfo);
-      if (userInfo.code === 200) {
-        console.log("####")
-        setUseType(userInfo.data.userType, 86400)
-        setWebSiteId(userInfo.data.siteId, 86400)
-        next({ path: '/' })
-        NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
-      }else{
-        next({ path: '/' })
-        NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
-      }
-      // if is logged in, redirect to the home page
+    //获得用户操作管理系统的权限
+    const loginStatus = getLoginStatus()
 
-    
-    } else {
-      // determine whether the user has obtained his permission roles through getInfo
-      const hasRoles = store.getters.roles && store.getters.roles.length > 0
-      if (hasRoles) {
-        next()
-      } else {
-        try {
-          // get user info
-          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-          const { roles } = await store.dispatch('user/getInfo')
-
-          // generate accessible routes map based on roles
-          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
-
-          // dynamically add accessible routes
-          router.addRoutes(accessRoutes)
 
-          // hack method to ensure that addRoutes is complete
-          // set the replace: true, so the navigation will not leave a history record
-          next({ ...to, replace: true })
-
-          // Call getInfo to fetch user information
-          const userInfo = await getInfo();
-          console.log("User Info:", userInfo);
-          console.log("33333333333")
-        } catch (error) {
-          console.log("444444444444")
-          // remove token and go to login page to re-login
-          await store.dispatch('user/resetToken')
-          Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
-          NProgress.done()
+    if (hasToken) {
+        if (loginStatus == 0 || loginStatus == null || loginStatus == undefined) {
+            if (whiteList.indexOf(to.path) !== -1) {
+                console.log("用户没有权限操作管理系统，使其保持在登录页面");
+                next();
+            } else {
+                next(`/login?redirect=${to.path}`);
+                NProgress.done();
+            }
+        } else {
+            if (to.path === '/login') {
+                // Retrieve userurl
+                const userurl = hashParams();
+                if (userurl) {
+                    setUserUrl(userurl, 86400)
+                }
+                const userInfo = await getInfo();
+                console.log("User Info:", userInfo);
+                if (userInfo.code === 200) {
+                    console.log("####")
+                    setUseType(userInfo.data.userType, 86400)
+                    setWebSiteId(userInfo.data.siteId, 86400)
+                    next({ path: '/' })
+                    NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
+                } else {
+                    if(userInfo.code == -1){
+                        setLoginStatus(0,86400)
+                        next({ path: '/' })
+                        NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
+                    }else{
+                        next({ path: '/' })
+                        NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
+                    }
+                }
+                // if is logged in, redirect to the home page
+            } else {
+                // determine whether the user has obtained his permission roles through getInfo
+                const hasRoles = store.getters.roles && store.getters.roles.length > 0
+                if (hasRoles) {
+                    next()
+                } else {
+                    try {
+                        // get user info
+                        // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+                        const { roles } = await store.dispatch('user/getInfo')
+                        // generate accessible routes map based on roles
+                        const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+                        // dynamically add accessible routes
+                        router.addRoutes(accessRoutes)
+                        // hack method to ensure that addRoutes is complete
+                        // set the replace: true, so the navigation will not leave a history record
+                        next({ ...to, replace: true })
+                        // Call getInfo to fetch user information
+                        const userInfo = await getInfo();
+                        console.log("User Info:", userInfo);
+                        console.log("33333333333")
+                    } catch (error) {
+                        console.log("444444444444")
+                        // remove token and go to login page to re-login
+                        await store.dispatch('user/resetToken')
+                        Message.error(error || 'Has Error')
+                        next(`/login?redirect=${to.path}`)
+                        NProgress.done()
+                    }
+                }
+            }
         }
-      }
-    }
-  } else {
-    /* has no token*/
-    if (whiteList.indexOf(to.path) !== -1) {
-      console.log("####111111111111")
-      const userurl = hashParams();
-      if(userurl){
-        setUserUrl(userurl, 86400) 
-      }
-      // in the free login whitelist, go directly
-      next()
     } else {
-      console.log("####22222222222")
-      // other pages that do not have permission to access are redirected to the login page.
-      next(`/login?redirect=${to.path}`)
-      NProgress.done()
-      // const userurl = hashParams();
-      // if(userurl){
-      //   setUserUrl(userurl, 86400) 
-      // }else{
-        setUserUrl(URL.webUrl, 86400)
-      // }
-      
+        /* has no token*/
+        if (whiteList.indexOf(to.path) !== -1) {
+            console.log("####111111111111")
+            const userurl = hashParams();
+            if (userurl) {
+                setUserUrl(userurl, 86400)
+            }
+            // in the free login whitelist, go directly
+            next()
+        } else {
+            console.log("####22222222222")
+            // other pages that do not have permission to access are redirected to the login page.
+            next(`/login?redirect=${to.path}`)
+            NProgress.done()
+            // const userurl = hashParams();
+            // if(userurl){
+            //   setUserUrl(userurl, 86400) 
+            // }else{
+            setUserUrl(URL.webUrl, 86400)
+            // }
+        }
     }
-  }
 })
 
 router.afterEach(() => {
-  // finish progress bar
-  NProgress.done()
+    // finish progress bar
+    NProgress.done()
 })

src/store/getters.js

@@ -15,6 +15,7 @@ const getters = {
   userurl: state => state.user.userurl,
   usertype: state => state.user.usertype,
   exp: state => state.user.exp,
-  websiteid: state => state.user.websiteid
+  websiteid: state => state.user.websiteid,
+  loginStatus: state => state.user.loginStatus
 }
 export default getters;

src/store/modules/user.js

@@ -1,5 +1,5 @@
 import { login, logout, getInfo, getMenu ,getImgCode,updateUserAvatarNickname,loginapi,logoutapi,logoutStatus} from '@/api/user'
-import { getToken, setToken, setUserUrl, removeToken ,removUserUrl,getUserUrl,getUseType,removUseType,setUseType,getExp,setExp,removeExp,setWebSiteId,getWebSiteId,removeWebSiteId } from '@/utils/auth'
+import { getToken, setToken, setUserUrl, removeToken ,removUserUrl,getUserUrl,getUseType,removUseType,setUseType,getExp,setExp,removeExp,setWebSiteId,getWebSiteId,removeWebSiteId,setLoginStatus,getLoginStatus,removeLoginStatus } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
 import axios from 'axios'
 
@@ -15,6 +15,7 @@ const state = {
   usertype: getUseType(),
   exp:getExp(),
   websiteid:getWebSiteId(),
+  loginStatus:getLoginStatus(),//用户是否有权限进入管理后台 1=允许 0=不允许
 }
 
 const mutations = {
@@ -51,6 +52,9 @@ const mutations = {
   SET_WEBSITEID: (state, websiteid) => {
     state.websiteid = websiteid
   },
+  SET_LOGIN_STATUS: (state, loginStatus) => {
+    state.loginStatus = loginStatus
+  },
   // 退出登录逻辑直接放在 mutations 中
   LOGOUT(state) {
     state.token = '';
@@ -104,6 +108,9 @@ const actions = {
             //储存过期时间
             setExp(data.exp,data.exp)
             commit('SET_EXP',data.exp)
+            //用户有权限登录
+            setLoginStatus(1,data.exp)
+            commit('SET_LOGIN_STATUS',1)
           }
 
           //会员登录进入系统，储存所属url
@@ -117,6 +124,9 @@ const actions = {
             //储存过期时间
             setExp(data.exp,data.exp)
             commit('SET_EXP',data.exp)
+            //用户有权限登录
+            setLoginStatus(1,data.exp)
+            commit('SET_LOGIN_STATUS',0)
           }
         }
 

src/utils/auth.js

@@ -6,6 +6,7 @@ const useType = 'use-Type'
 const expTime = 'exp-time'
 const webStieId = 'website-id'
 const TokenKeyTest = 'test-token'
+const loginStatus = 'login-status'
 
 //1.设置token
 export function getToken() {
@@ -86,6 +87,22 @@ function convertSecondsToDays(seconds) {
   return seconds/(60*60*24); //1天=60秒*60分钟*24小时
 }
 
+//6.设置用户登录状态 - 单点登录 用于判断用户是否用权限进入系统内部
+export function setLoginStatus(status,exp) {
+    const expdays = convertSecondsToDays(exp)
+    return Cookies.set(loginStatus, status, { expires: expdays })
+  }
+
+//6.1 获取用户登录状态
+export function getLoginStatus() {
+  return Cookies.get(loginStatus)
+}
+
+//6.2 删除用户登录状态
+export function removeLoginStatus() {
+  return Cookies.remove(loginStatus)
+}
+
 // Function to parse hash parameters from the URL
 export function hashParams() {
   const urlString = window.location.href;

src/views/login/index.vue

@@ -1,780 +1,875 @@
 <template>
-  <div class="appBox">
-    <div class="mainBox">
-      <div class="leftBox">
-        <!--大标题-->
-        <div class="titleBox">
-          <div class="titleEnglish">Operation Management Platform</div>
-          <div class="titleChinaeseBox">
-            <span class="titleChinasesTop">政讯通<br></span>
-            <span class="titleChinasesBottom">运营管理平台</span>
-          </div>
-        </div>
-        <!--背景颜色-->
-        <div class="yellow" />
-        <div class="blue" />
-        <!--人物图片-->
-        <img src="@/assets/login/Picture.png" class="TitleImg">
-      </div>
-      <div class="rightBox">
-        <!--form登陆框-->
-        <div class="loginFormBox">
-          <!--开始验证表单 start-->
-          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
-            <div class="inputBox greyBg">
-              <img src="@/assets/login/id-card-outline.png" class="inputIcon">
-              <el-form-item prop="username">
-                <el-input
-                  ref="username"
-                  v-model="loginForm.username"
-                  placeholder="请输入手机号"
-                  name="username"
-                  type="text"
-                  tabindex="1"
-                  autocomplete="off"
-                />
-              </el-form-item>
+    <div class="appBox">
+        <div class="mainBox">
+            <div class="leftBox">
+                <!--大标题-->
+                <div class="titleBox">
+                    <div class="titleEnglish">Operation Management Platform</div>
+                    <div class="titleChinaeseBox">
+                        <span class="titleChinasesTop">政讯通<br></span>
+                        <span class="titleChinasesBottom">运营管理平台</span>
+                    </div>
+                </div>
+                <!--背景颜色-->
+                <div class="yellow" />
+                <div class="blue" />
+                <!--人物图片-->
+                <img src="@/assets/login/Picture.png" class="TitleImg">
             </div>
-            <div class="inputBox greyBg">
-              <img src="@/assets/login/bag-remove-outline.png" class="inputIcon">
-              <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
-                <el-form-item prop="password">
-                  <el-input
-                    :key="passwordType"
-                    ref="password"
-                    v-model="loginForm.password"
-                    :type="passwordType"
-                    placeholder="请输入密码"
-                    name="password"
-                    tabindex="2"
-                    autocomplete="off"
-                    @keyup.native="checkCapslock"
-                    @blur="capsTooltip = false"
-                    @keyup.enter.native="handleLogin"
-                  />
-                  <span class="show-pwd" @click="showPwd">
-                    <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-                  </span>
-                </el-form-item>
-              </el-tooltip>
+            <div class="rightBox">
+                <!--form登陆框-->
+                <div class="loginFormBox">
+                    <!--开始验证表单 start-->
+                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
+                        label-position="left">
+                        <div class="inputBox greyBg">
+                            <img src="@/assets/login/id-card-outline.png" class="inputIcon">
+                            <el-form-item prop="username">
+                                <el-input ref="username" v-model="loginForm.username" placeholder="请输入手机号"
+                                    name="username" type="text" tabindex="1" autocomplete="off" />
+                            </el-form-item>
+                        </div>
+                        <div class="inputBox greyBg">
+                            <img src="@/assets/login/bag-remove-outline.png" class="inputIcon">
+                            <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+                                <el-form-item prop="password">
+                                    <el-input :key="passwordType" ref="password" v-model="loginForm.password"
+                                        :type="passwordType" placeholder="请输入密码" name="password" tabindex="2"
+                                        autocomplete="off" @keyup.native="checkCapslock" @blur="capsTooltip = false"
+                                        @keyup.enter.native="handleLogin" />
+                                    <span class="show-pwd" @click="showPwd">
+                                        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+                                    </span>
+                                </el-form-item>
+                            </el-tooltip>
+                        </div>
+                        <!-- <div class="inputBoxSpecial">
+                            <div class="inputBoxLeft greyBg">
+                                <img src="@/assets/login/hardware-chip-outline.png" class="inputIcon">
+                                <el-form-item prop="captcha">
+                                <el-input
+                                    ref="captcha"
+                                    v-model="loginForm.captcha"
+                                    placeholder="图形验证码"
+                                    name="captcha"
+                                    type="text"
+                                    tabindex="3"
+                                    maxlength="4"
+                                    autocomplete="off"
+                                />
+                                </el-form-item>
+                            </div>
+                            <div class="inputBoxRight greyBg">
+                                <div class="submitCode">
+                                <img :src="codeImg" class="codeImg" @click="getImgCode">
+                                </div>
+                                <div class="reloadBtn" @click="getImgCode">看不清？换一张图</div>
+                            </div>
+                        </div> -->
+                        <el-button :loading="loading" type="primary" class="loginBtn"
+                            @click.native.prevent="singleLogin">
+                            登录
+                        </el-button>
+                        <!-- <div class="singleLogin" @click="goBackWebUrl"><i class="el-icon-refresh-right" /> 点此返回原网站</div> -->
+                    </el-form>
+                    <!--开始验证表单 end-->
+                </div>
             </div>
-            <!-- <div class="inputBoxSpecial">
-              <div class="inputBoxLeft greyBg">
-                <img src="@/assets/login/hardware-chip-outline.png" class="inputIcon">
-                <el-form-item prop="captcha">
-                  <el-input
-                    ref="captcha"
-                    v-model="loginForm.captcha"
-                    placeholder="图形验证码"
-                    name="captcha"
-                    type="text"
-                    tabindex="3"
-                    maxlength="4"
-                    autocomplete="off"
-                  />
-                </el-form-item>
-              </div>
-              <div class="inputBoxRight greyBg">
-                <div class="submitCode">
-                  <img :src="codeImg" class="codeImg" @click="getImgCode">
+        </div>
+        <div v-if="this.$store.getters.loginStatus == 0" class="loginStatusBox">
+            <div class="loginStatus">
+                <div class="loginStatusTip">提示</div>
+                <div class="loginStatusImgBox">
+                    <img src="@/assets/login/iconContainer.png">
                 </div>
-                <div class="reloadBtn" @click="getImgCode">看不清？换一张图</div>
-              </div>
-            </div> -->
-            <el-button :loading="loading" type="primary" class="loginBtn" @click.native.prevent="singleLogin">
-              登录
-            </el-button>
-            <!-- <div class="singleLogin" @click="goBackWebUrl"><i class="el-icon-refresh-right" /> 点此返回原网站</div> -->
-          </el-form>
-          <!--开始验证表单 end-->
+                <div class="loginStatusTitle">暂无权限登录</div>
+                <div class="loginStatusText">请联系管理员或客服人员操作</div>
+                <div class="loginStatusBtnBox">
+                    <el-button type="primary" @click="closeWindow">关闭</el-button>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
 import { validUserPhone } from '@/utils/validate'
 import axios from 'axios'
 import BASEURL from '@/utils/baseUrl'
-import { getToken,getTokenTest,removeToken } from '@/utils/auth'
+import { getToken, getTokenTest, removeToken,setLoginStatus } from '@/utils/auth'
 
 export default {
-  name: 'Login',
-  data() {
-    // 配置验证规则：用于表单验证
-    const validateUsername = (rule, value, callback) => {
-      if (!validUserPhone(value)) {
-        callback(new Error('请输入正确的手机号！'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('密码不能低于6位！'))
-      } else {
-        callback()
-      }
-    }
-    const validateCode = (rule, value, callback) => {
-      if (value.length < 4) {
-        callback(new Error('图形验证码不能低于4位！'))
-      } else {
-        callback()
-      }
-    }
-    // 本页基础数据
-    return {
-      loginForm: { // 1.用户使用哪些信息登录
-        username: '', // 15210211200
-        password: '', // 111111
-        type: 1, //1=账号密码登录
-        captcha: '',//验证码图片
-        code:''//验证code
-      },
-      loginRules: { // 2.配置from表单验证规则
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
-        captcha: [{ required: true, trigger: 'blur', validator: validateCode }]
-      },
-      passwordType: 'password', // 3.密码域默认type 当显示密码的时候改为text
-      capsTooltip: false,
-      loading: false,
-      showDialog: false,
-      redirect: undefined,
-      otherQuery: {},
-      // 图像验证码
-      captchaText: '', // 保存生成的验证码文本
-      captchaInput: '', // 用户输入的验证码
-      codeImg: '' // 图形验证码
-    }
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        const query = route.query
-        if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
+    name: 'Login',
+    data() {
+        // 配置验证规则：用于表单验证
+        const validateUsername = (rule, value, callback) => {
+            if (!validUserPhone(value)) {
+                callback(new Error('请输入正确的手机号！'))
+            } else {
+                callback()
+            }
         }
-      },
-      immediate: true
-    }
-  },
-  // created() {
-  //   let token = getToken();
-  //   //查询登录状态
-  //   this.$store.dispatch('user/logoutStatus', {"token":token}).then( res => {
-  //     if(res.code==200){
-  //       //token有效，不执行操作
-  //     }else{
-  //       //如果token过期，就清理掉token
-  //       removeToken()
-  //       console.log("token已过期!")
-  //       //this.$message.error(res.message)
-  //     }
-  //   }).catch(() => {
-  //     this.$message.error("查询登录状态失败，请重新登录！")
-  //   })
-  // },
-  mounted() {
-    this.getImgCode()
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        const query = route.query
-        if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
+        const validatePassword = (rule, value, callback) => {
+            if (value.length < 6) {
+                callback(new Error('密码不能低于6位！'))
+            } else {
+                callback()
+            }
         }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    // 检查输入状态
-    checkCapslock(e) {
-      const { key } = e
-      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
-    },
-    // 切换密码框的显示与隐藏
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
-    },
-    // 提交表单并跳转
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          //console.log(this.loginForm)
-          //开始登录
-          this.loading = true
-          this.$store.dispatch('user/login', this.loginForm)
-            .then( res => {
-              this.loading = false
-              console.log(res)
-              if(res.code==0){
-                this.$message({
-                  type:'error',
-                  message:res.message
-                })
-              }else if(res.code==200){
-                console.log("登录成功，将跳转至详情页面！")
-                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
-              }else if(res.code!=0&&res.code!=200){
-                this.$message({
-                  type:'error',
-                  message:res.message
-                })
-              }
-            })
-            .catch(() => {
-              this.loading = false
-            })
-        } else {
-          console.log('表单填写错误！请检查！')
-          return false
+        const validateCode = (rule, value, callback) => {
+            if (value.length < 4) {
+                callback(new Error('图形验证码不能低于4位！'))
+            } else {
+                callback()
+            }
         }
-      })
-    },
-    // 请求图形验证码
-    getImgCode() {
-      const that = this
-      this.$store.dispatch('user/getImgCode').then( res => {
-        if(res.code==200){
-          console.log(res)
-          //that.codeImg = res.data
-          that.codeImg = res.data.img;
-          that.loginForm.code = res.data.code;
-
-          console.log(that.loginForm)
-        }else{
-          this.$message.error("获取验证码失败，请稍后再试！")
+        // 本页基础数据
+        return {
+            loginForm: { // 1.用户使用哪些信息登录
+                username: '', // 15210211200
+                password: '', // 111111
+                type: 1, //1=账号密码登录
+                captcha: '',//验证码图片
+                code: ''//验证code
+            },
+            loginRules: { // 2.配置from表单验证规则
+                username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+                password: [{ required: true, trigger: 'blur', validator: validatePassword }],
+                captcha: [{ required: true, trigger: 'blur', validator: validateCode }]
+            },
+            passwordType: 'password', // 3.密码域默认type 当显示密码的时候改为text
+            capsTooltip: false,
+            loading: false,
+            showDialog: false,
+            redirect: undefined,
+            otherQuery: {},
+            // 图像验证码
+            captchaText: '', // 保存生成的验证码文本
+            captchaInput: '', // 用户输入的验证码
+            codeImg: '' // 图形验证码
         }
-
-      }).catch(() => {
-        this.loading = false
-      })
     },
-    getOtherQuery(query) {
-      return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== 'redirect') {
-          acc[cur] = query[cur]
+    watch: {
+        $route: {
+            handler: function (route) {
+                const query = route.query
+                if (query) {
+                    this.redirect = query.redirect
+                    this.otherQuery = this.getOtherQuery(query)
+                }
+            },
+            immediate: true
         }
-        return acc
-      }, {})
     },
-    // 单点登录 start ---------------------------------------->
-    // 使用字符串操作提取 backurl 参数的值
-    getBackUrl(url) {
-      const params = url.split('?')[1]; // 获取问号后面的部分
-      if (params) {
-        const paramArray = params.split('&'); // 分割参数
-        for (let param of paramArray) {
-          const [key, value] = param.split('='); // 分割键值对
-          if (key === 'backurl') {
-            return decodeURIComponent(value); // 返回解码后的 backurl 值
-          }
-        }
-      }
-      return null; // 如果没有找到 backurl 参数，返回 null
+    // created() {
+    //   let token = getToken();
+    //   //查询登录状态
+    //   this.$store.dispatch('user/logoutStatus', {"token":token}).then( res => {
+    //     if(res.code==200){
+    //       //token有效，不执行操作
+    //     }else{
+    //       //如果token过期，就清理掉token
+    //       removeToken()
+    //       console.log("token已过期!")
+    //       //this.$message.error(res.message)
+    //     }
+    //   }).catch(() => {
+    //     this.$message.error("查询登录状态失败，请重新登录！")
+    //   })
+    // },
+    mounted() {
+        this.getImgCode()
     },
-    //登录分路器 start ---------------------------------------->
-    singleLogin() {
-      //获得当前域名
-      const urlString = window.location.href;
-      // 创建一个URL对象
-      const url = new URL(urlString);
-      // 获取hash部分（即#后面的部分）
-      const hash = url.hash;
-      // 从hash中提取查询参数
-      const hashParams = new URLSearchParams(hash.split('?')[1]);
-      // 获取backurl参数的值
-      const backurl = hashParams.get('backurl');
-      // 获取backurl参数的值
-      const userurl = hashParams.get('userurl');
-      // 获取可能出现的内部值
-      const system = hashParams.get('redirect');
-
-      // 解码backurl
-      const decodedBackurl = decodeURIComponent(backurl);
-      const decodedUserurl = decodeURIComponent(userurl);
-      
-      // 第一种情况， 不含有backUrl或者userUrl 说明登录者是超级管理员
-      if(hashParams.size==0||system=='/dashboard'){
-        // 获取当前网址
-        const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
-        console.log("当前网址是：" + currentUrl);
-        console.log("执行超级管理员登录！")
-        this.login(1,currentUrl)
-      }else{
-        // 第二种情况，含有backurl 说明是单点登录
-        if(backurl!=null){
-          console.log("执行单点登录！")
-          const backurlObj = new URL(decodedBackurl);
-          const back_url = backurlObj.hostname;
-          this.login(2,back_url)
-
-        }else if(userurl!=null){
-          //第三种情况 含有userurl 说明是会员登录
-          console.log(user_url)
-          console.log("执行会员登录！")
-          const backurlObj = new URL(decodedUserurl);
-          const user_url = backurlObj.hostname;
-          if(user_url==""){
-            this.$message.error("登录链接错误！")
-          }else{
-            console.log("当前登录链接是：" + user_url)
-            this.login(3,user_url)
-          }
-        }else{
-          //this.$message.error("检查登录链接失败，请从正规渠道登录！")
-          //2025-3-21 不在验证其他可能的值，直接允许登录
-          const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
-          console.log("当前网址是：" + currentUrl);
-          console.log("执行超级管理员登录！")
-          this.login(1,currentUrl)
-
+    watch: {
+        $route: {
+            handler: function (route) {
+                const query = route.query
+                if (query) {
+                    this.redirect = query.redirect
+                    this.otherQuery = this.getOtherQuery(query)
+                }
+            },
+            immediate: true
         }
-      }
     },
-    // 登录分路器 end ---------------------------------------->
-    // 登录 start ---------------------------------------->
-    login(type,url){
-
-      console.log(BASEURL.WebCloginUrl)
-
-      //超级管理员登录
-      if(type==1){
-        if(url==null||url==undefined||url==''){
-          this.loginForm.userurl = "localhost"
-        }else{
-          // 获取当前页面的 URL
-          this.loginForm.userurl = url;
-        }
-        
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            this.loading = true
-            this.$store.dispatch('user/login', this.loginForm).then( res => {
-              this.loading = false
-              console.log(res)
-              if(res.code==0){
-                this.$message({
-                  type:'error',
-                  message:res.message
-                })
-              }else if(res.code==200&&res.token!=''){
-                this.sendUrlServ()
-                console.log("登录成功，将跳转至详情页面！")
-                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
-              }else if(res.code!=0&&res.code!=200){
-                this.$message({
-                  type:'error',
-                  message:res.message
-                })
-              }else if(res.token==''||res.token==null||res.token==undefined){
-                this.$message({
-                  type:'error',
-                  message:"登录失败！未能正确获取用户token，请重试！"
-                })
-              }
+    methods: {
+        // 检查输入状态
+        checkCapslock(e) {
+            const { key } = e
+            this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
+        },
+        // 切换密码框的显示与隐藏
+        showPwd() {
+            if (this.passwordType === 'password') {
+                this.passwordType = ''
+            } else {
+                this.passwordType = 'password'
+            }
+            this.$nextTick(() => {
+                this.$refs.password.focus()
             })
-          }else {
-            console.log('表单填写错误！请检查！')
-            return false;
-          }
-        })
-      }
-      //单点登录
-      if(type==2){
-        // 获取当前页面的 URL
-        this.loginForm.backurl = url;
-
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            this.loading = true
-            this.$store.dispatch('user/login', this.loginForm)
-              .then( res => {
-                this.loading = false
-                console.log(res)
-                if(res.code==0){
-                  this.$message({
-                    type:'error',
-                    message:res.message
-                  })
-                }else if(res.code==200&&res.token!=''){
-                  const currentUrl = window.location.href;
-                  const backurlValue = this.getBackUrl(currentUrl);
-                  console.log("单点登录成功，开始启动跳转！")
-                  console.log(backurlValue)
-                  console.log(res.data.token)
-                  this.sendUrlServ()
-
-                  //王鹏
-                  //window.location.href = 'http://admindev.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token=' + res.data.token; //dev返回链接
-                  //刘佳伟
-                  //window.location.href = BASEURL.webClogBackUrL + '?backurl=' + backurlValue + '&token=' + res.data.token; //pre返回地址
-                  //我
-                  window.location.href = backurlValue + '?backurl=' + backurlValue + '&admintoken=' + res.data.token; //pre返回地址
-
-                }else if(res.code!=0&&res.code!=200){
-                  this.$message({
-                    type:'error',
-                    message:res.message
-                  })
+        },
+        // 提交表单并跳转
+        handleLogin() {
+            this.$refs.loginForm.validate(valid => {
+                if (valid) {
+                    //console.log(this.loginForm)
+                    //开始登录
+                    this.loading = true
+                    this.$store.dispatch('user/login', this.loginForm)
+                        .then(res => {
+                            this.loading = false
+                            console.log(res)
+                            if (res.code == 0) {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.message
+                                })
+                            } else if (res.code == 200) {
+                                console.log("登录成功，将跳转至详情页面！")
+                                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+                            } else if (res.code != 0 && res.code != 200) {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.message
+                                })
+                            }
+                        })
+                        .catch(() => {
+                            this.loading = false
+                        })
+                } else {
+                    console.log('表单填写错误！请检查！')
+                    return false
+                }
+            })
+        },
+        // 请求图形验证码
+        getImgCode() {
+            const that = this
+            this.$store.dispatch('user/getImgCode').then(res => {
+                if (res.code == 200) {
+                    console.log(res)
+                    //that.codeImg = res.data
+                    that.codeImg = res.data.img;
+                    that.loginForm.code = res.data.code;
+
+                    console.log(that.loginForm)
+                } else {
+                    this.$message.error("获取验证码失败，请稍后再试！")
                 }
-              })
-              .catch(() => {
+
+            }).catch(() => {
                 this.loading = false
-              })
-          } else {
-            console.log('表单填写错误！请检查！')
-            return false
-          }
-        })
-
-      }
-      //会员登录
-      if(type==3){
-        this.loginForm.userurl = url;
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            this.loading = true;
-            this.$store.dispatch('user/login', this.loginForm).then( res => {
-              this.loading = false
-              console.log(res)
-              if(res.code==0||res.code==-1){
-                this.$message({
-                  type:'error',
-                  message:res.message
+            })
+        },
+        getOtherQuery(query) {
+            return Object.keys(query).reduce((acc, cur) => {
+                if (cur !== 'redirect') {
+                    acc[cur] = query[cur]
+                }
+                return acc
+            }, {})
+        },
+        // 单点登录 start ---------------------------------------->
+        // 使用字符串操作提取 backurl 参数的值
+        getBackUrl(url) {
+            const params = url.split('?')[1]; // 获取问号后面的部分
+            if (params) {
+                const paramArray = params.split('&'); // 分割参数
+                for (let param of paramArray) {
+                    const [key, value] = param.split('='); // 分割键值对
+                    if (key === 'backurl') {
+                        return decodeURIComponent(value); // 返回解码后的 backurl 值
+                    }
+                }
+            }
+            return null; // 如果没有找到 backurl 参数，返回 null
+        },
+        //登录分路器 start ---------------------------------------->
+        singleLogin() {
+            //获得当前域名
+            const urlString = window.location.href;
+            // 创建一个URL对象
+            const url = new URL(urlString);
+            // 获取hash部分（即#后面的部分）
+            const hash = url.hash;
+            // 从hash中提取查询参数
+            const hashParams = new URLSearchParams(hash.split('?')[1]);
+            // 获取backurl参数的值
+            const backurl = hashParams.get('backurl');
+            // 获取backurl参数的值
+            const userurl = hashParams.get('userurl');
+            // 获取可能出现的内部值
+            const system = hashParams.get('redirect');
+
+            // 解码backurl
+            const decodedBackurl = decodeURIComponent(backurl);
+            const decodedUserurl = decodeURIComponent(userurl);
+
+            // 第一种情况， 不含有backUrl或者userUrl 说明登录者是超级管理员
+            if (hashParams.size == 0 || system == '/dashboard') {
+                // 获取当前网址
+                const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
+                console.log("当前网址是：" + currentUrl);
+                console.log("执行超级管理员登录！")
+                this.login(1, currentUrl)
+            } else {
+                // 第二种情况，含有backurl 说明是单点登录
+                if (backurl != null) {
+                    console.log("执行单点登录！")
+                    const backurlObj = new URL(decodedBackurl);
+                    const back_url = backurlObj.hostname;
+                    this.login(2, back_url)
+
+                } else if (userurl != null) {
+                    //第三种情况 含有userurl 说明是会员登录
+                    console.log(user_url)
+                    console.log("执行会员登录！")
+                    const backurlObj = new URL(decodedUserurl);
+                    const user_url = backurlObj.hostname;
+                    if (user_url == "") {
+                        this.$message.error("登录链接错误！")
+                    } else {
+                        console.log("当前登录链接是：" + user_url)
+                        this.login(3, user_url)
+                    }
+                } else {
+                    //this.$message.error("检查登录链接失败，请从正规渠道登录！")
+                    //2025-3-21 不在验证其他可能的值，直接允许登录
+                    const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
+                    console.log("当前网址是：" + currentUrl);
+                    console.log("执行超级管理员登录！")
+                    this.login(1, currentUrl)
+
+                }
+            }
+        },
+        // 登录分路器 end ---------------------------------------->
+        // 登录 start ---------------------------------------->
+        login(type, url) {
+
+            console.log(BASEURL.WebCloginUrl)
+
+            //超级管理员登录
+            if (type == 1) {
+                if (url == null || url == undefined || url == '') {
+                    this.loginForm.userurl = "localhost"
+                } else {
+                    // 获取当前页面的 URL
+                    this.loginForm.userurl = url;
+                }
+
+                this.$refs.loginForm.validate(valid => {
+                    if (valid) {
+                        this.loading = true
+                        this.$store.dispatch('user/login', this.loginForm).then(res => {
+                            this.loading = false
+                            console.log(res)
+                            if (res.code == 0) {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.message
+                                })
+                            } else if (res.code == 200 && res.token != '') {
+                                this.sendUrlServ()
+                                console.log("登录成功，将跳转至详情页面！")
+                                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+                            } else if (res.code != 0 && res.code != 200) {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.message
+                                })
+                            } else if (res.token == '' || res.token == null || res.token == undefined) {
+                                this.$message({
+                                    type: 'error',
+                                    message: "登录失败！未能正确获取用户token，请重试！"
+                                })
+                            }
+                        })
+                    } else {
+                        console.log('表单填写错误！请检查！')
+                        return false;
+                    }
                 })
-              }else if(res.code==200&&res.token!=''){
-                this.sendUrlServ()
-                console.log("登录成功，将跳转至详情页面！")
-                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
-              }else if(res.code!=0&&res.code!=200){
-                this.$message({
-                  type:'error',
-                  message:res.message
+            }
+            //单点登录
+            if (type == 2) {
+                // 获取当前页面的 URL
+                this.loginForm.backurl = url;
+
+                this.$refs.loginForm.validate(valid => {
+                    if (valid) {
+                        this.loading = true
+                        this.$store.dispatch('user/login', this.loginForm)
+                            .then(res => {
+                                this.loading = false
+                                console.log(res)
+                                if (res.code == 0) {
+                                    this.$message({
+                                        type: 'error',
+                                        message: res.message
+                                    })
+                                } else if (res.code == 200 && res.token != '') {
+                                    const currentUrl = window.location.href;
+                                    const backurlValue = this.getBackUrl(currentUrl);
+                                    console.log("单点登录成功，开始启动跳转！")
+                                    console.log(backurlValue)
+                                    console.log(res.data.token)
+                                    this.sendUrlServ()
+
+                                    //王鹏
+                                    //window.location.href = 'http://admindev.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token=' + res.data.token; //dev返回链接
+                                    //刘佳伟
+                                    //window.location.href = BASEURL.webClogBackUrL + '?backurl=' + backurlValue + '&token=' + res.data.token; //pre返回地址
+                                    //我
+                                    window.location.href = backurlValue + '?backurl=' + backurlValue + '&admintoken=' + res.data.token; //pre返回地址
+
+                                } else if (res.code != 0 && res.code != 200) {
+                                    this.$message({
+                                        type: 'error',
+                                        message: res.message
+                                    })
+                                }
+                            })
+                            .catch(() => {
+                                this.loading = false
+                            })
+                    } else {
+                        console.log('表单填写错误！请检查！')
+                        return false
+                    }
                 })
-              }else if(res.token==''||res.token==null||res.token==undefined){
-                this.$message({
-                  type:'error',
-                  message:"登录失败！未能正确获取用户token，请重试！"
+
+            }
+            //会员登录
+            if (type == 3) {
+                this.loginForm.userurl = url;
+                this.$refs.loginForm.validate(valid => {
+                    if (valid) {
+                        this.loading = true;
+                        this.$store.dispatch('user/login', this.loginForm).then(res => {
+                            this.loading = false
+                            console.log(res)
+                            if (res.code == 0 || res.code == -1) {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.message
+                                })
+                            } else if (res.code == 200 && res.token != '') {
+                                this.sendUrlServ()
+                                console.log("登录成功，将跳转至详情页面！")
+                                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+                            } else if (res.code != 0 && res.code != 200) {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.message
+                                })
+                            } else if (res.token == '' || res.token == null || res.token == undefined) {
+                                this.$message({
+                                    type: 'error',
+                                    message: "登录失败！未能正确获取用户token，请重试！"
+                                })
+                            }
+
+                        })
+                    } else {
+                        console.log('表单填写错误！请检查！')
+                        return false;
+                    }
                 })
-              }
+            }
+        },
+        // 登录 end ---------------------------------------->
 
-            })
-          }else {
-            console.log('表单填写错误！请检查！')
-            return false;
-          }
-        })
-      }
-    },
-    // 登录 end ---------------------------------------->
-
-    // 返回原网站 start---------------------------------------->
-    goBackWebUrl(){
-      // 获得当前域名
-      const urlString = window.location.href;
-      // 创建一个URL对象
-      const url = new URL(urlString);
-      // 获取hash部分（即#后面的部分）
-      const hash = url.hash;
-      // 从hash中提取查询参数
-      const hashParams = new URLSearchParams(hash.split('?')[1]);
-      // 获取backurl参数的值
-      const backurl = hashParams.get('backurl');
-      // 解码backurl
-      const decodedBackurl = decodeURIComponent(backurl);
-
-      if(hashParams.size!=0&&backurl!=null){
-        window.location.href = decodedBackurl
-      }else{
-        this.$message.error("无法返回原网站，请检查登录地址链接！")
-      }
-    },
-    //登录成功通知后端 上面还有一个
-    sendUrlServ(){
-      //axios.get('http://admindev.bjzxtw.org.cn/auth/loginapi.php',{params: {
-      // axios.get(BASEURL.WebCloginUrl,{params: {
-      //     token: this.$store.state.user.token
-      // }}).then(res => {
-      //   console.log(res)
-      // }).catch(err => {
-      //   console.log(err)
-      // });
-
-      // 新做的，待替换
-      // this.$store.dispatch('user/loginapi', {
-      //   token: this.$store.state.user.token
-      // }).then(res => {
-      //   console.log("单点登录成功！")
-      // }).catch(err => {
-      //   console.log(err)
-      // })
+        // 返回原网站 start---------------------------------------->
+        goBackWebUrl() {
+            // 获得当前域名
+            const urlString = window.location.href;
+            // 创建一个URL对象
+            const url = new URL(urlString);
+            // 获取hash部分（即#后面的部分）
+            const hash = url.hash;
+            // 从hash中提取查询参数
+            const hashParams = new URLSearchParams(hash.split('?')[1]);
+            // 获取backurl参数的值
+            const backurl = hashParams.get('backurl');
+            // 解码backurl
+            const decodedBackurl = decodeURIComponent(backurl);
+
+            if (hashParams.size != 0 && backurl != null) {
+                window.location.href = decodedBackurl
+            } else {
+                this.$message.error("无法返回原网站，请检查登录地址链接！")
+            }
+        },
+        //登录成功通知后端 上面还有一个
+        sendUrlServ() {
+            //axios.get('http://admindev.bjzxtw.org.cn/auth/loginapi.php',{params: {
+            // axios.get(BASEURL.WebCloginUrl,{params: {
+            //     token: this.$store.state.user.token
+            // }}).then(res => {
+            //   console.log(res)
+            // }).catch(err => {
+            //   console.log(err)
+            // });
+
+            // 新做的，待替换
+            // this.$store.dispatch('user/loginapi', {
+            //   token: this.$store.state.user.token
+            // }).then(res => {
+            //   console.log("单点登录成功！")
+            // }).catch(err => {
+            //   console.log(err)
+            // })
+        },
+        // 返回原网站 end---------------------------------------->
+        closeWindow() {
+            this.$store.commit('user/SET_LOGIN_STATUS', 1)
+            setLoginStatus(1, 86400) 
+        }
     }
-    // 返回原网站 end---------------------------------------->
-  }
 }
 </script>
 
 <style scoped lang="less">
-  .singleLogin {
+.singleLogin {
     font-size: 18px;
     color: #666;
     cursor: pointer;
     margin-top: 30px;
     width: 400px;
     text-align: center;
-  }
-  /*整体盒子模型 使用display flex布局保持中间主体始终居中*/
-  .appBox{
+}
+
+/*整体盒子模型 使用display flex布局保持中间主体始终居中*/
+.appBox {
     clear: both;
     width: 100%;
     height: 100%;
-    display:flex;
+    display: flex;
     align-items: center;
+
     /*中央盒子模型 在1920x1080下将会保持恒定的显示效果 低于这个分辨率左侧将会自动收缩*/
     .mainBox {
-      width: 100%;
-      max-width: 1920px;
-      display:flex;
-      justify-content: center;
-      margin: 0 auto;
-      .leftBox{
-        width: 55%; //左侧自动收缩 最低1057 最高1920 1057/1920=55%
-        max-width: 1057px;
-        margin-right: 50px;
-        max-height:585px;
-        height: 100vh;//自适应全屏高度
-        position: relative;
-      }
-      .rightBox{
-        max-width: 400px;
-        height:360px;
-        position: relative;
-      }
+        width: 100%;
+        max-width: 1920px;
+        display: flex;
+        justify-content: center;
+        margin: 0 auto;
+
+        .leftBox {
+            width: 55%; //左侧自动收缩 最低1057 最高1920 1057/1920=55%
+            max-width: 1057px;
+            margin-right: 50px;
+            max-height: 585px;
+            height: 100vh; //自适应全屏高度
+            position: relative;
+        }
+
+        .rightBox {
+            max-width: 400px;
+            height: 360px;
+            position: relative;
+        }
     }
 
     /*中央左侧main内容*/
 
     /*1.标题文字 start*/
     .titleBox {
-      width: 516px;
-      height: 280px;
-      position: absolute;
-      z-index:9999;
-      top:5%;
-      left:2%;
-      .titleEnglish{
-        left: 0px;
-        top: 238px;
+        width: 516px;
+        height: 280px;
         position: absolute;
-        color: #333333;
-        font-size: 32px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        word-wrap: break-word
-      }
-      .titleChinaeseBox{
-        left: 0px;
-        top: 0px;
-        position: absolute;
-        .titleChinasesTop{
-          color: #5570F1;
-          font-size: 86px;
-          font-family: Microsoft YaHei;
-          font-weight: 700;
-          word-wrap: break-word
+        z-index: 9999;
+        top: 5%;
+        left: 2%;
+
+        .titleEnglish {
+            left: 0px;
+            top: 238px;
+            position: absolute;
+            color: #333333;
+            font-size: 32px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            word-wrap: break-word
         }
-        .titleChinasesBottom{
-          color: #333333;
-          font-size: 86px;
-          font-family: Microsoft YaHei;
-          font-weight: 700;
-          word-wrap: break-word
+
+        .titleChinaeseBox {
+            left: 0px;
+            top: 0px;
+            position: absolute;
+
+            .titleChinasesTop {
+                color: #5570F1;
+                font-size: 86px;
+                font-family: Microsoft YaHei;
+                font-weight: 700;
+                word-wrap: break-word
+            }
+
+            .titleChinasesBottom {
+                color: #333333;
+                font-size: 86px;
+                font-family: Microsoft YaHei;
+                font-weight: 700;
+                word-wrap: break-word
+            }
         }
-      }
     }
+
     /*标题文字 end*/
 
     /*2.背景颜色 start*/
-    .yellow,.blue {
-      width: 226px;
-      height: 226px;
-      position: absolute;
+    .yellow,
+    .blue {
+        width: 226px;
+        height: 226px;
+        position: absolute;
     }
-    .yellow{
-      z-index:1000;
-      opacity: 0.45;
-      top:0;
-      left:0;
-      background: #DDA82A;
-      border-radius: 50%;
-      filter: blur(120px)
+
+    .yellow {
+        z-index: 1000;
+        opacity: 0.45;
+        top: 0;
+        left: 0;
+        background: #DDA82A;
+        border-radius: 50%;
+        filter: blur(120px)
     }
-    .blue{
-      z-index:1001;
-      bottom:15%;
-      left:20%;
-      background: #4461F2;
-      border-radius: 50%;
-      filter: blur(150px)
+
+    .blue {
+        z-index: 1001;
+        bottom: 15%;
+        left: 20%;
+        background: #4461F2;
+        border-radius: 50%;
+        filter: blur(150px)
     }
+
     /*背景颜色 end*/
 
     /*3.背景图 start*/
     .TitleImg {
-      display:block;
-      position: absolute;
-      z-index:1100;
-      right:0;
-      bottom:0;
-      @media (max-width: 1366px) and (max-height: 768px) {
-        transform: scale(0.7); //稍微缩小
-      }
+        display: block;
+        position: absolute;
+        z-index: 1100;
+        right: 0;
+        bottom: 0;
+
+        @media (max-width: 1366px) and (max-height: 768px) {
+            transform: scale(0.7); //稍微缩小
+        }
     }
+
     /*背景图 end*/
 
     /*中央右侧main内容*/
     /*登录框 start*/
     .loginFormBox {
-      margin-top:15%;
-      .inputBox {
-        margin-bottom: 30px;
-        .inputIcon {
-          width: 24px;
-          height: 24px;
-          margin: 0 20px 0 20px;
+        margin-top: 15%;
+
+        .inputBox {
+            margin-bottom: 30px;
+
+            .inputIcon {
+                width: 24px;
+                height: 24px;
+                margin: 0 20px 0 20px;
+            }
+
+            .inputIconSmall {
+                width: 18px;
+                height: 18px;
+            }
         }
-        .inputIconSmall {
-          width: 18px;
-          height: 18px;
+
+        .inputBoxSpecial {
+            justify-content: space-between;
+            margin-bottom: 80px;
         }
-      }
-      .inputBoxSpecial {
-        justify-content: space-between;
-        margin-bottom: 80px;
-      }
-      .inputBox,.inputBoxSpecial{
-        height: 52px;
-        width: 400px;
-        box-sizing: border-box;
-        align-items: center;
-        display:flex;
-        input {
-          border:0;
-          background: transparent;
-          font-size: 18x;
+
+        .inputBox,
+        .inputBoxSpecial {
+            height: 52px;
+            width: 400px;
+            box-sizing: border-box;
+            align-items: center;
+            display: flex;
+
+            input {
+                border: 0;
+                background: transparent;
+                font-size: 18x;
+            }
+
+            input:focus {
+                outline: none;
+            }
+        }
+
+        .greyBg {
+            background: rgba(239, 241, 249, 0.60);
+            border-radius: 8px;
         }
-        input:focus {
-          outline: none;
+
+        .inputBoxLeft {
+            width: 250px;
+            height: 52px;
+            box-sizing: border-box;
+            align-items: center;
+            display: flex;
+
+            input {
+                width: 150px;
+                font-size: 16px;
+            }
+
+            .inputIcon {
+                width: 24px;
+                height: 24px;
+                margin: 0 20px 0 20px;
+            }
         }
-      }
-      .greyBg {
-        background: rgba(239, 241, 249, 0.60);
-        border-radius: 8px;
-      }
-      .inputBoxLeft {
-        width:250px;
-        height: 52px;
-        box-sizing: border-box;
-        align-items: center;
-        display:flex;
-        input {
-          width: 150px;
-          font-size: 16px;
+
+        .inputBoxRight {
+            width: 140px;
+            height: 52px;
+            position: relative;
+
+            .submitCode {
+                height: 52px;
+                box-sizing: border-box;
+                padding-top: 5px;
+                padding-left: 10px;
+                cursor: pointer;
+
+                .codeImg {
+                    display: block;
+                    width: 120px;
+                    height: 42px;
+                }
+            }
         }
-        .inputIcon {
-          width: 24px;
-          height: 24px;
-          margin: 0 20px 0 20px;
+
+        .reloadBtn {
+            color: #5570F1;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            word-wrap: break-word;
+            position: absolute;
+            bottom: -20px;
+            right: 0;
+            cursor: pointer
         }
-      }
-      .inputBoxRight {
-        width:140px;
-        height: 52px;
-        position: relative;
-        .submitCode {
-          height: 52px;
-          box-sizing: border-box;
-          padding-top: 5px;
-          padding-left: 10px;
-          cursor:pointer;
-          .codeImg{
-            display: block;
-            width: 120px;
-            height: 42px;
-          }
+
+        .loginBtn {
+            width: 400px;
+            height: 58px;
+            background: #5570F1;
+            box-shadow: 0px 4px 19px rgba(85, 112, 241, 0.40);
+            border-radius: 12px;
+            font-size: 24px;
+            color: #fff;
+            border: 0;
         }
-      }
-      .reloadBtn {
-        color: #5570F1;
-        font-size: 12px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        word-wrap: break-word;
-        position: absolute;
-        bottom: -20px;
-        right: 0;
-        cursor:pointer
-      }
-      .loginBtn {
-        width: 400px;
-        height: 58px;
-        background: #5570F1;
-        box-shadow: 0px 4px 19px rgba(85, 112, 241, 0.40);
-        border-radius: 12px;
-        font-size:24px;
-        color:#fff;
-        border:0;
-      }
 
 
     }
-  }
+}
 
-  /*验证码*/
-  .captcha-img {
+/*验证码*/
+.captcha-img {
     cursor: pointer;
     width: 120px;
-    height: 40px; /* 调整验证码图片大小 */
-  }
-  .show-pwd{
+    height: 40px;
+    /* 调整验证码图片大小 */
+}
+
+.show-pwd {
     margin-left: 30px;
-  }
-  /*登录框 end*/
+}
 
-  /*此处修改了element-ui中的部分内置样式，但是通过css-scope可以保证不会污染到全局*/
-  /*在index中使用deep或者>>>深度选择器来修改el-input的默认样式*/
+/*登录框 end*/
 
-  /deep/ .el-input__inner {
+/*此处修改了element-ui中的部分内置样式，但是通过css-scope可以保证不会污染到全局*/
+/*在index中使用deep或者>>>深度选择器来修改el-input的默认样式*/
+
+/deep/ .el-input__inner {
     background: transparent;
-    width:100%;
+    width: 100%;
     border: 0;
     //border:0
-  }
-  /deep/ .el-form-item {
+}
+
+/deep/ .el-form-item {
     margin-bottom: 0;
-  }
-  /deep/ .el-form-item__content {
+}
+
+/deep/ .el-form-item__content {
     display: flex;
     width: 300px;
-  }
-  /deep/ .el-form-item__error {
+}
+
+/deep/ .el-form-item__error {
     bottom: -34px;
-    left:15px;
+    left: 15px;
     line-height: 30px;
-  }
+}
+
+
+/*用户登录权限检测*/
+.loginStatusBox {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    .loginStatus {
+        width: 600px;
+        height: 670px;
+        background: #fff;
+        border-radius: 12px;
+        box-sizing: border-box;
+        padding-top: 32px;
+        margin: 0 auto;
+        margin-top: 100px;
+        .loginStatusTip {
+            border-left: 3px solid #5570F1;
+            padding-left: 22px;
+            color: #333;
+            margin-bottom: 125px;
+        }
+        .loginStatusImgBox {
+            text-align: center;
+            margin-bottom: 40px;
+            img {
+                width: 140px;
+                height: 140px;
+            }
+        }
+        .loginStatusTitle {
+            font-size: 20px;
+            color: #333;
+            margin-bottom: 12px;
+            text-align: center;
+        }
+        .loginStatusText {
+            font-size: 14px;
+            color:#8B8D97;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .loginStatusBtnBox {
+            text-align: center;
+            button {
+                width: 180px;
+                height: 44px;
+            }
+        }
+    }
+    
+}
 </style>