Update index.html

index.html

@@ -69,6 +69,87 @@
 				margin-top: 130px !important;
 			}
 		}
+
+		.more {
+			border-radius: 30px;
+			width: 125px;
+			padding: 6px;
+			font-size: 17px;
+			font-weight: bold;
+			position: relative;
+			top: -20px;
+			left: 20px;
+			z-index: -1;
+			border-color: #0054a1;
+			color: #0054a1;
+		}
+
+		.notification-box {
+			width: auto;
+			height: 140px;
+			border-radius: 15px;
+			border: solid 1px rgba(128, 128, 128, 0.209);
+			display: flex;
+			overflow-y: hidden;
+			overflow-x: scroll;
+			padding: 20px;
+		}
+
+		::-webkit-scrollbar {
+			width: 5px;
+			height: 5px;
+			border-radius: 10px;
+			background: #ffffff;
+		}
+
+		::-webkit-scrollbar-track {
+			border-radius: 10px;
+			background: #f1f1f100;
+		}
+
+		::-webkit-scrollbar-thumb {
+			border-radius: 10px;
+			background: #888;
+		}
+
+		.notification {
+			width: 370px;
+			height: 100px;
+			aspect-ratio: 37/10;
+			border-radius: 10px;
+			margin-right: 20px;
+			box-shadow: 0px 5px 10px rgba(128, 128, 128, 0.658);
+			font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+			padding: 20px;
+			transition: all 0.2s;
+		}
+
+		.notification:hover {
+			transform: translateY(-5px);
+			box-shadow: 0px 10px 19px rgba(128, 128, 128, 0.958);
+		}
+
+		.notification-head {
+			font-weight: 500;
+			font-size: 30px;
+			color: #0053a1c4;
+		}
+
+		#notification-body {
+			font-size: 30px;
+			display: block;
+			margin-top: 10px;
+			font-weight: lighter;
+		}
+
+		#notification-4 {
+			text-align: center;
+		}
+
+		#notification-4>#notification-body {
+			margin-top: 20px;
+			font-weight: 700;
+		}
 	</style>
 </head>
 
@@ -175,11 +256,42 @@
 			</a>
 			<div class="slide" id="slide-2"></div>
 			<div class="slide" id="slide-3"></div>
+			<a href="https://www.shsbnu.net/skin/cmsinfo/list/1/20"><button class="more"><i
+						class="fas fa-circle-plus"></i>&emsp;查看更多</button></a>
 		</div>
-		<p style="text-align: center; font-weight: bold; font-size: 30px;">通知公告</p>
 
+		<p style="text-align: center; font-weight: bold; font-size: 30px; color: #0054a1;">通知公告</p>
+		<div class="notification-box">
+			<a href="https://www.shsbnu.net/html/1/news/20230817/n3416.html">
+				<div class="notification" id="notification-1">
+					<span class="notification-head">8月18日</span><br><span id="notification-body">2023级住宿生名单</span>
+				</div>
+			</a>
+			<a href="https://www.shsbnu.net/skin/infointernal/preview/3410">
+				<div class="notification" id="notification-2">
+					<span class="notification-head">7月28日</span><br><span id="notification-body">2026届新高一暑假作业</span>
+				</div>
+			</a>
+			<a href="https://www.shsbnu.net/html/1/news/20230708/n3392.html">
+				<div class="notification" id="notification-3">
+					<span class="notification-head">7月8日</span><br><span id="notification-body">食堂招标公告</span>
+				</div>
+			</a>
+			<a href="https://www.shsbnu.net/skin/cmsinfo/list/1/22">
+				<div class="notification" id="notification-4">
+					<span class="notification-head"><i class="fas fa-circle-plus"></i></span><br><span
+						id="notification-body">更多通知...</span>
+				</div>
+			</a>
+		</div>
 	</div>
 	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+	<p style="
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	font-size: 15px;
+	font-weight: bolder;
+	color: rgb(124, 124, 124);
+	text-align: center;">版权所有 © 2019-2023 aluminum.studio 江源工作室</p><br><br>
 </body>
 
 </html>