github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: performance optimization.

pull/3445/head
ruibaby 2019-12-23 13:33:47 +08:00
parent fb31e60c03
commit f2fac954b1
6 changed files with 84 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -10,7 +10,7 @@
<link rel="icon" href="<%= BASE_URL %>logo.png" />
<title>Halo Dashboard</title>
<style>
#loader{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;border:solid 3px #e5e5e5;border-top-color:#333;border-radius:50%;width:30px;height:30px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
body {height: 100%;background-color: #f5f5f5;}#loader{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;border:solid 3px #e5e5e5;border-top-color:#333;border-radius:50%;width:30px;height:30px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
</style>
<!-- require cdn assets css -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>

57
src/components/global.less
View File

@ -1,4 +1,5 @@
@import './index.less';
@import './style.less';
* {
&::-webkit-scrollbar {
@ -112,7 +113,23 @@ body {
&.content-width-Fluid {
.header-index-wide {
max-width: unset;
margin-left: 24px;
.header-index-left {
flex: 1 1 1000px;
.logo {
margin-left: 25px;
}
.ant-menu.ant-menu-horizontal {
max-width: calc(100vw - 190px - 238px - 25px);
flex: 1 1 calc(100vw - 190px - 238px - 25px);
}
}
.header-index-right {
margin-right: 25px;
}
}
.page-header-index-wide {
@ -255,7 +272,7 @@ body {
}
.ant-menu.ant-menu-horizontal {
flex: 1 1;
flex: 1 1 auto;
white-space: normal;
}
}
@ -276,16 +293,19 @@ body {
height: 64px;
.ant-menu.ant-menu-horizontal {
max-width: 835px;
flex: 0 1 835px;
border: none;
height: 64px;
line-height: 64px;
}
.header-index-left {
flex: 1 1;
flex: 0 1 1000px;
display: flex;
.logo.top-nav-header {
flex: 0 0 165px;
width: 165px;
height: 64px;
position: relative;
@ -313,9 +333,20 @@ body {
}
.header-index-right {
flex: 0 0 auto;
flex: 0 0 238px;
align-self: flex-end;
height: 64px;
overflow: hidden;
.content-box {
float: right;
.action {
max-width: 140px;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
}
}
}
@ -380,11 +411,10 @@ body {
.sider {
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
position: relative;
z-index: 10;
height: auto;
z-index: @ant-global-sider-zindex;
min-height: 100vh;
.ant-layout-sider-children {
padding-top: 64px;
overflow-y: hidden;
&:hover {
@ -398,18 +428,13 @@ body {
}
.logo {
position: absolute;
position: relative;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 64px;
line-height: 64px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
z-index: 9;
line-height: 64px;
background: #002140;
transition: all .3s;
img,
svg,

2
src/components/index.less
View File

@ -7,3 +7,5 @@ html [type='button'] {
// The prefix to use on all css classes from ant-pro.
@ant-pro-prefix : ant-pro;
@ant-global-sider-zindex : 106;
@ant-global-header-zindex : 105;

40
src/components/style.less Normal file
View File

@ -0,0 +1,40 @@
@import './animate.less';
.container-wrapper {
background: #ffffff;
position: absolute;
border-radius: 5px;
top: 45%;
left: 50%;
margin: -160px 0 0 -160px;
width: 320px;
padding: 18px 28px 28px 28px;
box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
.halo-logo {
margin-bottom: 20px;
text-align: center;
span {
vertical-align: text-bottom;
font-size: 38px;
display: inline-block;
font-weight: 600;
color: #1790fe;
background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
small {
margin-left: 5px;
font-size: 35%;
}
}
}
.tip {
cursor: pointer;
margin-left: 0.5rem;
float: right;
}
}

44
src/views/user/Login.vue
View File

@ -205,47 +205,3 @@ export default {
}
}
</script>
<style lang="less">
@import url('../../components/animate.less');
body {
height: 100%;
background-color: #f5f5f5;
}
.container-wrapper {
background: #ffffff;
position: absolute;
border-radius: 5px;
top: 45%;
left: 50%;
margin: -160px 0 0 -160px;
width: 320px;
padding: 18px 28px 28px 28px;
box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
.halo-logo {
margin-bottom: 20px;
text-align: center;
span {
vertical-align: text-bottom;
font-size: 38px;
display: inline-block;
font-weight: 600;
color: #1790fe;
background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
small {
margin-left: 5px;
font-size: 35%;
}
}
}
.tip {
cursor: pointer;
margin-left: 0.5rem;
float: right;
}
}
</style>

44
src/views/user/ResetPassword.vue
View File

@ -203,47 +203,3 @@ export default {
}
}
</script>
<style lang="less">
@import url('../../components/animate.less');
body {
height: 100%;
background-color: #f5f5f5;
}
.container-wrapper {
background: #ffffff;
position: absolute;
border-radius: 5px;
top: 45%;
left: 50%;
margin: -160px 0 0 -160px;
width: 320px;
padding: 18px 28px 28px 28px;
box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
.halo-logo {
margin-bottom: 20px;
text-align: center;
span {
vertical-align: text-bottom;
font-size: 38px;
display: inline-block;
font-weight: 600;
color: #1790fe;
background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
small {
margin-left: 5px;
font-size: 35%;
}
}
}
.tip {
cursor: pointer;
margin-left: 0.5rem;
float: right;
}
}
</style>