测试:卡片测试：修订间差异

可视化wikitext

2024年4月6日 (六) 00:41的最新版本

了解我们

游戏列表

玩家攻略

人文关怀

@@ 第1行： / 第1行： @@
+<!-- Nav -->
 <div class="home-grid home-button">
-<div class="home-card home-card--button">
+<div class="nav-card nav-card--button">
-<div class="home-card__background">[[文件:Cardbg.jpg|300px|link=易什春秋]]</div>
+<div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=易什春秋]]</div>
-<div class="home-card__foreground home-card__navimgtext">了解我们</div>
+<div class="nav-card__foreground nav-card__navimgtext">了解我们</div>
 </div>
-<div class="home-card home-card--button">
+<div class="nav-card nav-card--button">
-<div class="home-card__background">[[文件:Cardbg.jpg|300px|link=游戏列表]]</div>
+<div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=游戏列表]]</div>
-<div class="home-card__foreground home-card__navimgtext">游戏列表</div>
+<div class="nav-card__foreground nav-card__navimgtext">游戏列表</div>
 </div>
-<div class="home-card home-card--button">
+<div class="nav-card nav-card--button">
-<div class="home-card__background">[[文件:Cardbg.jpg|300px|link=Category:玩家攻略]]</div>
+<div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=Category:玩家攻略]]</div>
-<div class="home-card__foreground home-card__navimgtext">玩家攻略</div>
+<div class="nav-card__foreground nav-card__navimgtext">玩家攻略</div>
 </div>
-<div class="home-card home-card--button">
+<div class="nav-card nav-card--button">
-<div class="home-card__background">[[文件:Cardbg.jpg|300px|link=EaseCation_Wiki:人文关怀]]</div>
+<div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=EaseCation_Wiki:人文关怀]]</div>
-<div class="home-card__foreground home-card__navimgtext">人文关怀</div>
+<div class="nav-card__foreground nav-card__navimgtext">人文关怀</div>
 </div>
-</div><templatestyles src="Template:CardTest/styles.css"/>
+</div>
+<!-- CSS -->
+{{#CSS:
+.nav-card {
+	position: relative;
+	padding: 15px;
+	/*margin-bottom: 10px;*/
+	background: var( --color-surface-1 );
+	border-radius: 15px;
+	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
+	font-size: 0.875rem;
+}
+#home-nav {
+	margin-top: 0.8rem;
+}
+.nav-card__background:after {
+	position: absolute;
+	pointer-events: none;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    background: linear-gradient(to right,#000,transparent);
+    content: "";
+}
+#home-nav .nav-card__foreground {
+    pointer-events: none;
+	height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    color: #fff;
+    font-weight: 500;
+}
+.nav-card__navimgtext {
+	pointer-events: none;
+	height: 100%;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 0 15px;
+	color: #fff;
+	font-weight: 500;
+}
+.nav-card__background {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: #242a31;
+	border-radius: 15px;
+}
+.nav-card__background img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+}
+.nav-card__foreground {
+	position: absolute;
+}
+.nav-card p {
+	margin-top: 0.2rem;
+	font-size: 0.875rem;
+}
+.nav-card.nav-card--button {
+	overflow: hidden;
+	padding: 0;
+	background: #242a31;
+}
+.nav-card--button a {
+	display: flex;
+	height: 100%;
+	justify-content: center;
+	align-items: center;
+	padding: 0 15px;
+	background: transparent;
+	color: #fff;
+	font-weight: 500;
+}
+.nav-card--button .nav-card__background a {
+	padding: 0;
+}
+.nav-card--button img {
+	transition: transform 0.3s ease;
+}
+.nav-card--button:hover img {
+	transform: scale(1.05);
+}
+/* grid 排版 */
+	.home-grid {
+		display: grid;
+		grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
+		grid-auto-rows: minmax( 3rem, auto );
+		grid-gap: 0.625rem;
+		margin-top: 10px;
+	}
+	.home-grid a.external {
+		background-image: none;
+	}
+}}