182 lines
3.7 KiB
CSS
182 lines
3.7 KiB
CSS
/* -------------------------------------------------
|
||
GLOBAL BASE CSS (专业影视站通用框架)
|
||
提供稳定、统一的视觉骨架 + 响应式结构
|
||
--------------------------------------------------*/
|
||
|
||
/* RESET — 全局重置，保证不同模块视觉一致 */
|
||
html, body, div, span, applet, object, iframe,
|
||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||
a, img, strong, sub, sup, small,
|
||
dl, dt, dd, ol, ul, li, form, label,
|
||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
|
||
/* 防止文字因字号继承导致布局挤爆 */
|
||
html {
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* BODY 通用布局 */
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
|
||
line-height: 1.5;
|
||
background: #f5f6fa;
|
||
color: #333;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* 所有元素 box-sizing，避免模块撑破布局 */
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 链接默认清爽样式 */
|
||
a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
/* 图片不变形，自适应裁剪 */
|
||
img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* 防止某些模块 img 写了宽高 style 导致拉伸 */
|
||
img[style] {
|
||
height: auto !important;
|
||
}
|
||
|
||
/* 全局容器：放所有模块（首页 main） */
|
||
.__PFX__-main {
|
||
width: 100%;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
/* 模块之间的默认间距（让页面不拥挤） */
|
||
.__PFX__-module-block {
|
||
margin: 16px;
|
||
}
|
||
|
||
/* 标题统一样式（模块标题） */
|
||
.__PFX__-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: var(--primary-color);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* 统一卡片 hover 效果（柔和缩放） */
|
||
.__PFX__-card:hover {
|
||
transform: translateY(-2px);
|
||
transition: all .25s;
|
||
}
|
||
|
||
/* 防止卡片在 PC 放大时错位 */
|
||
.__PFX__-card {
|
||
transition: all .25s;
|
||
}
|
||
|
||
/* 全局 Flex 工具类 */
|
||
.__PFX__-flex {
|
||
display: flex;
|
||
}
|
||
.__PFX__-flex-center {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.__PFX__-flex-between {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 全局 Grid 工具类 */
|
||
.__PFX__-grid-2 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.__PFX__-grid-3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.__PFX__-grid-4 {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
/* H5 → PC 全局响应式布局 */
|
||
@media (min-width: 768px) {
|
||
body {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
background: #f5f6fa;
|
||
}
|
||
|
||
.__PFX__-main {
|
||
padding: 20px 0;
|
||
}
|
||
}
|
||
|
||
/* Footer 基础结构（不覆盖各模板样式） */
|
||
.__PFX__-footer-base {
|
||
padding: 20px 10px;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
|
||
/* Header 基础结构 */
|
||
.__PFX__-header-base {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
background: #fff;
|
||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* 搜索框基础样式，适配所有模板 */
|
||
.__PFX__-search-box input {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
background: #fff;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 按钮基础样式 */
|
||
.__PFX__-btn {
|
||
padding: 8px 14px;
|
||
border-radius: 6px;
|
||
background: var(--primary-color);
|
||
color: #fff;
|
||
font-size: 14px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 动画：淡入 */
|
||
.__PFX__-fadein {
|
||
animation: fadein .3s ease;
|
||
}
|
||
@keyframes fadein {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
/* 避免模块撑满左右，所有模块内部使用相同内边距 */
|
||
.__PFX__-module-wrapper {
|
||
padding: 0 16px;
|
||
}
|