彩先知pc
This commit is contained in:
rain
@@ -0,0 +1,584 @@
|
||||
/* ============================================================
|
||||
appdown.css - App download page (appdown.html)
|
||||
Uses CSS variables from public.css
|
||||
============================================================ */
|
||||
|
||||
/* ============================
|
||||
DOWNLOAD HERO - Main banner
|
||||
============================ */
|
||||
.download-hero {
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--purple) 100%);
|
||||
padding: 60px 40px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
color: var(--white);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.download-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
right: -100px;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
border-radius: 50%;
|
||||
background: rgba(253, 185, 51, 0.08);
|
||||
}
|
||||
|
||||
.download-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -80px;
|
||||
left: -60px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
HERO CONTENT - Text & buttons
|
||||
============================ */
|
||||
.download-hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.download-hero-title {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
line-height: 1.3;
|
||||
margin: 0 0 12px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.download-hero-title span {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.download-hero-desc {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
line-height: 1.8;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.download-hero-btns {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 32px;
|
||||
border-radius: 28px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.download-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.download-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.download-btn i,
|
||||
.download-btn .btn-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.download-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.download-btn-ios {
|
||||
background: var(--white);
|
||||
color: var(--primary);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.download-btn-ios:hover {
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.download-btn-android {
|
||||
background: linear-gradient(135deg, var(--green), #1e8449);
|
||||
color: var(--white);
|
||||
box-shadow: 0 4px 16px rgba(39, 174, 96, 0.3);
|
||||
}
|
||||
|
||||
.download-btn-android:hover {
|
||||
box-shadow: 0 6px 24px rgba(39, 174, 96, 0.4);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
PHONE MOCKUP
|
||||
============================ */
|
||||
.download-phone-mockup {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download-phone-mockup .phone-frame {
|
||||
width: 260px;
|
||||
height: 520px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 36px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.download-phone-mockup .phone-screen {
|
||||
width: 230px;
|
||||
height: 490px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download-phone-mockup .phone-screen img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.download-phone-mockup .phone-notch {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* QR Code in hero */
|
||||
.download-hero .hero-qr {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hero-qr-box {
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-qr-box img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-qr-label {
|
||||
font-size: 13px;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
DOWNLOAD FEATURES
|
||||
============================ */
|
||||
.download-features {
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.download-features .features-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
text-align: center;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
background: var(--bg-light);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 12px;
|
||||
font-size: 26px;
|
||||
color: var(--white);
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Features grid layout */
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
DOWNLOAD CARDS
|
||||
============================ */
|
||||
.download-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.download-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.download-card-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
margin: 0 auto 16px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.download-card-icon.android {
|
||||
background: linear-gradient(135deg, #3ddc84, #2fa866);
|
||||
}
|
||||
|
||||
.download-card-icon.ios {
|
||||
background: linear-gradient(135deg, #007aff, #005ecb);
|
||||
}
|
||||
|
||||
.download-card-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.download-card-desc {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Card download buttons */
|
||||
.dl-btn {
|
||||
display: inline-block;
|
||||
padding: 12px 40px;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dl-btn.android-btn {
|
||||
background: linear-gradient(135deg, #3ddc84, #2fa866);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.dl-btn.android-btn:hover {
|
||||
box-shadow: 0 4px 16px rgba(61, 220, 132, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.dl-btn.ios-btn {
|
||||
background: linear-gradient(135deg, #007aff, #005ecb);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.dl-btn.ios-btn:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
PAGE HEADER / NAV (shared)
|
||||
============================ */
|
||||
.page-header {
|
||||
width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.page-header .logo-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-header .logo-wrap img {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.page-header .logo-text {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.page-header .logo-text span {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.page-header .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header .header-right a {
|
||||
font-size: 14px;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-header .header-right a:hover {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
width: 100%;
|
||||
background: var(--primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-nav-inner {
|
||||
width: 1400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.page-nav-inner a {
|
||||
width: 140px;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-nav-inner a:hover {
|
||||
background: rgba(253, 185, 51, 0.2);
|
||||
}
|
||||
|
||||
.page-nav-inner a.active {
|
||||
background: rgba(253, 185, 51, 0.3);
|
||||
}
|
||||
|
||||
.page-main {
|
||||
width: 1400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
RESPONSIVE STYLES
|
||||
============================ */
|
||||
@media (max-width: 1024px) {
|
||||
.features-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-header,
|
||||
.page-nav-inner,
|
||||
.page-main {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.download-hero {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.download-hero-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.download-hero-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.download-hero-btns {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download-phone-mockup .phone-frame {
|
||||
width: 200px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.download-phone-mockup .phone-screen {
|
||||
width: 174px;
|
||||
height: 372px;
|
||||
}
|
||||
|
||||
.download-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.download-features {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.page-nav-inner a {
|
||||
width: auto;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.download-hero {
|
||||
padding: 28px 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.download-hero-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.download-hero-btns {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download-phone-mockup {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.download-cards {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.download-features {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header .logo-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.page-nav-inner a {
|
||||
font-size: 12px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
.apply-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apply-page {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 20px 64px;
|
||||
}
|
||||
|
||||
.apply-shell {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 18px;
|
||||
box-shadow: var(--shadow-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.apply-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 30px 34px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: linear-gradient(120deg, #ffffff 0%, #f5f8fd 70%, #fff9e8 100%);
|
||||
}
|
||||
|
||||
.apply-hero h1 {
|
||||
margin: 0 0 8px;
|
||||
color: var(--primary);
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.apply-hero p {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.apply-user-card {
|
||||
min-width: 220px;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 22px rgba(16, 43, 106, 0.08);
|
||||
}
|
||||
|
||||
.apply-user-card span {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.apply-user-card strong {
|
||||
color: var(--primary);
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.apply-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 300px minmax(0, 1fr);
|
||||
gap: 28px;
|
||||
padding: 30px 34px 36px;
|
||||
}
|
||||
|
||||
.apply-side {
|
||||
align-self: start;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--bg-light);
|
||||
padding: 22px 22px 20px;
|
||||
}
|
||||
|
||||
.apply-side h2 {
|
||||
position: relative;
|
||||
margin: 0 0 16px;
|
||||
padding-left: 12px;
|
||||
color: var(--primary);
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.apply-side h2::before,
|
||||
.apply-section-title span {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(180deg, var(--gold), var(--orange));
|
||||
}
|
||||
|
||||
.apply-side h2::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.apply-side ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.apply-side li {
|
||||
position: relative;
|
||||
padding: 10px 0 10px 20px;
|
||||
border-top: 1px solid rgba(16, 43, 106, 0.08);
|
||||
color: #4d5b75;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.apply-side li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--gold);
|
||||
}
|
||||
|
||||
.apply-card {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.apply-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
color: var(--primary);
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.apply-intro-title {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.apply-upload-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.apply-upload-card {
|
||||
position: relative;
|
||||
min-height: 210px;
|
||||
padding: 22px 18px 18px;
|
||||
border: 2px dashed var(--border-light);
|
||||
border-radius: 12px;
|
||||
background: #f7f9fd;
|
||||
color: var(--primary);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.apply-upload-card:hover {
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 10px 26px rgba(16, 43, 106, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.apply-upload-plus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 126px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
color: #bac4d6;
|
||||
font-size: 42px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.apply-upload-preview {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 126px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.apply-upload-card strong,
|
||||
.apply-upload-card em {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.apply-upload-card strong {
|
||||
margin-bottom: 5px;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.apply-upload-card em {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.apply-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apply-intro-textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 12px;
|
||||
background: var(--bg-light);
|
||||
color: var(--text-dark);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
resize: vertical;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.apply-intro-textarea:focus {
|
||||
border-color: var(--primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.08);
|
||||
}
|
||||
|
||||
.apply-intro-count {
|
||||
margin-top: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.apply-intro-count span {
|
||||
color: var(--orange);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.apply-submit {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
margin-top: 24px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 22px rgba(16, 43, 106, 0.16);
|
||||
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
.apply-submit:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 14px 28px rgba(16, 43, 106, 0.22);
|
||||
}
|
||||
|
||||
.apply-submit:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-footer__meta a {
|
||||
color: rgba(255, 255, 255, 0.58);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.apply-hero,
|
||||
.apply-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.apply-hero {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.apply-user-card {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.apply-page {
|
||||
padding: 18px 12px 44px;
|
||||
}
|
||||
|
||||
.apply-hero,
|
||||
.apply-layout {
|
||||
padding: 22px 18px;
|
||||
}
|
||||
|
||||
.apply-upload-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
+1617
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,915 @@
|
||||
/* ============================================================
|
||||
cai.css - 预测推荐页 (cai.html)
|
||||
Uses CSS variables from public.css:
|
||||
--primary, --gold, --orange, --red, --bg-light, --text-dark,
|
||||
--text-muted, --border-light, --radius-md, --radius-lg,
|
||||
--shadow-sm, --shadow-md
|
||||
============================================================ */
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
1. Filter Section
|
||||
---------------------------------------------------------- */
|
||||
.cxz-filter-box {
|
||||
background: var(--white, #ffffff);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
|
||||
.cxz-filter-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cxz-filter-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cxz-filter-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--primary, #102b6a);
|
||||
flex-shrink: 0;
|
||||
min-width: 56px;
|
||||
line-height: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cxz-filter-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Filter option tags (rendered as <button> in JS) */
|
||||
.cxz-filter-options .cxz-filter-btn,
|
||||
.cxz-filter-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 16px;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
background: var(--white, #ffffff);
|
||||
border: 1px solid var(--border-light, #e5e7eb);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.cxz-filter-options .cxz-filter-btn:hover,
|
||||
.cxz-filter-btn:hover {
|
||||
color: var(--primary, #102b6a);
|
||||
border-color: var(--primary, #102b6a);
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
}
|
||||
|
||||
.cxz-filter-options .cxz-filter-btn.active,
|
||||
.cxz-filter-btn.active {
|
||||
color: #ffffff;
|
||||
background: var(--primary, #102b6a);
|
||||
border-color: var(--primary, #102b6a);
|
||||
box-shadow: 0 2px 8px rgba(16, 43, 106, 0.25);
|
||||
}
|
||||
|
||||
/* Filter option links (fallback <a> style) */
|
||||
.cxz-filter-options a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 16px;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
text-decoration: none;
|
||||
background: var(--white, #ffffff);
|
||||
border: 1px solid var(--border-light, #e5e7eb);
|
||||
transition: all 0.25s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-filter-options a:hover,
|
||||
.cxz-filter-options a.active {
|
||||
color: #ffffff;
|
||||
background: var(--primary, #102b6a);
|
||||
border-color: var(--primary, #102b6a);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
2. Period Select Bar
|
||||
---------------------------------------------------------- */
|
||||
.cxz-period-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cxz-period-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--primary, #102b6a);
|
||||
padding-left: 14px;
|
||||
border-left: 4px solid var(--gold, #fdb933);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.cxz-period-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.cxz-period-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 18px;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--primary, #102b6a);
|
||||
color: var(--primary, #102b6a);
|
||||
background: var(--white, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.cxz-period-btn:hover {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
box-shadow: 0 2px 6px rgba(16, 43, 106, 0.12);
|
||||
}
|
||||
|
||||
.cxz-period-btn.active {
|
||||
color: #ffffff;
|
||||
background: var(--primary, #102b6a);
|
||||
border-color: var(--primary, #102b6a);
|
||||
box-shadow: 0 2px 8px rgba(16, 43, 106, 0.25);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
3. Table Section (overrides / extensions to public.css)
|
||||
---------------------------------------------------------- */
|
||||
.cxz-table-box {
|
||||
background: var(--white, #ffffff);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cxz-table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-light, #e5e7eb);
|
||||
}
|
||||
|
||||
.cxz-table-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
}
|
||||
|
||||
.cxz-data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.cxz-data-table thead {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
}
|
||||
|
||||
.cxz-data-table th {
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted, #6b7280);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid var(--border-light, #e5e7eb);
|
||||
}
|
||||
|
||||
.cxz-data-table td {
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--border-light, #e5e7eb);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cxz-data-table tbody tr {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.cxz-data-table tbody tr:hover {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
}
|
||||
|
||||
.cxz-data-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Table ball container - prevent overflow */
|
||||
.cxz-data-table td .red-q,
|
||||
.cxz-data-table td .bule-q {
|
||||
margin: 2px 1px;
|
||||
}
|
||||
|
||||
/* Status tags in table */
|
||||
.cxz-data-table td .status-hit {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
4. Pagination (extension to public.css)
|
||||
---------------------------------------------------------- */
|
||||
.cxz-pagination {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage a,
|
||||
.cxz-pagination .layui-laypage span {
|
||||
border-radius: var(--radius-md, 8px) !important;
|
||||
font-size: 13px !important;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px !important;
|
||||
margin: 0 !important;
|
||||
border-color: var(--border-light, #e5e7eb) !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage a:hover {
|
||||
color: var(--primary, #102b6a) !important;
|
||||
border-color: var(--primary, #102b6a) !important;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background: var(--primary, #102b6a) !important;
|
||||
border-radius: var(--radius-md, 8px) !important;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
5. Ranking Box
|
||||
---------------------------------------------------------- */
|
||||
.cxz-ranking-box {
|
||||
background: var(--white, #ffffff);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid var(--border-light, #e5e7eb);
|
||||
}
|
||||
|
||||
.cxz-ranking-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 2px solid var(--gold, #fdb933);
|
||||
background: linear-gradient(135deg, var(--bg-light, #f4f6fb), #ffffff);
|
||||
}
|
||||
|
||||
.cxz-ranking-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--primary, #102b6a);
|
||||
padding-left: 14px;
|
||||
border-left: 4px solid var(--gold, #fdb933);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.cxz-rank-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.cxz-rank-table thead {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
}
|
||||
|
||||
.cxz-rank-table th {
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted, #6b7280);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid var(--border-light, #e5e7eb);
|
||||
}
|
||||
|
||||
.cxz-rank-table td {
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--border-light, #e5e7eb);
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cxz-rank-table tbody tr {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.cxz-rank-table tbody tr:hover {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
}
|
||||
|
||||
.cxz-rank-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Highlight top-3 rows */
|
||||
.cxz-rank-table tbody tr:nth-child(1) {
|
||||
background: rgba(253, 185, 51, 0.04);
|
||||
}
|
||||
|
||||
.cxz-rank-table tbody tr:nth-child(2) {
|
||||
background: rgba(192, 192, 192, 0.04);
|
||||
}
|
||||
|
||||
.cxz-rank-table tbody tr:nth-child(3) {
|
||||
background: rgba(205, 127, 50, 0.04);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
6. Rank Badges
|
||||
---------------------------------------------------------- */
|
||||
.cxz-rank-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 1st place - Gold */
|
||||
.cxz-rank-1 {
|
||||
background: linear-gradient(135deg, #fdb933, #f5a623);
|
||||
box-shadow: 0 2px 8px rgba(253, 185, 51, 0.45);
|
||||
}
|
||||
|
||||
/* 2nd place - Silver */
|
||||
.cxz-rank-2 {
|
||||
background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
|
||||
box-shadow: 0 2px 8px rgba(192, 192, 192, 0.45);
|
||||
}
|
||||
|
||||
/* 3rd place - Bronze */
|
||||
.cxz-rank-3 {
|
||||
background: linear-gradient(135deg, #cd7f32, #b5651d);
|
||||
box-shadow: 0 2px 8px rgba(205, 127, 50, 0.45);
|
||||
}
|
||||
|
||||
/* 4th and beyond - Muted */
|
||||
.cxz-rank-n {
|
||||
background: var(--text-muted, #6b7280);
|
||||
box-shadow: 0 1px 4px rgba(107, 114, 128, 0.3);
|
||||
}
|
||||
|
||||
.cxz-expert-cell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cxz-expert-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--navy), var(--primary-light));
|
||||
color: var(--white);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cxz-rate {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
7. Expert Link
|
||||
---------------------------------------------------------- */
|
||||
.cxz-expert-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--primary, #102b6a);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-expert-link:hover {
|
||||
color: var(--orange, #f15a22);
|
||||
}
|
||||
|
||||
.cxz-expert-link::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary, #102b6a);
|
||||
flex-shrink: 0;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.cxz-expert-link:hover::before {
|
||||
background: var(--orange, #f15a22);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
8. Buy / Action Button
|
||||
---------------------------------------------------------- */
|
||||
.cxz-btn-buy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 18px;
|
||||
border-radius: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, var(--orange, #f15a22), #e04e1a);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 2px 6px rgba(241, 90, 34, 0.3);
|
||||
}
|
||||
|
||||
.cxz-btn-buy:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 14px rgba(241, 90, 34, 0.45);
|
||||
background: linear-gradient(135deg, #ff6b2b, #f15a22);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cxz-btn-buy:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(241, 90, 34, 0.3);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
9. Empty State
|
||||
---------------------------------------------------------- */
|
||||
.cxz-empty-row td {
|
||||
padding: 48px 20px !important;
|
||||
text-align: center !important;
|
||||
color: var(--text-muted, #6b7280);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-empty-row td::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto 12px;
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
border-radius: 50%;
|
||||
border: 2px dashed var(--border-light, #e5e7eb);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
10. Page Layout (two-column on desktop)
|
||||
---------------------------------------------------------- */
|
||||
.cxz-cai-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 340px;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.cxz-cai-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cxz-cai-sidebar {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
11. Responsive - Tablet (1024px and below)
|
||||
---------------------------------------------------------- */
|
||||
@media (max-width: 1024px) {
|
||||
.cxz-filter-box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.cxz-filter-label {
|
||||
min-width: 50px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-filter-btn {
|
||||
padding: 4px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-period-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cxz-period-btn {
|
||||
padding: 5px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-ranking-box {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cxz-cai-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cxz-cai-sidebar {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
12. Responsive - Mobile (768px and below)
|
||||
---------------------------------------------------------- */
|
||||
@media (max-width: 768px) {
|
||||
/* Filter */
|
||||
.cxz-filter-box {
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cxz-filter-row {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cxz-filter-label {
|
||||
min-width: auto;
|
||||
text-align: left;
|
||||
line-height: 1.4;
|
||||
font-size: 13px;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid var(--border-light, #e5e7eb);
|
||||
}
|
||||
|
||||
.cxz-filter-options {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cxz-filter-btn {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Period bar */
|
||||
.cxz-period-bar {
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cxz-period-title {
|
||||
font-size: 15px;
|
||||
padding-left: 10px;
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
.cxz-period-select {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.cxz-period-btn {
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.cxz-table-box {
|
||||
border-radius: var(--radius-md, 8px);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cxz-table-header {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.cxz-table-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-data-table th {
|
||||
padding: 10px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-data-table td {
|
||||
padding: 10px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Make table horizontally scrollable on mobile */
|
||||
.cxz-table-box {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.cxz-data-table {
|
||||
min-width: 560px;
|
||||
}
|
||||
|
||||
/* Ranking */
|
||||
.cxz-ranking-box {
|
||||
border-radius: var(--radius-md, 8px);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cxz-ranking-header {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.cxz-ranking-title {
|
||||
font-size: 14px;
|
||||
padding-left: 10px;
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
.cxz-rank-table th {
|
||||
padding: 10px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-rank-table td {
|
||||
padding: 10px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-ranking-box {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.cxz-rank-table {
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
/* Rank badges - slightly smaller on mobile */
|
||||
.cxz-rank-badge {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Expert link */
|
||||
.cxz-expert-link {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Buy button */
|
||||
.cxz-btn-buy {
|
||||
padding: 4px 14px;
|
||||
font-size: 11px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.cxz-pagination {
|
||||
padding: 16px 10px;
|
||||
}
|
||||
|
||||
/* Balls in table - smaller */
|
||||
.cxz-data-table td .red-q,
|
||||
.cxz-data-table td .bule-q {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
13. Responsive - Small Mobile (480px and below)
|
||||
---------------------------------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
.cxz-filter-box {
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cxz-filter-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cxz-filter-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-filter-btn {
|
||||
padding: 3px 10px;
|
||||
font-size: 11px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.cxz-period-bar {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cxz-period-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-period-btn {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cxz-data-table {
|
||||
min-width: 480px;
|
||||
}
|
||||
|
||||
.cxz-data-table th {
|
||||
padding: 8px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cxz-data-table td {
|
||||
padding: 8px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cxz-data-table td .red-q,
|
||||
.cxz-data-table td .bule-q {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 10px;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.cxz-rank-table {
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.cxz-rank-badge {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cxz-btn-buy {
|
||||
padding: 3px 10px;
|
||||
font-size: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cxz-expert-link {
|
||||
font-size: 12px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cxz-expert-link::before {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.cxz-pagination {
|
||||
padding: 12px 6px;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage a,
|
||||
.cxz-pagination .layui-laypage span {
|
||||
min-width: 28px !important;
|
||||
height: 28px !important;
|
||||
line-height: 28px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
14. Animations
|
||||
---------------------------------------------------------- */
|
||||
@keyframes cxz-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cxz-filter-box {
|
||||
animation: cxz-fade-in 0.3s ease-out;
|
||||
}
|
||||
|
||||
.cxz-table-box {
|
||||
animation: cxz-fade-in 0.4s ease-out;
|
||||
}
|
||||
|
||||
.cxz-ranking-box {
|
||||
animation: cxz-fade-in 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Badge pulse animation for 1st place */
|
||||
@keyframes cxz-badge-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 2px 8px rgba(253, 185, 51, 0.45);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 2px 14px rgba(253, 185, 51, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.cxz-rank-1 {
|
||||
animation: cxz-badge-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
15. Print Styles
|
||||
---------------------------------------------------------- */
|
||||
@media print {
|
||||
.cxz-filter-box,
|
||||
.cxz-period-bar,
|
||||
.cxz-btn-buy,
|
||||
.cxz-pagination {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cxz-ranking-box,
|
||||
.cxz-table-box {
|
||||
box-shadow: none;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.cxz-data-table th,
|
||||
.cxz-data-table td,
|
||||
.cxz-rank-table th,
|
||||
.cxz-rank-table td {
|
||||
padding: 6px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.cxz-pay-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 12px;
|
||||
background: #f6f8fc;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-pay-summary strong {
|
||||
color: var(--orange);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.cxz-points-deduct {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 2px 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cxz-points-deduct input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,582 @@
|
||||
/* Combo recommendation table polish for duanzuhe.html and shazuhe.html */
|
||||
.page-main {
|
||||
width: min(1400px, calc(100% - 60px));
|
||||
margin: 20px auto 28px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin-top: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #edf1f7;
|
||||
border-radius: 26px;
|
||||
box-shadow: 0 18px 42px rgba(16, 43, 106, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
min-height: 68px;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid #e7edf5;
|
||||
background: #fff;
|
||||
color: #082a67;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 68px;
|
||||
}
|
||||
|
||||
.content-title i {
|
||||
color: #f5a400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.scheme-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
min-height: 92px;
|
||||
margin-bottom: 18px;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid #edf1f7;
|
||||
border-radius: 26px;
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 42px rgba(16, 43, 106, 0.08);
|
||||
}
|
||||
|
||||
.scheme-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.scheme-title {
|
||||
margin-bottom: 8px;
|
||||
color: #082a67;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.scheme-desc {
|
||||
color: #53627a;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.scheme-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.scheme-price {
|
||||
color: #c88500;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scheme-price-unit {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scheme-buy-btn,
|
||||
.scheme-view-btn {
|
||||
min-width: 104px;
|
||||
height: 40px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(135deg, #f5a400, #d58a00);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scheme-view-actions {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.scheme-view-btn {
|
||||
background: linear-gradient(135deg, #0b3a86, #0f7d8f);
|
||||
}
|
||||
|
||||
.scheme-buy-btn:hover,
|
||||
.scheme-view-btn:hover {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.scheme-detail-layer {
|
||||
overflow: hidden;
|
||||
border-radius: 18px !important;
|
||||
box-shadow: 0 24px 70px rgba(6, 22, 54, 0.32) !important;
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-title {
|
||||
height: 64px;
|
||||
padding: 0 58px 0 26px;
|
||||
border-bottom: 1px solid #edf1f7;
|
||||
background: #fff;
|
||||
color: #082a67;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-setwin {
|
||||
top: 22px;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-setwin .layui-layer-close1 {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
color: transparent;
|
||||
background-color: #f3f5f9;
|
||||
background-image: none !important;
|
||||
font-size: 0;
|
||||
line-height: 28px;
|
||||
transform: scale(1);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
transform 0.22s ease;
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-setwin .layui-layer-close1::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 13px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: #1f2937;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.22s ease;
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-setwin .layui-layer-close1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 13px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: #1f2937;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.22s ease;
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover {
|
||||
background-color: #102b6a;
|
||||
box-shadow: 0 8px 18px rgba(16, 43, 106, 0.24);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover::before,
|
||||
.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover::after {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover::before {
|
||||
transform: translate(-50%, -50%) rotate(135deg);
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover::after {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:active {
|
||||
box-shadow: 0 4px 10px rgba(16, 43, 106, 0.2);
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-content {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.scheme-plan-content {
|
||||
box-sizing: border-box;
|
||||
height: 556px;
|
||||
padding: 26px 30px 34px;
|
||||
overflow-y: auto;
|
||||
color: #25344d;
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.scheme-plan-content p {
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.scheme-plan-content span,
|
||||
.scheme-plan-content strong {
|
||||
color: inherit !important;
|
||||
background: transparent !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.scheme-plan-content strong {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.scheme-plan-content ul,
|
||||
.scheme-plan-content ol {
|
||||
margin: 12px 0 16px 22px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.scheme-plan-content li {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.scheme-plan-content br + br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scheme-plan-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.scheme-plan-content::-webkit-scrollbar-track {
|
||||
background: #f0f3f8;
|
||||
}
|
||||
|
||||
.scheme-plan-content::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: #bec8d8;
|
||||
}
|
||||
|
||||
.scheme-plan-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #9fabbd;
|
||||
}
|
||||
|
||||
.cxz-dialog-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background: rgba(7, 19, 45, 0.48);
|
||||
}
|
||||
|
||||
.cxz-dialog-box {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 24px 70px rgba(6, 22, 54, 0.28);
|
||||
}
|
||||
|
||||
.cxz-dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid #edf1f7;
|
||||
}
|
||||
|
||||
.cxz-dialog-title {
|
||||
color: #082a67;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.cxz-dialog-close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #f3f5f9;
|
||||
color: #5b6678;
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cxz-dialog-close:hover {
|
||||
background: #e9edf5;
|
||||
color: #082a67;
|
||||
}
|
||||
|
||||
.cxz-dialog-body {
|
||||
padding: 20px 22px 8px;
|
||||
}
|
||||
|
||||
.cxz-pay-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
background: #f6f8fc;
|
||||
color: #53627a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-pay-summary strong {
|
||||
color: #e29700;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.cxz-pay-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 15px 16px;
|
||||
border: 1px solid #e5eaf3;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.cxz-pay-option:hover,
|
||||
.cxz-pay-option.selected {
|
||||
border-color: #102b6a;
|
||||
background: #f0f3fa;
|
||||
}
|
||||
|
||||
.cxz-pay-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 18px;
|
||||
border: 2px solid #c5cede;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cxz-pay-option.selected .cxz-pay-radio {
|
||||
border-color: #102b6a;
|
||||
background: #102b6a;
|
||||
}
|
||||
|
||||
.cxz-pay-option.selected .cxz-pay-radio::after {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.cxz-pay-info {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cxz-pay-name {
|
||||
margin-bottom: 4px;
|
||||
color: #12213c;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cxz-pay-desc {
|
||||
color: #7c8798;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-pay-balance {
|
||||
color: #e29700;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-points-deduct {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 2px 0;
|
||||
color: #25344d;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cxz-points-deduct input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: #102b6a;
|
||||
}
|
||||
|
||||
.cxz-dialog-footer {
|
||||
padding: 18px 22px 22px;
|
||||
}
|
||||
|
||||
.cxz-dialog-confirm {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border: 0;
|
||||
border-radius: 23px;
|
||||
background: linear-gradient(135deg, #102b6a, #0f7d8f);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 22px rgba(16, 43, 106, 0.28);
|
||||
}
|
||||
|
||||
.cxz-dialog-confirm:hover {
|
||||
opacity: 0.94;
|
||||
}
|
||||
|
||||
.cxz-dialog-confirm:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.content-section .layui-table-view {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.content-section .layui-table-box,
|
||||
.content-section .layui-table-header,
|
||||
.content-section .layui-table-body {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.content-section .layui-table-box,
|
||||
.content-section .layui-table-header,
|
||||
.content-section .layui-table-body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.content-section .layui-table {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.content-section .layui-table-header th,
|
||||
.content-section .layui-table th {
|
||||
height: 52px;
|
||||
padding: 0;
|
||||
border-color: #e8edf5;
|
||||
background: #f6f8fc;
|
||||
color: #06245b;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.content-section .layui-table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
min-height: 52px;
|
||||
padding: 0 12px;
|
||||
line-height: 24px;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
.content-section .layui-table-body td {
|
||||
height: 70px;
|
||||
padding: 0;
|
||||
border-color: #edf0f5;
|
||||
color: #25344d;
|
||||
}
|
||||
|
||||
.content-section .layui-table-body tr:nth-child(even) td {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.content-section .layui-table-body tr:hover td {
|
||||
background: #f5f8ff;
|
||||
}
|
||||
|
||||
.content-section .layui-table-page {
|
||||
border-top: 1px solid #edf0f5;
|
||||
}
|
||||
|
||||
.open-code-cell {
|
||||
min-height: 28px;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.code-ball {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
box-shadow: 0 4px 8px rgba(221, 55, 45, 0.22);
|
||||
}
|
||||
|
||||
.fzlj {
|
||||
color: #06245b !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-main {
|
||||
width: calc(100% - 24px);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.scheme-section {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.scheme-actions {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scheme-view-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.scheme-detail-layer {
|
||||
width: calc(100vw - 24px) !important;
|
||||
max-width: calc(100vw - 24px);
|
||||
}
|
||||
|
||||
.scheme-detail-layer .layui-layer-title {
|
||||
height: 56px;
|
||||
padding: 0 50px 0 18px;
|
||||
font-size: 18px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.scheme-plan-content {
|
||||
height: min(70vh, 520px);
|
||||
padding: 20px 18px 28px;
|
||||
font-size: 15px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
min-height: 58px;
|
||||
padding: 0 18px;
|
||||
font-size: 18px;
|
||||
line-height: 58px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,285 @@
|
||||
.page-main {
|
||||
width: min(1100px, calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.publish-card {
|
||||
width: 100%;
|
||||
margin: 12px auto 54px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 42px rgba(16, 43, 106, 0.12);
|
||||
}
|
||||
|
||||
.publish-card-header {
|
||||
display: block;
|
||||
padding: 30px 34px 26px;
|
||||
border-bottom: 0;
|
||||
background: linear-gradient(112deg, #102b6a 0%, #173f8e 55%, #812a90 100%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.publish-card-header-h2 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0 0 12px;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.publish-card-header-h2::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 64px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--gold);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.publish-card-header-h2::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.publish-card-header p {
|
||||
margin: 2px 0 0;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.publish-card-body {
|
||||
padding: 30px 34px 32px;
|
||||
}
|
||||
|
||||
.publish-tab-bar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
margin: 0 0 24px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.publish-tab-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
min-height: 44px;
|
||||
border-right: 1px solid var(--border-light);
|
||||
background: transparent;
|
||||
color: #34425a;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.publish-tab-item:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.publish-tab-item.active {
|
||||
background: linear-gradient(90deg, #102b6a 0%, #173f8e 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.publish-tab-item.layui-disabled {
|
||||
color: #a8b2c2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.publish-tip-box {
|
||||
margin-bottom: 24px;
|
||||
padding: 14px 18px;
|
||||
border: 0;
|
||||
border-left: 4px solid var(--gold);
|
||||
border-radius: 8px;
|
||||
background: #f5f7fc;
|
||||
}
|
||||
|
||||
.publish-tip-item {
|
||||
margin: 0 0 8px;
|
||||
color: #52617a;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.publish-tip-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-row label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: var(--primary);
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.form-select,
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-light);
|
||||
color: var(--text-dark);
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.form-select.is-empty {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-select option {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.form-select option[value=""] {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-select,
|
||||
.form-input {
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.form-select:focus,
|
||||
.form-input:focus {
|
||||
border-color: var(--primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.1);
|
||||
}
|
||||
|
||||
.form-input-with-count {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input-with-count .form-input {
|
||||
padding-right: 82px;
|
||||
}
|
||||
|
||||
.form-input-count {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.publish-editor-textarea {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.submit-row {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #102b6a 0%, #173f8e 55%, #812a90 100%);
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 22px rgba(16, 43, 106, 0.18);
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: linear-gradient(90deg, #173f8e 0%, #1f54aa 55%, #9132a0 100%);
|
||||
}
|
||||
|
||||
.publish-card .ke-container,
|
||||
.publish-card .ke-toolbar,
|
||||
.publish-card .ke-edit {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.publish-card .ke-container {
|
||||
border-color: #e1e6f0;
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
background: #a9b4c7;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.publish-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.publish-footer-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.publish-footer-link:hover {
|
||||
color: #ffe39a;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-main {
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
.publish-card {
|
||||
margin: 18px auto 32px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.publish-card-header,
|
||||
.publish-card-body {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.publish-card-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.publish-tab-bar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.publish-tab-item {
|
||||
width: 100%;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.publish-tab-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,599 @@
|
||||
.page-main {
|
||||
width: min(1100px, calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pay-publish-card {
|
||||
width: 100%;
|
||||
margin: 12px auto 54px;
|
||||
overflow: visible;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 42px rgba(16, 43, 106, 0.12);
|
||||
}
|
||||
|
||||
.pay-publish-header {
|
||||
padding: 30px 34px 26px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
background: linear-gradient(112deg, #102b6a 0%, #173f8e 55%, #812a90 100%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pay-publish-header h1 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0 0 12px;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.pay-publish-header h1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 64px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--gold);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.pay-publish-header p {
|
||||
margin: 2px 0 0;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pay-publish-body {
|
||||
padding: 30px 34px 32px;
|
||||
}
|
||||
|
||||
.publish-tab-bar {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin: 0 0 24px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.publish-tab-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
min-height: 44px;
|
||||
border-right: 1px solid var(--border-light);
|
||||
color: #34425a;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
transition: color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.publish-tab-item:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.publish-tab-item.active {
|
||||
background: linear-gradient(90deg, #102b6a 0%, #173f8e 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pay-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mianfeiThreeSelect {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mianfeiThreeSelect.is-disabled {
|
||||
opacity: 0.66;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.selectY-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selectY-box::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 17px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-right: 2px solid #34425a;
|
||||
border-bottom: 2px solid #34425a;
|
||||
pointer-events: none;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.selectY-box.is-selected::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.selectY-box > input[type="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selectY-box .show {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
padding: 0 48px 0 14px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-light);
|
||||
color: var(--text-dark);
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.selectY-box .show::after {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
border: 0 !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.selectY-box .show:hover {
|
||||
border-color: var(--primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.08);
|
||||
}
|
||||
|
||||
.selectY-box .cl-exp {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.selectY-box .show i {
|
||||
margin: 0 6px;
|
||||
color: #b8c1cf;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.selectY-box .selectY-clear {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 12px !important;
|
||||
top: 50% !important;
|
||||
z-index: 3;
|
||||
width: 32px !important;
|
||||
min-width: 32px !important;
|
||||
height: 32px !important;
|
||||
padding: 0;
|
||||
border: 1px solid #c9d2df;
|
||||
border-radius: 50% !important;
|
||||
background: #fff;
|
||||
color: #5f6f86;
|
||||
font-size: 16px;
|
||||
line-height: 1 !important;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.selectY-box .selectY-clear[style*="display: none"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.selectY-box .selectY-clear:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.selectY-box .pop {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(100% + 6px);
|
||||
z-index: 1000;
|
||||
min-height: 180px;
|
||||
max-height: 320px;
|
||||
overflow-x: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 34px rgba(16, 43, 106, 0.16);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.selectY-box .pop ul {
|
||||
display: inline-block;
|
||||
min-width: 180px;
|
||||
max-height: 298px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-right: 1px solid var(--border-light);
|
||||
list-style: none;
|
||||
overflow-y: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.selectY-box .pop ul:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.selectY-box .pop li {
|
||||
position: relative;
|
||||
min-height: 34px;
|
||||
padding: 8px 28px 8px 12px;
|
||||
color: #34425a;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectY-box .pop li:hover,
|
||||
.selectY-box .pop li.active {
|
||||
background: rgba(16, 43, 106, 0.08);
|
||||
color: var(--primary);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.selectY-box .pop li.child-row::after {
|
||||
content: ">";
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 8px;
|
||||
color: #9aa6b8;
|
||||
}
|
||||
|
||||
.pay-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pay-form-label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: var(--primary);
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.pay-form-input {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-light);
|
||||
color: var(--text-dark);
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.pay-form-input:focus {
|
||||
border-color: var(--primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.1);
|
||||
}
|
||||
|
||||
.pay-title-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pay-title-input .pay-form-input {
|
||||
padding-right: 78px;
|
||||
}
|
||||
|
||||
.pay-title-input span {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.pay-form-input[readonly] {
|
||||
color: #65738a;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pay-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.pay-form-help {
|
||||
margin-top: 7px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pay-form-help em {
|
||||
color: var(--orange);
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.pay-price-info {
|
||||
min-height: 46px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(241, 90, 34, 0.18);
|
||||
border-radius: 8px;
|
||||
background: rgba(241, 90, 34, 0.06);
|
||||
color: #52617a;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.pay-price-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pay-price-input .pay-form-input {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.pay-price-input span {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.mianfeiThreeText,
|
||||
.mianfeiThreeButBox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pay-pool-section {
|
||||
margin: 6px 0 24px;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 12px;
|
||||
background: #fafcff;
|
||||
}
|
||||
|
||||
.pay-pool-title {
|
||||
margin-bottom: 14px;
|
||||
color: var(--primary);
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.number-pool {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mianfeiThreeTextRedballBox {
|
||||
padding: 14px;
|
||||
border: 1px solid rgba(16, 43, 106, 0.08);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.RedballText {
|
||||
margin-bottom: 12px;
|
||||
color: #34425a;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.RedballBox,
|
||||
.Redball,
|
||||
.Blueball,
|
||||
#jieguo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.Redball,
|
||||
.Blueball {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: var(--text-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.Redball:hover,
|
||||
.Blueball:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.Redball.selected,
|
||||
.Redball.BlueSelected {
|
||||
border-color: var(--orange);
|
||||
background: var(--orange);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.Blueball.BlueSelected,
|
||||
.Blueball.selected {
|
||||
border-color: #1d67d6;
|
||||
background: #1d67d6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.FormBox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.FormBox .selection-separator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: #9aa6b8;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ball {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(16, 43, 106, 0.08);
|
||||
color: var(--primary);
|
||||
font-weight: 900;
|
||||
line-height: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ball.BlueSelected {
|
||||
border-color: #1d67d6;
|
||||
background: #1d67d6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ball.selected {
|
||||
border-color: var(--orange);
|
||||
background: var(--orange);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pay-selected-row,
|
||||
.pay-issue-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
color: #34425a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pay-selected-label {
|
||||
color: var(--primary);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.pay-reset-btn {
|
||||
height: 34px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mianfeiThreeButBox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pay-submit-btn {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #102b6a 0%, #173f8e 55%, #812a90 100%);
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 22px rgba(16, 43, 106, 0.18);
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.pay-submit-btn:hover {
|
||||
background: linear-gradient(90deg, #173f8e 0%, #1f54aa 55%, #9132a0 100%);
|
||||
}
|
||||
|
||||
.pay-submit-btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.pay-submit-btn:disabled {
|
||||
background: #a9b4c7;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pay-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#loggedInBox:not(.pay-hidden) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.fufei-footer-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fufei-footer-link:hover {
|
||||
color: #ffe39a;
|
||||
}
|
||||
|
||||
.layui-select-title input,
|
||||
.selectY2-input,
|
||||
.selectY2 .layui-input {
|
||||
min-height: 42px;
|
||||
border-color: var(--border-light) !important;
|
||||
border-radius: 8px !important;
|
||||
background: var(--bg-light) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-main {
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
.pay-publish-card {
|
||||
margin: 18px auto 32px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.pay-publish-header,
|
||||
.pay-publish-body {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.publish-tab-bar,
|
||||
.pay-info-grid {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.publish-tab-item {
|
||||
width: 100%;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.publish-tab-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,955 @@
|
||||
/* ============================================================
|
||||
gonggao.css - 网站公告页 (gonggao.html, gonggaolist.html)
|
||||
============================================================ */
|
||||
|
||||
/* === Main Override - narrower layout for notice pages === */
|
||||
.cxz-main {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
1. Notice Detail Card (gonggao.html)
|
||||
=========================================================== */
|
||||
|
||||
.cxz-notice-card {
|
||||
background: var(--white, #ffffff);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
|
||||
overflow: hidden;
|
||||
border-left: 4px solid var(--primary, #102b6a);
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.cxz-notice-card:hover {
|
||||
box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.08));
|
||||
}
|
||||
|
||||
/* --- Notice Header --- */
|
||||
|
||||
.cxz-notice-header {
|
||||
padding: 28px 32px 20px;
|
||||
border-bottom: 1px solid var(--border-light, #e5e7eb);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cxz-notice-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--primary, #102b6a);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.cxz-notice-date {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted, #6b7280);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cxz-notice-date::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: var(--gold, #fdb933);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* --- Notice Body / Content --- */
|
||||
|
||||
.cxz-notice-body {
|
||||
padding: 28px 32px;
|
||||
}
|
||||
|
||||
.cxz-notice-content {
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.cxz-notice-content p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cxz-notice-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
margin: 12px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cxz-notice-content a {
|
||||
color: var(--primary, #102b6a);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.cxz-notice-content a:hover {
|
||||
color: var(--orange, #f15a22);
|
||||
}
|
||||
|
||||
.cxz-notice-content h1,
|
||||
.cxz-notice-content h2,
|
||||
.cxz-notice-content h3,
|
||||
.cxz-notice-content h4,
|
||||
.cxz-notice-content h5,
|
||||
.cxz-notice-content h6 {
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
margin: 20px 0 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.cxz-notice-content h1 { font-size: 20px; }
|
||||
.cxz-notice-content h2 { font-size: 18px; }
|
||||
.cxz-notice-content h3 { font-size: 16px; }
|
||||
.cxz-notice-content h4 { font-size: 15px; }
|
||||
.cxz-notice-content h5 { font-size: 14px; }
|
||||
.cxz-notice-content h6 { font-size: 13px; }
|
||||
|
||||
.cxz-notice-content ul,
|
||||
.cxz-notice-content ol {
|
||||
padding-left: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-content ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.cxz-notice-content ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.cxz-notice-content li {
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.cxz-notice-content blockquote {
|
||||
margin: 16px 0;
|
||||
padding: 12px 20px;
|
||||
border-left: 4px solid var(--gold, #fdb933);
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
|
||||
color: var(--text-muted, #6b7280);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cxz-notice-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 12px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-notice-content th,
|
||||
.cxz-notice-content td {
|
||||
border: 1px solid var(--border-light, #e5e7eb);
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cxz-notice-content th {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
}
|
||||
|
||||
.cxz-notice-content td {
|
||||
color: var(--text-default, #333333);
|
||||
}
|
||||
|
||||
.cxz-notice-content code {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
font-size: 13px;
|
||||
color: var(--orange, #f15a22);
|
||||
}
|
||||
|
||||
.cxz-notice-content pre {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
overflow-x: auto;
|
||||
margin: 12px 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cxz-notice-content pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
}
|
||||
|
||||
/* --- Notice Body (legacy content inside .cxz-notice-body directly) --- */
|
||||
|
||||
.cxz-notice-body img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
margin: 12px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cxz-notice-body p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-body p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cxz-notice-body table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.cxz-notice-body th,
|
||||
.cxz-notice-body td {
|
||||
border: 1px solid var(--border-light, #e5e7eb);
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-notice-body th {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
2. Back Button (gonggao.html)
|
||||
=========================================================== */
|
||||
|
||||
.cxz-back-bar {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.cxz-back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 32px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
background: var(--primary, #102b6a);
|
||||
color: var(--white, #ffffff);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cxz-back-btn:hover {
|
||||
background: var(--primary-light, #1a3f8f);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(16, 43, 106, 0.3);
|
||||
color: var(--white, #ffffff);
|
||||
}
|
||||
|
||||
.cxz-back-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(16, 43, 106, 0.2);
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
3. Notice List (gonggaolist.html)
|
||||
=========================================================== */
|
||||
|
||||
.cxz-notice-list {
|
||||
background: var(--white, #ffffff);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
|
||||
overflow: hidden;
|
||||
border-left: 4px solid var(--primary, #102b6a);
|
||||
}
|
||||
|
||||
/* --- Notice Item Row --- */
|
||||
|
||||
.cxz-notice-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border-light, #e5e7eb);
|
||||
transition: background 0.2s, padding-left 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cxz-notice-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cxz-notice-item:hover {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
/* item link wrapper (simple list row) */
|
||||
.cxz-notice-item a {
|
||||
flex: 1;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cxz-notice-item a:hover {
|
||||
color: var(--orange, #f15a22);
|
||||
}
|
||||
|
||||
/* dot indicator inside list items */
|
||||
.cxz-notice-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--orange, #f15a22);
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.cxz-notice-item:hover .cxz-notice-dot {
|
||||
transform: scale(1.4);
|
||||
background: var(--primary, #102b6a);
|
||||
}
|
||||
|
||||
/* --- Notice Item Title --- */
|
||||
|
||||
.cxz-notice-item-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.cxz-notice-item:hover .cxz-notice-item-title {
|
||||
color: var(--primary, #102b6a);
|
||||
}
|
||||
|
||||
/* --- Notice Item Date --- */
|
||||
|
||||
.cxz-notice-item-date {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted, #6b7280);
|
||||
flex-shrink: 0;
|
||||
margin-left: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* --- Notice Item Summary --- */
|
||||
|
||||
.cxz-notice-item-summary {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted, #6b7280);
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
/* --- Notice Date (simple list) --- */
|
||||
|
||||
.cxz-notice-date {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted, #6b7280);
|
||||
flex-shrink: 0;
|
||||
margin-left: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* --- Rich notice item layout (title + summary + date stacked) --- */
|
||||
|
||||
.cxz-notice-item--rich {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
padding: 18px 24px;
|
||||
}
|
||||
|
||||
.cxz-notice-item--rich .cxz-notice-item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cxz-notice-item--rich .cxz-notice-item-summary {
|
||||
margin-left: 0;
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cxz-notice-item--rich .cxz-notice-item-date {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cxz-notice-item--rich:hover {
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
/* --- Pinned / top item --- */
|
||||
|
||||
.cxz-notice-item--pinned {
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
}
|
||||
|
||||
.cxz-notice-item--pinned::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--gold, #fdb933);
|
||||
}
|
||||
|
||||
.cxz-notice-item--pinned .cxz-notice-item-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cxz-notice-pin-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--white, #ffffff);
|
||||
background: var(--gold, #fdb933);
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
4. Pagination
|
||||
=========================================================== */
|
||||
|
||||
.cxz-pagination {
|
||||
padding: 24px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Layui pagination overrides to match project theme */
|
||||
.cxz-pagination .layui-laypage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage a,
|
||||
.cxz-pagination .layui-laypage span {
|
||||
border-radius: var(--radius-md, 8px);
|
||||
border: 1px solid var(--border-light, #e5e7eb);
|
||||
font-size: 13px;
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0 10px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage a:hover {
|
||||
color: var(--primary, #102b6a);
|
||||
border-color: var(--primary, #102b6a);
|
||||
background: var(--bg-light, #f4f6fb);
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background: var(--primary, #102b6a);
|
||||
border-radius: var(--radius-md, 8px);
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage .layui-laypage-curr em {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage .layui-laypage-prev,
|
||||
.cxz-pagination .layui-laypage .layui-laypage-next {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
5. Empty State
|
||||
=========================================================== */
|
||||
|
||||
.cxz-notice-empty {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-muted, #6b7280);
|
||||
}
|
||||
|
||||
.cxz-notice-empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.cxz-notice-empty-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
6. Notice Meta (shared)
|
||||
=========================================================== */
|
||||
|
||||
.cxz-notice-meta {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted, #6b7280);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cxz-notice-meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cxz-notice-meta-item--author {
|
||||
color: var(--orange, #f15a22);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cxz-notice-meta-item--views {
|
||||
color: var(--text-muted, #6b7280);
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
7. Notice Tags / Badges
|
||||
=========================================================== */
|
||||
|
||||
.cxz-notice-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cxz-notice-tag--important {
|
||||
color: var(--white, #ffffff);
|
||||
background: var(--orange, #f15a22);
|
||||
}
|
||||
|
||||
.cxz-notice-tag--system {
|
||||
color: var(--white, #ffffff);
|
||||
background: var(--primary, #102b6a);
|
||||
}
|
||||
|
||||
.cxz-notice-tag--activity {
|
||||
color: var(--white, #ffffff);
|
||||
background: var(--gold, #fdb933);
|
||||
}
|
||||
|
||||
.cxz-notice-tag--update {
|
||||
color: var(--white, #ffffff);
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
8. Notice Navigation (prev / next)
|
||||
=========================================================== */
|
||||
|
||||
.cxz-notice-nav {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cxz-notice-nav-item {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
background: var(--white, #ffffff);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
|
||||
text-decoration: none;
|
||||
transition: all 0.25s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cxz-notice-nav-item:hover {
|
||||
box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.08));
|
||||
transform: translateY(-1px);
|
||||
color: var(--primary, #102b6a);
|
||||
}
|
||||
|
||||
.cxz-notice-nav-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted, #6b7280);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.cxz-notice-nav-title {
|
||||
font-size: 14px;
|
||||
color: var(--text-dark, #1a1a2e);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.cxz-notice-nav-item:hover .cxz-notice-nav-title {
|
||||
color: var(--primary, #102b6a);
|
||||
}
|
||||
|
||||
.cxz-notice-nav-item--next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
9. Loading Skeleton
|
||||
=========================================================== */
|
||||
|
||||
.cxz-notice-skeleton {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.cxz-notice-skeleton-line {
|
||||
height: 14px;
|
||||
background: linear-gradient(90deg, var(--border-light, #e5e7eb) 25%, var(--bg-light, #f4f6fb) 50%, var(--border-light, #e5e7eb) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: cxz-skeleton-pulse 1.5s ease-in-out infinite;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-skeleton-line:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cxz-notice-skeleton-line--title {
|
||||
width: 60%;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.cxz-notice-skeleton-line--text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cxz-notice-skeleton-line--short {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
@keyframes cxz-skeleton-pulse {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
10. Print Styles
|
||||
=========================================================== */
|
||||
|
||||
@media print {
|
||||
.cxz-notice-card {
|
||||
box-shadow: none;
|
||||
border-left: 2px solid #333;
|
||||
}
|
||||
|
||||
.cxz-notice-header {
|
||||
padding: 16px 0 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-body,
|
||||
.cxz-notice-content {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.cxz-back-bar,
|
||||
.cxz-pagination,
|
||||
.cxz-notice-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
11. Responsive Styles
|
||||
=========================================================== */
|
||||
|
||||
/* --- Tablets (<= 1024px) --- */
|
||||
@media (max-width: 1024px) {
|
||||
.cxz-notice-header {
|
||||
padding: 24px 24px 16px;
|
||||
}
|
||||
|
||||
.cxz-notice-body {
|
||||
padding: 24px 24px;
|
||||
}
|
||||
|
||||
.cxz-notice-item {
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
.cxz-notice-item:hover {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.cxz-notice-item--rich {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.cxz-notice-item--rich:hover {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.cxz-notice-nav {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Mobile (<= 768px) --- */
|
||||
@media (max-width: 768px) {
|
||||
.cxz-main {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Notice card */
|
||||
.cxz-notice-card {
|
||||
border-radius: var(--radius-md, 8px);
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
.cxz-notice-header {
|
||||
padding: 20px 16px 14px;
|
||||
}
|
||||
|
||||
.cxz-notice-title {
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.cxz-notice-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-body {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.cxz-notice-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.cxz-notice-content h1 { font-size: 17px; }
|
||||
.cxz-notice-content h2 { font-size: 16px; }
|
||||
.cxz-notice-content h3 { font-size: 15px; }
|
||||
|
||||
.cxz-notice-content table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-content th,
|
||||
.cxz-notice-content td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
/* Back button */
|
||||
.cxz-back-btn {
|
||||
padding: 9px 24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Notice list */
|
||||
.cxz-notice-list {
|
||||
border-radius: var(--radius-md, 8px);
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
.cxz-notice-item {
|
||||
padding: 12px 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cxz-notice-item:hover {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.cxz-notice-item a {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-notice-item-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-notice-item-date {
|
||||
font-size: 11px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-item-summary {
|
||||
font-size: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-date {
|
||||
font-size: 11px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* Rich item on mobile: stack vertically */
|
||||
.cxz-notice-item--rich {
|
||||
padding: 14px 14px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cxz-notice-item--rich:hover {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.cxz-notice-item--rich .cxz-notice-item-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Pin tag */
|
||||
.cxz-notice-pin-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
/* Notice tags */
|
||||
.cxz-notice-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 8px;
|
||||
}
|
||||
|
||||
/* Notice navigation: stack vertically */
|
||||
.cxz-notice-nav {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cxz-notice-nav-item {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.cxz-notice-nav-item--next {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.cxz-pagination {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage a,
|
||||
.cxz-pagination .layui-laypage span {
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.cxz-notice-empty {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.cxz-notice-empty-icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Small Mobile (<= 480px) --- */
|
||||
@media (max-width: 480px) {
|
||||
.cxz-notice-header {
|
||||
padding: 16px 12px 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cxz-notice-body {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-content {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-notice-content blockquote {
|
||||
padding: 10px 14px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.cxz-notice-item {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-item:hover {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.cxz-notice-item-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-notice-item-summary {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.cxz-notice-item-date {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.cxz-notice-date {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.cxz-back-btn {
|
||||
padding: 8px 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-notice-nav-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,702 @@
|
||||
/* ============================================================
|
||||
kaijiang.css - Lottery Results Page (kaijiang.html)
|
||||
============================================================ */
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
1. Latest Result Card
|
||||
---------------------------------------------------------- */
|
||||
.cxz-latest-card {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||||
border-radius: 16px;
|
||||
padding: 28px 32px;
|
||||
margin-bottom: 24px;
|
||||
color: var(--white);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 24px rgba(16, 43, 106, 0.3);
|
||||
}
|
||||
|
||||
/* Decorative background circles */
|
||||
.cxz-latest-card::before,
|
||||
.cxz-latest-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cxz-latest-card::before {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
top: -80px;
|
||||
right: -60px;
|
||||
}
|
||||
|
||||
.cxz-latest-card::after {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
bottom: -50px;
|
||||
left: -40px;
|
||||
}
|
||||
|
||||
.cxz-latest-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cxz-latest-label {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cxz-latest-period {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--gold);
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.cxz-latest-date {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.cxz-latest-balls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
padding: 12px 0 4px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Larger balls inside the latest card */
|
||||
.cxz-latest-balls .red-q,
|
||||
.cxz-latest-balls .bule-q {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
margin: 2px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.cxz-latest-balls .red-q {
|
||||
background: linear-gradient(135deg, #ff6b3d, var(--red));
|
||||
box-shadow: 0 3px 10px rgba(231, 76, 60, 0.45);
|
||||
}
|
||||
|
||||
.cxz-latest-balls .bule-q {
|
||||
background: linear-gradient(135deg, #4a90e2, #2c5fc2);
|
||||
box-shadow: 0 3px 10px rgba(16, 43, 106, 0.45);
|
||||
}
|
||||
|
||||
/* Plus separator between red and blue balls */
|
||||
.cxz-latest-balls .ball-sep {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
2. Lottery Tabs (Page-level overrides)
|
||||
---------------------------------------------------------- */
|
||||
.cxz-lottery-tabs {
|
||||
gap: 10px;
|
||||
padding: 20px 0 8px;
|
||||
}
|
||||
|
||||
.cxz-lottery-tab {
|
||||
padding: 9px 24px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.cxz-lottery-tab:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.cxz-lottery-tab.active {
|
||||
box-shadow: 0 4px 14px rgba(16, 43, 106, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
3. Section Header Overrides
|
||||
---------------------------------------------------------- */
|
||||
.cxz-section-header {
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
}
|
||||
|
||||
.cxz-section-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
4. Data Table Overrides
|
||||
---------------------------------------------------------- */
|
||||
.cxz-table-box {
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.cxz-data-table th {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.cxz-data-table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Ball alignment inside table cells */
|
||||
.cxz-data-table .ball-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-data-table .ball-cell .red-q,
|
||||
.cxz-data-table .ball-cell .bule-q {
|
||||
margin: 2px 1px;
|
||||
}
|
||||
|
||||
/* Period number highlight in table */
|
||||
.cxz-data-table .period-cell {
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Date cell muted */
|
||||
.cxz-data-table .date-cell {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Row number column */
|
||||
.cxz-data-table .row-index {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
5. Breadcrumb Overrides
|
||||
---------------------------------------------------------- */
|
||||
/* ----------------------------------------------------------
|
||||
6. Empty State
|
||||
---------------------------------------------------------- */
|
||||
.cxz-empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cxz-empty-state-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.cxz-empty-state-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
7. Table Header Toolbar
|
||||
---------------------------------------------------------- */
|
||||
.cxz-table-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.cxz-table-toolbar-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.cxz-table-toolbar-count {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.cxz-table-toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cxz-toolbar-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--white);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.cxz-toolbar-btn:hover {
|
||||
color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
background: rgba(16, 43, 106, 0.04);
|
||||
}
|
||||
|
||||
.cxz-toolbar-btn.active {
|
||||
color: var(--white);
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
8. Pagination (page-level)
|
||||
---------------------------------------------------------- */
|
||||
.cxz-pagination {
|
||||
padding: 24px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage a,
|
||||
.cxz-pagination .layui-laypage span {
|
||||
border-radius: var(--radius-md);
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background: var(--primary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.cxz-pagination .layui-laypage a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
9. Loading Skeleton
|
||||
---------------------------------------------------------- */
|
||||
.cxz-skeleton-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 28px 32px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cxz-skeleton-line {
|
||||
height: 16px;
|
||||
background: linear-gradient(90deg, var(--border-light) 25%, #ececf1 50%, var(--border-light) 75%);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 4px;
|
||||
animation: cxz-shimmer 1.5s infinite;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cxz-skeleton-line:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cxz-skeleton-line.w60 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.cxz-skeleton-line.w40 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.cxz-skeleton-line.w80 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.cxz-skeleton-balls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.cxz-skeleton-ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(90deg, var(--border-light) 25%, #ececf1 50%, var(--border-light) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: cxz-shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes cxz-shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
10. Lottery Category Badge
|
||||
---------------------------------------------------------- */
|
||||
.cxz-lottery-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.cxz-lottery-badge.fc {
|
||||
background: rgba(231, 76, 60, 0.1);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.cxz-lottery-badge.ssq {
|
||||
background: rgba(16, 43, 106, 0.1);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.cxz-lottery-badge.qlc {
|
||||
background: rgba(241, 90, 34, 0.1);
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.cxz-lottery-badge.qxc {
|
||||
background: rgba(39, 174, 96, 0.1);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
11. Sub-navigation Tabs (secondary lottery picker)
|
||||
---------------------------------------------------------- */
|
||||
.cxz-sub-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
margin-bottom: 20px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.cxz-sub-tab {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
transition: all 0.25s;
|
||||
white-space: nowrap;
|
||||
background: none;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.cxz-sub-tab:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.cxz-sub-tab.active {
|
||||
color: var(--primary);
|
||||
border-bottom-color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
12. Responsive Styles
|
||||
---------------------------------------------------------- */
|
||||
|
||||
/* Tablet */
|
||||
@media (max-width: 1024px) {
|
||||
.cxz-latest-card {
|
||||
padding: 24px 20px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.cxz-latest-period {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.cxz-latest-balls .red-q,
|
||||
.cxz-latest-balls .bule-q {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.cxz-latest-balls .ball-sep {
|
||||
width: 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-table-toolbar {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.cxz-sub-tab {
|
||||
padding: 9px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.cxz-latest-card {
|
||||
padding: 20px 16px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cxz-latest-card::before {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
top: -50px;
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
.cxz-latest-card::after {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
bottom: -40px;
|
||||
left: -30px;
|
||||
}
|
||||
|
||||
.cxz-latest-header {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.cxz-latest-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-latest-period {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cxz-latest-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-latest-balls {
|
||||
gap: 4px;
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
|
||||
.cxz-latest-balls .red-q,
|
||||
.cxz-latest-balls .bule-q {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-latest-balls .ball-sep {
|
||||
width: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-lottery-tabs {
|
||||
gap: 6px;
|
||||
padding: 12px 0 4px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cxz-lottery-tab {
|
||||
padding: 7px 16px;
|
||||
font-size: 13px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cxz-lottery-tab:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cxz-lottery-tab.active {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cxz-section-title {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.cxz-data-table th,
|
||||
.cxz-data-table td {
|
||||
padding: 10px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-data-table .red-q,
|
||||
.cxz-data-table .bule-q {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.cxz-data-table .row-index {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.cxz-table-toolbar {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.cxz-table-toolbar-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-table-toolbar-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cxz-toolbar-btn {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-sub-tabs {
|
||||
gap: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cxz-sub-tab {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-pagination {
|
||||
padding: 16px 8px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.cxz-empty-state {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.cxz-empty-state-icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.cxz-empty-state-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-skeleton-card {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.cxz-skeleton-ball {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small mobile */
|
||||
@media (max-width: 480px) {
|
||||
.cxz-latest-card {
|
||||
padding: 16px 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cxz-latest-period {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cxz-latest-balls .red-q,
|
||||
.cxz-latest-balls .bule-q {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-latest-balls .ball-sep {
|
||||
width: 12px;
|
||||
font-size: 11px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.cxz-lottery-tab {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-data-table th,
|
||||
.cxz-data-table td {
|
||||
padding: 8px 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-data-table .red-q,
|
||||
.cxz-data-table .bule-q {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.cxz-section-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.cxz-sub-tab {
|
||||
padding: 7px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cxz-toolbar-btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cxz-lottery-badge {
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.cxz-skeleton-ball {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
.trend-table thead .zone-k1,
|
||||
.trend-table thead .zone-k2,
|
||||
.trend-table thead .zone-k3,
|
||||
.trend-table thead .zone-k4,
|
||||
.trend-table thead .zone-k5,
|
||||
.trend-table thead .zone-k6,
|
||||
.trend-table thead .zone-k7,
|
||||
.trend-table thead .zone-k8 {
|
||||
color: #fff !important;
|
||||
font-size: 14px !important;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.trend-table thead .zone-k1 { background: #e84b3c !important; }
|
||||
.trend-table thead .zone-k2 { background: #f08a24 !important; }
|
||||
.trend-table thead .zone-k3 { background: #d9a324 !important; }
|
||||
.trend-table thead .zone-k4 { background: #25a764 !important; }
|
||||
.trend-table thead .zone-k5 { background: #1b9aaa !important; }
|
||||
.trend-table thead .zone-k6 { background: #356fd0 !important; }
|
||||
.trend-table thead .zone-k7 { background: #7448b8 !important; }
|
||||
.trend-table thead .zone-k8 { background: #c43f82 !important; }
|
||||
|
||||
.hit-num.g1 {
|
||||
background: linear-gradient(135deg, #e84b3c, #f15f4f);
|
||||
box-shadow: 0 2px 6px rgba(232, 75, 60, 0.35);
|
||||
}
|
||||
|
||||
.hit-num.g2 {
|
||||
background: linear-gradient(135deg, #f08a24, #f5a84a);
|
||||
box-shadow: 0 2px 6px rgba(240, 138, 36, 0.35);
|
||||
}
|
||||
|
||||
.hit-num.g3 {
|
||||
background: linear-gradient(135deg, #d9a324, #efbe44);
|
||||
box-shadow: 0 2px 6px rgba(217, 163, 36, 0.35);
|
||||
}
|
||||
|
||||
.hit-num.g4 {
|
||||
background: linear-gradient(135deg, #25a764, #42c680);
|
||||
box-shadow: 0 2px 6px rgba(37, 167, 100, 0.35);
|
||||
}
|
||||
|
||||
.hit-num.g5 {
|
||||
background: linear-gradient(135deg, #1b9aaa, #35b8c8);
|
||||
box-shadow: 0 2px 6px rgba(27, 154, 170, 0.35);
|
||||
}
|
||||
|
||||
.hit-num.g6 {
|
||||
background: linear-gradient(135deg, #356fd0, #5b8be0);
|
||||
box-shadow: 0 2px 6px rgba(53, 111, 208, 0.35);
|
||||
}
|
||||
|
||||
.hit-num.g7 {
|
||||
background: linear-gradient(135deg, #7448b8, #956bd0);
|
||||
box-shadow: 0 2px 6px rgba(116, 72, 184, 0.35);
|
||||
}
|
||||
|
||||
.hit-num.g8 {
|
||||
background: linear-gradient(135deg, #c43f82, #dd629c);
|
||||
box-shadow: 0 2px 6px rgba(196, 63, 130, 0.35);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 326 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -0,0 +1,65 @@
|
||||
body:has(.auth-container) {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(246, 249, 255, 0.9) 0%, rgba(246, 249, 255, 0.74) 48%, rgba(246, 249, 255, 0.62) 100%),
|
||||
url("../img/auth-login-bg.png") center / cover no-repeat,
|
||||
linear-gradient(135deg, #eef3fb 0%, #f8fbff 42%, #edf4ff 100%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
body:has(.auth-container)::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 36%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(222, 232, 246, 0.12));
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 24px 70px rgba(16, 43, 106, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
padding-top: 28px;
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
|
||||
.auth-logo--image {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.auth-logo--image img {
|
||||
display: block;
|
||||
width: min(230px, 70%);
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body:has(.auth-container) {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(246, 249, 255, 0.88) 0%, rgba(246, 249, 255, 0.72) 100%),
|
||||
url("../img/auth-login-bg.png") center / cover no-repeat,
|
||||
linear-gradient(135deg, #eef3fb 0%, #f8fbff 48%, #edf4ff 100%);
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
.auth-logo--image img {
|
||||
width: min(210px, 72%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
/* Comment Section */
|
||||
.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cxz-article-loading {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.site-footer__record-link {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.cxz-comment-section {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-top: 24px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
.cxz-comment-header {
|
||||
padding: 20px 28px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: linear-gradient(180deg, #f8f9fc, #fff);
|
||||
}
|
||||
.cxz-comment-header i {
|
||||
color: var(--primary);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Comment Input */
|
||||
.cxz-comment-input-box {
|
||||
padding: 20px 28px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: rgba(16, 43, 106, 0.02);
|
||||
}
|
||||
.cxz-comment-textarea {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 14px;
|
||||
color: var(--text-dark);
|
||||
background: var(--white);
|
||||
resize: vertical;
|
||||
outline: none;
|
||||
transition: border-color 0.25s;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.cxz-comment-textarea::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.cxz-comment-textarea:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.1);
|
||||
}
|
||||
.cxz-comment-submit-btn {
|
||||
margin-top: 12px;
|
||||
padding: 10px 28px;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--primary), #1a3f8f);
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.cxz-comment-submit-btn:hover {
|
||||
box-shadow: 0 4px 14px rgba(16, 43, 106, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.cxz-comment-submit-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Comment List */
|
||||
.cxz-comment-list {
|
||||
padding: 0 28px;
|
||||
}
|
||||
.cxz-comment-empty {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.cxz-comment-empty i {
|
||||
font-size: 32px;
|
||||
opacity: 0.3;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cxz-comment-item {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px dashed var(--border-light);
|
||||
animation: fadeInUp 0.3s ease;
|
||||
}
|
||||
.cxz-comment-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.cxz-comment-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid rgba(253, 185, 51, 0.3);
|
||||
}
|
||||
.cxz-comment-avatar-placeholder {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(135deg, var(--primary), #1a3f8f);
|
||||
color: var(--white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cxz-comment-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.cxz-comment-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.cxz-comment-text {
|
||||
font-size: 14px;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
.cxz-comment-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.cxz-comment-header {
|
||||
padding: 16px 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.cxz-comment-input-box {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.cxz-comment-list {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.cxz-comment-textarea {
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.cxz-comment-header {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.cxz-comment-input-box {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.cxz-comment-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.cxz-comment-item {
|
||||
gap: 10px;
|
||||
}
|
||||
.cxz-comment-avatar,
|
||||
.cxz-comment-avatar-placeholder {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,435 @@
|
||||
/* mianfeishoucang.html page styles */
|
||||
/* === Stats Summary Bar === */
|
||||
.sc-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.sc-stat-card {
|
||||
flex: 1;
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px 24px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border: 1px solid var(--border-light);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sc-stat-card:hover {
|
||||
border-color: transparent;
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.sc-stat-card.active {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 4px 20px rgba(16, 43, 106, 0.15);
|
||||
}
|
||||
.sc-stat-card.active .sc-stat-icon {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary),
|
||||
var(--primary-light)
|
||||
);
|
||||
color: var(--white);
|
||||
}
|
||||
.sc-stat-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
background: var(--bg-light);
|
||||
color: var(--text-muted);
|
||||
transition: all 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sc-stat-icon.gold {
|
||||
color: var(--gold-dark);
|
||||
background: rgba(253, 185, 51, 0.12);
|
||||
}
|
||||
.sc-stat-icon.orange {
|
||||
color: var(--orange);
|
||||
background: rgba(241, 90, 34, 0.1);
|
||||
}
|
||||
.sc-stat-icon.blue {
|
||||
color: var(--primary);
|
||||
background: rgba(16, 43, 106, 0.08);
|
||||
}
|
||||
.sc-stat-card.active .sc-stat-icon.gold,
|
||||
.sc-stat-card.active .sc-stat-icon.orange,
|
||||
.sc-stat-card.active .sc-stat-icon.blue {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary),
|
||||
var(--primary-light)
|
||||
);
|
||||
color: var(--white);
|
||||
}
|
||||
.sc-stat-info {
|
||||
flex: 1;
|
||||
}
|
||||
.sc-stat-value {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.sc-stat-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* === Tab Content Panels === */
|
||||
.sc-panel {
|
||||
display: none;
|
||||
}
|
||||
.sc-panel.active {
|
||||
display: block;
|
||||
animation: fadeInUp 0.35s ease;
|
||||
}
|
||||
|
||||
/* === Paid Article Table Enhancements === */
|
||||
.sc-paid-table {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sc-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 220px;
|
||||
margin: 20px 0;
|
||||
border: 1px dashed var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
.sc-paid-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: 12px;
|
||||
gap: 16px;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
.sc-paid-row:hover {
|
||||
border-color: transparent;
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.sc-paid-row.removing {
|
||||
animation: fadeOutRow 0.4s ease forwards;
|
||||
}
|
||||
@keyframes fadeOutRow {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
}
|
||||
}
|
||||
.sc-expert-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sc-expert-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(253, 185, 51, 0.4);
|
||||
}
|
||||
.sc-expert-avatar-fallback {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary),
|
||||
var(--primary-light)
|
||||
);
|
||||
color: var(--white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sc-expert-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sc-paid-period {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sc-paid-title {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: var(--text-dark);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
.sc-paid-rate {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--green);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sc-paid-price {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--orange);
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sc-paid-view {
|
||||
padding: 6px 18px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
background: rgba(16, 43, 106, 0.06);
|
||||
border: 1px solid rgba(16, 43, 106, 0.15);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sc-paid-view:hover {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.sc-paid-remove {
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
color: var(--orange);
|
||||
background: transparent;
|
||||
border: 1px solid var(--orange);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sc-paid-remove:hover {
|
||||
background: var(--orange);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* === Expert Collection Cards === */
|
||||
.sc-expert-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.sc-expert-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border-light);
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sc-expert-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--primary), var(--gold));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.sc-expert-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.sc-expert-card:hover {
|
||||
border-color: transparent;
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.sc-expert-card.removing {
|
||||
animation: fadeOutCard 0.4s ease forwards;
|
||||
}
|
||||
.sc-expert-card-avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid rgba(253, 185, 51, 0.5);
|
||||
margin: 0 auto 12px;
|
||||
display: block;
|
||||
}
|
||||
.sc-expert-card-avatar-fallback {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary),
|
||||
var(--primary-light)
|
||||
);
|
||||
color: var(--white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
.sc-expert-card-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sc-expert-card-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.sc-expert-card-stat .val {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
}
|
||||
.sc-expert-card-stat .lbl {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.sc-expert-card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
.sc-expert-card-actions .sc-paid-view {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.sc-expert-card-actions .sc-paid-remove {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* === Responsive === */
|
||||
@media (max-width: 768px) {
|
||||
.sc-stats {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.sc-stat-card {
|
||||
padding: 16px 18px;
|
||||
}
|
||||
.sc-stat-value {
|
||||
font-size: 22px;
|
||||
}
|
||||
.sc-paid-row {
|
||||
flex-wrap: wrap;
|
||||
padding: 14px 16px;
|
||||
gap: 10px;
|
||||
}
|
||||
.sc-paid-title {
|
||||
width: 100%;
|
||||
flex: none;
|
||||
order: 10;
|
||||
}
|
||||
.sc-expert-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.sc-expert-card {
|
||||
padding: 18px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.sc-expert-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.sc-paid-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.cxz-empty[hidden],
|
||||
.cxz-pagination[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sc-paid-title a {
|
||||
color: var(--text-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sc-paid-title a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.sc-paid-time {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sc-expert-card-type {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 24px;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(253, 185, 51, 0.14);
|
||||
color: var(--gold-dark);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cxz-collect-card .cxz-card-meta {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sc-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sc-empty-icon-symbol {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.site-footer__record {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
@@ -0,0 +1,568 @@
|
||||
/* Unified pagination style for Layui and custom pagers. */
|
||||
.cxz-pagination,
|
||||
.uc-pagination,
|
||||
.je-pagination,
|
||||
.txl-pagination,
|
||||
#articlePage {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 6px !important;
|
||||
padding: 18px 12px !important;
|
||||
min-height: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cxz-pagination:empty,
|
||||
.uc-pagination:empty,
|
||||
.je-pagination:empty,
|
||||
.txl-pagination:empty,
|
||||
#articlePage:empty {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.layui-laypage {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 6px !important;
|
||||
margin: 0 !important;
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
.layui-laypage a,
|
||||
.layui-laypage span,
|
||||
.txl-pagination .page-btn {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-width: 34px !important;
|
||||
width: 34px !important;
|
||||
height: 34px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: 1px solid #dfe5ef !important;
|
||||
border-radius: 7px !important;
|
||||
background: #fff !important;
|
||||
color: #344054 !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 34px !important;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
color 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
background 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
transform 0.18s ease;
|
||||
}
|
||||
|
||||
.layui-laypage a:hover,
|
||||
.txl-pagination .page-btn:hover {
|
||||
border-color: var(--primary, #102b6a) !important;
|
||||
color: var(--primary, #102b6a) !important;
|
||||
background: #f7f9ff !important;
|
||||
box-shadow: 0 4px 10px rgba(16, 43, 106, 0.1);
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-prev,
|
||||
.layui-laypage .layui-laypage-next {
|
||||
min-width: 74px !important;
|
||||
width: auto !important;
|
||||
padding: 0 14px !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-count,
|
||||
.layui-laypage .layui-laypage-limits {
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
padding: 0 10px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-limits select {
|
||||
width: auto !important;
|
||||
min-width: 78px !important;
|
||||
padding: 0 26px 0 10px !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr {
|
||||
position: relative !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-width: 34px !important;
|
||||
width: 34px !important;
|
||||
height: 34px !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
line-height: 34px !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
position: absolute !important;
|
||||
inset: 0 !important;
|
||||
border-radius: 7px !important;
|
||||
background: var(--primary, #102b6a) !important;
|
||||
box-shadow: 0 6px 14px rgba(16, 43, 106, 0.22);
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr em:last-child {
|
||||
position: relative !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 34px !important;
|
||||
height: 34px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
color: #fff !important;
|
||||
font-style: normal !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 34px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-spr {
|
||||
min-width: 28px !important;
|
||||
padding: 0 2px !important;
|
||||
border-color: transparent !important;
|
||||
background: transparent !important;
|
||||
color: #98a2b3 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-disabled,
|
||||
.layui-laypage .layui-disabled:hover,
|
||||
.txl-pagination .page-btn.disabled,
|
||||
.txl-pagination .page-btn.disabled:hover {
|
||||
border-color: #edf0f5 !important;
|
||||
background: #f7f8fb !important;
|
||||
color: #b8c0cc !important;
|
||||
box-shadow: none !important;
|
||||
cursor: not-allowed !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.layui-laypage input,
|
||||
.layui-laypage button,
|
||||
.layui-laypage select {
|
||||
height: 34px !important;
|
||||
border-radius: 7px !important;
|
||||
border-color: #dfe5ef !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.layui-laypage button {
|
||||
padding: 0 14px !important;
|
||||
background: var(--primary, #102b6a) !important;
|
||||
color: #fff !important;
|
||||
border-color: var(--primary, #102b6a) !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.txl-pagination .page-btn.active {
|
||||
border-color: var(--primary, #102b6a) !important;
|
||||
background: var(--primary, #102b6a) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 6px 14px rgba(16, 43, 106, 0.22);
|
||||
}
|
||||
|
||||
.cxz-status-hit {
|
||||
color: #27ae60;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cxz-status-miss {
|
||||
color: #e74c3c;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cxz-status-opened {
|
||||
color: var(--primary, #102b6a);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cxz-status-pending {
|
||||
color: var(--orange, #f15a22);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cxz-recommend-locked {
|
||||
color: var(--text-muted, #6b7280);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cxz-data-table th:nth-child(1),
|
||||
.cxz-data-table th:nth-child(2),
|
||||
.cxz-data-table th:nth-child(4),
|
||||
.cxz-data-table th:nth-child(7),
|
||||
.cxz-data-table th:nth-child(9),
|
||||
.cxz-data-table td:nth-child(1),
|
||||
.cxz-data-table td:nth-child(2),
|
||||
.cxz-data-table td:nth-child(4),
|
||||
.cxz-data-table td:nth-child(7),
|
||||
.cxz-data-table td:nth-child(9) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-data-table td:nth-child(1),
|
||||
.cxz-data-table td:nth-child(2) {
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.cxz-data-table td:nth-child(9) {
|
||||
min-width: 72px;
|
||||
}
|
||||
|
||||
.cxz-data-table th:nth-child(4),
|
||||
.cxz-data-table td:nth-child(4) {
|
||||
min-width: 190px;
|
||||
}
|
||||
|
||||
.cxz-number-wrap {
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
max-width: 360px;
|
||||
padding: 2px 0;
|
||||
overflow: visible;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(16, 43, 106, 0.22) transparent;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
button.cxz-number-wrap {
|
||||
min-height: 25px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--overflow {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--fit {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--overflow:hover .cxz-number-ball {
|
||||
border-color: rgba(16, 43, 106, 0.32);
|
||||
background: #fff8f4;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--recommend {
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
max-width: 280px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-number-preview {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: nowrap;
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.cxz-number-preview--short {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--fit {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--fit .cxz-number-preview {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--fit .cxz-number-more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--overflow .cxz-number-preview {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--overflow .cxz-number-preview--full {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--overflow .cxz-number-preview--short {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--recommend .cxz-number-group {
|
||||
flex: 0 0 auto;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--recommend .cxz-number-group + .cxz-number-group::before,
|
||||
.cxz-number-wrap--popup .cxz-number-group + .cxz-number-group::before {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
margin: 0 2px;
|
||||
border-radius: 1px;
|
||||
background: #ffd5c6;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--open {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--open-1 {
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--open-1 .cxz-number-group {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--open-2 {
|
||||
width: 256px;
|
||||
max-width: 256px;
|
||||
}
|
||||
|
||||
.cxz-number-wrap::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.cxz-number-wrap::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 43, 106, 0.22);
|
||||
}
|
||||
|
||||
.cxz-number-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.cxz-data-table td .cxz-number-ball {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 !important;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(241, 90, 34, 0.22);
|
||||
background: #fff4ef;
|
||||
box-shadow: none;
|
||||
color: var(--orange, #f15a22);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cxz-data-table td .cxz-number-text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 42px;
|
||||
height: 25px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(241, 90, 34, 0.22);
|
||||
border-radius: 999px;
|
||||
background: #fff4ef;
|
||||
color: var(--orange, #f15a22);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 23px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-data-table td .cxz-number-wrap--open .cxz-number-ball {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--open .cxz-number-group {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cxz-data-table td .bule-q.cxz-number-ball {
|
||||
border-color: rgba(16, 43, 106, 0.22);
|
||||
background: #eef4ff;
|
||||
color: var(--primary, #102b6a);
|
||||
}
|
||||
|
||||
.cxz-data-table td .cxz-number-ball--wrong {
|
||||
position: relative;
|
||||
border-color: rgba(231, 76, 60, 0.52);
|
||||
background: #fff;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.cxz-data-table td .cxz-number-ball--wrong::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
|
||||
.cxz-number-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 25px;
|
||||
padding: 0 7px;
|
||||
border-radius: 999px;
|
||||
background: #f3f6fb;
|
||||
color: #667085;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 25px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-number-empty {
|
||||
color: var(--text-muted, #6b7280);
|
||||
}
|
||||
|
||||
.cxz-number-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
height: 25px;
|
||||
margin-left: 0;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dfe5ef;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: var(--primary, #102b6a);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 23px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cxz-number-more:hover {
|
||||
border-color: var(--primary, #102b6a);
|
||||
background: #f7f9ff;
|
||||
}
|
||||
|
||||
.cxz-number-popup {
|
||||
padding: 20px 22px 22px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.cxz-number-popup-title {
|
||||
margin-bottom: 14px;
|
||||
color: var(--primary, #102b6a);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--popup {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cxz-pagination,
|
||||
.uc-pagination,
|
||||
.je-pagination,
|
||||
.txl-pagination,
|
||||
#articlePage {
|
||||
gap: 5px !important;
|
||||
padding: 14px 8px !important;
|
||||
min-height: 58px;
|
||||
}
|
||||
|
||||
.layui-laypage {
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.layui-laypage a,
|
||||
.layui-laypage span,
|
||||
.txl-pagination .page-btn {
|
||||
min-width: 30px !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
padding: 0 !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-prev,
|
||||
.layui-laypage .layui-laypage-next {
|
||||
min-width: 66px !important;
|
||||
width: auto !important;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr,
|
||||
.layui-laypage .layui-laypage-curr em:last-child {
|
||||
min-width: 30px !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
.cxz-number-wrap {
|
||||
max-width: 300px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--recommend {
|
||||
max-width: 238px;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--overflow .cxz-number-preview {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--open {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cxz-number-wrap--open-2 {
|
||||
width: 246px;
|
||||
max-width: 246px;
|
||||
}
|
||||
|
||||
.cxz-number-group {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cxz-data-table td .cxz-number-ball {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cxz-data-table td .cxz-number-text {
|
||||
height: 23px;
|
||||
min-width: 38px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,984 @@
|
||||
/* ============================================================
|
||||
public.css - Shared styles across all pages
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--primary: #102b6a;
|
||||
--primary-light: #1a3f8f;
|
||||
--primary-hover: #0d224f;
|
||||
--navy: #102b6a;
|
||||
--navy-deep: #08183c;
|
||||
--gold: #fdb933;
|
||||
--gold-dark: #f5a623;
|
||||
--orange: #f15a22;
|
||||
--red: #e74c3c;
|
||||
--red-dark: #c0392b;
|
||||
--purple: #7b2d8e;
|
||||
--green: #27ae60;
|
||||
--white: #ffffff;
|
||||
--bg: #eef3fb;
|
||||
--bg-light: #f4f6fb;
|
||||
--bg-body: #f5f6fa;
|
||||
--text: #1f2a44;
|
||||
--text-soft: #60708c;
|
||||
--text-dark: #1a1a2e;
|
||||
--text-default: #333333;
|
||||
--text-muted: #6b7280;
|
||||
--text-light: #999999;
|
||||
--border: rgba(16, 43, 106, 0.1);
|
||||
--border-light: #e5e7eb;
|
||||
--border-lighter: #f0f0f0;
|
||||
--shadow: 0 20px 48px rgba(16, 43, 106, 0.08);
|
||||
--shadow-soft: 0 12px 26px rgba(16, 43, 106, 0.08);
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 18px;
|
||||
--radius-lg: 28px;
|
||||
--max-width: 1480px;
|
||||
--font-main: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
1. Reset & Base
|
||||
---------------------------------------------------------- */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-main);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(253, 185, 51, 0.08), transparent 24%),
|
||||
radial-gradient(circle at top right, rgba(16, 43, 106, 0.09), transparent 20%),
|
||||
linear-gradient(180deg, #f9fbff 0%, #edf2fb 42%, #eef3fb 100%);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
2. Topbar (unified header)
|
||||
---------------------------------------------------------- */
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background: linear-gradient(90deg, rgba(8, 24, 60, .98), rgba(16, 43, 106, .98) 45%, rgba(15, 70, 126, .98));
|
||||
box-shadow: 0 14px 40px rgba(8, 24, 60, .28);
|
||||
}
|
||||
|
||||
.topbar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, rgba(253, 185, 51, .95), transparent);
|
||||
}
|
||||
|
||||
.topbar__inner {
|
||||
width: min(var(--max-width), calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
min-height: 82px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.topbar__logo {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.topbar__nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topbar__nav-link {
|
||||
position: relative;
|
||||
padding: 12px 18px;
|
||||
border-radius: 999px;
|
||||
color: rgba(255, 255, 255, .82);
|
||||
font-size: 15px;
|
||||
transition: .24s ease;
|
||||
}
|
||||
|
||||
.topbar__nav-link:hover,
|
||||
.topbar__nav-link.is-active {
|
||||
color: var(--white);
|
||||
background: rgba(255, 255, 255, .08);
|
||||
}
|
||||
|
||||
.topbar__nav-link.is-active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 4px;
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #ffd16a, var(--gold));
|
||||
}
|
||||
|
||||
.topbar__user,
|
||||
.topbar__guest,
|
||||
.topbar__logged {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.topbar__profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-radius: 999px;
|
||||
padding: 4px 8px;
|
||||
transition: .24s ease;
|
||||
}
|
||||
|
||||
.topbar__profile:hover {
|
||||
background: rgba(255, 255, 255, .08);
|
||||
}
|
||||
|
||||
.topbar__btn {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 10px 18px;
|
||||
cursor: pointer;
|
||||
transition: .24s ease;
|
||||
}
|
||||
|
||||
.topbar__btn--ghost {
|
||||
color: var(--white);
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, .22);
|
||||
}
|
||||
|
||||
.topbar__btn--primary {
|
||||
color: var(--navy-deep);
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #ffd26b, var(--gold));
|
||||
box-shadow: 0 10px 22px rgba(253, 185, 51, .24);
|
||||
}
|
||||
|
||||
.topbar__btn--logout {
|
||||
color: rgba(255, 255, 255, .82);
|
||||
background: rgba(255, 255, 255, .06);
|
||||
border: 1px solid rgba(255, 255, 255, .14);
|
||||
}
|
||||
|
||||
.topbar__avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(253, 185, 51, .7);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.topbar__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.topbar__uname {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.topbar__ubadge {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #ffd26b, var(--gold));
|
||||
color: var(--navy-deep);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
3. Site Footer (unified footer)
|
||||
---------------------------------------------------------- */
|
||||
.site-footer {
|
||||
width: min(var(--max-width), calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.site-footer__inner {
|
||||
padding: 24px 28px;
|
||||
border-radius: 28px;
|
||||
border: 1px solid rgba(16, 43, 106, .08);
|
||||
background: linear-gradient(135deg, rgba(8, 24, 60, .98), rgba(16, 43, 106, .96) 55%, rgba(17, 74, 126, .96));
|
||||
}
|
||||
|
||||
.site-footer__logo {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.site-footer__inner p {
|
||||
margin: 16px 0 0;
|
||||
color: rgba(255, 255, 255, .8);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.site-footer__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
margin-top: 18px;
|
||||
color: rgba(255, 255, 255, .56);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.site-footer__meta a {
|
||||
color: rgba(255, 255, 255, .56);
|
||||
}
|
||||
|
||||
.site-footer__meta a:hover {
|
||||
color: rgba(255, 255, 255, .86);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
4. Ball Styles (unified ball system)
|
||||
---------------------------------------------------------- */
|
||||
.ball {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
color: var(--white);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.ball--compact {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.ball--red {
|
||||
background: linear-gradient(180deg, #ff6d76, #f24858);
|
||||
}
|
||||
|
||||
.ball--blue {
|
||||
background: linear-gradient(180deg, #5b96ff, #306ee2);
|
||||
}
|
||||
|
||||
.ball--orange {
|
||||
background: linear-gradient(180deg, #ffb35f, #ff8c1a);
|
||||
}
|
||||
|
||||
.ball--green {
|
||||
background: linear-gradient(180deg, #45d59e, #1ea871);
|
||||
}
|
||||
|
||||
.ball--purple {
|
||||
background: linear-gradient(180deg, #a07cff, #7c57ef);
|
||||
}
|
||||
|
||||
.ball--gold {
|
||||
background: linear-gradient(180deg, #ffd35a, #f1a61a);
|
||||
}
|
||||
|
||||
.ball--teal {
|
||||
background: linear-gradient(180deg, #40d4ce, #119f9a);
|
||||
}
|
||||
|
||||
.ball--violet {
|
||||
background: linear-gradient(180deg, #c68cff, #8f57ea);
|
||||
}
|
||||
|
||||
.ball--empty {
|
||||
background: #dbe4f2;
|
||||
color: #7d8ba4;
|
||||
}
|
||||
|
||||
/* Legacy ball styles (compat) */
|
||||
.red-q {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #f15a22, #e74c3c);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin: 1px 2px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 6px rgba(241, 90, 34, 0.35);
|
||||
}
|
||||
|
||||
.bule-q {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #102b6a, #3b6fd4);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin: 1px 2px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 6px rgba(16, 43, 106, 0.35);
|
||||
}
|
||||
|
||||
.table-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.table-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
5. Main Container
|
||||
---------------------------------------------------------- */
|
||||
.cxz-main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
6. Breadcrumb
|
||||
---------------------------------------------------------- */
|
||||
.cxz-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
min-height: 48px;
|
||||
padding: 14px 0 16px;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.cxz-breadcrumb a {
|
||||
color: #5f6f86;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.cxz-breadcrumb a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.cxz-breadcrumb .sep {
|
||||
margin: 0 1px;
|
||||
color: #b8c1cf;
|
||||
}
|
||||
|
||||
.cxz-breadcrumb span:not(.sep) {
|
||||
color: #34425a;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
7. Lottery Tabs
|
||||
---------------------------------------------------------- */
|
||||
.cxz-lottery-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 16px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cxz-lottery-tab {
|
||||
padding: 8px 22px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cxz-lottery-tab:hover {
|
||||
color: #102b6a;
|
||||
border-color: #102b6a;
|
||||
background: #f4f6fb;
|
||||
}
|
||||
|
||||
.cxz-lottery-tab.active {
|
||||
color: #fff;
|
||||
background: #102b6a;
|
||||
border-color: #102b6a;
|
||||
box-shadow: 0 2px 8px rgba(16, 43, 106, 0.25);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
8. Section Header
|
||||
---------------------------------------------------------- */
|
||||
.cxz-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cxz-section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
position: relative;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.cxz-section-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
background: linear-gradient(180deg, #102b6a, #fdb933);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.cxz-section-more {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.cxz-section-more:hover {
|
||||
color: #102b6a;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
9. Data Tables
|
||||
---------------------------------------------------------- */
|
||||
.cxz-table-box {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cxz-table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.cxz-table-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.cxz-data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.cxz-data-table thead {
|
||||
background: #f4f6fb;
|
||||
}
|
||||
|
||||
.cxz-data-table th {
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.cxz-data-table td {
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.cxz-data-table tbody tr {
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.cxz-data-table tbody tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
10. Pagination
|
||||
---------------------------------------------------------- */
|
||||
.cxz-pagination {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
11. CommonUtil Compat (ads & links)
|
||||
---------------------------------------------------------- */
|
||||
.PublicAdvertising {
|
||||
background: #fff;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.PublicAdvertisingUl {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.PublicAdvertisingLi {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.PublicAdvertisingLi a {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
background: #f4f6fb;
|
||||
}
|
||||
|
||||
.PublicAdvertisingLi a:hover {
|
||||
color: #102b6a;
|
||||
background: #eef1f8;
|
||||
}
|
||||
|
||||
.PublicAdvertisingImg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
border-radius: 6px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.PublicAdvertisingImg:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 4px 16px rgba(16, 43, 106, 0.1);
|
||||
}
|
||||
|
||||
.FooterPublicFriendship {
|
||||
background: #fff;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.FooterPublicFriendship .other-box {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.FooterPublicFriendship .link-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.FooterPublicFriendship .other-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #102b6a;
|
||||
}
|
||||
|
||||
.FooterPublicFriendship .link-listUl {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.FooterPublicFriendship .link-listLi {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.FooterPublicFriendship .link-listLi a {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
background: #f4f6fb;
|
||||
}
|
||||
|
||||
.FooterPublicFriendship .link-listLi a:hover {
|
||||
color: #102b6a;
|
||||
background: #eef1f8;
|
||||
}
|
||||
|
||||
.FooterPublicAdvertising {
|
||||
background: #f4f6fb;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
12. Gotop Button
|
||||
---------------------------------------------------------- */
|
||||
.gotop {
|
||||
position: fixed;
|
||||
right: 28px;
|
||||
bottom: 28px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: var(--navy-deep);
|
||||
background: linear-gradient(135deg, #ffd26b, var(--gold));
|
||||
box-shadow: 0 16px 28px rgba(253, 185, 51, .3);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: .24s ease;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.gotop.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
13. Modal (history query)
|
||||
---------------------------------------------------------- */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30px;
|
||||
background: rgba(4, 15, 36, .58);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
.modal-mask.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
width: min(1080px, 100%);
|
||||
max-height: 82vh;
|
||||
overflow: hidden;
|
||||
border-radius: 28px;
|
||||
background: #fdfefe;
|
||||
box-shadow: 0 30px 80px rgba(4, 15, 36, .35);
|
||||
}
|
||||
|
||||
.modal-box__head {
|
||||
padding: 22px 24px;
|
||||
color: var(--white);
|
||||
background: linear-gradient(90deg, #08183c, #102b6a, #164d86);
|
||||
}
|
||||
|
||||
.modal-box__head strong {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.modal-box__head p {
|
||||
margin: 6px 0 0;
|
||||
color: rgba(255, 255, 255, .72);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.modal-box__head button {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .08);
|
||||
color: var(--white);
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-box__filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 18px 24px;
|
||||
background: #f3f7fe;
|
||||
}
|
||||
|
||||
.modal-box__filter span {
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.modal-box__filter select,
|
||||
.modal-input {
|
||||
height: 44px;
|
||||
padding: 0 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(16, 43, 106, .12);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.modal-box__body {
|
||||
max-height: calc(82vh - 146px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.modal-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
padding: 14px 16px;
|
||||
background: #eef4fe;
|
||||
color: var(--navy);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-table td {
|
||||
padding: 14px 16px;
|
||||
border-top: 1px solid rgba(16, 43, 106, .08);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.modal-table .history-code {
|
||||
color: var(--navy);
|
||||
font-weight: 700;
|
||||
font-family: Consolas, "SFMono-Regular", monospace;
|
||||
}
|
||||
|
||||
.modal-table .is-empty {
|
||||
text-align: center;
|
||||
color: var(--text-soft);
|
||||
padding: 28px 16px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
14. Scrollbar
|
||||
---------------------------------------------------------- */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(16, 43, 106, .2);
|
||||
border-radius: 999px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(16, 43, 106, .2) #f1f1f1;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
15. Responsive
|
||||
---------------------------------------------------------- */
|
||||
@media (max-width: 1024px) {
|
||||
.topbar__inner {
|
||||
min-height: 68px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.topbar__nav-link {
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-main {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.PublicAdvertisingUl {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.topbar__inner {
|
||||
flex-wrap: wrap;
|
||||
min-height: auto;
|
||||
padding: 10px 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topbar__nav {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
padding-bottom: 4px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.topbar__nav-link {
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.topbar__btn {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-main {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.cxz-section-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cxz-lottery-tabs {
|
||||
gap: 6px;
|
||||
padding: 12px 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cxz-lottery-tab {
|
||||
padding: 6px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-data-table th,
|
||||
.cxz-data-table td {
|
||||
padding: 10px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.red-q,
|
||||
.bule-q {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ball {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.ball--compact {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.PublicAdvertisingUl {
|
||||
padding: 0 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.PublicAdvertisingLi a {
|
||||
padding: 3px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.cxz-breadcrumb {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cxz-pagination {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.site-footer__inner {
|
||||
padding: 18px 16px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,464 @@
|
||||
.page-main,
|
||||
.page-wrap {
|
||||
width: min(var(--max-width), calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.publish-card,
|
||||
.cxz-form-card {
|
||||
width: 100%;
|
||||
margin: 26px auto 54px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.publish-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding: 28px 34px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: linear-gradient(120deg, #ffffff 0%, #f6f8fd 70%, #fff9e8 100%);
|
||||
}
|
||||
|
||||
.publish-card-header-h2,
|
||||
.cxz-form-title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
color: var(--primary);
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.publish-card-header-h2::before,
|
||||
.cxz-form-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, var(--gold), var(--orange));
|
||||
}
|
||||
|
||||
.publish-card-header p {
|
||||
margin: 8px 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.publish-card-body,
|
||||
.cxz-form-body {
|
||||
padding: 28px 34px 34px;
|
||||
}
|
||||
|
||||
.publish-tab-bar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
margin: 0 0 24px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.publish-tab-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
min-height: 48px;
|
||||
border-right: 1px solid var(--border-light);
|
||||
background: transparent;
|
||||
color: #34425a;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.publish-tab-item:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.publish-tab-item.active {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.publish-tab-item.layui-disabled,
|
||||
.publish-tab-item:disabled {
|
||||
color: #a8b2c2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.publish-tip-box {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid #ffe2b1;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff9ef;
|
||||
}
|
||||
|
||||
.publish-tip-item {
|
||||
margin: 0 0 8px;
|
||||
color: #674719;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.publish-tip-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-row,
|
||||
.cxz-form-group {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.form-row label,
|
||||
.cxz-form-label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: var(--primary);
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.form-select,
|
||||
.cxz-form-select,
|
||||
.form-input,
|
||||
.cxz-form-input,
|
||||
.cxz-form-textarea {
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-light);
|
||||
color: var(--text-dark);
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.form-select,
|
||||
.cxz-form-select,
|
||||
.form-input,
|
||||
.cxz-form-input {
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.cxz-form-textarea {
|
||||
min-height: 160px;
|
||||
padding: 14px;
|
||||
resize: vertical;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.form-select:focus,
|
||||
.cxz-form-select:focus,
|
||||
.form-input:focus,
|
||||
.cxz-form-input:focus,
|
||||
.cxz-form-textarea:focus {
|
||||
border-color: var(--primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.1);
|
||||
}
|
||||
|
||||
.form-select--full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-input-with-count {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input-with-count .form-input {
|
||||
padding-right: 82px;
|
||||
}
|
||||
|
||||
.form-input-count {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.submit-row {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.submit-btn,
|
||||
.cxz-submit-btn {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 22px rgba(16, 43, 106, 0.18);
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.submit-btn:hover,
|
||||
.cxz-submit-btn:hover {
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.submit-btn:active,
|
||||
.cxz-submit-btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.submit-btn:disabled,
|
||||
.cxz-submit-btn:disabled {
|
||||
background: #a9b4c7;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cxz-select-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cxz-pool-section {
|
||||
margin: 22px 0;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fafcff;
|
||||
}
|
||||
|
||||
.cxz-pool-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
color: var(--primary);
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.cxz-pool-grid,
|
||||
.Redball,
|
||||
.Blueball,
|
||||
.mianfeiThreeTextSelectBox #jieguo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cxz-pool-item,
|
||||
.cxz-pool-ball,
|
||||
.ball,
|
||||
.TypeOption,
|
||||
#resetBtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 42px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
color: var(--text-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.cxz-pool-item:hover,
|
||||
.cxz-pool-ball:hover,
|
||||
.ball:hover,
|
||||
.TypeOption:hover,
|
||||
#resetBtn:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.cxz-pool-item.selected,
|
||||
.cxz-pool-ball.selected,
|
||||
.ball.selected,
|
||||
.TypeOption.selected,
|
||||
.red.selected,
|
||||
.BlueSelected {
|
||||
border-color: var(--orange);
|
||||
background: var(--orange);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blue.selected,
|
||||
.Blueball .selected {
|
||||
border-color: #1d67d6;
|
||||
background: #1d67d6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cxz-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin: 20px 0;
|
||||
border: 1px dashed var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fbfcff;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cxz-empty-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 16px;
|
||||
background: #edf2fb;
|
||||
color: var(--primary);
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.cxz-empty-text {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cxz-empty-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 110px;
|
||||
height: 36px;
|
||||
padding: 0 18px;
|
||||
border-radius: 18px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cxz-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.cxz-pagination button,
|
||||
.cxz-pagination a,
|
||||
.cxz-pagination span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
color: var(--text-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cxz-pagination .active,
|
||||
.cxz-pagination button.active {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cxz-pagination .disabled,
|
||||
.cxz-pagination button:disabled {
|
||||
background: var(--bg-light);
|
||||
color: #aab4c4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.publish-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.publish-editor-textarea {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.publish-footer-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.publish-footer-link:hover {
|
||||
color: #ffe39a;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-main,
|
||||
.page-wrap {
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
.publish-card,
|
||||
.cxz-form-card {
|
||||
margin: 18px auto 32px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.publish-card-header,
|
||||
.publish-card-body,
|
||||
.cxz-form-body {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.publish-card-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.publish-tab-bar,
|
||||
.cxz-select-row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.publish-tab-item {
|
||||
width: 100%;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.publish-tab-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,383 @@
|
||||
/* ============================================================
|
||||
static.css - Static policy pages (yinsixieyi.html, yonghuxieyi.html)
|
||||
Uses CSS variables from public.css
|
||||
============================================================ */
|
||||
|
||||
/* ============================
|
||||
POLICY PAGE - Overall layout
|
||||
============================ */
|
||||
.policy-page {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px 60px;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
POLICY CARD - Main container
|
||||
============================ */
|
||||
.policy-card {
|
||||
max-width: 900px;
|
||||
margin: 0 auto 40px;
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.policy-card-header {
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--purple) 100%);
|
||||
padding: 36px 40px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.policy-card-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--gold), var(--orange));
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.policy-card-title {
|
||||
font-size: 26px;
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.policy-card-header p {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#articleTitle {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
POLICY CARD BODY
|
||||
============================ */
|
||||
.policy-card-body {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.policy-card-body h1,
|
||||
.policy-card-body h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin: 32px 0 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid var(--bg-light);
|
||||
}
|
||||
|
||||
.policy-card-body h2:first-child,
|
||||
.policy-card-body h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.policy-card-body h3 {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-light);
|
||||
margin: 24px 0 12px;
|
||||
}
|
||||
|
||||
.policy-card-body p {
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.policy-card-body ul,
|
||||
.policy-card-body ol {
|
||||
padding-left: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.policy-card-body li {
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
POLICY SECTION - Structured content
|
||||
============================ */
|
||||
.policy-section {
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.policy-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.policy-section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin: 0 0 14px;
|
||||
padding-left: 12px;
|
||||
border-left: 4px solid var(--gold);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.policy-section-content {
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.policy-section-content p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.policy-section-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.policy-section-content ul,
|
||||
.policy-section-content ol {
|
||||
padding-left: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.policy-section-content li {
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.policy-section-content strong,
|
||||
.policy-section-content b {
|
||||
color: var(--text-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.policy-section-content a {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.policy-section-content a:hover {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
UPDATE DATE
|
||||
============================ */
|
||||
.policy-update-date {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.policy-update-date .date-label {
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.policy-update-date .date-value {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
PAGE HEADER / NAV (shared)
|
||||
============================ */
|
||||
.page-header {
|
||||
width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.page-header .logo-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-header .logo-wrap img {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.page-header .logo-text {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.page-header .logo-text span {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.page-header .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header .header-right a {
|
||||
font-size: 14px;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-header .header-right a:hover {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
width: 100%;
|
||||
background: var(--primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-nav-inner {
|
||||
width: 1400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.page-nav-inner a {
|
||||
width: 140px;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-nav-inner a:hover {
|
||||
background: rgba(253, 185, 51, 0.2);
|
||||
}
|
||||
|
||||
.page-nav-inner a.active {
|
||||
background: rgba(253, 185, 51, 0.3);
|
||||
}
|
||||
|
||||
.page-main {
|
||||
width: 1400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
FOOTER
|
||||
============================ */
|
||||
.FooterRecord {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.FooterRecord .fotter-box {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.FooterRecord .fotter-center {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
RESPONSIVE STYLES
|
||||
============================ */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.page-header,
|
||||
.page-nav-inner,
|
||||
.page-main {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.policy-card-header {
|
||||
padding: 28px 24px;
|
||||
}
|
||||
|
||||
.policy-card-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.policy-card-body {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.policy-section-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.policy-section-content,
|
||||
.policy-card-body p,
|
||||
.policy-card-body li {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.policy-page {
|
||||
padding: 0 8px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.policy-card-header {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.policy-card-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.policy-card-body {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.policy-section {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.policy-section-title {
|
||||
font-size: 15px;
|
||||
padding-left: 8px;
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
.page-header .logo-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.page-nav-inner a {
|
||||
font-size: 13px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,371 @@
|
||||
.tx-balance-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.tx-balance-card {
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 18px 16px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.tx-balance-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 21px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.tx-hidden {
|
||||
display: none;
|
||||
}
|
||||
#loggedInBox:not(.tx-hidden) {
|
||||
display: flex;
|
||||
}
|
||||
.tx-balance-icon.account {
|
||||
background: rgba(16, 43, 106, 0.08);
|
||||
color: var(--primary);
|
||||
}
|
||||
.tx-balance-icon.sales {
|
||||
background: rgba(241, 90, 34, 0.1);
|
||||
color: var(--orange);
|
||||
}
|
||||
.tx-balance-icon.expert {
|
||||
background: rgba(123, 45, 142, 0.1);
|
||||
color: var(--purple);
|
||||
}
|
||||
.tx-balance-icon.withdrawable {
|
||||
background: rgba(35, 175, 92, 0.1);
|
||||
color: #18a058;
|
||||
}
|
||||
.tx-balance-icon.frozen {
|
||||
background: rgba(90, 105, 135, 0.1);
|
||||
color: #5a6987;
|
||||
}
|
||||
.tx-tab-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tx-label-tight {
|
||||
margin: 0;
|
||||
}
|
||||
.tx-beian-link {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.tx-balance-info {
|
||||
min-width: 0;
|
||||
}
|
||||
.tx-balance-label {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.tx-balance-value {
|
||||
color: var(--text-dark);
|
||||
font-size: 23px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tx-balance-value .unit {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.tx-panel {
|
||||
display: none;
|
||||
}
|
||||
.tx-panel.active {
|
||||
display: block;
|
||||
}
|
||||
.tx-choice-grid,
|
||||
.tx-method-grid,
|
||||
.tx-account-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.tx-choice-card,
|
||||
.tx-method-card,
|
||||
.tx-account-card {
|
||||
border: 2px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-light);
|
||||
padding: 15px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.22s;
|
||||
min-height: 74px;
|
||||
}
|
||||
.tx-choice-card:hover,
|
||||
.tx-method-card:hover,
|
||||
.tx-account-card:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.tx-choice-card.selected,
|
||||
.tx-method-card.selected,
|
||||
.tx-account-card.selected {
|
||||
border-color: var(--primary);
|
||||
background: rgba(16, 43, 106, 0.05);
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.1);
|
||||
}
|
||||
.tx-choice-title,
|
||||
.tx-method-title,
|
||||
.tx-account-title {
|
||||
color: var(--text-dark);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tx-choice-desc,
|
||||
.tx-method-desc,
|
||||
.tx-account-desc {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tx-account-title em {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 185, 0, 0.16);
|
||||
color: var(--orange);
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tx-available {
|
||||
padding: 16px 18px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(241, 90, 34, 0.06);
|
||||
border: 1px solid rgba(241, 90, 34, 0.18);
|
||||
color: var(--orange);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tx-amount-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.tx-amount-row .cxz-form-input {
|
||||
flex: 1;
|
||||
}
|
||||
.tx-all-btn,
|
||||
.tx-small-btn {
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
padding: 0 22px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tx-small-btn {
|
||||
height: 40px;
|
||||
padding: 0 18px;
|
||||
}
|
||||
.tx-account-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tx-link-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--primary);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tx-account-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--primary);
|
||||
}
|
||||
.tx-account-actions span {
|
||||
cursor: pointer;
|
||||
}
|
||||
.tx-empty {
|
||||
grid-column: 1 / -1;
|
||||
color: var(--text-muted);
|
||||
border: 1px dashed var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.tx-add-panel {
|
||||
display: none;
|
||||
margin-top: 14px;
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px dashed rgba(16, 43, 106, 0.25);
|
||||
background: rgba(16, 43, 106, 0.04);
|
||||
}
|
||||
.tx-add-panel.show {
|
||||
display: block;
|
||||
}
|
||||
.tx-add-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.tx-add-grid .full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.tx-bind-mode {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 43, 106, 0.06);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tx-bind-mode button {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
padding: 7px 14px;
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tx-bind-mode button.active {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
.tx-upload-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.tx-upload-name,
|
||||
.tx-note {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.tx-qrcode-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-light);
|
||||
object-fit: cover;
|
||||
background: #fff;
|
||||
display: none;
|
||||
}
|
||||
.tx-qrcode-preview.is-visible {
|
||||
display: block;
|
||||
}
|
||||
.tx-save-account-btn {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.tx-modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18px;
|
||||
background: rgba(10, 20, 40, 0.48);
|
||||
}
|
||||
.tx-modal-mask.show {
|
||||
display: flex;
|
||||
}
|
||||
.tx-modal {
|
||||
width: min(620px, 100%);
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
.tx-modal-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
.tx-modal-title {
|
||||
color: var(--text-dark);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tx-modal-close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
.tx-modal-body {
|
||||
padding: 20px 22px 22px;
|
||||
}
|
||||
.tx-modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.tx-secondary-btn {
|
||||
height: 40px;
|
||||
padding: 0 18px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-light);
|
||||
background: #fff;
|
||||
color: var(--text-dark);
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tx-check-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-dark);
|
||||
font-size: 13px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
@media (max-width: 1120px) {
|
||||
.tx-balance-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.tx-balance-grid,
|
||||
.tx-choice-grid,
|
||||
.tx-method-grid,
|
||||
.tx-account-grid,
|
||||
.tx-add-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.tx-amount-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.tx-all-btn {
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,294 @@
|
||||
.tl-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#loggedInBox:not(.tl-hidden) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tl-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 24px 28px 28px;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
.tl-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.tl-title {
|
||||
position: relative;
|
||||
color: var(--text-dark);
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 1.3;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.tl-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
background: var(--orange);
|
||||
}
|
||||
|
||||
.tl-desc {
|
||||
margin-top: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tl-back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 38px;
|
||||
padding: 0 18px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tl-back-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tl-filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px 34px;
|
||||
margin-top: 18px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: #f8fafd;
|
||||
}
|
||||
|
||||
.tl-filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tl-filter-group > span {
|
||||
color: var(--text-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tl-segment {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tl-segment-btn {
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 999px;
|
||||
background: var(--bg-light);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tl-segment-btn.active,
|
||||
.tl-segment-btn:hover {
|
||||
border-color: var(--primary);
|
||||
background: rgba(16, 43, 106, 0.08);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.tl-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.tl-summary-item {
|
||||
padding: 13px 16px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.tl-summary-item span {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tl-summary-item strong {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: var(--text-dark);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tl-table-wrap {
|
||||
margin-top: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tl-table {
|
||||
width: 100%;
|
||||
min-width: 980px;
|
||||
border-collapse: collapse;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.tl-table th {
|
||||
background: #f3f6fb;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-align: left;
|
||||
padding: 14px 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tl-table td {
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
color: var(--text-dark);
|
||||
font-size: 13px;
|
||||
padding: 15px 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tl-table tr:hover td {
|
||||
background: rgba(16, 43, 106, 0.03);
|
||||
}
|
||||
|
||||
.tl-table-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tl-amount {
|
||||
color: #e04828;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tl-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 58px;
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tl-status.reviewing {
|
||||
background: rgba(255, 185, 0, 0.15);
|
||||
color: #b77900;
|
||||
}
|
||||
|
||||
.tl-status.success {
|
||||
background: rgba(35, 175, 92, 0.12);
|
||||
color: #15824a;
|
||||
}
|
||||
|
||||
.tl-status.failed {
|
||||
background: rgba(224, 72, 40, 0.12);
|
||||
color: #c4381d;
|
||||
}
|
||||
|
||||
.tl-status.cancelled,
|
||||
.tl-status.normal {
|
||||
background: rgba(90, 105, 135, 0.12);
|
||||
color: #5a6987;
|
||||
}
|
||||
|
||||
.tl-empty {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 220px;
|
||||
border: 1px dashed var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fbfcff;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.tl-empty.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tl-empty-icon {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(16, 43, 106, 0.08);
|
||||
color: var(--primary);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tl-empty-title {
|
||||
margin-top: 14px;
|
||||
color: var(--text-dark);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tl-empty-desc {
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tl-pagination {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.tl-pagination.is-hidden,
|
||||
.tl-summary.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tl-beian-link {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.tl-card {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.tl-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tl-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,437 @@
|
||||
.tg-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#loggedInBox:not(.tg-hidden) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tg-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
|
||||
gap: 20px;
|
||||
align-items: stretch;
|
||||
padding: 28px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(135deg, #102b6a 0%, #194f82 100%);
|
||||
color: #fff;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.tg-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 185, 0, 0.16);
|
||||
color: #ffd36a;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tg-hero h1 {
|
||||
margin: 16px 0 10px;
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.tg-hero p {
|
||||
max-width: 720px;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.tg-hero-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.tg-hero-tags span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 30px;
|
||||
padding: 0 13px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tg-share-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
padding: 22px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.tg-share-title,
|
||||
.tg-title {
|
||||
position: relative;
|
||||
color: var(--text-dark);
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.tg-share-title::before,
|
||||
.tg-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
background: var(--orange);
|
||||
}
|
||||
|
||||
.tg-share-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.tg-share-row input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 42px;
|
||||
padding: 0 13px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
background: #f5f7fb;
|
||||
color: var(--text-dark);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tg-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 42px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tg-btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(16, 43, 106, 0.18);
|
||||
}
|
||||
|
||||
.tg-btn-light {
|
||||
border-color: var(--border-light);
|
||||
background: #fff;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.tg-invite-code {
|
||||
margin-top: 12px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tg-invite-code strong {
|
||||
color: var(--primary);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tg-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 14px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.tg-stat {
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.tg-stat span,
|
||||
.tg-stat em {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tg-stat strong {
|
||||
display: block;
|
||||
margin: 8px 0 7px;
|
||||
color: var(--primary);
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tg-card,
|
||||
.tg-rule-card {
|
||||
margin-top: 18px;
|
||||
padding: 24px 28px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.tg-card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.tg-desc {
|
||||
margin-top: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tg-segment {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tg-segment button {
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 999px;
|
||||
background: #f7f9fc;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tg-segment button.active,
|
||||
.tg-segment button:hover {
|
||||
border-color: var(--primary);
|
||||
background: rgba(16, 43, 106, 0.08);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.tg-table-wrap {
|
||||
margin-top: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tg-table {
|
||||
width: 100%;
|
||||
min-width: 860px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.tg-table th {
|
||||
padding: 14px 16px;
|
||||
background: #f3f6fb;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tg-table td {
|
||||
padding: 15px 16px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
color: var(--text-dark);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tg-table tr:hover td {
|
||||
background: rgba(16, 43, 106, 0.03);
|
||||
}
|
||||
|
||||
.tg-positive {
|
||||
color: #e04828 !important;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tg-empty-cell {
|
||||
height: 90px;
|
||||
color: var(--text-muted) !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.tg-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 62px;
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tg-status.success {
|
||||
background: rgba(35, 175, 92, 0.12);
|
||||
color: #15824a;
|
||||
}
|
||||
|
||||
.tg-status.pending {
|
||||
background: rgba(255, 185, 0, 0.16);
|
||||
color: #a56d00;
|
||||
}
|
||||
|
||||
.tg-status.withdrawn {
|
||||
background: rgba(16, 43, 106, 0.1);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.tg-status.muted {
|
||||
background: #eef1f6;
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
.tg-rule-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.tg-rule-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: #f8fafd;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tg-rule-item b {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tg-modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background: rgba(8, 20, 48, 0.55);
|
||||
}
|
||||
|
||||
.tg-modal {
|
||||
position: relative;
|
||||
width: 320px;
|
||||
max-width: 100%;
|
||||
padding: 24px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 50px rgba(10, 24, 60, 0.24);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tg-modal h3 {
|
||||
color: var(--text-dark);
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tg-modal-close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tg-qr-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 18px auto 12px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tg-modal p {
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.tg-hero,
|
||||
.tg-stats,
|
||||
.tg-rule-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.tg-hero,
|
||||
.tg-stats,
|
||||
.tg-rule-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tg-card-head,
|
||||
.tg-share-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.tg-segment {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
.uc-btn-signin.is-signed,
|
||||
.uc-btn-signin:disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#publishArticleBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.uc-edit-profile-panel {
|
||||
padding: 22px 24px 24px;
|
||||
}
|
||||
|
||||
.uc-edit-avatar-zone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.uc-edit-avatar-button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uc-edit-avatar {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--gold);
|
||||
object-fit: cover;
|
||||
box-shadow: 0 8px 24px rgba(253, 185, 51, 0.22);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.uc-edit-avatar-tip {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uc-edit-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.uc-edit-field {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.uc-edit-field label {
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.uc-edit-field input {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 21px;
|
||||
background: var(--bg-light);
|
||||
color: var(--text-dark);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.uc-edit-field input:focus {
|
||||
border-color: var(--primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.08);
|
||||
}
|
||||
|
||||
.uc-edit-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.uc-edit-submit,
|
||||
.uc-edit-cancel {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
border-radius: 21px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uc-edit-submit {
|
||||
border: 0;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uc-edit-cancel {
|
||||
border: 1px solid var(--border-light);
|
||||
background: #fff;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.uc-edit-submit:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.uc-edit-popup .layui-layer-content {
|
||||
max-height: calc(100vh - 190px);
|
||||
}
|
||||
@@ -0,0 +1,963 @@
|
||||
/* ============================================================
|
||||
usercenter.css - 用户中心页 (usercenter.html)
|
||||
Comprehensive styles with responsive breakpoints
|
||||
============================================================ */
|
||||
|
||||
/* === Container === */
|
||||
.uc-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 20px 40px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Profile Card
|
||||
- White background with shadow
|
||||
- Avatar on left, info in middle, actions on right
|
||||
============================================================ */
|
||||
.uc-profile-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
box-shadow: var(--shadow-md);
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/* Decorative gradient strip along the top */
|
||||
.uc-profile-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--primary), var(--gold), var(--orange), var(--purple));
|
||||
}
|
||||
|
||||
/* Decorative soft radial glow behind avatar area */
|
||||
.uc-profile-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background: radial-gradient(circle, rgba(16, 43, 106, 0.04) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Avatar --- */
|
||||
.uc-avatar-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.uc-avatar {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--gold);
|
||||
object-fit: cover;
|
||||
box-shadow: 0 4px 16px rgba(253, 185, 51, 0.25);
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.uc-avatar:hover {
|
||||
transform: scale(1.06);
|
||||
box-shadow: 0 6px 24px rgba(253, 185, 51, 0.4);
|
||||
}
|
||||
|
||||
/* --- User Info --- */
|
||||
.uc-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uc-nickname {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uc-level {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, var(--gold), var(--orange));
|
||||
color: var(--primary);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 2px 14px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.uc-phone {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* --- Action Buttons --- */
|
||||
.uc-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.uc-btn {
|
||||
padding: 9px 22px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.uc-btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.uc-btn-signin {
|
||||
background: linear-gradient(135deg, var(--gold), var(--orange));
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.uc-btn-signin:hover {
|
||||
box-shadow: 0 4px 18px rgba(253, 185, 51, 0.45);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.uc-btn-signin:active {
|
||||
transform: translateY(0) scale(0.97);
|
||||
}
|
||||
|
||||
.uc-btn-edit {
|
||||
background: var(--bg-light);
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.uc-btn-edit:hover {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 4px 14px rgba(16, 43, 106, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.uc-btn-logout2 {
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.uc-btn-logout2:hover {
|
||||
background: var(--red);
|
||||
color: var(--white);
|
||||
border-color: var(--red);
|
||||
box-shadow: 0 4px 14px rgba(231, 76, 60, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.uc-btn-expert {
|
||||
background: var(--bg-light);
|
||||
color: var(--purple);
|
||||
border: 1px solid rgba(123, 45, 142, 0.25);
|
||||
}
|
||||
|
||||
.uc-btn-expert:hover {
|
||||
background: linear-gradient(135deg, var(--purple), #9b59b6);
|
||||
color: var(--white);
|
||||
border-color: var(--purple);
|
||||
box-shadow: 0 4px 14px rgba(123, 45, 142, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.uc-btn-publish {
|
||||
background: var(--bg-light);
|
||||
color: var(--primary);
|
||||
border: 1px solid rgba(16, 43, 106, 0.2);
|
||||
}
|
||||
|
||||
.uc-btn-publish:hover {
|
||||
background: linear-gradient(135deg, var(--primary), #3b6fd4);
|
||||
color: var(--white);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 4px 14px rgba(16, 43, 106, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.uc-btn-collection {
|
||||
background: var(--bg-light);
|
||||
color: var(--gold);
|
||||
border: 1px solid rgba(253, 185, 51, 0.25);
|
||||
}
|
||||
|
||||
.uc-btn-collection:hover {
|
||||
background: linear-gradient(135deg, var(--gold), var(--orange));
|
||||
color: var(--white);
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 4px 14px rgba(253, 185, 51, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.uc-btn-tuiguang {
|
||||
background: var(--bg-light);
|
||||
color: var(--red);
|
||||
border: 1px solid rgba(231, 76, 60, 0.25);
|
||||
}
|
||||
|
||||
.uc-btn-tuiguang:hover {
|
||||
background: linear-gradient(135deg, var(--red), #e74c3c);
|
||||
color: var(--white);
|
||||
border-color: var(--red);
|
||||
box-shadow: 0 4px 14px rgba(231, 76, 60, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Balance Grid - 4 columns with colored icon badges
|
||||
============================================================ */
|
||||
.uc-balance-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.uc-balance-item {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border-light);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Subtle top accent line matching icon color */
|
||||
.uc-balance-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--border-light);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.uc-balance-item:nth-child(1)::before {
|
||||
background: linear-gradient(90deg, var(--gold), var(--orange));
|
||||
}
|
||||
|
||||
.uc-balance-item:nth-child(2)::before {
|
||||
background: linear-gradient(90deg, var(--primary), #3b6fd4);
|
||||
}
|
||||
|
||||
.uc-balance-item:nth-child(3)::before {
|
||||
background: linear-gradient(90deg, var(--orange), var(--red));
|
||||
}
|
||||
|
||||
.uc-balance-item:nth-child(4)::before {
|
||||
background: linear-gradient(90deg, var(--purple), #9b59b6);
|
||||
}
|
||||
|
||||
.uc-balance-item:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.uc-balance-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* --- Balance Icon Badges --- */
|
||||
.balance-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--white);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
|
||||
letter-spacing: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.uc-balance-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.uc-balance-value span {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--text-muted);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.uc-balance-links {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.uc-balance-links a {
|
||||
font-size: 12px;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
padding: 3px 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(16, 43, 106, 0.06);
|
||||
transition: all 0.25s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uc-balance-links a:hover {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
box-shadow: 0 2px 8px rgba(16, 43, 106, 0.2);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Section - white card wrapper for tables
|
||||
============================================================ */
|
||||
.uc-section {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.uc-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: linear-gradient(90deg, rgba(16, 43, 106, 0.03) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.uc-section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
padding-left: 12px;
|
||||
border-left: 4px solid var(--gold);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Filter Bar
|
||||
============================================================ */
|
||||
.uc-filter-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.uc-filter-bar label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
margin-right: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uc-filter-bar select {
|
||||
padding: 7px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-light);
|
||||
font-size: 13px;
|
||||
color: var(--text-dark);
|
||||
outline: none;
|
||||
background: var(--white);
|
||||
min-width: 110px;
|
||||
transition: border-color 0.25s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uc-filter-bar select:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.08);
|
||||
}
|
||||
|
||||
.uc-filter-btn {
|
||||
padding: 7px 24px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uc-filter-btn:hover {
|
||||
box-shadow: 0 3px 12px rgba(16, 43, 106, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.uc-filter-btn:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Data Table - clean with alternating rows
|
||||
============================================================ */
|
||||
.uc-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.uc-table thead {
|
||||
background: linear-gradient(135deg, #f0f3fa 0%, #e8ecf5 100%);
|
||||
}
|
||||
|
||||
.uc-table th {
|
||||
padding: 13px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
border-bottom: 2px solid rgba(16, 43, 106, 0.08);
|
||||
}
|
||||
|
||||
.uc-table td {
|
||||
padding: 13px 16px;
|
||||
font-size: 13px;
|
||||
color: var(--text-dark);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
vertical-align: middle;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Alternating row background */
|
||||
.uc-table tbody tr:nth-child(even) td {
|
||||
background: rgba(244, 246, 251, 0.5);
|
||||
}
|
||||
|
||||
.uc-table tbody tr {
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.uc-table tbody tr:hover td {
|
||||
background: rgba(16, 43, 106, 0.04);
|
||||
}
|
||||
|
||||
.uc-table a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.uc-table a:hover {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
/* Empty state row */
|
||||
.uc-table td[colspan] {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 30px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Pagination
|
||||
============================================================ */
|
||||
.uc-pagination {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/* Layui page override for consistent look */
|
||||
.uc-pagination .layui-laypage {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.uc-pagination .layui-laypage a,
|
||||
.uc-pagination .layui-laypage span {
|
||||
border-radius: 6px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Edit Profile Popup (layui layer dialog)
|
||||
============================================================ */
|
||||
.uc-edit-popup {
|
||||
border-radius: var(--radius-lg) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Title bar */
|
||||
.uc-edit-popup .layui-layer-title {
|
||||
background: linear-gradient(90deg, var(--primary), var(--primary-light)) !important;
|
||||
color: var(--white) !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 15px !important;
|
||||
border-bottom: none !important;
|
||||
height: 46px !important;
|
||||
line-height: 46px !important;
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
|
||||
/* Close button */
|
||||
.uc-edit-popup .layui-layer-ico.layui-layer-close1 {
|
||||
top: 12px !important;
|
||||
right: 12px !important;
|
||||
filter: brightness(3);
|
||||
}
|
||||
|
||||
/* Content area */
|
||||
.uc-edit-popup .layui-layer-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* --- Edit Avatar --- */
|
||||
.uc-edit-avatar {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--gold);
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 0 auto 8px;
|
||||
box-shadow: 0 4px 16px rgba(253, 185, 51, 0.25);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.uc-edit-avatar:hover {
|
||||
transform: scale(1.06);
|
||||
box-shadow: 0 6px 24px rgba(253, 185, 51, 0.4);
|
||||
}
|
||||
|
||||
/* --- Edit Form Fields --- */
|
||||
.uc-edit-field {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.uc-edit-field label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.uc-edit-field input[type="text"],
|
||||
.uc-edit-field input[type="password"] {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
border: 2px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
background: var(--bg-light);
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.uc-edit-field input:focus {
|
||||
border-color: var(--primary);
|
||||
background: var(--white);
|
||||
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.08);
|
||||
}
|
||||
|
||||
.uc-edit-field input::placeholder {
|
||||
color: var(--text-muted);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Save button inside popup */
|
||||
.uc-edit-popup .uc-filter-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
margin-top: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive - Tablet (max-width: 1024px)
|
||||
============================================================ */
|
||||
@media (max-width: 1024px) {
|
||||
.uc-container {
|
||||
padding: 20px 16px 32px;
|
||||
}
|
||||
|
||||
.uc-profile-card {
|
||||
padding: 24px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.uc-avatar {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.uc-nickname {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.uc-balance-grid {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.uc-balance-item {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.uc-balance-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.uc-table th,
|
||||
.uc-table td {
|
||||
padding: 11px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive - Mobile (max-width: 768px)
|
||||
============================================================ */
|
||||
@media (max-width: 768px) {
|
||||
.uc-container {
|
||||
padding: 16px 12px 28px;
|
||||
}
|
||||
|
||||
/* Profile card stacks vertically */
|
||||
.uc-profile-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 28px 20px 24px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.uc-profile-card::after {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 10px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.uc-avatar-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uc-avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.uc-nickname {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uc-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uc-phone {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uc-actions {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.uc-btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Balance grid becomes 2 columns */
|
||||
.uc-balance-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.uc-balance-item {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.uc-balance-value {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.uc-balance-label {
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.balance-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.uc-balance-links {
|
||||
margin-top: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.uc-balance-links a {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
/* Section adjustments */
|
||||
.uc-section-header {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.uc-section-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Filter bar stacks */
|
||||
.uc-filter-bar {
|
||||
padding: 12px 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.uc-filter-bar select {
|
||||
min-width: 90px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uc-filter-btn {
|
||||
padding: 6px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Table adjustments */
|
||||
.uc-table th,
|
||||
.uc-table td {
|
||||
padding: 10px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uc-pagination {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive - Small Mobile (max-width: 480px)
|
||||
============================================================ */
|
||||
@media (max-width: 480px) {
|
||||
.uc-container {
|
||||
padding: 12px 10px 24px;
|
||||
}
|
||||
|
||||
.uc-profile-card {
|
||||
padding: 24px 16px 20px;
|
||||
}
|
||||
|
||||
.uc-avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.uc-nickname {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.uc-level {
|
||||
font-size: 11px;
|
||||
padding: 1px 10px;
|
||||
}
|
||||
|
||||
.uc-actions {
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uc-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Balance grid stays 2 columns but tighter */
|
||||
.uc-balance-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.uc-balance-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.uc-balance-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.uc-balance-value span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.balance-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.uc-balance-links a {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* Table horizontal scroll */
|
||||
.uc-section {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.uc-table {
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
.uc-filter-bar {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.uc-filter-bar select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Edit popup responsive */
|
||||
.uc-edit-popup {
|
||||
width: 92vw !important;
|
||||
max-width: 400px !important;
|
||||
}
|
||||
|
||||
.uc-edit-avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Animations & Utilities
|
||||
============================================================ */
|
||||
|
||||
/* Fade-in for balance items on load */
|
||||
@keyframes ucFadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.uc-balance-item {
|
||||
animation: ucFadeInUp 0.4s ease both;
|
||||
}
|
||||
|
||||
.uc-balance-item:nth-child(1) { animation-delay: 0.05s; }
|
||||
.uc-balance-item:nth-child(2) { animation-delay: 0.1s; }
|
||||
.uc-balance-item:nth-child(3) { animation-delay: 0.15s; }
|
||||
.uc-balance-item:nth-child(4) { animation-delay: 0.2s; }
|
||||
|
||||
/* Subtle pulse on sign-in button to draw attention */
|
||||
@keyframes ucPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(253, 185, 51, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 8px rgba(253, 185, 51, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.uc-btn-signin {
|
||||
animation: ucPulse 2.5s infinite;
|
||||
}
|
||||
|
||||
.uc-btn-signin:hover {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Respect reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.uc-balance-item,
|
||||
.uc-btn-signin {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.uc-avatar,
|
||||
.uc-edit-avatar,
|
||||
.uc-balance-item,
|
||||
.uc-btn,
|
||||
.uc-balance-links a,
|
||||
.uc-filter-btn {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user