正在显示
30 个修改的文件
包含
296 行增加
和
30 行删除
@@ -3,7 +3,7 @@ | @@ -3,7 +3,7 @@ | ||
3 | <!-- 迷你模式下Logo的大小为50X50 --> | 3 | <!-- 迷你模式下Logo的大小为50X50 --> |
4 | <span class="logo-mini">{$site.name|mb_substr=0,4,'utf-8'|mb_strtoupper='utf-8'|htmlentities}</span> | 4 | <span class="logo-mini">{$site.name|mb_substr=0,4,'utf-8'|mb_strtoupper='utf-8'|htmlentities}</span> |
5 | <!-- 普通模式下Logo --> | 5 | <!-- 普通模式下Logo --> |
6 | - <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> | 6 | + <span class="logo-lg">{$site.name|htmlentities}</span> |
7 | </a> | 7 | </a> |
8 | 8 | ||
9 | <!-- 顶部通栏样式 --> | 9 | <!-- 顶部通栏样式 --> |
1 | -<div class="sidenav"> | 1 | +<div class="sidebar-toggle"><i class="fa fa-bars"></i></div> |
2 | +<div class="sidenav" id="sidebar-nav"> | ||
2 | {:hook('user_sidenav_before')} | 3 | {:hook('user_sidenav_before')} |
3 | <ul class="list-group"> | 4 | <ul class="list-group"> |
4 | <li class="list-group-heading">{:__('Member center')}</li> | 5 | <li class="list-group-heading">{:__('Member center')}</li> |
@@ -42,6 +42,12 @@ | @@ -42,6 +42,12 @@ | ||
42 | </a> | 42 | </a> |
43 | </p> | 43 | </p> |
44 | <!-- Success --> | 44 | <!-- Success --> |
45 | + </div> | ||
46 | + </div> | ||
47 | + | ||
48 | + <div class="col-md-9 col-sm-9 col-xs-12"> | ||
49 | + <!-- Content --> | ||
50 | + <div class="ui-content"> | ||
45 | <div class="basicinfo"> | 51 | <div class="basicinfo"> |
46 | <div class="row"> | 52 | <div class="row"> |
47 | <div class="col-xs-4 col-md-2">{:__('Money')}</div> | 53 | <div class="col-xs-4 col-md-2">{:__('Money')}</div> |
@@ -68,6 +74,7 @@ | @@ -68,6 +74,7 @@ | ||
68 | </div> | 74 | </div> |
69 | </div> | 75 | </div> |
70 | </div> | 76 | </div> |
77 | + | ||
71 | </div> | 78 | </div> |
72 | </div> | 79 | </div> |
73 | </div> | 80 | </div> |
@@ -28,13 +28,6 @@ body.is-dialog { | @@ -28,13 +28,6 @@ body.is-dialog { | ||
28 | border: 1px solid #8B9; | 28 | border: 1px solid #8B9; |
29 | background-color: #BEC; | 29 | background-color: #BEC; |
30 | } | 30 | } |
31 | -.main-header .logo, | ||
32 | -.main-header .navbar { | ||
33 | - -webkit-transition: none; | ||
34 | - -moz-transition: none; | ||
35 | - -o-transition: none; | ||
36 | - transition: none; | ||
37 | -} | ||
38 | .main-header .navbar { | 31 | .main-header .navbar { |
39 | position: relative; | 32 | position: relative; |
40 | } | 33 | } |
@@ -52,9 +45,6 @@ html.ios-fix body { | @@ -52,9 +45,6 @@ html.ios-fix body { | ||
52 | .wrapper { | 45 | .wrapper { |
53 | height: 100%; | 46 | height: 100%; |
54 | } | 47 | } |
55 | -#header { | ||
56 | - background: #fff; | ||
57 | -} | ||
58 | .content-wrapper { | 48 | .content-wrapper { |
59 | position: relative; | 49 | position: relative; |
60 | height: 100%; | 50 | height: 100%; |
此 diff 太大无法显示。
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | * Skin: Blue | 2 | * Skin: Blue |
3 | * ---------- | 3 | * ---------- |
4 | */ | 4 | */ |
5 | +.skin-blue .main-header { | ||
6 | + background-color: #3c8dbc; | ||
7 | +} | ||
5 | .skin-blue .main-header .navbar { | 8 | .skin-blue .main-header .navbar { |
6 | background-color: #3c8dbc; | 9 | background-color: #3c8dbc; |
7 | } | 10 | } |
@@ -652,6 +655,9 @@ | @@ -652,6 +655,9 @@ | ||
652 | * Skin: Green | 655 | * Skin: Green |
653 | * ----------- | 656 | * ----------- |
654 | */ | 657 | */ |
658 | +.skin-green .main-header { | ||
659 | + background-color: #18bc9c; | ||
660 | +} | ||
655 | .skin-green .main-header .navbar { | 661 | .skin-green .main-header .navbar { |
656 | background-color: #18bc9c; | 662 | background-color: #18bc9c; |
657 | } | 663 | } |
@@ -791,6 +797,9 @@ | @@ -791,6 +797,9 @@ | ||
791 | * Skin: Green | 797 | * Skin: Green |
792 | * ----------- | 798 | * ----------- |
793 | */ | 799 | */ |
800 | +.skin-green-light .main-header { | ||
801 | + background-color: #18bc9c; | ||
802 | +} | ||
794 | .skin-green-light .main-header .navbar { | 803 | .skin-green-light .main-header .navbar { |
795 | background-color: #18bc9c; | 804 | background-color: #18bc9c; |
796 | } | 805 | } |
@@ -944,6 +953,9 @@ | @@ -944,6 +953,9 @@ | ||
944 | * Skin: Red | 953 | * Skin: Red |
945 | * --------- | 954 | * --------- |
946 | */ | 955 | */ |
956 | +.skin-red .main-header { | ||
957 | + background-color: #e74c3c; | ||
958 | +} | ||
947 | .skin-red .main-header .navbar { | 959 | .skin-red .main-header .navbar { |
948 | background-color: #e74c3c; | 960 | background-color: #e74c3c; |
949 | } | 961 | } |
@@ -1083,6 +1095,9 @@ | @@ -1083,6 +1095,9 @@ | ||
1083 | * Skin: Red | 1095 | * Skin: Red |
1084 | * --------- | 1096 | * --------- |
1085 | */ | 1097 | */ |
1098 | +.skin-red-light .main-header { | ||
1099 | + background-color: #e74c3c; | ||
1100 | +} | ||
1086 | .skin-red-light .main-header .navbar { | 1101 | .skin-red-light .main-header .navbar { |
1087 | background-color: #e74c3c; | 1102 | background-color: #e74c3c; |
1088 | } | 1103 | } |
@@ -1236,6 +1251,9 @@ | @@ -1236,6 +1251,9 @@ | ||
1236 | * Skin: Yellow | 1251 | * Skin: Yellow |
1237 | * ------------ | 1252 | * ------------ |
1238 | */ | 1253 | */ |
1254 | +.skin-yellow .main-header { | ||
1255 | + background-color: #f39c12; | ||
1256 | +} | ||
1239 | .skin-yellow .main-header .navbar { | 1257 | .skin-yellow .main-header .navbar { |
1240 | background-color: #f39c12; | 1258 | background-color: #f39c12; |
1241 | } | 1259 | } |
@@ -1375,6 +1393,9 @@ | @@ -1375,6 +1393,9 @@ | ||
1375 | * Skin: Yellow | 1393 | * Skin: Yellow |
1376 | * ------------ | 1394 | * ------------ |
1377 | */ | 1395 | */ |
1396 | +.skin-yellow-light .main-header { | ||
1397 | + background-color: #f39c12; | ||
1398 | +} | ||
1378 | .skin-yellow-light .main-header .navbar { | 1399 | .skin-yellow-light .main-header .navbar { |
1379 | background-color: #f39c12; | 1400 | background-color: #f39c12; |
1380 | } | 1401 | } |
@@ -1528,6 +1549,9 @@ | @@ -1528,6 +1549,9 @@ | ||
1528 | * Skin: Purple | 1549 | * Skin: Purple |
1529 | * ------------ | 1550 | * ------------ |
1530 | */ | 1551 | */ |
1552 | +.skin-purple .main-header { | ||
1553 | + background-color: #605ca8; | ||
1554 | +} | ||
1531 | .skin-purple .main-header .navbar { | 1555 | .skin-purple .main-header .navbar { |
1532 | background-color: #605ca8; | 1556 | background-color: #605ca8; |
1533 | } | 1557 | } |
@@ -1667,6 +1691,9 @@ | @@ -1667,6 +1691,9 @@ | ||
1667 | * Skin: Purple | 1691 | * Skin: Purple |
1668 | * ------------ | 1692 | * ------------ |
1669 | */ | 1693 | */ |
1694 | +.skin-purple-light .main-header { | ||
1695 | + background-color: #605ca8; | ||
1696 | +} | ||
1670 | .skin-purple-light .main-header .navbar { | 1697 | .skin-purple-light .main-header .navbar { |
1671 | background-color: #605ca8; | 1698 | background-color: #605ca8; |
1672 | } | 1699 | } |
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | * Skin: Blue | 2 | * Skin: Blue |
3 | * ---------- | 3 | * ---------- |
4 | */ | 4 | */ |
5 | +.skin-blue .main-header { | ||
6 | + background-color: #3c8dbc; | ||
7 | +} | ||
5 | .skin-blue .main-header .navbar { | 8 | .skin-blue .main-header .navbar { |
6 | background-color: #3c8dbc; | 9 | background-color: #3c8dbc; |
7 | } | 10 | } |
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | * Skin: Green | 2 | * Skin: Green |
3 | * ----------- | 3 | * ----------- |
4 | */ | 4 | */ |
5 | +.skin-green-light .main-header { | ||
6 | + background-color: #18bc9c; | ||
7 | +} | ||
5 | .skin-green-light .main-header .navbar { | 8 | .skin-green-light .main-header .navbar { |
6 | background-color: #18bc9c; | 9 | background-color: #18bc9c; |
7 | } | 10 | } |
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | * Skin: Green | 2 | * Skin: Green |
3 | * ----------- | 3 | * ----------- |
4 | */ | 4 | */ |
5 | +.skin-green .main-header { | ||
6 | + background-color: #18bc9c; | ||
7 | +} | ||
5 | .skin-green .main-header .navbar { | 8 | .skin-green .main-header .navbar { |
6 | background-color: #18bc9c; | 9 | background-color: #18bc9c; |
7 | } | 10 | } |
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | * Skin: Purple | 2 | * Skin: Purple |
3 | * ------------ | 3 | * ------------ |
4 | */ | 4 | */ |
5 | +.skin-purple-light .main-header { | ||
6 | + background-color: #605ca8; | ||
7 | +} | ||
5 | .skin-purple-light .main-header .navbar { | 8 | .skin-purple-light .main-header .navbar { |
6 | background-color: #605ca8; | 9 | background-color: #605ca8; |
7 | } | 10 | } |
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | * Skin: Purple | 2 | * Skin: Purple |
3 | * ------------ | 3 | * ------------ |
4 | */ | 4 | */ |
5 | +.skin-purple .main-header { | ||
6 | + background-color: #605ca8; | ||
7 | +} | ||
5 | .skin-purple .main-header .navbar { | 8 | .skin-purple .main-header .navbar { |
6 | background-color: #605ca8; | 9 | background-color: #605ca8; |
7 | } | 10 | } |
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | * Skin: Red | 2 | * Skin: Red |
3 | * --------- | 3 | * --------- |
4 | */ | 4 | */ |
5 | +.skin-red-light .main-header { | ||
6 | + background-color: #e74c3c; | ||
7 | +} | ||
5 | .skin-red-light .main-header .navbar { | 8 | .skin-red-light .main-header .navbar { |
6 | background-color: #e74c3c; | 9 | background-color: #e74c3c; |
7 | } | 10 | } |
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | * Skin: Yellow | 2 | * Skin: Yellow |
3 | * ------------ | 3 | * ------------ |
4 | */ | 4 | */ |
5 | +.skin-yellow-light .main-header { | ||
6 | + background-color: #f39c12; | ||
7 | +} | ||
5 | .skin-yellow-light .main-header .navbar { | 8 | .skin-yellow-light .main-header .navbar { |
6 | background-color: #f39c12; | 9 | background-color: #f39c12; |
7 | } | 10 | } |
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | * Skin: Yellow | 2 | * Skin: Yellow |
3 | * ------------ | 3 | * ------------ |
4 | */ | 4 | */ |
5 | +.skin-yellow .main-header { | ||
6 | + background-color: #f39c12; | ||
7 | +} | ||
5 | .skin-yellow .main-header .navbar { | 8 | .skin-yellow .main-header .navbar { |
6 | background-color: #f39c12; | 9 | background-color: #f39c12; |
7 | } | 10 | } |
1 | h2.page-header { | 1 | h2.page-header { |
2 | - margin:10px 0 25px 0; | ||
3 | - padding-bottom:15px; | 2 | + margin: 10px 0 25px 0; |
3 | + padding-bottom: 15px; | ||
4 | } | 4 | } |
5 | .user-baseinfo { | 5 | .user-baseinfo { |
6 | - margin-bottom:25px; | ||
7 | -} | ||
8 | -.user-baseinfo table tr td {color:#999;} | ||
9 | -@media (min-width: 767px) { | ||
10 | - .user-center .avatar-text,.user-center .avatar-img { | ||
11 | - height:150px;width:150px;border-radius: 150px;line-height:150px;font-size:70px; | ||
12 | - } | ||
13 | - .user-center .avatar-img {font-size:0;} | ||
14 | - .user-center .avatar-img img { | ||
15 | - height:150px;width:150px;border-radius:150px; | ||
16 | - } | ||
17 | -} | ||
6 | + margin-bottom: 25px; | ||
7 | +} | ||
8 | +.user-baseinfo table tr td { | ||
9 | + color: #999; | ||
10 | +} | ||
11 | +@media (min-width: 992px) { | ||
12 | + .user-center .avatar-text, | ||
13 | + .user-center .avatar-img { | ||
14 | + height: 150px; | ||
15 | + width: 150px; | ||
16 | + border-radius: 150px; | ||
17 | + line-height: 150px; | ||
18 | + font-size: 70px; | ||
19 | + } | ||
20 | + .user-center .avatar-img { | ||
21 | + font-size: 0; | ||
22 | + } | ||
23 | + .user-center .avatar-img img { | ||
24 | + height: 150px; | ||
25 | + width: 150px; | ||
26 | + border-radius: 150px; | ||
27 | + } | ||
28 | +} | ||
29 | +.sidebar-toggle { | ||
30 | + display: none; | ||
31 | +} | ||
32 | +@media (max-width: 991px) { | ||
33 | + .sidenav { | ||
34 | + position: fixed; | ||
35 | + top: 50px; | ||
36 | + z-index: 1029; | ||
37 | + height: calc(100vh - 50px); | ||
38 | + padding: 20px 0 20px 0; | ||
39 | + min-width: 250px; | ||
40 | + overflow-y: auto; | ||
41 | + overflow-x: hidden; | ||
42 | + width: 250px; | ||
43 | + left: -250px; | ||
44 | + -webkit-transition: all 0.3s ease; | ||
45 | + -moz-transition: all 0.3s ease; | ||
46 | + -o-transition: all 0.3s ease; | ||
47 | + transition: all 0.3s ease; | ||
48 | + } | ||
49 | + .sidebar-toggle { | ||
50 | + display: block; | ||
51 | + position: fixed; | ||
52 | + right: 20px; | ||
53 | + bottom: 70px; | ||
54 | + border-radius: 50%; | ||
55 | + background: #eee; | ||
56 | + font-size: 22px; | ||
57 | + padding: 10px; | ||
58 | + line-height: 30px; | ||
59 | + height: 50px; | ||
60 | + width: 50px; | ||
61 | + text-align: center; | ||
62 | + z-index: 999999; | ||
63 | + } | ||
64 | +} | ||
65 | +body.sidebar-open .sidenav { | ||
66 | + left: 0; | ||
67 | + width: 250px; | ||
68 | + box-shadow: 0 6px 27px rgba(0, 0, 0, 0.075); | ||
69 | +} | ||
70 | +body.sidebar-open .sidebar-toggle i:before { | ||
71 | + content: "\f00d"; | ||
72 | +} | ||
73 | +/*# sourceMappingURL=user.css.map */ |
@@ -67,6 +67,39 @@ define(['fast', 'template', 'moment'], function (Fast, Template, Moment) { | @@ -67,6 +67,39 @@ define(['fast', 'template', 'moment'], function (Fast, Template, Moment) { | ||
67 | $('body').tooltip({selector: '[data-toggle="tooltip"]'}); | 67 | $('body').tooltip({selector: '[data-toggle="tooltip"]'}); |
68 | } | 68 | } |
69 | $('body').popover({selector: '[data-toggle="popover"]'}); | 69 | $('body').popover({selector: '[data-toggle="popover"]'}); |
70 | + | ||
71 | + // 手机端左右滑动切换菜单栏 | ||
72 | + if ('ontouchstart' in document.documentElement) { | ||
73 | + var startX, startY, moveEndX, moveEndY, relativeX, relativeY, element; | ||
74 | + element = $('body', document); | ||
75 | + element.on("touchstart", function (e) { | ||
76 | + startX = e.originalEvent.changedTouches[0].pageX; | ||
77 | + startY = e.originalEvent.changedTouches[0].pageY; | ||
78 | + }); | ||
79 | + element.on("touchend", function (e) { | ||
80 | + moveEndX = e.originalEvent.changedTouches[0].pageX; | ||
81 | + moveEndY = e.originalEvent.changedTouches[0].pageY; | ||
82 | + relativeX = moveEndX - startX; | ||
83 | + relativeY = moveEndY - startY; | ||
84 | + | ||
85 | + // 判断标准 | ||
86 | + //右滑 | ||
87 | + if (relativeX > 45) { | ||
88 | + if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) { | ||
89 | + element.addClass("sidebar-open"); | ||
90 | + } | ||
91 | + } | ||
92 | + //左滑 | ||
93 | + else if (relativeX < -45) { | ||
94 | + if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) { | ||
95 | + element.removeClass("sidebar-open"); | ||
96 | + } | ||
97 | + } | ||
98 | + }); | ||
99 | + } | ||
100 | + $(document).on("click", ".sidebar-toggle", function () { | ||
101 | + $("body").toggleClass("sidebar-open"); | ||
102 | + }); | ||
70 | } | 103 | } |
71 | }; | 104 | }; |
72 | Frontend.api = $.extend(Fast.api, Frontend.api); | 105 | Frontend.api = $.extend(Fast.api, Frontend.api); |
@@ -6758,6 +6758,39 @@ define('frontend',['fast', 'template', 'moment'], function (Fast, Template, Mome | @@ -6758,6 +6758,39 @@ define('frontend',['fast', 'template', 'moment'], function (Fast, Template, Mome | ||
6758 | $('body').tooltip({selector: '[data-toggle="tooltip"]'}); | 6758 | $('body').tooltip({selector: '[data-toggle="tooltip"]'}); |
6759 | } | 6759 | } |
6760 | $('body').popover({selector: '[data-toggle="popover"]'}); | 6760 | $('body').popover({selector: '[data-toggle="popover"]'}); |
6761 | + | ||
6762 | + // 手机端左右滑动切换菜单栏 | ||
6763 | + if ('ontouchstart' in document.documentElement) { | ||
6764 | + var startX, startY, moveEndX, moveEndY, relativeX, relativeY, element; | ||
6765 | + element = $('body', document); | ||
6766 | + element.on("touchstart", function (e) { | ||
6767 | + startX = e.originalEvent.changedTouches[0].pageX; | ||
6768 | + startY = e.originalEvent.changedTouches[0].pageY; | ||
6769 | + }); | ||
6770 | + element.on("touchend", function (e) { | ||
6771 | + moveEndX = e.originalEvent.changedTouches[0].pageX; | ||
6772 | + moveEndY = e.originalEvent.changedTouches[0].pageY; | ||
6773 | + relativeX = moveEndX - startX; | ||
6774 | + relativeY = moveEndY - startY; | ||
6775 | + | ||
6776 | + // 判断标准 | ||
6777 | + //右滑 | ||
6778 | + if (relativeX > 45) { | ||
6779 | + if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) { | ||
6780 | + element.addClass("sidebar-open"); | ||
6781 | + } | ||
6782 | + } | ||
6783 | + //左滑 | ||
6784 | + else if (relativeX < -45) { | ||
6785 | + if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) { | ||
6786 | + element.removeClass("sidebar-open"); | ||
6787 | + } | ||
6788 | + } | ||
6789 | + }); | ||
6790 | + } | ||
6791 | + $(document).on("click", ".sidebar-toggle", function () { | ||
6792 | + $("body").toggleClass("sidebar-open"); | ||
6793 | + }); | ||
6761 | } | 6794 | } |
6762 | }; | 6795 | }; |
6763 | Frontend.api = $.extend(Fast.api, Frontend.api); | 6796 | Frontend.api = $.extend(Fast.api, Frontend.api); |
@@ -43,9 +43,6 @@ body.is-dialog { | @@ -43,9 +43,6 @@ body.is-dialog { | ||
43 | } | 43 | } |
44 | 44 | ||
45 | .main-header { | 45 | .main-header { |
46 | - .logo, .navbar { | ||
47 | - .transition(none); | ||
48 | - } | ||
49 | 46 | ||
50 | .navbar { | 47 | .navbar { |
51 | position: relative; | 48 | position: relative; |
@@ -69,7 +66,6 @@ html.ios-fix, html.ios-fix body { | @@ -69,7 +66,6 @@ html.ios-fix, html.ios-fix body { | ||
69 | } | 66 | } |
70 | 67 | ||
71 | #header { | 68 | #header { |
72 | - background: #fff; | ||
73 | //box-shadow: 0 2px 2px rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.05); | 69 | //box-shadow: 0 2px 2px rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.05); |
74 | } | 70 | } |
75 | 71 |
@@ -10,6 +10,7 @@ | @@ -10,6 +10,7 @@ | ||
10 | .skin-blue { | 10 | .skin-blue { |
11 | //Navbar | 11 | //Navbar |
12 | .main-header { | 12 | .main-header { |
13 | + background-color:@light-blue; | ||
13 | .navbar { | 14 | .navbar { |
14 | .navbar-variant(@light-blue; #fff); | 15 | .navbar-variant(@light-blue; #fff); |
15 | .sidebar-toggle { | 16 | .sidebar-toggle { |
@@ -10,6 +10,7 @@ | @@ -10,6 +10,7 @@ | ||
10 | .skin-green-light { | 10 | .skin-green-light { |
11 | //Navbar | 11 | //Navbar |
12 | .main-header { | 12 | .main-header { |
13 | + background-color:@green; | ||
13 | .navbar { | 14 | .navbar { |
14 | .navbar-variant(@green; #fff); | 15 | .navbar-variant(@green; #fff); |
15 | .sidebar-toggle { | 16 | .sidebar-toggle { |
@@ -10,6 +10,7 @@ | @@ -10,6 +10,7 @@ | ||
10 | .skin-purple-light { | 10 | .skin-purple-light { |
11 | //Navbar | 11 | //Navbar |
12 | .main-header { | 12 | .main-header { |
13 | + background-color:@purple; | ||
13 | .navbar { | 14 | .navbar { |
14 | .navbar-variant(@purple; #fff); | 15 | .navbar-variant(@purple; #fff); |
15 | .sidebar-toggle { | 16 | .sidebar-toggle { |
@@ -10,6 +10,7 @@ | @@ -10,6 +10,7 @@ | ||
10 | .skin-purple { | 10 | .skin-purple { |
11 | //Navbar | 11 | //Navbar |
12 | .main-header { | 12 | .main-header { |
13 | + background-color:@purple; | ||
13 | .navbar { | 14 | .navbar { |
14 | .navbar-variant(@purple; #fff); | 15 | .navbar-variant(@purple; #fff); |
15 | .sidebar-toggle { | 16 | .sidebar-toggle { |
@@ -10,6 +10,7 @@ | @@ -10,6 +10,7 @@ | ||
10 | .skin-yellow-light { | 10 | .skin-yellow-light { |
11 | //Navbar | 11 | //Navbar |
12 | .main-header { | 12 | .main-header { |
13 | + background-color:@yellow; | ||
13 | .navbar { | 14 | .navbar { |
14 | .navbar-variant(@yellow; #fff); | 15 | .navbar-variant(@yellow; #fff); |
15 | .sidebar-toggle { | 16 | .sidebar-toggle { |
@@ -10,6 +10,7 @@ | @@ -10,6 +10,7 @@ | ||
10 | .skin-yellow { | 10 | .skin-yellow { |
11 | //Navbar | 11 | //Navbar |
12 | .main-header { | 12 | .main-header { |
13 | + background-color:@yellow; | ||
13 | .navbar { | 14 | .navbar { |
14 | .navbar-variant(@yellow; #fff); | 15 | .navbar-variant(@yellow; #fff); |
15 | .sidebar-toggle { | 16 | .sidebar-toggle { |
public/assets/less/user.less
0 → 100644
1 | +h2.page-header { | ||
2 | + margin: 10px 0 25px 0; | ||
3 | + padding-bottom: 15px; | ||
4 | +} | ||
5 | + | ||
6 | +.user-baseinfo { | ||
7 | + margin-bottom: 25px; | ||
8 | + | ||
9 | + table tr td { | ||
10 | + color: #999; | ||
11 | + } | ||
12 | +} | ||
13 | + | ||
14 | +@media (min-width: 992px) { | ||
15 | + .user-center { | ||
16 | + .avatar-text, .avatar-img { | ||
17 | + height: 150px; | ||
18 | + width: 150px; | ||
19 | + border-radius: 150px; | ||
20 | + line-height: 150px; | ||
21 | + font-size: 70px; | ||
22 | + } | ||
23 | + | ||
24 | + .avatar-img { | ||
25 | + font-size: 0; | ||
26 | + | ||
27 | + img { | ||
28 | + height: 150px; | ||
29 | + width: 150px; | ||
30 | + border-radius: 150px; | ||
31 | + } | ||
32 | + } | ||
33 | + } | ||
34 | + | ||
35 | +} | ||
36 | + | ||
37 | +.sidebar-toggle { | ||
38 | + display: none; | ||
39 | +} | ||
40 | + | ||
41 | +@media (max-width: 991px) { | ||
42 | + .sidenav { | ||
43 | + position: fixed; | ||
44 | + top: 50px; | ||
45 | + z-index: 1029; | ||
46 | + height: calc(~ '100vh - 50px'); | ||
47 | + padding: 20px 0 20px 0; | ||
48 | + min-width: 250px; | ||
49 | + overflow-y: auto; | ||
50 | + overflow-x: hidden; | ||
51 | + width: 250px; | ||
52 | + left: -250px; | ||
53 | + -webkit-transition: all 0.3s ease; | ||
54 | + -moz-transition: all 0.3s ease; | ||
55 | + -o-transition: all 0.3s ease; | ||
56 | + transition: all 0.3s ease; | ||
57 | + } | ||
58 | + | ||
59 | + .sidebar-toggle { | ||
60 | + display: block; | ||
61 | + position: fixed; | ||
62 | + right: 20px; | ||
63 | + bottom: 70px; | ||
64 | + border-radius: 50%; | ||
65 | + background: #eee; | ||
66 | + font-size: 22px; | ||
67 | + padding: 10px; | ||
68 | + line-height: 30px; | ||
69 | + height: 50px; | ||
70 | + width: 50px; | ||
71 | + text-align: center; | ||
72 | + z-index: 999999; | ||
73 | + } | ||
74 | +} | ||
75 | + | ||
76 | +body.sidebar-open { | ||
77 | + .sidenav { | ||
78 | + left: 0; | ||
79 | + width: 250px; | ||
80 | + box-shadow: 0 6px 27px rgba(0, 0, 0, 0.075); | ||
81 | + } | ||
82 | + | ||
83 | + .sidebar-toggle i:before { | ||
84 | + content: "\f00d"; | ||
85 | + } | ||
86 | +} |
-
请 注册 或 登录 后发表评论