🎨优化ui

src/assets/styles/login.scss

@@ -1,4 +1,4 @@
-.login {
+.login-wrap {
   background: radial-gradient(220% 105% at top center, #1b2947 10%, #4b76a7 40%, #81acae 65%, #f7f7b6);
   background-attachment: fixed;
   overflow: hidden;
@@ -8,6 +8,14 @@
   height: 100%;
   // background-image: url('@/assets/images/login-bg.jpg');
   background-size: cover;
+  flex-direction: column;
+
+  .login {
+    margin: 0 auto;
+    background: #ffffff;
+    border-radius: 6px;
+    width: var(--base-login-width);
+  }
 }
 
 .title {
@@ -17,13 +25,9 @@
 }
 
 .login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  // background-color: hsla(0, 0%, 100%, 0.3);
-  width: var(--base-login-width);
-  height: 300px;
   padding: 35px 15px 5px 15px;
   position: relative;
+  height: 300px;
 
   .input-icon {
     height: 39px;

src/assets/styles/variables.module.scss

@@ -19,7 +19,7 @@ $panGreen: #30b08f;
   --base-tags-height: 34px;
   --base-header-height: 50px;
   //登录框宽度
-  --base-login-width: 280px;
+  --base-login-width: 320px;
 }
 
 /***侧边栏深色配置***/

src/utils/signalR.js

@@ -80,7 +80,7 @@ export default {
     connection.on('welcome', (data) => {
       ElNotification.info(data)
     })
-    connection.on('getConnId', (data) => {
+    connection.on('connId', (data) => {
       // useUserStore().saveConnId(data)
     })
     // 接收后台手动推送消息

src/views/login.vue

@@ -1,73 +1,74 @@
 <template>
   <starBackground></starBackground>
-  <div class="login">
+  <div class="login-wrap">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" v-if="!showQrLogin">
+    <div class="login">
-      <h3 class="title">{{ defaultSettings.title }}</h3>
+      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" v-if="!showQrLogin">
+        <h3 class="title">{{ defaultSettings.title }}</h3>
 
-      <div class="scan-wrap" @click="handleShowQrLogin()">
+        <div class="scan-wrap" @click="handleShowQrLogin()">
-        <svg-icon name="qr" class="icon" />
+          <svg-icon name="qr" class="icon" />
-        <div class="scan-delta"></div>
+          <div class="scan-delta"></div>
-      </div>
-      <LangSelect title="多语言设置" class="langSet" />
-      <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.account')">
-          <template #prefix>
-            <svg-icon name="user" class="input-icon" />
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('login.password')" @keyup.enter="handleLogin">
-          <template #prefix>
-            <svg-icon name="password" class="input-icon" />
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaOnOff != 'off'">
-        <el-input v-model="loginForm.code" auto-complete="off" :placeholder="$t('login.captcha')" style="width: 63%" @keyup.enter="handleLogin">
-          <template #prefix>
-            <svg-icon name="validCode" class="input-icon" />
-          </template>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
-      </el-form-item>
+        <LangSelect title="多语言设置" class="langSet" />
+        <el-form-item prop="username">
+          <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.account')">
+            <template #prefix>
+              <svg-icon name="user" class="input-icon" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('login.password')" @keyup.enter="handleLogin">
+            <template #prefix>
+              <svg-icon name="password" class="input-icon" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code" v-if="captchaOnOff != 'off'">
+          <el-input v-model="loginForm.code" auto-complete="off" :placeholder="$t('login.captcha')" style="width: 63%" @keyup.enter="handleLogin">
+            <template #prefix>
+              <svg-icon name="validCode" class="input-icon" />
+            </template>
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+          </div>
+        </el-form-item>
 
-      <div style="display: flex; justify-content: space-between">
+        <div style="display: flex; justify-content: space-between">
-        <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
+          <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
-        <span style="font-size: 12px">
+          <span style="font-size: 12px">
-          <span @click="handleForgetPwd()" class="forget-pwd">忘记密码</span>
+            <span @click="handleForgetPwd()" class="forget-pwd">忘记密码</span>
-          <router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
+            <router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
-        </span>
+          </span>
+        </div>
+
+        <el-form-item style="width: 100%">
+          <el-button :loading="loading" size="default" type="primary" style="width: 100%" @click.prevent="handleLogin">
+            <span v-if="!loading">{{ $t('login.btnLogin') }}</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="qr-wrap login-form" v-else>
+        <h3 class="title">移动端扫码登录</h3>
+        <div class="scan-wrap" @click="handleShowQrLogin()">
+          <svg-icon name="pc" class="icon" />
+          <div class="scan-delta"></div>
+        </div>
+
+        <div class="login-scan-container">
+          <div ref="imgContainerRef" id="imgContainer"></div>
+        </div>
       </div>
 
-      <el-form-item style="width: 100%">
-        <el-button :loading="loading" size="default" type="primary" style="width: 100%" @click.prevent="handleLogin">
-          <span v-if="!loading">{{ $t('login.btnLogin') }}</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-      </el-form-item>
       <div class="other-login" v-if="defaultSettings.showOtherLogin">
         <el-divider>{{ $t('login.otherLoginWay') }}</el-divider>
 
         <span @click="onAuth('GITHUB')" title="github"><svg-icon name="github" className="login-icon"></svg-icon></span>
         <span @click="onAuth('GITEE')" title="gitee"><svg-icon name="gitee" className="login-icon"></svg-icon></span>
       </div>
-    </el-form>
-
-    <div class="qr-wrap login-form" v-else>
-      <h3 class="title">移动端扫码登录</h3>
-      <div class="scan-wrap" @click="handleShowQrLogin()">
-        <svg-icon name="pc" class="icon" />
-        <div class="scan-delta"></div>
-      </div>
-
-      <div class="login-scan-container">
-        <div ref="imgContainerRef" id="imgContainer"></div>
-      </div>
     </div>
-
     <!--  底部  -->
     <div class="el-login-footer">
       <div v-html="defaultSettings.copyright"></div>
@@ -222,7 +223,7 @@ function generateCode() {
     }
   })
   interval.value = setInterval(() => {
-    verifyScan({ uuid: uuid })
+    verifyScan({ uuid: uuid, deviceId: visitorId })
       .then((res) => {
         const { code, data } = res
         if (data.status == -1) {