gpttemp
This commit is contained in:
10
code/public/static/css2/modules/banner_01.css
Normal file
10
code/public/static/css2/modules/banner_01.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.__PFX__-bn1 {
|
||||
padding:40px 20px;
|
||||
color:#fff;
|
||||
background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
|
||||
border-radius:12px;
|
||||
margin:16px;
|
||||
text-align:center;
|
||||
}
|
||||
.__PFX__-bn1-t1 { font-size:22px; margin-bottom:6px; }
|
||||
.__PFX__-bn1-t2 { font-size:14px; opacity:.9; }
|
||||
19
code/public/static/css2/modules/banner_02.css
Normal file
19
code/public/static/css2/modules/banner_02.css
Normal file
@@ -0,0 +1,19 @@
|
||||
.__PFX__-bn2 {
|
||||
display:flex;
|
||||
gap:12px;
|
||||
margin:16px;
|
||||
}
|
||||
.__PFX__-bn2-img {
|
||||
width:40%;
|
||||
height:100px;
|
||||
object-fit:cover;
|
||||
border-radius:10px;
|
||||
}
|
||||
.__PFX__-bn2-info h2 {
|
||||
font-size:18px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-bn2-info p {
|
||||
font-size:13px;
|
||||
color:#666;
|
||||
}
|
||||
10
code/public/static/css2/modules/banner_03.css
Normal file
10
code/public/static/css2/modules/banner_03.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.__PFX__-bn3 { margin:16px; }
|
||||
.__PFX__-bn3-img {
|
||||
width:100%;
|
||||
height:160px;
|
||||
object-fit:cover;
|
||||
border-radius:12px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-bn3-img { height:240px; }
|
||||
}
|
||||
11
code/public/static/css2/modules/banner_04.css
Normal file
11
code/public/static/css2/modules/banner_04.css
Normal file
@@ -0,0 +1,11 @@
|
||||
.__PFX__-bn4 {
|
||||
background:#fafafa;
|
||||
padding:22px 16px;
|
||||
border-radius:10px;
|
||||
margin:16px;
|
||||
}
|
||||
.__PFX__-bn4 h2 {
|
||||
font-size:20px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-bn4 p { color:#666; font-size:13px; }
|
||||
19
code/public/static/css2/modules/banner_05.css
Normal file
19
code/public/static/css2/modules/banner_05.css
Normal file
@@ -0,0 +1,19 @@
|
||||
.__PFX__-bn5 {
|
||||
display:flex;
|
||||
margin:16px;
|
||||
gap:12px;
|
||||
}
|
||||
.__PFX__-bn5-img {
|
||||
width:100px;
|
||||
height:60px;
|
||||
border-radius:8px;
|
||||
object-fit:cover;
|
||||
}
|
||||
.__PFX__-bn5-right h3 {
|
||||
font-size:16px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-bn5-right p {
|
||||
font-size:13px;
|
||||
color:#666;
|
||||
}
|
||||
181
code/public/static/css2/modules/global_base.css
Normal file
181
code/public/static/css2/modules/global_base.css
Normal file
@@ -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;
|
||||
}
|
||||
25
code/public/static/css2/modules/head_01.css
Normal file
25
code/public/static/css2/modules/head_01.css
Normal file
@@ -0,0 +1,25 @@
|
||||
.__PFX__-nav {
|
||||
background:#fff;
|
||||
padding:10px 12px;
|
||||
border-bottom:1px solid #eee;
|
||||
}
|
||||
.__PFX__-nav-inner {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
}
|
||||
.__PFX__-logo {
|
||||
font-size:22px;
|
||||
font-weight:600;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-search input {
|
||||
height:32px;
|
||||
padding:0 12px;
|
||||
border-radius:6px;
|
||||
border:1px solid #ddd;
|
||||
width:140px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-search input { width:240px; }
|
||||
}
|
||||
21
code/public/static/css2/modules/head_02.css
Normal file
21
code/public/static/css2/modules/head_02.css
Normal file
@@ -0,0 +1,21 @@
|
||||
.__PFX__-nav2 {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:12px;
|
||||
background:#fff;
|
||||
border-bottom:1px solid #eee;
|
||||
}
|
||||
.__PFX__-logo2 {
|
||||
font-size:20px;
|
||||
font-weight:bold;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-menu2 a {
|
||||
margin-left:16px;
|
||||
font-size:14px;
|
||||
color:#333;
|
||||
}
|
||||
@media(max-width:640px){
|
||||
.__PFX__-menu2 a { margin-left:10px; }
|
||||
}
|
||||
21
code/public/static/css2/modules/head_03.css
Normal file
21
code/public/static/css2/modules/head_03.css
Normal file
@@ -0,0 +1,21 @@
|
||||
.__PFX__-nav3 {
|
||||
padding:16px 10px;
|
||||
border-bottom:1px solid #eee;
|
||||
background:#fff;
|
||||
text-align:center;
|
||||
}
|
||||
.__PFX__-logo3 {
|
||||
font-size:24px;
|
||||
font-weight:600;
|
||||
margin-bottom:8px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-menu3 a {
|
||||
margin:0 10px;
|
||||
padding-bottom:6px;
|
||||
border-bottom:2px solid transparent;
|
||||
font-size:14px;
|
||||
}
|
||||
.__PFX__-menu3 a:hover {
|
||||
border-color:var(--primary-color);
|
||||
}
|
||||
9
code/public/static/css2/modules/head_04.css
Normal file
9
code/public/static/css2/modules/head_04.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.__PFX__-nav4 {
|
||||
padding:18px 20px;
|
||||
border-bottom:1px solid #eee;
|
||||
}
|
||||
.__PFX__-logo4 {
|
||||
font-size:26px;
|
||||
font-weight:bold;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
10
code/public/static/css2/modules/head_05.css
Normal file
10
code/public/static/css2/modules/head_05.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.__PFX__-nav5 {
|
||||
padding:16px;
|
||||
background:rgba(255,255,255,0.85);
|
||||
backdrop-filter:blur(8px);
|
||||
}
|
||||
.__PFX__-logo5 {
|
||||
font-size:22px;
|
||||
font-weight:bold;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
30
code/public/static/css2/modules/list_01.css
Normal file
30
code/public/static/css2/modules/list_01.css
Normal file
@@ -0,0 +1,30 @@
|
||||
.__PFX__-list1 { margin:16px; }
|
||||
.__PFX__-list1-title {
|
||||
font-size:16px;
|
||||
margin-bottom:12px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
|
||||
.__PFX__-list1-grid {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,1fr);
|
||||
gap:10px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-list1-grid {
|
||||
grid-template-columns:repeat(4,1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.__PFX__-list1-card img {
|
||||
width:100%;
|
||||
aspect-ratio:2 / 3;
|
||||
object-fit:cover;
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
.__PFX__-list1-card p {
|
||||
margin-top:6px;
|
||||
font-size:13px;
|
||||
color:#333;
|
||||
}
|
||||
23
code/public/static/css2/modules/list_02.css
Normal file
23
code/public/static/css2/modules/list_02.css
Normal file
@@ -0,0 +1,23 @@
|
||||
.__PFX__-list2 { margin:16px; }
|
||||
.__PFX__-list2-title { font-size:16px; color:var(--primary-color); margin-bottom:10px; }
|
||||
|
||||
.__PFX__-list2-grid {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,1fr);
|
||||
gap:8px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-list2-grid { grid-template-columns:repeat(5,1fr); }
|
||||
}
|
||||
|
||||
.__PFX__-list2-card img {
|
||||
width:100%;
|
||||
aspect-ratio:2 / 3;
|
||||
object-fit:cover;
|
||||
border-radius:8px;
|
||||
}
|
||||
.__PFX__-list2-card span {
|
||||
display:block;
|
||||
font-size:13px;
|
||||
margin-top:4px;
|
||||
}
|
||||
19
code/public/static/css2/modules/list_03.css
Normal file
19
code/public/static/css2/modules/list_03.css
Normal file
@@ -0,0 +1,19 @@
|
||||
.__PFX__-list3 { margin:16px; }
|
||||
.__PFX__-list3-title { font-size:16px; margin-bottom:12px; color:var(--primary-color); }
|
||||
|
||||
.__PFX__-list3-wrap {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,1fr);
|
||||
gap:12px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-list3-wrap { grid-template-columns:repeat(4,1fr); }
|
||||
}
|
||||
|
||||
.__PFX__-list3-card img {
|
||||
width:100%;
|
||||
aspect-ratio:2/3;
|
||||
object-fit:cover;
|
||||
border-radius:12px;
|
||||
box-shadow:0 4px 14px rgba(0,0,0,.1);
|
||||
}
|
||||
29
code/public/static/css2/modules/list_04.css
Normal file
29
code/public/static/css2/modules/list_04.css
Normal file
@@ -0,0 +1,29 @@
|
||||
.__PFX__-list4-grid{
|
||||
margin:16px;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,1fr);
|
||||
gap:12px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-list4-grid{ grid-template-columns:repeat(4,1fr); }
|
||||
}
|
||||
.__PFX__-list4-card {
|
||||
position:relative;
|
||||
}
|
||||
.__PFX__-list4-card img{
|
||||
width:100%;
|
||||
aspect-ratio:2/3;
|
||||
object-fit:cover;
|
||||
border-radius:10px;
|
||||
}
|
||||
.__PFX__-list4-title{
|
||||
position:absolute;
|
||||
bottom:6px;
|
||||
left:6px;
|
||||
right:6px;
|
||||
background:rgba(0,0,0,.4);
|
||||
padding:4px 6px;
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
border-radius:6px;
|
||||
}
|
||||
20
code/public/static/css2/modules/list_05.css
Normal file
20
code/public/static/css2/modules/list_05.css
Normal file
@@ -0,0 +1,20 @@
|
||||
.__PFX__-list5-grid{
|
||||
margin:16px;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,1fr);
|
||||
gap:14px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-list5-grid{ grid-template-columns:repeat(4,1fr); }
|
||||
}
|
||||
.__PFX__-list5-card img{
|
||||
width:100%;
|
||||
aspect-ratio:2/3;
|
||||
object-fit:cover;
|
||||
border-radius:8px;
|
||||
}
|
||||
.__PFX__-list5-card p{
|
||||
margin-top:4px;
|
||||
font-size:13px;
|
||||
color:#333;
|
||||
}
|
||||
Reference in New Issue
Block a user