切换搜索
搜索
切换菜单
notifications
切换个人菜单
查看“模板:卡片/Cards.css”的源代码
来自Hokubu Wiki
查看
阅读
查看源代码
查看历史
associated-pages
模板
讨论
更多操作
←
模板:卡片/Cards.css
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
此页面已被保护以防止编辑或其他操作。
您可以查看和复制此页面的源代码。
/* 首页网格布局 - 三列卡片 */ .home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; } /* 活动卡片主体样式 */ .home-card { overflow: visible; max-width: 400px; margin-bottom: 1.6rem; background: var(--color-surface-2); border: 1px solid var(--border-color-base); /* 基础边框 */ border-radius: 15px; /* 15px边框圆角 */ box-shadow: var(--box-shadow-card); font-size: 0.875rem; display: flex; flex-direction: column; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .home-card:hover { transform: translateY(-5px); border-color: var(--color-primary); /* 悬停时边框变色 */ box-shadow: 0 10px 20px rgba(0,0,0,0.1); } /* 卡片标题区域 */ .home-card__header { width: 100%; margin-top: 20px; margin-bottom: 5px; color: var(--color-base--emphasized); font-size: 1.4rem; line-height: 1.4; padding: 0 20px; /* 与15px边框匹配的内边距 */ } /* 卡片图片容器 */ .home-card .transport-card { position: relative; height: 180px; margin: 0; border: none !important; } .home-card .transport-image { position: absolute; inset: 0; margin: 0; border-radius: 14px 14px 0 0; /* 图片区域圆角比卡片小1px,避免边框重叠 */ overflow: hidden; } .home-card .transport-image img { display: block; max-width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0, 0.8, 0.2, 1); } .home-card .transport-image img:hover { transform: scale(1.1); } /* 卡片文本内容 */ .home-card__text { margin: 0; padding: 0 20px 15px; line-height: 1.6; } /* 卡片数据行样式(模仿infobox-data) */ .home-card .data-row { display: flex; flex-direction: row; padding: 5px 20px; border-bottom: 1px solid var(--border-color-base); /* 数据行分隔线 */ } .home-card .data-label { color: var(--color-base--subtle); font-size: 0.8125rem; font-weight: normal; letter-spacing: 0.75px; width: 30%; } .home-card .data-value { font-weight: 600; width: 70%; } /* 卡片按钮区域 */ .home-link { margin: 10px 20px 15px; text-align: center; } .home-link__button { display: inline-block; padding: 8px 16px; background: var(--color-primary); color: white; border-radius: 8px; text-decoration: none; transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-weight: 600; } .home-link__button:hover { background: var(--color-primary--hover); } /* 响应式布局 - 小屏幕下自动调整为单列 */ @media (max-width: 768px) { .home-grid { grid-template-columns: 1fr; } .home-card { max-width: 100%; } }
返回
模板:卡片/Cards.css
。