何书鹏 / salarycalculator · 提交

转到一个项目

作者 Karson
提交 bdb9b61f2482e0f3601d80812089e54bca9f4fce 1 个父辈 4a675d56

优化前台会员中心H5下展示 

优化后台菜单栏切换
优化后台Logo展示
内嵌 并排对比
正在显示 30 个修改的文件 包含 296 行增加 和 30 行删除
... ... @@ -3,7 +3,7 @@
<!-- 迷你模式下Logo的大小为50X50 -->
<span class="logo-mini">{$site.name|mb_substr=0,4,'utf-8'|mb_strtoupper='utf-8'|htmlentities}</span>
<!-- 普通模式下Logo -->
<span class="logo-lg"><b>{$site.name|mb_substr=0,4,'utf-8'|htmlentities}</b>{$site.name|mb_substr=4,null,'utf-8'|htmlentities}</span>
<span class="logo-lg">{$site.name|htmlentities}</span>
</a>
<!-- 顶部通栏样式 -->
... ...
<div class="sidenav">
<div class="sidebar-toggle"><i class="fa fa-bars"></i></div>
<div class="sidenav" id="sidebar-nav">
{:hook('user_sidenav_before')}
<ul class="list-group">
<li class="list-group-heading">{:__('Member center')}</li>
... ...
... ... @@ -42,6 +42,12 @@
</a>
</p>
<!-- Success -->
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<!-- Content -->
<div class="ui-content">
<div class="basicinfo">
<div class="row">
<div class="col-xs-4 col-md-2">{:__('Money')}</div>
... ... @@ -68,6 +74,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
... ...
... ... @@ -28,13 +28,6 @@ body.is-dialog {
border: 1px solid #8B9;
background-color: #BEC;
}
.main-header .logo,
.main-header .navbar {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.main-header .navbar {
position: relative;
}
... ... @@ -52,9 +45,6 @@ html.ios-fix body {
.wrapper {
height: 100%;
}
#header {
background: #fff;
}
.content-wrapper {
position: relative;
height: 100%;
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Blue
* ----------
*/
.skin-blue .main-header {
background-color: #3c8dbc;
}
.skin-blue .main-header .navbar {
background-color: #3c8dbc;
}
... ... @@ -652,6 +655,9 @@
* Skin: Green
* -----------
*/
.skin-green .main-header {
background-color: #18bc9c;
}
.skin-green .main-header .navbar {
background-color: #18bc9c;
}
... ... @@ -791,6 +797,9 @@
* Skin: Green
* -----------
*/
.skin-green-light .main-header {
background-color: #18bc9c;
}
.skin-green-light .main-header .navbar {
background-color: #18bc9c;
}
... ... @@ -944,6 +953,9 @@
* Skin: Red
* ---------
*/
.skin-red .main-header {
background-color: #e74c3c;
}
.skin-red .main-header .navbar {
background-color: #e74c3c;
}
... ... @@ -1083,6 +1095,9 @@
* Skin: Red
* ---------
*/
.skin-red-light .main-header {
background-color: #e74c3c;
}
.skin-red-light .main-header .navbar {
background-color: #e74c3c;
}
... ... @@ -1236,6 +1251,9 @@
* Skin: Yellow
* ------------
*/
.skin-yellow .main-header {
background-color: #f39c12;
}
.skin-yellow .main-header .navbar {
background-color: #f39c12;
}
... ... @@ -1375,6 +1393,9 @@
* Skin: Yellow
* ------------
*/
.skin-yellow-light .main-header {
background-color: #f39c12;
}
.skin-yellow-light .main-header .navbar {
background-color: #f39c12;
}
... ... @@ -1528,6 +1549,9 @@
* Skin: Purple
* ------------
*/
.skin-purple .main-header {
background-color: #605ca8;
}
.skin-purple .main-header .navbar {
background-color: #605ca8;
}
... ... @@ -1667,6 +1691,9 @@
* Skin: Purple
* ------------
*/
.skin-purple-light .main-header {
background-color: #605ca8;
}
.skin-purple-light .main-header .navbar {
background-color: #605ca8;
}
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Blue
* ----------
*/
.skin-blue .main-header {
background-color: #3c8dbc;
}
.skin-blue .main-header .navbar {
background-color: #3c8dbc;
}
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Green
* -----------
*/
.skin-green-light .main-header {
background-color: #18bc9c;
}
.skin-green-light .main-header .navbar {
background-color: #18bc9c;
}
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Green
* -----------
*/
.skin-green .main-header {
background-color: #18bc9c;
}
.skin-green .main-header .navbar {
background-color: #18bc9c;
}
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Purple
* ------------
*/
.skin-purple-light .main-header {
background-color: #605ca8;
}
.skin-purple-light .main-header .navbar {
background-color: #605ca8;
}
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Purple
* ------------
*/
.skin-purple .main-header {
background-color: #605ca8;
}
.skin-purple .main-header .navbar {
background-color: #605ca8;
}
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Red
* ---------
*/
.skin-red-light .main-header {
background-color: #e74c3c;
}
.skin-red-light .main-header .navbar {
background-color: #e74c3c;
}
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Red
* ---------
*/
.skin-red .main-header {
background-color: #e74c3c;
}
.skin-red .main-header .navbar {
background-color: #e74c3c;
}
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Yellow
* ------------
*/
.skin-yellow-light .main-header {
background-color: #f39c12;
}
.skin-yellow-light .main-header .navbar {
background-color: #f39c12;
}
... ...
... ... @@ -2,6 +2,9 @@
* Skin: Yellow
* ------------
*/
.skin-yellow .main-header {
background-color: #f39c12;
}
.skin-yellow .main-header .navbar {
background-color: #f39c12;
}
... ...
h2.page-header {
margin:10px 0 25px 0;
padding-bottom:15px;
margin: 10px 0 25px 0;
padding-bottom: 15px;
}
.user-baseinfo {
margin-bottom:25px;
}
.user-baseinfo table tr td {color:#999;}
@media (min-width: 767px) {
.user-center .avatar-text,.user-center .avatar-img {
height:150px;width:150px;border-radius: 150px;line-height:150px;font-size:70px;
}
.user-center .avatar-img {font-size:0;}
.user-center .avatar-img img {
height:150px;width:150px;border-radius:150px;
}
}
\ No newline at end of file
margin-bottom: 25px;
}
.user-baseinfo table tr td {
color: #999;
}
@media (min-width: 992px) {
.user-center .avatar-text,
.user-center .avatar-img {
height: 150px;
width: 150px;
border-radius: 150px;
line-height: 150px;
font-size: 70px;
}
.user-center .avatar-img {
font-size: 0;
}
.user-center .avatar-img img {
height: 150px;
width: 150px;
border-radius: 150px;
}
}
.sidebar-toggle {
display: none;
}
@media (max-width: 991px) {
.sidenav {
position: fixed;
top: 50px;
z-index: 1029;
height: calc(100vh - 50px);
padding: 20px 0 20px 0;
min-width: 250px;
overflow-y: auto;
overflow-x: hidden;
width: 250px;
left: -250px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sidebar-toggle {
display: block;
position: fixed;
right: 20px;
bottom: 70px;
border-radius: 50%;
background: #eee;
font-size: 22px;
padding: 10px;
line-height: 30px;
height: 50px;
width: 50px;
text-align: center;
z-index: 999999;
}
}
body.sidebar-open .sidenav {
left: 0;
width: 250px;
box-shadow: 0 6px 27px rgba(0, 0, 0, 0.075);
}
body.sidebar-open .sidebar-toggle i:before {
content: "\f00d";
}
/*# sourceMappingURL=user.css.map */
\ No newline at end of file
... ...
... ... @@ -67,6 +67,39 @@ define(['fast', 'template', 'moment'], function (Fast, Template, Moment) {
$('body').tooltip({selector: '[data-toggle="tooltip"]'});
}
$('body').popover({selector: '[data-toggle="popover"]'});
// 手机端左右滑动切换菜单栏
if ('ontouchstart' in document.documentElement) {
var startX, startY, moveEndX, moveEndY, relativeX, relativeY, element;
element = $('body', document);
element.on("touchstart", function (e) {
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
element.on("touchend", function (e) {
moveEndX = e.originalEvent.changedTouches[0].pageX;
moveEndY = e.originalEvent.changedTouches[0].pageY;
relativeX = moveEndX - startX;
relativeY = moveEndY - startY;
// 判断标准
//右滑
if (relativeX > 45) {
if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
element.addClass("sidebar-open");
}
}
//左滑
else if (relativeX < -45) {
if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
element.removeClass("sidebar-open");
}
}
});
}
$(document).on("click", ".sidebar-toggle", function () {
$("body").toggleClass("sidebar-open");
});
}
};
Frontend.api = $.extend(Fast.api, Frontend.api);
... ...
... ... @@ -6758,6 +6758,39 @@ define('frontend',['fast', 'template', 'moment'], function (Fast, Template, Mome
$('body').tooltip({selector: '[data-toggle="tooltip"]'});
}
$('body').popover({selector: '[data-toggle="popover"]'});
// 手机端左右滑动切换菜单栏
if ('ontouchstart' in document.documentElement) {
var startX, startY, moveEndX, moveEndY, relativeX, relativeY, element;
element = $('body', document);
element.on("touchstart", function (e) {
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
element.on("touchend", function (e) {
moveEndX = e.originalEvent.changedTouches[0].pageX;
moveEndY = e.originalEvent.changedTouches[0].pageY;
relativeX = moveEndX - startX;
relativeY = moveEndY - startY;
// 判断标准
//右滑
if (relativeX > 45) {
if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
element.addClass("sidebar-open");
}
}
//左滑
else if (relativeX < -45) {
if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
element.removeClass("sidebar-open");
}
}
});
}
$(document).on("click", ".sidebar-toggle", function () {
$("body").toggleClass("sidebar-open");
});
}
};
Frontend.api = $.extend(Fast.api, Frontend.api);
... ...
... ... @@ -43,9 +43,6 @@ body.is-dialog {
}
.main-header {
.logo, .navbar {
.transition(none);
}
.navbar {
position: relative;
... ... @@ -69,7 +66,6 @@ html.ios-fix, html.ios-fix body {
}
#header {
background: #fff;
//box-shadow: 0 2px 2px rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.05);
}
... ...
... ... @@ -518,3 +518,4 @@ main.content {
text-align: center;
display: inline-block;
}
... ...
... ... @@ -10,6 +10,7 @@
.skin-blue {
//Navbar
.main-header {
background-color:@light-blue;
.navbar {
.navbar-variant(@light-blue; #fff);
.sidebar-toggle {
... ...
... ... @@ -10,6 +10,7 @@
.skin-green-light {
//Navbar
.main-header {
background-color:@green;
.navbar {
.navbar-variant(@green; #fff);
.sidebar-toggle {
... ...
... ... @@ -10,6 +10,7 @@
.skin-green {
//Navbar
.main-header {
background-color:@green;
.navbar {
.navbar-variant(@green; #fff);
.sidebar-toggle {
... ...
... ... @@ -10,6 +10,7 @@
.skin-purple-light {
//Navbar
.main-header {
background-color:@purple;
.navbar {
.navbar-variant(@purple; #fff);
.sidebar-toggle {
... ...
... ... @@ -10,6 +10,7 @@
.skin-purple {
//Navbar
.main-header {
background-color:@purple;
.navbar {
.navbar-variant(@purple; #fff);
.sidebar-toggle {
... ...
... ... @@ -10,6 +10,7 @@
.skin-red-light {
//Navbar
.main-header {
background-color:@red;
.navbar {
.navbar-variant(@red; #fff);
.sidebar-toggle {
... ...
... ... @@ -10,6 +10,7 @@
.skin-red {
//Navbar
.main-header {
background-color:@red;
.navbar {
.navbar-variant(@red; #fff);
.sidebar-toggle {
... ...
... ... @@ -10,6 +10,7 @@
.skin-yellow-light {
//Navbar
.main-header {
background-color:@yellow;
.navbar {
.navbar-variant(@yellow; #fff);
.sidebar-toggle {
... ...
... ... @@ -10,6 +10,7 @@
.skin-yellow {
//Navbar
.main-header {
background-color:@yellow;
.navbar {
.navbar-variant(@yellow; #fff);
.sidebar-toggle {
... ...
h2.page-header {
margin: 10px 0 25px 0;
padding-bottom: 15px;
}
.user-baseinfo {
margin-bottom: 25px;
table tr td {
color: #999;
}
}
@media (min-width: 992px) {
.user-center {
.avatar-text, .avatar-img {
height: 150px;
width: 150px;
border-radius: 150px;
line-height: 150px;
font-size: 70px;
}
.avatar-img {
font-size: 0;
img {
height: 150px;
width: 150px;
border-radius: 150px;
}
}
}
}
.sidebar-toggle {
display: none;
}
@media (max-width: 991px) {
.sidenav {
position: fixed;
top: 50px;
z-index: 1029;
height: calc(~ '100vh - 50px');
padding: 20px 0 20px 0;
min-width: 250px;
overflow-y: auto;
overflow-x: hidden;
width: 250px;
left: -250px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sidebar-toggle {
display: block;
position: fixed;
right: 20px;
bottom: 70px;
border-radius: 50%;
background: #eee;
font-size: 22px;
padding: 10px;
line-height: 30px;
height: 50px;
width: 50px;
text-align: center;
z-index: 999999;
}
}
body.sidebar-open {
.sidenav {
left: 0;
width: 250px;
box-shadow: 0 6px 27px rgba(0, 0, 0, 0.075);
}
.sidebar-toggle i:before {
content: "\f00d";
}
}
... ...