按UI图设计登录页

.env.development

@@ -1,8 +1,8 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 媒介管理系统
 
 # 开发环境配置
 VITE_APP_ENV = 'development'
 
-# 若依管理系统/开发环境
+# 媒介管理系统/开发环境
 VITE_APP_BASE_API = '/dev-api'

.env.production

@@ -1,10 +1,10 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 媒介管理系统
 
 # 生产环境配置
 VITE_APP_ENV = 'production'
 
-# 若依管理系统/生产环境
+# 媒介管理系统/生产环境
 VITE_APP_BASE_API = '/prod-api'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli

.env.staging

@@ -1,10 +1,10 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 媒介管理系统
 
 # 生产环境配置
 VITE_APP_ENV = 'staging'
 
-# 若依管理系统/生产环境
+# 媒介管理系统/生产环境
 VITE_APP_BASE_API = '/stage-api'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli

index.html

@@ -7,7 +7,7 @@
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="/favicon.ico">
-  <title>若依管理系统</title>
+  <title>媒介管理系统</title>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ruoyi",
   "version": "3.9.0",
-  "description": "若依管理系统",
+  "description": "媒介管理系统",
   "author": "若依",
   "license": "MIT",
   "type": "module",

src/views/index.vue

@@ -4,7 +4,7 @@
       <el-col :sm="24" :lg="12" style="padding-left: 20px">
         <h2>若依后台管理框架</h2>
         <p>
-          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
+          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了媒介管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
         </p>
         <p>
           <b>当前版本:</b> <span>v{{ version }}</span>

src/views/login.vue

@@ -1,65 +1,58 @@
 <template>
-  <div class="login">
+  <div class="login-container">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+    <div class="loginRoot">
-      <h3 class="title">{{ title }}</h3>
+      <div class="login">
-      <el-form-item prop="username">
+        <div class="leftLogo">
-        <el-input
+          <div class="left-logo-container">
-          v-model="loginForm.username"
+            <img :src="systemLogo" />
-          type="text"
+            <div class="shortBar"></div>
-          size="large"
+            <div class="welcome-message">Welcome to log in and use this system platform</div>
-          auto-complete="off"
+            <div class="welcome-label">欢迎登录</div>
-          placeholder="账号"
+          </div>
-        >
-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          size="large"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          size="large"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
         </div>
-      </el-form-item>
+        <div class="rightForm">
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+          <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <el-form-item style="width:100%;">
+            <div class="title-container">
-        <el-button
+              <div class="tite-square"></div>
-          :loading="loading"
+              <div class="title-label">{{ title }}</div>
-          size="large"
+            </div>
-          type="primary"
+            <el-form-item prop="username">
-          style="width:100%;"
+              <el-input v-model="loginForm.username" type="text" size="large" class="custom-input" auto-complete="off"
-          @click.prevent="handleLogin"
+                placeholder="账号">
-        >
+              </el-input>
-          <span v-if="!loading">登 录</span>
+            </el-form-item>
-          <span v-else>登 录 中...</span>
+            <el-form-item prop="password">
-        </el-button>
+              <el-input v-model="loginForm.password" type="password" show-password size="large" class="custom-input"
-        <div style="float: right;" v-if="register">
+                auto-complete="off" placeholder="密码" @keyup.enter="handleLogin">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="code" v-if="captchaEnabled">
+              <el-input v-model="loginForm.code" size="large" class="custom-input captcha-input" auto-complete="off"
+                placeholder="验证码" @keyup.enter="handleLogin">
+              </el-input>
+              <div class="login-code">
+                <img :src="codeUrl" @click="getCode" class="login-code-img" />
+              </div>
+            </el-form-item>
+            <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
+            <el-form-item style="width:100%;">
+              <el-button :loading="loading" size="large" type="primary" class="myLoginBtn" style="width:100%;"
+                @click.prevent="handleLogin">
+                <span v-if="!loading">登 录</span>
+                <span v-else>登 录 中...</span>
+              </el-button>
+              <div style="float: right;" v-if="register">
+                <router-link class="link-type" :to="'/register'">立即注册</router-link>
+              </div>
+            </el-form-item>
+          </el-form>
         </div>
-      </el-form-item>
+      </div>
-    </el-form>
+
-    <!--  底部  -->
+      <!--  底部  -->
-    <div class="el-login-footer">
+      <!-- <div class="el-login-footer">
-      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+        <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+      </div> -->
     </div>
   </div>
 </template>
@@ -69,6 +62,7 @@ import { getCodeImg } from "@/api/login"
 import Cookies from "js-cookie"
 import { encrypt, decrypt } from "@/utils/jsencrypt"
 import useUserStore from '@/store/modules/user'
+import systemLogo from '@/assets/images/systemLogo.png'
 
 const title = import.meta.env.VITE_APP_TITLE
 const userStore = useUserStore()
@@ -99,7 +93,7 @@ const register = ref(false)
 const redirect = ref(undefined)
 
 watch(route, (newRoute) => {
-    redirect.value = newRoute.query && newRoute.query.redirect
+  redirect.value = newRoute.query && newRoute.query.redirect
 }, { immediate: true })
 
 function handleLogin() {
@@ -164,52 +158,235 @@ getCookie()
 </script>
 
 <style lang='scss' scoped>
+.login-container {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("../assets/images/login-background.png");
+  background-size: cover;
+}
+
+.loginRoot {
+  position: absolute;
+  top: calc(50% - 290px);
+  left: calc(50% - 500px);
+  z-index: 2;
+}
+
 .login {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  width: 1000px;
-  background-image: url("../assets/images/login-background.jpg");
+  height: 580px;
-  background-size: cover;
+  border-radius: 6px;
 }
-.title {
+
-  margin: 0px auto 30px auto;
+.leftLogo {
+  width: 500px;
+  height: 580px;
+  display: flex;
+  /* 垂直居中 */
+  align-items: center;
+  /* 水平居中（可选） */
+  justify-content: center;
+  background-image: url("../assets/images/login-leftBg.png");
+  background-size: cover;
+
+
+  .left-logo-container {
+    width: 302px;
+    height: 154px;
+    margin: 0 auto;
+  }
+
+  .shortBar {
+    width: 40px;
+    height: 6px;
+    border-radius: 3px 3px 3px 3px;
+    background: #ffffff;
+    margin: 10px auto 24px auto;
+  }
+
+  .welcome-message {
+    margin: 0 auto;
+    font-family: Arial;
+    font-weight: 400;
+    width: 203px;
+    height: 29px;
+    font-size: 14px;
+    text-align: center;
+    color: #FFFFFF;
+  }
+
+  .welcome-label {
+    padding-top: 12px;
+    margin: 0 auto;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    width: 66px;
+    height: 14px;
+    font-size: 14px;
+    text-align: center;
+    color: #FFFFFF;
+    letter-spacing: 1px;
+  }
+}
+
+.rightForm {
+  width: 500px;
+  height: 580px;
+  display: flex;
+  /* 垂直居中 */
+  align-items: center;
+  background: #ffffff;
+}
+
+.tite-square {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  background: #ffc63d;
+  margin: 0px 20px 4px 0;
+  display: inline-flex;
+}
+
+.title-label {
+  font-family: Alibaba PuHuiTi;
+  font-weight: 500;
+  width: 217px;
+  height: 32px;
+  font-size: 32px;
   text-align: center;
-  color: #707070;
+  color: #1A75E6;
+  letter-spacing: 2px;
+  display: inline-flex;
+}
+
+.title-container {
+  margin: 0px auto 70px auto;
+  text-align: center;
+}
+
+:deep(.el-form-item--default) {
+  margin-bottom: 20px;
+}
+
+:deep(.el-form-item__error) {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: 1px;
+}
+
+:deep(.el-input .el-input__password) {
+  font-size: 18px;
+}
+
+// 输入框样式
+.custom-input {
+  width: 310px;
+  height: 50px;
+  border-left: 5px solid #1A75E6;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 18px;
+  text-align: center;
+  color: #DCDCDC;
+  letter-spacing: 1px;
+
+  /* Vue 3 方式 */
+  :deep(.el-input__wrapper.is-focus) {
+    box-shadow: 0 0 0 1px #A6C9FF inset;
+    background: #ffffff;
+    font-family: Arial;
+    font-weight: 400;
+    font-size: 18px;
+    color: #000000;
+    letter-spacing: 1px;
+  }
+
+  :deep(.el-input__wrapper:hover) {
+    box-shadow: 0 0 0 1px #A6C9FF inset;
+    background: #ffffff;
+    font-family: Arial;
+    font-weight: 400;
+    font-size: 18px;
+    color: #000000;
+    letter-spacing: 1px;
+  }
+
+  :deep(.el-input__wrapper) {
+    background: #f7f7f7;
+    border-radius: 0px;
+  }
+}
+
+.captcha-input {
+  :deep(.el-input__inner) {
+    position: absolute;
+    left: 15px;
+    width: 170px;
+  }
 }
 
 .login-form {
-  border-radius: 6px;
+  width: 310px;
-  background: #ffffff;
+  height: 416px;
-  width: 400px;
+  margin: 0 auto;
-  padding: 25px 25px 5px 25px;
   z-index: 1;
+
   .el-input {
-    height: 40px;
+    height: 50px;
+    --el-input-border-color: transparent;
+
     input {
-      height: 40px;
+      height: 50px;
     }
   }
+
   .input-icon {
     height: 39px;
-    width: 14px;
+    width: 18px;
     margin-left: 0px;
   }
 }
+
 .login-tip {
   font-size: 13px;
   text-align: center;
   color: #bfbfbf;
 }
+
 .login-code {
   width: 33%;
   height: 40px;
-  float: right;
+  position: absolute;
+  right: 22px;
+  z-index: 2;
+
   img {
     cursor: pointer;
     vertical-align: middle;
   }
 }
+
+.myLoginBtn {
+  width: 310px;
+  height: 50px;
+  margin-top: 46px;
+  border-radius: 25px 25px 25px 25px;
+  background: #1a75e6;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 24px;
+  text-align: center;
+  color: #FFFFFF;
+  letter-spacing: 1px;
+}
+
 .el-login-footer {
   height: 40px;
   line-height: 40px;
@@ -222,6 +399,7 @@ getCookie()
   font-size: 12px;
   letter-spacing: 1px;
 }
+
 .login-code-img {
   height: 40px;
   padding-left: 12px;

vite.config.js

@@ -2,7 +2,7 @@ import { defineConfig, loadEnv } from 'vite'
 import path from 'path'
 import createVitePlugins from './vite/plugins'
 
-const baseUrl = 'http://localhost:8080' // 后端接口
+const baseUrl = 'http://localhost:8091' // 后端接口
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {