模板:最新卡面/行：修订间差异

2024年7月16日 (二) 16:00的最新版本

   [[File:{{{ID}}}-卡面.webp|居中|200px|link={{{标题}}}]]

{{{标题}}}

@@ 第1行： / 第1行： @@
-<div class="card-container">
+<div class="card">
-     <!-- 使用div class="card"包裹每个卡面 -->
+     <!-- 卡面 -->
-     <div class="card">
+     [[File:{{#replace:{{{ID}}}|_|-}}-卡面.webp|居中|200px|link={{{标题}}}]]
-        <!-- 卡面 -->
+    <div class="card-title">{{{标题}}}</div>
-        [[File:{{#replace:{{{ID}}}|_|-}}-卡面.webp|居中|200px|link={{{标题}}}]]
-        <!-- 角色名 -->
-        <div>{{#cargo_query:tables=角色
-|fields=角色._pageName=标题,角色.名称简中,角色.名称繁中,角色.名称英文,角色.片假名,角色.ID
-|where=角色.ID="{{{角色ID|}}}"
-|format=template
-|template=卡面图鉴/所属角色
-|named args=yes
-|limit=2}}</div>
-    </div>
 </div>
 {{#CSS:
-.card-container {
-    display: flex; /* 使用Flexbox布局 */
-    flex-wrap: wrap; /* 允许内容换行 */
-    justify-content: space-around; /* 在项目之间和周围提供均等的空间 */
-    align-items: stretch; /* 拉伸项目以填充容器 */
-}
 .card {
      flex: 1 1 200px; /* 允许卡片弹性伸缩，基础宽度为200px */
@@ 第29行： / 第12行： @@
      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
      transition: transform 0.2s; /* 添加动画效果 */
+    max-width: 200px; /* 设置卡片的最大宽度为200px */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
@@ 第38行： / 第25行： @@
      width: 100%; /* 图片宽度自适应 */
      height: auto; /* 图片高度自适应 */
+}
+.card-title {
+    padding: 10px 0; /* 增加标题的上下内边距 */
+    max-height: 50px; /* 设置标题的最大高度 */
+    overflow: hidden; /* 如果标题过长，隐藏溢出部分 */
+    word-wrap: break-word; /* 允许单词内换行 */
+    white-space: normal; /* 正常换行 */
+    text-overflow: ellipsis; /* 用省略号表示溢出部分 */
+}
+/* Media Queries for Mobile Devices */
+@media (max-width: 600px) {
+    .card {
+        flex: 1 1 150px; /* 调整基础宽度为150px */
+        max-width: 150px; /* 设置卡片的最大宽度为150px */
+    }
+    .card-title {
+        padding: 5px 0; /* 减小标题的上下内边距 */
+        max-height: 40px; /* 设置标题的最大高度为40px */
+    }
 }
 }}