Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
啊嘞嘞EC
vue-vben-admin
提交
4f98978e
V
vue-vben-admin
项目概览
啊嘞嘞EC
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
4f98978e
编写于
11月 01, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: global loading add text
上级
275ad9f1
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
56 addition
and
74 deletion
+56
-74
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+4
-0
build/vite/plugin/index.ts
build/vite/plugin/index.ts
+1
-0
index.html
index.html
+50
-58
public/resource/img/loading.svg
public/resource/img/loading.svg
+1
-16
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
4f98978e
## Wip
### ✨ Features
-
全局 loading 添加文本
### ⚡ Performance Improvements
-
Layout 界面布局样式调整
...
...
build/vite/plugin/index.ts
浏览文件 @
4f98978e
...
...
@@ -37,6 +37,7 @@ export function createVitePlugins(viteEnv: ViteEnv) {
:
''
,
// Insert Baidu statistics code
hmScript
:
isSiteMode
()
?
hmScript
:
''
,
title
:
VITE_GLOB_APP_TITLE
,
},
})
);
...
...
index.html
浏览文件 @
4f98978e
...
...
@@ -9,79 +9,71 @@
name=
"viewport"
content=
"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<title></title>
<link
rel=
"icon"
href=
"/favicon.ico"
/>
<
%=
viteHtmlPluginOptions.injectConfig
%
>
</head>
<body>
<div
id=
"app"
>
<style>
@keyframes
load
{
0
%
{
-webkit-transform
:
rotate
(
-360deg
);
-moz-transform
:
rotate
(
-360deg
);
-ms-transform
:
rotate
(
-360deg
);
-o-transform
:
rotate
(
-360deg
);
transform
:
rotate
(
-360deg
);
}
100
%
{
-webkit-transform
:
rotate
(
0
);
-moz-transform
:
rotate
(
0
);
-ms-transform
:
rotate
(
0
);
-o-transform
:
rotate
(
0
);
transform
:
rotate
(
0
);
}
<style>
@keyframes
load
{
0
%
{
-webkit-transform
:
rotate
(
-360deg
);
transform
:
rotate
(
-360deg
);
}
.g-loading
{
-webkit-animation
:
load
2s
linear
infinite
;
-moz-animation
:
load
2s
linear
infinite
;
-ms-animation
:
load
2s
linear
infinite
;
-o-animation
:
load
2s
linear
infinite
;
animation
:
load
2s
linear
infinite
;
-webkit-transform-origin
:
center
center
;
-moz-transform-origin
:
center
center
;
-ms-transform-origin
:
center
center
;
-o-transform-origin
:
center
center
;
transform-origin
:
center
center
;
100
%
{
-webkit-transform
:
rotate
(
0
);
transform
:
rotate
(
0
);
}
}
.app-loading
{
width
:
100%
;
height
:
100%
;
background
:
rgba
(
255
,
255
,
255
,
0
,
1
);
}
.app-loading
{
width
:
100%
;
height
:
100%
;
.app-loading
.app-loading-wrap
{
position
:
absolute
;
top
:
45%
;
left
:
50%
;
width
:
64px
;
-ms-transform
:
translate3d
(
-50%
,
-50%
,
0
);
-moz-transform
:
translate3d
(
-50%
,
-50%
,
0
);
-webkit-transform
:
translate3d
(
-50%
,
-50%
,
0
);
-o-transform
:
translate3d
(
-50%
,
-50%
,
0
);
transform
:
translate3d
(
-50%
,
-50%
,
0
);
}
/* background: #f0f2f5; */
}
.app-loading
.app-loading-wrap
img
.logo
{
margin-bottom
:
20px
;
margin-left
:
-20px
;
}
.app-loading
.app-loading-wrap
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
-webkit-transform
:
translate3d
(
-50%
,
-50%
,
0
);
transform
:
translate3d
(
-50%
,
-50%
,
0
);
}
.app-loading
.app-loading-wrap
.app-loading__tip
{
display
:
block
;
margin-top
:
4px
;
font-size
:
13px
;
color
:
#303133
;
text-align
:
center
;
}
</style>
.app-loading
.g-loading
{
display
:
block
;
width
:
64px
;
margin
:
30px
auto
;
-webkit-animation
:
load
1.2s
linear
infinite
;
animation
:
load
1.2s
linear
infinite
;
-webkit-transform-origin
:
center
center
;
transform-origin
:
center
center
;
}
.app-loading
.app-loading-wrap
img
.logo
{
display
:
block
;
width
:
90px
;
margin
:
0
auto
;
margin-bottom
:
20px
;
}
.app-loading
.app-loading-wrap
.app-loading__tip
{
display
:
block
;
margin
:
20px
auto
0
0
;
font-size
:
30px
;
color
:
#2c3a61
;
}
</style>
</head>
<body>
<div
id=
"app"
>
<section
class=
"app-loading"
>
<section
class=
"app-loading-wrap"
>
<img
src=
"./resource/img/logo.png"
class=
"logo"
alt=
"Logo"
/>
<img
src=
"./resource/img/loading.svg"
alt=
""
class=
"g-loading"
/>
<h1
class=
"app-loading__tip"
><
%=
viteHtmlPluginOptions.title
%
></h1>
</section>
</section>
</div>
...
...
public/resource/img/loading.svg
浏览文件 @
4f98978e
...
...
@@ -18,21 +18,6 @@
.bottom {
fill: #9dbfe4;
}
@keyframes load {
0% {
transform: rotate(-360deg);
}
100% {
transform: rotate(0);
}
}
.load {
animation: load 1.4s linear infinite;
transform-origin: center center;
}
svg {
display: block;
}
...
...
@@ -42,7 +27,7 @@
min-width: 100px;
margin-top: 4px;
font-size: 13px;
color: #
303133
;
color: #
2C3A61
;
text-align: left;
}
</style>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录