/* 重置与基础样式 */
html {
font-size: 16px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: #333;
background-color: #f5f7fa;
}
/* 优化标题样式 */
h1, h2, h3, h4, h5, h6 {
margin: 0;
line-height: 1.4;
font-weight: 600;
color: #222;
}
/* 优化链接样式 */
a {
text-decoration: none;
color: #1890ff;
transition: color 0.3s;
}
a:hover {
text-decoration: none;
color: #40a9ff;
}
a:focus {
outline: 2px solid rgba(24, 144, 255, 0.2);
outline-offset: 2px;
}
/* 优化导航样式 */
[role="banner"] {
width: 100%;
position: relative;
z-index: 100;
}
[role="navigation"] {
display: flex;
align-items: center;
}
/* 优化主内容区域 */
[role="main"] {
min-height: 400px;
margin-bottom: 40px;
}
/* 优化页脚样式 */
[role="contentinfo"] {
width: 100%;
background: #f8f9fa;
padding: 20px 0;
border-top: 1px solid #eee;
}
/* 文章内容样式优化 */
article {
max-width: 100%;
}
/* 列表样式优化 */
ul, ol {
padding-left: 1.5em;
margin: 1em 0;
}
/* 表格样式优化 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 0.75rem;
text-align: left;
}
/* 图片优化 */
img {
max-width: 100%;
height: auto;
}
/* 可访问性优化 */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* 焦点状态优化 */
:focus {
outline: 2px solid rgba(24, 144, 255, 0.2);
outline-offset: 2px;
}
/* 响应式设计基础 */
@media screen and (max-width: 768px) {
html {
font-size: 14px;
}
}
* {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;}
body {font-family:Arial,sans-serif;}
/* 添加全局链接样式 */
a {
text-decoration: none;
}
/* 面包屑导航样式 */
.breadcrumb {padding:12px 16px;background:white;margin:12px auto;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08);font-size:14px;width:calc(100% - 40px);max-width:960px;display:flex;align-items:center;gap:8px;}
.breadcrumb a {color:#1890ff;text-decoration:none;transition:all 0.3s;padding:4px 8px;border-radius:4px;}
.breadcrumb a:hover {color:#40a9ff;background:#e6f7ff;}
.breadcrumb .separator {color:#ccc;user-select:none;}
.breadcrumb .current {color:#666;font-weight:500;}
/* 移动端适配 */
@media (max-width:768px) {.breadcrumb {width:calc(100% - 20px);margin:10px auto;padding:10px 12px;font-size:13px;}}
.main-container {max-width:1000px;margin:15px auto;background:linear-gradient(to bottom,#ffffff,#f8faff);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);overflow:hidden;padding-bottom:60px;}
.header {background:linear-gradient(135deg,#1890ff,#096dd9);padding:1.2rem;border:none;}
.logo {display:flex;align-items:center;justify-content:space-between;width:100%;}
.logo-link {
text-decoration: none;
display: block;
}
.logo-placeholder {
width: 140px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-placeholder img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 768px) {
.logo-placeholder {
width: 110px;
height: 35px;
}
}
.nav-links {display:flex;margin-left:auto;padding-right:2rem;flex-wrap:nowrap;margin-left:1rem;}
.nav-links a {margin-right:1.5rem;white-space:nowrap;transition:all 0.3s;padding:8px 16px;font-size:15px;color:rgba(255,255,255,0.9);text-decoration:none;font-weight:500;border-radius:8px;}
.nav-links a:hover {background:rgba(255,255,255,0.15);color:white;}
.nav-links a:last-child {margin-right:0;}
.button-container {display:flex;width:100%;margin-top:20px;justify-content:space-evenly;background:white;padding:15px 20px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.05);margin-bottom:20px;}
.lottery-section,.notice-section,.button-container {width:calc(100% - 40px);max-width:960px;margin:12px auto;padding:15px;background:white;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1);box-sizing:border-box;}
.selector-container,.lottery-section,.notice-section,.number-tools,.button-container {width:calc(100% - 40px);max-width:960px;margin:12px auto;padding:15px;background:white;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,0.05);margin-bottom:0;}
@media (max-width:768px) {
.lottery-section,.notice-section,.button-container {width:calc(100% - 20px);margin:10px auto;padding:15px;max-width:100%;}
.button-container {padding:8px 10px;gap:6px;}
}
/* 修改按钮容器移动端样式 */
@media (max-width: 768px) {
.button-container {
padding: 6px 8px; /* 降低容器内边距 */
gap: 4px; /* 减小按钮间距 */
}
.nav-button {
margin-right: 0; /* 移除按钮右边距 */
padding: 0.5rem 0.25rem; /* 减小按钮内边距 */
min-width: 70px; /* 降低最小宽度 */
height: 32px;
font-size: 13px;
}
}
.nav-button {flex:1;border-radius:12px;padding:0.5rem 1rem;background:linear-gradient(to bottom,#ffffff,#f8faff);color:#555;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 8px rgba(0,0,0,0.05);border:1px solid rgba(24,144,255,0.15);margin-right:8px;font-size:14px;font-weight:500;min-width:100px;height:36px;text-decoration: none;}
.bar-button,.nav-button,.header-btn,.tool-link {padding:12px 24px;border-radius:8px;border:1px solid rgba(24,144,255,0.15);background:linear-gradient(to bottom,#ffffff,#f8faff);color:#666;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.bar-button.primary,.nav-button.primary {background:linear-gradient(135deg,#1890ff,#096dd9);color:white;border:none;box-shadow:0 4px 12px rgba(24,144,255,0.3);font-weight:bold;}
.bar-button.primary:hover,.nav-button.primary:hover {background:#40a9ff;border-color:#40a9ff;}
.nav-button:last-child {margin-right:0;}
.nav-button:hover {background:#f8f9fa;border-color:#dde0e3;transform:translateY(-1px);}
@media (max-width:768px) {
.nav-button {margin-right:0;min-width:auto;padding:0.5rem;font-size:13px;height:32px;white-space:nowrap;}
}
.lottery-section {margin:12px auto;padding:15px;background:white;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.lottery-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;}
.section-title,.lottery-header,.notice-header,.tools-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eee;}
.lottery-header h2 {font-size:18px;color:#333;}
.lottery-name {font-size:18px;color:#333;font-weight:bold;line-height:1.5;}
.period-info {color:#666;font-size:14px;}
.ball-container {display:flex;gap:15px;margin:15px 0;}
.red-balls,.blue-balls {display:flex;gap:10px;}
.ball {width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;font-size:16px;}
.ball.red {background:#e54d42;}
.ball.blue {background:#0081ff;}
/* 快乐8号码特殊样式 */
.ball-container.klb-balls {
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
max-width: 100%;
}
.ball-container.klb-balls .ball {
width: 32px;
height: 32px;
font-size: 14px;
margin: 0;
}
@media (max-width: 768px) {
.ball-container.klb-balls {
gap: 6px;
}
.ball-container.klb-balls .ball {
width: 28px;
height: 28px;
font-size: 12px;
}
}
.lottery-footer {display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:15px;border-top:1px solid #eee;}
.draw-date {color:#666;font-size:14px;}
.history-link {color:#0081ff;text-decoration:none;font-size:14px;}
.history-link:hover {text-decoration:underline;}
.lottery-tabs {margin-bottom:20px;}
.category-tabs {display:flex;gap:20px;margin-bottom:15px;}
.category-tab {border:none;background:none;font-size:16px;color:#666;padding:8px 0;cursor:pointer;position:relative;}
.category-tab.active {color:#e54d42;font-weight:bold;}
.category-tab.active::after {content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:#e54d42;}
.subcategory-tabs {display:none;gap:15px;border-bottom:1px solid #eee;padding-bottom:15px;}
.subcategory-tabs.active {display:flex;}
.subcategory-tab {border:none;background:#f5f5f5;padding:6px 12px;border-radius:15px;color:#666;cursor:pointer;transition:all 0.3s;}
.subcategory-tab:hover {background:#e0e0e0;}
.subcategory-tab.active {background:#e54d42;color:white;}
.welfare .subcategory-tab.active {background:#0081ff;}
.notice-section {margin:12px auto;padding:15px;background:white;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.notice-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #eee;}
.notice-header h2 {font-size:18px;color:#333;font-weight:bold;}
.more-link {color:#666;text-decoration:none;font-size:14px;transition:color 0.3s;}
.more-link:hover {color:#1890ff;}
.notice-list {display:flex;flex-direction:column;gap:12px;}
.notice-item {display:flex;justify-content:space-between;align-items:center;padding:8px 0;transition:all 0.3s;cursor:pointer;}
.notice-item:hover {background:#f8f9fa;padding-left:10px;}
.notice-title {color:#333;font-size:14px;flex:1;margin-right:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notice-date {color:#999;font-size:13px;flex-shrink:0;}
@media (max-width:768px) {.notice-section {margin:10px;padding:15px;}.notice-header h2 {font-size:16px;}.notice-item {padding:6px 0;}.notice-title {font-size:13px;}.notice-date {font-size:12px;}}
@media (max-width:1024px) {.nav-links a {margin-right:1.2rem;}}
@media (max-width:768px) {.header {padding:0.8rem;}.nav-button {padding:0.5rem;height:40px;flex:1;min-width:auto;box-shadow:none;}.nav-button:last-child {margin-right:0;}.button-container {gap:8px;padding:10px;flex-wrap:nowrap;overflow-x:auto;margin-top:10px;}.lottery-section {margin:10px;padding:15px;}.ball {width:35px;height:35px;font-size:14px;}.ball-container {gap:10px;}.subcategory-tabs {overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch;}.subcategory-tab {white-space:nowrap;flex-shrink:0;}.main-container {padding:0;}.logo-placeholder {width:110px;height:35px;font-size:13px;}.nav-links {padding-right:0;}.nav-links a {font-size:13px;padding:6px;}.nav-button {min-width:80px;height:32px;font-size:13px;padding:0 8px;}}
.number-tools {width:calc(100% - 40px);max-width:960px;margin:12px auto;padding:15px;background:white;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.tools-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #eee;}
.tools-header h2 {font-size:18px;color:#333;font-weight:bold;}
.tool-links {display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:5px;}
.tool-link {display:flex;align-items:center;justify-content:center;padding:12px;background:#f5f7fa;border-radius:8px;color:#555;text-decoration:none;transition:all 0.3s;border:1px solid #e8ecef;font-size:14px;}
.tool-link:hover {background:#f8f9fa;border-color:#dde0e3;color:#1890ff;transform:translateY(-1px);box-shadow:0 2px 5px rgba(0,0,0,0.05);}
@media (max-width:768px) {.number-tools {width:calc(100% - 20px);margin:10px auto;padding:15px;}.tools-header h2 {font-size:16px;}.tool-links {grid-template-columns:repeat(2,1fr);gap:10px;}.tool-link {padding:10px;font-size:13px;}}
button,a,input[type="button"],input[type="submit"],.nav-button,.tool-link,.number-label {cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
button:active,a:active,.nav-button:active,.tool-link:active {opacity:0.7;transform:scale(0.98);}
@media (max-width:768px) {.selector-container,.lottery-section,.notice-section,.number-tools {width:calc(100% - 20px);padding:15px;margin:10px;}.bar-button,.nav-button,.header-btn,.tool-link {padding:10px 16px;font-size:14px;}}
.numbers-grid {display:grid;grid-template-columns:repeat(10,1fr);gap:8px;padding:12px;background:#f8f9fa;border-radius:8px;}
.number-item {text-align:center;}
@media (max-width:768px) {.numbers-grid {grid-template-columns:repeat(10,1fr);gap:6px;padding:10px;}}
.selector-container {margin-bottom:100px;padding-bottom:120px;}
.number-section {margin-bottom:20px;}
.number-section:last-child {margin-bottom:0;}
.number-ball {width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;margin:0 auto;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);user-select:none;border:2px solid;background:white;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.05);}
.red-ball {border-color:#e54d42;color:#e54d42;}
.red-ball.selected {background:linear-gradient(135deg,#ff4d4f,#cf1322);color:white;border:none;}
.blue-ball {border-color:#0081ff;color:#0081ff;}
.blue-ball.selected {background:linear-gradient(135deg,#1890ff,#096dd9);color:white;border:none;}
.sd-ball {border:2px solid #1890ff;color:#1890ff;background:white;}
.sd-ball.selected {background:#1890ff;color:white;}
@media (max-width:768px) {.number-ball {width:36px;height:36px;font-size:14px;}}
.sd-random-btn {padding:6px 12px;border:1px solid #1890ff;border-radius:4px;color:#1890ff;}
.sd-random-btn:hover {background:#e6f7ff;}
.bet-list-panel {position:fixed;bottom:0;left:0;right:0;width:100%;max-width:960px;height:80vh;background:linear-gradient(to bottom,#ffffff,#f8faff);backdrop-filter:blur(20px);border-radius:16px 16px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.12);z-index:1000;display:flex;flex-direction:column;margin:0 auto;padding:0 20px;box-sizing:border-box;transform:translateY(100%);transition:transform 0.3s ease;}
.bet-list-panel.active {transform:translateY(0);}
.bet-list-header {padding:15px 20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;}
.bet-list-header span {font-size:16px;font-weight:500;color:#333;}
.bet-list-header button {border:none;background:none;font-size:20px;color:#999;cursor:pointer;padding:4px;transition:color 0.3s;}
.bet-list-header button:hover {color:#666;}
.bet-list-content {flex:1;overflow-y:auto;padding:15px;}
.bet-list-footer {padding:15px 20px;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center;}
.bet-item {padding:15px;border-radius:8px;background:white;margin-bottom:10px;transition:all 0.3s ease;border:1px solid rgba(24,144,255,0.1);box-shadow:0 2px 8px rgba(0,0,0,0.03);}
.bet-item:hover {transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.bet-type {display:inline-block;padding:2px 8px;background:#e6f7ff;color:#1890ff;border-radius:4px;font-size:12px;margin-bottom:8px;}
.bet-numbers {color:#333;font-size:14px;line-height:1.8;}
.bet-info {display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid #eee;color:#666;font-size:13px;}
.bet-info button {padding:4px 12px;border:1px solid #ff4d4f;border-radius:4px;background:white;color:#ff4d4f;cursor:pointer;font-size:13px;transition:all 0.3s;}
.bet-info button:hover {background:#fff1f0;}
.bet-actions button {padding:4px 8px;border:1px solid #ddd;border-radius:4px;background:white;color:#666;font-size:12px;cursor:pointer;transition:all 0.3s;}
.bet-actions button:hover {background:#f5f7fa;border-color:#1890ff;color:#1890ff;}
.bottom-bar {position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:960px;background:rgba(255,255,255,0.9);backdrop-filter:blur(20px);padding:12px 20px;box-shadow:0 -4px 16px rgba(0,0,0,0.08);display:flex;justify-content:space-between;align-items:center;z-index:999;gap:15px;border-top:1px solid rgba(0,0,0,0.05);}
.bottom-bar-left {display:flex;gap:4px;}
.bottom-bar-right {display:flex;gap:12px;}
.bar-button {padding:12px 24px;border-radius:8px;border:1px solid #e8ecef;background:white;color:#666;cursor:pointer;transition:all 0.3s;font-size:15px;font-weight:500;min-width:100px;height:44px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.05);gap:6px;position:relative;}
.bar-button:hover {background:#f5f7fa;border-color:#dde0e3;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.08);}
.bar-button.primary {background:linear-gradient(135deg,#1890ff,#096dd9);color:white;border:none;box-shadow:0 4px 12px rgba(24,144,255,0.3);font-weight:bold;}
.bar-button.primary:hover {background:#40a9ff;border-color:#40a9ff;}
.bar-button:active {transform:translateY(1px);box-shadow:none;}
.bottom-bar-left .bar-button {border:none;background:none;box-shadow:none;flex-direction:column;gap:4px;min-width:56px;padding:8px;}
.bottom-bar-left .bar-button:hover {transform:none;background:none;box-shadow:none;}
.button-icon {width:24px;height:24px;display:block;margin:0 auto;}
.button-text {font-size:12px;color:#666;}
.random-count-panel {position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:20px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:1002;width:90%;max-width:360px;display:none;}
.random-count-panel[x-show] {display:block;}
.modal-mask {z-index:1001;}
.random-panel-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #eee;}
.random-panel-header button {border:none;background:none;font-size:20px;color:#999;cursor:pointer;padding:4px 8px;}
.random-count-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.random-count-grid button {padding:12px;border:1px solid #e8ecef;border-radius:6px;background:white;color:#666;cursor:pointer;transition:all 0.3s;font-size:14px;font-weight:500;}
.random-count-grid button:hover {background:#f5f7fa;border-color:#1890ff;color:#1890ff;transform:translateY(-1px);}
.random-buttons {display:flex;gap:5px;align-items:center;}
.random-btn {padding:6px 12px;border:1px solid #e8ecef;border-radius:4px;background:white;color:#666;cursor:pointer;font-size:13px;transition:all 0.3s;display:flex;align-items:center;gap:5px;}
.random-btn:hover {background:#f5f7fa;border-color:#1890ff;color:#1890ff;}
.count-btn {padding:5px 8px;border:1px solid #eee;border-radius:4px;background:#f8f9fa;color:#666;cursor:pointer;font-size:12px;transition:all 0.3s;}
.count-btn:hover {border-color:#1890ff;color:#1890ff;}
.tab-group {display:flex;gap:15px;margin-bottom:15px;border-bottom:1px solid #eee;padding:0 10px;position:relative;}
.tab-button {padding:12px 24px;border:none;background:none;color:#666;cursor:pointer;position:relative;font-size:15px;font-weight:500;transition:all 0.3s;}
.tab-button:hover {color:#1890ff;}
.tab-button::after {content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:transparent;transition:all 0.3s;}
.tab-button.active {color:#1890ff;font-weight:bold;}
.tab-button.active::after {background:linear-gradient(90deg,#1890ff,#096dd9);box-shadow:0 2px 4px rgba(24,144,255,0.2);}
.section-title {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eee;}
.title-left {display:flex;align-items:center;gap:12px;}
.title-left span {font-size:16px;font-weight:500;color:#333;}
.hint {font-size:13px;color:#999;font-weight:normal;}
.badge {position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff4d4f;color:white;font-size:12px;line-height:18px;text-align:center;font-weight:bold;}
.badge[data-count]:not([data-count="0"]) {display:block;}
.header-actions {display:flex;gap:12px;align-items:center;}
.header-actions .header-btn {height:32px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;border:none;background:#f5f7fa;color:#1890ff;min-width:72px;transition:all 0.2s;}
.header-actions .header-btn:hover {background:#e6f7ff;}
.header-actions .header-btn.danger {background:#fff2f0;color:#ff4d4f;}
.header-actions .header-btn.danger:hover {background:#fff1f0;}
.header-actions > button:last-child {margin-left:8px;font-size:20px;padding:0;width:32px;min-width:unset;border-radius:50%;background:none;}
.play-type-btn {padding:12px;border:1px solid #e8ecef;border-radius:6px;background:white;color:#666;cursor:pointer;transition:all 0.3s;font-size:14px;font-weight:500;}
.play-type-btn:hover {border-color:#1890ff;color:#1890ff;}
.play-type-btn.active {background:#1890ff;color:white;border-color:#1890ff;}
.play-type-dialog {position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:20px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:1002;width:90%;max-width:360px;}
.dialog-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #eee;}
.dialog-content {display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:10px;}
.play-type-option {padding:12px;border:1px solid #e8ecef;border-radius:6px;background:white;color:#666;cursor:pointer;transition:all 0.3s;font-size:14px;font-weight:500;}
.play-type-option:hover {border-color:#1890ff;color:#1890ff;}
.play-type-option.active {background:#1890ff;color:white;border-color:#1890ff;}
@media (max-width:768px) {
.selector-container {width:calc(100% - 20px);padding:15px;margin:10px;margin-bottom:90px;padding-bottom:70px;}.numbers-grid {grid-template-columns:repeat(7,1fr);gap:6px;padding:10px;}.number-ball {width:32px;height:32px;font-size:13px;}.number-item {display:flex;justify-content:center;}.bottom-bar {padding:12px 15px;}.bottom-bar-left,.bottom-bar-right {gap:8px;}.bottom-bar-left {gap:2px;}.bar-button {padding:10px 16px;font-size:14px;min-width:80px;height:40px;}.bar-button {min-height:44px;touch-action:manipulation;}@supports (padding-bottom:env(safe-area-inset-bottom)) {.bottom-bar {padding-bottom:calc(12px + env(safe-area-inset-bottom));}.selector-container {margin-bottom:calc(100px + env(safe-area-inset-bottom));padding-bottom:calc(70px + env(safe-area-inset-bottom));}.main-container {padding-bottom:calc(50px + env(safe-area-inset-bottom));}.random-count-grid {grid-template-columns:repeat(3,1fr);}.tab-group {gap:15px;padding:0 5px;}.tab-button {padding:10px 16px;font-size:14px;}.bet-list-panel {width:calc(100% - 20px);padding:0 10px;}}
}
@media (max-width:360px) {
.numbers-grid {gap:4px;padding:8px;}.number-ball {width:30px;height:30px;font-size:12px;}
}
.random-btn:active,.count-btn:active,.bar-button:active,.bet-actions button:active,.random-count-grid button:active {transform:scale(0.98);opacity:0.8;}
.header-actions {display:flex;gap:10px;align-items:center;}
.header-btn {padding:4px 8px;border:1px solid #ddd;border-radius:4px;background:white;color:#666;font-size:12px;cursor:pointer;transition:all 0.3s;}
.header-btn:hover {background:#f5f7fa;border-color:#1890ff;color:#1890ff;}
.header-btn.danger {color:#ff4d4f;border-color:#ff4d4f;}
.header-btn.danger:hover {background:#fff1f0;}
.bet-actions {display:flex;gap:8px;}
[x-cloak] {display:none !important;}
@supports (padding-bottom:env(safe-area-inset-bottom)) {
.selector-container {padding-bottom:calc(120px + env(safe-area-inset-bottom));}
}
.play-type-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px;}
@media (max-width:768px) {
.play-type-grid {grid-template-columns:repeat(4,1fr);gap:8px;}.play-type-btn {padding:8px;font-size:13px;}
}
/* 文章列表页样式 */
.article-list {
width: calc(100% - 40px);
max-width: 960px;
margin: 12px auto;
}
.article-item {
background: white;
border-radius: 12px;
padding: 18px 20px;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.article-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.article-link {
text-decoration: none;
color: inherit;
display: block;
}
.article-title {
font-size: 16px;
color: #333;
margin: 0 0 10px;
font-weight: normal;
line-height: 1.6;
}
.top-tag {
display: inline-block;
background: linear-gradient(135deg, #ff4d4f, #cf1322);
color: white;
padding: 2px 8px;
font-size: 12px;
border-radius: 4px;
margin-right: 8px;
font-weight: normal;
}
.article-meta {
display: flex;
align-items: center;
gap: 15px;
color: #999;
font-size: 13px;
}
/* 文章详情页样式 */
.article-container {
width: calc(100% - 40px);
max-width: 960px;
margin: 12px auto;
padding: 25px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.article-header {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.article-header .article-title {
font-size: 22px;
color: #333;
margin-bottom: 12px;
font-weight: bold;
line-height: 1.5;
}
.article-content {
font-size: 15px;
line-height: 1.8;
color: #333;
}
.article-content p {
margin-bottom: 1em;
}
.article-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 10px 0;
}
@media (max-width: 768px) {
.article-list,
.article-container {
width: calc(100% - 20px);
margin: 10px auto;
}
.article-item {
padding: 15px;
margin-bottom: 10px;
}
.article-container {
padding: 15px;
}
.article-header .article-title {
font-size: 18px;
}
.article-content {
font-size: 14px;
}
}
/* 分页样式 */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 25px 0;
}
.pagination li {
list-style: none;
}
.pagination li a,
.pagination li span {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 12px;
border-radius: 6px;
background: white;
color: #666;
font-size: 14px;
text-decoration: none;
transition: all 0.3s;
border: 1px solid #e8e8e8;
}
.pagination li.active span {
background: #1890ff;
color: white;
border-color: #1890ff;
}
.pagination li a:hover {
color: #1890ff;
border-color: #1890ff;
background: #f0f8ff;
}
.pagination li.disabled span {
color: #ccc;
background: #f5f5f5;
border-color: #e8e8e8;
cursor: not-allowed;
}
@media (max-width: 768px) {
.pagination {
gap: 4px;
}
.pagination li a,
.pagination li span {
min-width: 28px;
height: 28px;
padding: 0 8px;
font-size: 13px;
}
}
/* 添加图标相关的样式 */
.lottery-title {
display: flex;
align-items: center;
gap: 12px; /* 增加间距 */
}
.lottery-icon {
width: 32px; /* 增加PC端图标尺寸 */
height: 32px;
object-fit: contain;
}
.lottery-title {
gap: 8px;
}
/* 底部版权样式 */
.site-footer {
margin-top: 40px;
padding: 20px 0;
background: #f8f9fa;
border-top: 1px solid #eee;
}
.footer-content {
padding: 0 20px;
}
.footer-info {
text-align: center;
color: #666;
font-size: 14px;
line-height: 1.8;
}
.copyright {
margin-bottom: 8px;
}
.beian {
color: #999;
}
.beian a {
color: #999;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.beian-icon {
width: 14px;
height: 14px;
}
@media (max-width: 768px) {
.site-footer {
margin-top: 20px;
padding: 15px 0;
}
.footer-info {
font-size: 12px;
}
}