wol/AgileBoot-Front-End-Basic
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

替换favicon,更换loading页,调整配色

Browse Source
This commit is contained in:
valarchie 2022-11-17 23:15:14 +08:00
parent 8dd292a5e2
commit 6cdca2758f
9 changed files with 192 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.prettierrc.js
View File

@ -1,9 +1,9 @@
module.exports = {
printWidth: 120,
tabWidth: 2,
semi: true,
singleQuote: true,
trailingComma: 'all',
bracketSpacing: false,
arrowParens: 'always',
printWidth: 120,
tabWidth: 2,
semi: true,
singleQuote: true,
trailingComma: 'all',
bracketSpacing: true,
arrowParens: 'always',
};

46
html/ie.html
View File

File diff suppressed because one or more lines are too long

335
index.html
View File

@ -1,215 +1,144 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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>AgileBoot管理系统</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<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>AgileBoot管理系统</title>
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
#x-figure {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 6.25em;
height: 6.25em;
animation: rotate 2.4s linear infinite;
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
.x-white {
top: 0;
bottom: 0;
left: 0;
right: 0;
background: white;
animation: flash 2.4s linear infinite;
opacity: 0;
}
.x-dot {
position: absolute;
margin: auto;
width: 2.4em;
height: 2.4em;
border-radius: 100%;
transition: all 1s ease;
}
.x-dot:nth-child(2) {
top: 0;
bottom: 0;
left: 0;
background: #ff4444;
animation: dotsY 2.4s linear infinite;
}
.x-dot:nth-child(3) {
left: 0;
right: 0;
top: 0;
background: #ffbb33;
animation: dotsX 2.4s linear infinite;
}
.x-dot:nth-child(4) {
top: 0;
bottom: 0;
right: 0;
background: #99cc00;
animation: dotsY 2.4s linear infinite;
}
.x-dot:nth-child(5) {
left: 0;
right: 0;
bottom: 0;
background: #33b5e5;
animation: dotsX 2.4s linear infinite;
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
@keyframes rotate {
0% {
transform: rotate(0);
}
10% {
width: 6.25em;
height: 6.25em;
}
66% {
width: 2.4em;
height: 2.4em;
}
100% {
transform: rotate(360deg);
width: 6.25em;
height: 6.25em;
}
}
}
@keyframes dotsY {
66% {
opacity: 0.1;
width: 2.4em;
}
77% {
opacity: 1;
width: 0;
}
}
@keyframes dotsX {
66% {
opacity: 0.1;
height: 2.4em;
}
77% {
opacity: 1;
height: 0;
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
@keyframes flash {
33% {
opacity: 0;
border-radius: 0%;
}
55% {
opacity: 0.6;
border-radius: 100%;
}
66% {
opacity: 0;
}
}
</style>
</head>
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div>
<body>
<div id="app">
<div id="x-figure">
<div class="x-dot x-white"></div>
<div class="x-dot"></div>
<div class="x-dot"></div>
<div class="x-dot"></div>
<div class="x-dot"></div>
</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<script type="module" src="/src/main.js"></script>
</body>
</html>

6
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ruoyi",
"version": "3.8.2",
"name": "agileboot",
"version": "1.5.0",
"description": "AgileBoot管理系统",
"author": "valarchie",
"license": "MIT",
@ -13,7 +13,7 @@
},
"repository": {
"type": "git",
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
"url": "https://github.com/valarchie/AgileBoot-Front-End"
},
"dependencies": {
"@element-plus/icons-vue": "1.1.4",

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

28
src/assets/styles/variables.module.scss
View File

@ -1,12 +1,12 @@
// base color
$blue: #324157;
$light-blue: #3A71A8;
$red: #C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow: #FEC171;
$panGreen: #30B08F;
$blue: #409eff;
$light-blue: #3a71a8;
$red: #ff4444;
$pink: #e65d6e;
$green: #30b08f;
$tiffany: #33b5e5;
$yellow: #ffbb33;
$panGreen: #30bb8f;
// 默认菜单主题风格
$base-menu-color: #bfcbd9;
@ -14,11 +14,11 @@ $base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-logo-title-color: #ffffff;
$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-color: rgba(0, 0, 0, 0.623);
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-background: #22374e;
$base-sub-menu-hover: #001528;
// 自定义暗色菜单风格
@ -36,10 +36,10 @@ $base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528;
*/
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-primary: #409eff;
$--color-success: #67c23a;
$--color-warning: #e6a23c;
$--color-danger: #f56c6c;
$--color-info: #909399;
$base-sidebar-width: 200px;

66
src/views/index.vue
View File

@ -1,43 +1,7 @@
<template>
<div class="app-container home">
<el-row :gutter="20">
<el-col :sm="24" :lg="24">
<blockquote class="text-warning" style="font-size: 14px">
领取阿里云通用云产品优惠券
<br />
<el-link
href="https://cn.aliyun.com/minisite/goods?from_alibabacloud=&userCode=djbhhf1x"
type="primary"
target="_blank"
>https://cn.aliyun.com/minisite/goods?from_alibabacloud=&userCode=djbhhf1x</el-link
>
<br />
领取腾讯云通用云产品特惠专区优惠券
<br />
<el-link
href="https://url.cn/mKgcHVNb"
type="primary"
target="_blank"
>https://url.cn/mKgcHVNb</el-link
>
<br />
<hr/>
阿里云服务器折扣区
<el-link href="https://cn.aliyun.com/minisite/goods?from_alibabacloud=&userCode=djbhhf1x" type="primary" target="_blank"
>>☛☛点我进入☚☚</el-link
>
<br/>
腾讯云服务器秒杀区
<el-link href="https://url.cn/mKgcHVNb" type="primary" target="_blank"
>>☛☛点我进入☚☚</el-link
><br />
<h4 class="text-danger">
云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)
</h4>
</blockquote>
<hr />
</el-col>
<el-col :sm="24" :lg="24"> </el-col>
</el-row>
<el-row :gutter="20">
<el-col :sm="24" :lg="12" style="padding-left: 20px">
@ -47,8 +11,8 @@
开发的项目。于是就萌生了基于Ruoyi项目，改造重构一个项目结构良好，可读性高，可维护性高，面向对象，使用模型进行开发（DDD战术设计）
于是利用业余时间对Ruoyi前后端项目进行了重构改造。
如此有了AgileBoot管理系统，AgileBoot提供最基础的开发框架，如小型网站管理后台，或供公司内部的小项目使用，提供管理后台模块以及API模块。
AgileBoot项目，会致力于高安全，低错误，高项目规范，高性能。 其他花里胡哨的功能会尽量少加进来。像Ruoyi-Pro 芋道源码新起的项目加了一大堆功能。太重了。
项目本身稳定性，缺陷可能更得不到保证。
AgileBoot项目，会致力于高安全，低错误，高项目规范，高性能。 其他花里胡哨的功能会尽量少加进来。像Ruoyi-Pro
芋道源码新起的项目加了一大堆功能。太重了。 项目本身稳定性，缺陷可能更得不到保证。
所有前端后台代码都经过重构。本来3.5w行的后端代码，精简到1.6w行左右。
</p>
<p>
@ -72,10 +36,7 @@
@click="goTarget('https://github.com/valarchie/AgileBoot-Front-End')"
>前端 Github 地址</el-button
>
<el-button
icon="HomeFilled"
plain
@click="goTarget('https://www.cnblogs.com/valarchie/')"
<el-button icon="HomeFilled" plain @click="goTarget('https://www.cnblogs.com/valarchie/')"
>访问博客</el-button
>
</p>
@ -135,17 +96,20 @@
</p>
<p>
<i class="el-icon-user-solid"></i> QQ群：
<a href="https://qm.qq.com/cgi-bin/qm/qr?k=TR5guoXS0HssErVWefmdFRirJvfpEvp1&jump_from=webapi&authKey=VkWMmVhp/pNdWuRD8sqgM+Sv2+Vy2qCJQSeLmeXlLtfER2RJBi6zL56PdcRlCmTs" target="_blank">
<a
href="https://qm.qq.com/cgi-bin/qm/qr?k=TR5guoXS0HssErVWefmdFRirJvfpEvp1&jump_from=webapi&authKey=VkWMmVhp/pNdWuRD8sqgM+Sv2+Vy2qCJQSeLmeXlLtfER2RJBi6zL56PdcRlCmTs"
target="_blank"
>
1398880[点击加群]</a
>
</p>
<p>
<i class="el-icon-chat-dot-round"></i>
<i class="el-icon-chat-dot-round"></i>
微信：<a href="javascript:;"> * valarchie</a>
</p>
<p>
<i class="el-icon-money"></i>
QQ：<a href="javascript:;" > * 343928303</a>
QQ：<a href="javascript:;"> * 343928303</a>
</p>
</div>
</el-card>
@ -182,11 +146,9 @@
<img
src="https://oscimg.oschina.net/oscnet/up-261828407c9089ad1cc0ce3f41a0ef3fbc0.png"
alt="donate"
style="width:100%"
style="width: 100%"
/>
<span style="display: inline-block; height: 30px; line-height: 30px"
>你可以请作者喝杯咖啡表示鼓励</span
>
<span style="display: inline-block; height: 30px; line-height: 30px">你可以请作者喝杯咖啡表示鼓励</span>
</div>
</el-card>
</el-col>
@ -195,7 +157,7 @@
</template>
<script setup name="Index">
const version = ref('1.0.0');
const version = ref('1.5.0');
function goTarget(url) {
window.open(url, '__blank');
@ -225,7 +187,7 @@ function goTarget(url) {
margin: 0;
}
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;

51
src/views/login.vue
View File

@ -3,13 +3,7 @@
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">AgileBoot后台管理系统</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
size="large"
auto-complete="off"
placeholder="账号"
>
<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>
@ -37,29 +31,23 @@
<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"/>
<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"
style="width:100%;"
@click.prevent="handleLogin"
>
<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">
<div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
<span>Copyright © 2018-2022 agileboot All Rights Reserved.</span>
</div>
</div>
</template>
@ -111,15 +99,18 @@ function handleLogin() {
Cookies.remove('rememberMe');
}
// 调用action的登录方法
store.dispatch('Login', loginForm.value).then(() => {
router.push({ path: redirect.value || '/' });
}).catch(() => {
loading.value = false;
// 重新获取验证码
if (isCaptchaOn.value) {
getCode();
}
});
store
.dispatch('Login', loginForm.value)
.then(() => {
router.push({ path: redirect.value || '/' });
})
.catch(() => {
loading.value = false;
// 重新获取验证码
if (isCaptchaOn.value) {
getCode();
}
});
}
});
}
@ -149,13 +140,13 @@ getCode();
getCookie();
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-image: url('../assets/images/login-background.jpg');
background-size: cover;
}
.title {

2
src/views/register.vue
View File

@ -70,7 +70,7 @@
</el-form>
<!-- 底部 -->
<div class="el-register-footer">
<span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
<span>Copyright © 2018-2022 agileboot All Rights Reserved.</span>
</div>
</div>
</template>