彩先知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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,963 @@
|
||||
const $ = layui.$;
|
||||
// 全局变量
|
||||
let gmjldata = []; // 转换后的扁平数组
|
||||
let originalData = []; // 原始树形数据
|
||||
let qishuok = {}; // 期号数据
|
||||
let selectedLotteryPath = [];
|
||||
let selectedLotteryIds = [];
|
||||
let currentIssue = ""; // 当前期号
|
||||
let currentPayPublishOptions = null;
|
||||
let currentPayPicker = null;
|
||||
let isSubmittingPayArticle = false;
|
||||
let selections = [];
|
||||
let stepsConfig = [];
|
||||
const REQUIRED_DAILY_FREE_ARTICLES = 2;
|
||||
// 页面加载完成后获取首页信息
|
||||
layui.$(document).ready(function () {
|
||||
CommonUtil.loadPageConfig({ ads: false, links: false });
|
||||
checkPaidPublishPermission().then(function (result) {
|
||||
if (!result.canPaid) {
|
||||
layui.layer.alert(result.reason || "暂无付费文章发布权限。", {
|
||||
title: "暂无权限",
|
||||
});
|
||||
$(".mianfeiThreeSelect").addClass("is-disabled");
|
||||
$("#gmjl").prop("disabled", true);
|
||||
return;
|
||||
}
|
||||
|
||||
loadLotteryData();
|
||||
});
|
||||
});
|
||||
|
||||
// 判断布尔字段，兼容后端可能返回的 1/true/"true"。
|
||||
function isTruthy(value) {
|
||||
return (
|
||||
value === true ||
|
||||
value === 1 ||
|
||||
value === "1" ||
|
||||
String(value).toLowerCase() === "true"
|
||||
);
|
||||
}
|
||||
|
||||
function padDatePart(value) {
|
||||
return String(value).padStart(2, "0");
|
||||
}
|
||||
|
||||
function formatLocalDate(date) {
|
||||
return (
|
||||
date.getFullYear() +
|
||||
"-" +
|
||||
padDatePart(date.getMonth() + 1) +
|
||||
"-" +
|
||||
padDatePart(date.getDate())
|
||||
);
|
||||
}
|
||||
|
||||
function getArticleDateText(value) {
|
||||
if (!value) return "";
|
||||
if (typeof value === "number") {
|
||||
const numericDate = new Date(value);
|
||||
return isNaN(numericDate.getTime())
|
||||
? ""
|
||||
: formatLocalDate(numericDate);
|
||||
}
|
||||
|
||||
const text = String(value).trim();
|
||||
const match = text.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})/);
|
||||
if (match) {
|
||||
return (
|
||||
match[1] + "-" + padDatePart(match[2]) + "-" + padDatePart(match[3])
|
||||
);
|
||||
}
|
||||
|
||||
const parsedDate = new Date(text.replace(/-/g, "/"));
|
||||
return isNaN(parsedDate.getTime()) ? "" : formatLocalDate(parsedDate);
|
||||
}
|
||||
|
||||
function isPublishedFreeArticle(item) {
|
||||
if (!item) return false;
|
||||
|
||||
const statusText = String(
|
||||
item.statusText ||
|
||||
item.auditStatusText ||
|
||||
item.publishStatusText ||
|
||||
item.stateText ||
|
||||
"",
|
||||
).toLowerCase();
|
||||
if (/已发布|审核通过|通过|published|approved|pass/.test(statusText)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const status =
|
||||
item.status != null
|
||||
? item.status
|
||||
: item.auditStatus != null
|
||||
? item.auditStatus
|
||||
: item.publishStatus;
|
||||
return status === true || status === 1 || status === "1";
|
||||
}
|
||||
|
||||
function getTodayPublishedFreeCount(rows) {
|
||||
const today = formatLocalDate(new Date());
|
||||
return ApiClient.asArray(rows).filter(function (item) {
|
||||
const articleDate = getArticleDateText(
|
||||
item.createTime ||
|
||||
item.create_time ||
|
||||
item.publishTime ||
|
||||
item.publish_time ||
|
||||
item.auditTime ||
|
||||
item.audit_time ||
|
||||
item.updateTime ||
|
||||
item.update_time ||
|
||||
item.createdAt,
|
||||
);
|
||||
return articleDate === today && isPublishedFreeArticle(item);
|
||||
}).length;
|
||||
}
|
||||
|
||||
function loadTodayPublishedFreeCount() {
|
||||
return ApiClient.get(ApiClient.API.mineFreeArticleList, {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
})
|
||||
.then(function (res) {
|
||||
if (!ApiClient.isSuccess(res)) return 0;
|
||||
|
||||
const data = res.data || res;
|
||||
const rows = ApiClient.asArray(
|
||||
data.rows || data.records || data.list || data.data || data,
|
||||
);
|
||||
return getTodayPublishedFreeCount(rows);
|
||||
})
|
||||
.catch(function () {
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
// 付费文章发布权限：专家身份 + 当天 2 篇审核通过/已发布的免费文章。
|
||||
function checkPaidPublishPermission() {
|
||||
return ApiClient.get(ApiClient.API.mineSummary)
|
||||
.then(function (res) {
|
||||
if (!ApiClient.isSuccess(res) || !res.data) {
|
||||
return { canPaid: false, reason: "暂时无法获取发布权限。" };
|
||||
}
|
||||
|
||||
const status = String(
|
||||
res.data.expertStatus || res.data.expert_status || "",
|
||||
).toLowerCase();
|
||||
const hasExpertIdentity =
|
||||
isTruthy(res.data.is_expert) ||
|
||||
isTruthy(res.data.isExpert) ||
|
||||
isTruthy(res.data.expert) ||
|
||||
isTruthy(res.data.is_regular_expert) ||
|
||||
isTruthy(res.data.isRegularExpert) ||
|
||||
isTruthy(res.data.regularExpert) ||
|
||||
isTruthy(res.data.internExpert) ||
|
||||
isTruthy(res.data.isInternExpert) ||
|
||||
/实习|intern|trial|正式|regular|formal/.test(status);
|
||||
|
||||
if (!hasExpertIdentity) {
|
||||
return { canPaid: false, reason: "专家才能发布付费文章。" };
|
||||
}
|
||||
|
||||
return loadTodayPublishedFreeCount().then(function (count) {
|
||||
return {
|
||||
canPaid: count >= REQUIRED_DAILY_FREE_ARTICLES,
|
||||
reason:
|
||||
count >= REQUIRED_DAILY_FREE_ARTICLES
|
||||
? ""
|
||||
: "今天需先发布2篇审核通过的免费文章后，才能发布付费文章（当前" +
|
||||
count +
|
||||
"篇）。",
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch(function () {
|
||||
return { canPaid: false, reason: "暂时无法获取发布权限。" };
|
||||
});
|
||||
}
|
||||
|
||||
// 加载彩种数据
|
||||
async function loadLotteryData() {
|
||||
try {
|
||||
console.log("开始加载彩种数据...");
|
||||
|
||||
const response = await ApiClient.get(ApiClient.API.homeNav);
|
||||
console.log("API返回的原始数据:", response);
|
||||
|
||||
if (
|
||||
response.code === 0 &&
|
||||
response.data &&
|
||||
Array.isArray(response.data)
|
||||
) {
|
||||
originalData = await preparePayPublishMenuTree(response.data);
|
||||
|
||||
// 1. 转换树形结构为适合selectY2的扁平数组
|
||||
gmjldata = convertTreeToFlatArray(originalData);
|
||||
console.log("转换后的扁平数组:", gmjldata);
|
||||
|
||||
// 2. 初始化期号数据
|
||||
initIssueData(originalData);
|
||||
|
||||
// 3. 初始化LayUI组件
|
||||
initLayuiComponents();
|
||||
} else {
|
||||
throw new Error(response.msg || "获取数据失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载彩种数据失败:", error);
|
||||
layui.layer.msg("加载彩种数据失败: " + error.message, { icon: 2 });
|
||||
}
|
||||
}
|
||||
|
||||
// 转换树形结构为扁平数组
|
||||
function convertTreeToFlatArray(treeData) {
|
||||
const excludeNames = [
|
||||
"首页",
|
||||
"专家推荐",
|
||||
"断组",
|
||||
"杀组合",
|
||||
"断组1",
|
||||
"杀组合1",
|
||||
"断组2",
|
||||
"杀组合2",
|
||||
"组三",
|
||||
"组六",
|
||||
];
|
||||
let flatArray = [];
|
||||
|
||||
// 递归遍历树形数据
|
||||
function traverse(node, parentId = 0) {
|
||||
const nodeId = getMenuNodeId(node);
|
||||
const nodeName = getMenuNodeName(node);
|
||||
const children = getMenuNodeChildren(node);
|
||||
|
||||
// 检查当前节点名称是否在排除列表中
|
||||
if (!nodeId || !nodeName || excludeNames.includes(nodeName)) {
|
||||
return; // 跳过这个节点及其子节点
|
||||
}
|
||||
|
||||
// 添加当前节点到扁平数组
|
||||
flatArray.push({
|
||||
id: nodeId,
|
||||
pid: parentId,
|
||||
name: nodeName,
|
||||
code: node.code || node.lotteryCode || "",
|
||||
});
|
||||
|
||||
// 如果有子节点，递归处理
|
||||
if (children && Array.isArray(children)) {
|
||||
children.forEach((child) => {
|
||||
traverse(child, nodeId);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 遍历整个树
|
||||
if (Array.isArray(treeData)) {
|
||||
treeData.forEach((rootNode) => {
|
||||
traverse(rootNode, 0);
|
||||
});
|
||||
}
|
||||
|
||||
return flatArray;
|
||||
}
|
||||
|
||||
function getMenuNodeId(node) {
|
||||
return node && (node.id || node.menuId || node.value);
|
||||
}
|
||||
|
||||
function getMenuNodeName(node) {
|
||||
return String(
|
||||
(node && (node.name || node.menuName || node.title || node.label)) ||
|
||||
"",
|
||||
).trim();
|
||||
}
|
||||
|
||||
function getMenuNodeChildren(node) {
|
||||
return ApiClient.asArray(
|
||||
node && (node.children || node.childList || node.list),
|
||||
);
|
||||
}
|
||||
|
||||
function isFixedPublishNav(node) {
|
||||
const name = getMenuNodeName(node);
|
||||
const path = String(
|
||||
(node && (node.path || node.url || node.href)) || "",
|
||||
).trim();
|
||||
|
||||
return (
|
||||
["首页", "专家推荐"].includes(name) ||
|
||||
/(^|\/)(index|zhuanjia)\.html/i.test(path)
|
||||
);
|
||||
}
|
||||
|
||||
function normalizeMenuChildren(node, children) {
|
||||
node.children = ApiClient.asArray(children);
|
||||
return node.children;
|
||||
}
|
||||
|
||||
function loadMenuChildrenForNode(node, depth) {
|
||||
if (!node || depth <= 0) {
|
||||
return Promise.resolve(node);
|
||||
}
|
||||
|
||||
const existingChildren = getMenuNodeChildren(node);
|
||||
const menuId = getMenuNodeId(node);
|
||||
const childrenPromise =
|
||||
existingChildren.length || !menuId
|
||||
? Promise.resolve(existingChildren)
|
||||
: ApiClient.get(ApiClient.API.menuChildren(menuId))
|
||||
.then(function (res) {
|
||||
return ApiClient.asArray(
|
||||
res.data || res.rows || res.records || res.list || res,
|
||||
);
|
||||
})
|
||||
.catch(function () {
|
||||
return [];
|
||||
});
|
||||
|
||||
return childrenPromise.then(function (children) {
|
||||
normalizeMenuChildren(node, children);
|
||||
return Promise.all(
|
||||
node.children.map(function (child) {
|
||||
return loadMenuChildrenForNode(child, depth - 1);
|
||||
}),
|
||||
).then(function () {
|
||||
return node;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function preparePayPublishMenuTree(navList) {
|
||||
const lotteryList = ApiClient.asArray(navList).filter(function (item) {
|
||||
return !isFixedPublishNav(item);
|
||||
});
|
||||
|
||||
return Promise.all(
|
||||
lotteryList.map(function (item) {
|
||||
return loadMenuChildrenForNode(item, 2);
|
||||
}),
|
||||
).then(function () {
|
||||
return lotteryList;
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化期号数据
|
||||
function initIssueData(data) {
|
||||
// 从原始数据中提取期号信息
|
||||
data.forEach((lottery) => {
|
||||
const lotteryId = getMenuNodeId(lottery);
|
||||
if (lottery.lotteryResult && lottery.lotteryResult.expect) {
|
||||
qishuok[lotteryId] = lottery.lotteryResult.expect;
|
||||
} else if (lottery.expect || lottery.issue) {
|
||||
qishuok[lotteryId] = lottery.expect || lottery.issue;
|
||||
}
|
||||
});
|
||||
|
||||
console.log("期号数据:", qishuok);
|
||||
}
|
||||
|
||||
function formatPayMoney(value) {
|
||||
return Number(value || 0).toFixed(2) + "元";
|
||||
}
|
||||
|
||||
function updatePayTitleCount() {
|
||||
const value = $("#payTitle").val() || "";
|
||||
$("#payTitleCount").text(value.length + "/100");
|
||||
}
|
||||
|
||||
$(document).on("input", "#payTitle", updatePayTitleCount);
|
||||
|
||||
function initNumberSelector(config) {
|
||||
stepsConfig = Array.isArray(config) ? config : [];
|
||||
selections = Array(stepsConfig.length).fill(null);
|
||||
updateNumberSelectorUI();
|
||||
}
|
||||
|
||||
function initNumberPool() {
|
||||
const numberPool = document.getElementById("numberPool");
|
||||
if (!numberPool) {
|
||||
return;
|
||||
}
|
||||
|
||||
numberPool.innerHTML = "";
|
||||
if (!stepsConfig.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
stepsConfig.forEach(function (step, stepIndex) {
|
||||
const stepContainer = document.createElement("div");
|
||||
stepContainer.className = "mianfeiThreeTextRedballBox";
|
||||
stepContainer.innerHTML = `
|
||||
<div class="RedballText" data-class="${step.class}" data-classok="${step.classok}">
|
||||
${step.name}（选择 ${step.requiredCount} 个）
|
||||
</div>
|
||||
<div class="RedballBox" id="step-${stepIndex}"></div>
|
||||
`;
|
||||
|
||||
numberPool.appendChild(stepContainer);
|
||||
renderStepNumbers(step, stepIndex);
|
||||
});
|
||||
}
|
||||
|
||||
function renderStepNumbers(step, stepIndex) {
|
||||
const stepNumberPool = document.getElementById("step-" + stepIndex);
|
||||
if (!stepNumberPool || !Array.isArray(step.numberRange)) {
|
||||
return;
|
||||
}
|
||||
|
||||
step.numberRange.forEach(function (number) {
|
||||
const text =
|
||||
number !== "" && !isNaN(Number(number)) && Number(number) < 10
|
||||
? "0" + Number(number)
|
||||
: String(number);
|
||||
const numberElement = document.createElement("div");
|
||||
|
||||
numberElement.className = step.class;
|
||||
numberElement.textContent = text;
|
||||
numberElement.dataset.number = text;
|
||||
numberElement.dataset.step = stepIndex;
|
||||
|
||||
const currentSelection = selections[stepIndex] || { numbers: [] };
|
||||
if (
|
||||
currentSelection.numbers.includes(normalizeSelectedNumber(text))
|
||||
) {
|
||||
numberElement.classList.add(step.classok);
|
||||
}
|
||||
|
||||
numberElement.addEventListener("click", function () {
|
||||
toggleNumberSelection(numberElement, step.classok);
|
||||
});
|
||||
|
||||
stepNumberPool.appendChild(numberElement);
|
||||
});
|
||||
}
|
||||
|
||||
function normalizeSelectedNumber(value) {
|
||||
const text = String(value);
|
||||
return text !== "" && !isNaN(Number(text)) ? Number(text) : text;
|
||||
}
|
||||
|
||||
function toggleNumberSelection(numberElement, selectedClass) {
|
||||
const stepIndex = Number(numberElement.dataset.step);
|
||||
const number = normalizeSelectedNumber(numberElement.dataset.number);
|
||||
const step = stepsConfig[stepIndex];
|
||||
const currentSelection = selections[stepIndex] || { numbers: [] };
|
||||
|
||||
if (!step) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (numberElement.classList.contains(selectedClass)) {
|
||||
numberElement.classList.remove(selectedClass);
|
||||
currentSelection.numbers = currentSelection.numbers.filter(
|
||||
function (item) {
|
||||
return item !== number;
|
||||
},
|
||||
);
|
||||
} else {
|
||||
if (!step.allowMultiple) {
|
||||
clearStepSelection(stepIndex, selectedClass);
|
||||
currentSelection.numbers = [];
|
||||
}
|
||||
|
||||
if (
|
||||
step.allowMultiple &&
|
||||
currentSelection.numbers.length >= step.requiredCount
|
||||
) {
|
||||
showNumberMessage(
|
||||
"本步骤最多只能选择 " + step.requiredCount + " 个数字",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
numberElement.classList.add(selectedClass);
|
||||
currentSelection.numbers.push(number);
|
||||
}
|
||||
|
||||
selections[stepIndex] = currentSelection;
|
||||
showFinalResult();
|
||||
}
|
||||
|
||||
function clearStepSelection(stepIndex, selectedClass) {
|
||||
document
|
||||
.querySelectorAll('[data-step="' + stepIndex + '"]')
|
||||
.forEach(function (element) {
|
||||
element.classList.remove(selectedClass);
|
||||
});
|
||||
}
|
||||
|
||||
function showFinalResult() {
|
||||
xzok(selections);
|
||||
}
|
||||
|
||||
function resetNumberSelector() {
|
||||
const doReset = function () {
|
||||
selections = Array(stepsConfig.length).fill(null);
|
||||
updateNumberSelectorUI();
|
||||
};
|
||||
|
||||
if (layui.layer) {
|
||||
layui.layer.confirm(
|
||||
"确定要重置所有选择吗？",
|
||||
{ icon: 3, title: "提示" },
|
||||
function (index) {
|
||||
doReset();
|
||||
layui.layer.close(index);
|
||||
},
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
doReset();
|
||||
}
|
||||
|
||||
function updateNumberSelectorUI() {
|
||||
initNumberPool();
|
||||
showFinalResult();
|
||||
}
|
||||
|
||||
function showNumberMessage(message) {
|
||||
if (layui.layer) {
|
||||
layui.layer.msg(message);
|
||||
return;
|
||||
}
|
||||
|
||||
console.warn(message);
|
||||
}
|
||||
|
||||
$(document).on("click", "#resetBtn", resetNumberSelector);
|
||||
|
||||
function renderPayPublishOptions(data) {
|
||||
currentPayPublishOptions = data || {};
|
||||
currentPayPicker = currentPayPublishOptions.picker || null;
|
||||
const issue = currentPayPublishOptions.issue || $("#qi").val() || "";
|
||||
const code = currentPayPublishOptions.code || "";
|
||||
|
||||
$("#qi").val(issue);
|
||||
$("#qihao").text(issue || "--");
|
||||
$("#expectInput").val(issue || "");
|
||||
$("#expectText").text(issue || "选择方案后自动获取");
|
||||
$("#payCode").val(code);
|
||||
$("#priceInput").val(currentPayPublishOptions.priceCount1 || 0);
|
||||
$("#priceText").text(currentPayPublishOptions.priceCount1 || 0);
|
||||
|
||||
const priceLines = [
|
||||
"价格：" +
|
||||
formatPayMoney(currentPayPublishOptions.priceCount1) +
|
||||
"，服务费：" +
|
||||
formatPayMoney(currentPayPublishOptions.priceCount1Cost),
|
||||
];
|
||||
|
||||
if (
|
||||
currentPayPublishOptions.pointDeduction != null ||
|
||||
currentPayPublishOptions.pointMaxDeduction != null
|
||||
) {
|
||||
priceLines.push(
|
||||
"积分抵扣：" +
|
||||
(currentPayPublishOptions.pointDeduction || 0) +
|
||||
"，最多：" +
|
||||
formatPayMoney(currentPayPublishOptions.pointMaxDeduction),
|
||||
);
|
||||
}
|
||||
|
||||
$("#payPriceInfo").html(priceLines.join("<br />"));
|
||||
applyPayPickerConfig(currentPayPicker);
|
||||
}
|
||||
|
||||
function normalizePayBallValue(value) {
|
||||
const text = String(value);
|
||||
return text !== "" && !isNaN(Number(text)) ? Number(text) : text;
|
||||
}
|
||||
|
||||
function applyPayPickerConfig(picker) {
|
||||
const groups = Array.isArray(picker && picker.groups)
|
||||
? picker.groups
|
||||
: [];
|
||||
if (!groups.length || typeof initNumberSelector !== "function") {
|
||||
return;
|
||||
}
|
||||
|
||||
const apiStepsConfig = groups.map(function (group) {
|
||||
const min = Number(group.minSelect || 0);
|
||||
const max = Number(group.maxSelect || min || 1);
|
||||
return {
|
||||
name: group.name || group.key || "号码选择",
|
||||
numberRange: ApiClient.asArray(group.balls).map(
|
||||
normalizePayBallValue,
|
||||
),
|
||||
allowMultiple: max > 1,
|
||||
class: group.color === "blue" ? "Blueball" : "Redball",
|
||||
classok: group.color === "blue" ? "BlueSelected" : "selected",
|
||||
requiredCount: max,
|
||||
minSelect: min,
|
||||
maxSelect: max,
|
||||
joiner: group.joiner,
|
||||
key: group.key,
|
||||
sortSelected: group.sortSelected,
|
||||
};
|
||||
});
|
||||
|
||||
initNumberSelector(apiStepsConfig);
|
||||
}
|
||||
|
||||
function validatePayPickerSelection(currentSelections) {
|
||||
if (!currentPayPicker || !Array.isArray(currentPayPicker.groups)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
for (let index = 0; index < currentPayPicker.groups.length; index++) {
|
||||
const group = currentPayPicker.groups[index];
|
||||
const selected =
|
||||
currentSelections[index] &&
|
||||
Array.isArray(currentSelections[index].numbers)
|
||||
? currentSelections[index].numbers
|
||||
: [];
|
||||
const min = Number(group.minSelect || 0);
|
||||
const max = Number(group.maxSelect || min);
|
||||
|
||||
if (selected.length < min || selected.length > max) {
|
||||
layer.alert(
|
||||
(group.name || "当前分组") +
|
||||
"需要选择" +
|
||||
(min === max ? min : min + "-" + max) +
|
||||
"个",
|
||||
);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function buildPayPredictedCode(currentSelections) {
|
||||
if (!currentPayPicker || !Array.isArray(currentPayPicker.groups)) {
|
||||
return $("#vv").val();
|
||||
}
|
||||
|
||||
const groups = currentPayPicker.groups;
|
||||
const defaultJoiner = currentPayPicker.joiner || ",";
|
||||
const groupJoiner = currentPayPicker.groupJoiner || "+";
|
||||
const groupTexts = groups.map(function (group, index) {
|
||||
let values =
|
||||
currentSelections[index] &&
|
||||
Array.isArray(currentSelections[index].numbers)
|
||||
? currentSelections[index].numbers.slice()
|
||||
: [];
|
||||
if (group.sortSelected) {
|
||||
values.sort(function (a, b) {
|
||||
return Number(a) - Number(b);
|
||||
});
|
||||
}
|
||||
return values.join(group.joiner || defaultJoiner);
|
||||
});
|
||||
|
||||
if (currentPayPicker.mode === "positions") {
|
||||
if (groupJoiner === "-") {
|
||||
return groupTexts.filter(Boolean).join("-");
|
||||
}
|
||||
const lastGroup = groups[groups.length - 1];
|
||||
if (
|
||||
lastGroup &&
|
||||
lastGroup.key === "special" &&
|
||||
groupTexts.length > 1
|
||||
) {
|
||||
const front = groupTexts
|
||||
.slice(0, -1)
|
||||
.filter(Boolean)
|
||||
.join(defaultJoiner);
|
||||
const last = groupTexts[groupTexts.length - 1];
|
||||
return [front, last].filter(Boolean).join(groupJoiner);
|
||||
}
|
||||
return groupTexts.filter(Boolean).join(defaultJoiner);
|
||||
}
|
||||
|
||||
return groupTexts.filter(Boolean).join(groupJoiner);
|
||||
}
|
||||
|
||||
function loadPayPublishOptions(menuId) {
|
||||
currentPayPublishOptions = null;
|
||||
currentPayPicker = null;
|
||||
$("#payMenuId").val(menuId || "");
|
||||
$("#payCode").val("");
|
||||
$("#qi").val("");
|
||||
$("#qihao").text("正在生成当前期号...");
|
||||
$("#expectInput").val("");
|
||||
$("#expectText").text("正在生成当前期号...");
|
||||
$("#priceInput").val("");
|
||||
$("#priceText").text(0);
|
||||
$("#payPriceInfo").text("正在加载价格说明...");
|
||||
|
||||
if (!menuId) {
|
||||
$("#qihao").text("请选择类型后自动生成");
|
||||
$("#expectText").text("选择方案后自动获取");
|
||||
$("#payPriceInfo").text("请选择方案后加载价格说明");
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
|
||||
return ApiClient.get(ApiClient.API.payArticlePublishOptions(menuId))
|
||||
.then(function (res) {
|
||||
if (!ApiClient.isSuccess(res)) {
|
||||
throw new Error(res.msg || "发布前置信息加载失败");
|
||||
}
|
||||
|
||||
renderPayPublishOptions(res.data || {});
|
||||
return res.data || {};
|
||||
})
|
||||
.catch(function (error) {
|
||||
currentPayPublishOptions = null;
|
||||
currentPayPicker = null;
|
||||
$("#qi").val("");
|
||||
$("#qihao").text("当前期号生成失败");
|
||||
$("#expectInput").val("");
|
||||
$("#expectText").text("选择方案后自动获取");
|
||||
$("#priceInput").val("");
|
||||
$("#priceText").text(0);
|
||||
$("#payPriceInfo").text("发布前置信息加载失败");
|
||||
$(".mianfeiThreeText").hide();
|
||||
$(".mianfeiThreeButBox").hide();
|
||||
layui.layer.msg(error.message || "发布前置信息加载失败", {
|
||||
icon: 2,
|
||||
});
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
//console.log(qishuok);
|
||||
function clearLotterySelection() {
|
||||
selectedLotteryPath = [];
|
||||
selectedLotteryIds = [];
|
||||
currentPayPublishOptions = null;
|
||||
currentPayPicker = null;
|
||||
$("#a1,#a2,#a3,#qi,#vv,#payMenuId,#payCode").val("");
|
||||
$("#payTitle").val("");
|
||||
$("#payTitleCount").text("0/100");
|
||||
$("#expectInput").val("");
|
||||
$("#priceInput").val("");
|
||||
$("#priceText").text(0);
|
||||
$("#expectText").text("选择方案后自动获取");
|
||||
$("#qihao").text("请选择方案");
|
||||
$("#payPriceInfo").text("请选择方案后加载价格说明");
|
||||
$("#gmjl").closest(".selectY-box").removeClass("is-selected");
|
||||
$(".mianfeiThreeText").hide();
|
||||
$(".mianfeiThreeButBox").hide();
|
||||
initNumberSelector([]);
|
||||
}
|
||||
|
||||
function initLayuiComponents() {
|
||||
layui.use(["form", "selectY2", "notice"], function () {
|
||||
var form = layui.form,
|
||||
notice = layui.notice,
|
||||
layer = layui.layer,
|
||||
selectY2 = layui.selectY2,
|
||||
$ = layui.$;
|
||||
const $mianfeiThreeText = $(".mianfeiThreeText");
|
||||
const $mianfeiThreeButBox = $(".mianfeiThreeButBox");
|
||||
|
||||
let xzid = 0;
|
||||
let ob = selectY2({
|
||||
elem: "#gmjl",
|
||||
data: gmjldata,
|
||||
//url为ajax 获取json数据，当url属性有值时，不提取data属性值
|
||||
//url:'https://cityApi.html',
|
||||
placeholder: "请选择方案",
|
||||
disabledTips: "请选择",
|
||||
allowClear: true,
|
||||
clearText: "×",
|
||||
clear: clearLotterySelection,
|
||||
success: function (e) {
|
||||
console.log(e.data);
|
||||
console.log(e.ids);
|
||||
console.log(qishuok[e.ids[0]], "zuijinqishu");
|
||||
//
|
||||
$("#qi").val("");
|
||||
$("#qihao").text("正在生成当前期号...");
|
||||
selectedLotteryPath = e.data || [];
|
||||
selectedLotteryIds = e.ids || [];
|
||||
$("#gmjl").closest(".selectY-box").addClass("is-selected");
|
||||
$("#a1").val(selectedLotteryIds[0] || "");
|
||||
$("#a2").val(selectedLotteryIds[1] || "");
|
||||
$("#a3").val(selectedLotteryIds[selectedLotteryIds.length - 1] || "");
|
||||
xzid = selectedLotteryIds[selectedLotteryIds.length - 1];
|
||||
$("#payMenuId").val(xzid);
|
||||
var ttt = e.data;
|
||||
$mianfeiThreeText.hide();
|
||||
$mianfeiThreeButBox.hide();
|
||||
initNumberSelector([]);
|
||||
loadPayPublishOptions(xzid)
|
||||
.then(function (options) {
|
||||
const groups =
|
||||
options &&
|
||||
options.picker &&
|
||||
Array.isArray(options.picker.groups)
|
||||
? options.picker.groups
|
||||
: [];
|
||||
if (!groups.length) {
|
||||
currentPayPublishOptions = null;
|
||||
currentPayPicker = null;
|
||||
layui.layer.msg("后端未返回选号配置，请检查发布前置接口", {
|
||||
icon: 2,
|
||||
});
|
||||
return;
|
||||
}
|
||||
$mianfeiThreeText.show();
|
||||
$mianfeiThreeButBox.show();
|
||||
})
|
||||
.catch(function () {});
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function chk() {
|
||||
if (isSubmittingPayArticle) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const menuId = layui.$("#payMenuId").val();
|
||||
const qi = layui.$("#qi").val();
|
||||
const title = layui.$("#payTitle").val().trim();
|
||||
const code = layui.$("#payCode").val().trim() || "-";
|
||||
|
||||
if (!menuId) {
|
||||
layer.alert("请选择发布方案");
|
||||
return false;
|
||||
}
|
||||
if (!currentPayPublishOptions) {
|
||||
layer.alert("发布前置信息还没有加载完成，请重新选择方案");
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
!currentPayPicker ||
|
||||
!Array.isArray(currentPayPicker.groups) ||
|
||||
!currentPayPicker.groups.length
|
||||
) {
|
||||
layer.alert("后端未返回选号配置，请重新选择方案");
|
||||
return false;
|
||||
}
|
||||
if (!title) {
|
||||
layer.alert("请输入文章标题");
|
||||
return false;
|
||||
}
|
||||
if (!qi) {
|
||||
layer.alert("当前期号不能为空");
|
||||
return false;
|
||||
}
|
||||
if (!validatePayPickerSelection(selections)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const vv = buildPayPredictedCode(selections);
|
||||
layui.$("#vv").val(vv);
|
||||
|
||||
if (!vv) {
|
||||
layer.alert("请选择号码");
|
||||
return false;
|
||||
}
|
||||
|
||||
isSubmittingPayArticle = true;
|
||||
layui.$(".mianfeiThreeBut").text("发布中...").prop("disabled", true);
|
||||
checkPaidPublishPermission()
|
||||
.then(function (permission) {
|
||||
if (!permission.canPaid) {
|
||||
throw new Error(permission.reason || "暂无付费文章发布权限。");
|
||||
}
|
||||
|
||||
return ApiClient.post(ApiClient.API.payArticlePublish, {
|
||||
parentId: menuId,
|
||||
code: code,
|
||||
title: title,
|
||||
predictedCode: vv,
|
||||
issue: Number(qi),
|
||||
});
|
||||
})
|
||||
.then(function (res) {
|
||||
if (!ApiClient.isSuccess(res)) {
|
||||
throw new Error(res.msg || "发布失败");
|
||||
}
|
||||
layer.msg("发布成功", { icon: 1, time: 1200 }, function () {
|
||||
window.location.href = "usercenter.html";
|
||||
});
|
||||
})
|
||||
.catch(function (error) {
|
||||
layer.msg(error.message || "发布失败", { icon: 2 });
|
||||
})
|
||||
.finally(function () {
|
||||
isSubmittingPayArticle = false;
|
||||
layui.$(".mianfeiThreeBut").text("发布方案").prop("disabled", false);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function formatSelectedBallText(value) {
|
||||
const text = String(value);
|
||||
return text !== "" && !isNaN(Number(text)) && Number(text) < 10
|
||||
? "0" + Number(text)
|
||||
: text;
|
||||
}
|
||||
|
||||
function isSelectionComplete(currentSelections) {
|
||||
if (!stepsConfig.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return stepsConfig.every(function (step, index) {
|
||||
const selected =
|
||||
currentSelections[index] &&
|
||||
Array.isArray(currentSelections[index].numbers)
|
||||
? currentSelections[index].numbers
|
||||
: [];
|
||||
const min = Number(step.minSelect || step.requiredCount || 0);
|
||||
const max = Number(step.maxSelect || step.requiredCount || min);
|
||||
return selected.length >= min && selected.length <= max;
|
||||
});
|
||||
}
|
||||
|
||||
function xzok(selections) {
|
||||
const $jieguo = $("#jieguo");
|
||||
const selectedGroups = [];
|
||||
|
||||
selections.forEach(function (selection, index) {
|
||||
const step = stepsConfig[index] || {};
|
||||
const numbers =
|
||||
selection && Array.isArray(selection.numbers)
|
||||
? selection.numbers
|
||||
: [];
|
||||
|
||||
if (!numbers.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedClass = step.classok || "selected";
|
||||
const balls = numbers
|
||||
.map(function (number) {
|
||||
return (
|
||||
'<div class="ball ball' +
|
||||
index +
|
||||
" " +
|
||||
selectedClass +
|
||||
'">' +
|
||||
CommonUtil.escapeHtml(formatSelectedBallText(number)) +
|
||||
"</div>"
|
||||
);
|
||||
})
|
||||
.join("");
|
||||
|
||||
selectedGroups.push(
|
||||
'<div class="FormBox ballok' + index + '">' + balls + "</div>",
|
||||
);
|
||||
});
|
||||
|
||||
if (selectedGroups.length) {
|
||||
$jieguo.html(
|
||||
'<div class="FormBox">' +
|
||||
selectedGroups.join('<span class="selection-separator">|</span>') +
|
||||
"</div>",
|
||||
);
|
||||
} else {
|
||||
$jieguo.text("暂无号码");
|
||||
}
|
||||
|
||||
layui.$("#vv").val(buildPayPredictedCode(selections));
|
||||
|
||||
}
|
||||
Vendored
+2
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 371 B |
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,948 @@
|
||||
/* common */
|
||||
.ke-inline-block {
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.ke-clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
.ke-clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.ke-shadow {
|
||||
box-shadow: 1px 1px 3px #A0A0A0;
|
||||
-moz-box-shadow: 1px 1px 3px #A0A0A0;
|
||||
-webkit-box-shadow: 1px 1px 3px #A0A0A0;
|
||||
filter: progid:DXImageTransform.Microsoft.Shadow(color='#A0A0A0', Direction=135, Strength=3);
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
.ke-menu a,
|
||||
.ke-menu a:hover,
|
||||
.ke-dialog a,
|
||||
.ke-dialog a:hover {
|
||||
color: #337FE5;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* icons */
|
||||
.ke-icon-source {
|
||||
background-position: 0px 0px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-preview {
|
||||
background-position: 0px -16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-print {
|
||||
background-position: 0px -32px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-undo {
|
||||
background-position: 0px -48px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-redo {
|
||||
background-position: 0px -64px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-cut {
|
||||
background-position: 0px -80px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-copy {
|
||||
background-position: 0px -96px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-paste {
|
||||
background-position: 0px -112px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-selectall {
|
||||
background-position: 0px -128px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-justifyleft {
|
||||
background-position: 0px -144px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-justifycenter {
|
||||
background-position: 0px -160px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-justifyright {
|
||||
background-position: 0px -176px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-justifyfull {
|
||||
background-position: 0px -192px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-insertorderedlist {
|
||||
background-position: 0px -208px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-insertunorderedlist {
|
||||
background-position: 0px -224px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-indent {
|
||||
background-position: 0px -240px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-outdent {
|
||||
background-position: 0px -256px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-subscript {
|
||||
background-position: 0px -272px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-superscript {
|
||||
background-position: 0px -288px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-date {
|
||||
background-position: 0px -304px;
|
||||
width: 25px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-time {
|
||||
background-position: 0px -320px;
|
||||
width: 25px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-formatblock {
|
||||
background-position: 0px -336px;
|
||||
width: 25px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-fontname {
|
||||
background-position: 0px -352px;
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-fontsize {
|
||||
background-position: 0px -368px;
|
||||
width: 23px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-forecolor {
|
||||
background-position: 0px -384px;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-hilitecolor {
|
||||
background-position: 0px -400px;
|
||||
width: 23px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-bold {
|
||||
background-position: 0px -416px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-italic {
|
||||
background-position: 0px -432px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-underline {
|
||||
background-position: 0px -448px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-strikethrough {
|
||||
background-position: 0px -464px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-removeformat {
|
||||
background-position: 0px -480px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-image {
|
||||
background-position: 0px -496px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-flash {
|
||||
background-position: 0px -512px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-media {
|
||||
background-position: 0px -528px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-div {
|
||||
background-position: 0px -544px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-formula {
|
||||
background-position: 0px -576px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-hr {
|
||||
background-position: 0px -592px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-emoticons {
|
||||
background-position: 0px -608px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-link {
|
||||
background-position: 0px -624px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-unlink {
|
||||
background-position: 0px -640px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-fullscreen {
|
||||
background-position: 0px -656px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-about {
|
||||
background-position: 0px -672px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-plainpaste {
|
||||
background-position: 0px -704px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-wordpaste {
|
||||
background-position: 0px -720px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-table {
|
||||
background-position: 0px -784px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablemenu {
|
||||
background-position: 0px -768px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tableinsert {
|
||||
background-position: 0px -784px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tabledelete {
|
||||
background-position: 0px -800px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablecolinsertleft {
|
||||
background-position: 0px -816px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablecolinsertright {
|
||||
background-position: 0px -832px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablerowinsertabove {
|
||||
background-position: 0px -848px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablerowinsertbelow {
|
||||
background-position: 0px -864px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablecoldelete {
|
||||
background-position: 0px -880px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablerowdelete {
|
||||
background-position: 0px -896px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablecellprop {
|
||||
background-position: 0px -912px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tableprop {
|
||||
background-position: 0px -928px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-checked {
|
||||
background-position: 0px -944px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-code {
|
||||
background-position: 0px -960px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-map {
|
||||
background-position: 0px -976px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-baidumap {
|
||||
background-position: 0px -976px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-lineheight {
|
||||
background-position: 0px -992px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-clearhtml {
|
||||
background-position: 0px -1008px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-pagebreak {
|
||||
background-position: 0px -1024px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-insertfile {
|
||||
background-position: 0px -1040px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-quickformat {
|
||||
background-position: 0px -1056px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-template {
|
||||
background-position: 0px -1072px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablecellsplit {
|
||||
background-position: 0px -1088px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablerowmerge {
|
||||
background-position: 0px -1104px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablerowsplit {
|
||||
background-position: 0px -1120px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablecolmerge {
|
||||
background-position: 0px -1136px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-tablecolsplit {
|
||||
background-position: 0px -1152px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-anchor {
|
||||
background-position: 0px -1168px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-search {
|
||||
background-position: 0px -1184px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-new {
|
||||
background-position: 0px -1200px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-specialchar {
|
||||
background-position: 0px -1216px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-multiimage {
|
||||
background-position: 0px -1232px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-zijianju {
|
||||
background-position: 0px -1248px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ke-icon-duansuo {
|
||||
background-position: 0px -1264px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
/* container */
|
||||
.ke-container {
|
||||
display: block;
|
||||
/*border: 1px solid #CCCCCC;*/
|
||||
background-color: #FFF;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
/* toolbar */
|
||||
.ke-toolbar {
|
||||
border-bottom: 1px solid #CCC;
|
||||
background-color: #F0F0EE;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
}
|
||||
.ke-toolbar-icon {
|
||||
background-repeat: no-repeat;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.ke-toolbar-icon-url {
|
||||
background-image: url(default.png);
|
||||
}
|
||||
.ke-toolbar .ke-outline {
|
||||
border: 1px solid #F0F0EE;
|
||||
/*margin: 1px;*/
|
||||
margin: 8px 9px;
|
||||
padding: 1px 2px;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.ke-toolbar .ke-on {
|
||||
border: 1px solid #5690D2;
|
||||
}
|
||||
.ke-toolbar .ke-selected {
|
||||
border: 1px solid #5690D2;
|
||||
background-color: #E9EFF6;
|
||||
}
|
||||
.ke-toolbar .ke-disabled {
|
||||
cursor: default;
|
||||
}
|
||||
.ke-toolbar .ke-separator {
|
||||
height: 16px;
|
||||
margin: 2px 3px;
|
||||
border-left: 1px solid #A0A0A0;
|
||||
border-right: 1px solid #FFFFFF;
|
||||
border-top:0;
|
||||
border-bottom:0;
|
||||
width: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.ke-toolbar .ke-hr {
|
||||
overflow: hidden;
|
||||
height: 1px;
|
||||
clear: both;
|
||||
}
|
||||
/* edit */
|
||||
.ke-edit {
|
||||
padding: 0;
|
||||
}
|
||||
.ke-edit-iframe,
|
||||
.ke-edit-textarea {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.ke-edit-textarea {
|
||||
font: 12px/1.5 "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
|
||||
color: #000;
|
||||
overflow: auto;
|
||||
resize: none;
|
||||
}
|
||||
.ke-edit-textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
/* statusbar */
|
||||
.ke-statusbar {
|
||||
position: relative;
|
||||
background-color: #F0F0EE;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
*height: 12px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
cursor: s-resize;
|
||||
}
|
||||
.ke-statusbar-center-icon {
|
||||
background-position: -0px -754px;
|
||||
width: 15px;
|
||||
height: 11px;
|
||||
background-image: url(default.png);
|
||||
}
|
||||
.ke-statusbar-right-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
cursor: se-resize;
|
||||
background-position: -5px -741px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-image: url(default.png);
|
||||
}
|
||||
/* menu */
|
||||
.ke-menu {
|
||||
border: 1px solid #A0A0A0;
|
||||
background-color: #F1F1F1;
|
||||
color: #222222;
|
||||
padding: 2px;
|
||||
font-family: "sans serif",tahoma,verdana,helvetica;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ke-menu-item {
|
||||
border: 1px solid #F1F1F1;
|
||||
background-color: #F1F1F1;
|
||||
color: #222222;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ke-menu-item-on {
|
||||
border: 1px solid #5690D2;
|
||||
background-color: #E9EFF6;
|
||||
}
|
||||
.ke-menu-item-left {
|
||||
width: 27px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ke-menu-item-center {
|
||||
width: 0;
|
||||
height: 24px;
|
||||
border-left: 1px solid #E3E3E3;
|
||||
border-right: 1px solid #FFFFFF;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.ke-menu-item-center-on {
|
||||
border-left: 1px solid #E9EFF6;
|
||||
border-right: 1px solid #E9EFF6;
|
||||
}
|
||||
.ke-menu-item-right {
|
||||
border: 0;
|
||||
padding: 0 0 0 5px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ke-menu-separator {
|
||||
margin: 2px 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
/* colorpicker */
|
||||
.ke-colorpicker {
|
||||
border: 1px solid #A0A0A0;
|
||||
background-color: #F1F1F1;
|
||||
color: #222222;
|
||||
padding: 2px;
|
||||
}
|
||||
.ke-colorpicker-table {
|
||||
border:0;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border-collapse: separate;
|
||||
}
|
||||
.ke-colorpicker-cell {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 1px solid #F0F0EE;
|
||||
cursor: pointer;
|
||||
margin:3px;
|
||||
padding:0;
|
||||
}
|
||||
.ke-colorpicker-cell-top {
|
||||
font-family: "sans serif",tahoma,verdana,helvetica;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
border: 1px solid #F0F0EE;
|
||||
cursor: pointer;
|
||||
margin:0;
|
||||
padding:0;
|
||||
text-align: center;
|
||||
}
|
||||
.ke-colorpicker-cell-on {
|
||||
border: 1px solid #5690D2;
|
||||
}
|
||||
.ke-colorpicker-cell-selected {
|
||||
border: 1px solid #2446AB;
|
||||
}
|
||||
.ke-colorpicker-cell-color {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* dialog */
|
||||
.ke-dialog {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ke-dialog .ke-header {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ke-dialog .ke-header .ke-left {
|
||||
float: left;
|
||||
}
|
||||
.ke-dialog .ke-header .ke-right {
|
||||
float: right;
|
||||
}
|
||||
.ke-dialog .ke-header label {
|
||||
margin-right: 0;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ke-dialog-content {
|
||||
background-color: #FFF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #333;
|
||||
border: 1px solid #A0A0A0;
|
||||
}
|
||||
.ke-dialog-shadow {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 3px 3px 7px #999;
|
||||
-moz-box-shadow: 3px 3px 7px #999;
|
||||
-webkit-box-shadow: 3px 3px 7px #999;
|
||||
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.4');
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
.ke-dialog-header {
|
||||
border:0;
|
||||
margin:0;
|
||||
padding: 0 10px;
|
||||
background: url(background.png) repeat scroll 0 0 #F0F0EE;
|
||||
border-bottom: 1px solid #CFCFCF;
|
||||
height: 24px;
|
||||
font: 12px/24px "sans serif",tahoma,verdana,helvetica;
|
||||
text-align: left;
|
||||
color: #222;
|
||||
cursor: move;
|
||||
}
|
||||
.ke-dialog-icon-close {
|
||||
display: block;
|
||||
background: url(default.png) no-repeat scroll 0px -688px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ke-dialog-body {
|
||||
font: 12px/1.5 "sans serif",tahoma,verdana,helvetica;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.ke-dialog-body textarea {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
resize: none;
|
||||
}
|
||||
.ke-dialog-body textarea:focus,
|
||||
.ke-dialog-body input:focus,
|
||||
.ke-dialog-body select:focus {
|
||||
outline: none;
|
||||
}
|
||||
.ke-dialog-body label {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.ke-dialog-body img {
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.ke-dialog-body select {
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
width: auto;
|
||||
}
|
||||
.ke-dialog-body .ke-textarea {
|
||||
display: block;
|
||||
width: 408px;
|
||||
height: 260px;
|
||||
font-family: "sans serif",tahoma,verdana,helvetica;
|
||||
font-size: 12px;
|
||||
border-color: #848484 #E0E0E0 #E0E0E0 #848484;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
.ke-dialog-body .ke-form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ke-dialog-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 1px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.ke-dialog-loading-content {
|
||||
background: url("../common/loading.gif") no-repeat;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
.ke-dialog-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ke-dialog-footer {
|
||||
font: 12px/1 "sans serif",tahoma,verdana,helvetica;
|
||||
text-align: right;
|
||||
padding:0 0 5px 0;
|
||||
background-color: #FFF;
|
||||
width: 100%;
|
||||
}
|
||||
.ke-dialog-preview,
|
||||
.ke-dialog-yes {
|
||||
margin: 5px;
|
||||
}
|
||||
.ke-dialog-no {
|
||||
margin: 5px 10px 5px 5px;
|
||||
}
|
||||
.ke-dialog-mask {
|
||||
background-color:#FFF;
|
||||
filter:alpha(opacity=50);
|
||||
opacity:0.5;
|
||||
}
|
||||
.ke-button-common {
|
||||
background: url(background.png) no-repeat;
|
||||
cursor: pointer;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ke-button-outer {
|
||||
background-position: 0 -25px;
|
||||
padding: 0;
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.ke-button {
|
||||
background-position: right -25px;
|
||||
padding: 0 14px 0 12px;
|
||||
margin: 0 0 0 2px;
|
||||
font-family: "sans serif",tahoma,verdana,helvetica;
|
||||
border: 0 none;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* inputbox */
|
||||
.ke-input-text {
|
||||
background-color:#FFFFFF;
|
||||
font-family: "sans serif",tahoma,verdana,helvetica;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
height: 17px;
|
||||
padding: 2px 4px;
|
||||
border-color: #848484 #E0E0E0 #E0E0E0 #848484;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.ke-input-number {
|
||||
width: 50px;
|
||||
}
|
||||
.ke-input-color {
|
||||
border: 1px solid #A0A0A0;
|
||||
background-color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding-left: 5px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.ke-upload-button {
|
||||
position: relative;
|
||||
}
|
||||
.ke-upload-area {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
*height: 25px;
|
||||
}
|
||||
.ke-upload-area .ke-upload-file {
|
||||
position: absolute;
|
||||
font-size: 60px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 811212;
|
||||
border: 0 none;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
/* tabs */
|
||||
.ke-tabs {
|
||||
font: 12px/1 "sans serif",tahoma,verdana,helvetica;
|
||||
border-bottom:1px solid #A0A0A0;
|
||||
padding-left:5px;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
.ke-tabs-ul {
|
||||
list-style-image:none;
|
||||
list-style-position:outside;
|
||||
list-style-type:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.ke-tabs-li {
|
||||
position: relative;
|
||||
border: 1px solid #A0A0A0;
|
||||
background-color: #F0F0EE;
|
||||
margin: 0 2px -1px 0;
|
||||
padding: 0 20px;
|
||||
float: left;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ke-tabs-li-selected {
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid #FFF;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
}
|
||||
.ke-tabs-li-on {
|
||||
background-color: #FFF;
|
||||
color: #000;
|
||||
}
|
||||
/* progressbar */
|
||||
.ke-progressbar {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ke-progressbar-bar {
|
||||
border: 1px solid #6FA5DB;
|
||||
width: 80px;
|
||||
height: 5px;
|
||||
margin: 10px 10px 0 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.ke-progressbar-bar-inner {
|
||||
width: 0;
|
||||
height: 5px;
|
||||
background-color: #6FA5DB;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ke-progressbar-percent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40%;
|
||||
display: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* date:2019/08/16
|
||||
* author:Mr.Chung
|
||||
* description:此处放layui自定义扩展
|
||||
* version:2.0.4
|
||||
*/
|
||||
|
||||
window.rootPath = (function (src) {
|
||||
src = document.scripts[document.scripts.length - 1].src;
|
||||
return src.substring(0, src.lastIndexOf("/") + 1);
|
||||
})();
|
||||
|
||||
layui.config({
|
||||
base: rootPath + "lay-module/",
|
||||
version: true
|
||||
}).extend({
|
||||
xphp: "layuimini/xphp", // layuimini后台扩展
|
||||
miniAdmin: "layuimini/miniAdmin", // layuimini后台扩展
|
||||
miniMenu: "layuimini/miniMenu", // layuimini菜单扩展
|
||||
miniTab: "layuimini/miniTab", // layuimini tab扩展
|
||||
miniTheme: "layuimini/miniTheme", // layuimini 主题扩展
|
||||
step: 'step-lay/step', // 分步表单扩展
|
||||
treetable: 'treetable-lay/treetable', //table树形扩展
|
||||
tableSelect: 'tableSelect/tableSelect', // table选择扩展
|
||||
echarts: 'echarts/echarts', // echarts图表扩展
|
||||
echartsTheme: 'echarts/echartsTheme', // echarts图表主题扩展
|
||||
wangEditor: 'wangEditor/wangEditor', // wangEditor富文本扩展
|
||||
layarea: 'layarea/layarea', // 省市县区三级联动下拉选择器
|
||||
selectM: 'selectM/selectM',//下拉多选
|
||||
selectN: 'selectN/selectN',//多个select循环无限下级选
|
||||
numinput: 'numinput/numinput',//数字输入
|
||||
regionCheckBox: 'regionCheckBox/regionCheckBox',//省市县选择
|
||||
openTable: 'openTable/openTable',//用途不大
|
||||
iPicker: 'ipicker/iPicker',//多个panel无限循环下级多选
|
||||
layselect: 'layselect/layselect',//下拉单选,支持联动
|
||||
selectY: 'selectY/selectY',//只需要pid,id,name，就可以无限级选择
|
||||
selectY2: 'selectY/selectY2',//只需要pid,id,name，就可以无限级选择
|
||||
tableFilter: 'tablefilter/tableFilter',//列数值筛选
|
||||
sliderVerify: 'sliderVerify/sliderVerify',//滑动验证
|
||||
cascader: 'cascader/cascader',//级联选择组件
|
||||
checkbox: 'checkbox/checkbox',//多选美化
|
||||
dropdownTable: 'dropdownTable/dropdownTable',//下拉表格选择组件
|
||||
hashes: 'hashes/hashes',//hash:md5 sha1 sha256 sha512 crc32
|
||||
inputTag: 'inputTag/inputTag',//标签输入
|
||||
jmSheet: 'jmSheet/jmSheet',//底部弹出sheet
|
||||
location: 'location/location',//百度地图经纬度
|
||||
locationX: 'location/locationX',//百度地图经纬度x
|
||||
tableMerge: 'tableMerge/tableMerge',//表格列合并
|
||||
textool: 'textool/textool.min',//文本输入工具
|
||||
moreMenus: 'moreMenus/moreMenus',//更多／隐藏
|
||||
sliderTime: 'sliderTime/sliderTime',//时间范围选择
|
||||
tableEdit: 'tableTree/tableEdit',//表格编辑
|
||||
tableTree: 'tableTree/tableTree',//表格树
|
||||
transferTable: 'transferTable/transferTable',//穿梭
|
||||
notice: "notice/notice", // layuimini后台扩展
|
||||
mods: "mods/mods", // jsannotice
|
||||
passwordIntensity: "passwordIntensity/passwordIntensity", // jsannotice
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,10 @@
|
||||
.checkBox .block{float:left; margin:5px;padding:6px 15px;height:18px;text-align:center; border:1px solid #ccc;position:relative;cursor:pointer;overflow:hidden;}
|
||||
.checkBox .block .choice{position:absolute;right:0px;bottom:0px;display:none;}
|
||||
.checkBox .block.on{border:1px solid #1E9FFF;}
|
||||
.checkBox .block.on .choice{position:absolute;right:0px;bottom:0px;display:block;}
|
||||
.checkBox .block.on .choice .triangle{position:absolute;right:0px;bottom:0px;border-bottom:18px solid #1E9FFF;border-left: 18px solid transparent;}
|
||||
.checkBox .block.on .choice .right{position:absolute;right:5px;bottom:5px;width:10px;height:10px;}
|
||||
.checkBox .block .del{width:18px; height:18px; background:#fff; border:0px solid #ccc; border-radius:3px; overflow:hidden; cursor:pointer; position:absolute; bottom:-20px; right:0px; transition: background .3s ease, border .2s ease, bottom .2s ease;display:block;}
|
||||
.checkBox .block .del:hover{background:#FF5722; border:1px solid #FF5722;}
|
||||
.checkBox .block:hover .del{bottom:0px;}
|
||||
.checkBox .block.on .del{display:none}
|
||||
@@ -0,0 +1,69 @@
|
||||
layui.define('jquery', function(exports){
|
||||
"use strict";
|
||||
var $ = layui.$
|
||||
,hint = layui.hint();
|
||||
var CheckBox = function(options){
|
||||
this.options = options;
|
||||
};
|
||||
//初始化
|
||||
CheckBox.prototype.init = function(elem){
|
||||
var that = this;
|
||||
elem.addClass('checkBox'); //添加checkBox样式
|
||||
that.checkbox(elem);
|
||||
};
|
||||
//树节点解析
|
||||
CheckBox.prototype.checkbox = function(elem,children){
|
||||
var that = this, options = that.options;
|
||||
var nodes = children || options.nodes;
|
||||
layui.each(nodes, function(index, item){
|
||||
var li = $(['<li class="block'+(item.on?' on':'')+'" value="'+item.name+'" onmouseover="layui.layer.tips(\''+item.type+'\',this,{tips:2})" onmouseout="layui.layer.closeAll(\'tips\');">'+item.name,'<i class="choice"><i class="triangle"></i><i class="right layui-icon layui-icon-ok"></i></i><i class="del"><i class="layui-icon layui-icon-delete"></i></i><span class="hide">'+(item.on?'<input type="hidden" name="'+item.name+'" value="'+item.type+'">':'')+'</span></li>'].join(''));
|
||||
elem.append(li);
|
||||
//触发点击节点回调
|
||||
typeof options.click === 'function' && that.click(li, item);
|
||||
//触发删除节点回调
|
||||
typeof options.del === 'function' && that.del(li, item);
|
||||
});
|
||||
};
|
||||
//点击节点回调
|
||||
CheckBox.prototype.click = function(elem, item){
|
||||
var that = this, options = that.options;
|
||||
elem.on('click', function(e){
|
||||
elem.toggleClass("on");
|
||||
if(elem.hasClass("on")){
|
||||
item.on = true;
|
||||
elem.children("span.hide").html('<input type="hidden" name="'+item.name+'" value="'+item.type+'">');
|
||||
}else{
|
||||
item.on = false;
|
||||
elem.children("span.hide").html('');
|
||||
}
|
||||
layui.stope(e);
|
||||
options.click(item);
|
||||
});
|
||||
};
|
||||
//点击节点回调
|
||||
CheckBox.prototype.del = function(elem, item){
|
||||
var that = this, options = that.options;
|
||||
elem.children('i.del').on('click', function(e){
|
||||
var index = layer.confirm('确定删除 ['+item.name+'] 吗？', {
|
||||
btn: ['删除','取消']
|
||||
}, function(){
|
||||
layer.close(index);
|
||||
if(options.del(item)){
|
||||
elem.closest(".block").remove();
|
||||
layui.stope(e);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
//暴露接口
|
||||
exports('checkbox', function(options){
|
||||
var checkbox = new CheckBox(options = options || {});
|
||||
var elem = $(options.elem);
|
||||
if(!elem[0]){
|
||||
return hint.error('layui.checkbox 没有找到'+ options.elem +'元素');
|
||||
}
|
||||
checkbox.init(elem);
|
||||
});
|
||||
}).link(layui.cache.base+"checkbox/checkbox.css?v="+(new Date).getTime());
|
||||
@@ -0,0 +1,677 @@
|
||||
layui.define(['jquery', 'dropdown', 'table', 'form'], function (exports) {
|
||||
"use strict";
|
||||
|
||||
var dropdown = layui.dropdown, //下拉菜单
|
||||
table = layui.table, //table组件
|
||||
$ = layui.jquery, //jQuery
|
||||
form = layui.form, //表单
|
||||
moduleName = 'dropdownTable', //模块名
|
||||
|
||||
dropdownTable = {
|
||||
version: '1.0.4',
|
||||
config: {
|
||||
selectType: 'radio',
|
||||
emptyMsg: '点击此处选择'
|
||||
},
|
||||
index: layui[moduleName] ? (layui[moduleName].index + 10000) : 0,
|
||||
set: function (options) {
|
||||
this.config = $.extend(true, {}, that.config, options);
|
||||
let config = this.config,
|
||||
selectType = config.selectType,
|
||||
selectField = { type: selectType, fixed: 'left' },
|
||||
cols = config?.selectTable?.cols ?? [[]];
|
||||
cols.forEach((item) => {
|
||||
if (JSON.stringify(item).indexOf(JSON.stringify(selectField)) < 0) {
|
||||
item.splice(0, 0, selectField);
|
||||
}
|
||||
});
|
||||
return that;
|
||||
}
|
||||
},
|
||||
//操作当前实例
|
||||
thisModule = function () {
|
||||
let that = this,
|
||||
options = that.config,
|
||||
id = options.id || that.index;
|
||||
thisModule.that[id] = that; //记录当前实例对象
|
||||
return {
|
||||
config: options,
|
||||
reload: function (options) {
|
||||
that.reload.call(that, options);
|
||||
}
|
||||
};
|
||||
},
|
||||
//构造器
|
||||
Class = function (options) {
|
||||
let index = ++dropdownTable.index;
|
||||
this.index = index;
|
||||
this.tableId = 'dropdown-select-table-' + index; //初始化当前下拉表格的ID
|
||||
this.dropdownId = 'dropdown-' + index; //初始化当前下拉组件的ID
|
||||
//其中selectedIds为初始化被选择的值，selectedDisplayValues为初始化被选中值的显示值
|
||||
this.config = $.extend(true, {}, dropdownTable.config, options, {
|
||||
selectedIds: [],
|
||||
selectedDisplayValues: []
|
||||
});
|
||||
let config = this.config,
|
||||
selectType = config.selectType,
|
||||
selectField = { type: selectType, fixed: 'left' },
|
||||
selectTableCols = config?.selectTable?.cols ?? [[]];
|
||||
if (selectType === 'checkbox') {
|
||||
selectTableCols.forEach((item) => {
|
||||
if (JSON.stringify(item).indexOf(JSON.stringify(selectField)) < 0) {
|
||||
item.splice(0, 0, selectField);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.render();
|
||||
};
|
||||
|
||||
//重载表格实例
|
||||
Class.prototype.reloadSelectTable = function (selectTableConfig) {
|
||||
let config = this.config;
|
||||
layui.each(selectTableConfig, function (key, item) {
|
||||
if (layui.type(item) === 'array') {
|
||||
delete config.selectTable[key];
|
||||
}
|
||||
});
|
||||
$.extend(true, config.selectTable, selectTableConfig);
|
||||
this.clearSelected();
|
||||
};
|
||||
|
||||
//清空选中
|
||||
Class.prototype.clearSelected = function () {
|
||||
let config = this.config,
|
||||
bindInput = config.bindInput;
|
||||
$(bindInput).val("");
|
||||
$(bindInput)[0].dataset.displayValue = '';
|
||||
$.extend(config, { selectedIds: [], selectedDisplayValues: [] });
|
||||
this.setSelectedDisplayAndValue();
|
||||
}
|
||||
|
||||
//渲染
|
||||
Class.prototype.render = function () {
|
||||
let that = this,
|
||||
options = that.config,
|
||||
_this = options.elem = $(options.elem);
|
||||
if (!_this[0]) {
|
||||
return;
|
||||
}
|
||||
|
||||
that.initElemArea();
|
||||
that.iniDropdown();
|
||||
};
|
||||
|
||||
//初始化绑定元素区域
|
||||
Class.prototype.initElemArea = function () {
|
||||
let that = this,
|
||||
config = this.config,
|
||||
elem = config.elem,
|
||||
searchName = this.config?.searchName ?? 'keywords';
|
||||
$(elem).css({
|
||||
'display': 'inline-block',
|
||||
'width': '80%',
|
||||
'height': '100%',
|
||||
'min-height': '35px',
|
||||
'border': '1px solid #eee',
|
||||
'line-height': '35px',
|
||||
'box-sizing': 'border-box',
|
||||
'padding': '0 10px',
|
||||
'cursor': 'pointer'
|
||||
});
|
||||
$(elem).hover(() => {
|
||||
$(elem).css({ 'border-color': '#e2e2e2' });
|
||||
}, () => {
|
||||
$(elem).css({ 'border-color': '#eee' });
|
||||
});
|
||||
|
||||
let selectButton = $("<button type='button' class='layui-btn layui-btn-primary'>选择</button>")
|
||||
selectButton.css({
|
||||
'display': 'inline-block',
|
||||
'width': '20%',
|
||||
'min-width': '45px',
|
||||
'height': '100%',
|
||||
'box-sizing': 'border-box',
|
||||
'font-size': '12px',
|
||||
'padding': '0',
|
||||
'line-height': '36px'
|
||||
});
|
||||
if (config?.needPopup ?? true) {
|
||||
$(elem).after(selectButton);
|
||||
} else {
|
||||
$(elem).css({ 'width': '100%' });
|
||||
}
|
||||
|
||||
let selectContent = `
|
||||
<div class="select-container" >
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md7 table-container">
|
||||
<div class="layui-bg-green header">
|
||||
<div class="layui-font-14">选择</div>
|
||||
<form class="layui-form" style="float: right;" lay-filter="data-table-search-form">
|
||||
<div class="layui-form-item" style="margin:0;">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="data_table_${searchName}" name="data_table_${searchName}" placeholder="请输入您要搜索的内容" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button id="data-table-search-button" type="button" class="layui-btn layui-btn-primary" style="background-color:white"><i class="layui-icon layui-icon-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!--表格-->
|
||||
<div class="table-item">
|
||||
<table class="layui-hide" id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md5 table-container">
|
||||
<div class="layui-bg-green header">
|
||||
<div class="layui-font-14">选择结果</div>
|
||||
</div>
|
||||
|
||||
<div class="table-item">
|
||||
<table class="layui-hide" id="selected-table" lay-filter="selected-table"></table>
|
||||
<script type="text/html" id="selected-table-opt-bar">
|
||||
<div class="layui-clear-space">
|
||||
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">移除</a>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.select-container{
|
||||
width:100%;
|
||||
padding:10px;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
box-sizing: border-box;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.table-container>.header {
|
||||
width: 100%;
|
||||
display: table;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.table-container>.header>* {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-container>.table-item {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
selectButton.click(() => {
|
||||
layer.open({
|
||||
title: '选择',
|
||||
type: 1,
|
||||
area: ['70%', '80%'],
|
||||
maxmin: true,
|
||||
btn: ['确认', '取消'],
|
||||
content: selectContent,
|
||||
success: () => {
|
||||
renderSelectedTable();
|
||||
renderDataTable();
|
||||
bindTableEvent();
|
||||
initSelectedTable();
|
||||
bindDataTableSearchFormEvent();
|
||||
},
|
||||
yes: index => {
|
||||
let selectedData = table.getData('selected-table') ?? [];
|
||||
let selectedIds = selectedData.map(item => item.id);
|
||||
config.selectedIds = selectedIds;
|
||||
config.selectedDisplayValues = selectedData.map(item => item.displayValue);
|
||||
that.setSelectedDisplayAndValue();
|
||||
layer.close(index);
|
||||
let onSelected = config.onSelected;
|
||||
if ($.isFunction(onSelected)) {
|
||||
onSelected(selectedIds);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function renderDataTable() {
|
||||
let tableNeedConfig = {
|
||||
id: 'data-table',
|
||||
elem: '#data-table',
|
||||
done: function (res) {
|
||||
setDataTableSelected();
|
||||
}
|
||||
},
|
||||
tableConfig = $.extend({}, config.selectTable, tableNeedConfig);
|
||||
table.render(tableConfig);
|
||||
}
|
||||
|
||||
function renderSelectedTable() {
|
||||
table.render({
|
||||
elem: '#selected-table',
|
||||
cols: [
|
||||
[
|
||||
{ field: 'id', title: 'ID', width: 80, sort: true },
|
||||
{ field: 'displayValue', title: '值' },
|
||||
{ field: 'originValue', title: '原始值', hide: true },
|
||||
{ fixed: 'right', title: '操作', width: 70, toolbar: '#selected-table-opt-bar' }
|
||||
]
|
||||
],
|
||||
data: []
|
||||
});
|
||||
}
|
||||
|
||||
function bindDataTableSearchFormEvent() {
|
||||
$('#data-table-search-button').click(() => {
|
||||
let where = {},
|
||||
searchValue = $('#data_table_' + searchName).val();
|
||||
where[searchName] = searchValue;
|
||||
table.reloadData('data-table', { page: { curr: 1 }, where: where });
|
||||
});
|
||||
}
|
||||
|
||||
function bindTableEvent() {
|
||||
table.on('row(data-table)', (obj) => {
|
||||
let data = obj.data;
|
||||
selectedTableReload({
|
||||
'id': data[config.selectTable.uniqueId],
|
||||
'displayValue': data[config.selectTable.displayField],
|
||||
'originValue': JSON.stringify(data)
|
||||
});
|
||||
});
|
||||
|
||||
table.on('tool(selected-table)', obj => {
|
||||
if (obj.event === 'del') {
|
||||
obj.del();
|
||||
setDataTableSelected();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectedTableReload(selectedData) {
|
||||
let originData = table.getData('selected-table') ?? [];
|
||||
if (originData.map(item => item.id).includes(selectedData.id)) {
|
||||
originData = originData.filter(item => item.id !== selectedData.id);
|
||||
} else {
|
||||
if (config.selectType === 'radio') {
|
||||
originData = [];
|
||||
}
|
||||
|
||||
originData.push(selectedData)
|
||||
}
|
||||
|
||||
table.reload('selected-table', {
|
||||
data: originData
|
||||
});
|
||||
setDataTableSelected();
|
||||
}
|
||||
|
||||
function setDataTableSelected() {
|
||||
let selectedIds = (table.getData('selected-table') ?? []).map(item => item.id + '');
|
||||
let data = (table.getData('data-table') ?? []);
|
||||
data.forEach((item, index) => {
|
||||
if (config.selectType === 'checkbox') {
|
||||
table.setRowChecked('data-table', {
|
||||
type: 'checkbox',
|
||||
index: index,
|
||||
checked: selectedIds.includes(item.id + '')
|
||||
});
|
||||
} else if (selectedIds.includes(item.id + '')) {
|
||||
table.setRowChecked('data-table', {
|
||||
type: 'radio',
|
||||
index: index,
|
||||
checked: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initSelectedTable() {
|
||||
let bindInput = config.bindInput,
|
||||
bindInputValue = $(bindInput).val() ?? '',
|
||||
bindInputDisplayValue = $(bindInput)[0].dataset.displayValue ?? '';
|
||||
|
||||
config.selectedIds = bindInputValue.split("$").filter(item => item !== '');
|
||||
config.selectedDisplayValues = bindInputDisplayValue.split("$").filter(item => item !== '');
|
||||
config.selectedIds.forEach((id, index) => {
|
||||
selectedTableReload({
|
||||
'id': id,
|
||||
'displayValue': config.selectedDisplayValues[index]
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//初始化下拉组件
|
||||
Class.prototype.iniDropdown = function () {
|
||||
let that = this,
|
||||
config = that.config,
|
||||
elem = config.elem;
|
||||
|
||||
dropdown.render({
|
||||
id: config.id ?? that.index,
|
||||
elem: elem,
|
||||
trigger: 'click',
|
||||
content: that.iniSelectTableHtml(),
|
||||
style: config?.style ?? 'min-width:450px;box-sizing:border-box; padding:10px;width:' + $(elem).width() + 'px',
|
||||
ready: () => {
|
||||
that.iniSelectTable();
|
||||
that.bindRowCheckToSelectTable();
|
||||
that.bindSelectBoxEventToSelectTable();
|
||||
that.bindSearchToSelectTable();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//初始化table的html文件
|
||||
Class.prototype.iniSelectTableHtml = function () {
|
||||
let index = this.index,
|
||||
tableId = this.tableId,
|
||||
searchName = this.config?.searchName ?? 'keywords',
|
||||
selectTableSearchFormId = 'select-table-search-' + index,
|
||||
selectTableSearchButtonId = 'select-table-search-button-' + index;
|
||||
|
||||
$.extend(this.config, {
|
||||
selectTableSearchFormId: selectTableSearchFormId,
|
||||
selectTableSearchButtonId: selectTableSearchButtonId
|
||||
});
|
||||
return [
|
||||
'<div class="chosen-window">',
|
||||
'<script type="text/html" id="' + selectTableSearchFormId + '">',
|
||||
'<form class="layui-form layui-row">',
|
||||
'<div class="layui-inline">',
|
||||
'<div class="layui-input-inline">',
|
||||
'<input type="text" name="' + searchName + '" placeholder="请输入要搜索的内容" class="layui-input">',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="layui-inline"><button class="layui-btn" lay-submit lay-filter="' + selectTableSearchButtonId + '">搜索</button></div>',
|
||||
'</form>',
|
||||
'</script>',
|
||||
'<table class="layui-hide" id="' + tableId + '" lay-filter="' + tableId + '"></table>',
|
||||
'</div>',
|
||||
].join('');
|
||||
}
|
||||
|
||||
//初始化表格
|
||||
Class.prototype.iniSelectTable = function () {
|
||||
let that = this,
|
||||
config = that.config,
|
||||
tableId = that.tableId,
|
||||
selectTable = config.selectTable,
|
||||
tableNeedConfig = {
|
||||
id: tableId,
|
||||
elem: '#' + tableId,
|
||||
toolbar: '#' + config.selectTableSearchFormId,
|
||||
defaultToolbar: ['filter'],
|
||||
done: function (res) {
|
||||
that.iniDefaultSelected(res.data)
|
||||
}
|
||||
},
|
||||
tableConfig = $.extend({}, selectTable, tableNeedConfig);
|
||||
table.render(tableConfig);
|
||||
};
|
||||
|
||||
//处理默认选中值的问题
|
||||
Class.prototype.iniDefaultSelected = function (tableData = []) {
|
||||
let that = this,
|
||||
tableId = that.tableId,
|
||||
config = that.config,
|
||||
selectType = config.selectType,
|
||||
bindInput = config.bindInput,
|
||||
bindInputValue = $(bindInput).val() ?? '',
|
||||
bindInputDisplayValue = $(bindInput)[0].dataset.displayValue ?? '';
|
||||
|
||||
config.selectedIds = bindInputValue.split("$").filter(item => item !== '');
|
||||
config.selectedDisplayValues = bindInputDisplayValue.split("$").filter(item => item !== '');
|
||||
|
||||
if (tableData.length === 0) {
|
||||
that.setSelectedDisplayAndValue();
|
||||
return;
|
||||
}
|
||||
|
||||
table.setRowChecked(tableId, { index: 'all', checked: false });
|
||||
let selectedIds = config.selectedIds;
|
||||
if (selectedIds.length > 0) {
|
||||
let tableIdData = tableData.map(item => item[config.selectTable.uniqueId].toString());
|
||||
if (selectType === 'radio' && selectedIds.length === 1) {
|
||||
let selectedItemIndex = tableIdData.indexOf(selectedIds[0].toString());
|
||||
if (selectedItemIndex >= 0) {
|
||||
table.setRowChecked(tableId, { type: selectType, index: selectedItemIndex, checked: true })
|
||||
}
|
||||
} else {
|
||||
tableIdData.forEach(function (item, itemIndex) {
|
||||
table.setRowChecked(tableId, {
|
||||
type: selectType,
|
||||
index: itemIndex,
|
||||
checked: selectedIds.includes(item)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
that.setSelectedDisplayAndValue();
|
||||
}
|
||||
|
||||
//处理选择框事件
|
||||
Class.prototype.bindSelectBoxEventToSelectTable = function () {
|
||||
let that = this,
|
||||
options = that.config,
|
||||
selectType = options.selectType,
|
||||
uniqueId = options.selectTable.uniqueId,
|
||||
displayField = options.selectTable.displayField,
|
||||
tableId = that.tableId;
|
||||
|
||||
if (selectType === 'radio') { //单选
|
||||
table.on('radio(' + tableId + ')', function (obj) {
|
||||
dealRadioSelectedData(obj.checked, obj.data);
|
||||
});
|
||||
} else { //复选框
|
||||
table.on('checkbox(' + tableId + ')', function (obj) {
|
||||
let eventType = obj.type,
|
||||
checked = obj.checked;
|
||||
|
||||
if (eventType === 'all') {
|
||||
table.getData(tableId).forEach(function (rowData) {
|
||||
dealCheckboxSelectedData(checked, rowData);
|
||||
});
|
||||
}
|
||||
|
||||
if (eventType === 'one') {
|
||||
dealCheckboxSelectedData(checked, obj.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dealRadioSelectedData(checked, rowData) {
|
||||
let rowId = rowData[uniqueId].toString();
|
||||
that.config.selectedIds = [];
|
||||
that.config.selectedDisplayValues = [];
|
||||
if (checked) {
|
||||
that.config.selectedIds.push(rowId);
|
||||
that.config.selectedDisplayValues.push(rowData[displayField]);
|
||||
}
|
||||
that.setSelectedDisplayAndValue();
|
||||
}
|
||||
|
||||
function dealCheckboxSelectedData(checked, rowData) {
|
||||
let rowId = rowData[uniqueId].toString();
|
||||
//处理选中
|
||||
if (checked && !that.config.selectedIds.includes(rowId)) {
|
||||
that.config.selectedIds.push(rowId);
|
||||
that.config.selectedDisplayValues.push(rowData[displayField]);
|
||||
}
|
||||
|
||||
//处理未选中
|
||||
if (!checked) {
|
||||
let cancelIndex = that.config.selectedIds.indexOf(rowId);
|
||||
if (rowId > -1) {
|
||||
that.config.selectedIds.splice(cancelIndex, 1);
|
||||
that.config.selectedDisplayValues.splice(cancelIndex, 1);
|
||||
}
|
||||
}
|
||||
that.setSelectedDisplayAndValue();
|
||||
}
|
||||
}
|
||||
|
||||
//绑定行点击事件到选择表中
|
||||
Class.prototype.bindRowCheckToSelectTable = function () {
|
||||
let that = this,
|
||||
tableId = that.tableId,
|
||||
options = that.config,
|
||||
selectType = options.selectType,
|
||||
uniqueId = options.selectTable.uniqueId,
|
||||
displayField = options.selectTable.displayField;
|
||||
|
||||
table.on('row(' + tableId + ')', function (obj) {
|
||||
let rowId = obj.data[uniqueId].toString(),
|
||||
checked;
|
||||
|
||||
if (!that.config.selectedIds.includes(rowId)) {
|
||||
if (selectType === 'radio') {
|
||||
that.config.selectedIds = [];
|
||||
that.config.selectedDisplayValues = [];
|
||||
}
|
||||
that.config.selectedIds.push(rowId);
|
||||
that.config.selectedDisplayValues.push(obj.data[displayField]);
|
||||
checked = true;
|
||||
} else {
|
||||
let cancelSelectedIdIndex = that.config.selectedIds.indexOf(rowId);
|
||||
that.config.selectedIds.splice(cancelSelectedIdIndex, 1);
|
||||
that.config.selectedDisplayValues.splice(cancelSelectedIdIndex, 1);
|
||||
checked = false;
|
||||
}
|
||||
obj.setRowChecked({
|
||||
type: selectType,
|
||||
checked: checked
|
||||
});
|
||||
//加入选中事件
|
||||
let onSelected = options.onSelected;
|
||||
if (checked && $.isFunction(onSelected)) {
|
||||
onSelected(new Array(obj.data[options.selectTable.uniqueId]));
|
||||
}
|
||||
that.setSelectedDisplayAndValue();
|
||||
});
|
||||
};
|
||||
|
||||
//绑定表格的搜索事件
|
||||
Class.prototype.bindSearchToSelectTable = function () {
|
||||
let tableId = this.tableId,
|
||||
selectTableSearchButtonId = this.config.selectTableSearchButtonId;
|
||||
form.on('submit(' + selectTableSearchButtonId + ')', function (data) {
|
||||
table.reloadData(tableId, { page: { curr: 1 }, where: data.field });
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
//设置显示值和实际存储值
|
||||
Class.prototype.setSelectedDisplayAndValue = function () {
|
||||
let that = this,
|
||||
tableId = that.tableId,
|
||||
options = that.config,
|
||||
elem = options.elem,
|
||||
bindInput = options.bindInput,
|
||||
selectedIds = options?.selectedIds ?? [],
|
||||
selectDisplayValues = options.selectedDisplayValues,
|
||||
emptyMsg = options.emptyMsg;
|
||||
|
||||
elem.find("span").remove();
|
||||
if (selectedIds.length > 0 && selectedIds.length === selectDisplayValues.length) {
|
||||
selectedIds.forEach((item, itemIndex) => {
|
||||
let selectedDisplayValue = selectDisplayValues[itemIndex],
|
||||
closeObject = $('<span style="margin-left:5px;color:#fff" data-selected-id="' + item + '">×<span>'),
|
||||
displayHtml = [
|
||||
'<span class="layui-badge layui-bg-green">' + selectedDisplayValue,
|
||||
'</span>',
|
||||
].join(''),
|
||||
displayObject = $(displayHtml).append(closeObject);
|
||||
|
||||
displayObject.attr({
|
||||
"style": "margin-left:5px;font-size:14px;padding:4px 6px"
|
||||
});
|
||||
|
||||
//绑定鼠标事件
|
||||
closeObject.on('mouseenter mouseleave', function (event) {
|
||||
let optType = event.type,
|
||||
fontColor = optType === 'mouseleave' ? 'white' : 'red';
|
||||
$(this).attr({ "style": "color:" + fontColor + ";margin-left:5px;cursor:pointer" });
|
||||
});
|
||||
|
||||
closeObject.on('click', function () {
|
||||
let _this = this,
|
||||
tableIdData = table.getData(tableId).map(item => item[options.selectTable.uniqueId]),
|
||||
selectedId = _this.dataset.selectedId,
|
||||
cancelSelectedIdIndex = that.config.selectedIds.indexOf(selectedId);
|
||||
that.config.selectedIds.splice(cancelSelectedIdIndex, 1);
|
||||
that.config.selectedDisplayValues.splice(cancelSelectedIdIndex, 1);
|
||||
if (tableIdData.includes(selectedId)) {
|
||||
if (options.selectType === 'radio') {
|
||||
table.setRowChecked(tableId, {
|
||||
type: 'radio',
|
||||
index: 'all',
|
||||
checked: false
|
||||
});
|
||||
} else {
|
||||
table.setRowChecked(tableId, {
|
||||
type: options.selectType,
|
||||
index: tableIdData.indexOf(selectedId),
|
||||
checked: false
|
||||
});
|
||||
}
|
||||
}
|
||||
that.setSelectedDisplayAndValue();
|
||||
});
|
||||
elem.append(displayObject);
|
||||
});
|
||||
} else {
|
||||
elem.append('<span class="layui-font-gray layui-font-14" style="margin-left:5px;">' + emptyMsg + '</span>');
|
||||
}
|
||||
$(bindInput).val(selectedIds.join("$"));
|
||||
$(bindInput)[0].dataset.displayValue = selectDisplayValues.join("$");
|
||||
}
|
||||
|
||||
//记录所有实例
|
||||
thisModule.that = {}; //记录所有实例对象
|
||||
|
||||
//获取当前实例对象
|
||||
thisModule.getThis = function (id) {
|
||||
let that = thisModule.that[id];
|
||||
if (!that) {
|
||||
hint.error(id ? (moduleName + ' instance with ID \'' + id + '\' not found') : 'ID argument required');
|
||||
}
|
||||
|
||||
return that;
|
||||
}
|
||||
|
||||
//重载实例
|
||||
dropdownTable.reloadSelectTable = function (id, selectTableConfig) {
|
||||
let that = thisModule.getThis(id);
|
||||
that.reloadSelectTable(selectTableConfig);
|
||||
return thisModule.call(that);
|
||||
}
|
||||
|
||||
//请空已选择
|
||||
dropdownTable.clearSelected = function (id) {
|
||||
let that = thisModule.getThis(id);
|
||||
that.clearSelected();
|
||||
}
|
||||
|
||||
//核心入口
|
||||
dropdownTable.render = function (options) {
|
||||
let inst = new Class(options);
|
||||
if (dropdownTable.index === 1) {
|
||||
console.log("欢迎使用Hg科技的dropdownTable组件，version:" + dropdownTable.version + ",期待您的建议！");
|
||||
}
|
||||
|
||||
inst.iniDefaultSelected();
|
||||
return thisModule.call(inst);
|
||||
}
|
||||
|
||||
exports(moduleName, dropdownTable);
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,492 @@
|
||||
layui.define(function(exports) {
|
||||
exports('echartsTheme',
|
||||
{
|
||||
"color": [
|
||||
"#3fb1e3",
|
||||
"#6be6c1",
|
||||
"#626c91",
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
],
|
||||
"backgroundColor": "rgba(252,252,252,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#666666"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "3"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "4"
|
||||
}
|
||||
},
|
||||
"symbolSize": "10",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "3"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "4"
|
||||
}
|
||||
},
|
||||
"symbolSize": "10",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"bar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#e6a0d2",
|
||||
"color0": "transparent",
|
||||
"borderColor": "#e6a0d2",
|
||||
"borderColor0": "#3fb1e3",
|
||||
"borderWidth": "2"
|
||||
}
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "1",
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"symbolSize": "10",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true,
|
||||
"color": [
|
||||
"#3fb1e3",
|
||||
"#6be6c1",
|
||||
"#626c91",
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
],
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#eeeeee",
|
||||
"borderColor": "#aaaaaa",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(63,177,227,0.25)",
|
||||
"borderColor": "#3fb1e3",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(63,177,227)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#eeeeee",
|
||||
"borderColor": "#aaaaaa",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(63,177,227,0.25)",
|
||||
"borderColor": "#3fb1e3",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(63,177,227)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"normal": {
|
||||
"borderColor": "#999999"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderColor": "#666666"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#cccccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#cccccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#626c91",
|
||||
"width": 1
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#626c91",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#626c91"
|
||||
}
|
||||
},
|
||||
"controlStyle": {
|
||||
"normal": {
|
||||
"color": "#626c91",
|
||||
"borderColor": "#626c91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#626c91",
|
||||
"borderColor": "#626c91",
|
||||
"borderWidth": 0.5
|
||||
}
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#3fb1e3",
|
||||
"borderColor": "rgba(63,177,227,0.15)"
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#626c91"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#626c91"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"color": [
|
||||
"#2a99c9",
|
||||
"#afe8ff"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"backgroundColor": "rgba(255,255,255,0)",
|
||||
"dataBackgroundColor": "rgba(222,222,222,1)",
|
||||
"fillerColor": "rgba(114,230,212,0.25)",
|
||||
"handleColor": "#cccccc",
|
||||
"handleSize": "100%",
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,87 @@
|
||||
@keyframes fariy-fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.fairy-tag-container {
|
||||
width: auto;
|
||||
min-height: 100px;
|
||||
padding: 5px;
|
||||
border: 1px solid #e6e6e6;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.fairy-tag-container:hover {
|
||||
border-color: #d2d2d2;
|
||||
}
|
||||
.fairy-tag-container span.fairy-tag {
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
padding: 5px 8px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 2px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.fairy-tag-container span.fairy-tag a {
|
||||
font-size: 11px;
|
||||
font-weight: bolder;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.fairy-tag-container span.fairy-tag a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fairy-tag-container span.fairy-bg-red {
|
||||
background-color: #FF5722;
|
||||
}
|
||||
.fairy-tag-container span.fairy-bg-orange {
|
||||
background-color: #FFB800;
|
||||
}
|
||||
.fairy-tag-container span.fairy-bg-green {
|
||||
background-color: #009688;
|
||||
}
|
||||
.fairy-tag-container span.fairy-bg-cyan {
|
||||
background-color: #2F4056;
|
||||
}
|
||||
.fairy-tag-container span.fairy-bg-blue {
|
||||
background-color: #1E9FFF;
|
||||
}
|
||||
.fairy-tag-container span.fairy-bg-black {
|
||||
background-color: #393D49;
|
||||
}
|
||||
.fairy-tag-container span.fairy-bg-red,
|
||||
.fairy-tag-container span.fairy-bg-orange,
|
||||
.fairy-tag-container span.fairy-bg-green,
|
||||
.fairy-tag-container span.fairy-bg-cyan,
|
||||
.fairy-tag-container span.fairy-bg-blue,
|
||||
.fairy-tag-container span.fairy-bg-black {
|
||||
color: #ffffff;
|
||||
}
|
||||
.fairy-tag-container .fairy-anim-fadein {
|
||||
animation: fariy-fadein 0.3s both;
|
||||
}
|
||||
.fairy-tag-container .fairy-tag-input[type='text'] {
|
||||
width: 80px;
|
||||
font-size: 13px;
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
outline: 0;
|
||||
}
|
||||
.fairy-tag-container .fairy-tag-input[type='text']:focus::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.fairy-tag-container .fairy-tag-input[type='text']:focus:-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.fairy-tag-container .fairy-tag-input[type='text']:focus:-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.fairy-tag-container .fairy-tag-input[type='text']:focus:-ms-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
/*# sourceMappingURL=inputTag.css.map */
|
||||
@@ -0,0 +1,150 @@
|
||||
/*
|
||||
* Name: inputTag
|
||||
* Author: cshaptx4869
|
||||
* Project: https://github.com/cshaptx4869/inputTag
|
||||
*/
|
||||
(function (define) {
|
||||
define(['jquery'], function ($) {
|
||||
"use strict";
|
||||
|
||||
class InputTag {
|
||||
|
||||
options = {
|
||||
elem: '.fairy-tag-input',
|
||||
theme: ['fairy-bg-red', 'fairy-bg-orange', 'fairy-bg-green', 'fairy-bg-cyan', 'fairy-bg-blue', 'fairy-bg-black'],
|
||||
data: [],
|
||||
removeKeyNum: 8,
|
||||
createKeyNum: 13,
|
||||
permanentData: [],
|
||||
};
|
||||
|
||||
get elem() {
|
||||
return $(this.options.elem);
|
||||
}
|
||||
|
||||
get copyData() {
|
||||
return [...this.options.data];
|
||||
}
|
||||
|
||||
constructor(options) {
|
||||
this.render(options);
|
||||
}
|
||||
|
||||
render(options) {
|
||||
this.init(options);
|
||||
this.listen();
|
||||
}
|
||||
|
||||
init(options) {
|
||||
var spans = '', that = this;
|
||||
this.options = $.extend(this.options, options);
|
||||
!this.elem.attr('placeholder') && this.elem.attr('placeholder', '添加标签');
|
||||
$.each(this.options.data, function (index, item) {
|
||||
spans += that.spanHtml(item);
|
||||
});
|
||||
this.elem.before(spans);
|
||||
}
|
||||
|
||||
listen() {
|
||||
var that = this;
|
||||
|
||||
this.elem.parent().on('click', 'a', function () {
|
||||
that.removeItem($(this).parent('span'));
|
||||
});
|
||||
|
||||
this.elem.parent().on('click', function () {
|
||||
that.elem.focus();
|
||||
});
|
||||
|
||||
this.elem.keydown(function (event) {
|
||||
var keyNum = (event.keyCode ? event.keyCode : event.which);
|
||||
if (keyNum === that.options.removeKeyNum) {
|
||||
if (!that.elem.val().trim()) {
|
||||
var closeItems = that.elem.parent().find('a');
|
||||
if (closeItems.length) {
|
||||
that.removeItem($(closeItems[closeItems.length - 1]).parent('span'));
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
} else if (keyNum === that.options.createKeyNum) {
|
||||
that.createItem();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createItem() {
|
||||
var value = this.elem.val().trim();
|
||||
|
||||
if (this.options.beforeCreate && typeof this.options.beforeCreate === 'function') {
|
||||
var modifiedValue = this.options.beforeCreate(this.copyData, value);
|
||||
if (typeof modifiedValue == 'string' && modifiedValue) {
|
||||
value = modifiedValue;
|
||||
} else {
|
||||
value = '';
|
||||
}
|
||||
}
|
||||
|
||||
if (value) {
|
||||
if (!this.options.data.includes(value)) {
|
||||
this.options.data.push(value);
|
||||
this.elem.before(this.spanHtml(value));
|
||||
this.onChange(value, 'create');
|
||||
}
|
||||
}
|
||||
|
||||
this.elem.val('');
|
||||
}
|
||||
|
||||
removeItem(target) {
|
||||
var that = this;
|
||||
var closeSpan = target.remove(),
|
||||
closeSpanText = $(closeSpan).children('span').text();
|
||||
var value = that.options.data.splice($.inArray(closeSpanText, that.options.data), 1);
|
||||
value.length === 1 && that.onChange(value[0], 'remove');
|
||||
}
|
||||
|
||||
randomColor() {
|
||||
return this.options.theme[Math.floor(Math.random() * this.options.theme.length)];
|
||||
}
|
||||
|
||||
spanHtml(value) {
|
||||
return '<span class="fairy-tag fairy-anim-fadein ' + this.randomColor() + '">' +
|
||||
'<span>' + value + '</span>' +
|
||||
(this.options.permanentData.includes(value) ? '' : '<a href="#" title="删除标签">×</a>') +
|
||||
'</span>';
|
||||
}
|
||||
|
||||
onChange(value, type) {
|
||||
this.options.onChange && typeof this.options.onChange === 'function' && this.options.onChange(this.copyData, value, type);
|
||||
}
|
||||
|
||||
getData() {
|
||||
return this.copyData;
|
||||
}
|
||||
|
||||
clearData() {
|
||||
this.options.data = [];
|
||||
this.elem.prevAll('span.fairy-tag').remove();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
render(options) {
|
||||
return new InputTag(options);
|
||||
}
|
||||
}
|
||||
});
|
||||
}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
|
||||
layui.link(layui.cache.base + "inputTag/inputTag.css?v="+(new Date).getTime());
|
||||
var MOD_NAME = 'inputTag';
|
||||
if (typeof module !== 'undefined' && module.exports) { //Node
|
||||
module.exports = factory(require('jquery'));
|
||||
} else if (window.layui && layui.define) {
|
||||
layui.define('jquery', function (exports) { //layui加载
|
||||
exports(MOD_NAME, factory(layui.jquery));
|
||||
});
|
||||
} else {
|
||||
window[MOD_NAME] = factory(window.jQuery);
|
||||
}
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,80 @@
|
||||
.jmSheet {
|
||||
width: 100%;
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
|
||||
.jmSheet li {
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
gap: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.jmSheet li>.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.jmSheet li:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jmSheet li:hover span {
|
||||
color: #16b777;
|
||||
}
|
||||
|
||||
.jmSheet li .img {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.jmSheet li .img img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.jmSheet li span {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, .8);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.jmSheet li .desc {
|
||||
font-weight: normal;
|
||||
color: #c2c2c2;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.jmSheet .close {
|
||||
height: 55px;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.jmSheet>h3 {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: #00000080;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
layui.define(["jquery", "layer"], function (exports) {
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$;
|
||||
var layer = layui.layer;
|
||||
|
||||
var jmSheet = {
|
||||
open: function (obj) {
|
||||
|
||||
if (typeof obj.shadeClose === 'undefined') {
|
||||
obj.shadeClose = true;
|
||||
}
|
||||
var align = "center"
|
||||
if (typeof obj.align !== "undefined" && obj.align != "") {
|
||||
switch (obj.align) {
|
||||
case "left":
|
||||
align = "flex-start";
|
||||
break;
|
||||
case "right":
|
||||
align = "flex-end";
|
||||
break;
|
||||
default:
|
||||
align = "center";
|
||||
}
|
||||
}
|
||||
|
||||
var html = "";
|
||||
$.each(obj.content, function (k, v) {
|
||||
var img = "";
|
||||
if (typeof v.img !== 'undefined' && v.img != "") {
|
||||
img = `<div class="img"><img src="${v.img}"></div>`;
|
||||
}
|
||||
html += `<li style="justify-content:${align};">
|
||||
${img}
|
||||
<div class="text">
|
||||
<span>${v.text}</span>
|
||||
<span class="desc">${v.desc || ''}</span>
|
||||
</div>
|
||||
</li>`
|
||||
})
|
||||
|
||||
var btnClose = "";
|
||||
var btnCloseSize = 0;
|
||||
if (typeof obj.shadeClose !== 'undefined' && !obj.shadeClose) {
|
||||
btnClose = `<a href="javascript:;" class="close">取消</a>`;
|
||||
btnCloseSize = (55 + 8);
|
||||
}
|
||||
var title = "";
|
||||
var titleSize = 0;
|
||||
if (typeof obj.title !== 'undefined' && obj.title != "") {
|
||||
title = `<h3>${obj.title}</h3>`;
|
||||
titleSize = 40;
|
||||
}
|
||||
|
||||
//弹出
|
||||
var open = layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
offset: 'b',
|
||||
anim: 'slideUp', // 从下往上
|
||||
area: ['100%', titleSize + btnCloseSize + 55 * obj.content.length + 'px'],
|
||||
shade: 0.1,
|
||||
shadeClose: obj.shadeClose, // 是否点击遮罩关闭
|
||||
id: obj.id || '',
|
||||
content:
|
||||
`<div class="jmSheet ${obj.addClass || ''}">
|
||||
${title}
|
||||
<ul>${html}</ul>
|
||||
${btnClose}
|
||||
</div>`
|
||||
});
|
||||
|
||||
//关闭
|
||||
$(`#layui-layer${open} .jmSheet .close`).on("click", function () {
|
||||
layer.close(open);
|
||||
})
|
||||
|
||||
//点击列表
|
||||
$(`#layui-layer${open} .jmSheet`).on("click", "li", function () {
|
||||
obj.callback($(this).index(), this, obj.content[$(this).index()]);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
exports('jmSheet', jmSheet); // 输出模块
|
||||
}).link(layui.cache.base+"jmSheet/jmSheet.css?v="+(new Date).getTime());
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,177 @@
|
||||
/**
|
||||
* layselect 下拉框插件，只支持单选
|
||||
* @author:Darker.Wang
|
||||
* @version:1.1（优化增加数据内部控制元素默认选择）
|
||||
* @version:1.2（优化支持指定请求头认证，修复元素默认选择优先级错乱）
|
||||
* render参数{
|
||||
* 属性：
|
||||
* elem：元素ID，带#号必传
|
||||
* url：请求路径的URL，必传
|
||||
* data:请求url所携带的参数，可选
|
||||
* type:请求方式，默认为get，可选
|
||||
* option:元素数据，数组，用于不通过请求url获取数据，本地自动赋值，可选
|
||||
* select:指定选中的索引项，可选，分组时索引为：groupNum-itemNum,如：1-2 表示第一组里的第二个元素
|
||||
* 方法：
|
||||
* format:格式化方法映射，将返回的Data元素映射乘标准格式
|
||||
* success:成功回调，返回加载后的对象数组
|
||||
* fail:失败回调，加载失败的处理
|
||||
* onselect:点击选择时事件响应（如事件无响应，记得加lay-filter属性=id）
|
||||
* headers:可选，用于传递请求头认证，默认为：{Accept: "application/json; charset=utf-8"}
|
||||
* contentType:可选，用于指定请求接口的数据类型，默认为：application/json
|
||||
* }
|
||||
* 请求返回需对象格式：rtvObj=option={status,code,codeName,select,...}，不满足的通过format映射处理 status=0 时表示禁用
|
||||
* 其他说明：
|
||||
* 1、分组展示按照：groupName，groupChildren 数组 [rtvObj]
|
||||
* 2、暂不支持多选（后期版本规划：支持多选，在select标签上设置属性：multiple="true"）
|
||||
* 3、获取原始数据，可通过调用success得到，返回原始数据的集合
|
||||
* 4、点击事件回调，可通过实现onselect 触发，参数为当前点击的值
|
||||
* @param exports
|
||||
* @returns 返回一个对象
|
||||
* 码云地址：https://gitee.com/godbirds/layselect
|
||||
*/
|
||||
layui.define(['element','form','jquery'],function(exports){
|
||||
var element = layui.element;
|
||||
var form = layui.form;
|
||||
var $ = layui.jquery;
|
||||
var obj={
|
||||
//{elem,url,data,type,format}
|
||||
render:function(param){
|
||||
var that = this;
|
||||
var eid = param.elem;
|
||||
that.selectValues=new Array();
|
||||
if(param.type == null || param.type==undefined){
|
||||
param.type = 'get';//默认get请求
|
||||
}
|
||||
if(param.data){
|
||||
param.data = JSON.stringify(data);
|
||||
}else{
|
||||
param.data = {}
|
||||
}
|
||||
if(param.url == null || param.url == '' || param.url==undefined){
|
||||
if(param.option == null || param.option == undefined){
|
||||
param.option = new Array();//重新定义为了正常显示下拉框
|
||||
}
|
||||
that._init(eid,param,param.option);
|
||||
}else{
|
||||
$.ajax({
|
||||
url: param.url,
|
||||
type: param.type,
|
||||
data: param.data,
|
||||
async: 'false',
|
||||
dataType: 'json',
|
||||
headers: param.headers||{Accept: "application/json; charset=utf-8"},
|
||||
contentType : param.contentType||'application/json',//指定json头
|
||||
success: function(data){
|
||||
that._init(eid,param,data)
|
||||
},
|
||||
error: function (e) {
|
||||
//加载失败执行回调函数
|
||||
console.log("Ajax request "+param.url+" error! ");
|
||||
if(param.fail){
|
||||
param.fail(e);//加载失败回调函数，请求URL时才会触发
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/***
|
||||
* 初始化：data=[{code,status,codeName,select,groupName,groupChildren}]
|
||||
*/
|
||||
that._init=function(eid,param,data){
|
||||
$(eid).empty();//请求成功时清空
|
||||
$(eid).prepend("<option value=''>请选择</option>");//添加第一个option值
|
||||
var option = new Array();
|
||||
if(param.format){//格式化
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var tdata = param.format(data[i]);
|
||||
option.push({
|
||||
code:tdata.code,
|
||||
status:tdata.status||'1',
|
||||
select:tdata.select||'false',
|
||||
codeName:tdata.codeName,
|
||||
groupName:tdata.groupName,
|
||||
groupChildren:tdata.groupChildren
|
||||
});
|
||||
}
|
||||
}else{//不格式化
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
option.push({
|
||||
code:data[i].code,
|
||||
status:data[i].status||'1',
|
||||
select:data[i].select||'false',
|
||||
codeName:data[i].codeName,
|
||||
groupName:data[i].groupName,
|
||||
groupChildren:data[i].groupChildren
|
||||
});
|
||||
}
|
||||
}
|
||||
var isgroup = false;
|
||||
for (var i = 0; i < option.length; i++) {
|
||||
//分组
|
||||
if(option[i].groupChildren != null && option[i].groupChildren != undefined &&
|
||||
option[i].groupChildren != '' && option[i].groupChildren.length > 0){
|
||||
isgroup = true;//分组标识
|
||||
$(eid).append("<optgroup label='"+option[i].groupName+"'>");
|
||||
option[i].groupChildren.forEach(function(item,index){
|
||||
var status = "";var topborder ="",buttomborder="",checkoff="";
|
||||
if(item.status && item.status == '0'){status = "disabled='disabled'";}//是否有效
|
||||
$(eid).append("<option value='"+item.code+"' "+status+">"+item.codeName+"</option>");
|
||||
//优先级：内部数据option中的选中标识优先级高于外部指定的优先级
|
||||
if(item.select != undefined && (item.select == 'true' || item.select == true) && item.status != '0'){
|
||||
that.selectValues.push(item);
|
||||
}
|
||||
});
|
||||
$(eid).append("</optgroup>");
|
||||
}else{//不分组
|
||||
isgroup = false;//分组标识
|
||||
var status = "";var topborder ="",buttomborder="",checkoff="";
|
||||
if(option[i].status && option[i].status == '0'){status = "disabled='disabled'";}//是否有效
|
||||
$(eid).append("<option value='"+option[i].code+"' "+status+">"+option[i].codeName+"</option>");
|
||||
//内部数据option中的选中标识优先级高于外部指定的优先级
|
||||
if(option[i].select != undefined && (option[i].select == 'true' || option[i].select == true) && option[i].status != '0'){
|
||||
that.selectValues.push(option[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
//内部无选中则判断外部是否指定，遵循内部优先级高于外部
|
||||
if(that.selectValues.length == 0 && param.select != undefined){
|
||||
var item;
|
||||
var si = param.select+"";
|
||||
if(isgroup && si.indexOf("-") > 0){//分组时索引为指定为 group-item
|
||||
var s = si.split("-");//拆分组
|
||||
item = option[s[0]].groupChildren[s[1]];
|
||||
}else{
|
||||
item = option[si];
|
||||
}
|
||||
if(item && item.status != '0'){
|
||||
that.selectValues.push(item);
|
||||
}
|
||||
}//选择指定选中项
|
||||
|
||||
//var k = eid.replace('#','');
|
||||
var multiple = $(eid).attr('multiple');//多选控制，暂时无用
|
||||
//console.log(eid,that.selectValues);
|
||||
if(that.selectValues.length>0){//默认选中数据在循环外部，提高渲染效率
|
||||
that.selectValues.forEach(function(item,index){
|
||||
$(eid).find("option[value = '"+item.code+"']").attr("selected","selected");
|
||||
});
|
||||
}else{
|
||||
//$(eid).find("option[value = '']").attr("selected","selected");//默认选中请选择
|
||||
}
|
||||
//加载成功执行回调函数
|
||||
if(param.success){
|
||||
//console.log(k+" call success",option);
|
||||
param.success(option);
|
||||
option = null;
|
||||
}
|
||||
//监听事件：这里做自己想做的事情
|
||||
form.render('select');//select是固定写法 不是选择器
|
||||
form.on('select('+eid.replace('#','')+')', function(data){
|
||||
if(param.onselect){//点击选择事件
|
||||
param.onselect(data.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
exports('layselect',obj);
|
||||
});
|
||||
@@ -0,0 +1,368 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 主体框架扩展
|
||||
*/
|
||||
layui.define(["jquery", "miniMenu", "element", "miniTab", "miniTheme"], function (exports) {
|
||||
var $ = layui.$,
|
||||
layer = layui.layer,
|
||||
miniMenu = layui.miniMenu,
|
||||
miniTheme = layui.miniTheme,
|
||||
element = layui.element ,
|
||||
miniTab = layui.miniTab;
|
||||
|
||||
if (!/http(s*):\/\//.test(location.href)) {
|
||||
var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示";
|
||||
return layer.alert(tips);
|
||||
}
|
||||
|
||||
var miniAdmin = {
|
||||
|
||||
/**
|
||||
* 后台框架初始化
|
||||
* @param options.iniUrl 后台初始化接口地址
|
||||
* @param options.clearUrl 后台清理缓存接口
|
||||
* @param options.urlHashLocation URL地址hash定位
|
||||
* @param options.bgColorDefault 默认皮肤
|
||||
* @param options.multiModule 是否开启多模块
|
||||
* @param options.menuChildOpen 是否展开子菜单
|
||||
* @param options.loadingTime 初始化加载时间
|
||||
* @param options.pageAnim iframe窗口动画
|
||||
* @param options.maxTabNum 最大的tab打开数量
|
||||
*/
|
||||
render: function (options) {
|
||||
options.iniUrl = options.iniUrl || null;
|
||||
options.clearUrl = options.clearUrl || null;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.bgColorDefault = options.bgColorDefault || 0;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.menuChildOpen = options.menuChildOpen || false;
|
||||
options.loadingTime = options.loadingTime || 0;
|
||||
options.pageAnim = options.pageAnim || false;
|
||||
options.maxTabNum = options.maxTabNum || 200;
|
||||
options.isHideOpenMenu = !options.isHideOpenMenu ? options.isHideOpenMenu : true;
|
||||
$.getJSON(options.iniUrl, function (data) {
|
||||
if (data == null) {
|
||||
miniAdmin.error('暂无菜单信息')
|
||||
} else {
|
||||
miniAdmin.renderLogo(data.logoInfo);
|
||||
miniAdmin.renderClear(options.clearUrl);
|
||||
miniAdmin.renderHome(data.homeInfo);
|
||||
miniAdmin.renderAnim(options.pageAnim);
|
||||
miniAdmin.listen();
|
||||
miniMenu.render({
|
||||
menuList: data.menuInfo,
|
||||
multiModule: options.multiModule,
|
||||
menuChildOpen: options.menuChildOpen
|
||||
});
|
||||
miniTab.render({
|
||||
filter: 'layuiminiTab',
|
||||
urlHashLocation: options.urlHashLocation,
|
||||
multiModule: options.multiModule,
|
||||
menuChildOpen: options.menuChildOpen,
|
||||
maxTabNum: options.maxTabNum,
|
||||
menuList: data.menuInfo,
|
||||
homeInfo: data.homeInfo,
|
||||
listenSwichCallback: function () {
|
||||
miniAdmin.renderDevice();
|
||||
}
|
||||
});
|
||||
miniTheme.render({
|
||||
bgColorDefault: options.bgColorDefault,
|
||||
listen: true,
|
||||
});
|
||||
miniAdmin.deleteLoader(options.loadingTime);
|
||||
miniAdmin.isHideOpenMenu(options.isHideOpenMenu);
|
||||
}
|
||||
}).fail(function () {
|
||||
miniAdmin.error('菜单接口有误');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击左侧下拉菜单，关闭其他下拉菜单
|
||||
* @param data
|
||||
*/
|
||||
isHideOpenMenu: function (data) {
|
||||
$(".layui-side").on("click", ".layui-nav-item", function () {
|
||||
if (data) {
|
||||
$(this).siblings('li').attr('class', 'layui-nav-item');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化logo
|
||||
* @param data
|
||||
*/
|
||||
renderLogo: function (data) {
|
||||
var html = '<a href="' + data.href + '"><img src="' + data.image + '" style="width:95%;" alt="logo"><h1>' + data.title + '</h1></a>';
|
||||
$('.layuimini-logo').html(html);
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化首页
|
||||
* @param data
|
||||
*/
|
||||
renderHome: function (data) {
|
||||
sessionStorage.setItem('layuiminiHomeHref', data.href);
|
||||
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
|
||||
$('#layuiminiHomeTabId').attr('lay-id', data.href);
|
||||
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化缓存地址
|
||||
* @param clearUrl
|
||||
*/
|
||||
renderClear: function (clearUrl) {
|
||||
$('.layuimini-clear').attr('data-href',clearUrl);
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化iframe窗口动画
|
||||
* @param anim
|
||||
*/
|
||||
renderAnim: function (anim) {
|
||||
if (anim) {
|
||||
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
|
||||
'.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
|
||||
'@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}' +
|
||||
'</style>');
|
||||
}
|
||||
},
|
||||
|
||||
fullScreen: function () {
|
||||
var el = document.documentElement;
|
||||
var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
|
||||
if (typeof rfs != "undefined" && rfs) {
|
||||
rfs.call(el);
|
||||
} else if (typeof window.ActiveXObject != "undefined") {
|
||||
var wscript = new ActiveXObject("WScript.Shell");
|
||||
if (wscript != null) {
|
||||
wscript.SendKeys("{F11}");
|
||||
}
|
||||
} else if (el.msRequestFullscreen) {
|
||||
el.msRequestFullscreen();
|
||||
} else if (el.oRequestFullscreen) {
|
||||
el.oRequestFullscreen();
|
||||
} else if (el.webkitRequestFullscreen) {
|
||||
el.webkitRequestFullscreen();
|
||||
} else if (el.mozRequestFullScreen) {
|
||||
el.mozRequestFullScreen();
|
||||
} else {
|
||||
miniAdmin.error('浏览器不支持全屏调用！');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 退出全屏
|
||||
*/
|
||||
exitFullScreen: function () {
|
||||
var el = document;
|
||||
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
|
||||
if (typeof cfs != "undefined" && cfs) {
|
||||
cfs.call(el);
|
||||
} else if (typeof window.ActiveXObject != "undefined") {
|
||||
var wscript = new ActiveXObject("WScript.Shell");
|
||||
if (wscript != null) {
|
||||
wscript.SendKeys("{F11}");
|
||||
}
|
||||
} else if (el.msExitFullscreen) {
|
||||
el.msExitFullscreen();
|
||||
} else if (el.oRequestFullscreen) {
|
||||
el.oCancelFullScreen();
|
||||
}else if (el.mozCancelFullScreen) {
|
||||
el.mozCancelFullScreen();
|
||||
} else if (el.webkitCancelFullScreen) {
|
||||
el.webkitCancelFullScreen();
|
||||
} else {
|
||||
miniAdmin.error('浏览器不支持全屏调用！');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化设备端
|
||||
*/
|
||||
renderDevice: function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
$('.layuimini-tool i').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool i').attr('class', 'layui-icon layui-icon-list');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 初始化加载时间
|
||||
* @param loadingTime
|
||||
*/
|
||||
deleteLoader: function (loadingTime) {
|
||||
if (loadingTime) {
|
||||
setTimeout(function () {
|
||||
$('.layuimini-loader').fadeOut();
|
||||
}, loadingTime * 1000)
|
||||
} else {
|
||||
$('.layuimini-loader').fadeOut();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 成功
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
success: function (title) {
|
||||
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 失败
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
error: function (title) {
|
||||
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断是否为手机
|
||||
* @returns {boolean}
|
||||
*/
|
||||
checkMobile: function () {
|
||||
var ua = navigator.userAgent.toLocaleLowerCase();
|
||||
var pf = navigator.platform.toLocaleLowerCase();
|
||||
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|
||||
|| (/ucweb.*linux/i.test(ua));
|
||||
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
|
||||
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
|
||||
var clientWidth = document.documentElement.clientWidth;
|
||||
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
*/
|
||||
listen: function () {
|
||||
|
||||
/**
|
||||
* 清理
|
||||
*/
|
||||
$('body').on('click', '[data-clear]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
sessionStorage.clear();
|
||||
|
||||
// 判断是否清理服务端
|
||||
var clearUrl = $(this).attr('data-href');
|
||||
if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
|
||||
$.getJSON(clearUrl, function (data, status) {
|
||||
layer.close(loading);
|
||||
if (data.code != 0) {
|
||||
return miniAdmin.error(data.msg);
|
||||
} else {
|
||||
return miniAdmin.success(data.msg);
|
||||
}
|
||||
}).fail(function () {
|
||||
layer.close(loading);
|
||||
return miniAdmin.error('清理缓存接口有误');
|
||||
});
|
||||
} else {
|
||||
layer.close(loading);
|
||||
return miniAdmin.success('清除缓存成功');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 刷新
|
||||
*/
|
||||
$('body').on('click', '[data-refresh]', function () {
|
||||
$(".layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload();
|
||||
miniAdmin.success('刷新成功');
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听提示信息
|
||||
*/
|
||||
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var classInfo = $(this).attr('class'),
|
||||
tips = $(this).prop("innerHTML"),
|
||||
isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0 && tips) {
|
||||
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
|
||||
window.openTips = layer.tips(tips, $(this), {
|
||||
tips: [2, '#2f4056'],
|
||||
time: 300000,
|
||||
skin:"popup-tips",
|
||||
success:function (el) {
|
||||
var left = $(el).position().left - 10 ;
|
||||
$(el).css({ left:left });
|
||||
element.render();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("body").on("mouseleave", ".popup-tips", function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0) {
|
||||
try {
|
||||
layer.close(window.openTips);
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 全屏
|
||||
*/
|
||||
$('body').on('click', '[data-check-screen]', function () {
|
||||
var check = $(this).attr('data-check-screen');
|
||||
if (check == 'full') {
|
||||
miniAdmin.fullScreen();
|
||||
$(this).attr('data-check-screen', 'exit');
|
||||
$(this).html('<i class="layui-icon layui-icon-screen-restore"></i>');
|
||||
} else {
|
||||
miniAdmin.exitFullScreen();
|
||||
$(this).attr('data-check-screen', 'full');
|
||||
$(this).html('<i class="layui-icon layui-icon-screen-full"></i>');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 点击遮罩层
|
||||
*/
|
||||
$('body').on('click', '.layuimini-make', function () {
|
||||
miniAdmin.renderDevice();
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
exports("miniAdmin", miniAdmin);
|
||||
});
|
||||
@@ -0,0 +1,253 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 菜单框架扩展
|
||||
*/
|
||||
layui.define(["element","laytpl" ,"jquery"], function (exports) {
|
||||
var element = layui.element,
|
||||
$ = layui.$,
|
||||
laytpl = layui.laytpl,
|
||||
layer = layui.layer;
|
||||
|
||||
var miniMenu = {
|
||||
|
||||
/**
|
||||
* 菜单初始化
|
||||
* @param options.menuList 菜单数据信息
|
||||
* @param options.multiModule 是否开启多模块
|
||||
* @param options.menuChildOpen 是否展开子菜单
|
||||
*/
|
||||
render: function (options) {
|
||||
options.menuList = options.menuList || [];
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.menuChildOpen = options.menuChildOpen || false;
|
||||
if (options.multiModule) {
|
||||
miniMenu.renderMultiModule(options.menuList, options.menuChildOpen);
|
||||
} else {
|
||||
miniMenu.renderSingleModule(options.menuList, options.menuChildOpen);
|
||||
}
|
||||
miniMenu.listen();
|
||||
},
|
||||
|
||||
/**
|
||||
* 单模块
|
||||
* @param menuList 菜单数据
|
||||
* @param menuChildOpen 是否默认展开
|
||||
*/
|
||||
renderSingleModule: function (menuList, menuChildOpen) {
|
||||
menuList = menuList || [];
|
||||
var leftMenuHtml = '',
|
||||
childOpenClass = '',
|
||||
leftMenuCheckDefault = 'layui-this';
|
||||
var me = this ;
|
||||
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
|
||||
leftMenuHtml = this.renderLeftMenu(menuList,{ childOpenClass:childOpenClass }) ;
|
||||
$('.layui-layout-body').addClass('layuimini-single-module'); //单模块标识
|
||||
$('.layuimini-header-menu').remove();
|
||||
$('.layuimini-menu-left').html(leftMenuHtml);
|
||||
|
||||
element.init();
|
||||
},
|
||||
|
||||
/**
|
||||
* 渲染一级菜单
|
||||
*/
|
||||
compileMenu: function(menu,isSub){
|
||||
var menuHtml = '<li {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} class="layui-nav-item menu-li {{d.childOpenClass}} {{d.className}}" {{#if( d.id){ }} id="{{d.id}}" {{#}}}> <a href="javascript:;" {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} {{#if( d.dizhi){ }} layuimini-href="{{d.dizhi}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}}>{{#if( d.icon){ }} <i class="layui-icon layui-icon-{{d.icon}}"></i> {{#}}} <span class="layui-left-nav {{-d.title}}">{{-d.title}}</span></a> {{# if(d.children){}} {{-d.children}} {{#}}} </li>' ;
|
||||
if(isSub){
|
||||
menuHtml = '<dd class="menu-dd {{d.childOpenClass}} {{ d.className }}"> <a href="javascript:;" {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} {{#if( d.id){ }} id="{{d.id}}" {{#}}} {{#if(( !d.children || !d.children.length ) && d.dizhi){ }} layuimini-href="{{d.dizhi}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}}> {{#if( d.icon){ }} <i class="layui-icon layui-icon-{{d.icon}}"></i> {{#}}} <span class="layui-left-nav {{-d.title}}"> {{-d.title}}</span></a> {{# if(d.children){}} {{-d.children}} {{#}}}</dd>'
|
||||
}
|
||||
return laytpl(menuHtml).render(menu);
|
||||
},
|
||||
compileMenuContainer :function(menu,isSub){
|
||||
var wrapperHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{d.className}}" id="{{d.id}}">{{-d.children}}</ul>' ;
|
||||
if(isSub){
|
||||
wrapperHtml = '<dl class="layui-nav-child">{{-d.children}}</dl>' ;
|
||||
}
|
||||
if(!menu.children){
|
||||
return "";
|
||||
}
|
||||
return laytpl(wrapperHtml).render(menu);
|
||||
},
|
||||
|
||||
each:function(list,callback){
|
||||
var _list = [];
|
||||
for(var i = 0 ,length = list.length ; i<length ;i++ ){
|
||||
_list[i] = callback(i,list[i]) ;
|
||||
}
|
||||
return _list ;
|
||||
},
|
||||
renderChildrenMenu:function(menuList,options){
|
||||
var me = this ;
|
||||
menuList = menuList || [] ;
|
||||
// console.log("menuList",menuList);
|
||||
var html = this.each(menuList,function (idx,menu) {
|
||||
if(menu.children && menu.children.length){
|
||||
menu.children = me.renderChildrenMenu(menu.children,{ childOpenClass: options.childOpenClass || '' });
|
||||
}
|
||||
menu.className = "" ;
|
||||
menu.childOpenClass = options.childOpenClass || ''
|
||||
return me.compileMenu(menu,true)
|
||||
}).join("");
|
||||
return me.compileMenuContainer({ children:html },true)
|
||||
},
|
||||
renderLeftMenu :function(leftMenus,options){
|
||||
options = options || {};
|
||||
var me = this ;
|
||||
var leftMenusHtml = me.each(leftMenus || [],function (idx,leftMenu) { // 左侧菜单遍历
|
||||
var children = me.renderChildrenMenu(leftMenu.children, { childOpenClass:options.childOpenClass });
|
||||
var leftMenuHtml = me.compileMenu({
|
||||
href: leftMenu.href,
|
||||
dizhi: leftMenu.dizhi,
|
||||
id:leftMenu.id,
|
||||
target: leftMenu.target,
|
||||
childOpenClass: options.childOpenClass,
|
||||
icon: leftMenu.icon,
|
||||
title: leftMenu.title,
|
||||
children: children,
|
||||
className: '',
|
||||
});
|
||||
return leftMenuHtml ;
|
||||
}).join("");
|
||||
|
||||
leftMenusHtml = me.compileMenuContainer({ id:options.parentMenuId,className:options.leftMenuCheckDefault,children:leftMenusHtml }) ;
|
||||
return leftMenusHtml ;
|
||||
},
|
||||
/**
|
||||
* 多模块
|
||||
* @param menuList 菜单数据
|
||||
* @param menuChildOpen 是否默认展开
|
||||
*/
|
||||
renderMultiModule: function (menuList, menuChildOpen) {
|
||||
menuList = menuList || [];
|
||||
var me = this ;
|
||||
var headerMenuHtml = '',
|
||||
headerMobileMenuHtml = '',
|
||||
leftMenuHtml = '',
|
||||
leftMenuCheckDefault = 'layui-this',
|
||||
childOpenClass = '',
|
||||
headerMenuCheckDefault = 'layui-this';
|
||||
|
||||
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
|
||||
var headerMenuHtml = this.each(menuList, function (index, val) { //顶部菜单渲染
|
||||
var menu = 'multi_module_' + index ;
|
||||
var id = menu+"HeaderId";
|
||||
var topMenuItemHtml = "" ;
|
||||
topMenuItemHtml = me.compileMenu({
|
||||
className:headerMenuCheckDefault,
|
||||
menu:menu,
|
||||
id:id,
|
||||
title:val.title,
|
||||
href:"",
|
||||
target:"",
|
||||
children:""
|
||||
});
|
||||
leftMenuHtml+=me.renderLeftMenu(val.children,{
|
||||
parentMenuId:menu,
|
||||
childOpenClass:childOpenClass,
|
||||
leftMenuCheckDefault:leftMenuCheckDefault
|
||||
});
|
||||
headerMobileMenuHtml +=me.compileMenu({ id:id,menu:menu,id:id,icon:val.icon, title:val.title, },true);
|
||||
headerMenuCheckDefault = "";
|
||||
leftMenuCheckDefault = "layui-hide" ;
|
||||
return topMenuItemHtml ;
|
||||
}).join("");
|
||||
$('.layui-layout-body').addClass('layuimini-multi-module'); //多模块标识
|
||||
$('.layuimini-menu-header-pc').html(headerMenuHtml); //电脑
|
||||
$('.layuimini-menu-left').html(leftMenuHtml);
|
||||
$('.layuimini-menu-header-mobile').html(headerMobileMenuHtml); //手机
|
||||
element.init();
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
*/
|
||||
listen: function () {
|
||||
|
||||
/**
|
||||
* 菜单模块切换
|
||||
*/
|
||||
$('body').on('click', '[data-menu]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var menuId = $(this).attr('data-menu');
|
||||
// header
|
||||
$(".layuimini-header-menu .layui-nav-item.layui-this").removeClass('layui-this');
|
||||
$(this).addClass('layui-this');
|
||||
// left
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this").addClass('layui-hide');
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this.layui-hide").removeClass('layui-this');
|
||||
$("#" + menuId).removeClass('layui-hide');
|
||||
$("#" + menuId).addClass('layui-this');
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 菜单缩放
|
||||
*/
|
||||
$('body').on('click', '.layuimini-site-mobile', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
|
||||
if (isShow == 1) { // 缩放
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-spread-left');
|
||||
$('.layui-layout-body').removeClass('layuimini-all');
|
||||
$('.layui-layout-body').addClass('layuimini-mini');
|
||||
} else { // 正常
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-shrink-right');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
layer.close(window.openTips);
|
||||
}
|
||||
element.init();
|
||||
layer.close(loading);
|
||||
});
|
||||
/**
|
||||
* 菜单缩放
|
||||
*/
|
||||
$('body').on('click', '[data-side-fold]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
|
||||
if (isShow == 1) { // 缩放
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-spread-left');
|
||||
$('.layui-layout-body').removeClass('layuimini-all');
|
||||
$('.layui-layout-body').addClass('layuimini-mini');
|
||||
// $(".menu-li").each(function (idx,el) {
|
||||
// $(el).addClass("hidden-sub-menu");
|
||||
// });
|
||||
|
||||
} else { // 正常
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-shrink-right');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
// $(".menu-li").each(function (idx,el) {
|
||||
// $(el).removeClass("hidden-sub-menu");
|
||||
// });
|
||||
layer.close(window.openTips);
|
||||
}
|
||||
element.init();
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 手机端点开模块
|
||||
*/
|
||||
$('body').on('click', '.layuimini-header-menu.layuimini-mobile-show dd', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
|
||||
if(check === "1"){
|
||||
$('.layuimini-site-mobile').trigger("click");
|
||||
element.init();
|
||||
}
|
||||
layer.close(loading);
|
||||
});
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
|
||||
exports("miniMenu", miniMenu);
|
||||
});
|
||||
@@ -0,0 +1,676 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini tab框架扩展
|
||||
* 新增功能: 点击左侧菜单，如果标签存在则刷新，不存在则新建
|
||||
* 修改bug: 打开多个标签时，点击关闭当前标签时会把当前标签及后面的标签全部关闭的bug，364行
|
||||
*/
|
||||
layui.define(["element", "layer", "jquery","tabs"], function (exports) {
|
||||
var element = layui.element,
|
||||
tabs=layui.tabs,
|
||||
layer = layui.layer,
|
||||
$ = layui.$;
|
||||
|
||||
|
||||
var miniTab = {
|
||||
|
||||
/**
|
||||
* 初始化tab
|
||||
* @param options
|
||||
*/
|
||||
render: function (options) {
|
||||
options.filter = options.filter || null;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.maxTabNum = options.maxTabNum || 200;
|
||||
options.menuList = options.menuList || []; // todo 后期菜单想改为不操作dom, 而是直接操作初始化传过来的数据
|
||||
options.homeInfo = options.homeInfo || {};
|
||||
options.listenSwichCallback = options.listenSwichCallback || function () {
|
||||
};
|
||||
miniTab.listen(options);
|
||||
miniTab.listenRoll();
|
||||
miniTab.listenSwitch(options);
|
||||
miniTab.listenHash(options);
|
||||
},
|
||||
|
||||
/**
|
||||
* 新建tab窗口
|
||||
* @param options.tabId
|
||||
* @param options.href
|
||||
* @param options.title
|
||||
* @param options.isIframe
|
||||
* @param options.maxTabNum
|
||||
*/
|
||||
create: function (options) {
|
||||
options.href = options.href || null;
|
||||
options.tabId = options.tabId || options.href;
|
||||
options.title = options.title || null;
|
||||
options.isIframe = options.isIframe || false;
|
||||
options.maxTabNum = options.maxTabNum || 200;
|
||||
if ($(".layuimini-tab .layui-tab-title li").length >= options.maxTabNum) {
|
||||
layer.msg('Tab窗口已达到限定数量，请先关闭部分Tab');
|
||||
return false;
|
||||
}
|
||||
var ele = element;
|
||||
if (options.isIframe) ele = parent.layui.element;
|
||||
//
|
||||
console.log('aaa');
|
||||
ele.tabAdd('layuiminiTab', {
|
||||
title: '<span class="layuimini-tab-active"></span><span>' + options.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>' //用于演示
|
||||
, content: '<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" id="'+options.tabId+'" src="' + options.href + '"></iframe>'
|
||||
, id: options.tabId
|
||||
});
|
||||
console.log('bbb');
|
||||
//
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'add');
|
||||
sessionStorage.setItem('layuiminimenu_' + options.tabId, options.title);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 切换选项卡
|
||||
* @param tabId
|
||||
*/
|
||||
change: function (tabId) {
|
||||
element.tabChange('layuiminiTab', tabId);
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除tab窗口
|
||||
* @param tabId
|
||||
* @param isParent
|
||||
*/
|
||||
delete: function (tabId, isParent) {
|
||||
// todo 未知BUG，不知道是不是layui问题，必须先删除元素
|
||||
$(".layuimini-tab .layui-tab-title .layui-unselect.layui-tab-bar").remove();
|
||||
|
||||
if (isParent === true) {
|
||||
parent.layui.element.tabDelete('layuiminiTab', tabId);
|
||||
} else {
|
||||
element.tabDelete('layuiminiTab', tabId);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 在iframe层打开新tab方法
|
||||
*/
|
||||
openNewTabByIframe: function (options) {
|
||||
options.href = options.href || null;
|
||||
options.id = options.id || options.href;
|
||||
options.title = options.title || null;
|
||||
var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
|
||||
if (options.href === null || options.href === undefined) options.href = new Date().getTime();
|
||||
var checkTab = miniTab.check(options.id, true);
|
||||
if (!checkTab) {
|
||||
parent.layui.element.tabChange('layuiminiTab','0');
|
||||
setTimeout(function(){
|
||||
miniTab.create({
|
||||
tabId: options.id,
|
||||
href: options.href,
|
||||
title: options.title,
|
||||
isIframe: true,
|
||||
});
|
||||
parent.layui.element.tabChange('layuiminiTab', options.id);
|
||||
parent.layer.close(loading);
|
||||
},100);
|
||||
}else{
|
||||
parent.layui.element.tabChange('layuiminiTab', options.id);
|
||||
parent.layer.close(loading);
|
||||
}
|
||||
},
|
||||
openNewTab: function (options) {
|
||||
// console.log(options,'o');
|
||||
options.href = options.href || null;
|
||||
options.id = options.id || options.href;
|
||||
options.title = options.title || null;
|
||||
// console.log(options,'p');
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
if (options.href === null || options.href === undefined) options.href = new Date().getTime();
|
||||
var checkTab = miniTab.check(options.id, true);
|
||||
// console.log(checkTab,'po',options.id);
|
||||
if (!checkTab) {
|
||||
layui.element.tabChange('layuiminiTab','0');
|
||||
setTimeout(() => {
|
||||
miniTab.create({
|
||||
tabId: options.id,
|
||||
href: options.href,
|
||||
title: options.title,
|
||||
isIframe: true,
|
||||
});
|
||||
layui.element.tabChange('layuiminiTab', options.id);
|
||||
layer.close(loading);
|
||||
}, 100);
|
||||
}else{
|
||||
layui.element.tabChange('layuiminiTab', options.id);
|
||||
layer.close(loading);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 在iframe层关闭当前tab方法
|
||||
*/
|
||||
deleteCurrentByIframe: function () {
|
||||
var ele = $(".layuimini-tab .layui-tab-title li.layui-this", parent.document);
|
||||
if (ele.length > 0) {
|
||||
var layId = $(ele[0]).attr('lay-id');
|
||||
miniTab.delete(layId, true);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断tab窗口
|
||||
*/
|
||||
check: function (tabId, isIframe) {
|
||||
// 判断选项卡上是否有
|
||||
tabId=tabId+"";
|
||||
var checkTab = false;
|
||||
if (isIframe === undefined || isIframe === false) {
|
||||
$(".layui-tab-title li").each(function () {
|
||||
var checkTabId = $(this).attr('lay-id');
|
||||
if (checkTabId != null && checkTabId === tabId) {
|
||||
checkTab = true;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
parent.layui.$(".layui-tab-title li").each(function () {
|
||||
var checkTabId = $(this).attr('lay-id');
|
||||
if (checkTabId != null && checkTabId === tabId) {
|
||||
checkTab = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
return checkTab;
|
||||
},
|
||||
|
||||
/**
|
||||
* 开启tab右键菜单
|
||||
* @param tabId
|
||||
* @param left
|
||||
*/
|
||||
openTabRignMenu: function (tabId, left) {
|
||||
miniTab.closeTabRignMenu();
|
||||
var menuHtml = '<div class="layui-unselect layui-form-select layui-form-selected layuimini-tab-mousedown layui-show" data-tab-id="' + tabId + '" style="left: ' + left + 'px!important">\n' +
|
||||
'<dl>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="current">关 闭 当 前</a></dd>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="other">关 闭 其 他</a></dd>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="all">关 闭 全 部</a></dd>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="divorced">脱 离 标 签</a></dd>\n' +
|
||||
'</dl>\n' +
|
||||
'</div>';
|
||||
var makeHtml = '<div class="layuimini-tab-make"></div>';
|
||||
$('.layuimini-tab .layui-tab-title').after(menuHtml);
|
||||
$('.layuimini-tab .layui-tab-content').after(makeHtml);
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭tab右键菜单
|
||||
*/
|
||||
closeTabRignMenu: function () {
|
||||
$('.layuimini-tab-mousedown').remove();
|
||||
$('.layuimini-tab-make').remove();
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询菜单信息
|
||||
* @param href
|
||||
* @param menuList
|
||||
*/
|
||||
searchMenu: function (href, menuList) {
|
||||
var menu;
|
||||
for (key in menuList) {
|
||||
var item = menuList[key];
|
||||
if (item.href === href) {
|
||||
menu = item;
|
||||
break;
|
||||
}
|
||||
if (item.child) {
|
||||
newMenu = miniTab.searchMenu(href, item.child);
|
||||
if (newMenu) {
|
||||
menu = newMenu;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return menu;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
* @param options
|
||||
*/
|
||||
listen: function (options) {
|
||||
options = options || {};
|
||||
options.maxTabNum = options.maxTabNum || 200;
|
||||
|
||||
/**
|
||||
* 打开新窗口
|
||||
*/
|
||||
$('body').on('click', '[layuimini-href]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var tabId = $(this).attr('layuimini-href'),
|
||||
href = $(this).attr('layuimini-href'),
|
||||
title = $(this).text(),
|
||||
target = $(this).attr('target');
|
||||
|
||||
var el = $("[layuimini-href='" + href + "']", ".layuimini-menu-left");
|
||||
layer.close(window.openTips);
|
||||
if (el.length) {
|
||||
$(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this");
|
||||
$(el).parent().addClass("layui-this");
|
||||
}
|
||||
|
||||
if (target === '_blank') {
|
||||
layer.close(loading);
|
||||
window.open(href, "_blank");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (tabId === null || tabId === undefined) tabId = new Date().getTime();
|
||||
var checkTab = miniTab.check(tabId);
|
||||
if(checkTab){
|
||||
miniTab.change(tabId);
|
||||
}
|
||||
if (!checkTab) {
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: href,
|
||||
title: title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
}
|
||||
element.tabChange('layuiminiTab', tabId);
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 在iframe子菜单上打开新窗口
|
||||
*/
|
||||
$('body').on('click', '[layuimini-content-href]', function () {
|
||||
var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var tabId = $(this).attr('layuimini-content-href'),
|
||||
href = $(this).attr('layuimini-content-href'),
|
||||
title = $(this).attr('data-title'),
|
||||
target = $(this).attr('target');
|
||||
if (target === '_blank') {
|
||||
parent.layer.close(loading);
|
||||
window.open(href, "_blank");
|
||||
return false;
|
||||
}
|
||||
if (tabId === null || tabId === undefined) tabId = new Date().getTime();
|
||||
var checkTab = miniTab.check(tabId, true);
|
||||
if (!checkTab) {
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: href,
|
||||
title: title,
|
||||
isIframe: true,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
}
|
||||
parent.layui.element.tabChange('layuiminiTab', tabId);
|
||||
parent.layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭选项卡
|
||||
**/
|
||||
$('body').on('click', '.layuimini-tab .layui-tab-title .layui-tab-close', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var $parent = $(this).parent();
|
||||
var tabId = $parent.attr('lay-id');
|
||||
if (tabId !== undefined || tabId !== null) {
|
||||
miniTab.delete(tabId);
|
||||
}
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 选项卡操作
|
||||
*/
|
||||
$('body').on('click', '[layuimini-tab-close]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var closeType = $(this).attr('layuimini-tab-close');
|
||||
$(".layuimini-tab .layui-tab-title li").each(function () {
|
||||
var tabId = $(this).attr('lay-id');
|
||||
var id = $(this).attr('id');
|
||||
var isCurrent = $(this).hasClass('layui-this');
|
||||
if (id !== 'layuiminiHomeTabId') {
|
||||
if (closeType === 'all') {
|
||||
miniTab.delete(tabId);
|
||||
} else {
|
||||
if (closeType === 'current' && isCurrent) {
|
||||
miniTab.delete(tabId);
|
||||
} else if (closeType === 'other' && !isCurrent) {
|
||||
miniTab.delete(tabId);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 禁用网页右键
|
||||
*/
|
||||
$(".layuimini-tab .layui-tab-title").unbind("mousedown").bind("contextmenu", function (e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 注册鼠标右键
|
||||
*/
|
||||
$('body').on('mousedown', '.layuimini-tab .layui-tab-title li', function (e) {
|
||||
var left = $(this).offset().left - $('.layuimini-tab ').offset().left + ($(this).width() / 2),
|
||||
tabId = $(this).attr('lay-id');
|
||||
if (e.which === 3) {
|
||||
miniTab.openTabRignMenu(tabId, left);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭tab右键菜单
|
||||
*/
|
||||
$('body').on('click', '.layui-body,.layui-header,.layuimini-menu-left,.layuimini-tab-make', function () {
|
||||
miniTab.closeTabRignMenu();
|
||||
});
|
||||
|
||||
/**
|
||||
* tab右键选项卡操作
|
||||
*/
|
||||
$('body').on('click', '[layuimini-tab-menu-close]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var closeType = $(this).attr('layuimini-tab-menu-close'),
|
||||
currentTabId = $('.layuimini-tab-mousedown').attr('data-tab-id');
|
||||
$(".layuimini-tab .layui-tab-title li").each(function () {
|
||||
var tabId = $(this).attr('lay-id');
|
||||
var id = $(this).attr('id');
|
||||
if (id !== 'layuiminiHomeTabId') {
|
||||
if (closeType === 'all') {
|
||||
miniTab.delete(tabId);
|
||||
} else {
|
||||
if (closeType === 'current' && currentTabId === tabId) {
|
||||
miniTab.delete(tabId);
|
||||
return false;
|
||||
} else if (closeType === 'other' && currentTabId !== tabId) {
|
||||
miniTab.delete(tabId);
|
||||
} else if (closeType === 'divorced' && currentTabId === tabId) {
|
||||
miniTab.divorced(tabId);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
miniTab.closeTabRignMenu();
|
||||
layer.close(loading);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听tab切换
|
||||
* @param options
|
||||
*/
|
||||
listenSwitch: function (options) {
|
||||
options.filter = options.filter || null;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.listenSwichCallback = options.listenSwichCallback || function () {
|
||||
|
||||
};
|
||||
element.on('tab(' + options.filter + ')', function (data) {
|
||||
var tabId = $(this).attr('lay-id');
|
||||
if (options.urlHashLocation) {
|
||||
location.hash = '/' + tabId;
|
||||
}
|
||||
if (typeof options.listenSwichCallback === 'function') {
|
||||
options.listenSwichCallback();
|
||||
}
|
||||
if (typeof options.switchtoindex === 'function') {
|
||||
options.switchtoindex();
|
||||
}
|
||||
// 判断是否为新增窗口
|
||||
if ($('.layuimini-menu-left').attr('layuimini-tab-tag') === 'add') {
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no')
|
||||
}
|
||||
|
||||
$("div.layui-side ul li.layui-nav-itemed").removeClass("layui-nav-itemed");
|
||||
|
||||
$("[layuimini-href]").parent().removeClass('layui-this');
|
||||
if (options.multiModule) {
|
||||
miniTab.listenSwitchMultiModule(tabId);
|
||||
} else {
|
||||
miniTab.listenSwitchSingleModule(tabId);
|
||||
}
|
||||
|
||||
miniTab.rollPosition();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听hash变化
|
||||
* @param options
|
||||
* @returns {boolean}
|
||||
*/
|
||||
listenHash: function (options) {
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.maxTabNum = options.maxTabNum || 200;
|
||||
options.homeInfo = options.homeInfo || {};
|
||||
options.menuList = options.menuList || [];
|
||||
if (!options.urlHashLocation) return false;
|
||||
var tabId = location.hash.replace(/^#\//, '');
|
||||
if (tabId === null || tabId === undefined || tabId ==='') return false;
|
||||
|
||||
// 判断是否为首页
|
||||
if(tabId ===options.homeInfo.href) return false;
|
||||
|
||||
// 判断是否为右侧菜单
|
||||
var menu = miniTab.searchMenu(tabId, options.menuList);
|
||||
if (menu !== undefined) {
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: tabId,
|
||||
title: menu.title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
|
||||
element.tabChange('layuiminiTab', tabId);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 判断是否为快捷菜单
|
||||
var isSearchMenu = false;
|
||||
$("[layuimini-content-href]").each(function () {
|
||||
if ($(this).attr("layuimini-content-href") === tabId) {
|
||||
var title = $(this).attr("data-title");
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: tabId,
|
||||
title: title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
|
||||
element.tabChange('layuiminiTab', tabId);
|
||||
isSearchMenu = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (isSearchMenu) return false;
|
||||
|
||||
// 既不是右侧菜单、快捷菜单,就直接打开
|
||||
var title = sessionStorage.getItem('layuiminimenu_' + tabId) === null ? tabId : sessionStorage.getItem('layuiminimenu_' + tabId);
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: tabId,
|
||||
title: title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
element.tabChange('layuiminiTab', tabId);
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听滚动
|
||||
*/
|
||||
listenRoll: function () {
|
||||
$(".layuimini-tab-roll-left").click(function () {
|
||||
miniTab.rollClick("left");
|
||||
});
|
||||
$(".layuimini-tab-roll-right").click(function () {
|
||||
miniTab.rollClick("right");
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 单模块切换
|
||||
* @param tabId
|
||||
*/
|
||||
listenSwitchSingleModule: function (tabId) {
|
||||
$("[layuimini-href]").each(function () {
|
||||
if ($(this).attr("layuimini-href") === tabId) {
|
||||
// 自动展开菜单栏
|
||||
var addMenuClass = function ($element, type) {
|
||||
if (type === 1) {
|
||||
$element.addClass('layui-this');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
} else {
|
||||
$element.addClass('layui-nav-itemed');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
}
|
||||
};
|
||||
addMenuClass($(this).parent(), 1);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 多模块切换
|
||||
* @param tabId
|
||||
*/
|
||||
listenSwitchMultiModule: function (tabId) {
|
||||
$("[layuimini-href]").each(function () {
|
||||
if ($(this).attr("layuimini-href") === tabId) {
|
||||
|
||||
// 自动展开菜单栏
|
||||
var addMenuClass = function ($element, type) {
|
||||
if (type === 1) {
|
||||
$element.addClass('layui-this');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
|
||||
var moduleId = $element.parent().attr('id');
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
$("#" + moduleId + "HeaderId").addClass("layui-this");
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
|
||||
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
} else {
|
||||
$element.addClass('layui-nav-itemed');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
|
||||
var moduleId = $element.parent().attr('id');
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
$("#" + moduleId + "HeaderId").addClass("layui-this");
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
|
||||
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
}
|
||||
};
|
||||
addMenuClass($(this).parent(), 1);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 自动定位
|
||||
*/
|
||||
rollPosition: function () {
|
||||
var $tabTitle = $('.layuimini-tab .layui-tab-title');
|
||||
var autoLeft = 0;
|
||||
$tabTitle.children("li").each(function () {
|
||||
if ($(this).hasClass('layui-this')) {
|
||||
return false;
|
||||
} else {
|
||||
autoLeft += $(this).outerWidth();
|
||||
}
|
||||
});
|
||||
$tabTitle.animate({
|
||||
scrollLeft: autoLeft - $tabTitle.width() / 3
|
||||
}, 200);
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击滚动
|
||||
* @param direction
|
||||
*/
|
||||
rollClick: function (direction) {
|
||||
var $tabTitle = $('.layuimini-tab .layui-tab-title');
|
||||
var left = $tabTitle.scrollLeft();
|
||||
if ('left' === direction) {
|
||||
$tabTitle.animate({
|
||||
scrollLeft: left - 450
|
||||
}, 200);
|
||||
} else {
|
||||
$tabTitle.animate({
|
||||
scrollLeft: left + 450
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 脱离标签栏
|
||||
* @param tabId
|
||||
*/
|
||||
divorced: function (tabId) {
|
||||
let tabtitle = $("ul.layui-tab-title").children('li[lay-id="' + tabId + '"]');
|
||||
let title = tabtitle.children("span").text();
|
||||
let tab = $("div.layui-tab-item").children("iframe[id='" + tabId + "']");
|
||||
let id = tabId.replace(/[^\u4e00-\u9fa5\w]/g, "");
|
||||
layer.open({
|
||||
id: id,
|
||||
title: title,
|
||||
type: 1,
|
||||
content: "",
|
||||
shadeClose: false,
|
||||
shade: 0,
|
||||
maxmin: true,
|
||||
area: ['50%', '80%'],
|
||||
success: function (layero, index) {
|
||||
//layero tab
|
||||
tabtitle.hide();
|
||||
tabtitle.removeClass("layui-this");
|
||||
tab.parent("div.layui-tab-item").attr("layui-id", index);
|
||||
tab.appendTo($(layero).children("div#" + id));
|
||||
//$(layero).children("div#" + id)[0].addendChild(tab[0]);
|
||||
},
|
||||
cancel: function (index, layero) {
|
||||
let iframe = $(layero).children("div#" + id).children("iframe");
|
||||
iframe.appendTo($("div.layui-tab-item[layui-id=" + index + "]"));
|
||||
//$("div.layui-tab-item.layui-show")[0].addendChild(iframe[0]);
|
||||
tabtitle.addClass("layui-this");
|
||||
tabtitle.show();
|
||||
},
|
||||
end: function () {
|
||||
layer.msg("已关闭");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
exports("miniTab", miniTab);
|
||||
});
|
||||
@@ -0,0 +1,469 @@
|
||||
/**
|
||||
* date:2020/02/28
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini tab框架扩展
|
||||
*/
|
||||
layui.define(["jquery", "layer"], function (exports) {
|
||||
var $ = layui.$,
|
||||
layer = layui.layer;
|
||||
|
||||
var miniTheme = {
|
||||
|
||||
/**
|
||||
* 主题配置项
|
||||
* @param bgcolorId
|
||||
* @returns {{headerLogo, menuLeftHover, headerRight, menuLeft, headerRightThis, menuLeftThis}|*|*[]}
|
||||
*/
|
||||
config: function (bgcolorId) {
|
||||
var bgColorConfig = [
|
||||
{
|
||||
headerRightBg: '#ffffff', //头部右侧背景色
|
||||
headerRightBgThis: '#e4e4e4', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(107, 107, 107, 0.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: 'rgba(107, 107, 107, 0.7)', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#565656', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(160, 160, 160, 0.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#247AE0', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#565656', //头部缩放按钮样式,
|
||||
headerLogoBg: '#192027', //logo背景颜色,
|
||||
headerLogoColor: 'rgb(191, 187, 187)', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#28333E', //左侧菜单背景,
|
||||
leftMenuBgThis: '#247AE0', //左侧菜单选中背景,
|
||||
leftMenuChildBg: '#0c0f13', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#247AE0', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#23262e', //头部右侧背景色
|
||||
headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#23262e', //左侧菜单背景,
|
||||
leftMenuBgThis: '#737373', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#23262e', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#ffa4d1', //头部右侧背景色
|
||||
headerRightBgThis: '#bf7b9d', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#ffa4d1', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#e694bd', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#737373', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#ffa4d1', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#1aa094', //头部右侧背景色
|
||||
headerRightBgThis: '#197971', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#23262e', //左侧菜单背景,
|
||||
leftMenuBgThis: '#1aa094', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#1aa094', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#1e9fff', //头部右侧背景色
|
||||
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1e9fff', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#1e9fff', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#ffb800', //头部右侧背景色
|
||||
headerRightBgThis: '#d09600', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#243346', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#8593a7', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#e82121', //头部右侧背景色
|
||||
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#e82121', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#963885', //头部右侧背景色
|
||||
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#243346', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#586473', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#963885', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#2D8CF0', //头部右侧背景色
|
||||
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#0069b7', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0069b7', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#2D8CF0', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#2d8cf0', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#ffb800', //头部右侧背景色
|
||||
headerRightBgThis: '#d09600', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#d09600', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#e82121', //头部右侧背景色
|
||||
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#d91f1f', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#e82121', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#963885', //头部右侧背景色
|
||||
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#772c6a', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#626f7f', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#963885', //tab选项卡选中颜色,
|
||||
}
|
||||
];
|
||||
if (bgcolorId === undefined) {
|
||||
return bgColorConfig;
|
||||
} else {
|
||||
return bgColorConfig[bgcolorId];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
* @param options
|
||||
*/
|
||||
render: function (options) {
|
||||
options.bgColorDefault = options.bgColorDefault || false;
|
||||
options.listen = options.listen || false;
|
||||
var bgcolorId = sessionStorage.getItem('layuiminiBgcolorId');
|
||||
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
|
||||
bgcolorId = options.bgColorDefault;
|
||||
}
|
||||
miniTheme.buildThemeCss(bgcolorId);
|
||||
if (options.listen) miniTheme.listen(options);
|
||||
},
|
||||
|
||||
/**
|
||||
* 构建主题样式
|
||||
* @param bgcolorId
|
||||
* @returns {boolean}
|
||||
*/
|
||||
buildThemeCss: function (bgcolorId) {
|
||||
if (!bgcolorId) {
|
||||
return false;
|
||||
}
|
||||
var bgcolorData = miniTheme.config(bgcolorId);
|
||||
var styleHtml = '/*头部右侧背景色 headerRightBg */\n' +
|
||||
'.layui-layout-admin .layui-header {\n' +
|
||||
' background-color: ' + bgcolorData.headerRightBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧选中背景色 headerRightBgThis */\n' +
|
||||
'.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {\n' +
|
||||
' background-color: ' + bgcolorData.headerRightBgThis + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧字体颜色 headerRightColor */\n' +
|
||||
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {\n' +
|
||||
' color: ' + bgcolorData.headerRightColor + ';\n' +
|
||||
'}\n' +
|
||||
'/**头部右侧下拉字体颜色 headerRightChildColor */\n' +
|
||||
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {\n' +
|
||||
' color: ' + bgcolorData.headerRightChildColor + '!important;\n' +
|
||||
'}\n'+
|
||||
'\n' +
|
||||
'/*头部右侧鼠标选中 headerRightColorThis */\n' +
|
||||
'.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {\n' +
|
||||
' color: ' + bgcolorData.headerRightColorThis + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
|
||||
'.layui-header .layui-nav .layui-nav-more {\n' +
|
||||
' border-top-color: ' + bgcolorData.headerRightNavMore + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
|
||||
'.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {\n' +
|
||||
' border-color: transparent transparent ' + bgcolorData.headerRightNavMore + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */\n' +
|
||||
'.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {\n' +
|
||||
' background-color: ' + bgcolorData.headerRightNavMoreBg + ' !important;\n' +
|
||||
' color:' + bgcolorData.headerRightNavMoreColor + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部缩放按钮样式 headerRightToolColor */\n' +
|
||||
'.layui-layout-admin .layui-header .layuimini-tool i {\n' +
|
||||
' color: ' + bgcolorData.headerRightToolColor + ';\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*logo背景颜色 headerLogoBg */\n' +
|
||||
'.layui-layout-admin .layuimini-logo {\n' +
|
||||
' background-color: ' + bgcolorData.headerLogoBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*logo字体颜色 headerLogoColor */\n' +
|
||||
'.layui-layout-admin .layuimini-logo h1 {\n' +
|
||||
' color: ' + bgcolorData.headerLogoColor + ';\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-more,.layuimini-menu-left-zoom.layui-nav .layui-nav-more {\n' +
|
||||
' border-top-color: ' + bgcolorData.leftMenuNavMore + ';\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {\n' +
|
||||
' border-color: transparent transparent ' + bgcolorData.leftMenuNavMore + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单背景 leftMenuBg */\n' +
|
||||
'.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {\n' +
|
||||
' background-color: ' + bgcolorData.leftMenuBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单选中背景 leftMenuBgThis */\n' +
|
||||
'.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {\n' +
|
||||
' background-color: ' + bgcolorData.leftMenuBgThis + ' !important\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单子菜单背景 leftMenuChildBg */\n' +
|
||||
'.layuimini-menu-left .layui-nav-itemed > .layui-nav-child{\n' +
|
||||
' background-color: ' + bgcolorData.leftMenuChildBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单字体颜色 leftMenuColor */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {\n' +
|
||||
' color: ' + bgcolorData.leftMenuColor + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单选中字体颜色 leftMenuColorThis */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {\n' +
|
||||
' color:' + bgcolorData.leftMenuColorThis + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/**tab选项卡选中颜色 tabActiveColor */\n' +
|
||||
'.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {\n' +
|
||||
' background-color: ' + bgcolorData.tabActiveColor + ';\n' +
|
||||
'}\n';
|
||||
$('#layuimini-bg-color').html(styleHtml);
|
||||
},
|
||||
|
||||
/**
|
||||
* 构建主题选择html
|
||||
* @param options
|
||||
* @returns {string}
|
||||
*/
|
||||
buildBgColorHtml: function (options) {
|
||||
options.bgColorDefault = options.bgColorDefault || 0;
|
||||
var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgcolorId'));
|
||||
if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
|
||||
var bgColorConfig = miniTheme.config();
|
||||
var html = '';
|
||||
$.each(bgColorConfig, function (key, val) {
|
||||
if (key === bgcolorId) {
|
||||
html += '<li class="layui-this" data-select-bgcolor="' + key + '">\n';
|
||||
} else {
|
||||
html += '<li data-select-bgcolor="' + key + '">\n';
|
||||
}
|
||||
html += '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">\n' +
|
||||
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: ' + val.headerLogoBg + ';"></span><span style="display:block; width: 80%; float: left; height: 12px; background: ' + val.headerRightBg + ';"></span></div>\n' +
|
||||
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: ' + val.leftMenuBg + ';"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #ffffff;"></span></div>\n' +
|
||||
'</a>\n' +
|
||||
'</li>';
|
||||
});
|
||||
return html;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
* @param options
|
||||
*/
|
||||
listen: function (options) {
|
||||
$('body').on('click', '[data-bgcolor]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var clientHeight = (document.documentElement.clientHeight) - 60;
|
||||
var bgColorHtml = miniTheme.buildBgColorHtml(options);
|
||||
var html = '<div class="layuimini-color">\n' +
|
||||
'<div class="color-title">\n' +
|
||||
'<span>配色方案</span>\n' +
|
||||
'</div>\n' +
|
||||
'<div class="color-content">\n' +
|
||||
'<ul>\n' + bgColorHtml + '</ul>\n' +
|
||||
'</div>\n' +
|
||||
'</div>';
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
shade: 0.2,
|
||||
anim: 2,
|
||||
shadeClose: true,
|
||||
id: 'layuiminiBgColor',
|
||||
area: ['340px', clientHeight + 'px'],
|
||||
offset: 'rb',
|
||||
content: html,
|
||||
success: function (index, layero) {
|
||||
},
|
||||
end: function () {
|
||||
$('.layuimini-select-bgcolor').removeClass('layui-this');
|
||||
}
|
||||
});
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
$('body').on('click', '[data-select-bgcolor]', function () {
|
||||
var bgcolorId = $(this).attr('data-select-bgcolor');
|
||||
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
|
||||
$(this).attr('class', 'layui-this');
|
||||
sessionStorage.setItem('layuiminiBgcolorId', bgcolorId);
|
||||
miniTheme.render({
|
||||
bgColorDefault: bgcolorId,
|
||||
listen: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
exports("miniTheme", miniTheme);
|
||||
|
||||
})
|
||||
;
|
||||
@@ -0,0 +1,248 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 主体框架扩展
|
||||
*/
|
||||
layui.define(["jquery","element", "miniTab"], function (exports) {
|
||||
var $ = layui.$,
|
||||
layer = layui.layer,
|
||||
dropdown = layui.dropdown,
|
||||
element = layui.element ,
|
||||
miniTab = layui.miniTab;
|
||||
|
||||
if (!/http(s*):\/\//.test(location.href)) {
|
||||
var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示";
|
||||
return layer.alert(tips);
|
||||
}
|
||||
|
||||
var xphp = {
|
||||
|
||||
/**
|
||||
* 后台框架初始化
|
||||
* @param options.iniUrl 后台初始化接口地址
|
||||
* @param options.urlHashLocation URL地址hash定位
|
||||
* @param options.bgColorDefault 默认皮肤
|
||||
* @param options.multiModule 是否开启多模块
|
||||
* @param options.menuChildOpen 是否展开子菜单
|
||||
* @param options.loadingTime 初始化加载时间
|
||||
* @param options.pageAnim iframe窗口动画
|
||||
* @param options.maxTabNum 最大的tab打开数量
|
||||
*/
|
||||
render: function (options) {
|
||||
options.iniUrl = options.iniUrl || null;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.bgColorDefault = options.bgColorDefault || 0;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.menuChildOpen = options.menuChildOpen || false;
|
||||
options.loadingTime = options.loadingTime || 0;
|
||||
options.pageAnim = options.pageAnim || false;
|
||||
options.maxTabNum = options.maxTabNum || 200;
|
||||
options.isHideOpenMenu = !options.isHideOpenMenu ? options.isHideOpenMenu : true;
|
||||
$.getJSON(options.iniUrl, function (data) {
|
||||
if (data == null) {
|
||||
xphp.error('暂无菜单信息')
|
||||
} else {
|
||||
xphp.renderHome(data.homeInfo);
|
||||
xphp.renderAnim(options.pageAnim);
|
||||
xphp.listen();
|
||||
dropdown.render({
|
||||
elem: '.menuitemon',
|
||||
data:data.menuInfo,
|
||||
customName: {
|
||||
id: 'id',
|
||||
title: 'title',
|
||||
children: 'children'
|
||||
},
|
||||
trigger: 'hover',
|
||||
click: function(obj){
|
||||
miniTab.openNewTab({...obj,href:obj.dizhi});
|
||||
}
|
||||
});
|
||||
//tab页
|
||||
miniTab.render({
|
||||
filter: 'layuiminiTab',
|
||||
urlHashLocation: options.urlHashLocation,
|
||||
multiModule: options.multiModule,
|
||||
menuChildOpen: options.menuChildOpen,
|
||||
maxTabNum: options.maxTabNum,
|
||||
menuList: data.menuInfo,
|
||||
homeInfo: data.homeInfo,
|
||||
switchtoindex:options.switchtoindex||false,
|
||||
listenSwichCallback: function () {
|
||||
xphp.renderDevice();
|
||||
}
|
||||
});
|
||||
xphp.deleteLoader(options.loadingTime);
|
||||
xphp.isHideOpenMenu(options.isHideOpenMenu);
|
||||
}
|
||||
}).fail(function () {
|
||||
xphp.error('菜单接口有误');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击左侧下拉菜单，关闭其他下拉菜单
|
||||
* @param data
|
||||
*/
|
||||
isHideOpenMenu: function (data) {
|
||||
$(".layui-side").on("click", ".layui-nav-item", function () {
|
||||
if (data) {
|
||||
$(this).siblings('li').attr('class', 'layui-nav-item');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化首页
|
||||
* @param data
|
||||
*/
|
||||
renderHome: function (data) {
|
||||
sessionStorage.setItem('layuiminiHomeHref', data.href);
|
||||
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
|
||||
$('#layuiminiHomeTabId').attr('lay-id', data.id);
|
||||
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化iframe窗口动画
|
||||
* @param anim
|
||||
*/
|
||||
renderAnim: function (anim) {
|
||||
if (anim) {
|
||||
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
|
||||
'.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
|
||||
'@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}' +
|
||||
'</style>');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 初始化设备端
|
||||
*/
|
||||
renderDevice: function () {
|
||||
if (xphp.checkMobile()) {
|
||||
$('.layuimini-tool i').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool i').attr('class', 'layui-icon layui-icon-list');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 初始化加载时间
|
||||
* @param loadingTime
|
||||
*/
|
||||
deleteLoader: function (loadingTime) {
|
||||
if (loadingTime) {
|
||||
setTimeout(function () {
|
||||
$('.layuimini-loader').fadeOut();
|
||||
}, loadingTime * 1000)
|
||||
} else {
|
||||
$('.layuimini-loader').fadeOut();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 成功
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
success: function (title) {
|
||||
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 失败
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
error: function (title) {
|
||||
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断是否为手机
|
||||
* @returns {boolean}
|
||||
*/
|
||||
checkMobile: function () {
|
||||
var ua = navigator.userAgent.toLocaleLowerCase();
|
||||
var pf = navigator.platform.toLocaleLowerCase();
|
||||
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|
||||
|| (/ucweb.*linux/i.test(ua));
|
||||
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
|
||||
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
|
||||
var clientWidth = document.documentElement.clientWidth;
|
||||
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
*/
|
||||
listen: function () {
|
||||
|
||||
/**
|
||||
* 监听提示信息
|
||||
*/
|
||||
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
|
||||
if (xphp.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var classInfo = $(this).attr('class'),
|
||||
tips = $(this).prop("innerHTML"),
|
||||
isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0 && tips) {
|
||||
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
|
||||
window.openTips = layer.tips(tips, $(this), {
|
||||
tips: [2, '#2f4056'],
|
||||
time: 300000,
|
||||
skin:"popup-tips",
|
||||
success:function (el) {
|
||||
var left = $(el).position().left - 10 ;
|
||||
$(el).css({ left:left });
|
||||
element.render();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("body").on("mouseleave", ".popup-tips", function () {
|
||||
if (xphp.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0) {
|
||||
try {
|
||||
layer.close(window.openTips);
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
/**
|
||||
* 点击遮罩层
|
||||
*/
|
||||
$('body').on('click', '.layuimini-make', function () {
|
||||
xphp.renderDevice();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
exports("xphp", xphp);
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,101 @@
|
||||
.ew-map-select-tool {
|
||||
padding: 5px 15px;
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.layui-btn.icon-btn {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.map-select:after, .map-select:before {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ew-map-select-poi {
|
||||
height: 505px;
|
||||
width: 250px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
float: left;
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ew-map-select-search-list-item {
|
||||
padding: 10px 30px 10px 15px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ew-map-select-search-list-item .ew-map-select-search-list-item-title {
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.ew-map-select-search-list-item .ew-map-select-search-list-item-address {
|
||||
font-size: 12px;
|
||||
color: #595959;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.ew-map-select-search-list-item-icon-ok {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#ew-map-select-tips {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
max-height: 430px;
|
||||
overflow: auto;
|
||||
top: 48px;
|
||||
left: 56px;
|
||||
width: 280px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,.12);
|
||||
border: 1px solid #d2d2d2;
|
||||
}
|
||||
|
||||
#ew-map-select-tips .ew-map-select-search-list-item {
|
||||
padding: 10px 15px 10px 35px;
|
||||
}
|
||||
|
||||
.ew-map-select-search-list-item-icon-search {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.ew-map-select-search-list-item .ew-map-select-search-list-item-title {
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.ew-map-select-search-list-item .ew-map-select-search-list-item-address {
|
||||
font-size: 12px;
|
||||
color: #595959;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.cur-load0 {
|
||||
display: none;
|
||||
background: url('./img/location.cur');
|
||||
}
|
||||
|
||||
.cur-load1 {
|
||||
display: none;
|
||||
background: url('./img/location_blue.cur');
|
||||
}
|
||||
@@ -0,0 +1,759 @@
|
||||
layui.define(['layer', 'locationX'], function (exports) {
|
||||
var $ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
MOD_NAME = "location",
|
||||
GPS = layui.locationX;
|
||||
|
||||
|
||||
var tpl0 = '<div class="cur-load0"></div>\n' +
|
||||
'<div class="cur-load1"></div>\n' +
|
||||
'<div class="ew-map-select-tool" style="position: relative;">\n' +
|
||||
' 经度：<input id="lng" class="layui-input inline-block" style="width: 190px;" autocomplete="off"/>\n' +
|
||||
' 纬度：<input id="lat" class="layui-input inline-block" style="width: 190px;" autocomplete="off"/>\n' +
|
||||
' <button id="ew-map-select-btn-ok" class="layui-btn icon-btn pull-right" type="button"><i\n' +
|
||||
' class="layui-icon"></i>确定\n' +
|
||||
' </button>\n' +
|
||||
'</div>\n' +
|
||||
'<div id="map" style="width: 100%;height: calc(100% - 48px);"></div>';
|
||||
|
||||
var tpl1 ='<div class="cur-load0"></div>\n' +
|
||||
'<div class="cur-load1"></div>\n' +
|
||||
'<div class="ew-map-select-tool" style="position: relative;">\n' +
|
||||
' 搜索：<input id="ew-map-select-input-search" class="layui-input icon-search inline-block" style="width: 190px;" placeholder="输入关键字搜索" autocomplete="off" />\n' +
|
||||
' <div id="ew-map-select-tips" class="ew-map-select-search-list layui-hide" style="left: 0px;width: 248px;"></div>\n' +
|
||||
' 经度：<input id="lng" class="layui-input inline-block" style="width: 190px;" autocomplete="off" />\n' +
|
||||
' 纬度：<input id="lat" class="layui-input inline-block" style="width: 190px;" autocomplete="off" />\n' +
|
||||
' <button id="ew-map-select-btn-ok" class="layui-btn icon-btn pull-right" type="button"><i class="layui-icon"></i>确定</button>\n' +
|
||||
'</div>\n' +
|
||||
'<div class="map-select">\n' +
|
||||
'\n' +
|
||||
' <div id="map" style="width: 600px;height: 505px;float: right;"></div>\n' +
|
||||
' <div id="ew-map-select-poi" class="layui-col-sm5 ew-map-select-search-list ew-map-select-poi">\n' +
|
||||
' </div>\n' +
|
||||
'\n' +
|
||||
'</div>';
|
||||
|
||||
|
||||
var obj = function (config) {
|
||||
|
||||
this.config = {
|
||||
// 默认中心点位置是北京天安门，所有坐标系都用此坐标，偏的不大
|
||||
type: 0, // 0 : 仅定位 1： 带有搜索的定位
|
||||
longitude: 116.404,
|
||||
latitude: 39.915,
|
||||
title: '定位',
|
||||
zoom: 18,
|
||||
apiType: "baiduMap",
|
||||
coordinate: "baiduMap",
|
||||
mapType: 0,
|
||||
searchKey: '村',
|
||||
init: function () {
|
||||
return {longitude: 116.404, latitude: 39.915};
|
||||
},
|
||||
success: function () {
|
||||
|
||||
},
|
||||
onClickTip: function (data) {
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.config = $.extend(this.config, config);
|
||||
|
||||
// 初始化经纬度信息
|
||||
var initData = this.config.init();
|
||||
this.config.longitude = initData.longitude;
|
||||
this.config.latitude = initData.latitude;
|
||||
|
||||
this.lng = this.config.longitude;
|
||||
this.lat = this.config.latitude;
|
||||
// 转换初始坐标
|
||||
this.initCoordinate = function (lng, lat) {
|
||||
var o = this;
|
||||
if (o.config.apiType == o.config.coordinate) {
|
||||
return {lng: lng, lat: lat};
|
||||
} else if (o.config.apiType == 'baiduMap' && o.config.coordinate == 'tiandiMap') {
|
||||
var res = GPS.WGS84_bd(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'tiandiMap' && o.config.coordinate == 'baiduMap') {
|
||||
var res = GPS.bd_WGS84(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'gaodeMap' && o.config.coordinate == 'baiduMap') {
|
||||
var res = GPS.bd_decrypt(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'baiduMap' && o.config.coordinate == 'gaodeMap') {
|
||||
var res = GPS.bd_encrypt(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'gaodeMap' && o.config.coordinate == 'tiandiMap') {
|
||||
var res = GPS.gcj_encrypt(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'tiandiMap' && o.config.coordinate == 'gaodeMap') {
|
||||
var res = GPS.gcj_decrypt(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
}
|
||||
}
|
||||
|
||||
if (this.config.longitude && this.config.latitude && this.config.mapType != this.config.coordinate) {
|
||||
var tbd = this.initCoordinate(this.config.longitude, this.config.latitude);
|
||||
this.config.longitude = tbd.lng;
|
||||
this.config.latitude = tbd.lat;
|
||||
}
|
||||
|
||||
|
||||
this.transformCoordinate = function (lng, lat) {
|
||||
var o = this;
|
||||
if (o.config.apiType == o.config.coordinate) {
|
||||
return {lng: lng, lat: lat};
|
||||
} else if (o.config.apiType == 'baiduMap' && o.config.coordinate == 'tiandiMap') {
|
||||
var res = GPS.bd_WGS84(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'tiandiMap' && o.config.coordinate == 'baiduMap') {
|
||||
var res = GPS.WGS84_bd(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'gaodeMap' && o.config.coordinate == 'baiduMap') {
|
||||
var res = GPS.bd_encrypt(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'baiduMap' && o.config.coordinate == 'gaodeMap') {
|
||||
var res = GPS.bd_decrypt(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'gaodeMap' && o.config.coordinate == 'tiandiMap') {
|
||||
var res = GPS.gcj_decrypt(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
} else if (o.config.apiType == 'tiandiMap' && o.config.coordinate == 'gaodeMap') {
|
||||
var res = GPS.gcj_encrypt(lat, lng);
|
||||
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
|
||||
}
|
||||
}
|
||||
|
||||
this.openBaiduMap = function () {
|
||||
var o = this;
|
||||
var map; // 创建地图实例
|
||||
if (o.config.mapType == 1) {
|
||||
map = new BMap.Map("map", {enableMapClick: false, mapType: BMAP_SATELLITE_MAP});
|
||||
} else if (o.config.mapType == 2) {
|
||||
map = new BMap.Map("map", {enableMapClick: false, mapType: BMAP_HYBRID_MAP});
|
||||
} else {
|
||||
map = new BMap.Map("map", {enableMapClick: false, mapType: BMAP_NORMAL_MAP});
|
||||
}
|
||||
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
|
||||
var point = new BMap.Point(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915); // 创建点坐标
|
||||
map.centerAndZoom(point, o.config.zoom);
|
||||
map.setDefaultCursor("url('" + layui.cache.base + "location/img/location.cur') 17 35,auto"); //设置地图默认的鼠标指针样式
|
||||
var marker = new BMap.Marker(map.getCenter()); // 创建标注
|
||||
map.addOverlay(marker); // 将标注添加到地图中
|
||||
map.addEventListener("click", function (e) {
|
||||
var tbd = o.transformCoordinate(e.point.lng, e.point.lat);
|
||||
//显示经纬度
|
||||
$("#lng").val(tbd.lng);
|
||||
$("#lat").val(tbd.lat);
|
||||
o.lng = tbd.lng;
|
||||
o.lat = tbd.lat;
|
||||
var point = new BMap.Point(e.point.lng, e.point.lat);
|
||||
map.removeOverlay(marker);
|
||||
marker = new BMap.Marker(point);
|
||||
map.addOverlay(marker);
|
||||
|
||||
if (o.config.type==1){
|
||||
searchNearBy(e.point.lng, e.point.lat);
|
||||
}
|
||||
});
|
||||
|
||||
// 标记中心点
|
||||
var markCenter = function (lng, lat){
|
||||
var tbd = o.transformCoordinate(lng, lat);
|
||||
//显示经纬度
|
||||
$("#lng").val(tbd.lng);
|
||||
$("#lat").val(tbd.lat);
|
||||
o.lng = tbd.lng;
|
||||
o.lat = tbd.lat;
|
||||
var point = new BMap.Point(lng, lat);
|
||||
map.removeOverlay(marker);
|
||||
marker = new BMap.Marker(point);
|
||||
map.addOverlay(marker);
|
||||
if (o.config.type==1){
|
||||
searchNearBy(lng, lat);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 搜索附近方法
|
||||
var searchNearBy = function (lng, lat){
|
||||
var point = new BMap.Point(lng, lat);
|
||||
var localSearch = new BMap.LocalSearch(point, {
|
||||
pageCapacity: 10,
|
||||
onSearchComplete: function (result){
|
||||
var htmlList = '';
|
||||
$.each(result,function (i,val){
|
||||
$.each(val.Hr,function (i,ad){
|
||||
htmlList += '<div data-lng="' + ad.point.lng + '" data-lat="' + ad.point.lat + '" data-title="'+ ad.title +'" data-address="'+ ad.address +'" class="ew-map-select-search-list-item">';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-title">' + ad.title + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-address">' + ad.address + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-icon-ok layui-hide"><i class="layui-icon layui-icon-ok-circle"></i></div>';
|
||||
htmlList += '</div>';
|
||||
});
|
||||
});
|
||||
$('#ew-map-select-poi').html(htmlList);
|
||||
}
|
||||
});
|
||||
localSearch.searchNearby([o.config.searchKey,'镇','街道','店'],point,1000);
|
||||
}
|
||||
|
||||
// 初始化搜索
|
||||
if (o.config.type==1){
|
||||
o.initBaiduSearch(map,searchNearBy,markCenter);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.initBaiduSearch = function (map,searchNearBy,markCenter){
|
||||
var o = this;
|
||||
|
||||
searchNearBy(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915);
|
||||
|
||||
// poi列表点击事件
|
||||
$('#ew-map-select-poi').off('click').on('click', '.ew-map-select-search-list-item', function () {
|
||||
$('#ew-map-select-tips').addClass('layui-hide');
|
||||
$('#ew-map-select-poi .ew-map-select-search-list-item-icon-ok').addClass('layui-hide');
|
||||
$(this).find('.ew-map-select-search-list-item-icon-ok').removeClass('layui-hide');
|
||||
$('#ew-map-select-center-img').removeClass('bounceInDown');
|
||||
setTimeout(function () {
|
||||
$('#ew-map-select-center-img').addClass('bounceInDown');
|
||||
});
|
||||
var lng = $(this).data('lng');
|
||||
var lat = $(this).data('lat');
|
||||
|
||||
//
|
||||
var point = new BMap.Point(lng, lat);
|
||||
map.centerAndZoom(point, map.getZoom());
|
||||
|
||||
markCenter(lng, lat);
|
||||
var title = $(this).data('title');
|
||||
var address = $(this).data('address');
|
||||
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
|
||||
});
|
||||
|
||||
// 搜索提示
|
||||
var $inputSearch = $('#ew-map-select-input-search');
|
||||
$inputSearch.off('input').on('input', function () {
|
||||
var keywords = $(this).val();
|
||||
var $selectTips = $('#ew-map-select-tips');
|
||||
if (!keywords) {
|
||||
$selectTips.html('');
|
||||
$selectTips.addClass('layui-hide');
|
||||
}
|
||||
|
||||
var autoComplete = new BMap.LocalSearch('全国', {
|
||||
pageCapacity: 10,
|
||||
onSearchComplete: function (result){
|
||||
if (undefined == result){
|
||||
return ;
|
||||
}
|
||||
var htmlList = '';
|
||||
$.each(result.Hr,function (i,ad){
|
||||
htmlList += '<div data-lng="' + ad.point.lng + '" data-lat="' + ad.point.lat + '" data-title="'+ ad.title +'" data-address="'+ ad.address +'" class="ew-map-select-search-list-item">';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-icon-search"><i class="layui-icon layui-icon-search"></i></div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-title">' + ad.title + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-address">' + ad.address + '</div>';
|
||||
htmlList += '</div>';
|
||||
});
|
||||
$selectTips.html(htmlList);
|
||||
if (result.Hr.length === 0) $('#ew-map-select-tips').addClass('layui-hide');
|
||||
else $('#ew-map-select-tips').removeClass('layui-hide');
|
||||
}
|
||||
});
|
||||
autoComplete.search(keywords);
|
||||
|
||||
});
|
||||
$inputSearch.off('blur').on('blur', function () {
|
||||
var keywords = $(this).val();
|
||||
var $selectTips = $('#ew-map-select-tips');
|
||||
if (!keywords) {
|
||||
$selectTips.html('');
|
||||
$selectTips.addClass('layui-hide');
|
||||
}
|
||||
});
|
||||
$inputSearch.off('focus').on('focus', function () {
|
||||
var keywords = $(this).val();
|
||||
if (keywords) $('#ew-map-select-tips').removeClass('layui-hide');
|
||||
});
|
||||
// tips列表点击事件
|
||||
$('#ew-map-select-tips').off('click').on('click', '.ew-map-select-search-list-item', function () {
|
||||
$('#ew-map-select-tips').addClass('layui-hide');
|
||||
var lng = $(this).data('lng');
|
||||
var lat = $(this).data('lat');
|
||||
var point = new BMap.Point(lng, lat);
|
||||
map.centerAndZoom(point, map.getZoom());
|
||||
markCenter(lng, lat);
|
||||
var title = $(this).data('title');
|
||||
var address = $(this).data('address');
|
||||
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
|
||||
});
|
||||
}
|
||||
|
||||
this.openTiandiMap = function () {
|
||||
var o = this;
|
||||
var map = new T.Map("map"); // 创建地图实例
|
||||
if (o.config.mapType == 1) {
|
||||
map.setMapType(TMAP_SATELLITE_MAP);
|
||||
} else if (o.config.mapType == 2) {
|
||||
map.setMapType(TMAP_HYBRID_MAP);
|
||||
} else {
|
||||
map.setMapType(TMAP_NORMAL_MAP);
|
||||
}
|
||||
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
||||
var latLng = new T.LngLat(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915);
|
||||
|
||||
map.centerAndZoom(latLng, o.config.zoom);
|
||||
|
||||
var marker = new T.Marker(latLng); // 创建标注
|
||||
map.addOverLay(marker);// 将标注添加到地图中
|
||||
|
||||
if (undefined === window.T.MarkTool) {
|
||||
setTimeout(function () {
|
||||
initMarkerTool();
|
||||
}, 200);
|
||||
} else {
|
||||
initMarkerTool();
|
||||
}
|
||||
|
||||
function initMarkerTool() {
|
||||
var markerTool = new T.MarkTool(map, {follow: true});
|
||||
markerTool.open();
|
||||
/*标注事件*/
|
||||
var mark = function (e) {
|
||||
$.each(map.getOverlays(), function (i, marker) {
|
||||
if (marker != e.currentMarker) {
|
||||
map.removeOverLay(marker);
|
||||
}
|
||||
})
|
||||
//显示经纬度
|
||||
var tbd = o.transformCoordinate(e.currentLnglat.getLng(), e.currentLnglat.getLat());
|
||||
$("#lng").val(tbd.lng);
|
||||
$("#lat").val(tbd.lat);
|
||||
o.lng = tbd.lng;
|
||||
o.lat = tbd.lat;
|
||||
markerTool = new T.MarkTool(map, {follow: true});
|
||||
markerTool.open();
|
||||
markerTool.addEventListener("mouseup", mark);
|
||||
|
||||
if (o.config.type==1){
|
||||
searchNearBy(e.currentLnglat.getLng(), e.currentLnglat.getLat());
|
||||
}
|
||||
}
|
||||
//绑定mouseup事件 在用户每完成一次标注时触发事件。
|
||||
markerTool.addEventListener("mouseup", mark);
|
||||
}
|
||||
|
||||
// 标记中心点
|
||||
var markCenter = function (lng, lat) {
|
||||
$.each(map.getOverlays(), function (i, marker) {
|
||||
map.removeOverLay(marker);
|
||||
})
|
||||
//显示经纬度
|
||||
var tbd = o.transformCoordinate(lng, lat);
|
||||
$("#lng").val(tbd.lng);
|
||||
$("#lat").val(tbd.lat);
|
||||
o.lng = tbd.lng;
|
||||
o.lat = tbd.lat;
|
||||
var latLng = new T.LngLat(lng, lat);
|
||||
var marker = new T.Marker(latLng); // 创建标注
|
||||
map.addOverLay(marker);// 将标注添加到地图中
|
||||
if (o.config.type==1){
|
||||
searchNearBy(lng, lat);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 搜索附近方法
|
||||
var searchNearBy = function (lng, lat){
|
||||
var point = new T.LngLat(lng,lat);
|
||||
var localSearch = new T.LocalSearch(map, {
|
||||
pageCapacity: 10,
|
||||
onSearchComplete: function (result){
|
||||
var htmlList = '';
|
||||
$.each(result.getPois(),function (i,ad){
|
||||
var lnglat = ad.lonlat.split(" ");
|
||||
htmlList += '<div data-lng="' + lnglat[0] + '" data-lat="' + lnglat[1] + '" data-title="'+ ad.name +'" data-address="'+ ad.address +'" class="ew-map-select-search-list-item">';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-title">' + ad.name + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-address">' + ad.address + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-icon-ok layui-hide"><i class="layui-icon layui-icon-ok-circle"></i></div>';
|
||||
htmlList += '</div>';
|
||||
});
|
||||
$('#ew-map-select-poi').html(htmlList);
|
||||
}
|
||||
});
|
||||
localSearch.setQueryType(1);
|
||||
localSearch.searchNearby(o.config.searchKey,point,1000);
|
||||
}
|
||||
|
||||
if (o.config.type==1){
|
||||
o.initTiandiSearch(map,searchNearBy,markCenter);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.initTiandiSearch = function (map,searchNearBy,markCenter){
|
||||
var o = this;
|
||||
searchNearBy(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915);
|
||||
|
||||
// poi列表点击事件
|
||||
$('#ew-map-select-poi').off('click').on('click', '.ew-map-select-search-list-item', function () {
|
||||
$('#ew-map-select-tips').addClass('layui-hide');
|
||||
$('#ew-map-select-poi .ew-map-select-search-list-item-icon-ok').addClass('layui-hide');
|
||||
$(this).find('.ew-map-select-search-list-item-icon-ok').removeClass('layui-hide');
|
||||
$('#ew-map-select-center-img').removeClass('bounceInDown');
|
||||
setTimeout(function () {
|
||||
$('#ew-map-select-center-img').addClass('bounceInDown');
|
||||
});
|
||||
var lng = $(this).data('lng');
|
||||
var lat = $(this).data('lat');
|
||||
|
||||
//
|
||||
var point = new T.LngLat(lng, lat);
|
||||
map.centerAndZoom(point, map.getZoom());
|
||||
|
||||
markCenter(lng, lat);
|
||||
var title = $(this).data('title');
|
||||
var address = $(this).data('address');
|
||||
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
|
||||
});
|
||||
|
||||
// 搜索提示
|
||||
var $inputSearch = $('#ew-map-select-input-search');
|
||||
$inputSearch.off('input').on('input', function () {
|
||||
var keywords = $(this).val();
|
||||
var $selectTips = $('#ew-map-select-tips');
|
||||
if (!keywords) {
|
||||
$selectTips.html('');
|
||||
$selectTips.addClass('layui-hide');
|
||||
}
|
||||
|
||||
var autoComplete = new T.LocalSearch(map, {
|
||||
pageCapacity: 10,
|
||||
onSearchComplete: function (result){
|
||||
if (undefined == result){
|
||||
return ;
|
||||
}
|
||||
var htmlList = '';
|
||||
$.each(result.getPois(),function (i,ad){
|
||||
var lnglat = ad.lonlat.split(" ");
|
||||
htmlList += '<div data-lng="' + lnglat[0] + '" data-lat="' + lnglat[1] + '" data-title="'+ ad.name +'" data-address="'+ ad.address +'" class="ew-map-select-search-list-item">';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-title">' + ad.name + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-address">' + ad.address + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-icon-ok layui-hide"><i class="layui-icon layui-icon-ok-circle"></i></div>';
|
||||
htmlList += '</div>';
|
||||
});
|
||||
$selectTips.html(htmlList);
|
||||
if (result.getPois().length === 0) $('#ew-map-select-tips').addClass('layui-hide');
|
||||
else $('#ew-map-select-tips').removeClass('layui-hide');
|
||||
}
|
||||
});
|
||||
autoComplete.setQueryType(1);
|
||||
autoComplete.search(keywords);
|
||||
|
||||
});
|
||||
$inputSearch.off('blur').on('blur', function () {
|
||||
var keywords = $(this).val();
|
||||
var $selectTips = $('#ew-map-select-tips');
|
||||
if (!keywords) {
|
||||
$selectTips.html('');
|
||||
$selectTips.addClass('layui-hide');
|
||||
}
|
||||
});
|
||||
$inputSearch.off('focus').on('focus', function () {
|
||||
var keywords = $(this).val();
|
||||
if (keywords) $('#ew-map-select-tips').removeClass('layui-hide');
|
||||
});
|
||||
// tips列表点击事件
|
||||
$('#ew-map-select-tips').off('click').on('click', '.ew-map-select-search-list-item', function () {
|
||||
$('#ew-map-select-tips').addClass('layui-hide');
|
||||
var lng = $(this).data('lng');
|
||||
var lat = $(this).data('lat');
|
||||
var point = new T.LngLat(lng, lat);
|
||||
map.centerAndZoom(point, map.getZoom());
|
||||
markCenter(lng, lat);
|
||||
var title = $(this).data('title');
|
||||
var address = $(this).data('address');
|
||||
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
|
||||
});
|
||||
}
|
||||
|
||||
this.openGaodeMap = function () {
|
||||
var o = this;
|
||||
// 创建地图实例
|
||||
var layers = [];
|
||||
if (o.config.mapType == '1') {
|
||||
var satellite = new AMap.TileLayer.Satellite();
|
||||
layers.push(satellite);
|
||||
} else if (o.config.mapType == '2') {
|
||||
var satellite = new AMap.TileLayer.Satellite();
|
||||
var roadNet = new AMap.TileLayer.RoadNet();
|
||||
layers.push(satellite);
|
||||
layers.push(roadNet);
|
||||
} else {
|
||||
var layer = new AMap.TileLayer();
|
||||
layers.push(layer);
|
||||
}
|
||||
var map = new AMap.Map("map",
|
||||
{
|
||||
resizeEnable: true,
|
||||
zoom: o.config.zoom,
|
||||
center: [o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915],
|
||||
layers: layers
|
||||
});
|
||||
map.setDefaultCursor("url('" + layui.cache.base + "location/img/location_blue.cur') 17 35,auto");
|
||||
|
||||
// 初始化中间点标记
|
||||
var marker = new AMap.Marker({
|
||||
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
|
||||
position: [o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915]
|
||||
});
|
||||
map.add(marker);
|
||||
var markCenter = function (e) {
|
||||
// 标记中心点
|
||||
map.clearMap();
|
||||
// alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
|
||||
//显示经纬度
|
||||
var tbd = o.transformCoordinate(e.lng, e.lat);
|
||||
$("#lng").val(tbd.lng);
|
||||
$("#lat").val(tbd.lat);
|
||||
o.lng = tbd.lng;
|
||||
o.lat = tbd.lat;
|
||||
var marker = new AMap.Marker({
|
||||
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
|
||||
position: [e.lng, e.lat]
|
||||
});
|
||||
map.add(marker);
|
||||
if (o.config.type == 1) {
|
||||
searchNearBy(e.lng, e.lat);
|
||||
}
|
||||
}
|
||||
|
||||
var clickHandler = function (e) {
|
||||
markCenter({lng: e.lnglat.getLng(), lat: e.lnglat.getLat()});
|
||||
};
|
||||
|
||||
// 绑定事件
|
||||
map.on('click', clickHandler);
|
||||
|
||||
// 附近搜索方法
|
||||
var searchNearBy = function (lng, lat) {
|
||||
AMap.service(['AMap.PlaceSearch'], function () {
|
||||
var placeSearch = new AMap.PlaceSearch({
|
||||
type: '', pageSize: 10, pageIndex: 1
|
||||
});
|
||||
var cpoint = [lng, lat];
|
||||
placeSearch.searchNearBy('', cpoint, 1000, function (status, result) {
|
||||
if (status === 'complete') {
|
||||
var pois = result.poiList.pois;
|
||||
var htmlList = '';
|
||||
for (var i = 0; i < pois.length; i++) {
|
||||
var poiItem = pois[i];
|
||||
if (poiItem.location !== undefined) {
|
||||
htmlList += '<div data-lng="' + poiItem.location.lng + '" data-lat="' + poiItem.location.lat + '" data-title="'+ poiItem.name +'" data-address="'+ poiItem.address +'" class="ew-map-select-search-list-item">';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-title">' + poiItem.name + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-address">' + poiItem.address + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-icon-ok layui-hide"><i class="layui-icon layui-icon-ok-circle"></i></div>';
|
||||
htmlList += '</div>';
|
||||
}
|
||||
}
|
||||
$('#ew-map-select-poi').html(htmlList);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化search
|
||||
if (o.config.type == 1) {
|
||||
o.initGaodeSearch(map, markCenter, searchNearBy);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.initGaodeSearch = function (map, markCenter, searchNearBy) {
|
||||
var o = this;
|
||||
// poi列表点击事件
|
||||
$('#ew-map-select-poi').off('click').on('click', '.ew-map-select-search-list-item', function () {
|
||||
$('#ew-map-select-tips').addClass('layui-hide');
|
||||
$('#ew-map-select-poi .ew-map-select-search-list-item-icon-ok').addClass('layui-hide');
|
||||
$(this).find('.ew-map-select-search-list-item-icon-ok').removeClass('layui-hide');
|
||||
$('#ew-map-select-center-img').removeClass('bounceInDown');
|
||||
setTimeout(function () {
|
||||
$('#ew-map-select-center-img').addClass('bounceInDown');
|
||||
});
|
||||
var lng = $(this).data('lng');
|
||||
var lat = $(this).data('lat');
|
||||
var name = $(this).find('.ew-map-select-search-list-item-title').text();
|
||||
var address = $(this).find('.ew-map-select-search-list-item-address').text();
|
||||
//
|
||||
map.setZoomAndCenter(map.getZoom(), [lng, lat]);
|
||||
|
||||
markCenter({lng: lng, lat: lat});
|
||||
var title = $(this).data('title');
|
||||
var address = $(this).data('address');
|
||||
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
|
||||
});
|
||||
|
||||
searchNearBy(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915);
|
||||
|
||||
// 搜索提示
|
||||
var $inputSearch = $('#ew-map-select-input-search');
|
||||
$inputSearch.off('input').on('input', function () {
|
||||
var keywords = $(this).val();
|
||||
var $selectTips = $('#ew-map-select-tips');
|
||||
if (!keywords) {
|
||||
$selectTips.html('');
|
||||
$selectTips.addClass('layui-hide');
|
||||
}
|
||||
AMap.plugin('AMap.Autocomplete', function () {
|
||||
var autoComplete = new AMap.Autocomplete({city: '全国'});
|
||||
autoComplete.search(keywords, function (status, result) {
|
||||
if (result.tips) {
|
||||
var tips = result.tips;
|
||||
var htmlList = '';
|
||||
for (var i = 0; i < tips.length; i++) {
|
||||
var tipItem = tips[i];
|
||||
if (tipItem.location !== undefined) {
|
||||
htmlList += '<div data-lng="' + tipItem.location.lng + '" data-lat="' + tipItem.location.lat + '" data-title="'+ tipItem.name +'" data-address="'+ tipItem.address +'" class="ew-map-select-search-list-item">';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-icon-search"><i class="layui-icon layui-icon-search"></i></div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-title">' + tipItem.name + '</div>';
|
||||
htmlList += ' <div class="ew-map-select-search-list-item-address">' + tipItem.address + '</div>';
|
||||
htmlList += '</div>';
|
||||
}
|
||||
}
|
||||
$selectTips.html(htmlList);
|
||||
if (tips.length === 0) $('#ew-map-select-tips').addClass('layui-hide');
|
||||
else $('#ew-map-select-tips').removeClass('layui-hide');
|
||||
} else {
|
||||
$selectTips.html('');
|
||||
$selectTips.addClass('layui-hide');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
$inputSearch.off('blur').on('blur', function () {
|
||||
var keywords = $(this).val();
|
||||
var $selectTips = $('#ew-map-select-tips');
|
||||
if (!keywords) {
|
||||
$selectTips.html('');
|
||||
$selectTips.addClass('layui-hide');
|
||||
}
|
||||
});
|
||||
$inputSearch.off('focus').on('focus', function () {
|
||||
var keywords = $(this).val();
|
||||
if (keywords) $('#ew-map-select-tips').removeClass('layui-hide');
|
||||
});
|
||||
// tips列表点击事件
|
||||
$('#ew-map-select-tips').off('click').on('click', '.ew-map-select-search-list-item', function () {
|
||||
$('#ew-map-select-tips').addClass('layui-hide');
|
||||
var lng = $(this).data('lng');
|
||||
var lat = $(this).data('lat');
|
||||
map.setZoomAndCenter(map.getZoom(), [lng, lat]);
|
||||
markCenter({lng: lng, lat: lat});
|
||||
var title = $(this).data('title');
|
||||
var address = $(this).data('address');
|
||||
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
|
||||
});
|
||||
}
|
||||
|
||||
this.openMap = function () {
|
||||
var o = this;
|
||||
|
||||
if (o.config.apiType == "baiduMap") {
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
area: ["850px", "600px"],
|
||||
title: o.config.title,
|
||||
content: o.config.type == 0 ? tpl0:tpl1,
|
||||
success: function () {
|
||||
// 回显数据 中心标记经纬度
|
||||
$("#lng").val(o.lng);
|
||||
$("#lat").val(o.lat);
|
||||
// 渲染地图
|
||||
if (undefined === window.BMap) {
|
||||
$.getScript("http://api.map.baidu.com/getscript?v=2.0&ak=tCNPmUfNmy4nTR3VYW71a6IgyWMaOSUb&services=&t=20200824135534", function () {
|
||||
o.openBaiduMap();
|
||||
});
|
||||
} else {
|
||||
o.openBaiduMap();
|
||||
}
|
||||
// 绑定事件
|
||||
$("#ew-map-select-btn-ok").on("click", function () {
|
||||
o.config.success({lng: o.lng ? o.lng : 116.404, lat: o.lat ? o.lat : 39.915});
|
||||
layer.close(index);
|
||||
})
|
||||
}
|
||||
});
|
||||
} else if (o.config.apiType == "tiandiMap") {
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
area: ["850px", "600px"],
|
||||
title: o.config.title,
|
||||
content: o.config.type == 0 ? tpl0:tpl1,
|
||||
success: function () {
|
||||
// 回显数据 中心标记经纬度
|
||||
$("#lng").val(o.lng);
|
||||
$("#lat").val(o.lat);
|
||||
// 渲染地图
|
||||
if (undefined === window.T) {
|
||||
$.getScript("http://api.tianditu.gov.cn/api?v=4.0&tk=a8718394c98e9ae85b0d7af352653ce2&callback=init", function () {
|
||||
o.openTiandiMap();
|
||||
})
|
||||
} else {
|
||||
o.openTiandiMap();
|
||||
}
|
||||
// 绑定事件
|
||||
$("#ew-map-select-btn-ok").on("click", function () {
|
||||
o.config.success({lng: o.lng ? o.lng : 116.404, lat: o.lat ? o.lat : 39.915});
|
||||
layer.close(index);
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
} else if (o.config.apiType == "gaodeMap") {
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
area: ["850px", "600px"],
|
||||
title: o.config.title,
|
||||
content: o.config.type == 0 ? tpl0:tpl1,
|
||||
success: function () {
|
||||
// 回显数据 中心标记经纬度
|
||||
$("#lng").val(o.lng);
|
||||
$("#lat").val(o.lat);
|
||||
// 渲染地图
|
||||
if (undefined === window.AMap) {
|
||||
$.getScript("https://webapi.amap.com/maps?v=1.4.14&key=006d995d433058322319fa797f2876f5", function () {
|
||||
o.openGaodeMap();
|
||||
});
|
||||
} else {
|
||||
o.openGaodeMap();
|
||||
}
|
||||
// 绑定事件
|
||||
$("#ew-map-select-btn-ok").on("click", function () {
|
||||
o.config.success({lng: o.lng ? o.lng : 116.404, lat: o.lat ? o.lat : 39.915});
|
||||
layer.close(index);
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
layui.link(layui.cache.base + "location/location.css?v="+(new Date).getTime()); // 加载css
|
||||
|
||||
/*导出模块,用一个location对象来管理obj，不需要外部new obj*/
|
||||
var location = function () {
|
||||
}
|
||||
location.prototype.render = function (elem, config) {
|
||||
$(elem).on("click", function () {
|
||||
var _this = new obj(config);
|
||||
_this.openMap();
|
||||
})
|
||||
}
|
||||
var locationObj = new location();
|
||||
exports(MOD_NAME, locationObj);
|
||||
})
|
||||
@@ -0,0 +1,168 @@
|
||||
layui.define(['layer'],function (exports) {
|
||||
var $ = layui.jquery,
|
||||
layer=layui.layer,
|
||||
MOD_NAME = "locationX";
|
||||
|
||||
var GPS = {
|
||||
PI : 3.14159265358979324,
|
||||
x_pi : 3.14159265358979324 * 3000.0 / 180.0,
|
||||
delta : function (lat, lon) {
|
||||
// Krasovsky 1940
|
||||
//
|
||||
// a = 6378245.0, 1/f = 298.3
|
||||
// b = a * (1 - f)
|
||||
// ee = (a^2 - b^2) / a^2;
|
||||
var a = 6378245.0; // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
|
||||
var ee = 0.00669342162296594323; // ee: 椭球的偏心率。
|
||||
var dLat = this.transformLat(lon - 105.0, lat - 35.0);
|
||||
var dLon = this.transformLon(lon - 105.0, lat - 35.0);
|
||||
var radLat = lat / 180.0 * this.PI;
|
||||
var magic = Math.sin(radLat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
var sqrtMagic = Math.sqrt(magic);
|
||||
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
|
||||
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
|
||||
return {'lat': dLat, 'lon': dLon};
|
||||
},
|
||||
|
||||
//WGS-84 to GCJ-02
|
||||
gcj_encrypt : function (wgsLat, wgsLon) {
|
||||
if (this.outOfChina(wgsLat, wgsLon))
|
||||
return {'lat': wgsLat, 'lon': wgsLon};
|
||||
|
||||
var d = this.delta(wgsLat, wgsLon);
|
||||
return {'lat' : wgsLat + d.lat,'lon' : wgsLon + d.lon};
|
||||
},
|
||||
//GCJ-02 to WGS-84
|
||||
gcj_decrypt : function (gcjLat, gcjLon) {
|
||||
if (this.outOfChina(gcjLat, gcjLon))
|
||||
return {'lat': gcjLat, 'lon': gcjLon};
|
||||
|
||||
var d = this.delta(gcjLat, gcjLon);
|
||||
return {'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon};
|
||||
},
|
||||
//GCJ-02 to WGS-84 exactly
|
||||
gcj_decrypt_exact : function (gcjLat, gcjLon) {
|
||||
var initDelta = 0.01;
|
||||
var threshold = 0.000000001;
|
||||
var dLat = initDelta, dLon = initDelta;
|
||||
var mLat = gcjLat - dLat, mLon = gcjLon - dLon;
|
||||
var pLat = gcjLat + dLat, pLon = gcjLon + dLon;
|
||||
var wgsLat, wgsLon, i = 0;
|
||||
while (1) {
|
||||
wgsLat = (mLat + pLat) / 2;
|
||||
wgsLon = (mLon + pLon) / 2;
|
||||
var tmp = this.gcj_encrypt(wgsLat, wgsLon)
|
||||
dLat = tmp.lat - gcjLat;
|
||||
dLon = tmp.lon - gcjLon;
|
||||
if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold))
|
||||
break;
|
||||
|
||||
if (dLat > 0) pLat = wgsLat; else mLat = wgsLat;
|
||||
if (dLon > 0) pLon = wgsLon; else mLon = wgsLon;
|
||||
|
||||
if (++i > 10000) break;
|
||||
}
|
||||
//console.log(i);
|
||||
return {'lat': wgsLat, 'lon': wgsLon};
|
||||
},
|
||||
//GCJ-02 to BD-09
|
||||
bd_encrypt : function (gcjLat, gcjLon) {
|
||||
var x = gcjLon, y = gcjLat;
|
||||
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);
|
||||
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);
|
||||
bdLon = z * Math.cos(theta) + 0.0065;
|
||||
bdLat = z * Math.sin(theta) + 0.006;
|
||||
return {'lat' : bdLat,'lon' : bdLon};
|
||||
},
|
||||
//BD-09 to GCJ-02
|
||||
bd_decrypt : function (bdLat, bdLon) {
|
||||
var x = bdLon - 0.0065, y = bdLat - 0.006;
|
||||
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
|
||||
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
|
||||
var gcjLon = z * Math.cos(theta);
|
||||
var gcjLat = z * Math.sin(theta);
|
||||
return {'lat' : gcjLat, 'lon' : gcjLon};
|
||||
},
|
||||
//
|
||||
bd_WGS84:function(bdLat, bdLon){
|
||||
var gcj=GPS.bd_decrypt(bdLat, bdLon);
|
||||
return GPS.gcj_decrypt(gcj.lat,gcj.lon);
|
||||
},
|
||||
// 天地图坐标->百度坐标
|
||||
WGS84_bd:function(bdLat, bdLon){
|
||||
var gcj=GPS.gcj_encrypt(bdLat, bdLon);
|
||||
return GPS.bd_encrypt(gcj.lat,gcj.lon);
|
||||
},
|
||||
//WGS-84 to Web mercator
|
||||
//mercatorLat -> y mercatorLon -> x
|
||||
mercator_encrypt : function(wgsLat, wgsLon) {
|
||||
var x = wgsLon * 20037508.34 / 180.;
|
||||
var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.);
|
||||
y = y * 20037508.34 / 180.;
|
||||
return {'lat' : y, 'lon' : x};
|
||||
/*
|
||||
if ((Math.abs(wgsLon) > 180 || Math.abs(wgsLat) > 90))
|
||||
return null;
|
||||
var x = 6378137.0 * wgsLon * 0.017453292519943295;
|
||||
var a = wgsLat * 0.017453292519943295;
|
||||
var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
|
||||
return {'lat' : y, 'lon' : x};
|
||||
//*/
|
||||
},
|
||||
// Web mercator to WGS-84
|
||||
// mercatorLat -> y mercatorLon -> x
|
||||
mercator_decrypt : function(mercatorLat, mercatorLon) {
|
||||
var x = mercatorLon / 20037508.34 * 180.;
|
||||
var y = mercatorLat / 20037508.34 * 180.;
|
||||
y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2);
|
||||
return {'lat' : y, 'lon' : x};
|
||||
/*
|
||||
if (Math.abs(mercatorLon) < 180 && Math.abs(mercatorLat) < 90)
|
||||
return null;
|
||||
if ((Math.abs(mercatorLon) > 20037508.3427892) || (Math.abs(mercatorLat) > 20037508.3427892))
|
||||
return null;
|
||||
var a = mercatorLon / 6378137.0 * 57.295779513082323;
|
||||
var x = a - (Math.floor(((a + 180.0) / 360.0)) * 360.0);
|
||||
var y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * mercatorLat) / 6378137.0)))) * 57.295779513082323;
|
||||
return {'lat' : y, 'lon' : x};
|
||||
//*/
|
||||
},
|
||||
// two point's distance
|
||||
distance : function (latA, lonA, latB, lonB) {
|
||||
var earthR = 6371000.;
|
||||
var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180);
|
||||
var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.);
|
||||
var s = x + y;
|
||||
if (s > 1) s = 1;
|
||||
if (s < -1) s = -1;
|
||||
var alpha = Math.acos(s);
|
||||
var distance = alpha * earthR;
|
||||
return distance;
|
||||
},
|
||||
outOfChina : function (lat, lon) {
|
||||
if (lon < 72.004 || lon > 137.8347)
|
||||
return true;
|
||||
if (lat < 0.8293 || lat > 55.8271)
|
||||
return true;
|
||||
return false;
|
||||
},
|
||||
transformLat : function (x, y) {
|
||||
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
|
||||
ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
},
|
||||
transformLon : function (x, y) {
|
||||
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
|
||||
ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
}
|
||||
};
|
||||
|
||||
exports(MOD_NAME,GPS);
|
||||
|
||||
})
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
消息盒子容器
|
||||
*/
|
||||
.lay-jsan-notice-marker {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/**
|
||||
消息盒子基础样式
|
||||
*/
|
||||
.lay-jsan-notice-marker-box {
|
||||
/*position: absolute;*/
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border: 1px solid #e2e2e2;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
color: #e2e2e2;
|
||||
float: left;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/**
|
||||
消息盒子鼠标悬停样式
|
||||
*/
|
||||
.lay-jsan-notice-marker-box:hover {
|
||||
background-color: #f2f2f2;
|
||||
color: #1E9FFF;
|
||||
}
|
||||
|
||||
/**
|
||||
消息盒子中图标样式
|
||||
*/
|
||||
.lay-jsan-notice-marker-icon {
|
||||
font-size: 26px!important;
|
||||
}
|
||||
|
||||
/**
|
||||
最新消息，消息盒子样式
|
||||
*/
|
||||
.lay-jsan-notice-marker-news {
|
||||
color: #FF5722!important;
|
||||
}
|
||||
|
||||
/**
|
||||
消息盒子操作按钮
|
||||
*/
|
||||
.lay-jsan-notice-marker-btn {
|
||||
/*position: absolute;*/
|
||||
width: 15px;
|
||||
height: 35px;
|
||||
border: 1px solid #e2e2e2;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
color: #e2e2e2;
|
||||
float: left;
|
||||
background-color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.lay-jsan-notice-marker-btn:hover {
|
||||
background-color: #f2f2f2;
|
||||
color: #1E9FFF;
|
||||
}
|
||||
|
||||
.lay-jsan-notice-marker-item {
|
||||
padding: 5px 0 5px 10px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.lay-jsan-notice-marker-item:hover {
|
||||
background-color: #dddddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lay-jsan-notice-marker-item-title-new {
|
||||
color: #FF5722;
|
||||
}
|
||||
|
||||
.lay-jsan-notice-marker-item-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lay-jsan-notice-marker-item-date {
|
||||
font-size: 10px;
|
||||
color: #d2d2d2;
|
||||
padding: 2px 0 2px 0;
|
||||
}
|
||||
|
||||
.lay-jsan-notice-marker-item-content {
|
||||
font-size: 12px;
|
||||
color: #d2d2d2;
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
// noinspection ThisExpressionReferencesGlobalObjectJS
|
||||
/**
|
||||
* 基于layui v-2.5.4 版本，封装的消息组件
|
||||
* 作者：jsan
|
||||
* 日期：2019-07-28
|
||||
*/
|
||||
(function (root, factroy) {
|
||||
typeof root.layui === "object" && layui.define ? layui.define(["layer"], function(mods){mods("jsanNotice", factroy(layui.layer))}) : factroy(root.layer);
|
||||
}(this, function (layer) {
|
||||
// //引入css
|
||||
layui.link(layui.cache.base+"mods/extend/jsan-notice.css?v="+(new Date).getTime());
|
||||
|
||||
/**
|
||||
* 消息盒子方法
|
||||
* @param option 参数对象：
|
||||
* elem 元素选择器，如：#test
|
||||
* positionX 盒子左右定位位置[right,left]，默认right
|
||||
* positionY 盒子相对位置，可以选择不同的单位长度，如：100px
|
||||
* lowKey true隐藏，false显示
|
||||
* noticeWindow 详细消息窗口属性
|
||||
*/
|
||||
layer.noticeMarker = function (option) {
|
||||
const $ = layui.$,
|
||||
that = {},
|
||||
POSITION_X_STYLE = typeof option["positionX"] === "undefined" || option["positionX"] === "right" ? "right: 1px;" : option["positionX"]+" 1px;",
|
||||
POSITION_Y_STYPE = typeof option["positionY"] === "undefined" ? "top: 0;" : "top: "+option["positionY"]+";",
|
||||
MARKER = "lay-jsan-notice-marker",
|
||||
MARKER_BOX = "lay-jsan-notice-marker-box",
|
||||
MARKER_BOX_NEWS = "lay-jsan-notice-marker-news",
|
||||
MARKER_BOX_ICON = "layui-icon layui-icon-speaker lay-jsan-notice-marker-icon",
|
||||
MARKER_BOX_BTN = "lay-jsan-notice-marker-btn",
|
||||
MARKER_BOX_HIDE_BTN_ICON = "layui-icon layui-icon-"+(typeof option["positionX"] === "undefined" || option["positionX"] === "right" ? "right" : "left"),
|
||||
MARKER_BOX_SHOW_BTN_ICON = "layui-icon layui-icon-"+(typeof option["positionX"] === "undefined" || option["positionX"] === "right" ? "left" : "right");
|
||||
|
||||
that.properties = {}; //初始化属性
|
||||
|
||||
$(option.elem).hide(); //隐藏初始化元素
|
||||
that.properties.index = NOTICE_MARKER_INDEX++; //消息框唯一标识
|
||||
that.properties.isOpen = option["lowKey"]; //初始化是否显示
|
||||
that.properties.option = option; //录入初始化配置
|
||||
that.properties.option.positionX = typeof option["positionX"] === "undefined" ? "right" : option["positionX"]; //初始化定位
|
||||
that.properties.option.positionY = typeof option["positionY"] === "undefined" ? "right" : option["positionY"]; //初始化定位
|
||||
that.properties.marker = $("<div id='notice-marker-"+that.properties.index+"' class='"+MARKER+"' style='"+POSITION_X_STYLE+POSITION_Y_STYPE+"'></div>"); //容器
|
||||
that.properties.markerBoxBtn = $("<div class='"+MARKER_BOX_BTN+"'></div>"); //提示显示角标
|
||||
that.properties.markerBoxBtnIcon = $("<i class='"+MARKER_BOX_HIDE_BTN_ICON+"'></i>"); //提示显示角标
|
||||
that.properties.markerBox = $("<div class='"+MARKER_BOX+"'></div>"); //消息盒子
|
||||
that.properties.markerBoxIcon = $("<i class='"+MARKER_BOX_ICON+"'></i>"); //消息盒子图标
|
||||
//初始化默认方法
|
||||
/**
|
||||
* 消息提醒方法
|
||||
* @param option 参数对象
|
||||
* lowKey true隐藏，false显示
|
||||
*/
|
||||
that.remind = function(option) {
|
||||
if(option["lowKey"] && that.properties.isOpen) {
|
||||
//提醒时不弹出
|
||||
this.hideBox();
|
||||
}else if(!option["lowKey"] && !that.properties.isOpen) {
|
||||
this.showBox();
|
||||
}
|
||||
this.properties.markerBox.addClass(MARKER_BOX_NEWS);
|
||||
this.properties.markerBoxBtn.addClass(MARKER_BOX_NEWS);
|
||||
};
|
||||
|
||||
/**
|
||||
* 隐藏消息盒子方法
|
||||
*/
|
||||
that.hideBox = function() {
|
||||
if(this.properties.isOpen) {
|
||||
this.properties.markerBox.hide();
|
||||
this.properties.markerBoxBtnIcon.removeClass(MARKER_BOX_HIDE_BTN_ICON);
|
||||
this.properties.markerBoxBtnIcon.addClass(MARKER_BOX_SHOW_BTN_ICON);
|
||||
this.properties.isOpen = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 显示消息盒子方法
|
||||
*/
|
||||
that.showBox = function() {
|
||||
if(!this.properties.isOpen) {
|
||||
this.properties.markerBox.show();
|
||||
this.properties.markerBoxBtnIcon.removeClass(MARKER_BOX_SHOW_BTN_ICON);
|
||||
this.properties.markerBoxBtnIcon.addClass(MARKER_BOX_HIDE_BTN_ICON);
|
||||
this.properties.isOpen = true;
|
||||
}
|
||||
};
|
||||
|
||||
//封装渲染
|
||||
that.properties.markerBoxBtn.html(that.properties.markerBoxBtnIcon);
|
||||
that.properties.markerBox.html(that.properties.markerBoxIcon);
|
||||
that.properties.marker.html(that.properties.option["positionX"] === "left" ? that.properties.markerBox : that.properties.markerBoxBtn);
|
||||
that.properties.marker.append(that.properties.option["positionX"] === "left" ? that.properties.markerBoxBtn : that.properties.markerBox);
|
||||
|
||||
$("body").append(that.properties.marker);
|
||||
|
||||
//隐藏/显示事件
|
||||
that.properties.markerBoxBtn.unbind().on("click", that, function (event) {
|
||||
event.data.properties.isOpen ? event.data.hideBox() : event.data.showBox();
|
||||
});
|
||||
|
||||
//初始化详细消息窗口
|
||||
/**
|
||||
* type 1：组件自带消息窗口，2：打开用户自定义窗口，默认是1
|
||||
* title 消息窗口标题
|
||||
* classType 消息类型（type=1时生效） 属于Object类型 {"id": "name"} 如：{"notice": "通知", "alerted": "预警", "other": "其他"}
|
||||
* url 自定义消息窗口时打开的链接
|
||||
* width 消息窗口宽度 可以选择不同的单位长度，如：100px
|
||||
* height 消息窗口高度 可以选择不同的单位长度，如：100px
|
||||
* contentWidth 消息内容窗口宽度
|
||||
* contentHeight 消息内容窗口高度
|
||||
*/
|
||||
if(typeof that.properties.option.noticeWindow === "object" && that.properties.option.noticeWindow["type"] !== 2) {
|
||||
|
||||
that.noticeWindow = {};
|
||||
that.noticeWindow.index = that.properties.index;
|
||||
that.noticeWindow.width = typeof that.properties.option.noticeWindow["width"] === "string" ? that.properties.option.noticeWindow["width"] : "150px";
|
||||
that.noticeWindow.height = typeof that.properties.option.noticeWindow["height"] === "string" ? that.properties.option.noticeWindow["height"] : "560px";
|
||||
that.noticeWindow.contentWidth = typeof that.properties.option.noticeWindow["contentWidth"] === "string" ? that.properties.option.noticeWindow["contentWidth"] : "650px";
|
||||
that.noticeWindow.contentHeight = typeof that.properties.option.noticeWindow["contentHeight"] === "string" ? that.properties.option.noticeWindow["contentHeight"] : "560px";
|
||||
that.noticeWindow.window = $("<div id='notice-marker-window-"+that.noticeWindow.index+"' class='layui-tab' lay-filter='notice-marker-window-"+that.noticeWindow.index+"'></div>");
|
||||
that.noticeWindow.tabTitle = $("<ul id='notice-marker-window-title-"+that.noticeWindow.index+"' class='layui-tab-title'></ul>");
|
||||
that.noticeWindow.tabContent = $("<div id='notice-marker-window-content-"+that.noticeWindow.index+"' class='layui-tab-content'></div>");
|
||||
|
||||
const classType = {};
|
||||
if(typeof that.properties.option.noticeWindow["classType"] === "object") {
|
||||
for(let tab in that.properties.option.noticeWindow["classType"]) {
|
||||
classType[tab] = ["<li id='notice-marker-window-title-"+tab+"'>"+that.properties.option.noticeWindow["classType"][tab]+"<span class='layui-badge-dot layui-hide'></span></li>", "<div id='notice-marker-window-content-"+tab+"' lay-id='notice-marker-window-content-"+tab+"' class='layui-tab-item'></div>"];
|
||||
}
|
||||
}else {
|
||||
classType['notice'] = ["<li id='notice-marker-window-title-notice'>消息</li>", "<div id='notice-marker-window-content-notice' lay-id='notice-marker-window-content-\"+tab+\"' class='layui-tab-item'></div>"];
|
||||
}
|
||||
|
||||
that.noticeWindow.classType = classType;
|
||||
|
||||
//详细消息窗口渲染
|
||||
that.noticeWindow.window.html(that.noticeWindow.tabTitle);
|
||||
that.noticeWindow.window.append(that.noticeWindow.tabContent);
|
||||
for(let tab in that.noticeWindow.classType) {
|
||||
that.noticeWindow.tabTitle.append(that.noticeWindow.classType[tab][0]);
|
||||
that.noticeWindow.tabContent.append(that.noticeWindow.classType[tab][1]);
|
||||
}
|
||||
that.noticeWindow.window.hide();
|
||||
that.noticeWindow.tabTitle.find("li").eq(0).addClass("layui-this");
|
||||
that.noticeWindow.tabContent.find(".layui-tab-item").eq(0).addClass("layui-show");
|
||||
$("body").append(that.noticeWindow.window);
|
||||
|
||||
layui.use('element', function(){});
|
||||
|
||||
that.properties.markerBox.unbind().on("click", that, function (event) {
|
||||
event.data.hideBox();
|
||||
layer.open({
|
||||
type: 1,
|
||||
id: "notice-marker-window-layer-"+that.noticeWindow.index,
|
||||
title: typeof event.data.properties.option.noticeWindow["title"] === "string" ? event.data.properties.option.noticeWindow["title"] : "<i class='layui-icon layui-icon-friends'></i>",
|
||||
area: [event.data.noticeWindow.width - 12, event.data.noticeWindow.height],
|
||||
offset: [event.data.properties.option.positionY, (that.properties.option["positionX"] === "right" ? ($("body").width()-16-Number(that.noticeWindow.width.replace("px", "")))+"px" : "16px")],
|
||||
shade: 0,
|
||||
maxmin: true,
|
||||
content: $("#"+event.data.noticeWindow.window.attr("id")),
|
||||
cancel: function () {
|
||||
that.noticeWindow.window.hide();
|
||||
}
|
||||
});
|
||||
event.data.properties.markerBox.removeClass(MARKER_BOX_NEWS);
|
||||
event.data.properties.markerBoxBtn.removeClass(MARKER_BOX_NEWS);
|
||||
});
|
||||
|
||||
/**
|
||||
* 向消息窗口推送消息
|
||||
* @param option 参数对象
|
||||
* lowKey 是否使用盒子提醒 true不提醒，false提醒
|
||||
* classTypeId 消息所属消息类型的id
|
||||
* content 需要推送的类型集合 Array，每组数据包括：
|
||||
* title 消息标题。最大27位长度，大于27会自动省略
|
||||
* content 消息内容。最大44位长度，大于44位自动省略
|
||||
* date 消息发布时间 yyyy-MM-dd HH:mm:ss
|
||||
* url 点击消息后跳转位置
|
||||
*/
|
||||
that.addNews = function (option) {
|
||||
for(let i in option.content) {
|
||||
const item = $("<div class='lay-jsan-notice-marker-item' notice-url = '" + option.content[i]["url"] + "'></div>");
|
||||
item.append("<div class='lay-jsan-notice-marker-item-title lay-jsan-notice-marker-item-title-new'>"+(option.content[i]["title"].length > 28 ? option.content[i]["title"].substring(0, 25)+"..." : option.content[i]["title"] )+"</div>");
|
||||
item.append("<div class='lay-jsan-notice-marker-item-date'>"+option.content[i]["date"]+"</div>");
|
||||
item.append("<div class='lay-jsan-notice-marker-item-content'>"+(option.content[i]["content"].length > 45 ? option.content[i]["content"].substring(0, 43)+"..." : option.content[i]["content"])+"</div>");
|
||||
$("#notice-marker-window-content-"+option["classTypeId"]).prepend(item);
|
||||
}
|
||||
$("#notice-marker-window-title-"+option["classTypeId"]).find(".layui-badge-dot").removeClass("layui-hide");
|
||||
noticeMarkerItemEvent(option, this);
|
||||
const lowKey = typeof option["lowKey"] === "undefined" ? false : option["lowKey"];
|
||||
this.remind({"lowKey": lowKey});
|
||||
};
|
||||
|
||||
var noticeMarkerItemEvent = function (option, that) {
|
||||
$("#notice-marker-window-content-"+option["classTypeId"]+" .lay-jsan-notice-marker-item").unbind().on("click", function (event) {
|
||||
$(this).find(".lay-jsan-notice-marker-item-title").eq(0).removeClass("lay-jsan-notice-marker-item-title-new");
|
||||
if($("#notice-marker-window-content-"+option["classTypeId"]).find(".lay-jsan-notice-marker-item-title-new").length === 0) {
|
||||
$("#notice-marker-window-title-"+option["classTypeId"]).find(".layui-badge-dot").addClass("layui-hide");
|
||||
}
|
||||
$(this).attr("notice-url");
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: that.properties.option.noticeWindow["title"],
|
||||
area: [that.noticeWindow.contentWidth, that.noticeWindow.contentHeight],
|
||||
shade: 0,
|
||||
maxmin: true,
|
||||
content: $(this).attr("notice-url")
|
||||
});
|
||||
});
|
||||
}
|
||||
}else if(typeof that.properties.option.noticeWindow === "object" && that.properties.option.noticeWindow["type"] === 2) {
|
||||
|
||||
that.noticeWindow = {};
|
||||
that.noticeWindow.index = that.properties.index;
|
||||
that.noticeWindow.url = that.properties.option.noticeWindow["url"];
|
||||
that.noticeWindow.width = typeof that.properties.option.noticeWindow["width"] === "string" ? that.properties.option.noticeWindow["width"] : "150px";
|
||||
that.noticeWindow.height = typeof that.properties.option.noticeWindow["height"] === "string" ? that.properties.option.noticeWindow["height"] : "560px";
|
||||
|
||||
that.properties.markerBox.unbind().on("click", that, function (event) {
|
||||
event.data.hideBox();
|
||||
layer.open({
|
||||
type: 2,
|
||||
id: "notice-marker-window-layer-"+that.noticeWindow.index,
|
||||
title: typeof event.data.properties.option.noticeWindow["title"] === "string" ? event.data.properties.option.noticeWindow["title"] : "<i class='layui-icon layui-icon-friends'></i>",
|
||||
area: [event.data.noticeWindow.width, event.data.noticeWindow.height],
|
||||
offset: [event.data.properties.option.positionY, (that.properties.option["positionX"] === "right" ? ($("body").width()-16-Number(that.noticeWindow.width.replace("px", "")))+"px" : "16px")],
|
||||
shade: 0,
|
||||
maxmin: true,
|
||||
content: event.data.noticeWindow.url
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//初始显示设置
|
||||
that.properties.isOpen ? that.hideBox() : that.showBox();
|
||||
|
||||
return that;
|
||||
};
|
||||
|
||||
return {mod: "jsanNotice", v: "1.0.11"};
|
||||
}));
|
||||
|
||||
NOTICE_MARKER_INDEX = 1;
|
||||
@@ -0,0 +1,78 @@
|
||||
(function(root,factroy){
|
||||
typeof root.layui === 'object' && layui.define ? layui.define(function(mods){mods('mods',factroy(layui))}) : null;
|
||||
}(this,function(layui){
|
||||
'use strict';
|
||||
|
||||
// 预定义插件列表
|
||||
var list = {
|
||||
jsanNotice:'mods/extend/jsan-notice'
|
||||
};
|
||||
|
||||
// 插件加载器
|
||||
var mods = function(mod_name,callback){
|
||||
var extend = {};
|
||||
|
||||
// 如果是官方模块
|
||||
// 引入单个插件
|
||||
if(typeof mod_name === 'string'){
|
||||
if(!isLayui(mod_name)){
|
||||
if(typeof list[mod_name] !== 'string') throw new Error('引入的插件'+mod_name+'不在预定义列表中');
|
||||
extend[mod_name] = list[mod_name];
|
||||
}
|
||||
}
|
||||
|
||||
// 批量引入插件
|
||||
else if(Array.isArray(mod_name)){
|
||||
for(var i=0,item;item = mod_name[i++];){
|
||||
if(!isLayui(item)){
|
||||
if(typeof list[item] !== 'string') throw new Error('引入的插件'+item+'不在预定义列表中');
|
||||
extend[item] = list[item];
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
throw new Error('mods()中，传入了无效的参数');
|
||||
}
|
||||
|
||||
if(typeof callback !== 'function') throw Error('第二个参数必须是函数');
|
||||
layui.extend(extend).use(mod_name,function(){
|
||||
var arg = [];
|
||||
for(var i=0,item;item = arguments[i++];){
|
||||
arg.push(item);
|
||||
}
|
||||
callback.apply(layui,arg);
|
||||
});
|
||||
}
|
||||
|
||||
var isLayui = function(mod){
|
||||
return typeof layui_mods[mod] === 'string' ? true : false;
|
||||
};
|
||||
|
||||
if(typeof Array.isArray !== 'function'){
|
||||
Array.isArray = function(val){
|
||||
return Object.prototype.toString.call(val) === '[object Array]' ? true : false;
|
||||
}
|
||||
}
|
||||
|
||||
var layui_mods = {
|
||||
layer:'layer',
|
||||
laydate:'laydate',
|
||||
layedit:'layedit',
|
||||
laypage:'laypage',
|
||||
laytpl:'laytpl',
|
||||
table:'table',
|
||||
form:'form',
|
||||
upload:'upload',
|
||||
jquery:'jquery',
|
||||
code:'code',
|
||||
carousel:'carousel',
|
||||
element:'element',
|
||||
flow:'flow',
|
||||
mobile:'mobile',
|
||||
rate:'rate',
|
||||
tree:'tree',
|
||||
util:'util',
|
||||
};
|
||||
|
||||
return mods;
|
||||
}));
|
||||
@@ -0,0 +1,101 @@
|
||||
/**
|
||||
* @Name: 基于layui
|
||||
* @Author: 潘晨晨
|
||||
* 最近修改时间: 2021/04/22
|
||||
*/
|
||||
|
||||
layui.define(['jquery'],function(exports){
|
||||
var $ = layui.jquery;
|
||||
|
||||
var obj ={
|
||||
init:function(element){
|
||||
//默认
|
||||
element.data = element.data || [ {name:'暂无数据'}]
|
||||
element.rows = element.rows || 1
|
||||
element.moreUpText = element.moreUpText || '更多'
|
||||
element.moreDownText = element.moreDownText || '收起'
|
||||
element.href = element.href || false
|
||||
element.herfBlank = element.herfBlank?'_blank':'_self'
|
||||
element.themeColor = element.themeColor || 'green'
|
||||
element.size = element.size ? 'layui-btn-'+element.size :'layui-btn'
|
||||
|
||||
var html;
|
||||
var box = $(element.elemId);
|
||||
var boxHeight ;
|
||||
var itemHeight ;
|
||||
var flag = true; // 如果外面包裹了pack的变false
|
||||
var dyc = false;
|
||||
box.addClass('box-item-pcc');
|
||||
element.data.forEach(e=>{
|
||||
boxHeight = box.height();
|
||||
itemHeight = $('.item-pcc').outerHeight(true);
|
||||
element.href ? html = '<a class="item-pcc layui-bg-'+element.themeColor+' '+element.size+'" href="'+element.href+'?id='+e.id+'" target="'+element.herfBlank+'">'+e.name+'</a>':html = '<span class="item-pcc layui-bg-'+element.themeColor+' '+element.size+'">'+e.name+'</span>'
|
||||
if((boxHeight>itemHeight*element.rows) && flag){
|
||||
morePosition();
|
||||
flag =false;
|
||||
}
|
||||
box.append(html);
|
||||
})
|
||||
|
||||
|
||||
boxHeight = box.height();
|
||||
itemHeight = $('.item-pcc').outerHeight(true);
|
||||
|
||||
if(boxHeight>itemHeight*element.rows){
|
||||
more(); //第一次渲染页面
|
||||
dyc =true
|
||||
}
|
||||
|
||||
|
||||
$(document).on('click','#more-pcc',function(){ //点击更多
|
||||
more()
|
||||
})
|
||||
|
||||
function morePosition(el){
|
||||
if(flag){
|
||||
if(el&&dyc){ //如果不是第一次渲染并且
|
||||
box.find('#more-box-pcc').remove();
|
||||
}
|
||||
else{
|
||||
$('.item-pcc').wrapAll("<span class='pack-pcc'></span>")
|
||||
}
|
||||
var list = $('.pack-pcc .item-pcc').eq(-3);
|
||||
list.before('<span id="more-box-pcc" class="item-pcc more-pcc '+element.size+'"><a class="layui-font-'+element.themeColor+' " id="more-pcc">'+element.moreUpText+'</a></span>');
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function more(){
|
||||
if(box.height()>itemHeight*element.rows){
|
||||
box.css('height',itemHeight*element.rows);
|
||||
morePosition(true)
|
||||
}else{
|
||||
box.css('height','auto');
|
||||
box.find('#more-box-pcc').remove();
|
||||
box.append('<span id="more-box-pcc" class="item-pcc more-pcc '+element.size+'"><a class="layui-font-'+element.themeColor+'" id="more-pcc">'+element.moreDownText+'</a></span>');
|
||||
flag = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
var $style = $('<style type="text/css">\
|
||||
.box-item-pcc { overflow: hidden; display: inline-block; width: 70%;} \
|
||||
.box-item-pcc .item-pcc { margin:0 5px 5px 5px; box-sizing: border-box; display: inline-block; }\
|
||||
.box-item-pcc .more-pcc { float: right; background: none; }\
|
||||
.box-item-pcc a { cursor: pointer; }\
|
||||
.layui-font-red{color:#FF5722!important}\
|
||||
.layui-font-orange{color:#FFB800!important}\
|
||||
.layui-font-green{color:#009688!important}\
|
||||
.layui-font-cyan{color:#2F4056!important}\
|
||||
.layui-font-blue{color:#01AAED!important}\
|
||||
.layui-font-black{color:#000!important}\
|
||||
.layui-font-gray{color:#c2c2c2!important}\
|
||||
</style>');
|
||||
$($('head')[0]).append($style);
|
||||
|
||||
exports('moreMenus',obj);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,228 @@
|
||||
.toast-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.toast-message {
|
||||
-ms-word-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.toast-message a,
|
||||
.toast-message label {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.toast-message a:hover {
|
||||
color: #CCCCCC;
|
||||
text-decoration: none;
|
||||
}
|
||||
.toast-close-button {
|
||||
position: relative;
|
||||
right: -0.3em;
|
||||
top: -0.3em;
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-shadow: 0 1px 0 #ffffff;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
opacity: 0.8;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
filter: alpha(opacity=80);
|
||||
line-height: 1;
|
||||
}
|
||||
.toast-close-button:hover,
|
||||
.toast-close-button:focus {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
.rtl .toast-close-button {
|
||||
left: -0.3em;
|
||||
float: left;
|
||||
right: 0.3em;
|
||||
}
|
||||
/*Additional properties for button version
|
||||
iOS requires the button element instead of an anchor tag.
|
||||
If you want the anchor version, it requires `href="#"`.*/
|
||||
button.toast-close-button {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.toast-top-center {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-bottom-center {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-top-full-width {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-bottom-full-width {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-top-left {
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
.toast-top-right {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
.toast-bottom-right {
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
}
|
||||
.toast-bottom-left {
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
pointer-events: none;
|
||||
/*overrides*/
|
||||
}
|
||||
#toast-container * {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#toast-container > div {
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
overflow: hidden;
|
||||
margin: 0 0 6px;
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 300px;
|
||||
-moz-border-radius: 3px 3px 3px 3px;
|
||||
-webkit-border-radius: 3px 3px 3px 3px;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
background-position: 15px center;
|
||||
background-repeat: no-repeat;
|
||||
-moz-box-shadow: 0 0 12px #999999;
|
||||
-webkit-box-shadow: 0 0 12px #999999;
|
||||
box-shadow: 0 0 12px #999999;
|
||||
color: #FFFFFF;
|
||||
opacity: 0.8;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
#toast-container > div.rtl {
|
||||
direction: rtl;
|
||||
padding: 15px 50px 15px 15px;
|
||||
background-position: right 15px center;
|
||||
}
|
||||
#toast-container > div:hover {
|
||||
-moz-box-shadow: 0 0 12px #000000;
|
||||
-webkit-box-shadow: 0 0 12px #000000;
|
||||
box-shadow: 0 0 12px #000000;
|
||||
opacity: 1;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
filter: alpha(opacity=100);
|
||||
cursor: pointer;
|
||||
}
|
||||
#toast-container > .toast-info {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
#toast-container > .toast-error {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
#toast-container > .toast-success {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
|
||||
}
|
||||
#toast-container > .toast-warning {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
#toast-container.toast-top-center > div,
|
||||
#toast-container.toast-bottom-center > div {
|
||||
width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
#toast-container.toast-top-full-width > div,
|
||||
#toast-container.toast-bottom-full-width > div {
|
||||
width: 96%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.toast {
|
||||
background-color: #030303;
|
||||
}
|
||||
.toast-success {
|
||||
background-color: #51A351;
|
||||
}
|
||||
.toast-error {
|
||||
background-color: #BD362F;
|
||||
}
|
||||
.toast-info {
|
||||
background-color: #2F96B4;
|
||||
}
|
||||
.toast-warning {
|
||||
background-color: #F89406;
|
||||
}
|
||||
.toast-progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background-color: #000000;
|
||||
opacity: 0.4;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
/*Responsive Design*/
|
||||
@media all and (max-width: 240px) {
|
||||
#toast-container > div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 11em;
|
||||
}
|
||||
#toast-container > div.rtl {
|
||||
padding: 8px 50px 8px 8px;
|
||||
}
|
||||
#toast-container .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
#toast-container .rtl .toast-close-button {
|
||||
left: -0.2em;
|
||||
right: 0.2em;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 241px) and (max-width: 480px) {
|
||||
#toast-container > div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 18em;
|
||||
}
|
||||
#toast-container > div.rtl {
|
||||
padding: 8px 50px 8px 8px;
|
||||
}
|
||||
#toast-container .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
#toast-container .rtl .toast-close-button {
|
||||
left: -0.2em;
|
||||
right: 0.2em;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 481px) and (max-width: 768px) {
|
||||
#toast-container > div {
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 25em;
|
||||
}
|
||||
#toast-container > div.rtl {
|
||||
padding: 15px 50px 15px 15px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
@ Name：表格可展开显示更多列
|
||||
@ Author：hbm
|
||||
@ License：MIT
|
||||
@ gitee：https://gitee.com/hbm_461/layui_extend_openTable
|
||||
*/
|
||||
|
||||
/* 样式加载完毕的标识 */
|
||||
html #layuicss-regionSelect {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 1989px;
|
||||
}
|
||||
|
||||
.layui-openTable {
|
||||
|
||||
}
|
||||
|
||||
/* 组件样式 */
|
||||
.openTable-i-table-open {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
user-select: none;
|
||||
background: url(./right.svg) 0 0 no-repeat;
|
||||
background-size: 10px 10px;
|
||||
}
|
||||
|
||||
|
||||
/*表格展开三角动画*/
|
||||
.openTable-open-dow {
|
||||
transform: rotate(90deg)
|
||||
}
|
||||
|
||||
.openTable-i-table-open {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transition: transform .2s ease-in-out;
|
||||
}
|
||||
|
||||
.openTable-open-td {
|
||||
padding-bottom: 20px !important;
|
||||
background-color: #fdfdfd !important;
|
||||
}
|
||||
|
||||
.openTable-open-td:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
/*展开列 容器*/
|
||||
.openTable-open-item-div {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
margin-right: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/*展开列 title*/
|
||||
.openTable-item-title {
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
|
||||
/*展开列 可修改 */
|
||||
.openTable-exp-value-edit {
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
/*展开列 仅展示 */
|
||||
.openTable-exp-value {
|
||||
padding: 0 20px 0 20px;
|
||||
min-width: 80px;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-bottom: #dedede solid 1px;
|
||||
padding-bottom: 2px;
|
||||
padding-top: 4px !important
|
||||
}
|
||||
|
||||
|
||||
.openTable-open-item-div input {
|
||||
height: 29px !important;
|
||||
}
|
||||
@@ -0,0 +1,258 @@
|
||||
/**
|
||||
@ Name：表格冗余列可展开显示
|
||||
@ Author：hbm
|
||||
@ License：MIT
|
||||
*/
|
||||
|
||||
layui.define(['form', 'table'], function (exports) {
|
||||
var $ = layui.$
|
||||
, table = layui.table
|
||||
, form = layui.form
|
||||
, VERSION = 1.0, MOD_NAME = 'openTable', ELEM = '.layui-openTable', ON = 'on', OFF = 'off'
|
||||
|
||||
//外部接口
|
||||
, openTable = {
|
||||
index: layui.openTable ? (layui.openTable.index + 10000) : 0
|
||||
|
||||
//设置全局项
|
||||
, set: function (options) {
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
|
||||
//事件监听
|
||||
, on: function (events, callback) {
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||
}
|
||||
}
|
||||
|
||||
//操作当前实例
|
||||
, thisIns = function () {
|
||||
var that = this
|
||||
, options = that.config
|
||||
, id = options.id || options.index;
|
||||
|
||||
return {
|
||||
reload: function (options) {
|
||||
that.reload.call(that, options);
|
||||
}
|
||||
, config: options
|
||||
}
|
||||
}
|
||||
|
||||
//构造器
|
||||
, Class = function (options) {
|
||||
var that = this;
|
||||
that.index = ++openTable.index;
|
||||
that.config = $.extend({}, that.config, openTable.config, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
//默认配置
|
||||
Class.prototype.config = {
|
||||
openType: 0
|
||||
};
|
||||
|
||||
//渲染视图
|
||||
Class.prototype.render = function () {
|
||||
var that = this
|
||||
, options = that.config
|
||||
, colArr = options.cols[0]
|
||||
, openCols = options.openCols || []
|
||||
, done = options.done;
|
||||
|
||||
delete options["done"];
|
||||
// 1、在第一列 插入可展开操作
|
||||
colArr.splice(0, 0, {
|
||||
align: 'left',
|
||||
width: 50,
|
||||
templet: function (item) {
|
||||
return "<i class='openTable-i-table-open ' status='off' data='"
|
||||
// 把当前列的数据绑定到控件
|
||||
+ (JSON.stringify(item))
|
||||
+ "' title='展开'></i>";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 2、表格Render
|
||||
table.render(
|
||||
$.extend({
|
||||
done: function (res, curr, count) {
|
||||
initExpandedListener();
|
||||
if (done) {
|
||||
done(res, curr, count)
|
||||
}
|
||||
}
|
||||
}, options));
|
||||
|
||||
|
||||
// 3、展开事件
|
||||
function initExpandedListener() {
|
||||
|
||||
|
||||
//扩大点击事件范围 为父级div
|
||||
$(".openTable-i-table-open")
|
||||
.parent()
|
||||
.unbind()
|
||||
.click(function () {
|
||||
var that = $(this).children();
|
||||
|
||||
// 关闭类型
|
||||
if (options.openType === 0) {
|
||||
var sta = $(".openTable-open-dow").attr("status"),
|
||||
isThis = (that.attr("data") === $(".openTable-open-dow").attr("data"));
|
||||
//1、关闭展开的
|
||||
$(".openTable-open-dow")
|
||||
.addClass("openTable-open-up")
|
||||
.removeClass("openTable-open-dow")
|
||||
.attr("status", OFF);
|
||||
|
||||
//2、如果当前 = 展开 && 不等于当前的 关闭
|
||||
if (sta === ON && isThis) {
|
||||
$(".openTable-open-td").slideUp(100, function () {
|
||||
$(".openTable-open-td").remove();
|
||||
});
|
||||
|
||||
return;
|
||||
} else {
|
||||
that.attr("status", OFF)
|
||||
$(".openTable-open-td").remove();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
var _this = this
|
||||
, item = JSON.parse(that.attr("data"))
|
||||
, status = that.attr("status") === 'on';
|
||||
|
||||
// 1、如果当前为打开，再次点击则关闭
|
||||
if (status) {
|
||||
that.removeClass("openTable-open-dow");
|
||||
that.attr("status", 'off');
|
||||
this.addTR.find("div").slideUp(100, function () {
|
||||
_this.addTR.remove();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
var html = ["<div style='margin-left: 50px;display: none'>"];
|
||||
|
||||
// 2、从左到右依次排列 Item
|
||||
openCols.forEach(function (val, index) {
|
||||
// 1、自定义模板
|
||||
if (val.templet) {
|
||||
html.push("<div class='openTable-open-item-div'>")
|
||||
html.push(val.templet(item));
|
||||
html.push("</div>")
|
||||
// 2、可下拉选择类型
|
||||
} else if (val.type && val.type === 'select') {
|
||||
var child = ["<div id='" + val.field + "' class='openTable-open-item-div' >"];
|
||||
child.push("<span style='color: #99a9bf'>" + val["title"] + "：</span>");
|
||||
child.push("<div class='layui-input-inline'><select lay-filter='" + val.field + "'>");
|
||||
val.items.forEach(function (it) {
|
||||
it = val.onDraw(it, item);
|
||||
child.push("<option value='" + it.id + "' ");
|
||||
child.push(it.isSelect ? " selected='selected' " : "");
|
||||
child.push(" >" + it.value + "</option>");
|
||||
});
|
||||
child.push("</select></div>");
|
||||
child.push("</div>");
|
||||
html.push(child.join(""));
|
||||
setTimeout(function () {
|
||||
layui.form.render();
|
||||
// 监听 select 修改
|
||||
layui.form.on('select(' + val.field + ')', function (data) {
|
||||
if (options.edit && val.onSelect(data, item)) {
|
||||
var json = {};
|
||||
json.value = data.value;
|
||||
json.field = val.field;
|
||||
item[val.field] = data.value;
|
||||
json.data = JSON.parse(JSON.stringify(item));
|
||||
options.edit(json);
|
||||
}
|
||||
});
|
||||
}, 20);
|
||||
} else {
|
||||
// 3、默认类型
|
||||
html.push("<div class='openTable-open-item-div'>");
|
||||
html.push("<span class='openTable-item-title'>" + val["title"] + "：</span>");
|
||||
html.push((val.edit ?
|
||||
("<input class='openTable-exp-value openTable-exp-value-edit' autocomplete='off' name='" + val["field"] + "' value='" + item[val["field"]] + "'/>")
|
||||
: ("<span class='openTable-exp-value' >" + item[val["field"]] + "</span>")
|
||||
));
|
||||
html.push("</div>");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
that.addClass("openTable-open-dow");
|
||||
|
||||
// 把添加的 tr 绑定到当前 移除时使用
|
||||
this.addTR = $([
|
||||
"<tr><td class='openTable-open-td' colspan='" + (colArr.length + 1) + "'>"
|
||||
, html.join("") + "</div>"
|
||||
, "</td></tr>"].join("")
|
||||
);
|
||||
that.parent().parent().parent().after(this.addTR);
|
||||
this.addTR.find("div").slideDown(200);
|
||||
that.attr("status", 'on');
|
||||
|
||||
$(".openTable-exp-value-edit")
|
||||
.blur(function () {
|
||||
var that = $(this), name = that.attr("name"), val = that.val();
|
||||
// 设置了回调 &&发生了修改
|
||||
if (options.edit && item[name] + "" !== val) {
|
||||
var json = {};
|
||||
json.value = that.val();
|
||||
json.field = that.attr("name");
|
||||
item[name] = val;
|
||||
json.data = item;
|
||||
options.edit(json);
|
||||
}
|
||||
}).keypress(function (even) {
|
||||
even.which === 13 && $(this).blur()
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 4、监听排序事件
|
||||
var elem = $(options.elem).attr("lay-filter");
|
||||
|
||||
// 5、监听表格排序
|
||||
table.on('sort(' + elem + ')', function (obj) {
|
||||
if (options.sort) {
|
||||
options.sort(obj)
|
||||
}
|
||||
// 重新绑定事件
|
||||
initExpandedListener();
|
||||
});
|
||||
|
||||
// 6、单元格编辑
|
||||
layui.table.on('edit(' + elem + ')', function (obj) {
|
||||
if (options.edit) {
|
||||
options.edit(obj)
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//核心入口
|
||||
openTable.render = function (options) {
|
||||
var ins = new Class(options);
|
||||
return thisIns.call(ins);
|
||||
};
|
||||
|
||||
//加载组件所需样式
|
||||
layui.link(layui.cache.base + "openTable/openTable.css?v="+(new Date).getTime(), function () {
|
||||
//此处的“openTable”要对应 openTable.css 中的样式： html #layuicss-openTable{}
|
||||
}, 'openTable');
|
||||
|
||||
exports('openTable', openTable);
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1574129071108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="722" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512"><defs><style type="text/css"></style></defs><path d="M804.288 520.288c1.119-14.86-3.681-30.045-15.009-41.627l-446.179-446.499c-21.028-20.961-55.078-20.961-76.291 0.033-21.065 20.999-20.921 55.265-0.11 76.258l411.912 411.875-411.946 411.731c-20.849 21.098-21.176 55.046-0.071 76.187 21.279 21.031 55.222 20.993 76.363-0.038l446.323-446.148c11.4-11.472 16.128-26.658 15.009-41.772v0 0 0zM804.288 520.288z" p-id="723"></path></svg>
|
||||
|
After Width: | Height: | Size: 751 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user