wangchengming/YouKeChuanMei_VUE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

按UI图设计登录页

Browse Source
This commit is contained in:
wangchengming 2025-07-24 16:28:03 +08:00
parent a6ddb0ace6
commit d85788e461
12 changed files with 262 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

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

4
.env.production
View File

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

4
.env.staging
View File

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

2
index.html
View File

@ -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,

2
package.json
View File

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

BIN
src/assets/images/login-background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 509 KiB

BIN
src/assets/images/login-background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 472 KiB

BIN
src/assets/images/login-leftBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src/assets/images/systemLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

2
src/views/index.vue
View File

@ -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>

326
src/views/login.vue
View File

@ -1,65 +1,58 @@
<template>
<div class="login">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">{{ title }}</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
size="large"
auto-complete="off"
placeholder="账号"
>
<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 class="login-container">
<div class="loginRoot">
<div class="login">
<div class="leftLogo">
<div class="left-logo-container">
<img :src="systemLogo" />
<div class="shortBar"></div>
<div class="welcome-message">Welcome to log in and use this system platform</div>
<div class="welcome-label">欢迎登录</div>
</div>
</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"
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 class="rightForm">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<div class="title-container">
<div class="tite-square"></div>
<div class="title-label">{{ title }}</div>
</div>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" size="large" class="custom-input" auto-complete="off"
placeholder="账号">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" show-password size="large" class="custom-input"
auto-complete="off" placeholder="密码" @keyup.enter="handleLogin">
</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>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
</div>
<!-- 底部 -->
<!-- <div class="el-login-footer">
<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%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
width: 1000px;
height: 580px;
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;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
width: 310px;
height: 416px;
margin: 0 auto;
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;

2
vite.config.js
View File

@ -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 }) => {