hitsword
/
fastadmin
mirror of https://gitee.com/karson/fastadmin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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

优化后台菜单栏切换
优化后台Logo展示
pull/234/head
Karson 2020-09-03 21:18:19 +08:00
parent 4a675d5689
commit bdb9b61f24
30 changed files with 296 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
application/admin/view/common/header.html
View File

@ -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>
<!-- 顶部通栏样式 -->

3
application/index/view/common/sidenav.html
View File

@ -1,4 +1,5 @@
<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>

7
application/index/view/user/index.html
View File

@ -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>

10
public/assets/css/backend.css
View File

@ -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
public/assets/css/backend.min.css vendored
View File

File diff suppressed because one or more lines are too long

27
public/assets/css/skins/_all-skins.css
View File

@ -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;
}

3
public/assets/css/skins/skin-blue.css
View File

@ -2,6 +2,9 @@
* Skin: Blue
* ----------
*/
.skin-blue .main-header {
background-color: #3c8dbc;
}
.skin-blue .main-header .navbar {
background-color: #3c8dbc;
}

3
public/assets/css/skins/skin-green-light.css
View File

@ -2,6 +2,9 @@
* Skin: Green
* -----------
*/
.skin-green-light .main-header {
background-color: #18bc9c;
}
.skin-green-light .main-header .navbar {
background-color: #18bc9c;
}

3
public/assets/css/skins/skin-green.css
View File

@ -2,6 +2,9 @@
* Skin: Green
* -----------
*/
.skin-green .main-header {
background-color: #18bc9c;
}
.skin-green .main-header .navbar {
background-color: #18bc9c;
}

3
public/assets/css/skins/skin-purple-light.css
View File

@ -2,6 +2,9 @@
* Skin: Purple
* ------------
*/
.skin-purple-light .main-header {
background-color: #605ca8;
}
.skin-purple-light .main-header .navbar {
background-color: #605ca8;
}

3
public/assets/css/skins/skin-purple.css
View File

@ -2,6 +2,9 @@
* Skin: Purple
* ------------
*/
.skin-purple .main-header {
background-color: #605ca8;
}
.skin-purple .main-header .navbar {
background-color: #605ca8;
}

3
public/assets/css/skins/skin-red-light.css
View File

@ -2,6 +2,9 @@
* Skin: Red
* ---------
*/
.skin-red-light .main-header {
background-color: #e74c3c;
}
.skin-red-light .main-header .navbar {
background-color: #e74c3c;
}

3
public/assets/css/skins/skin-red.css
View File

@ -2,6 +2,9 @@
* Skin: Red
* ---------
*/
.skin-red .main-header {
background-color: #e74c3c;
}
.skin-red .main-header .navbar {
background-color: #e74c3c;
}

3
public/assets/css/skins/skin-yellow-light.css
View File

@ -2,6 +2,9 @@
* Skin: Yellow
* ------------
*/
.skin-yellow-light .main-header {
background-color: #f39c12;
}
.skin-yellow-light .main-header .navbar {
background-color: #f39c12;
}

3
public/assets/css/skins/skin-yellow.css
View File

@ -2,6 +2,9 @@
* Skin: Yellow
* ------------
*/
.skin-yellow .main-header {
background-color: #f39c12;
}
.skin-yellow .main-header .navbar {
background-color: #f39c12;
}

82
public/assets/css/user.css
View File

@ -1,17 +1,73 @@
h2.page-header {
margin:10px 0 25px 0;
padding-bottom:15px;
margin: 10px 0 25px 0;
padding-bottom: 15px;
}
.user-baseinfo {
margin-bottom:25px;
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;
}
}
.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 */

33
public/assets/js/frontend.js
View 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);

33
public/assets/js/require-frontend.min.js vendored
View File

@ -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);

4
public/assets/less/backend.less
View File

@ -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);
}

1
public/assets/less/frontend.less
View File

@ -518,3 +518,4 @@ main.content {
text-align: center;
display: inline-block;
}

1
public/assets/less/skins/skin-blue.less
View File

@ -10,6 +10,7 @@
.skin-blue {
//Navbar
.main-header {
background-color:@light-blue;
.navbar {
.navbar-variant(@light-blue; #fff);
.sidebar-toggle {

1
public/assets/less/skins/skin-green-light.less
View File

@ -10,6 +10,7 @@
.skin-green-light {
//Navbar
.main-header {
background-color:@green;
.navbar {
.navbar-variant(@green; #fff);
.sidebar-toggle {

1
public/assets/less/skins/skin-green.less
View File

@ -10,6 +10,7 @@
.skin-green {
//Navbar
.main-header {
background-color:@green;
.navbar {
.navbar-variant(@green; #fff);
.sidebar-toggle {

1
public/assets/less/skins/skin-purple-light.less
View File

@ -10,6 +10,7 @@
.skin-purple-light {
//Navbar
.main-header {
background-color:@purple;
.navbar {
.navbar-variant(@purple; #fff);
.sidebar-toggle {

1
public/assets/less/skins/skin-purple.less
View File

@ -10,6 +10,7 @@
.skin-purple {
//Navbar
.main-header {
background-color:@purple;
.navbar {
.navbar-variant(@purple; #fff);
.sidebar-toggle {

1
public/assets/less/skins/skin-red-light.less
View File

@ -10,6 +10,7 @@
.skin-red-light {
//Navbar
.main-header {
background-color:@red;
.navbar {
.navbar-variant(@red; #fff);
.sidebar-toggle {

1
public/assets/less/skins/skin-red.less
View File

@ -10,6 +10,7 @@
.skin-red {
//Navbar
.main-header {
background-color:@red;
.navbar {
.navbar-variant(@red; #fff);
.sidebar-toggle {

1
public/assets/less/skins/skin-yellow-light.less
View File

@ -10,6 +10,7 @@
.skin-yellow-light {
//Navbar
.main-header {
background-color:@yellow;
.navbar {
.navbar-variant(@yellow; #fff);
.sidebar-toggle {

1
public/assets/less/skins/skin-yellow.less
View File

@ -10,6 +10,7 @@
.skin-yellow {
//Navbar
.main-header {
background-color:@yellow;
.navbar {
.navbar-variant(@yellow; #fff);
.sidebar-toggle {

86
public/assets/less/user.less 100644
View File

@ -0,0 +1,86 @@
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";
}
}