style: 调整右侧用户登录信息栏样式
This commit is contained in:
Argo Zhang
parent
079f3a36e3
commit
f877747c3b
|
|
@ -92,6 +92,18 @@
|
|||
<span id="userDisplayName" data-userName="@Model.UserName" class="username text-truncate d-inline-block">@Model.DisplayName</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<div class="dropdown-item">
|
||||
<div class="d-flex flex-fill align-items-center">
|
||||
<img src="@Url.Content(Model.Icon)">
|
||||
<div class="flex-fill">
|
||||
<div class="d-flex">
|
||||
<span class="d-inline-block font-weight-bold flex-fill">@Model.DisplayName</span>
|
||||
<span class="text-success"><i class="fa fa-star"></i></span>
|
||||
</div>
|
||||
<div class="text-sm">登录名：@Model.UserName</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-item">
|
||||
<a href="~/Admin/Profiles"><i class=" fa fa-suitcase"></i>个人中心</a>
|
||||
<a href="~/Admin/Index"><i class="fa fa-cog"></i>设置</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,155 @@
|
|||
.header .nav {
|
||||
margin-right: 15px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.userinfo .badge {
|
||||
top: 64px;
|
||||
}
|
||||
|
||||
.userinfo img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item {
|
||||
border-bottom: solid 1px #e9ecef;
|
||||
padding: 0.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item:first-child {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item a {
|
||||
padding: 0.25rem 0.625rem;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item a i {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item:last-child a {
|
||||
background: none;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item:last-child a:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sidebar-toggle-box .fa-bars {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
|
||||
color: rgb(51, 122, 183);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link {
|
||||
padding: 3px 8px;
|
||||
color: rgba(51, 122, 183, 0.9);
|
||||
transition: color .3s linear;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link:hover, .nav-link .navbar-nav .active > .nav-link:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.dropdown-item:hover, .nav .dropdown-item:nth-of-type(odd):hover, .dropdown-item:active, .dropdown-item.active,
|
||||
.bootstrap-table .export .dropdown-menu li:hover {
|
||||
background-color: #77afd5;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.breadcrumb, .pagination-detail {
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
.card-header, .modal-header, .popover-header {
|
||||
background-color: #5899c8;
|
||||
border-color: #3581b8;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.header .navbar {
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
}
|
||||
|
||||
.header .nav-item.active {
|
||||
border-bottom: solid 1px #307eb6;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-top-color: #84bbe2;
|
||||
}
|
||||
|
||||
.card, .modal-footer, .form-control, .popover, .date .input-group-text,
|
||||
.input-group .btn:not(.btn-secondary):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-danger),
|
||||
.form-select-input:hover {
|
||||
border-color: #84bbe2;
|
||||
}
|
||||
|
||||
.card .card-header, .modal-header {
|
||||
background-image: linear-gradient(to bottom, #5893be 0%, #63a6d7 100%);
|
||||
}
|
||||
|
||||
.card .card-header, a[data-toggle="collapse"], .modal-header, .modal-header .close, .popover-header,
|
||||
.card .card-header a, .modal-header a,
|
||||
.card .card-header a:hover,
|
||||
.close:not(:disabled):not(.disabled):hover,
|
||||
.close:not(:disabled):not(.disabled):focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card .card-header a {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
color: #467fa7;
|
||||
}
|
||||
|
||||
.breadcrumb > li + li:before, .breadcrumb, .pagination-detail, .form-select-append {
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
.form-control[disabled], .form-control[readonly], .date .form-control, .date .input-group-text,
|
||||
.input-group .btn:not(.btn-secondary):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-danger) {
|
||||
background-color: rgba(84, 189, 220, 0.21);
|
||||
}
|
||||
|
||||
.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
|
||||
border-right-color: #305873;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.breadcrumb {
|
||||
border-color: rgba(81, 152, 203, 0.8)
|
||||
}
|
||||
}
|
||||
|
|
@ -101,6 +101,10 @@ body {
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item a {
|
||||
text-align: center;
|
||||
color: #777;
|
||||
|
|
|
|||
Loading…
Reference in New Issue