From 4ded5dbf9135da6d19165e833729a4e42ab2e98b Mon Sep 17 00:00:00 2001 From: zuiidea Date: Mon, 12 Sep 2016 00:24:41 +0800 Subject: [PATCH] main layout --- src/components/Sidebar/index.js | 5 +- src/config.js | 18 +- src/view/index.less | 336 +++++++++++--------------------- 3 files changed, 127 insertions(+), 232 deletions(-) diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index 18d8d75..732775f 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -104,7 +104,10 @@ const Sider = React.createClass({ const collapse = this.state.collapse return (
-
+
+ + Ant Design +
{this.menu} diff --git a/src/config.js b/src/config.js index 99a7dee..50d3db8 100644 --- a/src/config.js +++ b/src/config.js @@ -7,13 +7,14 @@ // 遵循统一的规范, 好维护, 交给其他人也比较简单 module.exports = { - name: 'Ant Design管理后台', // 项目的名字 - footer: 'Ant Design版权所有 © 2016', // footer中显示的字 - + name: 'Ant Design 管理后台', + footer: 'Ant Design Admin 版权所有 © 2016 由zuiidea支持', + logoImg:'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg', + logoText:'Ant Design', debug: true, // 是否开启debug模式, 不会请求后端接口, 使用mock的数据 logLevel: 'debug', // 日志级别, 目前支持debug/info/warn/error 4种级别 - api: { // 对后端请求的相关配置 + api: { host: 'http://localhost', // 调用ajax接口的地址, 默认值空, 如果是跨域的, 服务端要支持CORS path: '/api', // ajax请求的路径 timeout: 15000, // 请求的超时时间, 单位毫秒 @@ -21,20 +22,11 @@ module.exports = { login: { // 登录相关配置 getCurrentUser: '/getCurrentUser', // 后端必须要提供接口校验当前用户的身份, 如果拿不到用户信息, 才会尝试登录 - - // 登录有两种情况: - - // 1. 使用sso登录, 直接跳转就可以了 sso: '', // 是否使用单点登录? 是的话我会把地址encode后加到后面, 然后跳转, 如果这个是空字符串, 说明不使用单点登录 - // 2. 不使用sso, 使用我提供的一个登录界面 validate: '/login', // 校验用户信息, 表单的submit地址. 如果登录成功, 必须返回用户名 - logout: '/logout', // 退出的url, 用户点击退出时, 浏览器会直接跳转到这个链接 }, - // 以下一些辅助的函数, 不要修改 - // 不能使用箭头函数, 会导致this是undefined - /** * 是否要跨域请求 * diff --git a/src/view/index.less b/src/view/index.less index 81ff18d..d93520e 100644 --- a/src/view/index.less +++ b/src/view/index.less @@ -1,223 +1,82 @@ body { - background: #f0f0f0; height: 100%; overflow-y: hidden; + background-color: #f8f8f8; } -// .main-wrapper { -// background: #fff; -// width: 100%; -// margin: 0 auto; -// overflow: hidden; -// position: relative; -// // min-width: 1200px; -// .aside { -// float: left; -// // height: e("calc(100vh - 48px)"); -// height: 100vh; -// .ant-menu-item-selected { -// background-color: #333; -// } -// .side-menus { -// // height: e("calc(100vh - 48px)"); -// height: 100vh; -// position: absolute; -// width: 60px; -// overflow: hidden; -// transition: width 0.3s ease; -// left: 0; -// z-index: 9999; -// background: #404040; -// &:hover{ -// width: 200px; -// } -// &.fixed-sider{ -// width: 200px; -// position: relative; -// .ant-menu-item { -// a { -// .text { -// opacity: 1; -// } -// } -// } -// } -// .ant-menu-item { -// height: 48px; -// line-height: 48px; -// text-align: center; -// padding: 0; -// transition: background-color 0.3s ease; -// &:hover { -// background-color: #474747; -// } -// a { -// width: 100%; -// text-align: center; -// .text { -// opacity: 0; -// transition: opacity 0.3s ease; -// width: 60px; -// display: inline-block; -// text-align: left; -// } -// .anticon { -// width: 60px; -// margin-right: 0; -// font-size: 14px; -// } -// } -// } -// &:hover { -// .ant-menu-item { -// a { -// .text { -// opacity: 1; -// } -// } -// } -// } -// } -// } -// .content { -// padding: 24px; -// height: e("calc(100vh - 48px)"); -// margin-left: 60px; -// background: #fff; -// overflow: auto; -// .ant-table-small { -// border: none; -// } -// } -// &.no-aside { -// .content { -// margin-left: 0; -// padding: 24px; -// } -// } -// } -// .fixed-btn { -// position: absolute; -// bottom: 0; -// left: 0; -// width: 200px; -// color: #666; -// height: 48px; -// z-index: 9999; -// line-height: 48px; -// background: #474747; -// transition: all .3s ease; -// cursor: pointer; -// .text { -// width: 60px; -// display: inline-block; -// text-align: left; -// float: left; -// } -// .anticon { -// width: 60px; -// margin-right: 0; -// float: left; -// line-height: 48px; -// } -// &:hover{ -// color: #2db7f5; -// background-color: #333; -// } -// } + .ant-layout-aside { position: relative; min-height: 100%; -} -.ant-layout-aside .ant-layout-logo { - width: 150px; - height: 32px; - background: #333; - border-radius: 6px; - margin: 16px 24px 16px 28px; - transition: all 0.3s ease; -} + .ant-layout-header { + .ant-menu { + line-height: 47px; + } -.ant-layout-aside-collapse .ant-layout-logo { - width: 32px; - margin: 16px; - transition: all 0.3s ease; -} - -.ant-layout-aside .ant-layout-sider { - width: 224px; - background: #404040; - position: absolute; - overflow: visible; - padding-bottom: 24px; - height: 100%; - transition: all 0.3s ease; -} - -.ant-layout-aside-collapse .ant-layout-sider { - width: 64px; - transition: all 0.3s ease; -} - -.ant-layout-aside .ant-layout-sider > .ant-menu { - margin-bottom: 20px; -} - -.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item { - margin: 16px 0; -} - -.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text { - vertical-align: baseline; - display: inline-block; -} - -.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon { - transition: font-size .3s; -} - -.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item { - transition: all 0s ease; -} - -.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon { - font-size: 16px; - display: inline-block; -} - -.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text { - display: none; -} - -.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover { - background: #2db7f5; - color: #fff; - transition: all 0s ease; -} - -.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text { - display: inline-block; - vertical-align: top; - background: #2db7f5; - color: #fff; - padding-right: 16px; - border-radius: 0 5px 5px 0; -} - -/* 实际使用中需要改成 position: fixed */ -.ant-layout-aside { - .ant-layout-header{ - background: #fff; - height: 64px; - border-bottom: 1px solid #e9e9e9; + .ant-menu-horizontal { + border: none; + } + box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } - .ant-layout-breadcrumb{ - margin: 7px 0 -17px 24px; + + .ant-layout-sider { + width: 224px; + background: #404040; + position: absolute; + overflow: visible; + padding-bottom: 24px; + height: 100%; + transition: all 0.3s ease; + + & > .ant-menu { + margin-bottom: 20px; + + & > .anticon { + transition: font-size 0.3s; + } + + & > .ant-menu-item { + margin: 16px 0; + + &.nav-text { + vertical-align: baseline; + display: inline-block; + } + } + } + + .ant-layout-logo { + text-align: center; + height: 40px; + line-height: 40px; + cursor: pointer; + + img { + width: 40px; + margin-right: 8px; + } + + span { + vertical-align: text-bottom; + font-size: 16px; + text-transform: uppercase; + display: inline-block; + } + } } - .ant-layout-main{ + + .ant-layout-breadcrumb { + height: 48px; + line-height: 48px; + padding: 0 16px; + margin-bottom: -24px; + } + + .ant-layout-main { margin-left: 224px; transition: all 0.3s ease; } + .ant-aside-action { height: 42px; width: 224px; @@ -230,31 +89,72 @@ body { cursor: pointer; transition: all 0.3s ease; } - .ant-layout-container{ + + .ant-layout-container { margin: 24px 16px; - .ant-layout-content{ + + .ant-layout-content { background: #fff; padding: 24px; + height: e("calc(100vh - 168px)"); } } - .ant-layout-footer{ - height: 64px; - line-height: 64px; + + .ant-layout-footer { + height: 48px; + line-height: 48px; text-align: center; font-size: 12px; color: #999; background: #fff; - border-top: 1px solid #e9e9e9; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); width: 100%; } - &.ant-layout-aside-collapse{ - .ant-aside-action{ + + &.ant-layout-aside-collapse { + .ant-aside-action { width: 64px; transition: all 0.3s ease; } - .ant-layout-main{ - margin-left: 64px; - transition: all 0.3s ease; - } + + .ant-layout-main { + margin-left: 64px; + transition: all 0.3s ease; + } + + .ant-layout-sider { + width: 64px; + transition: all 0.3s ease; + + & > .ant-menu { + & > .ant-menu-item { + transition: all 0s ease; + + &:hover { + background: #2db7f5; + color: #fff; + transition: all 0s ease; + + .nav-text { + display: inline-block; + vertical-align: top; + background: #2db7f5; + color: #fff; + padding-right: 16px; + border-radius: 0 5px 5px 0; + } + } + + .nav-text { + display: none; + } + + & > .anticon { + font-size: 16px; + display: inline-block; + } + } + } + } } }