style: 竞赛主页样式修改

src/views/AwardPage/container.vue

@@ -1,23 +1,26 @@
 <template>
 	<div class="award-container">
-		<div class="header flex align-center space-between">
-			<div class="header-left">
-				<img
-					src="@/assets/images/award/code_create_logo.png"
-					class="logo"
-				/>
-			</div>
-			<div
-				class="header-right flex align-center"
-				@click="handleBtnClick"
-			>
-				<div class="text">{{ btnText }}</div>
-				<img
-					src="@/assets/images/award/arrow.png"
-					alt=""
-					class="arrow"
-				/>
+		<div class="header-wrapper">
+			<div class="header flex align-center space-between">
+				<div class="header-left">
+					<img
+						src="@/assets/images/award/code_create_logo.png"
+						class="logo"
+					/>
+				</div>
+				<div
+					class="header-right flex align-center"
+					@click="handleBtnClick"
+				>
+					<div class="text">{{ btnText }}</div>
+					<img
+						src="@/assets/images/award/arrow.png"
+						alt=""
+						class="arrow"
+					/>
+				</div>
 			</div>
+			<div class="header-placeholder"></div>
 		</div>
 		<router-view />
 		<div class="footer flex space-between align-center">
@@ -142,6 +145,7 @@
 		height: 100vh;
 		// 隐藏滚动条箭头，只显示滚动条本体
 		box-sizing: border-box;
+
 		&::-webkit-scrollbar {
 			display: none;
 			width: 0;
@@ -150,28 +154,37 @@
 		scrollbar-width: none;
 		-ms-overflow-style: none;
 	}
-	.header {
-		height: 8rem;
-		background-color: #232323;
-		padding-left: 21.5rem;
-		padding-right: 8.6rem;
-		box-sizing: border-box;
-		.header-left {
-			.logo {
-				width: 13rem;
-				height: 5rem;
-			}
+	.header-wrapper {
+		.header-placeholder {
+			height: 8rem;
 		}
-		.header-right {
-			column-gap: 1rem;
-			cursor: pointer;
-			.text {
-				font-size: 1.6rem;
-				color: #fff;
+		.header {
+			height: 8rem;
+			background-color: #232323;
+			padding-left: 21.5rem;
+			padding-right: 8.6rem;
+			box-sizing: border-box;
+			position: fixed;
+			top: 0;
+			width: 100%;
+			z-index: 9;
+			.header-left {
+				.logo {
+					width: 13rem;
+					height: 5rem;
+				}
 			}
-			.arrow {
-				width: 2.4rem;
-				height: 2.4rem;
+			.header-right {
+				column-gap: 1rem;
+				cursor: pointer;
+				.text {
+					font-size: 1.6rem;
+					color: #fff;
+				}
+				.arrow {
+					width: 2.4rem;
+					height: 2.4rem;
+				}
 			}
 		}
 	}