后台 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 { .main-content > #content {
flex: 1; flex: 1;
padding: 1rem 1rem 4rem; padding: 0 1.5rem 4rem;
margin-top: 44px;
overflow-y: auto; overflow-y: auto;
} }
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
@ -309,20 +308,14 @@ body {
} }
.page-title-box { .page-title-box {
position: fixed;
top: 60px;
left: 190px;
z-index: 9; z-index: 9;
right: 0; right: 0;
height: 44px; padding: 1.5rem 0 0;
padding: 0 28px;
background-color: #fff;
border-bottom: 1px solid #f1f1f1;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.page-title-box .page-title { .page-title-box .page-title {
font-size: 15px; font-size: 1.2rem;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
white-space: nowrap; 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 { .sidebar .navbar-nav > li.nav-item a i {
margin-right: 7px; margin-right: 7px;
} }
.sidebar .navbar-nav > li.nav-item.active a, .sidebar .navbar-nav > li.nav-item:hover a { .sidebar .navbar-nav > li.nav-item:hover {
color: #fd560f;
background-color: #f4f4f4; background-color: #f4f4f4;
} }
.sidebar .navbar-nav > li.nav-item.active:before { .sidebar .navbar-nav > li.nav-item.active a {
content: ""; background-color: #eee;
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
z-index: 1;
background: #fd560f;
} }
.header-wrap { .header-wrap {
background-color: #fff; background-color: #fff;
height: 60px; height: 54px;
border-bottom: 1px solid #f1f1f1; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 9;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
} }
.header-wrap .header-left { .header-wrap .header-left {
width: 190px; width: 190px;
@ -504,19 +491,18 @@ body.page-seller-product .share-link-pop .share-links-code img {
} }
.header-wrap .header-right > .navbar { .header-wrap .header-right > .navbar {
margin-bottom: 0; margin-bottom: 0;
padding: 0 0 0 0.6rem;
list-style: none; list-style: none;
} }
.header-wrap .header-right > .navbar > li { .header-wrap .header-right > .navbar > li {
padding: 0.5rem 1rem; padding: 0 1rem;
}
@media (max-width: 1200px) and (min-width: 992px) {
.header-wrap .header-right > .navbar > li {
padding: 0.5rem 1rem;
}
} }
.header-wrap .header-right > .navbar > li a.nav-link { .header-wrap .header-right > .navbar > li a.nav-link {
color: #333; 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 { .header-wrap .header-right > .navbar > li a.nav-link.show {
background-color: #eee; background-color: #eee;
@ -557,19 +543,23 @@ hr.horizontal.dark {
background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent); 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 { .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 { .nav-tabs.nav-bordered .nav-item a {
color: #6c757d; color: #6c757d;
border: none; border: none;
padding: 0.7rem 0;
} }
.nav-tabs.nav-bordered .nav-item a.active { .nav-tabs.nav-bordered .nav-item a.active {
color: #fd560f; color: #1a1a1a;
font-weight: bold;
background-color: transparent; background-color: transparent;
border-bottom: 2px solid #fd560f; border-bottom: 2px solid #fd560f;
} }

View File

@ -21,10 +21,6 @@ body[class^=page-account-] {
background-color: #F7F8FA; background-color: #F7F8FA;
} }
.h-600 {
min-height: 500px;
}
.min-h1 { .min-h1 {
min-height: 100px; min-height: 100px;
} }
@ -273,7 +269,7 @@ body[class^=page-account-] {
transform: translateX(-50%); transform: translateX(-50%);
left: 50%; left: 50%;
content: ""; content: "";
width: 100px; width: 60px;
height: 1px; height: 1px;
background: #FD560F; background: #FD560F;
} }
@ -1162,6 +1158,9 @@ body.page-account-address .addresses-wrap .item .address-bottom a, body.page-che
height: 90px; height: 90px;
} }
.module-tab-product .module-title {
margin-bottom: 1rem;
}
.module-tab-product .nav .nav-link { .module-tab-product .nav .nav-link {
color: #6c757d; color: #6c757d;
font-size: 0.9rem; font-size: 0.9rem;

View File

@ -6976,11 +6976,12 @@ sup {
} }
a { a {
color: #3480e7; color: #fd560f;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #fd560f; color: #fd560f;
text-decoration: underline;
} }
a:not([href]):not([class]), a:not([href]):not([class]):hover { a:not([href]):not([class]), a:not([href]):not([class]):hover {
@ -9758,6 +9759,7 @@ textarea.form-control-lg {
} }
.btn:hover { .btn:hover {
color: #212529; color: #212529;
text-decoration: none;
} }
.btn-check:focus + .btn, .btn:focus { .btn-check:focus + .btn, .btn:focus {
outline: 0; outline: 0;
@ -10210,11 +10212,15 @@ textarea.form-control-lg {
.btn-link { .btn-link {
font-weight: 400; font-weight: 400;
color: #3480e7; color: #fd560f;
text-decoration: none; text-decoration: none;
} }
.btn-link:hover { .btn-link:hover {
color: #fd560f; color: #fd560f;
text-decoration: underline;
}
.btn-link:focus {
text-decoration: underline;
} }
.btn-link:disabled, .btn-link.disabled { .btn-link:disabled, .btn-link.disabled {
color: #6c757d; color: #6c757d;
@ -10513,6 +10519,7 @@ textarea.form-control-lg {
} }
.dropdown-item:hover, .dropdown-item:focus { .dropdown-item:hover, .dropdown-item:focus {
color: #1e2125; color: #1e2125;
text-decoration: none;
background-color: #e9ecef; background-color: #e9ecef;
} }
.dropdown-item.active, .dropdown-item:active { .dropdown-item.active, .dropdown-item:active {
@ -10681,7 +10688,7 @@ textarea.form-control-lg {
.nav-link { .nav-link {
display: block; display: block;
padding: 0.5rem 1rem; 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; 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) { @media (prefers-reduced-motion: reduce) {
@ -10691,6 +10698,7 @@ textarea.form-control-lg {
} }
.nav-link:hover, .nav-link:focus { .nav-link:hover, .nav-link:focus {
color: #fd560f; color: #fd560f;
text-decoration: none;
} }
.nav-link.disabled { .nav-link.disabled {
color: #6c757d; color: #6c757d;
@ -10793,6 +10801,10 @@ textarea.form-control-lg {
font-size: 1rem; font-size: 1rem;
white-space: nowrap; white-space: nowrap;
} }
.navbar-brand:hover, .navbar-brand:focus {
text-decoration: none;
}
.navbar-nav { .navbar-nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -11296,6 +11308,9 @@ textarea.form-control-lg {
margin-bottom: 0; margin-bottom: 0;
} }
.card-link:hover {
text-decoration: none;
}
.card-link + .card-link { .card-link + .card-link {
margin-left: 1rem; margin-left: 1rem;
} }
@ -11541,7 +11556,7 @@ textarea.form-control-lg {
.page-link { .page-link {
position: relative; position: relative;
display: block; display: block;
color: #3480e7; color: #fd560f;
background-color: #fff; background-color: #fff;
border: 1px solid #dee2e6; 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; 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 { .page-link:hover {
z-index: 2; z-index: 2;
color: #fd560f; color: #fd560f;
text-decoration: none;
background-color: #e9ecef; background-color: #e9ecef;
border-color: #dee2e6; border-color: #dee2e6;
} }
@ -18055,3 +18071,7 @@ textarea.form-control-lg {
border-left: 3px solid #fd560f; border-left: 3px solid #fd560f;
line-height: 1; line-height: 1;
} }
.breadcrumb a {
color: #212529;
}

View File

@ -22,18 +22,31 @@ hr.horizontal.dark {
} }
.nav-tabs.nav-bordered { .nav-tabs.nav-bordered {
border-width: 2px; // border-width: 2px;
.nav-item { .nav-item {
margin-bottom: -1px; margin-left: 0.75rem;
margin-right: 0.75rem;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
a { a {
color: #6c757d; color: #6c757d;
border: none; border: none;
padding: 0.7rem 0;
} }
a.active { a.active {
color: $primary; // color: $primary;
font-weight: bold; // color: #12263f;
color: #1a1a1a;
// font-weight: bold;
background-color: transparent; background-color: transparent;
border-bottom: 2px solid $primary; border-bottom: 2px solid $primary;
} }

View File

@ -121,8 +121,8 @@ body {
> #content { > #content {
flex: 1; flex: 1;
padding: 1rem 1rem 4rem; padding: 0 1.5rem 4rem;
margin-top: 44px; // margin-top: 44px;
overflow-y: auto; overflow-y: auto;
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
@ -132,22 +132,23 @@ body {
} }
.page-title-box { .page-title-box {
position: fixed; // position: fixed;
top: 60px; // top: 60px;
left: 190px; // left: 190px;
z-index: 9; z-index: 9;
right: 0; right: 0;
height: 44px; // height: 58px;
padding: 0 28px; padding: 1.5rem 0 0;
background-color: #fff; // background-color: #fff;
border-bottom: 1px solid #f1f1f1; // border-bottom: 1px solid #f1f1f1;
display: flex; display: flex;
align-items: center; align-items: center;
.page-title { .page-title {
font-size: 15px; font-size: 1.2rem;
margin: 0; margin: 0;
// line-height: 35px; // line-height: 35px;
// color: #12263f;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;

View File

@ -10,10 +10,13 @@
.header-wrap { .header-wrap {
background-color: #fff; background-color: #fff;
height: 60px; height: 54px;
border-bottom: 1px solid #f1f1f1; // border-bottom: 1px solid #f1f1f1;
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 9;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
.header-left { .header-left {
width: 190px; width: 190px;
@ -35,17 +38,18 @@
> .navbar { > .navbar {
margin-bottom: 0; margin-bottom: 0;
padding: 0 0 0 .6rem;
list-style: none; list-style: none;
> li { > li {
padding: 0.5rem 1rem; padding: 0 1rem;
@media (max-width: 1200px) and (min-width: 992px) {
padding: 0.5rem 1rem;
}
a.nav-link { a.nav-link {
color: #333; color: #333;
padding: 0.5rem 0; padding: 0;
height: 54px;
display: flex;
align-items: center;
&.show { &.show {
background-color: #eee; background-color: #eee;
} }

View File

@ -37,25 +37,29 @@
} }
} }
&.active, &:hover { &:hover {
a {
color: $primary;
background-color: #f4f4f4; background-color: #f4f4f4;
} }
}
&.active { &.active {
&:before { a {
content: ''; // color: $primary;
position: absolute; background-color: #eee;
left: 0; }
top: 0; }
width: 2px;
height: 100%; // &.active {
z-index: 1; // &:before {
background: $primary; // content: '';
} // position: absolute;
} // left: 0;
// top: 0;
// width: 2px;
// height: 100%;
// z-index: 1;
// background: $primary;
// }
// }
} }
} }
} }

View File

@ -32,9 +32,9 @@
<aside class="sidebar navbar-expand-xs border-radius-xl"> <aside class="sidebar navbar-expand-xs border-radius-xl">
<x-admin-sidebar/> <x-admin-sidebar/>
</aside> </aside>
<div class="page-title-box"><h4 class="page-title">@yield('title')</h4></div>
<div id="content"> <div id="content">
<div class="container-fluid p-0"> <div class="page-title-box"><h4 class="page-title">@yield('title')</h4></div>
<div class="container-fluid p-0 mt-4">
@yield('content') @yield('content')
</div> </div>
</div> </div>

View File

@ -41,7 +41,8 @@ $btn-border-radius: 0;
// $btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1); // $btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
$link-decoration: none; $link-decoration: none;
$link-color: #3480e7; $link-hover-decoration: underline;
// $link-color: #3480e7;
$link-hover-color: $primary; $link-hover-color: $primary;
$form-select-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1); $form-select-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
@ -109,3 +110,9 @@ $card-border-width: 0;
} }
} }
} }
.breadcrumb {
a {
color: #212529;
}
}

View File

@ -8,10 +8,6 @@ body[class^="page-account-"] {
background-color: #F7F8FA; background-color: #F7F8FA;
} }
.h-600 {
min-height: 500px;
}
@for $i from 1 through 6 { @for $i from 1 through 6 {
.min-h#{$i} { .min-h#{$i} {
min-height: #{$i}00px; min-height: #{$i}00px;
@ -67,7 +63,7 @@ body[class^="page-account-"] {
transform:translateX(-50%); transform:translateX(-50%);
left: 50%; left: 50%;
content: ''; content: '';
width: 100px; width: 60px;
height: 1px; height: 1px;
background: #FD560F; background: #FD560F;
} }

View File

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

View File

@ -6,19 +6,13 @@
<div class="account-email">{{ $customer->email }}</div> <div class="account-email">{{ $customer->email }}</div>
</div> </div>
<nav class="list-group account-links"> <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> <span>个人中心</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}"> <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> <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') }}"> <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> <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=""> <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="">
<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> <span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('logout') }}"> <a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('logout') }}">
<span>退出登录</span></a> <span>退出登录</span></a>