Skip to content

T
tl_estate
Commit 2a91175a authored by 刘丹's avatar 刘丹
Browse files
Options

前端

parent 25c26998
Hide whitespace changes
Inline Side-by-side
Showing with 406 additions and 20 deletions
application/index/view/member/home.html
View file @ 2a91175a
......@@ -7,21 +7,81 @@
<body>
{include file="global/footer_tpl" /}
<input type="hidden" class="page-load" id="home" />
<!--头部star-->
<div class="navbar">
sda
<div class="container-fluid">
<a class="brand">
<i><img src="/resource/image/houtai_footer_icon1.png" class="houtai_footer_icon1"></i>
<span class="hidden-phone">同联商业后台管理中心</span>
</a>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
管理员vip
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">修改密码</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">退出登录</a></li>
</ul>
</div>
</div>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
<!--导航star-->
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<!--便于后期更改使用-->
<!--<li class="sidebar-brand">-->
<!--<a href="#">-->
<!--Bootstrap 3-->
<!--</a>-->
<!--</li>-->
<!--<li class="dropdown">-->
<!--<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>-->
<!--<ul class="dropdown-menu" role="menu">-->
<!--<li class="dropdown-header">Dropdown heading</li>-->
<!--<li><a href="#">Action</a></li>-->
<!--<li><a href="#">Another action</a></li>-->
<!--<li><a href="#">Something else here</a></li>-->
<!--<li><a href="#">Separated link</a></li>-->
<!--<li><a href="#">One more separated link</a></li>-->
<!--</ul>-->
<!--</li>-->
<li>
<a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 预约看铺列表</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-folder"></i> 委托转铺列表</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-file-o"></i> 用户列表</a>
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container" style="background:red">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h1 class="page-header">Awesome Bootstrap 3 Sidebar Navigation</h1>
<p>Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</body>
</html>
\ No newline at end of file
public/resource/css/home.css
View file @ 2a91175a
.navbar{
background: #f34541;
background: #ff9419;
width: 100%;
height: 40px;
color:red;
}
\ No newline at end of file
}
.container-fluid{
float: left;
}
.hidden-phone{
color: #FFFFFF;
text-shadow: none;
line-height: 46px;
font-size: 21px;
float: left;
margin-left: 8px;
}
.hidden-phone:hover{
text-decoration:none;
}
.houtai_footer_icon1{
width: 27px;
height: 27px;
float: left;
margin-top: 10px;
}
.dropdown{
float: right;
margin-top: 7px;
margin-right: 10px;
}
.dropdown-menu{
min-width:72px;
}
/*-------------------------------*/
/* VARIABLES */
/*-------------------------------*/
body {
position: relative;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.nav .open > a {
background-color: transparent;
}
.nav .open > a:hover {
background-color: transparent;
}
.nav .open > a:focus {
background-color: transparent;
}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
padding-left: 0;
transition: all 0.5s ease;
}
#wrapper.toggled {
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#sidebar-wrapper {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
background: #1a1a1a;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
transition: all 0.5s ease;
width: 0;
top: 60px;
z-index: 1000;
float: left;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#page-content-wrapper {
width: 100%;
}
.navbar-inverse{
position: fixed;
}
.navbar{
border: none;
}
.container{
width: 100%;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
width: 220px;
}
.sidebar-nav li {
display: inline-block;
line-height: 20px;
position: relative;
width: 100%;
}
.sidebar-nav li:before {
background-color: #ff9419;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
-webkit-transition: width 0.2s ease-in;
transition: width 0.2s ease-in;
width: 3px;
z-index: -1;
}
.sidebar-nav li:first-child a {
background-color: #1a1a1a;
color: #ffffff;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ff9419;
}
.sidebar-nav li:nth-child(3):before {
background-color: #ff9419;
}
.sidebar-nav li:nth-child(4):before {
background-color: #ff9419;
}
.sidebar-nav li:hover:before {
-webkit-transition: width 0.2s ease-in;
transition: width 0.2s ease-in;
width: 100%;
}
.sidebar-nav li a {
color: #dddddd;
display: block;
padding: 10px 15px 10px 30px;
text-decoration: none;
}
.sidebar-nav li.open:hover before {
-webkit-transition: width 0.2s ease-in;
transition: width 0.2s ease-in;
width: 100%;
}
.sidebar-nav .dropdown-menu {
background-color: #222222;
border-radius: 0;
border: none;
box-shadow: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
background-color: transparent;
color: #ffffff;
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
font-size: 20px;
height: 65px;
line-height: 44px;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger {
background: transparent;
border: none;
display: block;
height: 32px;
margin-left: 270px;
position: fixed;
top: 8px;
width: 32px;
z-index: 999;
}
.hamburger:hover {
outline: none;
}
.hamburger:focus {
outline: none;
}
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all 0.35s ease-in-out;
color: #ffffff;
content: '';
display: block;
font-size: 14px;
line-height: 32px;
opacity: 0;
text-align: center;
width: 100px;
}
.hamburger.is-closed:hover before {
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all 0.35s ease-in-out;
display: block;
opacity: 1;
}
.hamburger.is-closed:hover .hamb-top {
-webkit-transition: all 0.35s ease-in-out;
top: 0;
}
.hamburger.is-closed:hover .hamb-bottom {
-webkit-transition: all 0.35s ease-in-out;
bottom: 0;
}
.hamburger.is-closed .hamb-top {
-webkit-transition: all 0.35s ease-in-out;
background-color: rgba(255, 255, 255, 0.7);
top: 5px;
}
.hamburger.is-closed .hamb-middle {
background-color: rgba(255, 255, 255, 0.7);
margin-top: -2px;
top: 50%;
}
.hamburger.is-closed .hamb-bottom {
-webkit-transition: all 0.35s ease-in-out;
background-color: rgba(255, 255, 255, 0.7);
bottom: 5px;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
height: 4px;
left: 0;
position: absolute;
width: 100%;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
background-color: #ffffff;
margin-top: -2px;
top: 50%;
}
.hamburger.is-open .hamb-middle {
background-color: #ffffff;
display: none;
}
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
background-color: #ffffff;
margin-top: -2px;
top: 50%;
}
.hamburger.is-open:before {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all 0.35s ease-in-out;
color: #ffffff;
content: '';
display: block;
font-size: 14px;
line-height: 32px;
opacity: 0;
text-align: center;
width: 100px;
}
.hamburger.is-open:hover before {
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all 0.35s ease-in-out;
display: block;
opacity: 1;
}
/*-------------------------------*/
/* Dark Overlay */
/*-------------------------------*/
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
public/resource/css/public.css
View file @ 2a91175a
body {
margin: 0 auto;
width: 1335px;
padding: 0;
margin: 0;
margin: 0 auto;
background-color: #F2F2F2;
}
a:hover{
text-decoration:none;
}
\ No newline at end of file
public/resource/js/home.js
View file @ 2a91175a
......@@ -4,14 +4,32 @@
define (['css!style/home.css','bootstrapJs'], function () {
var home = {
urls: '',
isClosed : false,
init: function () {
//初始化dot
home.event ();
},
event: function () {
$('.hamburger').click(function () {
home.hamburger_cross();
});
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
},
hamburger_cross : function(){
if (home.isClosed == true) {
$('.overlay').hide();
$('.hamburger').removeClass('is-open');
$('.hamburger').addClass('is-closed');
home.isClosed = false;
} else {
$('.overlay').show();
$('.hamburger').removeClass('is-closed');
$('.hamburger').addClass('is-open');
home.isClosed = true;
}
}
}
return home;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment