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

无编辑摘要
无编辑摘要
 
(未显示同一用户的15个中间版本)
第1行: 第1行:
 
<div class="card">
    <!-- 使用div class="card"包裹每个卡面 -->
     <!-- 卡面 -->
     <div class="card">
    [[File:{{#replace:{{{ID}}}|_|-}}-卡面.webp|居中|200px|link={{{标题}}}]]
        <!-- 卡面 -->
    <div class="card-title">{{{标题}}}</div>
        [[File:{{#replace:{{{ID}}}|_|-}}-卡面.webp|居中|100px|link={{{标题}}}]]
</div>
        <!-- 角色名 -->
        <div>{{#cargo_query:tables=角色
|fields=角色._pageName=标题,角色.名称简中,角色.名称繁中,角色.名称英文,角色.片假名,角色.ID
|where=角色.ID="{{{角色ID|}}}"
|format=template
|template=卡面图鉴/所属角色
|named args=yes
|limit=2}}</div>
    </div>


{{#CSS:
{{#CSS:
.card {
.card {
     flex: 1 1 100px; /* 允许卡片弹性伸缩,基础宽度为200px */
     flex: 1 1 200px; /* 允许卡片弹性伸缩,基础宽度为200px */
     margin: 10px; /* 设置卡片间距 */
     margin: 10px; /* 设置卡片间距 */
     text-align: center; /* 文本居中显示 */
     text-align: center; /* 文本居中显示 */
     box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
     box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
     transition: transform 0.2s; /* 添加动画效果 */
     transition: transform 0.2s; /* 添加动画效果 */
     max-width: 100px; /* 设置卡片的最大宽度为200px */
     max-width: 200px; /* 设置卡片的最大宽度为200px */
    display: flex;
    flex-direction: column;
    align-items: center;
}
}


第31行: 第25行:
     width: 100%; /* 图片宽度自适应 */
     width: 100%; /* 图片宽度自适应 */
     height: auto; /* 图片高度自适应 */
     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 */
    }
}
}
}}
}}

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

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