Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
A
adminCenter
Project
Project
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
Graph
比较
统计图
议题
0
议题
0
列表
看板
标记
Milestones
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
刘旭
adminCenter
Commits
73172069
提交
73172069
authored
9月 17, 2025
作者:
Administrator
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
1
上级
fa3d44fd
隐藏空白字符变更
内嵌
并排
正在显示
7 个修改的文件
包含
541 行增加
和
521 行删除
+541
-521
index--zuAVKGa.css
dist/assets/index--zuAVKGa.css
+0
-1
index.html
dist/index.html
+2
-2
logs.vue
src/components/logs.vue
+50
-38
menuList.ts
src/layout/uilts/menuList.ts
+15
-15
components.d.ts
src/types/components.d.ts
+1
-0
index.vue
src/views/systemBackup/index.vue
+471
-463
vite.config.ts
vite.config.ts
+2
-2
没有找到文件。
dist/assets/index--zuAVKGa.css
deleted
100644 → 0
浏览文件 @
fa3d44fd
@charset
"UTF-8"
;
:root
{
--el-color-white
:
#ffffff
;
--el-color-black
:
#000000
;
--el-color-primary-rgb
:
64
,
158
,
255
;
--el-color-success-rgb
:
103
,
194
,
58
;
--el-color-warning-rgb
:
230
,
162
,
60
;
--el-color-danger-rgb
:
245
,
108
,
108
;
--el-color-error-rgb
:
245
,
108
,
108
;
--el-color-info-rgb
:
144
,
147
,
153
;
--el-font-size-extra-large
:
20px
;
--el-font-size-large
:
18px
;
--el-font-size-medium
:
16px
;
--el-font-size-base
:
14px
;
--el-font-size-small
:
13px
;
--el-font-size-extra-small
:
12px
;
--el-font-family
:
"Helvetica Neue"
,
Helvetica
,
"PingFang SC"
,
"Hiragino Sans GB"
,
"Microsoft YaHei"
,
"微软雅黑"
,
Arial
,
sans-serif
;
--el-font-weight-primary
:
500
;
--el-font-line-height-primary
:
24px
;
--el-index-normal
:
1
;
--el-index-top
:
1000
;
--el-index-popper
:
2000
;
--el-border-radius-base
:
4px
;
--el-border-radius-small
:
2px
;
--el-border-radius-round
:
20px
;
--el-border-radius-circle
:
100%
;
--el-transition-duration
:
.3s
;
--el-transition-duration-fast
:
.2s
;
--el-transition-function-ease-in-out-bezier
:
cubic-bezier
(
.645
,
.045
,
.355
,
1
);
--el-transition-function-fast-bezier
:
cubic-bezier
(
.23
,
1
,
.32
,
1
);
--el-transition-all
:
all
var
(
--el-transition-duration
)
var
(
--el-transition-function-ease-in-out-bezier
);
--el-transition-fade
:
opacity
var
(
--el-transition-duration
)
var
(
--el-transition-function-fast-bezier
);
--el-transition-md-fade
:
transform
var
(
--el-transition-duration
)
var
(
--el-transition-function-fast-bezier
),
opacity
var
(
--el-transition-duration
)
var
(
--el-transition-function-fast-bezier
);
--el-transition-fade-linear
:
opacity
var
(
--el-transition-duration-fast
)
linear
;
--el-transition-border
:
border-color
var
(
--el-transition-duration-fast
)
var
(
--el-transition-function-ease-in-out-bezier
);
--el-transition-box-shadow
:
box-shadow
var
(
--el-transition-duration-fast
)
var
(
--el-transition-function-ease-in-out-bezier
);
--el-transition-color
:
color
var
(
--el-transition-duration-fast
)
var
(
--el-transition-function-ease-in-out-bezier
);
--el-component-size-large
:
40px
;
--el-component-size
:
32px
;
--el-component-size-small
:
24px
}
:root
{
color-scheme
:
light
;
--el-color-primary
:
#409eff
;
--el-color-primary-light-3
:
#79bbff
;
--el-color-primary-light-5
:
#a0cfff
;
--el-color-primary-light-7
:
#c6e2ff
;
--el-color-primary-light-8
:
#d9ecff
;
--el-color-primary-light-9
:
#ecf5ff
;
--el-color-primary-dark-2
:
#337ecc
;
--el-color-success
:
#67c23a
;
--el-color-success-light-3
:
#95d475
;
--el-color-success-light-5
:
#b3e19d
;
--el-color-success-light-7
:
#d1edc4
;
--el-color-success-light-8
:
#e1f3d8
;
--el-color-success-light-9
:
#f0f9eb
;
--el-color-success-dark-2
:
#529b2e
;
--el-color-warning
:
#e6a23c
;
--el-color-warning-light-3
:
#eebe77
;
--el-color-warning-light-5
:
#f3d19e
;
--el-color-warning-light-7
:
#f8e3c5
;
--el-color-warning-light-8
:
#faecd8
;
--el-color-warning-light-9
:
#fdf6ec
;
--el-color-warning-dark-2
:
#b88230
;
--el-color-danger
:
#f56c6c
;
--el-color-danger-light-3
:
#f89898
;
--el-color-danger-light-5
:
#fab6b6
;
--el-color-danger-light-7
:
#fcd3d3
;
--el-color-danger-light-8
:
#fde2e2
;
--el-color-danger-light-9
:
#fef0f0
;
--el-color-danger-dark-2
:
#c45656
;
--el-color-error
:
#f56c6c
;
--el-color-error-light-3
:
#f89898
;
--el-color-error-light-5
:
#fab6b6
;
--el-color-error-light-7
:
#fcd3d3
;
--el-color-error-light-8
:
#fde2e2
;
--el-color-error-light-9
:
#fef0f0
;
--el-color-error-dark-2
:
#c45656
;
--el-color-info
:
#909399
;
--el-color-info-light-3
:
#b1b3b8
;
--el-color-info-light-5
:
#c8c9cc
;
--el-color-info-light-7
:
#dedfe0
;
--el-color-info-light-8
:
#e9e9eb
;
--el-color-info-light-9
:
#f4f4f5
;
--el-color-info-dark-2
:
#73767a
;
--el-bg-color
:
#ffffff
;
--el-bg-color-page
:
#f2f3f5
;
--el-bg-color-overlay
:
#ffffff
;
--el-text-color-primary
:
#303133
;
--el-text-color-regular
:
#606266
;
--el-text-color-secondary
:
#909399
;
--el-text-color-placeholder
:
#a8abb2
;
--el-text-color-disabled
:
#c0c4cc
;
--el-border-color
:
#dcdfe6
;
--el-border-color-light
:
#e4e7ed
;
--el-border-color-lighter
:
#ebeef5
;
--el-border-color-extra-light
:
#f2f6fc
;
--el-border-color-dark
:
#d4d7de
;
--el-border-color-darker
:
#cdd0d6
;
--el-fill-color
:
#f0f2f5
;
--el-fill-color-light
:
#f5f7fa
;
--el-fill-color-lighter
:
#fafafa
;
--el-fill-color-extra-light
:
#fafcff
;
--el-fill-color-dark
:
#ebedf0
;
--el-fill-color-darker
:
#e6e8eb
;
--el-fill-color-blank
:
#ffffff
;
--el-box-shadow
:
0px
12px
32px
4px
rgba
(
0
,
0
,
0
,
.04
),
0px
8px
20px
rgba
(
0
,
0
,
0
,
.08
);
--el-box-shadow-light
:
0px
0px
12px
rgba
(
0
,
0
,
0
,
.12
);
--el-box-shadow-lighter
:
0px
0px
6px
rgba
(
0
,
0
,
0
,
.12
);
--el-box-shadow-dark
:
0px
16px
48px
16px
rgba
(
0
,
0
,
0
,
.08
),
0px
12px
32px
rgba
(
0
,
0
,
0
,
.12
),
0px
8px
16px
-8px
rgba
(
0
,
0
,
0
,
.16
);
--el-disabled-bg-color
:
var
(
--el-fill-color-light
);
--el-disabled-text-color
:
var
(
--el-text-color-placeholder
);
--el-disabled-border-color
:
var
(
--el-border-color-light
);
--el-overlay-color
:
rgba
(
0
,
0
,
0
,
.8
);
--el-overlay-color-light
:
rgba
(
0
,
0
,
0
,
.7
);
--el-overlay-color-lighter
:
rgba
(
0
,
0
,
0
,
.5
);
--el-mask-color
:
rgba
(
255
,
255
,
255
,
.9
);
--el-mask-color-extra-light
:
rgba
(
255
,
255
,
255
,
.3
);
--el-border-width
:
1px
;
--el-border-style
:
solid
;
--el-border-color-hover
:
var
(
--el-text-color-disabled
);
--el-border
:
var
(
--el-border-width
)
var
(
--el-border-style
)
var
(
--el-border-color
);
--el-svg-monochrome-grey
:
var
(
--el-border-color
)}
.el-icon-loading
{
-webkit-animation
:
rotating
2s
linear
infinite
;
animation
:
rotating
2s
linear
infinite
}
.el-icon--right
{
margin-left
:
5px
}
.el-icon--left
{
margin-right
:
5px
}
@-webkit-keyframes
rotating
{
0
%
{
transform
:
rotate
(
0
)}
to
{
transform
:
rotate
(
1turn
)}}
@keyframes
rotating
{
0
%
{
transform
:
rotate
(
0
)}
to
{
transform
:
rotate
(
1turn
)}}
.el-icon
{
--color
:
inherit
;
align-items
:
center
;
display
:
inline-flex
;
height
:
1em
;
justify-content
:
center
;
line-height
:
1em
;
position
:
relative
;
width
:
1em
;
fill
:
currentColor
;
color
:
var
(
--color
);
font-size
:
inherit
}
.el-icon.is-loading
{
-webkit-animation
:
rotating
2s
linear
infinite
;
animation
:
rotating
2s
linear
infinite
}
.el-icon
svg
{
height
:
1em
;
width
:
1em
}
header
[
data-v-471b1476
]
{
line-height
:
1.5
;
max-height
:
100vh
}
.logo
[
data-v-471b1476
]
{
display
:
block
;
margin
:
0
auto
2rem
}
nav
[
data-v-471b1476
]
{
width
:
100%
;
font-size
:
12px
;
text-align
:
center
;
margin-top
:
2rem
}
nav
a
.router-link-exact-active
[
data-v-471b1476
]
{
color
:
var
(
--color-text
)}
nav
a
.router-link-exact-active
[
data-v-471b1476
]
:hover
{
background-color
:
transparent
}
nav
a
[
data-v-471b1476
]
{
display
:
inline-block
;
padding
:
0
1rem
;
border-left
:
1px
solid
var
(
--color-border
)}
nav
a
[
data-v-471b1476
]
:first-of-type
{
border
:
0
}
@media
(
min-width
:
1024px
){
header
[
data-v-471b1476
]
{
display
:
flex
;
place-items
:
center
;
padding-right
:
calc
(
var
(
--section-gap
)
/
2
)}
.logo
[
data-v-471b1476
]
{
margin
:
0
2rem
0
0
}
header
.wrapper
[
data-v-471b1476
]
{
display
:
flex
;
place-items
:
flex-start
;
flex-wrap
:
wrap
}
nav
[
data-v-471b1476
]
{
text-align
:
left
;
margin-left
:
-1rem
;
font-size
:
1rem
;
padding
:
1rem
0
;
margin-top
:
1rem
}}
.el-form
{
--el-form-label-font-size
:
var
(
--el-font-size-base
);
--el-form-inline-content-width
:
220px
}
.el-form--label-left
.el-form-item__label
{
justify-content
:
flex-start
}
.el-form--label-top
.el-form-item
{
display
:
block
}
.el-form--label-top
.el-form-item
.el-form-item__label
{
display
:
block
;
height
:
auto
;
line-height
:
22px
;
margin-bottom
:
8px
;
text-align
:
left
}
.el-form--inline
.el-form-item
{
display
:
inline-flex
;
margin-right
:
32px
;
vertical-align
:
middle
}
.el-form--inline.el-form--label-top
{
display
:
flex
;
flex-wrap
:
wrap
}
.el-form--inline.el-form--label-top
.el-form-item
{
display
:
block
}
.el-form--large.el-form--label-top
.el-form-item
.el-form-item__label
{
line-height
:
22px
;
margin-bottom
:
12px
}
.el-form--default.el-form--label-top
.el-form-item
.el-form-item__label
{
line-height
:
22px
;
margin-bottom
:
8px
}
.el-form--small.el-form--label-top
.el-form-item
.el-form-item__label
{
line-height
:
20px
;
margin-bottom
:
4px
}
.el-form-item
{
display
:
flex
;
--font-size
:
14px
;
margin-bottom
:
18px
}
.el-form-item
.el-form-item
{
margin-bottom
:
0
}
.el-form-item
.el-input__validateIcon
{
display
:
none
}
.el-form-item--large
{
--font-size
:
14px
;
--el-form-label-font-size
:
var
(
--font-size
);
margin-bottom
:
22px
}
.el-form-item--large
.el-form-item__label
{
height
:
40px
;
line-height
:
40px
}
.el-form-item--large
.el-form-item__content
{
line-height
:
40px
}
.el-form-item--large
.el-form-item__error
{
padding-top
:
4px
}
.el-form-item--default
{
--font-size
:
14px
;
--el-form-label-font-size
:
var
(
--font-size
);
margin-bottom
:
18px
}
.el-form-item--default
.el-form-item__label
{
height
:
32px
;
line-height
:
32px
}
.el-form-item--default
.el-form-item__content
{
line-height
:
32px
}
.el-form-item--default
.el-form-item__error
{
padding-top
:
2px
}
.el-form-item--small
{
--font-size
:
12px
;
--el-form-label-font-size
:
var
(
--font-size
);
margin-bottom
:
18px
}
.el-form-item--small
.el-form-item__label
{
height
:
24px
;
line-height
:
24px
}
.el-form-item--small
.el-form-item__content
{
line-height
:
24px
}
.el-form-item--small
.el-form-item__error
{
padding-top
:
2px
}
.el-form-item__label-wrap
{
display
:
flex
}
.el-form-item__label
{
align-items
:
flex-start
;
box-sizing
:
border-box
;
color
:
var
(
--el-text-color-regular
);
display
:
inline-flex
;
flex
:
0
0
auto
;
font-size
:
var
(
--el-form-label-font-size
);
height
:
32px
;
justify-content
:
flex-end
;
line-height
:
32px
;
padding
:
0
12px
0
0
}
.el-form-item__content
{
align-items
:
center
;
display
:
flex
;
flex
:
1
;
flex-wrap
:
wrap
;
font-size
:
var
(
--font-size
);
line-height
:
32px
;
min-width
:
0
;
position
:
relative
}
.el-form-item__content
.el-input-group
{
vertical-align
:
top
}
.el-form-item__error
{
color
:
var
(
--el-color-danger
);
font-size
:
12px
;
left
:
0
;
line-height
:
1
;
padding-top
:
2px
;
position
:
absolute
;
top
:
100%
}
.el-form-item__error--inline
{
display
:
inline-block
;
left
:
auto
;
margin-left
:
10px
;
position
:
relative
;
top
:
auto
}
.el-form-item.is-required
:not
(
.is-no-asterisk
)
.asterisk-left
>
.el-form-item__label-wrap
>
.el-form-item__label
:before
,
.el-form-item.is-required
:not
(
.is-no-asterisk
)
.asterisk-left
>
.el-form-item__label
:before
{
color
:
var
(
--el-color-danger
);
content
:
"*"
;
margin-right
:
4px
}
.el-form-item.is-required
:not
(
.is-no-asterisk
)
.asterisk-right
>
.el-form-item__label-wrap
>
.el-form-item__label
:after
,
.el-form-item.is-required
:not
(
.is-no-asterisk
)
.asterisk-right
>
.el-form-item__label
:after
{
color
:
var
(
--el-color-danger
);
content
:
"*"
;
margin-left
:
4px
}
.el-form-item.is-error
.el-input__wrapper
,
.el-form-item.is-error
.el-input__wrapper.is-focus
,
.el-form-item.is-error
.el-input__wrapper
:focus
,
.el-form-item.is-error
.el-input__wrapper
:hover
,
.el-form-item.is-error
.el-select__wrapper
,
.el-form-item.is-error
.el-select__wrapper.is-focus
,
.el-form-item.is-error
.el-select__wrapper
:focus
,
.el-form-item.is-error
.el-select__wrapper
:hover
,
.el-form-item.is-error
.el-textarea__inner
,
.el-form-item.is-error
.el-textarea__inner.is-focus
,
.el-form-item.is-error
.el-textarea__inner
:focus
,
.el-form-item.is-error
.el-textarea__inner
:hover
{
box-shadow
:
0
0
0
1px
var
(
--el-color-danger
)
inset
}
.el-form-item.is-error
.el-input-group__append
.el-input__wrapper
,
.el-form-item.is-error
.el-input-group__prepend
.el-input__wrapper
{
box-shadow
:
inset
0
0
0
1px
transparent
}
.el-form-item.is-error
.el-input__validateIcon
{
color
:
var
(
--el-color-danger
)}
.el-form-item--feedback
.el-input__validateIcon
{
display
:
inline-flex
}
.el-upload
{
--el-upload-dragger-padding-horizontal
:
40px
;
--el-upload-dragger-padding-vertical
:
10px
;
align-items
:
center
;
cursor
:
pointer
;
display
:
inline-flex
;
justify-content
:
center
;
outline
:
none
}
.el-upload__input
{
display
:
none
}
.el-upload__tip
{
color
:
var
(
--el-text-color-regular
);
font-size
:
12px
;
margin-top
:
7px
}
.el-upload
iframe
{
filter
:
alpha
(
opacity
=
0
);
left
:
0
;
opacity
:
0
;
position
:
absolute
;
top
:
0
;
z-index
:
-1
}
.el-upload--picture-card
{
--el-upload-picture-card-size
:
148px
;
align-items
:
center
;
background-color
:
var
(
--el-fill-color-lighter
);
border
:
1px
dashed
var
(
--el-border-color-darker
);
border-radius
:
6px
;
box-sizing
:
border-box
;
cursor
:
pointer
;
display
:
inline-flex
;
height
:
var
(
--el-upload-picture-card-size
);
justify-content
:
center
;
vertical-align
:
top
;
width
:
var
(
--el-upload-picture-card-size
)}
.el-upload--picture-card
>
i
{
color
:
var
(
--el-text-color-secondary
);
font-size
:
28px
}
.el-upload--picture-card
:hover
{
border-color
:
var
(
--el-color-primary
);
color
:
var
(
--el-color-primary
)}
.el-upload.is-drag
{
display
:
block
}
.el-upload
:focus
{
border-color
:
var
(
--el-color-primary
);
color
:
var
(
--el-color-primary
)}
.el-upload
:focus
.el-upload-dragger
{
border-color
:
var
(
--el-color-primary
)}
.el-upload-dragger
{
background-color
:
var
(
--el-fill-color-blank
);
border
:
1px
dashed
var
(
--el-border-color
);
border-radius
:
6px
;
box-sizing
:
border-box
;
cursor
:
pointer
;
overflow
:
hidden
;
padding
:
var
(
--el-upload-dragger-padding-horizontal
)
var
(
--el-upload-dragger-padding-vertical
);
position
:
relative
;
text-align
:
center
}
.el-upload-dragger
.el-icon--upload
{
color
:
var
(
--el-text-color-placeholder
);
font-size
:
67px
;
line-height
:
50px
;
margin-bottom
:
16px
}
.el-upload-dragger
+
.el-upload__tip
{
text-align
:
center
}
.el-upload-dragger
~
.el-upload__files
{
border-top
:
var
(
--el-border
);
margin-top
:
7px
;
padding-top
:
5px
}
.el-upload-dragger
.el-upload__text
{
color
:
var
(
--el-text-color-regular
);
font-size
:
14px
;
text-align
:
center
}
.el-upload-dragger
.el-upload__text
em
{
color
:
var
(
--el-color-primary
);
font-style
:
normal
}
.el-upload-dragger
:hover
{
border-color
:
var
(
--el-color-primary
)}
.el-upload-dragger.is-dragover
{
background-color
:
var
(
--el-color-primary-light-9
);
border
:
2px
dashed
var
(
--el-color-primary
);
padding
:
calc
(
var
(
--el-upload-dragger-padding-horizontal
)
-
1px
)
calc
(
var
(
--el-upload-dragger-padding-vertical
)
-
1px
)}
.el-upload-list
{
list-style
:
none
;
margin
:
10px
0
0
;
padding
:
0
;
position
:
relative
}
.el-upload-list__item
{
border-radius
:
4px
;
box-sizing
:
border-box
;
color
:
var
(
--el-text-color-regular
);
font-size
:
14px
;
margin-bottom
:
5px
;
position
:
relative
;
transition
:
all
.5s
cubic-bezier
(
.55
,
0
,
.1
,
1
);
width
:
100%
}
.el-upload-list__item
.el-progress
{
position
:
absolute
;
top
:
20px
;
width
:
100%
}
.el-upload-list__item
.el-progress__text
{
position
:
absolute
;
right
:
0
;
top
:
-13px
}
.el-upload-list__item
.el-progress-bar
{
margin-right
:
0
;
padding-right
:
0
}
.el-upload-list__item
.el-icon--upload-success
{
color
:
var
(
--el-color-success
)}
.el-upload-list__item
.el-icon--close
{
color
:
var
(
--el-text-color-regular
);
cursor
:
pointer
;
display
:
none
;
opacity
:
.75
;
position
:
absolute
;
right
:
5px
;
top
:
50%
;
transform
:
translateY
(
-50%
);
transition
:
opacity
var
(
--el-transition-duration
)}
.el-upload-list__item
.el-icon--close
:hover
{
color
:
var
(
--el-color-primary
);
opacity
:
1
}
.el-upload-list__item
.el-icon--close-tip
{
color
:
var
(
--el-color-primary
);
cursor
:
pointer
;
display
:
none
;
font-size
:
12px
;
font-style
:
normal
;
opacity
:
1
;
position
:
absolute
;
right
:
5px
;
top
:
1px
}
.el-upload-list__item
:hover
{
background-color
:
var
(
--el-fill-color-light
)}
.el-upload-list__item
:hover
.el-icon--close
{
display
:
inline-flex
}
.el-upload-list__item
:hover
.el-progress__text
{
display
:
none
}
.el-upload-list__item
.el-upload-list__item-info
{
display
:
inline-flex
;
flex-direction
:
column
;
justify-content
:
center
;
margin-left
:
4px
;
width
:
calc
(
100%
-
30px
)}
.el-upload-list__item.is-success
.el-upload-list__item-status-label
{
display
:
inline-flex
}
.el-upload-list__item.is-success
.el-upload-list__item-name
:focus
,
.el-upload-list__item.is-success
.el-upload-list__item-name
:hover
{
color
:
var
(
--el-color-primary
);
cursor
:
pointer
}
.el-upload-list__item.is-success
:focus:not
(
:hover
)
.el-icon--close-tip
{
display
:
inline-block
}
.el-upload-list__item.is-success
:active
,
.el-upload-list__item.is-success
:not
(
.focusing
)
:focus
{
outline-width
:
0
}
.el-upload-list__item.is-success
:active
.el-icon--close-tip
,
.el-upload-list__item.is-success
:not
(
.focusing
)
:focus
.el-icon--close-tip
{
display
:
none
}
.el-upload-list__item.is-success
:focus
.el-upload-list__item-status-label
,
.el-upload-list__item.is-success
:hover
.el-upload-list__item-status-label
{
display
:
none
;
opacity
:
0
}
.el-upload-list__item-name
{
align-items
:
center
;
color
:
var
(
--el-text-color-regular
);
display
:
inline-flex
;
font-size
:
var
(
--el-font-size-base
);
padding
:
0
4px
;
text-align
:
center
;
transition
:
color
var
(
--el-transition-duration
)}
.el-upload-list__item-name
.el-icon
{
color
:
var
(
--el-text-color-secondary
);
margin-right
:
6px
}
.el-upload-list__item-file-name
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}
.el-upload-list__item-status-label
{
align-items
:
center
;
display
:
none
;
height
:
100%
;
justify-content
:
center
;
line-height
:
inherit
;
position
:
absolute
;
right
:
5px
;
top
:
0
;
transition
:
opacity
var
(
--el-transition-duration
)}
.el-upload-list__item-delete
{
color
:
var
(
--el-text-color-regular
);
display
:
none
;
font-size
:
12px
;
position
:
absolute
;
right
:
10px
;
top
:
0
}
.el-upload-list__item-delete
:hover
{
color
:
var
(
--el-color-primary
)}
.el-upload-list--picture-card
{
--el-upload-list-picture-card-size
:
148px
;
display
:
inline-flex
;
flex-wrap
:
wrap
;
margin
:
0
}
.el-upload-list--picture-card
.el-upload-list__item
{
background-color
:
var
(
--el-fill-color-blank
);
border
:
1px
solid
var
(
--el-border-color
);
border-radius
:
6px
;
box-sizing
:
border-box
;
display
:
inline-flex
;
height
:
var
(
--el-upload-list-picture-card-size
);
margin
:
0
8px
8px
0
;
overflow
:
hidden
;
padding
:
0
;
width
:
var
(
--el-upload-list-picture-card-size
)}
.el-upload-list--picture-card
.el-upload-list__item
.el-icon--check
,
.el-upload-list--picture-card
.el-upload-list__item
.el-icon--circle-check
{
color
:
#fff
}
.el-upload-list--picture-card
.el-upload-list__item
.el-icon--close
{
display
:
none
}
.el-upload-list--picture-card
.el-upload-list__item
:hover
.el-upload-list__item-status-label
{
display
:
block
;
opacity
:
0
}
.el-upload-list--picture-card
.el-upload-list__item
:hover
.el-progress__text
{
display
:
block
}
.el-upload-list--picture-card
.el-upload-list__item
.el-upload-list__item-name
{
display
:
none
}
.el-upload-list--picture-card
.el-upload-list__item-thumbnail
{
height
:
100%
;
-o-object-fit
:
contain
;
object-fit
:
contain
;
width
:
100%
}
.el-upload-list--picture-card
.el-upload-list__item-status-label
{
background
:
var
(
--el-color-success
);
height
:
24px
;
right
:
-15px
;
text-align
:
center
;
top
:
-6px
;
transform
:
rotate
(
45deg
);
width
:
40px
}
.el-upload-list--picture-card
.el-upload-list__item-status-label
i
{
font-size
:
12px
;
margin-top
:
11px
;
transform
:
rotate
(
-45deg
)}
.el-upload-list--picture-card
.el-upload-list__item-actions
{
align-items
:
center
;
background-color
:
var
(
--el-overlay-color-lighter
);
color
:
#fff
;
cursor
:
default
;
display
:
inline-flex
;
font-size
:
20px
;
height
:
100%
;
justify-content
:
center
;
left
:
0
;
opacity
:
0
;
position
:
absolute
;
top
:
0
;
transition
:
opacity
var
(
--el-transition-duration
);
width
:
100%
}
.el-upload-list--picture-card
.el-upload-list__item-actions
span
{
cursor
:
pointer
;
display
:
none
}
.el-upload-list--picture-card
.el-upload-list__item-actions
span
+
span
{
margin-left
:
1rem
}
.el-upload-list--picture-card
.el-upload-list__item-actions
.el-upload-list__item-delete
{
color
:
inherit
;
font-size
:
inherit
;
position
:
static
}
.el-upload-list--picture-card
.el-upload-list__item-actions
:hover
{
opacity
:
1
}
.el-upload-list--picture-card
.el-upload-list__item-actions
:hover
span
{
display
:
inline-flex
}
.el-upload-list--picture-card
.el-progress
{
bottom
:
auto
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
width
:
126px
}
.el-upload-list--picture-card
.el-progress
.el-progress__text
{
top
:
50%
}
.el-upload-list--picture
.el-upload-list__item
{
align-items
:
center
;
background-color
:
var
(
--el-fill-color-blank
);
border
:
1px
solid
var
(
--el-border-color
);
border-radius
:
6px
;
box-sizing
:
border-box
;
display
:
flex
;
margin-top
:
10px
;
overflow
:
hidden
;
padding
:
10px
;
z-index
:
0
}
.el-upload-list--picture
.el-upload-list__item
.el-icon--check
,
.el-upload-list--picture
.el-upload-list__item
.el-icon--circle-check
{
color
:
#fff
}
.el-upload-list--picture
.el-upload-list__item
:hover
.el-upload-list__item-status-label
{
display
:
inline-flex
;
opacity
:
0
}
.el-upload-list--picture
.el-upload-list__item
:hover
.el-progress__text
{
display
:
block
}
.el-upload-list--picture
.el-upload-list__item.is-success
.el-upload-list__item-name
i
{
display
:
none
}
.el-upload-list--picture
.el-upload-list__item
.el-icon--close
{
top
:
5px
;
transform
:
translateY
(
0
)}
.el-upload-list--picture
.el-upload-list__item-thumbnail
{
align-items
:
center
;
background-color
:
var
(
--el-color-white
);
display
:
inline-flex
;
height
:
70px
;
justify-content
:
center
;
-o-object-fit
:
contain
;
object-fit
:
contain
;
position
:
relative
;
width
:
70px
;
z-index
:
1
}
.el-upload-list--picture
.el-upload-list__item-status-label
{
background
:
var
(
--el-color-success
);
height
:
26px
;
position
:
absolute
;
right
:
-17px
;
text-align
:
center
;
top
:
-7px
;
transform
:
rotate
(
45deg
);
width
:
46px
}
.el-upload-list--picture
.el-upload-list__item-status-label
i
{
font-size
:
12px
;
margin-top
:
12px
;
transform
:
rotate
(
-45deg
)}
.el-upload-list--picture
.el-progress
{
position
:
relative
;
top
:
-7px
}
.el-upload-cover
{
cursor
:
default
;
height
:
100%
;
left
:
0
;
overflow
:
hidden
;
position
:
absolute
;
top
:
0
;
width
:
100%
;
z-index
:
10
}
.el-upload-cover
:after
{
content
:
""
;
display
:
inline-block
;
height
:
100%
;
vertical-align
:
middle
}
.el-upload-cover
img
{
display
:
block
;
height
:
100%
;
width
:
100%
}
.el-upload-cover__label
{
background
:
var
(
--el-color-success
);
height
:
24px
;
right
:
-15px
;
text-align
:
center
;
top
:
-6px
;
transform
:
rotate
(
45deg
);
width
:
40px
}
.el-upload-cover__label
i
{
color
:
#fff
;
font-size
:
12px
;
margin-top
:
11px
;
transform
:
rotate
(
-45deg
)}
.el-upload-cover__progress
{
display
:
inline-block
;
position
:
static
;
vertical-align
:
middle
;
width
:
243px
}
.el-upload-cover__progress
+
.el-upload__inner
{
opacity
:
0
}
.el-upload-cover__content
{
height
:
100%
;
left
:
0
;
position
:
absolute
;
top
:
0
;
width
:
100%
}
.el-upload-cover__interact
{
background-color
:
var
(
--el-overlay-color-light
);
bottom
:
0
;
height
:
100%
;
left
:
0
;
position
:
absolute
;
text-align
:
center
;
width
:
100%
}
.el-upload-cover__interact
.btn
{
color
:
#fff
;
cursor
:
pointer
;
display
:
inline-block
;
font-size
:
14px
;
margin-top
:
60px
;
transition
:
var
(
--el-transition-md-fade
);
vertical-align
:
middle
}
.el-upload-cover__interact
.btn
i
{
margin-top
:
0
}
.el-upload-cover__interact
.btn
span
{
opacity
:
0
;
transition
:
opacity
.15s
linear
}
.el-upload-cover__interact
.btn
:not
(
:first-child
)
{
margin-left
:
35px
}
.el-upload-cover__interact
.btn
:hover
{
transform
:
translateY
(
-13px
)}
.el-upload-cover__interact
.btn
:hover
span
{
opacity
:
1
}
.el-upload-cover__interact
.btn
i
{
color
:
#fff
;
display
:
block
;
font-size
:
24px
;
line-height
:
inherit
;
margin
:
0
auto
5px
}
.el-upload-cover__title
{
background-color
:
#fff
;
bottom
:
0
;
color
:
var
(
--el-text-color-primary
);
font-size
:
14px
;
font-weight
:
400
;
height
:
36px
;
left
:
0
;
line-height
:
36px
;
margin
:
0
;
overflow
:
hidden
;
padding
:
0
10px
;
position
:
absolute
;
text-align
:
left
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
width
:
100%
}
.el-upload-cover
+
.el-upload__inner
{
opacity
:
0
;
position
:
relative
;
z-index
:
1
}
.el-progress
{
align-items
:
center
;
display
:
flex
;
line-height
:
1
;
position
:
relative
}
.el-progress__text
{
color
:
var
(
--el-text-color-regular
);
font-size
:
14px
;
line-height
:
1
;
margin-left
:
5px
;
min-width
:
50px
}
.el-progress__text
i
{
display
:
block
;
vertical-align
:
middle
}
.el-progress--circle
,
.el-progress--dashboard
{
display
:
inline-block
}
.el-progress--circle
.el-progress__text
,
.el-progress--dashboard
.el-progress__text
{
left
:
0
;
margin
:
0
;
position
:
absolute
;
text-align
:
center
;
top
:
50%
;
transform
:
translateY
(
-50%
);
width
:
100%
}
.el-progress--circle
.el-progress__text
i
,
.el-progress--dashboard
.el-progress__text
i
{
display
:
inline-block
;
vertical-align
:
middle
}
.el-progress--without-text
.el-progress__text
{
display
:
none
}
.el-progress--without-text
.el-progress-bar
{
display
:
block
;
margin-right
:
0
;
padding-right
:
0
}
.el-progress--text-inside
.el-progress-bar
{
margin-right
:
0
;
padding-right
:
0
}
.el-progress.is-success
.el-progress-bar__inner
{
background-color
:
var
(
--el-color-success
)}
.el-progress.is-success
.el-progress__text
{
color
:
var
(
--el-color-success
)}
.el-progress.is-warning
.el-progress-bar__inner
{
background-color
:
var
(
--el-color-warning
)}
.el-progress.is-warning
.el-progress__text
{
color
:
var
(
--el-color-warning
)}
.el-progress.is-exception
.el-progress-bar__inner
{
background-color
:
var
(
--el-color-danger
)}
.el-progress.is-exception
.el-progress__text
{
color
:
var
(
--el-color-danger
)}
.el-progress-bar
{
box-sizing
:
border-box
;
flex-grow
:
1
}
.el-progress-bar__outer
{
background-color
:
var
(
--el-border-color-lighter
);
border-radius
:
100px
;
height
:
6px
;
overflow
:
hidden
;
position
:
relative
;
vertical-align
:
middle
}
.el-progress-bar__inner
{
background-color
:
var
(
--el-color-primary
);
border-radius
:
100px
;
height
:
100%
;
left
:
0
;
line-height
:
1
;
position
:
absolute
;
text-align
:
right
;
top
:
0
;
transition
:
width
.6s
ease
;
white-space
:
nowrap
}
.el-progress-bar__inner
:after
{
content
:
""
;
display
:
inline-block
;
height
:
100%
;
vertical-align
:
middle
}
.el-progress-bar__inner--indeterminate
{
-webkit-animation
:
indeterminate
3s
infinite
;
animation
:
indeterminate
3s
infinite
;
transform
:
translateZ
(
0
)}
.el-progress-bar__inner--striped
{
background-image
:
linear-gradient
(
45deg
,
rgba
(
0
,
0
,
0
,
.1
)
25%
,
transparent
0
,
transparent
50%
,
rgba
(
0
,
0
,
0
,
.1
)
0
,
rgba
(
0
,
0
,
0
,
.1
)
75%
,
transparent
0
,
transparent
);
background-size
:
1.25em
1.25em
}
.el-progress-bar__inner--striped.el-progress-bar__inner--striped-flow
{
-webkit-animation
:
striped-flow
3s
linear
infinite
;
animation
:
striped-flow
3s
linear
infinite
}
.el-progress-bar__innerText
{
color
:
#fff
;
display
:
inline-block
;
font-size
:
12px
;
margin
:
0
5px
;
vertical-align
:
middle
}
@-webkit-keyframes
progress
{
0
%
{
background-position
:
0
0
}
to
{
background-position
:
32px
0
}}
@keyframes
progress
{
0
%
{
background-position
:
0
0
}
to
{
background-position
:
32px
0
}}
@-webkit-keyframes
indeterminate
{
0
%
{
left
:
-100%
}
to
{
left
:
100%
}}
@keyframes
indeterminate
{
0
%
{
left
:
-100%
}
to
{
left
:
100%
}}
@-webkit-keyframes
striped-flow
{
0
%
{
background-position
:
-100%
}
to
{
background-position
:
100%
}}
@keyframes
striped-flow
{
0
%
{
background-position
:
-100%
}
to
{
background-position
:
100%
}}
.el-button
{
--el-button-font-weight
:
var
(
--el-font-weight-primary
);
--el-button-border-color
:
var
(
--el-border-color
);
--el-button-bg-color
:
var
(
--el-fill-color-blank
);
--el-button-text-color
:
var
(
--el-text-color-regular
);
--el-button-disabled-text-color
:
var
(
--el-disabled-text-color
);
--el-button-disabled-bg-color
:
var
(
--el-fill-color-blank
);
--el-button-disabled-border-color
:
var
(
--el-border-color-light
);
--el-button-divide-border-color
:
rgba
(
255
,
255
,
255
,
.5
);
--el-button-hover-text-color
:
var
(
--el-color-primary
);
--el-button-hover-bg-color
:
var
(
--el-color-primary-light-9
);
--el-button-hover-border-color
:
var
(
--el-color-primary-light-7
);
--el-button-active-text-color
:
var
(
--el-button-hover-text-color
);
--el-button-active-border-color
:
var
(
--el-color-primary
);
--el-button-active-bg-color
:
var
(
--el-button-hover-bg-color
);
--el-button-outline-color
:
var
(
--el-color-primary-light-5
);
--el-button-hover-link-text-color
:
var
(
--el-color-info
);
--el-button-active-color
:
var
(
--el-text-color-primary
);
align-items
:
center
;
-webkit-appearance
:
none
;
background-color
:
var
(
--el-button-bg-color
);
border
:
var
(
--el-border
);
border-color
:
var
(
--el-button-border-color
);
border-radius
:
var
(
--el-border-radius-base
);
box-sizing
:
border-box
;
color
:
var
(
--el-button-text-color
);
cursor
:
pointer
;
display
:
inline-flex
;
font-size
:
var
(
--el-font-size-base
);
font-weight
:
var
(
--el-button-font-weight
);
height
:
32px
;
justify-content
:
center
;
line-height
:
1
;
outline
:
none
;
padding
:
8px
15px
;
text-align
:
center
;
transition
:
.1s
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
vertical-align
:
middle
;
white-space
:
nowrap
}
.el-button
:hover
{
background-color
:
var
(
--el-button-hover-bg-color
);
border-color
:
var
(
--el-button-hover-border-color
);
color
:
var
(
--el-button-hover-text-color
);
outline
:
none
}
.el-button
:active
{
background-color
:
var
(
--el-button-active-bg-color
);
border-color
:
var
(
--el-button-active-border-color
);
color
:
var
(
--el-button-active-text-color
);
outline
:
none
}
.el-button
:focus-visible
{
outline
:
2px
solid
var
(
--el-button-outline-color
);
outline-offset
:
1px
;
transition
:
outline-offset
0s
,
outline
0s
}
.el-button
>
span
{
align-items
:
center
;
display
:
inline-flex
}
.el-button
+
.el-button
{
margin-left
:
12px
}
.el-button.is-round
{
padding
:
8px
15px
}
.el-button
::-moz-focus-inner
{
border
:
0
}
.el-button
[
class
*=
el-icon
]+
span
{
margin-left
:
6px
}
.el-button
[
class
*=
el-icon
]
svg
{
vertical-align
:
bottom
}
.el-button.is-plain
{
--el-button-hover-text-color
:
var
(
--el-color-primary
);
--el-button-hover-bg-color
:
var
(
--el-fill-color-blank
);
--el-button-hover-border-color
:
var
(
--el-color-primary
)}
.el-button.is-active
{
background-color
:
var
(
--el-button-active-bg-color
);
border-color
:
var
(
--el-button-active-border-color
);
color
:
var
(
--el-button-active-text-color
);
outline
:
none
}
.el-button.is-disabled
,
.el-button.is-disabled
:hover
{
background-color
:
var
(
--el-button-disabled-bg-color
);
background-image
:
none
;
border-color
:
var
(
--el-button-disabled-border-color
);
color
:
var
(
--el-button-disabled-text-color
);
cursor
:
not-allowed
}
.el-button.is-loading
{
pointer-events
:
none
;
position
:
relative
}
.el-button.is-loading
:before
{
background-color
:
var
(
--el-mask-color-extra-light
);
border-radius
:
inherit
;
bottom
:
-1px
;
content
:
""
;
left
:
-1px
;
pointer-events
:
none
;
position
:
absolute
;
right
:
-1px
;
top
:
-1px
;
z-index
:
1
}
.el-button.is-round
{
border-radius
:
var
(
--el-border-radius-round
)}
.el-button.is-circle
{
border-radius
:
50%
;
padding
:
8px
;
width
:
32px
}
.el-button.is-text
{
background-color
:
transparent
;
border
:
0
solid
transparent
;
color
:
var
(
--el-button-text-color
)}
.el-button.is-text.is-disabled
{
background-color
:
transparent
!important
;
color
:
var
(
--el-button-disabled-text-color
)}
.el-button.is-text
:not
(
.is-disabled
)
:hover
{
background-color
:
var
(
--el-fill-color-light
)}
.el-button.is-text
:not
(
.is-disabled
)
:focus-visible
{
outline
:
2px
solid
var
(
--el-button-outline-color
);
outline-offset
:
1px
;
transition
:
outline-offset
0s
,
outline
0s
}
.el-button.is-text
:not
(
.is-disabled
)
:active
{
background-color
:
var
(
--el-fill-color
)}
.el-button.is-text
:not
(
.is-disabled
)
.is-has-bg
{
background-color
:
var
(
--el-fill-color-light
)}
.el-button.is-text
:not
(
.is-disabled
)
.is-has-bg
:hover
{
background-color
:
var
(
--el-fill-color
)}
.el-button.is-text
:not
(
.is-disabled
)
.is-has-bg
:active
{
background-color
:
var
(
--el-fill-color-dark
)}
.el-button__text--expand
{
letter-spacing
:
.3em
;
margin-right
:
-.3em
}
.el-button.is-link
{
background
:
transparent
;
border-color
:
transparent
;
color
:
var
(
--el-button-text-color
);
height
:
auto
;
padding
:
2px
}
.el-button.is-link
:hover
{
color
:
var
(
--el-button-hover-link-text-color
)}
.el-button.is-link.is-disabled
{
background-color
:
transparent
!important
;
border-color
:
transparent
!important
;
color
:
var
(
--el-button-disabled-text-color
)}
.el-button.is-link
:not
(
.is-disabled
)
:hover
{
background-color
:
transparent
;
border-color
:
transparent
}
.el-button.is-link
:not
(
.is-disabled
)
:active
{
background-color
:
transparent
;
border-color
:
transparent
;
color
:
var
(
--el-button-active-color
)}
.el-button--text
{
background
:
transparent
;
border-color
:
transparent
;
color
:
var
(
--el-color-primary
);
padding-left
:
0
;
padding-right
:
0
}
.el-button--text.is-disabled
{
background-color
:
transparent
!important
;
border-color
:
transparent
!important
;
color
:
var
(
--el-button-disabled-text-color
)}
.el-button--text
:not
(
.is-disabled
)
:hover
{
background-color
:
transparent
;
border-color
:
transparent
;
color
:
var
(
--el-color-primary-light-3
)}
.el-button--text
:not
(
.is-disabled
)
:active
{
background-color
:
transparent
;
border-color
:
transparent
;
color
:
var
(
--el-color-primary-dark-2
)}
.el-button__link--expand
{
letter-spacing
:
.3em
;
margin-right
:
-.3em
}
.el-button--primary
{
--el-button-text-color
:
var
(
--el-color-white
);
--el-button-bg-color
:
var
(
--el-color-primary
);
--el-button-border-color
:
var
(
--el-color-primary
);
--el-button-outline-color
:
var
(
--el-color-primary-light-5
);
--el-button-active-color
:
var
(
--el-color-primary-dark-2
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-link-text-color
:
var
(
--el-color-primary-light-5
);
--el-button-hover-bg-color
:
var
(
--el-color-primary-light-3
);
--el-button-hover-border-color
:
var
(
--el-color-primary-light-3
);
--el-button-active-bg-color
:
var
(
--el-color-primary-dark-2
);
--el-button-active-border-color
:
var
(
--el-color-primary-dark-2
);
--el-button-disabled-text-color
:
var
(
--el-color-white
);
--el-button-disabled-bg-color
:
var
(
--el-color-primary-light-5
);
--el-button-disabled-border-color
:
var
(
--el-color-primary-light-5
)}
.el-button--primary.is-link
,
.el-button--primary.is-plain
,
.el-button--primary.is-text
{
--el-button-text-color
:
var
(
--el-color-primary
);
--el-button-bg-color
:
var
(
--el-color-primary-light-9
);
--el-button-border-color
:
var
(
--el-color-primary-light-5
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-bg-color
:
var
(
--el-color-primary
);
--el-button-hover-border-color
:
var
(
--el-color-primary
);
--el-button-active-text-color
:
var
(
--el-color-white
)}
.el-button--primary.is-link.is-disabled
,
.el-button--primary.is-link.is-disabled
:active
,
.el-button--primary.is-link.is-disabled
:focus
,
.el-button--primary.is-link.is-disabled
:hover
,
.el-button--primary.is-plain.is-disabled
,
.el-button--primary.is-plain.is-disabled
:active
,
.el-button--primary.is-plain.is-disabled
:focus
,
.el-button--primary.is-plain.is-disabled
:hover
,
.el-button--primary.is-text.is-disabled
,
.el-button--primary.is-text.is-disabled
:active
,
.el-button--primary.is-text.is-disabled
:focus
,
.el-button--primary.is-text.is-disabled
:hover
{
background-color
:
var
(
--el-color-primary-light-9
);
border-color
:
var
(
--el-color-primary-light-8
);
color
:
var
(
--el-color-primary-light-5
)}
.el-button--success
{
--el-button-text-color
:
var
(
--el-color-white
);
--el-button-bg-color
:
var
(
--el-color-success
);
--el-button-border-color
:
var
(
--el-color-success
);
--el-button-outline-color
:
var
(
--el-color-success-light-5
);
--el-button-active-color
:
var
(
--el-color-success-dark-2
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-link-text-color
:
var
(
--el-color-success-light-5
);
--el-button-hover-bg-color
:
var
(
--el-color-success-light-3
);
--el-button-hover-border-color
:
var
(
--el-color-success-light-3
);
--el-button-active-bg-color
:
var
(
--el-color-success-dark-2
);
--el-button-active-border-color
:
var
(
--el-color-success-dark-2
);
--el-button-disabled-text-color
:
var
(
--el-color-white
);
--el-button-disabled-bg-color
:
var
(
--el-color-success-light-5
);
--el-button-disabled-border-color
:
var
(
--el-color-success-light-5
)}
.el-button--success.is-link
,
.el-button--success.is-plain
,
.el-button--success.is-text
{
--el-button-text-color
:
var
(
--el-color-success
);
--el-button-bg-color
:
var
(
--el-color-success-light-9
);
--el-button-border-color
:
var
(
--el-color-success-light-5
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-bg-color
:
var
(
--el-color-success
);
--el-button-hover-border-color
:
var
(
--el-color-success
);
--el-button-active-text-color
:
var
(
--el-color-white
)}
.el-button--success.is-link.is-disabled
,
.el-button--success.is-link.is-disabled
:active
,
.el-button--success.is-link.is-disabled
:focus
,
.el-button--success.is-link.is-disabled
:hover
,
.el-button--success.is-plain.is-disabled
,
.el-button--success.is-plain.is-disabled
:active
,
.el-button--success.is-plain.is-disabled
:focus
,
.el-button--success.is-plain.is-disabled
:hover
,
.el-button--success.is-text.is-disabled
,
.el-button--success.is-text.is-disabled
:active
,
.el-button--success.is-text.is-disabled
:focus
,
.el-button--success.is-text.is-disabled
:hover
{
background-color
:
var
(
--el-color-success-light-9
);
border-color
:
var
(
--el-color-success-light-8
);
color
:
var
(
--el-color-success-light-5
)}
.el-button--warning
{
--el-button-text-color
:
var
(
--el-color-white
);
--el-button-bg-color
:
var
(
--el-color-warning
);
--el-button-border-color
:
var
(
--el-color-warning
);
--el-button-outline-color
:
var
(
--el-color-warning-light-5
);
--el-button-active-color
:
var
(
--el-color-warning-dark-2
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-link-text-color
:
var
(
--el-color-warning-light-5
);
--el-button-hover-bg-color
:
var
(
--el-color-warning-light-3
);
--el-button-hover-border-color
:
var
(
--el-color-warning-light-3
);
--el-button-active-bg-color
:
var
(
--el-color-warning-dark-2
);
--el-button-active-border-color
:
var
(
--el-color-warning-dark-2
);
--el-button-disabled-text-color
:
var
(
--el-color-white
);
--el-button-disabled-bg-color
:
var
(
--el-color-warning-light-5
);
--el-button-disabled-border-color
:
var
(
--el-color-warning-light-5
)}
.el-button--warning.is-link
,
.el-button--warning.is-plain
,
.el-button--warning.is-text
{
--el-button-text-color
:
var
(
--el-color-warning
);
--el-button-bg-color
:
var
(
--el-color-warning-light-9
);
--el-button-border-color
:
var
(
--el-color-warning-light-5
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-bg-color
:
var
(
--el-color-warning
);
--el-button-hover-border-color
:
var
(
--el-color-warning
);
--el-button-active-text-color
:
var
(
--el-color-white
)}
.el-button--warning.is-link.is-disabled
,
.el-button--warning.is-link.is-disabled
:active
,
.el-button--warning.is-link.is-disabled
:focus
,
.el-button--warning.is-link.is-disabled
:hover
,
.el-button--warning.is-plain.is-disabled
,
.el-button--warning.is-plain.is-disabled
:active
,
.el-button--warning.is-plain.is-disabled
:focus
,
.el-button--warning.is-plain.is-disabled
:hover
,
.el-button--warning.is-text.is-disabled
,
.el-button--warning.is-text.is-disabled
:active
,
.el-button--warning.is-text.is-disabled
:focus
,
.el-button--warning.is-text.is-disabled
:hover
{
background-color
:
var
(
--el-color-warning-light-9
);
border-color
:
var
(
--el-color-warning-light-8
);
color
:
var
(
--el-color-warning-light-5
)}
.el-button--danger
{
--el-button-text-color
:
var
(
--el-color-white
);
--el-button-bg-color
:
var
(
--el-color-danger
);
--el-button-border-color
:
var
(
--el-color-danger
);
--el-button-outline-color
:
var
(
--el-color-danger-light-5
);
--el-button-active-color
:
var
(
--el-color-danger-dark-2
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-link-text-color
:
var
(
--el-color-danger-light-5
);
--el-button-hover-bg-color
:
var
(
--el-color-danger-light-3
);
--el-button-hover-border-color
:
var
(
--el-color-danger-light-3
);
--el-button-active-bg-color
:
var
(
--el-color-danger-dark-2
);
--el-button-active-border-color
:
var
(
--el-color-danger-dark-2
);
--el-button-disabled-text-color
:
var
(
--el-color-white
);
--el-button-disabled-bg-color
:
var
(
--el-color-danger-light-5
);
--el-button-disabled-border-color
:
var
(
--el-color-danger-light-5
)}
.el-button--danger.is-link
,
.el-button--danger.is-plain
,
.el-button--danger.is-text
{
--el-button-text-color
:
var
(
--el-color-danger
);
--el-button-bg-color
:
var
(
--el-color-danger-light-9
);
--el-button-border-color
:
var
(
--el-color-danger-light-5
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-bg-color
:
var
(
--el-color-danger
);
--el-button-hover-border-color
:
var
(
--el-color-danger
);
--el-button-active-text-color
:
var
(
--el-color-white
)}
.el-button--danger.is-link.is-disabled
,
.el-button--danger.is-link.is-disabled
:active
,
.el-button--danger.is-link.is-disabled
:focus
,
.el-button--danger.is-link.is-disabled
:hover
,
.el-button--danger.is-plain.is-disabled
,
.el-button--danger.is-plain.is-disabled
:active
,
.el-button--danger.is-plain.is-disabled
:focus
,
.el-button--danger.is-plain.is-disabled
:hover
,
.el-button--danger.is-text.is-disabled
,
.el-button--danger.is-text.is-disabled
:active
,
.el-button--danger.is-text.is-disabled
:focus
,
.el-button--danger.is-text.is-disabled
:hover
{
background-color
:
var
(
--el-color-danger-light-9
);
border-color
:
var
(
--el-color-danger-light-8
);
color
:
var
(
--el-color-danger-light-5
)}
.el-button--info
{
--el-button-text-color
:
var
(
--el-color-white
);
--el-button-bg-color
:
var
(
--el-color-info
);
--el-button-border-color
:
var
(
--el-color-info
);
--el-button-outline-color
:
var
(
--el-color-info-light-5
);
--el-button-active-color
:
var
(
--el-color-info-dark-2
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-link-text-color
:
var
(
--el-color-info-light-5
);
--el-button-hover-bg-color
:
var
(
--el-color-info-light-3
);
--el-button-hover-border-color
:
var
(
--el-color-info-light-3
);
--el-button-active-bg-color
:
var
(
--el-color-info-dark-2
);
--el-button-active-border-color
:
var
(
--el-color-info-dark-2
);
--el-button-disabled-text-color
:
var
(
--el-color-white
);
--el-button-disabled-bg-color
:
var
(
--el-color-info-light-5
);
--el-button-disabled-border-color
:
var
(
--el-color-info-light-5
)}
.el-button--info.is-link
,
.el-button--info.is-plain
,
.el-button--info.is-text
{
--el-button-text-color
:
var
(
--el-color-info
);
--el-button-bg-color
:
var
(
--el-color-info-light-9
);
--el-button-border-color
:
var
(
--el-color-info-light-5
);
--el-button-hover-text-color
:
var
(
--el-color-white
);
--el-button-hover-bg-color
:
var
(
--el-color-info
);
--el-button-hover-border-color
:
var
(
--el-color-info
);
--el-button-active-text-color
:
var
(
--el-color-white
)}
.el-button--info.is-link.is-disabled
,
.el-button--info.is-link.is-disabled
:active
,
.el-button--info.is-link.is-disabled
:focus
,
.el-button--info.is-link.is-disabled
:hover
,
.el-button--info.is-plain.is-disabled
,
.el-button--info.is-plain.is-disabled
:active
,
.el-button--info.is-plain.is-disabled
:focus
,
.el-button--info.is-plain.is-disabled
:hover
,
.el-button--info.is-text.is-disabled
,
.el-button--info.is-text.is-disabled
:active
,
.el-button--info.is-text.is-disabled
:focus
,
.el-button--info.is-text.is-disabled
:hover
{
background-color
:
var
(
--el-color-info-light-9
);
border-color
:
var
(
--el-color-info-light-8
);
color
:
var
(
--el-color-info-light-5
)}
.el-button--large
{
--el-button-size
:
40px
;
border-radius
:
var
(
--el-border-radius-base
);
font-size
:
var
(
--el-font-size-base
);
height
:
var
(
--el-button-size
);
padding
:
12px
19px
}
.el-button--large
[
class
*=
el-icon
]+
span
{
margin-left
:
8px
}
.el-button--large.is-round
{
padding
:
12px
19px
}
.el-button--large.is-circle
{
padding
:
12px
;
width
:
var
(
--el-button-size
)}
.el-button--small
{
--el-button-size
:
24px
;
border-radius
:
calc
(
var
(
--el-border-radius-base
)
-
1px
);
font-size
:
12px
;
height
:
var
(
--el-button-size
);
padding
:
5px
11px
}
.el-button--small
[
class
*=
el-icon
]+
span
{
margin-left
:
4px
}
.el-button--small.is-round
{
padding
:
5px
11px
}
.el-button--small.is-circle
{
padding
:
5px
;
width
:
var
(
--el-button-size
)}
.el-textarea
{
--el-input-text-color
:
var
(
--el-text-color-regular
);
--el-input-border
:
var
(
--el-border
);
--el-input-hover-border
:
var
(
--el-border-color-hover
);
--el-input-focus-border
:
var
(
--el-color-primary
);
--el-input-transparent-border
:
0
0
0
1px
transparent
inset
;
--el-input-border-color
:
var
(
--el-border-color
);
--el-input-border-radius
:
var
(
--el-border-radius-base
);
--el-input-bg-color
:
var
(
--el-fill-color-blank
);
--el-input-icon-color
:
var
(
--el-text-color-placeholder
);
--el-input-placeholder-color
:
var
(
--el-text-color-placeholder
);
--el-input-hover-border-color
:
var
(
--el-border-color-hover
);
--el-input-clear-hover-color
:
var
(
--el-text-color-secondary
);
--el-input-focus-border-color
:
var
(
--el-color-primary
);
--el-input-width
:
100%
;
display
:
inline-block
;
font-size
:
var
(
--el-font-size-base
);
position
:
relative
;
vertical-align
:
bottom
;
width
:
100%
}
.el-textarea__inner
{
-webkit-appearance
:
none
;
background-color
:
var
(
--el-input-bg-color
,
var
(
--el-fill-color-blank
));
background-image
:
none
;
border
:
none
;
border-radius
:
var
(
--el-input-border-radius
,
var
(
--el-border-radius-base
));
box-shadow
:
0
0
0
1px
var
(
--el-input-border-color
,
var
(
--el-border-color
))
inset
;
box-sizing
:
border-box
;
color
:
var
(
--el-input-text-color
,
var
(
--el-text-color-regular
));
display
:
block
;
font-family
:
inherit
;
font-size
:
inherit
;
line-height
:
1.5
;
padding
:
5px
11px
;
position
:
relative
;
resize
:
vertical
;
transition
:
var
(
--el-transition-box-shadow
);
width
:
100%
}
.el-textarea__inner
::-moz-placeholder
{
color
:
var
(
--el-input-placeholder-color
,
var
(
--el-text-color-placeholder
))}
.el-textarea__inner
:-ms-input-placeholder
{
color
:
var
(
--el-input-placeholder-color
,
var
(
--el-text-color-placeholder
))}
.el-textarea__inner
::placeholder
{
color
:
var
(
--el-input-placeholder-color
,
var
(
--el-text-color-placeholder
))}
.el-textarea__inner
:hover
{
box-shadow
:
0
0
0
1px
var
(
--el-input-hover-border-color
)
inset
}
.el-textarea__inner
:focus
{
box-shadow
:
0
0
0
1px
var
(
--el-input-focus-border-color
)
inset
;
outline
:
none
}
.el-textarea
.el-input__count
{
background
:
var
(
--el-fill-color-blank
);
bottom
:
5px
;
color
:
var
(
--el-color-info
);
font-size
:
12px
;
line-height
:
14px
;
position
:
absolute
;
right
:
10px
}
.el-textarea.is-disabled
.el-textarea__inner
{
background-color
:
var
(
--el-disabled-bg-color
);
box-shadow
:
0
0
0
1px
var
(
--el-disabled-border-color
)
inset
;
color
:
var
(
--el-disabled-text-color
);
cursor
:
not-allowed
}
.el-textarea.is-disabled
.el-textarea__inner
::-moz-placeholder
{
color
:
var
(
--el-text-color-placeholder
)}
.el-textarea.is-disabled
.el-textarea__inner
:-ms-input-placeholder
{
color
:
var
(
--el-text-color-placeholder
)}
.el-textarea.is-disabled
.el-textarea__inner
::placeholder
{
color
:
var
(
--el-text-color-placeholder
)}
.el-textarea.is-exceed
.el-textarea__inner
{
box-shadow
:
0
0
0
1px
var
(
--el-color-danger
)
inset
}
.el-textarea.is-exceed
.el-input__count
{
color
:
var
(
--el-color-danger
)}
.el-input
{
--el-input-text-color
:
var
(
--el-text-color-regular
);
--el-input-border
:
var
(
--el-border
);
--el-input-hover-border
:
var
(
--el-border-color-hover
);
--el-input-focus-border
:
var
(
--el-color-primary
);
--el-input-transparent-border
:
0
0
0
1px
transparent
inset
;
--el-input-border-color
:
var
(
--el-border-color
);
--el-input-border-radius
:
var
(
--el-border-radius-base
);
--el-input-bg-color
:
var
(
--el-fill-color-blank
);
--el-input-icon-color
:
var
(
--el-text-color-placeholder
);
--el-input-placeholder-color
:
var
(
--el-text-color-placeholder
);
--el-input-hover-border-color
:
var
(
--el-border-color-hover
);
--el-input-clear-hover-color
:
var
(
--el-text-color-secondary
);
--el-input-focus-border-color
:
var
(
--el-color-primary
);
--el-input-width
:
100%
;
--el-input-height
:
var
(
--el-component-size
);
box-sizing
:
border-box
;
display
:
inline-flex
;
font-size
:
var
(
--el-font-size-base
);
line-height
:
var
(
--el-input-height
);
position
:
relative
;
vertical-align
:
middle
;
width
:
var
(
--el-input-width
)}
.el-input
::-webkit-scrollbar
{
width
:
6px
;
z-index
:
11
}
.el-input
::-webkit-scrollbar:horizontal
{
height
:
6px
}
.el-input
::-webkit-scrollbar-thumb
{
background
:
var
(
--el-text-color-disabled
);
border-radius
:
5px
;
width
:
6px
}
.el-input
::-webkit-scrollbar-corner
,
.el-input
::-webkit-scrollbar-track
{
background
:
var
(
--el-fill-color-blank
)}
.el-input
::-webkit-scrollbar-track-piece
{
background
:
var
(
--el-fill-color-blank
);
width
:
6px
}
.el-input
.el-input__clear
,
.el-input
.el-input__password
{
color
:
var
(
--el-input-icon-color
);
cursor
:
pointer
;
font-size
:
14px
}
.el-input
.el-input__clear
:hover
,
.el-input
.el-input__password
:hover
{
color
:
var
(
--el-input-clear-hover-color
)}
.el-input
.el-input__count
{
align-items
:
center
;
color
:
var
(
--el-color-info
);
display
:
inline-flex
;
font-size
:
12px
;
height
:
100%
}
.el-input
.el-input__count
.el-input__count-inner
{
background
:
var
(
--el-fill-color-blank
);
display
:
inline-block
;
line-height
:
normal
;
padding-left
:
8px
}
.el-input__wrapper
{
align-items
:
center
;
background-color
:
var
(
--el-input-bg-color
,
var
(
--el-fill-color-blank
));
background-image
:
none
;
border-radius
:
var
(
--el-input-border-radius
,
var
(
--el-border-radius-base
));
box-shadow
:
0
0
0
1px
var
(
--el-input-border-color
,
var
(
--el-border-color
))
inset
;
cursor
:
text
;
display
:
inline-flex
;
flex-grow
:
1
;
justify-content
:
center
;
padding
:
1px
11px
;
transform
:
translateZ
(
0
);
transition
:
var
(
--el-transition-box-shadow
)}
.el-input__wrapper
:hover
{
box-shadow
:
0
0
0
1px
var
(
--el-input-hover-border-color
)
inset
}
.el-input__wrapper.is-focus
{
box-shadow
:
0
0
0
1px
var
(
--el-input-focus-border-color
)
inset
}
.el-input__inner
{
--el-input-inner-height
:
calc
(
var
(
--el-input-height
,
32px
)
-
2px
);
-webkit-appearance
:
none
;
background
:
none
;
border
:
none
;
box-sizing
:
border-box
;
color
:
var
(
--el-input-text-color
,
var
(
--el-text-color-regular
));
flex-grow
:
1
;
font-size
:
inherit
;
height
:
var
(
--el-input-inner-height
);
line-height
:
var
(
--el-input-inner-height
);
outline
:
none
;
padding
:
0
;
width
:
100%
}
.el-input__inner
:focus
{
outline
:
none
}
.el-input__inner
::-moz-placeholder
{
color
:
var
(
--el-input-placeholder-color
,
var
(
--el-text-color-placeholder
))}
.el-input__inner
:-ms-input-placeholder
{
color
:
var
(
--el-input-placeholder-color
,
var
(
--el-text-color-placeholder
))}
.el-input__inner
::placeholder
{
color
:
var
(
--el-input-placeholder-color
,
var
(
--el-text-color-placeholder
))}
.el-input__inner
[
type
=
password
]
::-ms-reveal
{
display
:
none
}
.el-input__inner
[
type
=
number
]
{
line-height
:
1
}
.el-input__prefix
{
color
:
var
(
--el-input-icon-color
,
var
(
--el-text-color-placeholder
));
display
:
inline-flex
;
flex-shrink
:
0
;
flex-wrap
:
nowrap
;
height
:
100%
;
pointer-events
:
none
;
text-align
:
center
;
transition
:
all
var
(
--el-transition-duration
);
white-space
:
nowrap
}
.el-input__prefix-inner
{
align-items
:
center
;
display
:
inline-flex
;
justify-content
:
center
;
pointer-events
:
all
}
.el-input__prefix-inner
>
:last-child
{
margin-right
:
8px
}
.el-input__prefix-inner
>
:first-child
,
.el-input__prefix-inner
>
:first-child
.el-input__icon
{
margin-left
:
0
}
.el-input__suffix
{
color
:
var
(
--el-input-icon-color
,
var
(
--el-text-color-placeholder
));
display
:
inline-flex
;
flex-shrink
:
0
;
flex-wrap
:
nowrap
;
height
:
100%
;
pointer-events
:
none
;
text-align
:
center
;
transition
:
all
var
(
--el-transition-duration
);
white-space
:
nowrap
}
.el-input__suffix-inner
{
align-items
:
center
;
display
:
inline-flex
;
justify-content
:
center
;
pointer-events
:
all
}
.el-input__suffix-inner
>
:first-child
{
margin-left
:
8px
}
.el-input
.el-input__icon
{
align-items
:
center
;
display
:
flex
;
height
:
inherit
;
justify-content
:
center
;
line-height
:
inherit
;
margin-left
:
8px
;
transition
:
all
var
(
--el-transition-duration
)}
.el-input__validateIcon
{
pointer-events
:
none
}
.el-input.is-active
.el-input__wrapper
{
box-shadow
:
0
0
0
1px
var
(
--el-input-focus-color
,
)
inset
}
.el-input.is-disabled
{
cursor
:
not-allowed
}
.el-input.is-disabled
.el-input__wrapper
{
background-color
:
var
(
--el-disabled-bg-color
);
box-shadow
:
0
0
0
1px
var
(
--el-disabled-border-color
)
inset
}
.el-input.is-disabled
.el-input__inner
{
color
:
var
(
--el-disabled-text-color
);
-webkit-text-fill-color
:
var
(
--el-disabled-text-color
);
cursor
:
not-allowed
}
.el-input.is-disabled
.el-input__inner
::-moz-placeholder
{
color
:
var
(
--el-text-color-placeholder
)}
.el-input.is-disabled
.el-input__inner
:-ms-input-placeholder
{
color
:
var
(
--el-text-color-placeholder
)}
.el-input.is-disabled
.el-input__inner
::placeholder
{
color
:
var
(
--el-text-color-placeholder
)}
.el-input.is-disabled
.el-input__icon
{
cursor
:
not-allowed
}
.el-input.is-exceed
.el-input__wrapper
{
box-shadow
:
0
0
0
1px
var
(
--el-color-danger
)
inset
}
.el-input.is-exceed
.el-input__suffix
.el-input__count
{
color
:
var
(
--el-color-danger
)}
.el-input--large
{
--el-input-height
:
var
(
--el-component-size-large
);
font-size
:
14px
}
.el-input--large
.el-input__wrapper
{
padding
:
1px
15px
}
.el-input--large
.el-input__inner
{
--el-input-inner-height
:
calc
(
var
(
--el-input-height
,
40px
)
-
2px
)}
.el-input--small
{
--el-input-height
:
var
(
--el-component-size-small
);
font-size
:
12px
}
.el-input--small
.el-input__wrapper
{
padding
:
1px
7px
}
.el-input--small
.el-input__inner
{
--el-input-inner-height
:
calc
(
var
(
--el-input-height
,
24px
)
-
2px
)}
.el-input-group
{
align-items
:
stretch
;
display
:
inline-flex
;
width
:
100%
}
.el-input-group__append
,
.el-input-group__prepend
{
align-items
:
center
;
background-color
:
var
(
--el-fill-color-light
);
border-radius
:
var
(
--el-input-border-radius
);
color
:
var
(
--el-color-info
);
display
:
inline-flex
;
justify-content
:
center
;
min-height
:
100%
;
padding
:
0
20px
;
position
:
relative
;
white-space
:
nowrap
}
.el-input-group__append
:focus
,
.el-input-group__prepend
:focus
{
outline
:
none
}
.el-input-group__append
.el-button
,
.el-input-group__append
.el-select
,
.el-input-group__prepend
.el-button
,
.el-input-group__prepend
.el-select
{
display
:
inline-block
;
margin
:
0
-20px
}
.el-input-group__append
button
.el-button
,
.el-input-group__append
button
.el-button
:hover
,
.el-input-group__append
div
.el-select
.el-select__wrapper
,
.el-input-group__append
div
.el-select
:hover
.el-select__wrapper
,
.el-input-group__prepend
button
.el-button
,
.el-input-group__prepend
button
.el-button
:hover
,
.el-input-group__prepend
div
.el-select
.el-select__wrapper
,
.el-input-group__prepend
div
.el-select
:hover
.el-select__wrapper
{
background-color
:
transparent
;
border-color
:
transparent
;
color
:
inherit
}
.el-input-group__append
.el-button
,
.el-input-group__append
.el-input
,
.el-input-group__prepend
.el-button
,
.el-input-group__prepend
.el-input
{
font-size
:
inherit
}
.el-input-group__prepend
{
border-bottom-right-radius
:
0
;
border-right
:
0
;
border-top-right-radius
:
0
;
box-shadow
:
1px
0
0
0
var
(
--el-input-border-color
)
inset
,
0
1px
0
0
var
(
--el-input-border-color
)
inset
,
0
-1px
0
0
var
(
--el-input-border-color
)
inset
}
.el-input-group__append
{
border-bottom-left-radius
:
0
;
border-left
:
0
;
border-top-left-radius
:
0
;
box-shadow
:
0
1px
0
0
var
(
--el-input-border-color
)
inset
,
0
-1px
0
0
var
(
--el-input-border-color
)
inset
,
-1px
0
0
0
var
(
--el-input-border-color
)
inset
}
.el-input-group--prepend
>
.el-input__wrapper
{
border-bottom-left-radius
:
0
;
border-top-left-radius
:
0
}
.el-input-group--prepend
.el-input-group__prepend
.el-select
.el-select__wrapper
{
border-bottom-right-radius
:
0
;
border-top-right-radius
:
0
;
box-shadow
:
1px
0
0
0
var
(
--el-input-border-color
)
inset
,
0
1px
0
0
var
(
--el-input-border-color
)
inset
,
0
-1px
0
0
var
(
--el-input-border-color
)
inset
}
.el-input-group--append
>
.el-input__wrapper
{
border-bottom-right-radius
:
0
;
border-top-right-radius
:
0
}
.el-input-group--append
.el-input-group__append
.el-select
.el-select__wrapper
{
border-bottom-left-radius
:
0
;
border-top-left-radius
:
0
;
box-shadow
:
0
1px
0
0
var
(
--el-input-border-color
)
inset
,
0
-1px
0
0
var
(
--el-input-border-color
)
inset
,
-1px
0
0
0
var
(
--el-input-border-color
)
inset
}
.el-input-hidden
{
display
:
none
!important
}
.el-alert
{
--el-alert-padding
:
8px
16px
;
--el-alert-border-radius-base
:
var
(
--el-border-radius-base
);
--el-alert-title-font-size
:
14px
;
--el-alert-title-with-description-font-size
:
16px
;
--el-alert-description-font-size
:
14px
;
--el-alert-close-font-size
:
16px
;
--el-alert-close-customed-font-size
:
14px
;
--el-alert-icon-size
:
16px
;
--el-alert-icon-large-size
:
28px
;
align-items
:
center
;
background-color
:
var
(
--el-color-white
);
border-radius
:
var
(
--el-alert-border-radius-base
);
box-sizing
:
border-box
;
display
:
flex
;
margin
:
0
;
opacity
:
1
;
overflow
:
hidden
;
padding
:
var
(
--el-alert-padding
);
position
:
relative
;
transition
:
opacity
var
(
--el-transition-duration-fast
);
width
:
100%
}
.el-alert.is-light
.el-alert__close-btn
{
color
:
var
(
--el-text-color-placeholder
)}
.el-alert.is-dark
.el-alert__close-btn
,
.el-alert.is-dark
.el-alert__description
{
color
:
var
(
--el-color-white
)}
.el-alert.is-center
{
justify-content
:
center
}
.el-alert--success
{
--el-alert-bg-color
:
var
(
--el-color-success-light-9
)}
.el-alert--success.is-light
{
background-color
:
var
(
--el-alert-bg-color
)}
.el-alert--success.is-light
,
.el-alert--success.is-light
.el-alert__description
{
color
:
var
(
--el-color-success
)}
.el-alert--success.is-dark
{
background-color
:
var
(
--el-color-success
);
color
:
var
(
--el-color-white
)}
.el-alert--info
{
--el-alert-bg-color
:
var
(
--el-color-info-light-9
)}
.el-alert--info.is-light
{
background-color
:
var
(
--el-alert-bg-color
)}
.el-alert--info.is-light
,
.el-alert--info.is-light
.el-alert__description
{
color
:
var
(
--el-color-info
)}
.el-alert--info.is-dark
{
background-color
:
var
(
--el-color-info
);
color
:
var
(
--el-color-white
)}
.el-alert--warning
{
--el-alert-bg-color
:
var
(
--el-color-warning-light-9
)}
.el-alert--warning.is-light
{
background-color
:
var
(
--el-alert-bg-color
)}
.el-alert--warning.is-light
,
.el-alert--warning.is-light
.el-alert__description
{
color
:
var
(
--el-color-warning
)}
.el-alert--warning.is-dark
{
background-color
:
var
(
--el-color-warning
);
color
:
var
(
--el-color-white
)}
.el-alert--error
{
--el-alert-bg-color
:
var
(
--el-color-error-light-9
)}
.el-alert--error.is-light
{
background-color
:
var
(
--el-alert-bg-color
)}
.el-alert--error.is-light
,
.el-alert--error.is-light
.el-alert__description
{
color
:
var
(
--el-color-error
)}
.el-alert--error.is-dark
{
background-color
:
var
(
--el-color-error
);
color
:
var
(
--el-color-white
)}
.el-alert__content
{
display
:
flex
;
flex-direction
:
column
;
gap
:
4px
}
.el-alert
.el-alert__icon
{
font-size
:
var
(
--el-alert-icon-size
);
margin-right
:
8px
;
width
:
var
(
--el-alert-icon-size
)}
.el-alert
.el-alert__icon.is-big
{
font-size
:
var
(
--el-alert-icon-large-size
);
margin-right
:
12px
;
width
:
var
(
--el-alert-icon-large-size
)}
.el-alert__title
{
font-size
:
var
(
--el-alert-title-font-size
);
line-height
:
24px
}
.el-alert__title.with-description
{
font-size
:
var
(
--el-alert-title-with-description-font-size
)}
.el-alert
.el-alert__description
{
font-size
:
var
(
--el-alert-description-font-size
);
margin
:
0
}
.el-alert
.el-alert__close-btn
{
cursor
:
pointer
;
font-size
:
var
(
--el-alert-close-font-size
);
opacity
:
1
;
position
:
absolute
;
right
:
16px
;
top
:
12px
}
.el-alert
.el-alert__close-btn.is-customed
{
font-size
:
var
(
--el-alert-close-customed-font-size
);
font-style
:
normal
;
line-height
:
24px
;
top
:
8px
}
.el-alert-fade-enter-from
,
.el-alert-fade-leave-active
{
opacity
:
0
}
.el-badge
{
--el-badge-bg-color
:
var
(
--el-color-danger
);
--el-badge-radius
:
10px
;
--el-badge-font-size
:
12px
;
--el-badge-padding
:
6px
;
--el-badge-size
:
18px
;
display
:
inline-block
;
position
:
relative
;
vertical-align
:
middle
;
width
:
-webkit-fit-content
;
width
:
-moz-fit-content
;
width
:
fit-content
}
.el-badge__content
{
align-items
:
center
;
background-color
:
var
(
--el-badge-bg-color
);
border
:
1px
solid
var
(
--el-bg-color
);
border-radius
:
var
(
--el-badge-radius
);
color
:
var
(
--el-color-white
);
display
:
inline-flex
;
font-size
:
var
(
--el-badge-font-size
);
height
:
var
(
--el-badge-size
);
justify-content
:
center
;
padding
:
0
var
(
--el-badge-padding
);
white-space
:
nowrap
}
.el-badge__content.is-fixed
{
position
:
absolute
;
right
:
calc
(
1px
+
var
(
--el-badge-size
)/
2
);
top
:
0
;
transform
:
translateY
(
-50%
)
translate
(
100%
);
z-index
:
var
(
--el-index-normal
)}
.el-badge__content.is-fixed.is-dot
{
right
:
5px
}
.el-badge__content.is-dot
{
border-radius
:
50%
;
height
:
8px
;
padding
:
0
;
right
:
0
;
width
:
8px
}
.el-badge__content--primary
{
background-color
:
var
(
--el-color-primary
)}
.el-badge__content--success
{
background-color
:
var
(
--el-color-success
)}
.el-badge__content--warning
{
background-color
:
var
(
--el-color-warning
)}
.el-badge__content--info
{
background-color
:
var
(
--el-color-info
)}
.el-badge__content--danger
{
background-color
:
var
(
--el-color-danger
)}
.el-message
{
--el-message-bg-color
:
var
(
--el-color-info-light-9
);
--el-message-border-color
:
var
(
--el-border-color-lighter
);
--el-message-padding
:
11px
15px
;
--el-message-close-size
:
16px
;
--el-message-close-icon-color
:
var
(
--el-text-color-placeholder
);
--el-message-close-hover-color
:
var
(
--el-text-color-secondary
);
align-items
:
center
;
background-color
:
var
(
--el-message-bg-color
);
border-color
:
var
(
--el-message-border-color
);
border-radius
:
var
(
--el-border-radius-base
);
border-style
:
var
(
--el-border-style
);
border-width
:
var
(
--el-border-width
);
box-sizing
:
border-box
;
display
:
flex
;
gap
:
8px
;
left
:
50%
;
max-width
:
calc
(
100%
-
32px
);
padding
:
var
(
--el-message-padding
);
position
:
fixed
;
top
:
20px
;
transform
:
translate
(
-50%
);
transition
:
opacity
var
(
--el-transition-duration
),
transform
.4s
,
top
.4s
;
width
:
-webkit-fit-content
;
width
:
-moz-fit-content
;
width
:
fit-content
}
.el-message.is-center
{
justify-content
:
center
}
.el-message.is-plain
{
background-color
:
var
(
--el-bg-color-overlay
);
border-color
:
var
(
--el-bg-color-overlay
);
box-shadow
:
var
(
--el-box-shadow-light
)}
.el-message
p
{
margin
:
0
}
.el-message--success
{
--el-message-bg-color
:
var
(
--el-color-success-light-9
);
--el-message-border-color
:
var
(
--el-color-success-light-8
);
--el-message-text-color
:
var
(
--el-color-success
)}
.el-message--success
.el-message__content
{
color
:
var
(
--el-message-text-color
);
overflow-wrap
:
break-word
}
.el-message
.el-message-icon--success
{
color
:
var
(
--el-message-text-color
)}
.el-message--info
{
--el-message-bg-color
:
var
(
--el-color-info-light-9
);
--el-message-border-color
:
var
(
--el-color-info-light-8
);
--el-message-text-color
:
var
(
--el-color-info
)}
.el-message--info
.el-message__content
{
color
:
var
(
--el-message-text-color
);
overflow-wrap
:
break-word
}
.el-message
.el-message-icon--info
{
color
:
var
(
--el-message-text-color
)}
.el-message--warning
{
--el-message-bg-color
:
var
(
--el-color-warning-light-9
);
--el-message-border-color
:
var
(
--el-color-warning-light-8
);
--el-message-text-color
:
var
(
--el-color-warning
)}
.el-message--warning
.el-message__content
{
color
:
var
(
--el-message-text-color
);
overflow-wrap
:
break-word
}
.el-message
.el-message-icon--warning
{
color
:
var
(
--el-message-text-color
)}
.el-message--error
{
--el-message-bg-color
:
var
(
--el-color-error-light-9
);
--el-message-border-color
:
var
(
--el-color-error-light-8
);
--el-message-text-color
:
var
(
--el-color-error
)}
.el-message--error
.el-message__content
{
color
:
var
(
--el-message-text-color
);
overflow-wrap
:
break-word
}
.el-message
.el-message-icon--error
{
color
:
var
(
--el-message-text-color
)}
.el-message
.el-message__badge
{
position
:
absolute
;
right
:
-8px
;
top
:
-8px
}
.el-message__content
{
font-size
:
14px
;
line-height
:
1
;
padding
:
0
}
.el-message__content
:focus
{
outline-width
:
0
}
.el-message
.el-message__closeBtn
{
color
:
var
(
--el-message-close-icon-color
);
cursor
:
pointer
;
font-size
:
var
(
--el-message-close-size
)}
.el-message
.el-message__closeBtn
:focus
{
outline-width
:
0
}
.el-message
.el-message__closeBtn
:hover
{
color
:
var
(
--el-message-close-hover-color
)}
.el-message-fade-enter-from
,
.el-message-fade-leave-to
{
opacity
:
0
;
transform
:
translate
(
-50%
,
-100%
)}
.container
[
data-v-d34e18fc
]
{
position
:
relative
;
width
:
100vw
;
height
:
100vh
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
background-color
:
#0000001
f
}
.alert
[
data-v-d34e18fc
]
{
position
:
absolute
;
top
:
2%
}
.login-form
[
data-v-d34e18fc
]
{
width
:
240px
;
height
:
220px
;
display
:
flex
;
flex-direction
:
column
;
padding
:
40px
;
text-align
:
center
;
position
:
relative
;
z-index
:
100
;
background
:
inherit
;
border-radius
:
18px
;
overflow
:
hidden
}
.login-form
[
data-v-d34e18fc
]
:before
{
content
:
""
;
width
:
calc
(
100%
+
20px
);
height
:
calc
(
100%
+
20px
);
position
:
absolute
;
top
:
-10px
;
left
:
-10px
;
overflow
:
hidden
;
background
:
inherit
;
box-shadow
:
inset
0
0
0
200px
#ffffff40
;
filter
:
blur
(
6px
);
z-index
:
-1
}
.login-form
h2
[
data-v-d34e18fc
]
{
font-size
:
18px
;
font-weight
:
400
;
color
:
#3d5245
}
.login-form
input
[
data-v-d34e18fc
],
.login-form
button
[
data-v-d34e18fc
]
{
margin
:
6px
0
;
height
:
36px
;
border
:
none
;
background-color
:
#ffffff4
d
;
border-radius
:
4px
;
padding
:
0
14px
;
color
:
#3d5245
}
.login-form
input
[
data-v-d34e18fc
]
::placeholder
{
color
:
#3d5245
}
.login-form
button
[
data-v-d34e18fc
]
:focus
,
.login-form
input
[
data-v-d34e18fc
]
:focus
{
outline
:
0
}
.login-form
button
[
data-v-d34e18fc
]
{
margin-top
:
24px
;
background-color
:
#39584566
;
color
:
#fff
;
position
:
relative
;
overflow
:
hidden
;
cursor
:
pointer
;
transition
:
.4s
}
.login-form
button
[
data-v-d34e18fc
]
:hover
{
background-color
:
#0c5026
ab
}
.el-form
[
data-v-d34e18fc
]
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
}
h2
[
data-v-d34e18fc
]
{
margin
:
10px
0
20px
}
.el-form-item
[
data-v-d34e18fc
]
{
width
:
250px
}
[
data-v-d34e18fc
]
.el-form-item__content
{
display
:
flex
;
justify-content
:
center
}
.login-btn
[
data-v-d34e18fc
]
{
display
:
flex
}
.el-container
{
box-sizing
:
border-box
;
display
:
flex
;
flex
:
1
;
flex-basis
:
auto
;
flex-direction
:
row
;
min-width
:
0
}
.el-container.is-vertical
{
flex-direction
:
column
}
.el-aside
{
box-sizing
:
border-box
;
flex-shrink
:
0
;
overflow
:
auto
;
width
:
var
(
--el-aside-width
,
300px
)}
.el-footer
{
--el-footer-padding
:
0
20px
;
--el-footer-height
:
60px
;
box-sizing
:
border-box
;
flex-shrink
:
0
;
height
:
var
(
--el-footer-height
);
padding
:
var
(
--el-footer-padding
)}
.el-header
{
--el-header-padding
:
0
20px
;
--el-header-height
:
60px
;
box-sizing
:
border-box
;
flex-shrink
:
0
;
height
:
var
(
--el-header-height
);
padding
:
var
(
--el-header-padding
)}
.el-main
{
--el-main-padding
:
20px
;
box-sizing
:
border-box
;
display
:
block
;
flex
:
1
;
flex-basis
:
auto
;
overflow
:
auto
;
padding
:
var
(
--el-main-padding
)}
.fade-in-linear-enter-active
,
.fade-in-linear-leave-active
{
transition
:
var
(
--el-transition-fade-linear
)}
.fade-in-linear-enter-from
,
.fade-in-linear-leave-to
{
opacity
:
0
}
.el-fade-in-linear-enter-active
,
.el-fade-in-linear-leave-active
{
transition
:
var
(
--el-transition-fade-linear
)}
.el-fade-in-linear-enter-from
,
.el-fade-in-linear-leave-to
{
opacity
:
0
}
.el-fade-in-enter-active
,
.el-fade-in-leave-active
{
transition
:
all
var
(
--el-transition-duration
)
cubic-bezier
(
.55
,
0
,
.1
,
1
)}
.el-fade-in-enter-from
,
.el-fade-in-leave-active
{
opacity
:
0
}
.el-zoom-in-center-enter-active
,
.el-zoom-in-center-leave-active
{
transition
:
all
var
(
--el-transition-duration
)
cubic-bezier
(
.55
,
0
,
.1
,
1
)}
.el-zoom-in-center-enter-from
,
.el-zoom-in-center-leave-active
{
opacity
:
0
;
transform
:
scaleX
(
0
)}
.el-zoom-in-top-enter-active
,
.el-zoom-in-top-leave-active
{
opacity
:
1
;
transform
:
scaleY
(
1
);
transform-origin
:
center
top
;
transition
:
var
(
--el-transition-md-fade
)}
.el-zoom-in-top-enter-active
[
data-popper-placement
^=
top
],
.el-zoom-in-top-leave-active
[
data-popper-placement
^=
top
]
{
transform-origin
:
center
bottom
}
.el-zoom-in-top-enter-from
,
.el-zoom-in-top-leave-active
{
opacity
:
0
;
transform
:
scaleY
(
0
)}
.el-zoom-in-bottom-enter-active
,
.el-zoom-in-bottom-leave-active
{
opacity
:
1
;
transform
:
scaleY
(
1
);
transform-origin
:
center
bottom
;
transition
:
var
(
--el-transition-md-fade
)}
.el-zoom-in-bottom-enter-from
,
.el-zoom-in-bottom-leave-active
{
opacity
:
0
;
transform
:
scaleY
(
0
)}
.el-zoom-in-left-enter-active
,
.el-zoom-in-left-leave-active
{
opacity
:
1
;
transform
:
scale
(
1
);
transform-origin
:
top
left
;
transition
:
var
(
--el-transition-md-fade
)}
.el-zoom-in-left-enter-from
,
.el-zoom-in-left-leave-active
{
opacity
:
0
;
transform
:
scale
(
.45
)}
.collapse-transition
{
transition
:
var
(
--el-transition-duration
)
height
ease-in-out
,
var
(
--el-transition-duration
)
padding-top
ease-in-out
,
var
(
--el-transition-duration
)
padding-bottom
ease-in-out
}
.el-collapse-transition-enter-active
,
.el-collapse-transition-leave-active
{
transition
:
var
(
--el-transition-duration
)
max-height
ease-in-out
,
var
(
--el-transition-duration
)
padding-top
ease-in-out
,
var
(
--el-transition-duration
)
padding-bottom
ease-in-out
}
.horizontal-collapse-transition
{
transition
:
var
(
--el-transition-duration
)
width
ease-in-out
,
var
(
--el-transition-duration
)
padding-left
ease-in-out
,
var
(
--el-transition-duration
)
padding-right
ease-in-out
}
.el-list-enter-active
,
.el-list-leave-active
{
transition
:
all
1s
}
.el-list-enter-from
,
.el-list-leave-to
{
opacity
:
0
;
transform
:
translateY
(
-30px
)}
.el-list-leave-active
{
position
:
absolute
!important
}
.el-opacity-transition
{
transition
:
opacity
var
(
--el-transition-duration
)
cubic-bezier
(
.55
,
0
,
.1
,
1
)}
:root
{
--el-menu-active-color
:
var
(
--el-color-primary
);
--el-menu-text-color
:
var
(
--el-text-color-primary
);
--el-menu-hover-text-color
:
var
(
--el-color-primary
);
--el-menu-bg-color
:
var
(
--el-fill-color-blank
);
--el-menu-hover-bg-color
:
var
(
--el-color-primary-light-9
);
--el-menu-item-height
:
56px
;
--el-menu-sub-item-height
:
calc
(
var
(
--el-menu-item-height
)
-
6px
);
--el-menu-horizontal-height
:
60px
;
--el-menu-horizontal-sub-item-height
:
36px
;
--el-menu-item-font-size
:
var
(
--el-font-size-base
);
--el-menu-item-hover-fill
:
var
(
--el-color-primary-light-9
);
--el-menu-border-color
:
var
(
--el-border-color
);
--el-menu-base-level-padding
:
20px
;
--el-menu-level-padding
:
20px
;
--el-menu-icon-width
:
24px
}
.el-menu
{
background-color
:
var
(
--el-menu-bg-color
);
border-right
:
1px
solid
var
(
--el-menu-border-color
);
box-sizing
:
border-box
;
list-style
:
none
;
margin
:
0
;
padding-left
:
0
;
position
:
relative
}
.el-menu--vertical
:not
(
.el-menu--collapse
)
:not
(
.el-menu--popup-container
)
.el-menu-item
,
.el-menu--vertical
:not
(
.el-menu--collapse
)
:not
(
.el-menu--popup-container
)
.el-menu-item-group__title
,
.el-menu--vertical
:not
(
.el-menu--collapse
)
:not
(
.el-menu--popup-container
)
.el-sub-menu__title
{
padding-left
:
calc
(
var
(
--el-menu-base-level-padding
)
+
var
(
--el-menu-level
)
*
var
(
--el-menu-level-padding
));
white-space
:
nowrap
}
.el-menu
:not
(
.el-menu--collapse
)
.el-sub-menu__title
{
padding-right
:
calc
(
var
(
--el-menu-base-level-padding
)
+
var
(
--el-menu-icon-width
))}
.el-menu--horizontal
{
border-right
:
none
;
display
:
flex
;
flex-wrap
:
nowrap
;
height
:
var
(
--el-menu-horizontal-height
)}
.el-menu--horizontal.el-menu--popup-container
{
height
:
unset
}
.el-menu--horizontal.el-menu
{
border-bottom
:
1px
solid
var
(
--el-menu-border-color
)}
.el-menu--horizontal
>
.el-menu-item
{
align-items
:
center
;
border-bottom
:
2px
solid
transparent
;
color
:
var
(
--el-menu-text-color
);
display
:
inline-flex
;
height
:
100%
;
justify-content
:
center
;
margin
:
0
}
.el-menu--horizontal
>
.el-menu-item
a
,
.el-menu--horizontal
>
.el-menu-item
a
:hover
{
color
:
inherit
}
.el-menu--horizontal
>
.el-sub-menu
:focus
,
.el-menu--horizontal
>
.el-sub-menu
:hover
{
outline
:
none
}
.el-menu--horizontal
>
.el-sub-menu
:hover
.el-sub-menu__title
{
color
:
var
(
--el-menu-hover-text-color
)}
.el-menu--horizontal
>
.el-sub-menu.is-active
.el-sub-menu__title
{
border-bottom
:
2px
solid
var
(
--el-menu-active-color
);
color
:
var
(
--el-menu-active-color
)}
.el-menu--horizontal
>
.el-sub-menu
.el-sub-menu__title
{
border-bottom
:
2px
solid
transparent
;
color
:
var
(
--el-menu-text-color
);
height
:
100%
}
.el-menu--horizontal
>
.el-sub-menu
.el-sub-menu__title
:hover
{
background-color
:
var
(
--el-menu-bg-color
)}
.el-menu--horizontal
.el-menu
.el-menu-item
,
.el-menu--horizontal
.el-menu
.el-sub-menu__title
{
align-items
:
center
;
background-color
:
var
(
--el-menu-bg-color
);
color
:
var
(
--el-menu-text-color
);
display
:
flex
;
height
:
var
(
--el-menu-horizontal-sub-item-height
);
line-height
:
var
(
--el-menu-horizontal-sub-item-height
);
padding
:
0
10px
}
.el-menu--horizontal
.el-menu
.el-sub-menu__title
{
padding-right
:
40px
}
.el-menu--horizontal
.el-menu
.el-menu-item.is-active
,
.el-menu--horizontal
.el-menu
.el-sub-menu.is-active
>
.el-sub-menu__title
{
color
:
var
(
--el-menu-active-color
)}
.el-menu--horizontal
.el-menu-item
:not
(
.is-disabled
)
:focus
,
.el-menu--horizontal
.el-menu-item
:not
(
.is-disabled
)
:hover
{
background-color
:
var
(
--el-menu-hover-bg-color
);
color
:
var
(
--el-menu-hover-text-color
);
outline
:
none
}
.el-menu--horizontal
>
.el-menu-item.is-active
{
border-bottom
:
2px
solid
var
(
--el-menu-active-color
);
color
:
var
(
--el-menu-active-color
)
!important
}
.el-menu--collapse
{
width
:
calc
(
var
(
--el-menu-icon-width
)
+
var
(
--el-menu-base-level-padding
)
*
2
)}
.el-menu--collapse
>
.el-menu-item
[
class
^=
el-icon
],
.el-menu--collapse
>
.el-menu-item-group
>
ul
>
.el-sub-menu
>
.el-sub-menu__title
[
class
^=
el-icon
],
.el-menu--collapse
>
.el-sub-menu
>
.el-sub-menu__title
[
class
^=
el-icon
]
{
margin
:
0
;
text-align
:
center
;
vertical-align
:
middle
;
width
:
var
(
--el-menu-icon-width
)}
.el-menu--collapse
>
.el-menu-item
.el-sub-menu__icon-arrow
,
.el-menu--collapse
>
.el-menu-item-group
>
ul
>
.el-sub-menu
>
.el-sub-menu__title
.el-sub-menu__icon-arrow
,
.el-menu--collapse
>
.el-sub-menu
>
.el-sub-menu__title
.el-sub-menu__icon-arrow
{
display
:
none
}
.el-menu--collapse
>
.el-menu-item-group
>
ul
>
.el-sub-menu
>
.el-sub-menu__title
>
span
,
.el-menu--collapse
>
.el-menu-item
>
span
,
.el-menu--collapse
>
.el-sub-menu
>
.el-sub-menu__title
>
span
{
display
:
inline-block
;
height
:
0
;
overflow
:
hidden
;
visibility
:
hidden
;
width
:
0
}
.el-menu--collapse
>
.el-menu-item.is-active
i
{
color
:
inherit
}
.el-menu--collapse
.el-menu
.el-sub-menu
{
min-width
:
200px
}
.el-menu--collapse
.el-sub-menu.is-active
.el-sub-menu__title
{
color
:
var
(
--el-menu-active-color
)}
.el-menu--popup
{
border
:
none
;
border-radius
:
var
(
--el-border-radius-small
);
box-shadow
:
var
(
--el-box-shadow-light
);
min-width
:
200px
;
padding
:
5px
0
;
z-index
:
100
}
.el-menu
.el-icon
{
flex-shrink
:
0
}
.el-menu-item
{
align-items
:
center
;
box-sizing
:
border-box
;
color
:
var
(
--el-menu-text-color
);
cursor
:
pointer
;
display
:
flex
;
font-size
:
var
(
--el-menu-item-font-size
);
height
:
var
(
--el-menu-item-height
);
line-height
:
var
(
--el-menu-item-height
);
list-style
:
none
;
padding
:
0
var
(
--el-menu-base-level-padding
);
position
:
relative
;
transition
:
border-color
var
(
--el-transition-duration
),
background-color
var
(
--el-transition-duration
),
color
var
(
--el-transition-duration
);
white-space
:
nowrap
}
.el-menu-item
*
{
vertical-align
:
bottom
}
.el-menu-item
i
{
color
:
inherit
}
.el-menu-item
:focus
,
.el-menu-item
:hover
{
outline
:
none
}
.el-menu-item
:hover
{
background-color
:
var
(
--el-menu-hover-bg-color
)}
.el-menu-item.is-disabled
{
background
:
none
!important
;
cursor
:
not-allowed
;
opacity
:
.25
}
.el-menu-item
[
class
^=
el-icon
]
{
font-size
:
18px
;
margin-right
:
5px
;
text-align
:
center
;
vertical-align
:
middle
;
width
:
var
(
--el-menu-icon-width
)}
.el-menu-item.is-active
{
color
:
var
(
--el-menu-active-color
)}
.el-menu-item.is-active
i
{
color
:
inherit
}
.el-menu-item
.el-menu-tooltip__trigger
{
align-items
:
center
;
box-sizing
:
border-box
;
display
:
inline-flex
;
height
:
100%
;
left
:
0
;
padding
:
0
var
(
--el-menu-base-level-padding
);
position
:
absolute
;
top
:
0
;
width
:
100%
}
.el-sub-menu
{
list-style
:
none
;
margin
:
0
;
padding-left
:
0
}
.el-sub-menu__title
{
align-items
:
center
;
box-sizing
:
border-box
;
color
:
var
(
--el-menu-text-color
);
cursor
:
pointer
;
display
:
flex
;
font-size
:
var
(
--el-menu-item-font-size
);
height
:
var
(
--el-menu-item-height
);
line-height
:
var
(
--el-menu-item-height
);
list-style
:
none
;
padding
:
0
var
(
--el-menu-base-level-padding
);
position
:
relative
;
transition
:
border-color
var
(
--el-transition-duration
),
background-color
var
(
--el-transition-duration
),
color
var
(
--el-transition-duration
);
white-space
:
nowrap
}
.el-sub-menu__title
*
{
vertical-align
:
bottom
}
.el-sub-menu__title
i
{
color
:
inherit
}
.el-sub-menu__title
:focus
,
.el-sub-menu__title
:hover
{
outline
:
none
}
.el-sub-menu__title.is-disabled
{
background
:
none
!important
;
cursor
:
not-allowed
;
opacity
:
.25
}
.el-sub-menu__title
:hover
{
background-color
:
var
(
--el-menu-hover-bg-color
)}
.el-sub-menu
.el-menu
{
border
:
none
}
.el-sub-menu
.el-menu-item
{
height
:
var
(
--el-menu-sub-item-height
);
line-height
:
var
(
--el-menu-sub-item-height
)}
.el-sub-menu__hide-arrow
.el-sub-menu__icon-arrow
{
display
:
none
!important
}
.el-sub-menu.is-active
.el-sub-menu__title
{
border-bottom-color
:
var
(
--el-menu-active-color
)}
.el-sub-menu.is-disabled
.el-menu-item
,
.el-sub-menu.is-disabled
.el-sub-menu__title
{
background
:
none
!important
;
cursor
:
not-allowed
;
opacity
:
.25
}
.el-sub-menu
.el-icon
{
font-size
:
18px
;
margin-right
:
5px
;
text-align
:
center
;
vertical-align
:
middle
;
width
:
var
(
--el-menu-icon-width
)}
.el-sub-menu
.el-icon.el-sub-menu__icon-more
{
margin-right
:
0
!important
}
.el-sub-menu
.el-sub-menu__icon-arrow
{
font-size
:
12px
;
margin-right
:
0
;
margin-top
:
-6px
;
position
:
absolute
;
right
:
var
(
--el-menu-base-level-padding
);
top
:
50%
;
transition
:
transform
var
(
--el-transition-duration
);
width
:
inherit
}
.el-menu-item-group
>
ul
{
padding
:
0
}
.el-menu-item-group__title
{
color
:
var
(
--el-text-color-secondary
);
font-size
:
12px
;
line-height
:
normal
;
padding
:
7px
0
7px
var
(
--el-menu-base-level-padding
)}
.horizontal-collapse-transition
.el-sub-menu__title
.el-sub-menu__icon-arrow
{
opacity
:
0
;
transition
:
var
(
--el-transition-duration-fast
)}
.el-popper
{
--el-popper-border-radius
:
var
(
--el-popover-border-radius
,
4px
);
border-radius
:
var
(
--el-popper-border-radius
);
font-size
:
12px
;
line-height
:
20px
;
min-width
:
10px
;
overflow-wrap
:
break-word
;
padding
:
5px
11px
;
position
:
absolute
;
visibility
:
visible
;
z-index
:
2000
}
.el-popper.is-dark
{
background
:
var
(
--el-text-color-primary
);
border
:
1px
solid
var
(
--el-text-color-primary
);
color
:
var
(
--el-bg-color
)}
.el-popper.is-dark
.el-popper__arrow
:before
{
background
:
var
(
--el-text-color-primary
);
border
:
1px
solid
var
(
--el-text-color-primary
);
right
:
0
}
.el-popper.is-light
{
background
:
var
(
--el-bg-color-overlay
);
border
:
1px
solid
var
(
--el-border-color-light
)}
.el-popper.is-light
.el-popper__arrow
:before
{
background
:
var
(
--el-bg-color-overlay
);
border
:
1px
solid
var
(
--el-border-color-light
);
right
:
0
}
.el-popper.is-pure
{
padding
:
0
}
.el-popper__arrow
{
height
:
10px
;
position
:
absolute
;
width
:
10px
;
z-index
:
-1
}
.el-popper__arrow
:before
{
background
:
var
(
--el-text-color-primary
);
box-sizing
:
border-box
;
content
:
" "
;
height
:
10px
;
position
:
absolute
;
transform
:
rotate
(
45deg
);
width
:
10px
;
z-index
:
-1
}
.el-popper
[
data-popper-placement
^=
top
]>
.el-popper__arrow
{
bottom
:
-5px
}
.el-popper
[
data-popper-placement
^=
top
]>
.el-popper__arrow
:before
{
border-bottom-right-radius
:
2px
}
.el-popper
[
data-popper-placement
^=
bottom
]>
.el-popper__arrow
{
top
:
-5px
}
.el-popper
[
data-popper-placement
^=
bottom
]>
.el-popper__arrow
:before
{
border-top-left-radius
:
2px
}
.el-popper
[
data-popper-placement
^=
left
]>
.el-popper__arrow
{
right
:
-5px
}
.el-popper
[
data-popper-placement
^=
left
]>
.el-popper__arrow
:before
{
border-top-right-radius
:
2px
}
.el-popper
[
data-popper-placement
^=
right
]>
.el-popper__arrow
{
left
:
-5px
}
.el-popper
[
data-popper-placement
^=
right
]>
.el-popper__arrow
:before
{
border-bottom-left-radius
:
2px
}
.el-popper
[
data-popper-placement
^=
top
]
.el-popper__arrow
:before
{
border-left-color
:
transparent
!important
;
border-top-color
:
transparent
!important
}
.el-popper
[
data-popper-placement
^=
bottom
]
.el-popper__arrow
:before
{
border-bottom-color
:
transparent
!important
;
border-right-color
:
transparent
!important
}
.el-popper
[
data-popper-placement
^=
left
]
.el-popper__arrow
:before
{
border-bottom-color
:
transparent
!important
;
border-left-color
:
transparent
!important
}
.el-popper
[
data-popper-placement
^=
right
]
.el-popper__arrow
:before
{
border-right-color
:
transparent
!important
;
border-top-color
:
transparent
!important
}
.el-menu
[
data-v-71bb3660
]
{
height
:
100%
}
.el-tag
{
--el-tag-font-size
:
12px
;
--el-tag-border-radius
:
4px
;
--el-tag-border-radius-rounded
:
9999px
;
--el-tag-bg-color
:
var
(
--el-color-primary-light-9
);
--el-tag-border-color
:
var
(
--el-color-primary-light-8
);
--el-tag-hover-color
:
var
(
--el-color-primary
);
align-items
:
center
;
background-color
:
var
(
--el-tag-bg-color
);
border-color
:
var
(
--el-tag-border-color
);
border-radius
:
var
(
--el-tag-border-radius
);
border-style
:
solid
;
border-width
:
1px
;
box-sizing
:
border-box
;
color
:
var
(
--el-tag-text-color
);
display
:
inline-flex
;
font-size
:
var
(
--el-tag-font-size
);
height
:
24px
;
justify-content
:
center
;
line-height
:
1
;
padding
:
0
9px
;
vertical-align
:
middle
;
white-space
:
nowrap
;
--el-icon-size
:
14px
}
.el-tag.el-tag--primary
{
--el-tag-bg-color
:
var
(
--el-color-primary-light-9
);
--el-tag-border-color
:
var
(
--el-color-primary-light-8
);
--el-tag-hover-color
:
var
(
--el-color-primary
)}
.el-tag.el-tag--success
{
--el-tag-bg-color
:
var
(
--el-color-success-light-9
);
--el-tag-border-color
:
var
(
--el-color-success-light-8
);
--el-tag-hover-color
:
var
(
--el-color-success
)}
.el-tag.el-tag--warning
{
--el-tag-bg-color
:
var
(
--el-color-warning-light-9
);
--el-tag-border-color
:
var
(
--el-color-warning-light-8
);
--el-tag-hover-color
:
var
(
--el-color-warning
)}
.el-tag.el-tag--danger
{
--el-tag-bg-color
:
var
(
--el-color-danger-light-9
);
--el-tag-border-color
:
var
(
--el-color-danger-light-8
);
--el-tag-hover-color
:
var
(
--el-color-danger
)}
.el-tag.el-tag--error
{
--el-tag-bg-color
:
var
(
--el-color-error-light-9
);
--el-tag-border-color
:
var
(
--el-color-error-light-8
);
--el-tag-hover-color
:
var
(
--el-color-error
)}
.el-tag.el-tag--info
{
--el-tag-bg-color
:
var
(
--el-color-info-light-9
);
--el-tag-border-color
:
var
(
--el-color-info-light-8
);
--el-tag-hover-color
:
var
(
--el-color-info
)}
.el-tag.el-tag--primary
{
--el-tag-text-color
:
var
(
--el-color-primary
)}
.el-tag.el-tag--success
{
--el-tag-text-color
:
var
(
--el-color-success
)}
.el-tag.el-tag--warning
{
--el-tag-text-color
:
var
(
--el-color-warning
)}
.el-tag.el-tag--danger
{
--el-tag-text-color
:
var
(
--el-color-danger
)}
.el-tag.el-tag--error
{
--el-tag-text-color
:
var
(
--el-color-error
)}
.el-tag.el-tag--info
{
--el-tag-text-color
:
var
(
--el-color-info
)}
.el-tag.is-hit
{
border-color
:
var
(
--el-color-primary
)}
.el-tag.is-round
{
border-radius
:
var
(
--el-tag-border-radius-rounded
)}
.el-tag
.el-tag__close
{
color
:
var
(
--el-tag-text-color
);
flex-shrink
:
0
}
.el-tag
.el-tag__close
:hover
{
background-color
:
var
(
--el-tag-hover-color
);
color
:
var
(
--el-color-white
)}
.el-tag
.el-icon
{
border-radius
:
50%
;
cursor
:
pointer
;
font-size
:
calc
(
var
(
--el-icon-size
)
-
2px
);
height
:
var
(
--el-icon-size
);
width
:
var
(
--el-icon-size
)}
.el-tag
.el-tag__close
{
margin-left
:
6px
}
.el-tag--dark
{
--el-tag-bg-color
:
var
(
--el-color-primary
);
--el-tag-border-color
:
var
(
--el-color-primary
);
--el-tag-hover-color
:
var
(
--el-color-primary-light-3
);
--el-tag-text-color
:
var
(
--el-color-white
)}
.el-tag--dark.el-tag--primary
{
--el-tag-bg-color
:
var
(
--el-color-primary
);
--el-tag-border-color
:
var
(
--el-color-primary
);
--el-tag-hover-color
:
var
(
--el-color-primary-light-3
)}
.el-tag--dark.el-tag--success
{
--el-tag-bg-color
:
var
(
--el-color-success
);
--el-tag-border-color
:
var
(
--el-color-success
);
--el-tag-hover-color
:
var
(
--el-color-success-light-3
)}
.el-tag--dark.el-tag--warning
{
--el-tag-bg-color
:
var
(
--el-color-warning
);
--el-tag-border-color
:
var
(
--el-color-warning
);
--el-tag-hover-color
:
var
(
--el-color-warning-light-3
)}
.el-tag--dark.el-tag--danger
{
--el-tag-bg-color
:
var
(
--el-color-danger
);
--el-tag-border-color
:
var
(
--el-color-danger
);
--el-tag-hover-color
:
var
(
--el-color-danger-light-3
)}
.el-tag--dark.el-tag--error
{
--el-tag-bg-color
:
var
(
--el-color-error
);
--el-tag-border-color
:
var
(
--el-color-error
);
--el-tag-hover-color
:
var
(
--el-color-error-light-3
)}
.el-tag--dark.el-tag--info
{
--el-tag-bg-color
:
var
(
--el-color-info
);
--el-tag-border-color
:
var
(
--el-color-info
);
--el-tag-hover-color
:
var
(
--el-color-info-light-3
)}
.el-tag--dark.el-tag--danger
,
.el-tag--dark.el-tag--error
,
.el-tag--dark.el-tag--info
,
.el-tag--dark.el-tag--primary
,
.el-tag--dark.el-tag--success
,
.el-tag--dark.el-tag--warning
{
--el-tag-text-color
:
var
(
--el-color-white
)}
.el-tag--plain
{
--el-tag-border-color
:
var
(
--el-color-primary-light-5
);
--el-tag-hover-color
:
var
(
--el-color-primary
);
--el-tag-bg-color
:
var
(
--el-fill-color-blank
)}
.el-tag--plain.el-tag--primary
{
--el-tag-bg-color
:
var
(
--el-fill-color-blank
);
--el-tag-border-color
:
var
(
--el-color-primary-light-5
);
--el-tag-hover-color
:
var
(
--el-color-primary
)}
.el-tag--plain.el-tag--success
{
--el-tag-bg-color
:
var
(
--el-fill-color-blank
);
--el-tag-border-color
:
var
(
--el-color-success-light-5
);
--el-tag-hover-color
:
var
(
--el-color-success
)}
.el-tag--plain.el-tag--warning
{
--el-tag-bg-color
:
var
(
--el-fill-color-blank
);
--el-tag-border-color
:
var
(
--el-color-warning-light-5
);
--el-tag-hover-color
:
var
(
--el-color-warning
)}
.el-tag--plain.el-tag--danger
{
--el-tag-bg-color
:
var
(
--el-fill-color-blank
);
--el-tag-border-color
:
var
(
--el-color-danger-light-5
);
--el-tag-hover-color
:
var
(
--el-color-danger
)}
.el-tag--plain.el-tag--error
{
--el-tag-bg-color
:
var
(
--el-fill-color-blank
);
--el-tag-border-color
:
var
(
--el-color-error-light-5
);
--el-tag-hover-color
:
var
(
--el-color-error
)}
.el-tag--plain.el-tag--info
{
--el-tag-bg-color
:
var
(
--el-fill-color-blank
);
--el-tag-border-color
:
var
(
--el-color-info-light-5
);
--el-tag-hover-color
:
var
(
--el-color-info
)}
.el-tag.is-closable
{
padding-right
:
5px
}
.el-tag--large
{
height
:
32px
;
padding
:
0
11px
;
--el-icon-size
:
16px
}
.el-tag--large
.el-tag__close
{
margin-left
:
8px
}
.el-tag--large.is-closable
{
padding-right
:
7px
}
.el-tag--small
{
height
:
20px
;
padding
:
0
7px
;
--el-icon-size
:
12px
}
.el-tag--small
.el-tag__close
{
margin-left
:
4px
}
.el-tag--small.is-closable
{
padding-right
:
3px
}
.el-tag--small
.el-icon-close
{
transform
:
scale
(
.8
)}
.el-tag.el-tag--primary.is-hit
{
border-color
:
var
(
--el-color-primary
)}
.el-tag.el-tag--success.is-hit
{
border-color
:
var
(
--el-color-success
)}
.el-tag.el-tag--warning.is-hit
{
border-color
:
var
(
--el-color-warning
)}
.el-tag.el-tag--danger.is-hit
{
border-color
:
var
(
--el-color-danger
)}
.el-tag.el-tag--error.is-hit
{
border-color
:
var
(
--el-color-error
)}
.el-tag.el-tag--info.is-hit
{
border-color
:
var
(
--el-color-info
)}
.el-select-dropdown.is-multiple
.el-select-dropdown__item.is-selected
:after
{
background-color
:
var
(
--el-color-primary
);
background-position
:
50%
;
background-repeat
:
no-repeat
;
border-right
:
none
;
border-top
:
none
;
content
:
""
;
height
:
12px
;
mask
:
url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
no-repeat
;
mask-size
:
100%
100%
;
-webkit-mask
:
url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
no-repeat
;
-webkit-mask-size
:
100%
100%
;
position
:
absolute
;
right
:
20px
;
top
:
50%
;
transform
:
translateY
(
-50%
);
width
:
12px
}
.el-scrollbar
{
--el-scrollbar-opacity
:
.3
;
--el-scrollbar-bg-color
:
var
(
--el-text-color-secondary
);
--el-scrollbar-hover-opacity
:
.5
;
--el-scrollbar-hover-bg-color
:
var
(
--el-text-color-secondary
);
height
:
100%
;
overflow
:
hidden
;
position
:
relative
}
.el-scrollbar__wrap
{
height
:
100%
;
overflow
:
auto
}
.el-scrollbar__wrap--hidden-default
{
scrollbar-width
:
none
}
.el-scrollbar__wrap--hidden-default
::-webkit-scrollbar
{
display
:
none
}
.el-scrollbar__thumb
{
background-color
:
var
(
--el-scrollbar-bg-color
,
var
(
--el-text-color-secondary
));
border-radius
:
inherit
;
cursor
:
pointer
;
display
:
block
;
height
:
0
;
opacity
:
var
(
--el-scrollbar-opacity
,
.3
);
position
:
relative
;
transition
:
var
(
--el-transition-duration
)
background-color
;
width
:
0
}
.el-scrollbar__thumb
:hover
{
background-color
:
var
(
--el-scrollbar-hover-bg-color
,
var
(
--el-text-color-secondary
));
opacity
:
var
(
--el-scrollbar-hover-opacity
,
.5
)}
.el-scrollbar__bar
{
border-radius
:
4px
;
bottom
:
2px
;
position
:
absolute
;
right
:
2px
;
z-index
:
1
}
.el-scrollbar__bar.is-vertical
{
top
:
2px
;
width
:
6px
}
.el-scrollbar__bar.is-vertical
>
div
{
width
:
100%
}
.el-scrollbar__bar.is-horizontal
{
height
:
6px
;
left
:
2px
}
.el-scrollbar__bar.is-horizontal
>
div
{
height
:
100%
}
.el-scrollbar-fade-enter-active
{
transition
:
opacity
.34s
ease-out
}
.el-scrollbar-fade-leave-active
{
transition
:
opacity
.12s
ease-out
}
.el-scrollbar-fade-enter-from
,
.el-scrollbar-fade-leave-active
{
opacity
:
0
}
.el-select-dropdown
{
border-radius
:
var
(
--el-border-radius-base
);
box-sizing
:
border-box
;
z-index
:
calc
(
var
(
--el-index-top
)
+
1
)}
.el-select-dropdown
.el-scrollbar.is-empty
.el-select-dropdown__list
{
padding
:
0
}
.el-select-dropdown__empty
,
.el-select-dropdown__loading
{
color
:
var
(
--el-text-color-secondary
);
font-size
:
var
(
--el-select-font-size
);
margin
:
0
;
padding
:
10px
0
;
text-align
:
center
}
.el-select-dropdown__wrap
{
max-height
:
274px
}
.el-select-dropdown__list
{
box-sizing
:
border-box
;
list-style
:
none
;
margin
:
0
;
padding
:
6px
0
}
.el-select-dropdown__list.el-vl__window
{
margin
:
6px
0
;
padding
:
0
}
.el-select-dropdown__header
{
border-bottom
:
1px
solid
var
(
--el-border-color-light
);
padding
:
10px
}
.el-select-dropdown__footer
{
border-top
:
1px
solid
var
(
--el-border-color-light
);
padding
:
10px
}
.el-select-dropdown__item
{
box-sizing
:
border-box
;
color
:
var
(
--el-text-color-regular
);
cursor
:
pointer
;
font-size
:
var
(
--el-font-size-base
);
height
:
34px
;
line-height
:
34px
;
overflow
:
hidden
;
padding
:
0
32px
0
20px
;
position
:
relative
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}
.el-select-dropdown__item.is-hovering
{
background-color
:
var
(
--el-fill-color-light
)}
.el-select-dropdown__item.is-selected
{
color
:
var
(
--el-color-primary
);
font-weight
:
700
}
.el-select-dropdown__item.is-disabled
{
background-color
:
unset
;
color
:
var
(
--el-text-color-placeholder
);
cursor
:
not-allowed
}
.el-select-dropdown.is-multiple
.el-select-dropdown__item.is-selected
:after
{
background-color
:
var
(
--el-color-primary
);
background-position
:
50%
;
background-repeat
:
no-repeat
;
border-right
:
none
;
border-top
:
none
;
content
:
""
;
height
:
12px
;
mask
:
url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
no-repeat
;
mask-size
:
100%
100%
;
-webkit-mask
:
url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
no-repeat
;
-webkit-mask-size
:
100%
100%
;
position
:
absolute
;
right
:
20px
;
top
:
50%
;
transform
:
translateY
(
-50%
);
width
:
12px
}
.el-select-dropdown.is-multiple
.el-select-dropdown__item.is-disabled
:after
{
background-color
:
var
(
--el-text-color-placeholder
)}
.el-select-group
{
margin
:
0
;
padding
:
0
}
.el-select-group__wrap
{
list-style
:
none
;
margin
:
0
;
padding
:
0
;
position
:
relative
}
.el-select-group__title
{
color
:
var
(
--el-color-info
);
font-size
:
12px
;
line-height
:
34px
;
padding-left
:
20px
}
.el-select-group
.el-select-dropdown__item
{
padding-left
:
20px
}
.el-select
{
--el-select-border-color-hover
:
var
(
--el-border-color-hover
);
--el-select-disabled-color
:
var
(
--el-disabled-text-color
);
--el-select-disabled-border
:
var
(
--el-disabled-border-color
);
--el-select-font-size
:
var
(
--el-font-size-base
);
--el-select-close-hover-color
:
var
(
--el-text-color-secondary
);
--el-select-input-color
:
var
(
--el-text-color-placeholder
);
--el-select-multiple-input-color
:
var
(
--el-text-color-regular
);
--el-select-input-focus-border-color
:
var
(
--el-color-primary
);
--el-select-input-font-size
:
14px
;
--el-select-width
:
100%
;
display
:
inline-block
;
position
:
relative
;
vertical-align
:
middle
;
width
:
var
(
--el-select-width
)}
.el-select__wrapper
{
align-items
:
center
;
background-color
:
var
(
--el-fill-color-blank
);
border-radius
:
var
(
--el-border-radius-base
);
box-shadow
:
0
0
0
1px
var
(
--el-border-color
)
inset
;
box-sizing
:
border-box
;
cursor
:
pointer
;
display
:
flex
;
font-size
:
14px
;
gap
:
6px
;
line-height
:
24px
;
min-height
:
32px
;
padding
:
4px
12px
;
position
:
relative
;
text-align
:
left
;
transition
:
var
(
--el-transition-duration
)}
.el-select__wrapper
:hover
{
box-shadow
:
0
0
0
1px
var
(
--el-text-color
)
inset
}
.el-select__wrapper.is-filterable
{
cursor
:
text
}
.el-select__wrapper.is-focused
{
box-shadow
:
0
0
0
1px
var
(
--el-color-primary
)
inset
}
.el-select__wrapper.is-hovering
:not
(
.is-focused
)
{
box-shadow
:
0
0
0
1px
var
(
--el-border-color-hover
)
inset
}
.el-select__wrapper.is-disabled
{
background-color
:
var
(
--el-fill-color-light
);
box-shadow
:
0
0
0
1px
var
(
--el-select-disabled-border
)
inset
;
color
:
var
(
--el-text-color-placeholder
);
cursor
:
not-allowed
}
.el-select__wrapper.is-disabled
:hover
{
box-shadow
:
0
0
0
1px
var
(
--el-select-disabled-border
)
inset
}
.el-select__wrapper.is-disabled.is-focus
{
box-shadow
:
0
0
0
1px
var
(
--el-input-focus-border-color
)
inset
}
.el-select__wrapper.is-disabled
.el-select__selected-item
{
color
:
var
(
--el-select-disabled-color
)}
.el-select__wrapper.is-disabled
.el-select__caret
,
.el-select__wrapper.is-disabled
.el-tag
{
cursor
:
not-allowed
}
.el-select__prefix
,
.el-select__suffix
{
align-items
:
center
;
color
:
var
(
--el-input-icon-color
,
var
(
--el-text-color-placeholder
));
display
:
flex
;
flex-shrink
:
0
;
gap
:
6px
}
.el-select__caret
{
color
:
var
(
--el-select-input-color
);
cursor
:
pointer
;
font-size
:
var
(
--el-select-input-font-size
);
transform
:
rotate
(
0
);
transition
:
var
(
--el-transition-duration
)}
.el-select__caret.is-reverse
{
transform
:
rotate
(
180deg
)}
.el-select__selection
{
align-items
:
center
;
display
:
flex
;
flex
:
1
;
flex-wrap
:
wrap
;
gap
:
6px
;
min-width
:
0
;
position
:
relative
}
.el-select__selection.is-near
{
margin-left
:
-8px
}
.el-select__selection
.el-tag
{
border-color
:
transparent
;
cursor
:
pointer
}
.el-select__selection
.el-tag
.el-tag__content
{
min-width
:
0
}
.el-select__selected-item
{
display
:
flex
;
flex-wrap
:
wrap
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
}
.el-select__tags-text
{
line-height
:
normal
}
.el-select__placeholder
,
.el-select__tags-text
{
display
:
block
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}
.el-select__placeholder
{
color
:
var
(
--el-input-text-color
,
var
(
--el-text-color-regular
));
position
:
absolute
;
top
:
50%
;
transform
:
translateY
(
-50%
);
width
:
100%
}
.el-select__placeholder.is-transparent
{
color
:
var
(
--el-text-color-placeholder
);
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
}
.el-select__popper.el-popper
{
background
:
var
(
--el-bg-color-overlay
);
border
:
1px
solid
var
(
--el-border-color-light
);
box-shadow
:
var
(
--el-box-shadow-light
)}
.el-select__popper.el-popper
.el-popper__arrow
:before
{
border
:
1px
solid
var
(
--el-border-color-light
)}
.el-select__popper.el-popper
[
data-popper-placement
^=
top
]
.el-popper__arrow
:before
{
border-left-color
:
transparent
;
border-top-color
:
transparent
}
.el-select__popper.el-popper
[
data-popper-placement
^=
bottom
]
.el-popper__arrow
:before
{
border-bottom-color
:
transparent
;
border-right-color
:
transparent
}
.el-select__popper.el-popper
[
data-popper-placement
^=
left
]
.el-popper__arrow
:before
{
border-bottom-color
:
transparent
;
border-left-color
:
transparent
}
.el-select__popper.el-popper
[
data-popper-placement
^=
right
]
.el-popper__arrow
:before
{
border-right-color
:
transparent
;
border-top-color
:
transparent
}
.el-select__input-wrapper
{
max-width
:
100%
}
.el-select__input-wrapper.is-hidden
{
opacity
:
0
;
position
:
absolute
}
.el-select__input
{
-webkit-appearance
:
none
;
-moz-appearance
:
none
;
appearance
:
none
;
background-color
:
transparent
;
border
:
none
;
color
:
var
(
--el-select-multiple-input-color
);
font-family
:
inherit
;
font-size
:
inherit
;
height
:
24px
;
max-width
:
100%
;
outline
:
none
;
padding
:
0
}
.el-select__input.is-disabled
{
cursor
:
not-allowed
}
.el-select__input-calculator
{
left
:
0
;
max-width
:
100%
;
overflow
:
hidden
;
position
:
absolute
;
top
:
0
;
visibility
:
hidden
;
white-space
:
pre
}
.el-select--large
.el-select__wrapper
{
font-size
:
14px
;
gap
:
6px
;
line-height
:
24px
;
min-height
:
40px
;
padding
:
8px
16px
}
.el-select--large
.el-select__selection
{
gap
:
6px
}
.el-select--large
.el-select__selection.is-near
{
margin-left
:
-8px
}
.el-select--large
.el-select__prefix
,
.el-select--large
.el-select__suffix
{
gap
:
6px
}
.el-select--large
.el-select__input
{
height
:
24px
}
.el-select--small
.el-select__wrapper
{
font-size
:
12px
;
gap
:
4px
;
line-height
:
20px
;
min-height
:
24px
;
padding
:
2px
8px
}
.el-select--small
.el-select__selection
{
gap
:
4px
}
.el-select--small
.el-select__selection.is-near
{
margin-left
:
-6px
}
.el-select--small
.el-select__prefix
,
.el-select--small
.el-select__suffix
{
gap
:
4px
}
.el-select--small
.el-select__input
{
height
:
20px
}
.headers
[
data-v-2b3d2786
]
{
display
:
flex
;
align-items
:
center
;
height
:
100%
}
h2
[
data-v-2b3d2786
]
{
font-size
:
20px
;
font-weight
:
bolder
;
color
:
#fff
;
width
:
100px
;
text-align
:
justify
;
text-align-last
:
justify
;
margin-right
:
80px
}
.el-container
[
data-v-8f24779c
]
{
height
:
100%
}
.el-main
[
data-v-8f24779c
]
{
--el-main-padding
:
30px
}
.el-header
[
data-v-8f24779c
]
{
background-color
:
#545c64
;
border-bottom
:
1px
solid
#ffffff
;
box-sizing
:
border-box
;
height
:
50px
}
html
,
body
,
div
,
span
,
applet
,
object
,
iframe
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
p
,
blockquote
,
pre
,
a
,
abbr
,
acronym
,
address
,
big
,
cite
,
code
,
del
,
dfn
,
em
,
img
,
ins
,
kbd
,
q
,
s
,
samp
,
small
,
strike
,
sub
,
sup
,
tt
,
var
,
b
,
u
,
i
,
center
,
dl
,
dt
,
dd
,
ol
,
ul
,
li
,
fieldset
,
form
,
label
,
legend
,
table
,
caption
,
tbody
,
tfoot
,
thead
,
tr
,
th
,
td
,
article
,
aside
,
canvas
,
details
,
embed
,
figure
,
figcaption
,
footer
,
header
,
hgroup
,
menu
,
nav
,
output
,
ruby
,
section
,
summary
,
time
,
mark
,
audio
{
padding
:
0
;
margin
:
0
;
font
:
inherit
;
font-size
:
100%
;
vertical-align
:
baseline
;
border
:
0
;
font-family
:
Source
Han
Sans
CN
,
Source
Han
Sans
CN
}
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
hgroup
,
menu
,
nav
,
section
{
display
:
block
}
body
{
padding
:
0
;
margin
:
0
}
ol
,
ul
{
list-style
:
none
}
blockquote
,
q
{
quotes
:
none
}
blockquote
:before
,
blockquote
:after
,
q
:before
,
q
:after
{
content
:
""
;
content
:
none
}
table
{
border-spacing
:
0
;
border-collapse
:
collapse
}
html
,
body
,
#app
{
width
:
100%
;
height
:
100%
;
padding
:
0
;
margin
:
0
}
:-webkit-any
(
article
,
aside
,
nav
,
section
)
h1
{
font-size
:
2em
}
dist/index.html
浏览文件 @
73172069
...
...
@@ -5,8 +5,8 @@
<link
rel=
"icon"
href=
"/lq-control/favicon.ico"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<title>
管理中心
</title>
<script
type=
"module"
crossorigin
src=
"/lq-control/assets/index-D
O6WOE4z
.js"
></script>
<link
rel=
"stylesheet"
crossorigin
href=
"/lq-control/assets/index-
-zuAVKGa
.css"
>
<script
type=
"module"
crossorigin
src=
"/lq-control/assets/index-D
48jZVNT
.js"
></script>
<link
rel=
"stylesheet"
crossorigin
href=
"/lq-control/assets/index-
CGb-n9UQ
.css"
>
</head>
<body>
<div
id=
"app"
></div>
...
...
src/components/logs.vue
浏览文件 @
73172069
<
template
>
<el-dialog
v-model=
"show"
:title=
"title"
width=
"60%"
@
close=
"handleClose"
>
<el-scrollbar
height=
"600px"
style=
"background-color: black; color: #ffffff; padding: 12px"
>
<p
v-for=
"(item, index) in logsText"
:key=
"index"
style=
"margin-bottom: 3px"
>
{{
item
}}
</p>
</el-scrollbar>
</el-dialog>
</
template
>
<
script
setup
lang=
"ts"
>
import
{
getLogs
}
from
'@/api'
const
show
=
ref
(
false
)
const
logsText
=
ref
()
const
title
=
ref
()
const
init
=
async
(
row
:
any
,
logsMinutes
:
number
)
=>
{
title
.
value
=
row
.
name
+
'日志'
const
res
:
any
=
await
getLogs
({
containerId
:
row
.
containerId
,
timeInMinutes
:
logsMinutes
})
if
(
res
.
code
===
200
)
{
logsText
.
value
=
res
.
data
console
.
log
(
logsText
.
value
)
}
}
const
handleClose
=
()
=>
{
show
.
value
=
false
logsText
.
value
=
null
}
defineExpose
({
show
,
init
})
</
script
>
<
style
scoped
></
style
>
<
template
>
<el-dialog
v-model=
"show"
:title=
"title"
width=
"60%"
@
close=
"handleClose"
>
<el-scrollbar
height=
"600px"
style=
"background-color: black; color: #ffffff; padding: 12px"
>
<p
v-for=
"(item, index) in logsText"
:key=
"index"
style=
"margin-bottom: 3px"
>
{{
item
}}
</p>
</el-scrollbar>
<div
style=
"margin-top: 20px; text-align: end"
>
<el-input-number
v-model=
"num"
:min=
"1"
style=
"margin-right: 20px"
/>
<el-button
type=
"primary"
@
click=
"init(rowData, num)"
>
刷新日志
</el-button>
</div>
</el-dialog>
</
template
>
<
script
setup
lang=
"ts"
>
import
{
getLogs
}
from
'@/api'
const
show
=
ref
(
false
)
const
logsText
=
ref
()
const
title
=
ref
()
const
rowData
=
ref
()
const
num
=
ref
(
1
)
const
init
=
async
(
row
:
any
,
logsMinutes
:
number
)
=>
{
rowData
.
value
=
row
num
.
value
=
logsMinutes
title
.
value
=
row
.
name
+
'日志'
const
res
:
any
=
await
getLogs
({
containerId
:
row
.
containerId
,
timeInMinutes
:
logsMinutes
})
if
(
res
.
code
===
200
)
{
logsText
.
value
=
res
.
data
ElMessage
.
success
(
'获取日志成功'
)
}
else
{
ElMessage
.
error
(
'获取日志失败'
)
}
}
const
handleClose
=
()
=>
{
show
.
value
=
false
logsText
.
value
=
null
rowData
.
value
=
null
num
.
value
=
1
}
defineExpose
({
show
,
init
})
</
script
>
<
style
scoped
></
style
>
src/layout/uilts/menuList.ts
浏览文件 @
73172069
...
...
@@ -14,21 +14,21 @@ export const menuList = [
path
:
'/imageManagement'
,
name
:
'容器管理'
},
{
index
:
4
,
path
:
'/jarManagement'
,
name
:
'jar包管理'
},
{
index
:
5
,
path
:
'/execute'
,
name
:
'执行计划'
},
{
index
:
6
,
path
:
'/syncConfig'
,
name
:
'产品管理'
},
//
{
//
index: 4,
//
path: '/jarManagement',
//
name: 'jar包管理'
//
},
//
{
//
index: 5,
//
path: '/execute',
//
name: '执行计划'
//
},
//
{
//
index: 6,
//
path: '/syncConfig',
//
name: '产品管理'
//
},
{
index
:
7
,
path
:
'/systemBackup'
,
...
...
src/types/components.d.ts
浏览文件 @
73172069
...
...
@@ -22,6 +22,7 @@ declare module 'vue' {
ElHeader
:
typeof
import
(
'element-plus/es'
)[
'ElHeader'
]
ElIcon
:
typeof
import
(
'element-plus/es'
)[
'ElIcon'
]
ElInput
:
typeof
import
(
'element-plus/es'
)[
'ElInput'
]
ElInputNumber
:
typeof
import
(
'element-plus/es'
)[
'ElInputNumber'
]
ElLink
:
typeof
import
(
'element-plus/es'
)[
'ElLink'
]
ElMain
:
typeof
import
(
'element-plus/es'
)[
'ElMain'
]
ElMenu
:
typeof
import
(
'element-plus/es'
)[
'ElMenu'
]
...
...
src/views/systemBackup/index.vue
浏览文件 @
73172069
<
template
>
<el-alert
:title=
"alertMsg"
type=
"warning"
show-icon
:closable=
"false"
style=
"margin-bottom: 30px"
/>
<div
v-loading=
"loading"
class=
"card-container"
style=
"display: flex; width: 100%"
>
<el-card>
<template
#
header
>
<div
class=
"card-header"
>
<span>
备份
</span>
<el-tag
:type=
"handleBackupStatus().tag"
>
{{
handleBackupStatus
().
msg
}}
</el-tag>
</div>
</
template
>
<div>
<el-button
type=
"primary"
size=
"small"
:disabled=
"backup.status"
@
click=
"handleBackup"
>
系统备份
</el-button
>
<div
v-show=
"backup.status"
style=
"margin-top: 20px"
>
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-bottom: 10px"
>
备份进度
</el-link>
<el-progress
:percentage=
"backup.progress"
striped
striped-flow
:duration=
"10"
/>
</div>
</div>
</el-card>
<el-card>
<
template
#
header
>
<div
class=
"card-header"
>
<span>
下载
</span>
<el-tag
:type=
"!downloadBackup.status ? 'info' : 'primary'"
>
{{
!
downloadBackup
.
status
?
'未下载'
:
'下载中'
}}
</el-tag>
</div>
</
template
>
<div>
<el-button
type=
"primary"
size=
"small"
:disabled=
"downloadBackup.status"
@
click=
"handleDownBackup"
>
下载备份
</el-button
>
<div
v-if=
"downloadBackup.status"
style=
"margin-top: 20px"
>
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-bottom: 10px"
>
下载进度
</el-link>
<el-progress
:percentage=
"downloadBackup.progress"
striped
striped-flow
:duration=
"10"
/>
</div>
</div>
</el-card>
<el-card>
<
template
#
header
>
<div
class=
"card-header"
>
<span>
还原
</span>
<el-tag
:type=
"handleReductionBackupStatus()?.tag"
>
{{
handleReductionBackupStatus
()?.
msg
}}
</el-tag>
</div>
</
template
>
<div>
<el-button
type=
"primary"
size=
"small"
:disabled=
"reductionBackup.status"
@
click=
"handleSelectFile"
>
还原系统
</el-button
>
<div
v-if=
"reductionBackup.status"
style=
"margin-top: 20px"
>
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-bottom: 10px"
>
上传进度
</el-link>
<el-progress
:percentage=
"reductionBackup.progress"
:status=
"reductionBackup.progress == 100 ? 'success' : ''"
striped
striped-flow
:duration=
"10"
/>
</div>
<div
v-if=
"reductionBackup.reductionStatus"
style=
"margin-top: 20px"
>
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-bottom: 10px"
>
备份进度
</el-link>
<el-progress
:percentage=
"reductionBackup.reductionProgress"
:status=
"reductionBackup.reductionProgress == 100 ? 'success' : ''"
striped
striped-flow
:duration=
"10"
/>
</div>
</div>
</el-card>
</div>
<input
ref=
"uploadRef"
type=
"file"
style=
"display: none"
@
change=
"handleFileChange"
/>
</template>
<
script
setup
lang=
"ts"
>
import
{
useBackupStore
}
from
'@/stores/modules/backup'
import
{
useTenantStore
}
from
'@/stores/modules/tenant'
import
{
dayjs
}
from
'element-plus'
import
{
saveAs
}
from
'file-saver'
import
axios
from
'axios'
const
backupStore
=
useBackupStore
()
const
tenantStore
=
useTenantStore
()
const
tenantId
=
computed
(()
=>
tenantStore
.
getTenantId
)
const
backup
=
computed
(()
=>
backupStore
.
getBackup
)
const
downloadBackup
=
computed
(()
=>
backupStore
.
getDownloadBackup
)
const
reductionBackup
=
computed
(()
=>
backupStore
.
getReductionBackup
)
const
loading
=
ref
(
true
)
const
uploadFile
=
ref
()
const
uploadRef
=
ref
()
const
polling
=
ref
()
const
reductionPolling
=
ref
()
const
alertMsg
=
'请不要同时操作，等待某个功能操作进度条结束后再进行其他操作； 系统备份进行下载与还原功能时，禁止刷新页面，否则会导致操作失败，请耐心等待！'
const
handleBackupStatus
=
()
=>
{
const
progress
=
backup
.
value
.
progress
const
status
:
any
=
{
100
:
{
tag
:
'success'
,
msg
:
'已备份'
},
0
:
{
tag
:
'info'
,
msg
:
'未备份'
}
}
return
status
[
progress
]
||
{
tag
:
'primary'
,
msg
:
'备份中'
}
}
const
handleReductionBackupStatus
=
()
=>
{
const
{
status
,
reductionStatus
}
=
reductionBackup
.
value
const
statusMap
:
any
=
{
'false-false'
:
{
tag
:
'info'
,
msg
:
'未同步'
},
'true-false'
:
{
tag
:
'primary'
,
msg
:
'上传中'
},
'true-true'
:
{
tag
:
'primary'
,
msg
:
'还原中'
}
}
return
statusMap
[
`
${
status
}
-
${
reductionStatus
}
`
]
||
null
}
const
handleBackup
=
()
=>
{
if
(
downloadBackup
.
value
.
status
)
return
ElMessage
.
warning
(
'下载备份中，请等待下载完成后备份系统！'
)
ElMessageBox
.
confirm
(
`
${
backup
.
value
.
progress
==
100
?
'已存在备份系统，是否要重新备份'
:
'是否要备份'
}
系统？`
,
'提示'
,
{
confirmButtonText
:
'确认'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
}
)
.
then
(()
=>
{
backupStore
.
backup
.
status
=
true
backupStore
.
backup
.
progress
=
undefined
axios
.
get
(
`/admin/api/docker/backSystem?tenantId=
${
tenantId
.
value
}
`
,
{
timeout
:
5000
})
.
catch
(()
=>
{
backupStore
.
setDownloadProgress
(
tenantId
.
value
)
startPolling
(
3000
)
})
})
.
catch
(()
=>
{
ElMessage
({
type
:
'info'
,
message
:
'取消备份'
})
})
}
const
handleDownBackup
=
()
=>
{
if
(
backup
.
value
.
status
)
return
ElMessage
.
warning
(
'备份中，请等待备份完成后下载备份！'
)
if
(
backup
.
value
.
progress
===
0
)
return
ElMessage
.
warning
(
'未备份系统，请先备份系统！'
)
ElMessageBox
.
confirm
(
'确认下载系统备份'
,
'提示'
,
{
confirmButtonText
:
'确认'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
})
.
then
(
async
()
=>
{
downloadFile
(
'/admin/api/docker/backDownload'
,
1024
*
1024
*
10
,
tenantId
.
value
)
})
.
catch
(()
=>
{
ElMessage
({
type
:
'info'
,
message
:
'取消下载系统备份'
})
})
}
const
startPolling
=
(
interval
:
number
)
=>
{
const
checkProgress
=
()
=>
{
if
(
backup
.
value
.
progress
===
100
||
backup
.
value
.
progress
===
0
)
{
stopPolling
()
return
true
// 表示已完成
}
return
false
// 表示尚未完成
}
const
poll
=
()
=>
{
backupStore
.
setDownloadProgress
(
tenantId
.
value
)
// console.log('🚀 ~ startPolling ~ backup.value.progress:', backup.value.progress)
if
(
!
checkProgress
())
{
polling
.
value
=
setTimeout
(
poll
,
interval
)
}
}
poll
()
// 开始轮询
}
const
stopPolling
=
()
=>
{
backupStore
.
backup
.
progress
=
undefined
backupStore
.
backup
.
status
=
false
clearTimeout
(
polling
.
value
)
}
const
startReductionPolling
=
(
interval
:
number
)
=>
{
const
checkProgress
=
()
=>
{
if
(
reductionBackup
.
value
.
reductionProgress
>=
100
||
reductionBackup
.
value
.
reductionProgress
==
undefined
)
{
stopReductionPolling
()
return
true
// 表示已完成
}
return
false
// 表示尚未完成
}
const
poll
=
()
=>
{
backupStore
.
setReductionProgress
(
tenantId
.
value
)
if
(
!
checkProgress
())
{
polling
.
value
=
setTimeout
(
poll
,
interval
)
}
}
poll
()
// 开始轮询
}
const
stopReductionPolling
=
()
=>
{
console
.
log
(
'停止还原系统'
)
// 已经上传完成了,更新上传进度
backupStore
.
setReductionBackupProgress
(
0
,
1
)
backupStore
.
setReductionBackupStatus
(
false
,
1
)
// 开始还原进度
backupStore
.
setReductionBackupProgress
(
0
,
0
)
backupStore
.
setReductionBackupStatus
(
false
,
0
)
clearTimeout
(
reductionPolling
.
value
)
}
const
downloadFile
=
async
(
url
:
string
,
chunkSize
:
any
,
tenantId
:
string
)
=>
{
backupStore
.
setDownloadBackupStatus
(
true
)
backupStore
.
setDownloadBackupProgress
(
0
)
const
fullUrl
=
`
${
url
}
?tenantId=
${
tenantId
}
`
// 获取文件的总大小
const
headResponse
=
await
axios
.
head
(
fullUrl
)
const
totalSize
=
parseInt
(
headResponse
.
headers
[
'content-length'
],
10
)
const
numChunks
=
Math
.
ceil
(
totalSize
/
chunkSize
)
const
chunks
:
any
[]
=
[]
for
(
let
i
=
0
;
i
<
numChunks
;
i
++
)
{
const
start
=
i
*
chunkSize
const
end
=
Math
.
min
(
start
+
chunkSize
-
1
,
totalSize
-
1
)
try
{
const
chunkResponse
=
await
axios
.
get
(
fullUrl
,
{
headers
:
{
Range
:
`bytes=
${
start
}
-
${
end
}
`
},
responseType
:
'blob'
})
if
(
chunkResponse
.
status
!==
206
)
{
throw
new
Error
(
`Error fetching chunk
${
i
+
1
}
:
${
chunkResponse
.
statusText
}
`
)
}
// 提取 Blob 数据
chunks
.
push
(
chunkResponse
.
data
)
// console.log(`Downloaded chunk ${i + 1}/${numChunks}`)
downloadBackup
.
value
.
progress
=
parseFloat
((((
i
+
1
)
/
numChunks
)
*
100
).
toFixed
(
2
))
}
catch
(
error
)
{
console
.
error
(
error
)
return
}
}
// 创建一个新的 Blob 对象，用于合并所有的分片
const
finalBlob
=
new
Blob
(
chunks
,
{
type
:
'application/zip;charset=utf-8'
})
saveAs
(
finalBlob
,
`
${
tenantStore
.
getTenantName
}
-
${
dayjs
().
format
(
'YYYY-MM-DD'
)}
.zip`
)
backupStore
.
setDownloadBackupStatus
(
false
)
ElMessage
.
success
(
'文件下载成功'
)
}
const
handleSelectFile
=
async
()
=>
{
const
{
data
}
=
await
axios
.
get
(
`/admin/api/docker/revertSystemCheck?tenantId=
${
tenantStore
.
getTenantId
}
`
)
if
(
data
.
code
===
200
)
ElMessageBox
.
confirm
(
'确认还原此系统？'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
}).
then
(()
=>
{
axios
.
get
(
`/admin/api/docker/revertSystem?tenantId=
${
tenantId
.
value
}
`
,
{
timeout
:
5000
})
.
catch
(()
=>
{
backupStore
.
setReductionProgress
(
tenantId
.
value
)
setTimeout
(()
=>
{
handleReductionPolling
()
},
3000
)
})
})
else
if
(
data
.
code
===
201
)
uploadRef
.
value
.
click
()
else
if
(
data
.
code
===
202
)
ElMessage
.
warning
(
'当前环境已经部署，如果要还原，请先清空当前环境docker的容器与镜像！'
)
}
const
handleFileChange
=
(
event
:
any
)
=>
{
const
files
=
event
.
target
.
files
if
(
files
.
length
>
1
)
{
ElMessage
.
warning
(
'只能上传一个文件'
)
uploadFile
.
value
=
''
return
}
if
(
files
.
length
===
1
)
{
if
(
files
[
0
].
type
!==
'application/zip'
)
{
ElMessage
.
warning
(
'只允许上传 .zip 文件'
)
uploadFile
.
value
=
''
}
else
{
uploadFile
.
value
=
files
[
0
]
uploadFileInChunks
(
files
[
0
])
}
}
}
const
uploadFileInChunks
=
async
(
file
:
any
)
=>
{
if
(
!
uploadFile
.
value
)
return
ElMessage
.
warning
(
'请先选择文件'
)
backupStore
.
setReductionBackupStatus
(
true
)
const
chunkSize
=
1024
*
1024
*
2
const
totalChunks
=
Math
.
ceil
(
file
.
size
/
chunkSize
)
for
(
let
index
=
0
;
index
<
totalChunks
;
index
++
)
{
const
start
=
index
*
chunkSize
const
end
=
Math
.
min
(
start
+
chunkSize
,
file
.
size
)
const
chunk
=
file
.
slice
(
start
,
end
)
const
success
=
await
uploadChunk
(
chunk
,
file
.
name
,
file
.
size
,
index
+
1
,
totalChunks
)
if
(
!
success
)
return
if
(
success
===
200
)
{
// 上传分片完成后，执行调用系统还原接口
return
}
backupStore
.
setReductionBackupProgress
(
Math
.
round
(((
index
+
1
)
/
totalChunks
)
*
100
))
}
}
const
uploadChunk
=
async
(
chunk
:
File
,
fileName
:
string
,
totalSize
:
string
,
index
:
any
,
totalChunks
:
any
)
=>
{
const
formData
=
new
FormData
()
formData
.
append
(
'data'
,
chunk
)
formData
.
append
(
'name'
,
fileName
)
formData
.
append
(
'totalSize'
,
totalSize
)
formData
.
append
(
'total'
,
totalChunks
)
formData
.
append
(
'index'
,
index
)
formData
.
append
(
'tenantId'
,
tenantStore
.
getTenantId
)
try
{
const
response
=
await
axios
.
post
(
'/admin/api/docker/doPost'
,
formData
,
{
headers
:
{
'Content-Type'
:
'multipart/form-data'
}
})
if
(
response
.
data
.
status
===
201
)
{
return
true
}
else
if
(
response
.
data
.
status
===
502
)
{
// 上传失败，正在重试块上传...
await
delay
(
200
)
return
uploadChunk
(
chunk
,
fileName
,
totalSize
,
index
,
totalChunks
)
// Retry
}
else
if
(
response
.
data
.
status
===
200
)
{
await
mergeChunks
()
return
200
}
else
return
false
}
catch
(
error
)
{
console
.
error
(
'Error uploading chunk:'
,
error
)
ElMessage
.
error
(
'文件上传失败'
)
backupStore
.
setReductionBackupStatus
(
false
)
backupStore
.
setReductionBackupProgress
(
0
)
return
false
}
}
const
mergeChunks
=
async
()
=>
{
try
{
const
response
=
await
axios
.
get
(
'/admin/api/docker/merge'
,
{
params
:
{
tenantId
:
tenantStore
.
getTenantId
}
})
if
(
response
.
data
.
code
==
200
)
{
axios
.
get
(
`/admin/api/docker/revertSystem?tenantId=
${
tenantId
.
value
}
`
,
{
timeout
:
5000
})
.
catch
((
err
)
=>
{
backupStore
.
setReductionProgress
(
tenantId
.
value
)
setTimeout
(()
=>
{
handleReductionPolling
()
},
3000
)
})
ElMessage
.
success
(
'文件上传成功'
)
}
console
.
log
(
'Merge response:'
,
response
.
data
)
}
catch
(
error
)
{
console
.
error
(
'Error merging chunks:'
,
error
)
}
}
const
handleReductionPolling
=
()
=>
{
if
(
reductionBackup
.
value
.
reductionProgress
==
undefined
||
reductionBackup
.
value
.
reductionProgress
>=
100
)
return
// 已经上传完成了,更新上传进度
backupStore
.
setReductionBackupProgress
(
100
,
1
)
backupStore
.
setReductionBackupStatus
(
true
,
1
)
// 开始还原进度
backupStore
.
setReductionBackupProgress
(
0
,
0
)
backupStore
.
setReductionBackupStatus
(
true
,
0
)
startReductionPolling
(
5000
)
}
const
delay
=
(
ms
:
number
)
=>
{
return
new
Promise
((
resolve
)
=>
setTimeout
(
resolve
,
ms
))
// Delay function for retries
}
onBeforeRouteLeave
(()
=>
{
console
.
log
(
'切换离开页面了'
)
if
(
backup
.
value
.
status
)
stopPolling
()
if
(
reductionBackup
.
value
.
reductionStatus
)
stopReductionPolling
()
})
// onBeforeUnmount(() => {
// console.log('卸载了当前页面')
// if (backup.value.status) stopPolling()
// if (reductionBackup.value.reductionStatus) stopReductionPolling()
// })
const
init
=
async
()
=>
{
backupStore
.
setDownloadProgress
(
tenantId
.
value
)
if
(
backup
.
value
.
progress
!=
100
&&
backup
.
value
.
progress
!=
0
)
startPolling
(
3000
)
backupStore
.
setReductionProgress
(
tenantId
.
value
)
if
(
reductionBackup
.
value
.
reductionProgress
<=
100
)
handleReductionPolling
()
loading
.
value
=
false
}
init
()
</
script
>
<
style
scoped
>
.card-container
{
display
:
flex
;
justify-content
:
space-between
;
}
.el-card
{
flex
:
1
;
}
.el-card
:not
(
:last-child
)
{
margin-right
:
20px
;
}
.card-header
{
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
}
</
style
>
<
template
>
<el-alert
:title=
"alertMsg"
type=
"warning"
show-icon
:closable=
"false"
style=
"margin-bottom: 30px"
/>
<div
v-loading=
"loading"
class=
"card-container"
style=
"display: flex; width: 100%"
>
<el-card>
<template
#
header
>
<div
class=
"card-header"
>
<span>
备份
</span>
<el-tag
:type=
"handleBackupStatus().tag"
>
{{
handleBackupStatus
().
msg
}}
</el-tag>
</div>
</
template
>
<div>
<el-button
type=
"primary"
size=
"small"
:disabled=
"backup.status"
@
click=
"handleBackup"
>
系统备份
</el-button
>
<div
v-show=
"backup.status"
style=
"margin-top: 20px"
>
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-bottom: 10px"
>
备份进度
</el-link>
<el-progress
:percentage=
"backup.progress"
striped
striped-flow
:duration=
"10"
/>
</div>
</div>
</el-card>
<el-card>
<
template
#
header
>
<div
class=
"card-header"
>
<span>
下载
</span>
<el-tag
:type=
"!downloadBackup.status ? 'info' : 'primary'"
>
{{
!
downloadBackup
.
status
?
'未下载'
:
'下载中'
}}
</el-tag>
</div>
</
template
>
<div>
<el-button
type=
"primary"
size=
"small"
:disabled=
"downloadBackup.status"
@
click=
"handleDownBackup"
>
下载备份
</el-button
>
<div
v-if=
"downloadBackup.status"
style=
"margin-top: 20px"
>
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-bottom: 10px"
>
下载进度
</el-link>
<el-progress
:percentage=
"downloadBackup.progress"
striped
striped-flow
:duration=
"10"
/>
</div>
</div>
</el-card>
<el-card>
<
template
#
header
>
<div
class=
"card-header"
>
<span>
还原
</span>
<el-tag
:type=
"handleReductionBackupStatus()?.tag"
>
{{
handleReductionBackupStatus
()?.
msg
}}
</el-tag>
</div>
</
template
>
<div>
<el-button
type=
"primary"
size=
"small"
:disabled=
"reductionBackup.status"
@
click=
"handleSelectFile"
>
还原系统
</el-button
>
<div
v-if=
"reductionBackup.status"
style=
"margin-top: 20px"
>
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-bottom: 10px"
>
上传进度
</el-link>
<el-progress
:percentage=
"reductionBackup.progress"
:status=
"reductionBackup.progress == 100 ? 'success' : ''"
striped
striped-flow
:duration=
"10"
/>
</div>
<div
v-if=
"reductionBackup.reductionStatus"
style=
"margin-top: 20px"
>
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-bottom: 10px"
>
备份进度
</el-link>
<el-progress
:percentage=
"reductionBackup.reductionProgress"
:status=
"reductionBackup.reductionProgress == 100 ? 'success' : ''"
striped
striped-flow
:duration=
"10"
/>
</div>
</div>
</el-card>
</div>
<input
ref=
"uploadRef"
type=
"file"
style=
"display: none"
@
change=
"handleFileChange"
/>
</template>
<
script
setup
lang=
"ts"
>
import
{
useBackupStore
}
from
'@/stores/modules/backup'
import
{
useTenantStore
}
from
'@/stores/modules/tenant'
import
{
dayjs
}
from
'element-plus'
import
{
saveAs
}
from
'file-saver'
import
axios
from
'axios'
const
backupStore
=
useBackupStore
()
const
tenantStore
=
useTenantStore
()
const
tenantId
=
computed
(()
=>
tenantStore
.
getTenantId
)
const
backup
=
computed
(()
=>
backupStore
.
getBackup
)
const
downloadBackup
=
computed
(()
=>
backupStore
.
getDownloadBackup
)
const
reductionBackup
=
computed
(()
=>
backupStore
.
getReductionBackup
)
const
loading
=
ref
(
true
)
const
uploadFile
=
ref
()
const
uploadRef
=
ref
()
const
polling
=
ref
()
const
reductionPolling
=
ref
()
const
alertMsg
=
'请不要同时操作，等待某个功能操作进度条结束后再进行其他操作； 系统备份进行下载与还原功能时，禁止刷新页面，否则会导致操作失败，请耐心等待！'
const
handleBackupStatus
=
()
=>
{
const
progress
=
backup
.
value
.
progress
const
status
:
any
=
{
100
:
{
tag
:
'success'
,
msg
:
'已备份'
},
0
:
{
tag
:
'info'
,
msg
:
'未备份'
}
}
return
status
[
progress
]
||
{
tag
:
'primary'
,
msg
:
'备份中'
}
}
const
handleReductionBackupStatus
=
()
=>
{
const
{
status
,
reductionStatus
}
=
reductionBackup
.
value
const
statusMap
:
any
=
{
'false-false'
:
{
tag
:
'info'
,
msg
:
'未同步'
},
'true-false'
:
{
tag
:
'primary'
,
msg
:
'上传中'
},
'true-true'
:
{
tag
:
'primary'
,
msg
:
'还原中'
}
}
return
statusMap
[
`
${
status
}
-
${
reductionStatus
}
`
]
||
null
}
const
handleBackup
=
()
=>
{
if
(
downloadBackup
.
value
.
status
)
return
ElMessage
.
warning
(
'下载备份中，请等待下载完成后备份系统！'
)
ElMessageBox
.
confirm
(
`
${
backup
.
value
.
progress
==
100
?
'已存在备份系统，是否要重新备份'
:
'是否要备份'
}
系统？`
,
'提示'
,
{
confirmButtonText
:
'确认'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
}
)
.
then
(()
=>
{
backupStore
.
backup
.
status
=
true
backupStore
.
backup
.
progress
=
undefined
axios
.
get
(
`/admin/api/docker/backSystem?tenantId=
${
tenantId
.
value
}
`
,
{
timeout
:
5000
})
.
catch
(()
=>
{
backupStore
.
setDownloadProgress
(
tenantId
.
value
)
startPolling
(
3000
)
})
})
.
catch
(()
=>
{
ElMessage
({
type
:
'info'
,
message
:
'取消备份'
})
})
}
const
handleDownBackup
=
()
=>
{
if
(
backup
.
value
.
status
)
return
ElMessage
.
warning
(
'备份中，请等待备份完成后下载备份！'
)
if
(
backup
.
value
.
progress
===
0
)
return
ElMessage
.
warning
(
'未备份系统，请先备份系统！'
)
ElMessageBox
.
confirm
(
'确认下载系统备份'
,
'提示'
,
{
confirmButtonText
:
'确认'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
})
.
then
(
async
()
=>
{
downloadFile
(
'/admin/api/docker/backDownload'
,
1024
*
1024
*
10
,
tenantId
.
value
)
})
.
catch
(()
=>
{
ElMessage
({
type
:
'info'
,
message
:
'取消下载系统备份'
})
})
}
const
startPolling
=
(
interval
:
number
)
=>
{
const
checkProgress
=
()
=>
{
if
(
backup
.
value
.
progress
===
100
||
backup
.
value
.
progress
===
0
)
{
stopPolling
()
return
true
// 表示已完成
}
return
false
// 表示尚未完成
}
const
poll
=
()
=>
{
backupStore
.
setDownloadProgress
(
tenantId
.
value
)
// console.log('🚀 ~ startPolling ~ backup.value.progress:', backup.value.progress)
if
(
!
checkProgress
())
{
polling
.
value
=
setTimeout
(
poll
,
interval
)
}
}
poll
()
// 开始轮询
}
const
stopPolling
=
()
=>
{
backupStore
.
backup
.
progress
=
undefined
backupStore
.
backup
.
status
=
false
clearTimeout
(
polling
.
value
)
}
const
startReductionPolling
=
(
interval
:
number
)
=>
{
const
checkProgress
=
()
=>
{
if
(
reductionBackup
.
value
.
reductionProgress
>=
100
||
reductionBackup
.
value
.
reductionProgress
==
undefined
)
{
stopReductionPolling
()
return
true
// 表示已完成
}
return
false
// 表示尚未完成
}
const
poll
=
()
=>
{
backupStore
.
setReductionProgress
(
tenantId
.
value
)
if
(
!
checkProgress
())
{
polling
.
value
=
setTimeout
(
poll
,
interval
)
}
}
poll
()
// 开始轮询
}
const
stopReductionPolling
=
()
=>
{
console
.
log
(
'停止还原系统'
)
// 已经上传完成了,更新上传进度
backupStore
.
setReductionBackupProgress
(
0
,
1
)
backupStore
.
setReductionBackupStatus
(
false
,
1
)
// 开始还原进度
backupStore
.
setReductionBackupProgress
(
0
,
0
)
backupStore
.
setReductionBackupStatus
(
false
,
0
)
clearTimeout
(
reductionPolling
.
value
)
}
const
downloadFile
=
async
(
url
:
string
,
chunkSize
:
any
,
tenantId
:
string
)
=>
{
backupStore
.
setDownloadBackupStatus
(
true
)
backupStore
.
setDownloadBackupProgress
(
0
)
const
fullUrl
=
`
${
url
}
?tenantId=
${
tenantId
}
`
// 获取文件的总大小
const
headResponse
=
await
axios
.
head
(
fullUrl
)
const
totalSize
=
parseInt
(
headResponse
.
headers
[
'content-length'
],
10
)
const
numChunks
=
Math
.
ceil
(
totalSize
/
chunkSize
)
const
chunks
:
any
[]
=
[]
for
(
let
i
=
0
;
i
<
numChunks
;
i
++
)
{
const
start
=
i
*
chunkSize
const
end
=
Math
.
min
(
start
+
chunkSize
-
1
,
totalSize
-
1
)
try
{
const
chunkResponse
=
await
axios
.
get
(
fullUrl
,
{
headers
:
{
Range
:
`bytes=
${
start
}
-
${
end
}
`
},
responseType
:
'blob'
})
if
(
chunkResponse
.
status
!==
206
)
{
throw
new
Error
(
`Error fetching chunk
${
i
+
1
}
:
${
chunkResponse
.
statusText
}
`
)
}
// 提取 Blob 数据
chunks
.
push
(
chunkResponse
.
data
)
// console.log(`Downloaded chunk ${i + 1}/${numChunks}`)
downloadBackup
.
value
.
progress
=
parseFloat
((((
i
+
1
)
/
numChunks
)
*
100
).
toFixed
(
2
))
}
catch
(
error
)
{
console
.
error
(
error
)
return
}
}
// 创建一个新的 Blob 对象，用于合并所有的分片
const
finalBlob
=
new
Blob
(
chunks
,
{
type
:
'application/zip;charset=utf-8'
})
saveAs
(
finalBlob
,
`
${
tenantStore
.
getTenantName
}
-
${
dayjs
().
format
(
'YYYY-MM-DD'
)}
.zip`
)
backupStore
.
setDownloadBackupStatus
(
false
)
ElMessage
.
success
(
'文件下载成功'
)
}
const
handleSelectFile
=
async
()
=>
{
const
{
data
}
=
await
axios
.
get
(
`/admin/api/docker/revertSystemCheck?tenantId=
${
tenantStore
.
getTenantId
}
`
)
if
(
data
.
code
===
200
)
ElMessageBox
.
confirm
(
'确认还原此系统？'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
}).
then
(()
=>
{
axios
.
get
(
`/admin/api/docker/revertSystem?tenantId=
${
tenantId
.
value
}
`
,
{
timeout
:
5000
})
.
catch
(()
=>
{
backupStore
.
setReductionProgress
(
tenantId
.
value
)
setTimeout
(()
=>
{
handleReductionPolling
()
},
3000
)
})
})
else
if
(
data
.
code
===
201
)
uploadRef
.
value
.
click
()
else
if
(
data
.
code
===
202
)
ElMessage
.
warning
(
'当前环境已经部署，如果要还原，请先清空当前环境docker的容器与镜像！'
)
}
const
handleFileChange
=
(
event
:
any
)
=>
{
const
files
=
event
.
target
.
files
console
.
log
(
'🚀 ~ handleFileChange ~ files:'
,
files
[
0
])
if
(
files
.
length
>
1
)
{
ElMessage
.
warning
(
'只能上传一个文件'
)
uploadFile
.
value
=
''
return
}
if
(
files
.
length
===
1
)
{
if
(
!
[
'application/zip'
,
'application/x-zip-compressed'
,
'application/x-zip'
,
'multipart/x-zip'
].
includes
(
files
[
0
].
type
)
)
{
ElMessage
.
warning
(
'只允许上传 .zip 文件'
)
uploadFile
.
value
=
''
}
else
{
uploadFile
.
value
=
files
[
0
]
uploadFileInChunks
(
files
[
0
])
}
}
}
const
uploadFileInChunks
=
async
(
file
:
any
)
=>
{
if
(
!
uploadFile
.
value
)
return
ElMessage
.
warning
(
'请先选择文件'
)
backupStore
.
setReductionBackupStatus
(
true
)
const
chunkSize
=
1024
*
1024
*
2
const
totalChunks
=
Math
.
ceil
(
file
.
size
/
chunkSize
)
for
(
let
index
=
0
;
index
<
totalChunks
;
index
++
)
{
const
start
=
index
*
chunkSize
const
end
=
Math
.
min
(
start
+
chunkSize
,
file
.
size
)
const
chunk
=
file
.
slice
(
start
,
end
)
const
success
=
await
uploadChunk
(
chunk
,
file
.
name
,
file
.
size
,
index
+
1
,
totalChunks
)
if
(
!
success
)
return
if
(
success
===
200
)
{
// 上传分片完成后，执行调用系统还原接口
return
}
backupStore
.
setReductionBackupProgress
(
Math
.
round
(((
index
+
1
)
/
totalChunks
)
*
100
))
}
}
const
uploadChunk
=
async
(
chunk
:
File
,
fileName
:
string
,
totalSize
:
string
,
index
:
any
,
totalChunks
:
any
)
=>
{
const
formData
=
new
FormData
()
formData
.
append
(
'data'
,
chunk
)
formData
.
append
(
'name'
,
fileName
)
formData
.
append
(
'totalSize'
,
totalSize
)
formData
.
append
(
'total'
,
totalChunks
)
formData
.
append
(
'index'
,
index
)
formData
.
append
(
'tenantId'
,
tenantStore
.
getTenantId
)
try
{
const
response
=
await
axios
.
post
(
'/admin/api/docker/doPost'
,
formData
,
{
headers
:
{
'Content-Type'
:
'multipart/form-data'
}
})
if
(
response
.
data
.
status
===
201
)
{
return
true
}
else
if
(
response
.
data
.
status
===
502
)
{
// 上传失败，正在重试块上传...
await
delay
(
200
)
return
uploadChunk
(
chunk
,
fileName
,
totalSize
,
index
,
totalChunks
)
// Retry
}
else
if
(
response
.
data
.
status
===
200
)
{
await
mergeChunks
()
return
200
}
else
return
false
}
catch
(
error
)
{
console
.
error
(
'Error uploading chunk:'
,
error
)
ElMessage
.
error
(
'文件上传失败'
)
backupStore
.
setReductionBackupStatus
(
false
)
backupStore
.
setReductionBackupProgress
(
0
)
return
false
}
}
const
mergeChunks
=
async
()
=>
{
try
{
const
response
=
await
axios
.
get
(
'/admin/api/docker/merge'
,
{
params
:
{
tenantId
:
tenantStore
.
getTenantId
}
})
if
(
response
.
data
.
code
==
200
)
{
axios
.
get
(
`/admin/api/docker/revertSystem?tenantId=
${
tenantId
.
value
}
`
,
{
timeout
:
5000
})
.
catch
((
err
)
=>
{
backupStore
.
setReductionProgress
(
tenantId
.
value
)
setTimeout
(()
=>
{
handleReductionPolling
()
},
3000
)
})
ElMessage
.
success
(
'文件上传成功'
)
}
console
.
log
(
'Merge response:'
,
response
.
data
)
}
catch
(
error
)
{
console
.
error
(
'Error merging chunks:'
,
error
)
}
}
const
handleReductionPolling
=
()
=>
{
if
(
reductionBackup
.
value
.
reductionProgress
==
undefined
||
reductionBackup
.
value
.
reductionProgress
>=
100
)
return
// 已经上传完成了,更新上传进度
backupStore
.
setReductionBackupProgress
(
100
,
1
)
backupStore
.
setReductionBackupStatus
(
true
,
1
)
// 开始还原进度
backupStore
.
setReductionBackupProgress
(
0
,
0
)
backupStore
.
setReductionBackupStatus
(
true
,
0
)
startReductionPolling
(
5000
)
}
const
delay
=
(
ms
:
number
)
=>
{
return
new
Promise
((
resolve
)
=>
setTimeout
(
resolve
,
ms
))
// Delay function for retries
}
onBeforeRouteLeave
(()
=>
{
console
.
log
(
'切换离开页面了'
)
if
(
backup
.
value
.
status
)
stopPolling
()
if
(
reductionBackup
.
value
.
reductionStatus
)
stopReductionPolling
()
})
// onBeforeUnmount(() => {
// console.log('卸载了当前页面')
// if (backup.value.status) stopPolling()
// if (reductionBackup.value.reductionStatus) stopReductionPolling()
// })
const
init
=
async
()
=>
{
backupStore
.
setDownloadProgress
(
tenantId
.
value
)
if
(
backup
.
value
.
progress
!=
100
&&
backup
.
value
.
progress
!=
0
)
startPolling
(
3000
)
backupStore
.
setReductionProgress
(
tenantId
.
value
)
if
(
reductionBackup
.
value
.
reductionProgress
<=
100
)
handleReductionPolling
()
loading
.
value
=
false
}
init
()
</
script
>
<
style
scoped
>
.card-container
{
display
:
flex
;
justify-content
:
space-between
;
}
.el-card
{
flex
:
1
;
}
.el-card
:not
(
:last-child
)
{
margin-right
:
20px
;
}
.card-header
{
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
}
</
style
>
vite.config.ts
浏览文件 @
73172069
...
...
@@ -52,10 +52,10 @@ export default defineConfig({
// 设置代理
proxy
:
{
'/admin'
:
{
target
:
'http://192.168.1.1
60
:8080/'
target
:
'http://192.168.1.1
32
:8080/'
},
'/webApi'
:
{
target
:
'http://192.168.1.1
60
:8003/'
target
:
'http://192.168.1.1
32
:8003/'
}
}
},
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑！
取消
请
注册
或者
登录
后发表评论
