后台 ui 优化
This commit is contained in:
parent
bf3a1bedfa
commit
55a57244f9
|
|
@ -298,8 +298,7 @@ body {
|
|||
}
|
||||
.main-content > #content {
|
||||
flex: 1;
|
||||
padding: 1rem 1rem 4rem;
|
||||
margin-top: 44px;
|
||||
padding: 0 1.5rem 4rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
|
|
@ -309,20 +308,14 @@ body {
|
|||
}
|
||||
|
||||
.page-title-box {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 190px;
|
||||
z-index: 9;
|
||||
right: 0;
|
||||
height: 44px;
|
||||
padding: 0 28px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
padding: 1.5rem 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page-title-box .page-title {
|
||||
font-size: 15px;
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
@ -465,27 +458,21 @@ body.page-seller-product .share-link-pop .share-links-code img {
|
|||
.sidebar .navbar-nav > li.nav-item a i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.sidebar .navbar-nav > li.nav-item.active a, .sidebar .navbar-nav > li.nav-item:hover a {
|
||||
color: #fd560f;
|
||||
.sidebar .navbar-nav > li.nav-item:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.sidebar .navbar-nav > li.nav-item.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background: #fd560f;
|
||||
.sidebar .navbar-nav > li.nav-item.active a {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
background-color: #fff;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
height: 54px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 9;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.header-wrap .header-left {
|
||||
width: 190px;
|
||||
|
|
@ -504,19 +491,18 @@ body.page-seller-product .share-link-pop .share-links-code img {
|
|||
}
|
||||
.header-wrap .header-right > .navbar {
|
||||
margin-bottom: 0;
|
||||
padding: 0 0 0 0.6rem;
|
||||
list-style: none;
|
||||
}
|
||||
.header-wrap .header-right > .navbar > li {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
@media (max-width: 1200px) and (min-width: 992px) {
|
||||
.header-wrap .header-right > .navbar > li {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.header-wrap .header-right > .navbar > li a.nav-link {
|
||||
color: #333;
|
||||
padding: 0.5rem 0;
|
||||
padding: 0;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-wrap .header-right > .navbar > li a.nav-link.show {
|
||||
background-color: #eee;
|
||||
|
|
@ -557,19 +543,23 @@ hr.horizontal.dark {
|
|||
background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent);
|
||||
}
|
||||
|
||||
.nav-tabs.nav-bordered {
|
||||
border-width: 2px;
|
||||
}
|
||||
.nav-tabs.nav-bordered .nav-item {
|
||||
margin-bottom: -1px;
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.nav-tabs.nav-bordered .nav-item:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.nav-tabs.nav-bordered .nav-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.nav-tabs.nav-bordered .nav-item a {
|
||||
color: #6c757d;
|
||||
border: none;
|
||||
padding: 0.7rem 0;
|
||||
}
|
||||
.nav-tabs.nav-bordered .nav-item a.active {
|
||||
color: #fd560f;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid #fd560f;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,10 +21,6 @@ body[class^=page-account-] {
|
|||
background-color: #F7F8FA;
|
||||
}
|
||||
|
||||
.h-600 {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.min-h1 {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
|
@ -273,7 +269,7 @@ body[class^=page-account-] {
|
|||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
content: "";
|
||||
width: 100px;
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: #FD560F;
|
||||
}
|
||||
|
|
@ -1162,6 +1158,9 @@ body.page-account-address .addresses-wrap .item .address-bottom a, body.page-che
|
|||
height: 90px;
|
||||
}
|
||||
|
||||
.module-tab-product .module-title {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.module-tab-product .nav .nav-link {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
|
|
|
|||
|
|
@ -6976,11 +6976,12 @@ sup {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #3480e7;
|
||||
color: #fd560f;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #fd560f;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
|
|
@ -9758,6 +9759,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
.btn:hover {
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-check:focus + .btn, .btn:focus {
|
||||
outline: 0;
|
||||
|
|
@ -10210,11 +10212,15 @@ textarea.form-control-lg {
|
|||
|
||||
.btn-link {
|
||||
font-weight: 400;
|
||||
color: #3480e7;
|
||||
color: #fd560f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-link:hover {
|
||||
color: #fd560f;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.btn-link:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.btn-link:disabled, .btn-link.disabled {
|
||||
color: #6c757d;
|
||||
|
|
@ -10513,6 +10519,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
.dropdown-item:hover, .dropdown-item:focus {
|
||||
color: #1e2125;
|
||||
text-decoration: none;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
|
|
@ -10681,7 +10688,7 @@ textarea.form-control-lg {
|
|||
.nav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: #3480e7;
|
||||
color: #fd560f;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
|
@ -10691,6 +10698,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
.nav-link:hover, .nav-link:focus {
|
||||
color: #fd560f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-link.disabled {
|
||||
color: #6c757d;
|
||||
|
|
@ -10793,6 +10801,10 @@ textarea.form-control-lg {
|
|||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.navbar-brand:hover, .navbar-brand:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -11296,6 +11308,9 @@ textarea.form-control-lg {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card-link + .card-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
|
@ -11541,7 +11556,7 @@ textarea.form-control-lg {
|
|||
.page-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
color: #3480e7;
|
||||
color: #fd560f;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dee2e6;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
|
|
@ -11554,6 +11569,7 @@ textarea.form-control-lg {
|
|||
.page-link:hover {
|
||||
z-index: 2;
|
||||
color: #fd560f;
|
||||
text-decoration: none;
|
||||
background-color: #e9ecef;
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
|
@ -18055,3 +18071,7 @@ textarea.form-control-lg {
|
|||
border-left: 3px solid #fd560f;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #212529;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,18 +22,31 @@ hr.horizontal.dark {
|
|||
}
|
||||
|
||||
.nav-tabs.nav-bordered {
|
||||
border-width: 2px;
|
||||
// border-width: 2px;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: -1px;
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #6c757d;
|
||||
border: none;
|
||||
padding: 0.7rem 0;
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: $primary;
|
||||
font-weight: bold;
|
||||
// color: $primary;
|
||||
// color: #12263f;
|
||||
color: #1a1a1a;
|
||||
// font-weight: bold;
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid $primary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -121,8 +121,8 @@ body {
|
|||
|
||||
> #content {
|
||||
flex: 1;
|
||||
padding: 1rem 1rem 4rem;
|
||||
margin-top: 44px;
|
||||
padding: 0 1.5rem 4rem;
|
||||
// margin-top: 44px;
|
||||
overflow-y: auto;
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
|
|
@ -132,22 +132,23 @@ body {
|
|||
}
|
||||
|
||||
.page-title-box {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 190px;
|
||||
// position: fixed;
|
||||
// top: 60px;
|
||||
// left: 190px;
|
||||
z-index: 9;
|
||||
right: 0;
|
||||
height: 44px;
|
||||
padding: 0 28px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
// height: 58px;
|
||||
padding: 1.5rem 0 0;
|
||||
// background-color: #fff;
|
||||
// border-bottom: 1px solid #f1f1f1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.page-title {
|
||||
font-size: 15px;
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
// line-height: 35px;
|
||||
// color: #12263f;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,13 @@
|
|||
|
||||
.header-wrap {
|
||||
background-color: #fff;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
height: 54px;
|
||||
// border-bottom: 1px solid #f1f1f1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 9;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
|
||||
|
||||
.header-left {
|
||||
width: 190px;
|
||||
|
|
@ -35,17 +38,18 @@
|
|||
|
||||
> .navbar {
|
||||
margin-bottom: 0;
|
||||
padding: 0 0 0 .6rem;
|
||||
list-style: none;
|
||||
> li {
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
@media (max-width: 1200px) and (min-width: 992px) {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
padding: 0 1rem;
|
||||
|
||||
a.nav-link {
|
||||
color: #333;
|
||||
padding: 0.5rem 0;
|
||||
padding: 0;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.show {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,25 +37,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
a {
|
||||
color: $primary;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background: $primary;
|
||||
a {
|
||||
// color: $primary;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
// &.active {
|
||||
// &:before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// width: 2px;
|
||||
// height: 100%;
|
||||
// z-index: 1;
|
||||
// background: $primary;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -29,15 +29,15 @@
|
|||
<x-admin-header/>
|
||||
|
||||
<div class="main-content">
|
||||
<aside class="sidebar navbar-expand-xs border-radius-xl">
|
||||
<x-admin-sidebar/>
|
||||
</aside>
|
||||
<aside class="sidebar navbar-expand-xs border-radius-xl">
|
||||
<x-admin-sidebar/>
|
||||
</aside>
|
||||
<div id="content">
|
||||
<div class="page-title-box"><h4 class="page-title">@yield('title')</h4></div>
|
||||
<div id="content">
|
||||
<div class="container-fluid p-0">
|
||||
@yield('content')
|
||||
</div>
|
||||
<div class="container-fluid p-0 mt-4">
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@stack('footer')
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,8 @@ $btn-border-radius: 0;
|
|||
// $btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
|
||||
|
||||
$link-decoration: none;
|
||||
$link-color: #3480e7;
|
||||
$link-hover-decoration: underline;
|
||||
// $link-color: #3480e7;
|
||||
$link-hover-color: $primary;
|
||||
$form-select-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
|
||||
|
||||
|
|
@ -108,4 +109,10 @@ $card-border-width: 0;
|
|||
// font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
a {
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,10 +8,6 @@ body[class^="page-account-"] {
|
|||
background-color: #F7F8FA;
|
||||
}
|
||||
|
||||
.h-600 {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
@for $i from 1 through 6 {
|
||||
.min-h#{$i} {
|
||||
min-height: #{$i}00px;
|
||||
|
|
@ -67,7 +63,7 @@ body[class^="page-account-"] {
|
|||
transform:translateX(-50%);
|
||||
left: 50%;
|
||||
content: '';
|
||||
width: 100px;
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: #FD560F;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
.module-tab-product {
|
||||
.module-title {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
.nav-link {
|
||||
color: #6c757d;
|
||||
|
|
|
|||
|
|
@ -6,19 +6,13 @@
|
|||
<div class="account-email">{{ $customer->email }}</div>
|
||||
</div>
|
||||
<nav class="list-group account-links">
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center active" href="">
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center active" href="{{ shop_route('account.index') }}">
|
||||
<span>个人中心</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}">
|
||||
<span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('addresses.index') }}">
|
||||
<span>我的地址</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<span>我的收藏</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<span>我的收藏</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<span>我的收藏</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.wishlist.index') }}">
|
||||
<span>我的收藏</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('logout') }}">
|
||||
<span>退出登录</span></a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue