gpttemp

code/public/static/css2/modules/global_base.css

@@ -0,0 +1,181 @@
+/* -------------------------------------------------
+   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;
+}