Alawn/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin synced 2026-10-21 06:53:47 +00:00
Code Issues Releases Wiki Activity

fix header style

Browse Source
This commit is contained in:
zuiidea
2017-12-25 19:54:48 +08:00
parent 0e59df39ee
commit 09b9a100de
5 changed files with 144 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout/Header.less
+45 -10
View File
@@ -1,20 +1,55 @@
@import "~themes/vars";
.header {
:global .ant-menu-horizontal {
& > .ant-menu-submenu {
float: right;
:global {
.ant-menu-submenu-title {
height: 56px;
}
.ant-menu-horizontal {
line-height: 56px;
& > .ant-menu-submenu:hover {
color: #1890ff;
background-color: rgba(24, 144, 255, 0.15);
}
}
.ant-menu {
border-bottom: none;
height: 56px;
}
.ant-menu-horizontal > .ant-menu-submenu {
top: 0;
margin-top: 0;
}
.ant-menu-horizontal > .ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu {
border-bottom: none;
}
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-submenu-selected,
.ant-menu-horizontal > .ant-menu-submenu:hover {
border-bottom: none;
}
border: none;
display: inline-block;
}
box-shadow: @shadow-2;
position: relative;
display: flex;
justify-content: space-between;
height: 47px;
height: 56px;
z-index: 9;
display: flex;
align-items: center;
background-color: #fff;
z-index: 999;
.rightWarpper {
display: flex;
@@ -22,9 +57,9 @@
}
.button {
width: 47px;
height: 47px;
line-height: 47px;
width: 56px;
height: 56px;
line-height: 56px;
text-align: center;
font-size: 18px;
cursor: pointer;
src/components/Layout/Layout.less
+46 -18
View File
@@ -2,12 +2,13 @@
:global {
.ant-layout-header{
.ant-layout-header {
padding: 0;
}
.ant-layout-sider{
transition: all .3s;
.ant-layout-sider {
transition: all 0.3s;
.ant-menu-root {
height: ~"calc(100vh - 144px)";
overflow-x: hidden;
@@ -32,29 +33,58 @@
}
}
}
.ant-layout-content{
.ant-layout-content {
padding: 24px;
}
.ant-layout-footer{
.ant-layout-footer {
text-align: center;
padding: 24px;
}
.content-inner {
background: #fff;
padding: 24px;
box-shadow: @shadow-1;
min-height: e("calc(100vh - 184px)");
}
background: #fff;
padding: 24px;
box-shadow: @shadow-1;
min-height: e("calc(100vh - 184px)");
}
.ant-back-top {
right: 50px;
}
.ant-switch {
}
.ant-switch.ant-switch-large{
line-height: 24px;
height: 26px;
&:after,
&:before {
width: 22px;
height: 22px;
}
&.ant-switch-checked:after,
&.ant-switch-checked:before {
margin-left: -23px;
}
}
.flex-vertical-center{
display: flex;
align-items: center
}
}
.logo {
height: 96px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 40px;
margin-right: 8px;
@@ -64,7 +94,7 @@
vertical-align: text-bottom;
font-size: 16px;
text-transform: uppercase;
display: inline-block
display: inline-block;
}
}
@@ -81,7 +111,7 @@
padding: 0 16px;
overflow: hidden;
z-index: 9;
transition: all .3s;
transition: all 0.3s;
span {
white-space: nowrap;
@@ -98,9 +128,9 @@
}
}
.bread {
margin-bottom: 24px;
:global {
.ant-breadcrumb {
display: flex;
@@ -109,10 +139,10 @@
}
}
.dark{
.dark {
.switchtheme {
background-color: #000d18;
border-color: #001629;
border-color: #001629;
}
}
@@ -123,7 +153,6 @@
}
}
}
@media (max-width: 767px) {
.bread {
margin-bottom: 12px;
@@ -134,10 +163,9 @@
padding: 12px;
}
.ant-back-top{
.ant-back-top {
right: 20px;
bottom: 20px;
}
}
}
src/components/Layout/Sider.less
-1
View File
@@ -1 +0,0 @@
@import "~themes/vars";
src/routes/login/index.less
+49 -51
View File
@@ -1,51 +1,49 @@
.form {
position: absolute;
top: 50%;
left: 50%;
margin: -160px 0 0 -160px;
width: 320px;
height: 320px;
padding: 36px;
box-shadow: 0 0 100px rgba(0,0,0,.08);
button {
width: 100%;
}
p {
color: rgb(204, 204, 204);
text-align: center;
margin-top: 16px;
span {
&:first-child {
margin-right: 16px;
}
}
}
}
.logo {
text-align: center;
height: 40px;
line-height: 40px;
cursor: pointer;
margin-bottom: 24px;
img {
width: 40px;
margin-right: 8px;
}
span {
vertical-align: text-bottom;
font-size: 16px;
text-transform: uppercase;
display: inline-block;
}
}
.ant-spin-container,
.ant-spin-nested-loading {
height: 100%;
}
.form {
position: absolute;
top: 50%;
left: 50%;
margin: -160px 0 0 -160px;
width: 320px;
height: 320px;
padding: 36px;
box-shadow: 0 0 100px rgba(0,0,0,.08);
button {
width: 100%;
}
p {
color: rgb(204, 204, 204);
text-align: center;
margin-top: 16px;
font-size: 12px;
display: flex;
justify-content: space-between;
}
}
.logo {
text-align: center;
cursor: pointer;
margin-bottom: 24px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 40px;
margin-right: 8px;
}
span {
vertical-align: text-bottom;
font-size: 16px;
text-transform: uppercase;
display: inline-block;
}
}
.ant-spin-container,
.ant-spin-nested-loading {
height: 100%;
}
src/routes/user/Filter.js
+4 -4
View File
@@ -5,7 +5,7 @@ import { FilterItem } from 'components'
import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch } from 'antd'
import city from '../../utils/city'
const Search = Input.Search
const { Search } = Input
const { RangePicker } = DatePicker
const ColProps = {
@@ -98,12 +98,12 @@ const Filter = ({
</Col>
<Col {...TwoColProps} xl={{ span: 10 }} md={{ span: 24 }} sm={{ span: 24 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
<div >
<div>
<Button type="primary" className="margin-right" onClick={handleSubmit}>Search</Button>
<Button onClick={handleReset}>Reset</Button>
</div>
<div>
<Switch style={{ marginRight: 16 }} defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren="Motion" unCheckedChildren="Motion" />
<div className="flex-vertical-center">
<Switch className="ant-switch-large" style={{ marginRight: 16 }} defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren="Motion" unCheckedChildren="Motion" />
<Button type="ghost" onClick={onAdd}>Create</Button>
</div>
</div>