前端样式完成

master
Lee-1203 2022-05-12 14:57:58 +08:00
parent 0ef1d5d111
commit 97d284e908
4 changed files with 69 additions and 3 deletions

View File

@ -55,12 +55,31 @@
justify-content: flex-end;
align-items: center;
width: 212px;
position: relative;
}
/* 通知 */
.notice{
margin-right: 14%;
position: relative;
}
.notice img{
height: 20px;
}
.notice>em{
display: block;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, .8);
border-radius: 100%;
font-size: 12px;
color: #ff0000;
transform: scale(.85);
line-height: 20px;
text-align: center;
position: absolute;
right: -16px;
top: -6px;
}
/* 登录/注册 */
.login-registration{
display: flex;
@ -90,7 +109,32 @@
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
cursor: pointer;
transition: all .6s;
}
.icon-arrow.cur{
transform: rotateX(180deg);
margin-top: -6px;
}
/* 退出登录 */
.open-more{
display: none;
max-width: 100%;
background-color: rgba(255, 255, 255, .8);
padding: 5px 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
user-select: none;
position: absolute;
top: 37px;
right: 0;
}
.open-more>a{
display: flex;
font-size: 15px;
line-height: 2.5;
}
/* 整屏半透明背景 */
.nav-bg{
display: none;
@ -1389,7 +1433,13 @@
height: 36px;
}
.notice{
margin-right: 5%;
margin-right: 10%;
}
.notice img{
height: 18px;
}
.notice>em{
background-color: rgba(0, 0, 0, 0);
}
.head .head-btn {
@ -1434,6 +1484,11 @@
font-weight: normal;
border: 0;
}
.open-more{
position: fixed;
top: 50px;
right: 2%;
}
/* 首页 */
.main{

BIN
images/icon/icon-notice.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -57,6 +57,12 @@ jQuery(function($){
autoplay:false,
})
// 快捷菜单
$('.top-right .icon-arrow').click(function() {
$(this).toggleClass('cur');
$('.top-right .open-more').toggle();
});
// 登录
if($('.login-btn').length > 0){
$('.login-btn').click(function() {

View File

@ -41,13 +41,18 @@
<!-- 顶部右侧 -->
<div class="top-right">
<!-- 通知 -->
<div class="notice"><a href="">通知</a></div>
<div class="notice"><a href=""><img src="images/icon/icon-notice.png" alt="通知"></a><em>15</em></div>
<!-- 登录/注册 -->
<div class="login-registration">
<!-- <ins><img src="images/icon/icon-user.png" alt="登录/注册"></ins> -->
<span><em><a href="login.html">登录</a>/<a href="register.html">注册</a></em></span>
<em class="icon-arrow"></em>
</div>
<div class="open-more">
<a href="">个人中心</a>
<a href="">修改密码</a>
<a href="">退出登录</a>
</div>
</div>
<!-- 导航按钮 -->
<div class="nav-bg"></div>