更新样式:前台页面增加一个通知图标

This commit is contained in:
Argo-MacBookPro 2018-10-01 14:32:31 +08:00
parent 43d0845865
commit cff9c3cb7f
2 changed files with 19 additions and 9 deletions

View File

@ -8,6 +8,19 @@
<span id="websiteTitle">@Model.Title</span> <span id="websiteTitle">@Model.Title</span>
</a> </a>
<div class="nav"> <div class="nav">
<div class="dropdown">
<a data-toggle="dropdown" class="shadow-default" href="#">
<i class="fa fa-bell-o"></i>
<span id="msgHeaderMsgBadge" class="badge badge-pill badge-success"></span>
</a>
<div class="dropdown-menu">
<div class="dropdown-arrow arrow-success"></div>
<div id="msgHeaderMsgContent" class="dropdown-header bg-success">您有 <span id="msgHeaderMsg">0</span> 个未读的消息</div>
<div class="dropdown-footer">
<a href="#">查看所有消息</a>
</div>
</div>
</div>
</div> </div>
<div class="dropdown userinfo"> <div class="dropdown userinfo">
<a data-toggle="dropdown" class="dropdown-toggle shadow-default" href="#"> <a data-toggle="dropdown" class="dropdown-toggle shadow-default" href="#">

View File

@ -163,17 +163,11 @@ a, a:hover, a:focus {
} }
.nav [data-toggle="dropdown"] { .nav [data-toggle="dropdown"] {
border: 1px solid #eee;
border-radius: 4px; border-radius: 4px;
padding: 6px 12px; padding: 6px 12px;
color: #777;
transition: all .25s linear; transition: all .25s linear;
} }
.nav [data-toggle="dropdown"]:hover {
color: #333;
}
.nav .dropdown-menu { .nav .dropdown-menu {
width: 235px; width: 235px;
border: none; border: none;
@ -238,17 +232,20 @@ a, a:hover, a:focus {
.userinfo .dropdown-toggle { .userinfo .dropdown-toggle {
display: block; display: block;
padding: 6px; padding: 6px;
border: 1px solid rgba(204, 204, 204, 0.5);
border-radius: 4px; border-radius: 4px;
color: #eee;
transition: all .25s linear; transition: all .25s linear;
} }
.userinfo .dropdown-toggle, .nav [data-toggle="dropdown"] {
border: 1px solid rgba(204, 204, 204, 0.5);
color: #eee;
}
.userinfo .dropdown-toggle:after { .userinfo .dropdown-toggle:after {
vertical-align: middle; vertical-align: middle;
} }
.userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle { .userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle, .nav [data-toggle="dropdown"]:hover {
color: #fff; color: #fff;
border: 1px solid #fff; border: 1px solid #fff;
} }