测试:卡片测试

了解我们

游戏列表

玩家攻略

人文关怀

{{#CSS: /* nav-card */ .nav-card { position: relative; padding: 15px; 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; }

.nav-card__background:after { position: absolute; pointer-events: none;

   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: block;
   background: linear-gradient( to right,transparent,#000);
   content: "";

}

.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 排版 */ .nav-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; }

.nav-grid a.external { background-image: none; }