From 97d284e9084981d011e986c58bd9db1e9636538f Mon Sep 17 00:00:00 2001
From: Lee-1203 <342694918@qq.com>
Date: Thu, 12 May 2022 14:57:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=A0=B7=E5=BC=8F=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css               |  59 ++++++++++++++++++++++++++++++++++--
 images/icon/icon-notice.png | Bin 0 -> 1384 bytes
 js/my-site.js               |   6 ++++
 login.html                  |   7 ++++-
 4 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 images/icon/icon-notice.png

diff --git a/css/style.css b/css/style.css
index d4f3114..5c9562d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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{
diff --git a/images/icon/icon-notice.png b/images/icon/icon-notice.png
new file mode 100644
index 0000000000000000000000000000000000000000..067a04865a87e94e95c5ed92c7281681d4cfb9c3
GIT binary patch
literal 1384
zcmV-u1(*7XP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px)B1uF+RA@u(T5D)rRS=%Jn{I;GAe3sg1;r;CZKE-{a}uPfPqd0vYz3{Y*gqAa
z6^a%_P{E1@L42UK6jZdL4WcboeB%1py>r+Giq9&DXl*q9=nwHnh`D#<$Zk2gy}Re$
z&E0^|1N&q5%zQK7nK`dHi_oS<L=OYN@*4bS%xu2r-Y|E>8lY0@8xiTLeH~}!#qF@w
zHUdN>w!_Ta7F%rrHIDx;3HZK$3IHra#Pa~)nOMr~M8pG86n&w!{wl9@$|VAWgM*ic
zVYnU<*QIo<3;=rzg~Fb4x%@*)okX!&5%7Kg0sz>Ch^uDd#DmPdtyTS&2`HsDh{&S=
zu&7nzmfk)9xSyH7&x+L&f!Z4XPy=HnMEp=heixB(M4Upzg(9*<MEVi&dH|Ro*G0tr
zh`6#+sr;FRL}mg_oF6R|3M1umd4DqphK7dbhhcap06Y+n9wNTm+1a_OR4PrUC6S3h
zEp2wj!A0aQt@TT3jT$+n)Y&5P7yzt}={?KLo6=&XCSWEkB7TyP^DCISl-6Kej)->0
zNg(3wK@hy21~UtRx8th~A}$Dm;7A%n&195PABf1+mdwv#7!Fpe)jwR=sR)>LK8hkU
z`gU8(%)49$()9bjztl{805BV2y=`UY5tn`{0>1CRVsBE$SP%r)xWKdY6VXNhc%iO?
zh~G|4O<g=THug_5947&#)M63&%?1&Xbz19JvpDFI9UdM&adL9<005k2$vUI#BtS$r
z1HfAr=r7EChRdN=`V*GuUCg|8RuLegC(JHsfxO1dceLW5ONWSt0pL?h?g%q4m@NSV
zXn_A~h`1&Qf>D<<t@abqVE{PI(r>y<r%9o&0pP+qpolEX^EezQ>ihmabEL5B-J-R&
zQ+S4olYmlcTtrT_02gVkCt4k0mmU$BoqmHA@r^+cyx2(3Nq~r^0AOAnpj}tPIzADZ
zqqR9F)mzi!b{Yb6a<{bznCgXn(tV^^MdLUDS59Z`PuL5NN8tDz$dX36rjYOZ=OE&b
zmIJ>s^XXX}$||drx<^Ewv-Gwz^W81&14Oh20N%7VmE4cfamR@0N&xuC`u%-ozP42Y
zj|0F~i@?)C5Zs$}RI|wU_xGP!C=`CObPh7}`7IGhxaw_Y=6K04i+`zPiRdq@^fDQS
z;kngn^-z*>!;OrH)&s!Hwh|)V5CnlKLbbIKktxmerHOnZf!gh;0st3To_@*9m$lXN
z8o2NKTM+R{+m`2f%PW=2=W+Xq1d@tZ?Y;*jOlEV*zsmZ3FEiihBrq^Au+sCq8EGOS
z?`W-Wnv2n|+fYhfAtE2gY>qOsSs9PEV<JFArc`p9E!6HKbfbaseSZWI@3Z^Ovz6BR
zyQA|XA#^j24s$u`DQ(R-+#M5v*yCJE%()YbmmQN*C|-q_JMY|<4vWZj_MN=ZD)a^b
z-0H@gQ;CBjvPEnCUeifj@9gdEJ*lg!tJmeCh-|Mt>eWR}$>sS5dZzYi2FGqITsAz<
zJ5;Gu?Bhk_RmcUFFzHRC;!cg4=cjt8O?fhkqSc7_)Qr(X+!F-BY~I(vc_&UoNGVkn
zkxLU~P5H%qmNvj~);?YKb0J_JKRnOdZT+>tW!LmKz3Zj{FfzFiFhI2z98<BrB!%%@
zoX?ej0qg1MDRy^vZxWHs0I(!Z1QB;cQM5yAJ(hxGDv{hGU|Z|!>zh|B7Ehj@o?h6|
q(QyJIP85s9iBhTbcPg(k2>lD0=L}E5>;+c<0000<MNUMnLSTZBy_#tN

literal 0
HcmV?d00001

diff --git a/js/my-site.js b/js/my-site.js
index f406c16..c424fa6 100644
--- a/js/my-site.js
+++ b/js/my-site.js
@@ -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() {
diff --git a/login.html b/login.html
index ca379f8..74f59b6 100644
--- a/login.html
+++ b/login.html
@@ -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>