support responsive
This commit is contained in:
daizhan
parent
b2e18dfe4c
commit
6e50fe4b47
|
|
@ -4,4 +4,4 @@ body {
|
|||
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,18 @@
|
|||
line-height: 64px;
|
||||
background-color: #001529;
|
||||
padding: 0 30px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.app-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #001529;
|
||||
z-index: -1;
|
||||
}
|
||||
.app-title {
|
||||
float: left;
|
||||
|
|
@ -22,9 +34,32 @@
|
|||
.app-logo {
|
||||
width: 40px;
|
||||
padding-right: 10px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: none;
|
||||
margin-top: 22px;
|
||||
float: right;
|
||||
width: 22px;
|
||||
padding: 4px 4px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-bar span{
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #fff
|
||||
}
|
||||
.nav-bar:hover span{
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.nav-bar .second-bar {
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
|
|
@ -72,6 +107,41 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.user-info {
|
||||
display: none;
|
||||
}
|
||||
.nav-bar {
|
||||
display: block;
|
||||
}
|
||||
.main-nav.show {
|
||||
transform: translate(0, 0);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.main-nav {
|
||||
transform: translate(0, -100%);
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: auto;
|
||||
}
|
||||
.main-nav ul {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.main-nav ul li{
|
||||
height: 48px;
|
||||
float: none;
|
||||
background-color: #001529;
|
||||
}
|
||||
.main-nav ul li a{
|
||||
line-height: 48px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
background: #F0F2F5;
|
||||
|
|
@ -80,8 +150,8 @@
|
|||
.page-content {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
min-height: 500px;
|
||||
padding: 20px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
|
|||
|
|
@ -20,13 +20,19 @@ define('app-frame', class extends WeElement {
|
|||
|
||||
install() {}
|
||||
|
||||
onClickNavBar(event) {
|
||||
this.data.showMiniNavBar = !this.data.showMiniNavBar
|
||||
}
|
||||
|
||||
getRenderedNav(props, data) {
|
||||
let mainNav = []
|
||||
for (let nav of props.routeList) {
|
||||
if (nav.path !== '*') {
|
||||
mainNav.push(
|
||||
<li class={nav.selected ? 'selected' : ''}>
|
||||
<a href={'#' + nav.path}>{nav.label}</a>
|
||||
<a href={'#' + nav.path} onClick={e => this.onClickNavBar(e)}>
|
||||
{nav.label}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
|
@ -45,7 +51,12 @@ define('app-frame', class extends WeElement {
|
|||
{this.data.name}
|
||||
</a>
|
||||
</h1>
|
||||
<nav class="main-nav">
|
||||
<div class="nav-bar" onClick={e => this.onClickNavBar(e)}>
|
||||
<span class="icon-bar" />
|
||||
<span class="second-bar icon-bar" />
|
||||
<span class="icon-bar" />
|
||||
</div>
|
||||
<nav class={'main-nav ' + (this.data.showMiniNavBar ? 'show' : '')}>
|
||||
<ul>{mainNav}</ul>
|
||||
</nav>
|
||||
<div class="user-info">
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ define('home-page', class extends WeElement {
|
|||
return (
|
||||
<div>
|
||||
<p>Hi Welcome to Omi.</p>
|
||||
<p>the Next Generation Web Framework in 4kb JavaScript</p>
|
||||
<p>The Next Generation Web Framework in 4kb JavaScript.</p>
|
||||
<a href="https://github.com/Tencent/omi">learn more about Omi</a>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ define('omi-weui-page', class extends WeElement {
|
|||
render() {
|
||||
return (
|
||||
<div>
|
||||
<p>WeUI Components build with Omi is coming soon</p>
|
||||
<p>WeUI Components build with Omi is coming soon.</p>
|
||||
<a href="https://github.com/omijs/omi-weui">
|
||||
learn more about omi-weui
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ define('omi-router-page', class extends WeElement {
|
|||
omi-router is the Omi official router plugin of Omi.
|
||||
<br />
|
||||
it's lightweight, easy and powerful to build Omi's SPA(Single Page
|
||||
Application)
|
||||
Application).
|
||||
</p>
|
||||
<a href="https://github.com/Tencent/omi/tree/master/packages/omi-router">
|
||||
learn more about omi-router
|
||||
|
|
|
|||
Loading…
Reference in New Issue