登录界面，设置字体

src/assets/fonts/font.css

@@ -0,0 +1,18 @@
+  @font-face {
+    font-family: "Inter-Bold";
+    src: url('Inter-Bold-4.otf');
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Inter-Regular";
+    src: url('Inter-Regular-9.otf');
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Inter-SemiBold";
+    src: url('Inter-SemiBold-10.otf');
+    font-weight: normal;
+    font-style: normal;
+  }

src/assets/styles/index.scss

@@ -12,7 +12,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Inter-Regular;
 }
 
 label {

src/main.js

@@ -16,6 +16,8 @@ import directive from './directive' // directive
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
 
+//引入字体
+import '@/assets/fonts/font.css'
 // svg图标
 import 'virtual:svg-icons-register'
 import SvgIcon from '@/components/SvgIcon'

src/views/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+    <!-- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
       <h3 class="title">若依后台管理系统</h3>
       <el-form-item prop="username">
         <el-input
@@ -56,10 +56,65 @@
           <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
       </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
+    </el-form> -->
+    <div class="img_box"></div>
+    <!-- 右侧登录盒子 -->
+    <div class="login_box">
+      <el-form
+        ref="loginRef"
+        :model="loginForm"
+        :rules="loginRules"
+        class="center_box"
+      >
+        <span class="title">Sign up to Domino’s</span>
+        <el-form-item prop="username">
+          <span class="ipt_title">用户名</span>
+          <el-input
+            v-model="loginForm.username"
+            type="text"
+            size="large"
+            auto-complete="off"
+            placeholder="请输入用户名"
+          >
+          </el-input>
+        </el-form-item>
+        <!-- <el-form-item prop="username">
+          <span class="ipt_title">真实姓名</span>
+          <el-input
+            v-model="loginForm.username"
+            type="text"
+            size="large"
+            auto-complete="off"
+            placeholder="请输入真实姓名"
+          >
+          </el-input>
+        </el-form-item> -->
+        <el-form-item prop="password">
+          <span class="ipt_title">密码</span>
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            size="large"
+            auto-complete="off"
+            placeholder="请输入密码"
+            @keyup.enter="handleLogin"
+          >
+          </el-input>
+        </el-form-item>
+        <el-checkbox v-model="loginForm.rememberMe" class="re_checkout">记住密码</el-checkbox>
+      <el-form-item style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="large"
+          type="primary"
+          class="login_btn"
+          @click.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+      </el-form-item>
+      </el-form>
     </div>
   </div>
 </template>
@@ -68,9 +123,9 @@
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
-import useUserStore from '@/store/modules/user'
+import useUserStore from "@/store/modules/user";
 
-const userStore = useUserStore()
+const userStore = useUserStore();
 const route = useRoute();
 const router = useRouter();
 const { proxy } = getCurrentInstance();
@@ -80,35 +135,41 @@ const loginForm = ref({
   password: "admin123",
   rememberMe: false,
   code: "",
-  uuid: ""
+  uuid: "",
 });
 
 const loginRules = {
   username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
   password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
-  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }],
 };
 
 const codeUrl = ref("");
 const loading = ref(false);
 // 验证码开关
-const captchaEnabled = ref(true);
+const captchaEnabled = ref(false);
 // 注册开关
 const register = ref(false);
 const redirect = ref(undefined);
 
-watch(route, (newRoute) => {
+watch(
+  route,
+  (newRoute) => {
     redirect.value = newRoute.query && newRoute.query.redirect;
-}, { immediate: true });
+  },
+  { immediate: true }
+);
 
 function handleLogin() {
-  proxy.$refs.loginRef.validate(valid => {
+  proxy.$refs.loginRef.validate((valid) => {
     if (valid) {
       loading.value = true;
       // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
       if (loginForm.value.rememberMe) {
         Cookies.set("username", loginForm.value.username, { expires: 30 });
-        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
+        Cookies.set("password", encrypt(loginForm.value.password), {
+          expires: 30,
+        });
         Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
       } else {
         // 否则移除
@@ -117,22 +178,26 @@ function handleLogin() {
         Cookies.remove("rememberMe");
       }
       // 调用action的登录方法
-      userStore.login(loginForm.value).then(() => {
-        router.push({ path: redirect.value || "/" });
-      }).catch(() => {
-        loading.value = false;
-        // 重新获取验证码
-        if (captchaEnabled.value) {
-          getCode();
-        }
-      });
+      userStore
+        .login(loginForm.value)
+        .then(() => {
+          router.push({ path: redirect.value || "/" });
+        })
+        .catch(() => {
+          loading.value = false;
+          // 重新获取验证码
+          if (captchaEnabled.value) {
+            getCode();
+          }
+        });
     }
   });
 }
 
 function getCode() {
-  getCodeImg().then(res => {
-    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+  getCodeImg().then((res) => {
+    captchaEnabled.value =
+      res.captchaEnabled === undefined ? true : res.captchaEnabled;
     if (captchaEnabled.value) {
       codeUrl.value = "data:image/gif;base64," + res.img;
       loginForm.value.uuid = res.uuid;
@@ -146,8 +211,9 @@ function getCookie() {
   const rememberMe = Cookies.get("rememberMe");
   loginForm.value = {
     username: username === undefined ? loginForm.value.username : username,
-    password: password === undefined ? loginForm.value.password : decrypt(password),
-    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+    password:
+      password === undefined ? loginForm.value.password : decrypt(password),
+    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
   };
 }
 
@@ -158,63 +224,69 @@ getCookie();
 <style lang='scss' scoped>
 .login {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  // justify-content: center;
+  // align-items: center;
+  width: 100%;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
 }
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+.img_box {
+  height: 100%;
+  width: 640px;
+  background-image: url("../assets/images/Rectangle 229.png");
+  background-repeat: no-repeat;
+  background-size: contain;
 }
-
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  .el-input {
-    height: 40px;
-    input {
+.login_box {
+  .center_box {
+    width: 400px;
+    // height: 400px;
+    margin-top: 180px;
+    margin-left: 200px;
+    // background-color: #ccc;
+    .title {
+      // color: #081f4c;
+      display: inline-block;
+      font-size: 24px;
+      font-weight: bold;
+      line-height: 32px;
+      font-family: Inter-Bold;
+      margin-bottom: 40px;
+    }
+    .ipt_title {
+      color: #081f4c;
+      display: inline-block;
+      margin-bottom: 4px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: bold;
+      font-family: Inter-SemiBold;
+    }
+    .re_checkout{
+      color: #505870;
+      font-size: 14px;
+      margin:0px 0px 16px 0px;
+    }
+    .login_btn{
+      width: 186px;
       height: 40px;
+      background-color: #2E6BC8;
+      border-radius: 4px;
     }
   }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 0px;
-  }
 }
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
+// 输入框样式
+::v-deep .el-input__wrapper {
+  background-color: #f5f6f7 !important;
+  border-radius: 4px;
+  box-shadow: inset 0px 2px 4px 0px rgba(188, 188, 188, 0.2);
 }
-.login-code {
-  width: 33%;
-  height: 40px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
+::v-deep .el-checkbox__inner{
+  border-color: #2E6BC8;
 }
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
+::v-deep .is-checked .el-checkbox__inner{
+background-color: #2E6BC8;
 }
-.login-code-img {
-  height: 40px;
-  padding-left: 12px;
+::v-deep .is-checked .el-checkbox__label{
+color: #505870;
 }
 </style>

vite.config.js

@@ -31,7 +31,7 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          target: 'http://localhost:8080',
+          target: 'http://192.168.1.28:8080/',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }