样式
This commit is contained in:
刘玉霞
parent
244a14674b
commit
681b80215e
@ -3,3 +3,4 @@ VITE_PORT = 1818
|
||||
|
||||
# open 运行 npm run dev 时自动打开浏览器
|
||||
VITE_OPEN = false
|
||||
|
||||
|
||||
BIN
ui/dasadmin/src/assets/bg.png
Normal file
BIN
ui/dasadmin/src/assets/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@ -26,7 +26,7 @@ export const useConfig = defineStore(
|
||||
// 侧边菜单激活项背景色
|
||||
menuActiveBackground: ['#ffffff', '#1d1e1f'],
|
||||
// 侧边菜单激活项文字色
|
||||
menuActiveColor: ['#409eff', '#3375b9'],
|
||||
menuActiveColor: ['#0064AA', '#3375b9'],
|
||||
// 侧边菜单顶栏背景色
|
||||
menuTopBarBackground: ['#fcfcfc', '#1d1e1f'],
|
||||
// 侧边菜单宽度(展开时)，单位px
|
||||
|
||||
@ -28,6 +28,7 @@ body,
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// --el-color-primary: #0064AA
|
||||
}
|
||||
|
||||
// 阿里 iconfont Symbol引用css
|
||||
@ -42,9 +43,11 @@ body,
|
||||
.w100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.h100 {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.ba-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -54,6 +57,7 @@ body,
|
||||
.default-main {
|
||||
margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
|
||||
}
|
||||
|
||||
.zoom-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
@ -62,6 +66,7 @@ body,
|
||||
right: -10px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
.block-help {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -77,16 +82,19 @@ body,
|
||||
font-size: 14px !important;
|
||||
color: var(--el-color-white) !important;
|
||||
}
|
||||
|
||||
.el-button.is-disabled .icon {
|
||||
color: var(--el-button-disabled-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 表格顶部菜单-e */
|
||||
|
||||
/* 鼠标置入浮动效果-s */
|
||||
.suspension {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.suspension:hover {
|
||||
-webkit-transform: translateY(-4px) scale(1.02);
|
||||
-moz-transform: translateY(-4px) scale(1.02);
|
||||
@ -98,12 +106,14 @@ body,
|
||||
z-index: 999;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 鼠标置入浮动效果-e */
|
||||
|
||||
/* 表格-s */
|
||||
.ba-table-box {
|
||||
border-radius: var(--el-border-radius-round);
|
||||
}
|
||||
|
||||
.ba-table-alert {
|
||||
background-color: var(--el-fill-color-darker) !important;
|
||||
border: 1px solid var(--ba-boder-color);
|
||||
@ -111,6 +121,7 @@ body,
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
/* 表格-e */
|
||||
|
||||
/* 新增/编辑表单-s */
|
||||
@ -119,15 +130,19 @@ body,
|
||||
border-radius: var(--el-border-radius-base);
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
|
||||
.ba-operate-dialog .el-dialog__header {
|
||||
border-bottom: 1px solid var(--ba-bg-color);
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ba-operate-dialog .el-dialog__body {
|
||||
height: 58vh;
|
||||
}
|
||||
|
||||
.ba-operate-dialog .el-dialog__footer {
|
||||
padding: 10px var(--el-dialog-padding-primary);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
@ -136,9 +151,11 @@ body,
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ba-operate-form {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/* 新增/编辑表单-e */
|
||||
|
||||
/* 全局遮罩-s */
|
||||
@ -151,6 +168,7 @@ body,
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999990;
|
||||
}
|
||||
|
||||
/* 全局遮罩-e */
|
||||
|
||||
/* 图片上传预览-s */
|
||||
@ -158,10 +176,12 @@ body,
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片上传预览-e */
|
||||
|
||||
/* 页面切换动画-s */
|
||||
@ -172,54 +192,66 @@ body,
|
||||
will-change: transform;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
// slide-right
|
||||
.slide-right-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.slide-right-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
// slide-left
|
||||
.slide-left-enter-from {
|
||||
@extend .slide-right-leave-to;
|
||||
}
|
||||
|
||||
.slide-left-leave-to {
|
||||
@extend .slide-right-enter-from;
|
||||
}
|
||||
|
||||
/* 页面切换动画-e */
|
||||
|
||||
/* 布局相关-s */
|
||||
.frontend-footer-brother {
|
||||
min-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.user-views {
|
||||
padding-left: 15px;
|
||||
|
||||
.user-views-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ba-aside-drawer {
|
||||
.el-drawer__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 布局相关-e */
|
||||
|
||||
/* 暗黑模式公共样式-s */
|
||||
.ba-icon-dark {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
/* 暗黑模式公共样式-e */
|
||||
|
||||
/* NProgress-s */
|
||||
#nprogress {
|
||||
|
||||
.bar,
|
||||
.spinner {
|
||||
z-index: 999999;
|
||||
}
|
||||
}
|
||||
|
||||
/* NProgress-e */
|
||||
|
||||
/* 自适应-s */
|
||||
@ -228,14 +260,17 @@ body,
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.ba-operate-dialog {
|
||||
width: 96%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.user-views {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 自适应-e */
|
||||
@ -5,49 +5,60 @@
|
||||
z-index: 9990;
|
||||
background-color: var(--ba-bg-color);
|
||||
}
|
||||
|
||||
.block-loading .block-loading-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.block-loading .block-loading-box-warp {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item {
|
||||
width: 33.333333%;
|
||||
height: 33.333333%;
|
||||
background: #409eff;
|
||||
background: #0064AA;
|
||||
float: left;
|
||||
animation: block-loading-animation 1.2s infinite ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(7) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(4),
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(8) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(1),
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(5),
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(9) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(2),
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(6) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes block-loading-animation {
|
||||
|
||||
0%,
|
||||
70%,
|
||||
100% {
|
||||
transform: scale3D(1, 1, 1);
|
||||
}
|
||||
|
||||
35% {
|
||||
transform: scale3D(0, 0, 1);
|
||||
}
|
||||
|
||||
@ -1,25 +1,28 @@
|
||||
@use 'sass:map';
|
||||
@use 'mixins' as *;
|
||||
$colors: (
|
||||
) !default;
|
||||
$colors: map.deep-merge(('primary': ('base': #0064AA)),
|
||||
$colors
|
||||
);
|
||||
|
||||
// 后台主体窗口左右间距
|
||||
$main-space: 16px;
|
||||
$primary-light: #3f6ad8;
|
||||
|
||||
// --ba-background
|
||||
$bg-color: () !default;
|
||||
$bg-color: map.merge(
|
||||
(
|
||||
'': #f5f5f5,
|
||||
$bg-color: (
|
||||
) !default;
|
||||
$bg-color: map.merge(('': #f5f5f5,
|
||||
'overlay': #ffffff,
|
||||
),
|
||||
$bg-color
|
||||
);
|
||||
|
||||
// --ba-border-color
|
||||
$border-color: () !default;
|
||||
$border-color: map.merge(
|
||||
(
|
||||
'': #f6f6f6,
|
||||
$border-color: (
|
||||
) !default;
|
||||
$border-color: map.merge(('': #f6f6f6,
|
||||
),
|
||||
$border-color
|
||||
);
|
||||
|
||||
@ -161,6 +161,12 @@ function createAxios<Data = any, T = ApiPromise<Data>>(axiosConfig: AxiosRequest
|
||||
// if (response.data.code == 302) {
|
||||
// router.push({ path: response.data.data.routePath ?? '', name: response.data.data.routeName ?? '' })
|
||||
// }
|
||||
if (response.data.code == 400) {
|
||||
let routerPath = adminBaseRoute.path
|
||||
userInfo.removeToken()
|
||||
routerPath += '/login'
|
||||
router.push({ path: routerPath })
|
||||
}
|
||||
if (response.data.code == 401) {
|
||||
let routerPath = adminBaseRoute.path
|
||||
userInfo.removeToken()
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="switch-language">
|
||||
<div class="login-div">
|
||||
<!-- <div class="switch-language">
|
||||
<el-dropdown size="large" :hide-timeout="50" placement="bottom-end" :hide-on-click="true">
|
||||
<Icon name="fa fa-globe" color="var(--el-text-color-secondary)" size="28" />
|
||||
<template #dropdown>
|
||||
@ -11,17 +11,17 @@
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div> -->
|
||||
<div @contextmenu.stop="" id="bubble" class="bubble">
|
||||
<canvas id="bubble-canvas" class="bubble-canvas"></canvas>
|
||||
</div>
|
||||
<div class="login">
|
||||
<div class="login-box">
|
||||
<div class="head">
|
||||
<img src="~assets/login-header.png" alt="" />
|
||||
</div>
|
||||
<div class="form">
|
||||
<img class="profile-avatar" :src="fullUrl('/static/images/avatar.png')" alt="" />
|
||||
<div class="title">
|
||||
<div class="title1">欢迎使用润阳风电场系统</div>
|
||||
<div class="title2">一站式数据采集平台</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-form @keyup.enter="onSubmitPre()" ref="formRef" :rules="rules" size="large" :model="form">
|
||||
<el-form-item prop="username">
|
||||
@ -204,12 +204,14 @@ const onSubmit = () => {
|
||||
})
|
||||
.finally(() => {
|
||||
state.submitLoading = false
|
||||
load()
|
||||
// load()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-div {
|
||||
}
|
||||
.switch-language {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
@ -218,7 +220,9 @@ const onSubmit = () => {
|
||||
}
|
||||
.bubble {
|
||||
overflow: hidden;
|
||||
background: url(/@/assets/bg.jpg) repeat;
|
||||
width: 64%;
|
||||
background: url(/@/assets/bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.form-item-icon {
|
||||
height: auto;
|
||||
@ -226,25 +230,36 @@ const onSubmit = () => {
|
||||
.login {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 36%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.login-box {
|
||||
overflow: hidden;
|
||||
width: 430px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--ba-bg-color-overlay);
|
||||
margin-bottom: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.head {
|
||||
background: #ccccff;
|
||||
img {
|
||||
display: block;
|
||||
width: 430px;
|
||||
margin: 0 auto;
|
||||
user-select: none;
|
||||
.title {
|
||||
.title1 {
|
||||
font-size: 36px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
line-height: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.title2 {
|
||||
padding-top: 20px;
|
||||
font-size: 24px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.form {
|
||||
@ -262,26 +277,25 @@ const onSubmit = () => {
|
||||
user-select: none;
|
||||
}
|
||||
.content {
|
||||
padding: 100px 40px 40px 40px;
|
||||
padding: 100px 0;
|
||||
}
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 300;
|
||||
margin-top: 15px;
|
||||
--el-button-bg-color: var(--el-color-primary);
|
||||
// --el-button-bg-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
.login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.login-box {
|
||||
width: 340px;
|
||||
margin-top: 0;
|
||||
@media screen and (max-width: 1370px) {
|
||||
.title {
|
||||
.title1 {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
.title2 {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -240,7 +240,7 @@ const onSubmit = () => {
|
||||
.admin-info {
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
border-top: 3px solid #409eff;
|
||||
border-top: 3px solid #0064aa;
|
||||
.avatar-uploader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -21,6 +21,8 @@ const viteConfig = ({ mode }: ConfigEnv): UserConfig => {
|
||||
|
||||
const createProxy = (proxyList: any) => {
|
||||
const ret = {} as Record<string, ProxyOptions>
|
||||
if (proxyList) {
|
||||
proxyList = JSON.parse(proxyList)
|
||||
for (const [prefix, target] of proxyList) {
|
||||
ret[prefix] = {
|
||||
target: target,
|
||||
@ -28,6 +30,7 @@ const viteConfig = ({ mode }: ConfigEnv): UserConfig => {
|
||||
rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret
|
||||
}
|
||||
@ -51,7 +54,7 @@ const viteConfig = ({ mode }: ConfigEnv): UserConfig => {
|
||||
port: parseInt(VITE_PORT),
|
||||
open: VITE_OPEN != 'false',
|
||||
proxy: {
|
||||
...createProxy(JSON.parse(VITE_APP_PROXY)),
|
||||
...createProxy(VITE_APP_PROXY),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user