后台 ui 优化

This commit is contained in:
pushuo 2022-07-29 15:14:37 +08:00
parent bf3a1bedfa
commit 55a57244f9
12 changed files with 134 additions and 102 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,10 @@
@charset "UTF-8";
.module-tab-product {
.module-title {
margin-bottom: 1rem;
}
.nav {
.nav-link {
color: #6c757d;

View File

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