/* 金融资讯网站主题样式 */
/* 金融行业主色调 - 参考巨潮资讯网 */
:root {
--finance-primary: #1e3a8a; /* 巨潮蓝 - 深蓝色 */
--finance-secondary: #3b82f6; /* 巨潮亮蓝 */
--finance-accent: #f59e0b; /* 橙色强调 */
--finance-gold: #fbbf24; /* 亮金色 - 专题字体 */
--finance-text: #1f2937; /* 深灰色文字 */
--finance-light: #f8fafc; /* 巨潮浅灰背景 */
--finance-success: #dc2626; /* 红色(涨) */
--finance-danger: #16a34a; /* 绿色(跌) */
--finance-border: #e5e7eb; /* 巨潮边框色 */
--finance-hover: #dbeafe; /* 巨潮悬停色 */
}
/* 巨潮风格顶部栏 */
.cninfo-top-bar {
background: white;
border-bottom: 1px solid var(--finance-border);
padding: 8px 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10000;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.top-bar-content {
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.top-right-area {
display: flex;
align-items: center;
gap: 20px;
}
/* 巨潮风格用户认证区域 */
.cninfo-top-bar .user-auth-area .auth-buttons {
display: flex;
gap: 8px;
}
.cninfo-top-bar .auth-btn {
padding: 6px 12px;
border-radius: 4px;
border: 1px solid var(--finance-secondary);
background: transparent;
color: var(--finance-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.cninfo-top-bar .auth-btn:hover {
background: var(--finance-secondary);
color: white;
}
.cninfo-top-bar .auth-btn.register-btn {
background: var(--finance-secondary);
color: white;
}
.cninfo-top-bar .auth-btn.register-btn:hover {
background: var(--finance-primary);
border-color: var(--finance-primary);
}
/* 巨潮风格用户信息 */
.cninfo-top-bar .user-profile {
position: relative;
}
.cninfo-top-bar .user-welcome {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--finance-light);
border: 1px solid var(--finance-border);
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.cninfo-top-bar .user-welcome:hover {
background: white;
border-color: var(--finance-secondary);
}
/* 用户头像下拉框样式 - 与基金知识页面保持一致 */
.user-section {
position: relative;
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 8px 15px;
border-radius: 25px;
background: rgba(255,255,255,0.1);
transition: all 0.3s;
}
.user-info:hover {
background: rgba(255,255,255,0.2);
}
.user-avatar {
width: 32px;
height: 32px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.user-name {
font-size: 14px;
font-weight: 500;
}
.dropdown-arrow {
font-size: 10px;
transition: transform 0.3s;
}
/* 用户下拉菜单 - 优化长度和样式 */
.user-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
padding: 8px 0;
min-width: 280px;
max-width: 320px;
z-index: 1000;
display: none !important;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s;
}
.user-section.active .user-menu {
display: block !important;
opacity: 1;
transform: translateY(0);
}
.menu-header {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
}
.menu-user-info {
margin-bottom: 5px;
}
.menu-user-name {
display: block;
font-weight: 600;
color: #1f2937;
font-size: 14px;
}
.menu-user-email {
display: block;
color: #6b7280;
font-size: 12px;
}
.sync-status {
display: inline-block;
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
background: #d1fae5;
color: #065f46;
margin-top: 5px;
}
.menu-divider {
height: 1px;
background: #e5e7eb;
margin: 8px 0;
}
.menu-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px 20px;
color: #374151;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
margin: 2px 8px;
border-radius: 8px;
position: relative;
}
.menu-item:hover {
background: linear-gradient(135deg, #f3f4f6 0%, #e9ecef 100%);
transform: translateX(4px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.menu-item.logout {
color: #dc2626;
border-top: 1px solid #e5e7eb;
margin-top: 8px;
padding-top: 16px;
}
.menu-item.logout:hover {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #b91c1c;
}
.menu-icon {
font-size: 18px;
width: 20px;
text-align: center;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.menu-text {
display: flex;
flex-direction: column;
}
.menu-title {
font-weight: 500;
margin-bottom: 2px;
}
.menu-desc {
font-size: 11px;
color: #6b7280;
}
.cninfo-top-bar .user-avatar {
font-size: 16px;
}
.cninfo-top-bar .user-name {
color: var(--finance-primary);
font-size: 13px;
font-weight: 500;
}
.cninfo-top-bar .user-dropdown {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid var(--finance-border);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 5px 0;
min-width: 100px;
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: all 0.3s ease;
margin-top: 2px;
}
.cninfo-top-bar .user-welcome:hover .user-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.cninfo-top-bar .user-dropdown a {
display: block;
padding: 6px 12px;
color: var(--finance-text);
text-decoration: none;
font-size: 13px;
transition: background 0.3s ease;
}
.cninfo-top-bar .user-dropdown a:hover {
background: var(--finance-hover);
}
/* 巨潮风格搜索框 */
.search-area {
position: relative;
}
.search-form {
display: flex;
align-items: center;
background: white;
border: 1px solid var(--finance-border);
border-radius: 4px;
overflow: hidden;
transition: all 0.3s ease;
}
.search-form:hover,
.search-form:focus-within {
border-color: var(--finance-secondary);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
.search-input {
width: 200px;
padding: 8px 12px;
border: none;
outline: none;
font-size: 13px;
color: var(--finance-text);
}
.search-input::placeholder {
color: #9ca3af;
}
.search-btn {
background: var(--finance-secondary);
color: white;
border: none;
padding: 8px 12px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s ease;
}
.search-btn:hover {
background: var(--finance-primary);
}
/* 新的网站头部布局 */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10000;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header-top {
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
padding: 0;
}
.header-container {
max-width: 1300px;
margin: 0 auto;
display: flex;
align-items: center;
height: 70px;
padding: 0 20px;
gap: 30px;
}
/* Logo区域 */
.logo-area {
flex-shrink: 0;
}
.site-logo {
height: 50px;
width: auto;
transition: transform 0.3s ease;
}
.site-logo:hover {
transform: scale(1.05);
}
/* 主导航区域 */
.main-nav {
flex: 1;
display: flex;
justify-content: center;
}
.nav-list {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 5px;
}
.nav-item {
position: relative;
}
.nav-link {
display: block;
padding: 20px 18px;
color: white;
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
}
.nav-item:hover .nav-link,
.nav-item.active .nav-link {
background: rgba(255, 255, 255, 0.1);
border-bottom-color: var(--finance-gold);
color: var(--finance-gold);
}
/* 下拉菜单 */
.nav-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 8px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
padding: 20px;
min-width: 400px;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-10px);
transition: all 0.3s ease;
border-top: 3px solid var(--finance-gold);
}
.nav-item.has-dropdown:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.dropdown-group h4 {
color: var(--finance-primary);
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--finance-border);
padding-bottom: 8px;
}
.dropdown-group a {
display: block;
padding: 6px 0;
color: #4a5568;
text-decoration: none;
font-size: 13px;
transition: all 0.3s ease;
border-left: 3px solid transparent;
padding-left: 10px;
margin-left: -10px;
}
.dropdown-group a:hover {
color: var(--finance-primary);
background: var(--finance-hover);
border-left-color: var(--finance-gold);
transform: translateX(3px);
}
/* 右侧功能区 */
.header-right {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
/* 搜索容器 */
.search-container {
position: relative;
}
.search-form {
display: flex;
align-items: center;
background: white;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.search-form:hover,
.search-form:focus-within {
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transform: translateY(-1px);
}
.search-input {
width: 200px;
padding: 10px 15px;
border: none;
outline: none;
font-size: 14px;
color: var(--finance-text);
background: transparent;
}
.search-input::placeholder {
color: #9ca3af;
}
.search-button {
background: var(--finance-secondary);
color: white;
border: none;
padding: 10px 12px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
border-radius: 0 25px 25px 0;
}
.search-button:hover {
background: var(--finance-primary);
}
/* 用户区域 */
.user-area {
position: relative;
}
.auth-section {
display: flex;
gap: 8px;
}
.header-btn {
padding: 8px 16px;
border-radius: 20px;
border: 2px solid white;
background: transparent;
color: white;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.header-btn:hover {
background: white;
color: var(--finance-primary);
transform: translateY(-1px);
}
.header-btn.register-btn {
background: white;
color: var(--finance-primary);
}
.header-btn.register-btn:hover {
background: var(--finance-gold);
color: white;
border-color: var(--finance-gold);
}
/* 用户信息区域 */
.user-section {
position: relative;
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.user-info:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
.user-avatar {
font-size: 16px;
color: white;
}
.user-name {
color: white;
font-size: 13px;
font-weight: 500;
}
.dropdown-arrow {
color: white;
font-size: 10px;
transition: transform 0.3s ease;
}
.user-section.active .dropdown-arrow {
transform: rotate(180deg);
}
#userMenu,
.user-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
background: white !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
padding: 8px 0 !important;
min-width: 200px !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 99999 !important;
pointer-events: none !important;
display: none !important;
}
.user-section.active #userMenu,
.user-section.active .user-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto !important;
display: block !important;
}
.user-menu a {
display: block;
padding: 8px 15px;
color: var(--finance-text);
text-decoration: none;
font-size: 13px;
transition: all 0.3s ease;
}
.user-menu a:hover {
background: var(--finance-hover);
color: var(--finance-primary);
}
/* 调整主容器布局 */
.top {
top: 70px !important; /* 为新头部留出空间 */
}
/* 头部导航金融主题 */
.top {
background: linear-gradient(135deg, var(--finance-primary) 0%, var(--finance-secondary) 100%);
box-shadow: 0 2px 15px rgba(26, 54, 93, 0.15);
}
/* 导航菜单金融风格 */
.nav li h3 a {
color: #fff;
font-weight: 500;
transition: all 0.3s ease;
}
.nav li:hover h3 a,
.nav li.on h3 a {
color: var(--finance-accent);
text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}
/* 金融数据展示区域 */
.finance-data-widget {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
margin: 20px 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* 金融资讯卡片 */
.finance-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
overflow: hidden;
}
.finance-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(26, 54, 93, 0.15);
}
/* 价格显示 */
.price-up {
color: var(--finance-success);
font-weight: bold;
}
.price-down {
color: var(--finance-danger);
font-weight: bold;
}
.price-neutral {
color: var(--finance-text);
font-weight: bold;
}
/* 股票/金融指标 */
.market-indicator {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
margin: 2px;
}
.indicator-up {
background: rgba(229, 62, 62, 0.1);
color: var(--finance-success);
}
.indicator-up::before {
content: "▲ ";
font-size: 10px;
margin-right: 2px;
}
.indicator-down {
background: rgba(56, 161, 105, 0.1);
color: var(--finance-danger);
}
.indicator-down::before {
content: "▼ ";
font-size: 10px;
margin-right: 2px;
}
/* 金融新闻标题样式 */
.finance-news-title {
color: var(--finance-primary);
font-size: 18px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 10px;
transition: color 0.3s ease;
}
.finance-news-title:hover {
color: var(--finance-secondary);
}
/* 时间戳样式 */
.finance-timestamp {
color: #718096;
font-size: 14px;
margin-bottom: 8px;
}
/* 按钮金融主题 */
.btn-finance-primary {
background: linear-gradient(135deg, var(--finance-primary) 0%, var(--finance-secondary) 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
font-weight: 500;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.btn-finance-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 54, 93, 0.3);
color: white;
text-decoration: none;
}
.btn-finance-accent {
background: var(--finance-accent);
color: var(--finance-primary);
border: none;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.btn-finance-accent:hover {
background: #b8941f;
transform: translateY(-1px);
color: var(--finance-primary);
text-decoration: none;
}
/* 金融图表容器 */
.finance-chart-container {
background: #fff;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 金融统计数字 */
.finance-stat {
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
border-radius: 8px;
margin: 10px;
border: 1px solid #e2e8f0;
}
.finance-stat-number {
font-size: 2.5rem;
font-weight: bold;
color: var(--finance-primary);
display: block;
}
.finance-stat-label {
color: #718096;
font-size: 14px;
margin-top: 5px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.finance-data-widget {
padding: 15px;
margin: 15px 0;
}
.finance-stat-number {
font-size: 2rem;
}
.btn-finance-primary,
.btn-finance-accent {
padding: 10px 20px;
font-size: 14px;
}
}
/* 覆盖原有样式以适配金融主题 */
.title1 {
color: var(--finance-primary) !important;
font-weight: 600 !important;
}
.i_news_more {
background: var(--finance-accent) !important;
color: var(--finance-primary) !important;
font-weight: 600 !important;
}
.i_news_more:hover {
background: #b8941f !important;
color: var(--finance-primary) !important;
}
/* 页面分页样式更新 */
.pages a.active,
.pages a:hover {
background: var(--finance-primary) !important;
color: #fff !important;
}
/* 实时数据动画效果 */
.price-flash {
animation: priceFlash 0.5s ease-in-out;
}
@keyframes priceFlash {
0% { background-color: transparent; }
50% { background-color: rgba(212, 175, 55, 0.3); }
100% { background-color: transparent; }
}
.data-updated {
animation: dataUpdate 1s ease-in-out;
}
@keyframes dataUpdate {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
/* 数据变动方向指示 */
.finance-stat-number.price-up {
color: var(--finance-success);
animation: priceUp 0.5s ease-in-out;
}
.finance-stat-number.price-down {
color: var(--finance-danger);
animation: priceDown 0.5s ease-in-out;
}
@keyframes priceUp {
0% { color: var(--finance-text); }
50% { color: var(--finance-success); transform: translateY(-2px); }
100% { color: var(--finance-success); transform: translateY(0); }
}
@keyframes priceDown {
0% { color: var(--finance-text); }
50% { color: var(--finance-danger); transform: translateY(2px); }
100% { color: var(--finance-danger); transform: translateY(0); }
}
/* 实时数据控制按钮 */
.finance-control-panel {
text-align: center;
margin: 10px 0;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.finance-control-btn {
background: var(--finance-secondary);
color: white;
border: none;
padding: 6px 12px;
margin: 0 5px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: all 0.3s ease;
}
.finance-control-btn:hover {
background: var(--finance-primary);
transform: translateY(-1px);
}
.finance-control-btn.danger {
background: var(--finance-danger);
}
.finance-control-btn.success {
background: var(--finance-success);
}
/* 实时状态指示器 */
.realtime-indicator {
display: inline-block;
width: 8px;
height: 8px;
background: #16a34a; /* 绿色表示在线 */
border-radius: 50%;
margin-left: 8px;
animation: pulse 2s infinite;
}
.realtime-indicator.offline {
background: #dc2626; /* 红色表示离线 */
animation: none;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
/* 数据更新时间戳 */
.data-timestamp {
font-size: 11px;
color: #718096;
text-align: center;
margin-top: 10px;
}
/* 基金知识和投资方案栏目样式 */
.finance-sections {
margin: 40px 0;
padding: 0 20px;
}
.finance-section {
margin-bottom: 60px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 16px;
padding: 40px;
box-shadow: 0 8px 25px rgba(26, 54, 93, 0.1);
border: 1px solid rgba(26, 54, 93, 0.05);
}
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-title {
font-size: 28px;
color: var(--finance-primary);
margin-bottom: 8px;
font-weight: 600;
}
.section-subtitle {
color: #718096;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
}
/* 基金知识样式 */
.knowledge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-top: 30px;
}
.knowledge-item {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}
.knowledge-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(26, 54, 93, 0.15);
border-color: var(--finance-accent);
}
.knowledge-item .item-icon {
font-size: 32px;
margin-bottom: 15px;
display: block;
}
.knowledge-item h4 {
color: var(--finance-primary);
font-size: 18px;
margin-bottom: 12px;
font-weight: 600;
}
.knowledge-item p {
color: #4a5568;
line-height: 1.6;
margin-bottom: 15px;
font-size: 14px;
}
.read-more {
color: var(--finance-accent);
text-decoration: none;
font-weight: 500;
font-size: 14px;
transition: color 0.3s ease;
}
.read-more:hover {
color: #b8941f;
text-decoration: none;
}
/* 投资方案样式 */
.plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 30px;
}
.plan-item {
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.plan-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--finance-primary), var(--finance-accent));
}
.plan-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(30, 58, 138, 0.15);
border-color: var(--finance-secondary);
}
.plan-header {
text-align: center;
margin-bottom: 25px;
}
.plan-icon {
font-size: 40px;
margin-bottom: 15px;
}
.plan-item h4 {
color: var(--finance-primary);
font-size: 20px;
margin-bottom: 10px;
font-weight: 600;
}
.plan-return {
background: linear-gradient(135deg, var(--finance-success), #48bb78);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
display: inline-block;
}
.plan-features {
margin: 25px 0;
}
.plan-features ul {
list-style: none;
padding: 0;
}
.plan-features li {
padding: 8px 0;
color: #4a5568;
font-size: 14px;
position: relative;
padding-left: 20px;
}
.plan-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--finance-success);
font-weight: bold;
}
.plan-suitability {
color: #718096;
font-size: 12px;
text-align: center;
margin: 20px 0;
padding: 8px;
background: #f7fafc;
border-radius: 8px;
}
.plan-button {
display: block;
width: 100%;
padding: 12px;
text-align: center;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
margin-top: 20px;
}
.btn-conservative {
background: linear-gradient(135deg, #4299e1, #3182ce);
color: white;
}
.btn-balanced {
background: linear-gradient(135deg, var(--finance-secondary), var(--finance-primary));
color: white;
}
.btn-aggressive {
background: linear-gradient(135deg, #e53e3e, #c53030);
color: white;
}
.plan-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
text-decoration: none;
color: white;
}
/* 方案特殊样式 */
.plan-item.conservative {
border-left: 4px solid #4299e1;
}
.plan-item.balanced {
border-left: 4px solid var(--finance-accent);
}
.plan-item.aggressive {
border-left: 4px solid #e53e3e;
}
/* 移动端适配 */
@media (max-width: 768px) {
.finance-control-panel {
padding: 8px;
}
.finance-control-btn {
padding: 4px 8px;
font-size: 11px;
margin: 2px;
}
.finance-sections {
padding: 0 10px;
}
.finance-section {
padding: 25px 20px;
margin-bottom: 40px;
}
.section-title {
font-size: 24px;
}
.knowledge-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.plans-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.knowledge-item,
.plan-item {
padding: 20px;
}
}
/* 用户认证系统样式 */
.user-auth-area {
position: absolute;
right: 100px;
top: 30px;
z-index: 1000;
}
.auth-buttons {
display: flex;
gap: 10px;
}
.auth-btn {
background: linear-gradient(135deg, var(--finance-secondary), var(--finance-primary));
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.auth-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 54, 93, 0.3);
}
.register-btn {
background: linear-gradient(135deg, var(--finance-accent), #b8941f);
color: var(--finance-primary);
}
.user-profile {
position: relative;
}
.user-welcome {
display: flex;
align-items: center;
background: white;
padding: 8px 16px;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
}
.user-welcome:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.user-avatar {
font-size: 18px;
margin-right: 8px;
}
.user-name {
color: var(--finance-primary);
font-weight: 500;
margin-right: 8px;
}
.user-dropdown {
position: absolute;
top: 100%;
right: 0;
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
padding: 8px 0;
min-width: 120px;
display: none;
z-index: 1001;
}
.user-welcome:hover .user-dropdown {
display: block;
}
.user-dropdown a {
display: block;
padding: 8px 16px;
color: var(--finance-text);
text-decoration: none;
transition: background 0.3s ease;
}
.user-dropdown a:hover {
background: #f7fafc;
color: var(--finance-primary);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
.modal-content {
background-color: white;
margin: 5% auto;
padding: 0;
border-radius: 16px;
width: 90%;
max-width: 450px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-header {
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
color: white;
padding: 20px 25px;
border-radius: 16px 16px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.close {
color: white;
font-size: 28px;
font-weight: bold;
cursor: pointer;
line-height: 1;
transition: color 0.3s ease;
}
.close:hover {
color: var(--finance-accent);
}
.modal-body {
padding: 30px 25px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 6px;
color: var(--finance-text);
font-weight: 500;
font-size: 14px;
}
.form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: var(--finance-secondary);
box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.1);
}
.checkbox-group {
display: flex;
align-items: flex-start;
}
.checkbox-label {
display: flex;
align-items: flex-start;
cursor: pointer;
font-size: 13px;
line-height: 1.4;
}
.checkbox-label input[type="checkbox"] {
display: none;
}
.checkmark {
width: 18px;
height: 18px;
border: 2px solid #e2e8f0;
border-radius: 4px;
margin-right: 8px;
margin-top: 1px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark {
background: var(--finance-success);
border-color: var(--finance-success);
color: white;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
font-size: 12px;
font-weight: bold;
}
.auth-submit-btn {
width: 100%;
background: linear-gradient(135deg, var(--finance-secondary), var(--finance-primary));
color: white;
border: none;
padding: 14px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.auth-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 54, 93, 0.3);
}
.auth-links {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
.auth-links a {
color: var(--finance-secondary);
text-decoration: none;
font-size: 14px;
margin: 0 10px;
}
.auth-links a:hover {
color: var(--finance-primary);
text-decoration: underline;
}
.terms-link, .privacy-link {
color: var(--finance-accent) !important;
}
/* 用户中心样式 */
.user-center-content {
text-align: center;
}
.user-info-card {
background: linear-gradient(135deg, #f7fafc, #ffffff);
padding: 30px;
border-radius: 12px;
margin-bottom: 25px;
border: 1px solid #e2e8f0;
}
.user-avatar-large {
font-size: 60px;
margin-bottom: 15px;
}
.user-info-card h3 {
color: var(--finance-primary);
margin: 10px 0;
font-size: 22px;
}
.user-info-card p {
color: #718096;
margin: 8px 0;
}
.user-join-date {
font-size: 12px;
color: #a0aec0;
}
.user-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.user-action-btn {
padding: 12px 20px;
border: 2px solid var(--finance-secondary);
background: transparent;
color: var(--finance-secondary);
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.user-action-btn:hover {
background: var(--finance-secondary);
color: white;
transform: translateY(-2px);
}
.user-action-btn.danger {
border-color: var(--finance-danger);
color: var(--finance-danger);
}
.user-action-btn.danger:hover {
background: var(--finance-danger);
color: white;
}
/* 消息提示样式 */
.auth-message {
position: fixed;
top: 120px;
right: 20px;
padding: 12px 20px;
border-radius: 8px;
color: white;
font-weight: 500;
z-index: 10001;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
max-width: 300px;
}
.auth-message.show {
opacity: 1;
transform: translateX(0);
}
.auth-message.success {
background: linear-gradient(135deg, var(--finance-success), #48bb78);
}
.auth-message.error {
background: linear-gradient(135deg, var(--finance-danger), #f56565);
}
.auth-message.info {
background: linear-gradient(135deg, var(--finance-secondary), var(--finance-primary));
}
/* 金融专题卡片样式 */
.finance-topics-section {
margin: 40px 0;
padding: 40px 20px;
background: linear-gradient(135deg, var(--finance-light) 0%, #ffffff 100%);
border: 1px solid var(--finance-border);
border-radius: 12px;
position: relative;
}
.finance-topics-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,') bottom center no-repeat;
opacity: 0.1;
pointer-events: none;
}
.finance-topics-section .section-header {
text-align: center;
margin-bottom: 40px;
}
.finance-topics-section .section-title {
font-size: 28px;
color: var(--finance-gold);
margin-bottom: 8px;
font-weight: 600;
text-shadow: 0 1px 3px rgba(251, 191, 36, 0.3);
}
.finance-topics-section .section-subtitle {
color: #6b7280;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
}
.topics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
max-width: 1200px;
margin: 0 auto;
}
.topic-card {
background: white;
border-radius: 8px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 2px solid var(--finance-border);
position: relative;
overflow: hidden;
}
.topic-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--finance-primary), var(--finance-accent));
}
.topic-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(26, 54, 93, 0.15);
border-color: var(--finance-accent);
}
.topic-icon {
font-size: 48px;
text-align: center;
margin-bottom: 20px;
display: block;
}
.topic-card h4 {
color: var(--finance-gold);
font-size: 20px;
margin-bottom: 12px;
font-weight: 600;
text-align: center;
text-shadow: 0 1px 2px rgba(251, 191, 36, 0.2);
}
.topic-card p {
color: #4a5568;
line-height: 1.6;
margin-bottom: 20px;
text-align: center;
font-size: 14px;
}
.topic-stats {
display: flex;
justify-content: space-between;
margin-bottom: 25px;
padding: 10px 0;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.topic-stats span {
font-size: 12px;
color: #718096;
background: #f7fafc;
padding: 4px 8px;
border-radius: 12px;
}
.topic-button {
display: block;
width: 100%;
background: linear-gradient(135deg, var(--finance-secondary), var(--finance-primary));
color: white;
text-decoration: none;
padding: 12px;
border-radius: 8px;
text-align: center;
font-weight: 600;
transition: all 0.3s ease;
}
.topic-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 54, 93, 0.3);
color: white;
text-decoration: none;
}
/* 专题卡片特殊效果 */
.topic-card:nth-child(1) .topic-icon { color: #e53e3e; }
.topic-card:nth-child(2) .topic-icon { color: var(--finance-accent); }
.topic-card:nth-child(3) .topic-icon { color: var(--finance-success); }
.topic-card:nth-child(4) .topic-icon { color: #805ad5; }
.topic-card:nth-child(5) .topic-icon { color: #3182ce; }
.topic-card:nth-child(6) .topic-icon { color: #d69e2e; }
/* 移动端适配 */
@media (max-width: 768px) {
.user-auth-area {
right: 20px;
top: 25px;
}
.auth-btn {
padding: 6px 12px;
font-size: 12px;
}
.modal-content {
width: 95%;
margin: 10% auto;
}
.modal-body {
padding: 20px;
}
.user-actions {
grid-template-columns: 1fr;
}
.auth-message {
right: 10px;
max-width: calc(100vw - 20px);
}
.finance-topics-section {
padding: 0 10px;
}
.topics-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.topic-card {
padding: 25px 20px;
}
.finance-topics-section .section-title {
font-size: 24px;
}
}
/* 专题页面样式 */
.topic-banner {
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
color: white;
padding: 60px 0;
text-align: center;
}
.banner-content h1 {
font-size: 36px;
margin-bottom: 15px;
font-weight: 600;
}
.banner-content p {
font-size: 18px;
margin-bottom: 25px;
opacity: 0.9;
}
.banner-icon {
font-size: 60px;
margin-bottom: 20px;
}
.banner-stats {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
}
.banner-stats span {
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
}
/* 知识导航样式 */
.knowledge-nav {
margin: 40px 0;
}
.knowledge-nav h3 {
color: var(--finance-primary);
font-size: 24px;
margin-bottom: 25px;
text-align: center;
}
.nav-cards {
display: flex;
justify-content: space-around;
gap: 20px;
margin-bottom: 40px;
}
.nav-card {
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
max-width: 200px;
}
.nav-card.active {
border-color: var(--finance-accent);
background: linear-gradient(135deg, #fff, #f7fafc);
}
.nav-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.nav-number {
width: 40px;
height: 40px;
background: var(--finance-secondary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-weight: bold;
}
.nav-card.active .nav-number {
background: var(--finance-accent);
}
.nav-card h4 {
color: var(--finance-primary);
margin-bottom: 8px;
}
.nav-card p {
color: #718096;
font-size: 14px;
}
/* 知识文章样式 */
.knowledge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 30px;
}
.knowledge-article {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.knowledge-article:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.article-image {
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.article-icon {
font-size: 48px;
color: white;
}
.article-content {
padding: 25px;
}
.article-content h4 {
color: var(--finance-primary);
font-size: 18px;
margin-bottom: 12px;
}
.article-content p {
color: #4a5568;
line-height: 1.6;
margin-bottom: 15px;
}
.article-meta {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.article-meta span {
font-size: 12px;
color: #718096;
background: #f7fafc;
padding: 4px 8px;
border-radius: 12px;
}
.article-link {
color: var(--finance-accent);
text-decoration: none;
font-weight: 500;
}
.article-link:hover {
color: #b8941f;
}
/* 基金类型卡片样式 */
.fund-types-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 30px;
}
.fund-type-card {
background: white;
border-radius: 16px;
padding: 25px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.fund-type-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.type-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.type-header h4 {
color: var(--finance-primary);
font-size: 20px;
margin: 0;
}
.risk-level {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
}
.risk-level.low { background: #c6f6d5; color: #22543d; }
.risk-level.medium-low { background: #fefcbf; color: #744210; }
.risk-level.medium { background: #fed7d7; color: #742a2a; }
.risk-level.high { background: #fed7e2; color: #702459; }
.type-features p {
margin: 8px 0;
color: #4a5568;
font-size: 14px;
line-height: 1.5;
}
.type-detail-btn {
display: block;
width: 100%;
background: linear-gradient(135deg, var(--finance-secondary), var(--finance-primary));
color: white;
text-decoration: none;
padding: 10px;
border-radius: 8px;
text-align: center;
font-weight: 500;
margin-top: 20px;
transition: all 0.3s ease;
}
.type-detail-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 54, 93, 0.3);
color: white;
text-decoration: none;
}
/* 分析工具样式 */
.analysis-tools {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 30px;
}
.analysis-card {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border-left: 4px solid var(--finance-accent);
}
.analysis-card h4 {
color: var(--finance-primary);
margin-bottom: 15px;
}
.analysis-card ul {
list-style: none;
padding: 0;
}
.analysis-card li {
padding: 6px 0;
color: #4a5568;
font-size: 14px;
}
/* 策略内容样式 */
.strategies-content {
margin-top: 30px;
}
.strategy-item {
display: flex;
align-items: flex-start;
background: white;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.strategy-icon {
font-size: 40px;
margin-right: 20px;
color: var(--finance-accent);
}
.strategy-content h4 {
color: var(--finance-primary);
margin-bottom: 10px;
}
.strategy-content p {
color: #4a5568;
line-height: 1.6;
margin-bottom: 15px;
}
.strategy-tips {
display: flex;
gap: 15px;
}
.strategy-tips span {
font-size: 12px;
color: #718096;
background: #f7fafc;
padding: 4px 8px;
border-radius: 12px;
}
/* 风险测评样式 */
.risk-assessment-section {
background: linear-gradient(135deg, #f7fafc, #ffffff);
border-radius: 16px;
padding: 40px;
margin-bottom: 40px;
border: 1px solid #e2e8f0;
}
.risk-assessment-section h3 {
color: var(--finance-primary);
text-align: center;
margin-bottom: 10px;
}
.risk-assessment-section > p {
text-align: center;
color: #718096;
margin-bottom: 30px;
}
.assessment-questions {
max-width: 800px;
margin: 0 auto;
}
.question-card {
background: white;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.question-card h4 {
color: var(--finance-primary);
margin-bottom: 15px;
}
.options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.options label {
display: flex;
align-items: center;
padding: 12px 16px;
background: #f7fafc;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.options label:hover {
background: #e2e8f0;
}
.options input[type="radio"] {
margin-right: 10px;
}
.options label:has(input:checked) {
background: var(--finance-accent);
color: white;
}
.assessment-btn {
display: block;
width: 300px;
margin: 30px auto;
background: linear-gradient(135deg, var(--finance-secondary), var(--finance-primary));
color: white;
border: none;
padding: 15px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.assessment-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 54, 93, 0.3);
}
.assessment-result {
background: white;
border-radius: 12px;
padding: 25px;
margin-top: 25px;
border: 2px solid var(--finance-accent);
}
.risk-result h5 {
color: var(--finance-primary);
font-size: 20px;
margin-bottom: 10px;
}
.recommended-plan {
background: var(--finance-accent);
color: white;
padding: 15px;
border-radius: 8px;
text-align: center;
font-weight: 600;
margin-top: 15px;
}
/* 详细投资方案样式 */
.investment-plans-detailed h3 {
color: var(--finance-primary);
font-size: 28px;
text-align: center;
margin-bottom: 40px;
}
.plan-detailed {
background: white;
border-radius: 16px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border: 2px solid transparent;
}
.conservative-plan { border-left: 4px solid #4299e1; }
.balanced-plan { border-left: 4px solid var(--finance-accent); }
.growth-plan { border-left: 4px solid #e53e3e; }
.plan-badge {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
}
.conservative-plan .plan-badge { background: #e6f3ff; color: #4299e1; }
.balanced-plan .plan-badge { background: #fff4e6; color: var(--finance-accent); }
.growth-plan .plan-badge { background: #ffe6e6; color: #e53e3e; }
.plan-header h4 {
color: var(--finance-primary);
font-size: 24px;
margin-bottom: 5px;
}
.plan-subtitle {
color: #718096;
font-size: 16px;
margin-bottom: 25px;
}
.plan-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 30px;
padding: 20px;
background: #f7fafc;
border-radius: 12px;
}
.overview-item {
text-align: center;
}
.overview-item .label {
display: block;
color: #718096;
font-size: 14px;
margin-bottom: 5px;
}
.overview-item .value {
display: block;
color: var(--finance-primary);
font-weight: 600;
font-size: 16px;
}
.allocation-chart {
margin-bottom: 30px;
}
.allocation-chart h5 {
color: var(--finance-primary);
margin-bottom: 15px;
}
.chart-container {
background: white;
border-radius: 8px;
padding: 20px;
border: 1px solid #e2e8f0;
}
.allocation-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.allocation-bar {
width: 200px;
height: 12px;
background: #e2e8f0;
border-radius: 6px;
margin-right: 15px;
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 6px;
transition: width 0.3s ease;
}
.plan-features h5,
.recommended-funds h5 {
color: var(--finance-primary);
margin-bottom: 15px;
}
.plan-features ul {
list-style: none;
padding: 0;
}
.plan-features li {
padding: 8px 0;
color: #4a5568;
}
.fund-list {
background: #f7fafc;
border-radius: 8px;
padding: 15px;
}
.fund-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #e2e8f0;
}
.fund-item:last-child {
border-bottom: none;
}
.fund-name {
font-weight: 500;
color: var(--finance-primary);
}
.fund-code {
color: #718096;
font-size: 12px;
}
.fund-return {
color: var(--finance-success);
font-weight: 600;
}
/* 移动端适配 */
@media (max-width: 768px) {
.banner-content h1 {
font-size: 28px;
}
.banner-stats {
flex-direction: column;
gap: 10px;
}
.nav-cards {
flex-direction: column;
}
.knowledge-grid {
grid-template-columns: 1fr;
}
.options {
grid-template-columns: 1fr;
}
.plan-overview {
grid-template-columns: 1fr 1fr;
}
.allocation-item {
flex-direction: column;
align-items: flex-start;
}
.allocation-bar {
width: 100%;
margin-bottom: 8px;
margin-right: 0;
}
.strategy-item {
flex-direction: column;
text-align: center;
}
.strategy-icon {
margin-right: 0;
margin-bottom: 15px;
}
}
/* 巨潮资讯网风格的导航栏样式 */
/* 强制覆盖旧的导航样式 */
.nav, ul.nav, #nav, .top .nav {
display: none !important;
visibility: hidden !important;
}
.main-navigation {
display: block !important;
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
box-shadow: 0 2px 10px rgba(26, 54, 93, 0.1);
position: absolute;
left: 250px;
top: 30px;
z-index: 1000;
width: calc(100% - 450px);
max-width: 800px;
}
.nav-menu {
display: flex !important;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
background: transparent;
}
.nav-item {
position: relative;
margin: 0;
}
.nav-link {
display: block;
padding: 15px 20px;
color: white;
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
}
.nav-item:hover .nav-link,
.nav-item.active .nav-link {
background: rgba(255, 255, 255, 0.15);
border-bottom-color: var(--finance-accent);
color: var(--finance-accent);
text-shadow: none;
}
/* 下拉菜单样式 */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: white;
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
min-width: 480px;
border-top: 3px solid var(--finance-accent);
}
.nav-item.has-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 25px;
}
.dropdown-section h4 {
color: var(--finance-primary);
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 2px solid #e2e8f0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dropdown-link {
display: block;
padding: 8px 0;
color: #4a5568;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
border-left: 3px solid transparent;
padding-left: 12px;
margin-left: -12px;
}
.dropdown-link:hover {
color: var(--finance-primary);
background: #f7fafc;
border-left-color: var(--finance-accent);
text-decoration: none;
transform: translateX(5px);
}
/* 巨潮资讯网风格的专业配色 */
.dropdown-section:first-child .dropdown-link:hover {
background: linear-gradient(90deg, #f0f9ff, transparent);
}
.dropdown-section:last-child .dropdown-link:hover {
background: linear-gradient(90deg, #fefce8, transparent);
}
/* 导航栏适配调整 */
.top .indexcontent {
display: block !important;
position: relative !important;
height: 104px !important;
}
.main-navigation {
margin: 0 !important;
}
.top_logo {
position: absolute !important;
left: 20px !important;
top: 15px !important;
z-index: 1001 !important;
max-height: 70px !important;
width: auto !important;
}
/* 用户认证区域 - 巨潮风格 */
.user-auth-area {
position: absolute !important;
right: 350px !important;
top: 30px !important;
z-index: 1001 !important;
display: block !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
}
.auth-buttons {
display: flex !important;
gap: 10px !important;
}
.auth-btn {
padding: 8px 16px !important;
border-radius: 20px !important;
border: 2px solid var(--finance-secondary) !important;
background: transparent !important;
color: var(--finance-secondary) !important;
font-size: 14px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.auth-btn:hover {
background: var(--finance-secondary) !important;
color: white !important;
transform: translateY(-1px) !important;
}
.auth-btn.register-btn {
background: var(--finance-secondary) !important;
color: white !important;
}
.auth-btn.register-btn:hover {
background: var(--finance-primary) !important;
border-color: var(--finance-primary) !important;
}
/* 用户头像区域 */
.user-profile {
position: relative !important;
}
.user-welcome {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 15px !important;
background: white !important;
border: 2px solid var(--finance-border) !important;
border-radius: 20px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.user-welcome:hover {
border-color: var(--finance-secondary) !important;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important;
}
.user-avatar {
font-size: 18px !important;
}
.user-name {
color: var(--finance-primary) !important;
font-weight: 500 !important;
font-size: 14px !important;
}
.user-dropdown {
position: absolute !important;
top: 100% !important;
right: 0 !important;
background: white !important;
border: 2px solid var(--finance-border) !important;
border-radius: 8px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
padding: 10px 0 !important;
min-width: 120px !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) !important;
transition: all 0.3s ease !important;
}
.user-welcome:hover .user-dropdown {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.user-dropdown a {
display: block !important;
padding: 8px 15px !important;
color: var(--finance-text) !important;
text-decoration: none !important;
font-size: 13px !important;
transition: all 0.3s ease !important;
}
.user-dropdown a:hover {
background: var(--finance-hover) !important;
color: var(--finance-primary) !important;
}
/* 强制显示用户认证区域 */
.top .user-auth-area {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.top .user-auth-area .auth-buttons {
display: flex !important;
visibility: visible !important;
}
.top .user-auth-area .user-profile {
display: block !important;
visibility: visible !important;
}
/* 巨潮风格搜索框样式 */
.top_search_bt {
position: absolute !important;
right: 40px !important;
top: 25px !important;
width: 280px !important;
height: 45px !important;
background: white !important;
border: 2px solid var(--finance-border) !important;
border-radius: 25px !important;
padding: 0 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
transition: all 0.3s ease !important;
z-index: 1002 !important;
}
.top_search_bt:hover {
border-color: var(--finance-secondary) !important;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}
.top_search_bt .top_search_bg {
display: block !important;
position: relative !important;
right: 0 !important;
top: 0 !important;
background: none !important;
width: 100% !important;
height: 100% !important;
}
.top_search_bt .top_search_bg .top_search_txt {
position: absolute !important;
left: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: calc(100% - 80px) !important;
height: 35px !important;
border: none !important;
background: transparent !important;
font-size: 14px !important;
color: var(--finance-text) !important;
outline: none !important;
}
.top_search_bt .top_search_bg .top_search_txt::placeholder {
color: #9ca3af !important;
font-size: 14px !important;
}
.top_search_bt .top_search_bg .top_search_bt {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 35px !important;
height: 35px !important;
border: none !important;
background: var(--finance-secondary) !important;
border-radius: 50% !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.top_search_bt .top_search_bg .top_search_bt:hover {
background: var(--finance-primary) !important;
transform: translateY(-50%) scale(1.05) !important;
}
.top_search_bt .top_search_bg .top_search_bt::before {
content: '🔍' !important;
color: white !important;
font-size: 16px !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* 移动端响应式设计 */
@media (max-width: 1200px) {
.dropdown-menu {
min-width: 350px;
}
.dropdown-content {
gap: 15px;
padding: 15px;
}
.search-input {
width: 180px;
}
}
@media (max-width: 768px) {
/* 新头部移动端优化 - 确保所有内容可见 */
.site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 10000 !important;
}
.header-container {
height: auto;
min-height: 60px;
padding: 10px 15px;
gap: 10px;
flex-direction: column;
align-items: stretch;
}
/* Logo区域 */
.logo-area {
order: 1;
text-align: center;
margin-bottom: 10px;
}
.site-logo {
height: 40px;
}
/* 导航菜单移动端 - 保持可见但紧凑 */
.main-nav {
order: 2;
width: 100%;
display: block !important;
margin-bottom: 10px;
}
.nav-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
padding: 0;
}
.nav-item {
flex: 0 0 auto;
}
.nav-link {
padding: 8px 12px;
font-size: 13px;
white-space: nowrap;
}
/* 搜索和用户区域 */
.header-right {
order: 3;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
/* 搜索框移动端 - 保持可见 */
.search-container {
display: block !important;
width: 100%;
}
.search-form {
display: flex;
width: 100%;
}
.search-input {
flex: 1;
width: auto;
font-size: 14px;
padding: 10px 12px;
}
.search-button {
padding: 10px 15px;
font-size: 16px;
}
/* 用户区域移动端 - 保持可见 */
.user-area {
display: flex !important;
justify-content: center;
width: 100%;
}
.auth-section {
display: flex;
gap: 10px;
width: 100%;
justify-content: center;
}
.header-btn {
flex: 1;
max-width: 150px;
padding: 8px 15px;
font-size: 14px;
}
.user-section {
text-align: center;
}
/* 下拉菜单移动端优化 */
.nav-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 280px;
margin-top: 5px;
display: none;
opacity: 0;
visibility: hidden;
z-index: 1001;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
display: block;
opacity: 1;
visibility: visible;
}
/* 主导航移动端 */
.main-navigation {
position: relative !important;
left: 0 !important;
top: 10px !important;
width: 100% !important;
max-width: none !important;
}
.nav-menu {
flex-wrap: wrap;
justify-content: center;
gap: 5px;
height: auto !important;
padding: 10px 0;
}
.nav-link {
padding: 8px 12px;
font-size: 13px;
}
/* 下拉菜单移动端 */
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
min-width: 100%;
margin-top: 5px;
display: none;
}
.nav-item.has-dropdown:hover .dropdown-menu {
display: block;
}
/* Logo移动端 */
.top_logo {
left: 15px !important;
top: 60px !important;
max-height: 50px !important;
}
.top {
height: 130px !important;
top: 35px !important;
}
/* 专题区域移动端 */
.finance-topics-section {
padding: 25px 15px;
margin: 20px 0;
}
.topics-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.topic-card {
padding: 20px;
}
.finance-topics-section .section-title {
font-size: 24px;
}
/* 实时行情移动端 */
.finance-data-widget {
padding: 15px;
margin: 15px 0;
}
.finance-data-widget > div {
flex-direction: column;
gap: 15px;
}
.finance-stat {
margin-bottom: 10px;
}
/* 基金知识页面移动端 */
.knowledge-layout {
flex-direction: column;
gap: 20px;
padding: 0 15px;
}
.sidebar-nav {
width: 100%;
position: static;
order: 2;
}
.content-area {
order: 1;
padding: 20px;
}
/* 投资方案页面移动端 */
.risk-assessment-survey {
padding: 20px;
margin: 15px 0;
}
.question-card {
padding: 15px;
}
.radio-options {
gap: 8px;
}
.survey-navigation .nav-btn {
padding: 10px 15px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.cninfo-top-bar .auth-btn {
padding: 3px 6px;
font-size: 11px;
}
.search-input {
width: 100px;
}
.top-right-area {
gap: 8px;
}
.finance-topics-section .section-title {
font-size: 20px;
}
.topic-card h4 {
font-size: 16px;
}
.nav-menu {
height: auto !important;
padding: 5px;
}
.nav-link {
padding: 6px 8px;
font-size: 12px;
}
}
/* 特殊链接样式（基金知识、投资方案） */
.dropdown-link[href="fund-knowledge.html"],
.dropdown-link[href="investment-plans.html"] {
font-weight: 600;
color: var(--finance-accent);
}
.dropdown-link[href="fund-knowledge.html"]:hover,
.dropdown-link[href="investment-plans.html"]:hover {
background: linear-gradient(90deg, #fff4e6, transparent);
color: #b8941f;
}
/* 导航指示器 */
.nav-item.has-dropdown .nav-link::after {
content: '▼';
font-size: 10px;
margin-left: 8px;
transition: transform 0.3s ease;
}
.nav-item.has-dropdown:hover .nav-link::after {
transform: rotate(180deg);
}
/* 巨潮资讯网风格的专业边框效果 */
.dropdown-menu::before {
content: '';
position: absolute;
top: -3px;
left: 20px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid var(--finance-accent);
}
/* 活动状态的特殊样式 */
.nav-item.active {
background: rgba(255, 255, 255, 0.05);
}
.nav-item.active .nav-link {
font-weight: 600;
}
/* 覆盖首页图标样式 - 金融主题 */
.i_fw_list li .ico_c {
width: 80px !important;
height: 80px !important;
border-radius: 50%;
background: linear-gradient(135deg, var(--finance-accent), #b8941f) !important;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
transition: all 0.3s ease;
}
.i_fw_list li .ico_c .ico {
background: none !important;
font-size: 36px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/* 使用表情符号代替图片 */
.i_fw_list li .ico_c .ico1::before {
content: "📊";
}
.i_fw_list li .ico_c .ico2::before {
content: "💹";
}
.i_fw_list li .ico_c .ico3::before {
content: "🏆";
}
.i_fw_list li:hover .ico_c {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}
/* 调整文字样式 */
.i_fw_list li .txt {
color: var(--finance-text) !important;
font-size: 16px;
font-weight: 500;
}
/* 新闻列表图片样式优化 */
.i_news_list li .fd {
overflow: hidden;
border-radius: 8px;
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
position: relative;
height: 160px !important;
}
.i_news_list li .fd img {
width: 280px !important;
height: 160px !important;
object-fit: cover;
transition: transform 0.3s ease;
}
.i_news_list li:hover .fd img {
transform: scale(1.05);
}
/* 如果图片不存在，显示金融背景 */
.i_news_list li .fd::after {
content: "💼";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
opacity: 0.2;
z-index: 0;
}
/* 新闻列表整体样式优化 */
.i_news_list li {
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
padding: 15px !important;
transition: all 0.3s ease;
}
.i_news_list li:hover {
box-shadow: 0 5px 20px rgba(26, 54, 93, 0.15);
transform: translateY(-2px);
}
.i_news_list li .txt1 {
font-size: 16px;
font-weight: 600;
color: var(--finance-primary);
margin-top: 12px;
}
.i_news_list li .txt2 {
color: var(--finance-accent);
font-size: 13px;
margin-top: 5px;
}
.i_news_list li .txt3 {
color: #718096;
font-size: 14px;
line-height: 1.5;
margin-top: 8px;
}
/* 专题页面样式 */
.topic-banner {
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
color: white;
padding: 60px 0;
text-align: center;
position: relative;
}
.topic-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,') bottom center no-repeat;
opacity: 0.1;
}
.banner-content {
position: relative;
z-index: 2;
}
.banner-icon {
font-size: 64px;
margin-bottom: 20px;
}
.topic-banner h1 {
font-size: 42px;
font-weight: 700;
margin-bottom: 15px;
color: white;
}
.topic-banner p {
font-size: 18px;
margin-bottom: 30px;
opacity: 0.9;
}
.banner-stats {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.banner-stats span {
background: rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
backdrop-filter: blur(10px);
}
/* 基金公司风格头部 */
.fund-company-header {
background: linear-gradient(135deg, var(--finance-primary) 0%, var(--finance-secondary) 50%, #1e40af 100%);
color: white;
padding: 60px 0;
position: relative;
overflow: hidden;
}
.fund-company-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,') bottom center no-repeat;
opacity: 0.1;
}
.header-overlay {
position: relative;
z-index: 2;
}
.fund-header-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.header-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 25px;
}
.company-logo {
font-size: 32px;
background: linear-gradient(135deg, var(--finance-gold), #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.company-name {
font-size: 18px;
font-weight: 600;
color: white;
text-transform: uppercase;
letter-spacing: 2px;
}
.fund-title {
font-size: 42px;
font-weight: 700;
margin-bottom: 15px;
background: linear-gradient(135deg, white, var(--finance-gold));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fund-subtitle {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.95;
line-height: 1.6;
}
.fund-credentials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.credential-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
}
.credential-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-3px);
}
.credential-icon {
font-size: 32px;
margin-bottom: 12px;
display: block;
}
.credential-text strong {
color: var(--finance-gold);
font-size: 16px;
display: block;
margin-bottom: 8px;
}
.credential-text p {
font-size: 14px;
opacity: 0.9;
margin: 0;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.cta-btn {
padding: 15px 30px;
border-radius: 8px;
border: none;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta-btn.primary {
background: var(--finance-gold);
color: var(--finance-primary);
}
.cta-btn.primary:hover {
background: #f59e0b;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4);
}
.cta-btn.secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-btn.secondary:hover {
background: white;
color: var(--finance-primary);
}
/* 基金公司风格左侧导航 */
.knowledge-layout {
display: flex;
gap: 30px;
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
.fund-sidebar {
width: 350px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 0;
height: fit-content;
position: sticky;
top: 150px;
border: 1px solid var(--finance-border);
}
.sidebar-header {
background: linear-gradient(135deg, var(--finance-light), white);
padding: 25px;
border-bottom: 1px solid var(--finance-border);
border-radius: 12px 12px 0 0;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.brand-icon {
font-size: 28px;
color: var(--finance-primary);
}
.sidebar-brand h3 {
color: var(--finance-primary);
font-size: 18px;
margin: 0;
font-weight: 600;
}
.course-search {
position: relative;
display: flex;
border: 1px solid var(--finance-border);
border-radius: 8px;
overflow: hidden;
background: white;
}
.search-field {
flex: 1;
padding: 10px 15px;
border: none;
outline: none;
font-size: 14px;
color: var(--finance-text);
}
.search-icon-btn {
background: var(--finance-secondary);
color: white;
border: none;
padding: 10px 12px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s ease;
}
.search-icon-btn:hover {
background: var(--finance-primary);
}
/* 学习进度总览 */
.learning-overview {
padding: 25px;
border-bottom: 1px solid var(--finance-border);
background: var(--finance-light);
}
.learning-overview h4 {
color: var(--finance-primary);
font-size: 16px;
margin-bottom: 20px;
text-align: center;
}
.progress-summary {
display: flex;
align-items: center;
gap: 20px;
}
.progress-circle {
position: relative;
width: 80px;
height: 80px;
}
.circle-progress {
width: 80px;
height: 80px;
border-radius: 50%;
background: conic-gradient(var(--finance-gold) 0deg, #e5e7eb 0deg);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.circle-progress::before {
content: '';
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
position: absolute;
}
.progress-percentage {
position: relative;
z-index: 2;
font-size: 16px;
font-weight: bold;
color: var(--finance-primary);
}
.progress-details {
flex: 1;
}
.detail-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.detail-item .number {
font-size: 18px;
font-weight: bold;
color: var(--finance-primary);
}
.detail-item .label {
font-size: 14px;
color: #6b7280;
}
/* 基金公司风格右侧内容区 */
.fund-content-area {
flex: 1;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 0;
border: 1px solid var(--finance-border);
}
.fund-welcome {
padding: 40px;
}
/* 价值主张 */
.value-proposition {
text-align: center;
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 2px solid var(--finance-border);
}
.value-proposition h2 {
color: var(--finance-primary);
font-size: 32px;
font-weight: 700;
margin-bottom: 15px;
}
.value-text {
color: #4b5563;
font-size: 16px;
line-height: 1.8;
max-width: 600px;
margin: 0 auto;
}
/* 核心优势 */
.core-advantages {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.advantage-item {
background: var(--finance-light);
border: 1px solid var(--finance-border);
border-radius: 12px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
}
.advantage-item:hover {
border-color: var(--finance-secondary);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.1);
transform: translateY(-3px);
}
.advantage-icon {
font-size: 40px;
margin-bottom: 15px;
display: block;
color: var(--finance-secondary);
}
.advantage-item h4 {
color: var(--finance-primary);
font-size: 18px;
margin-bottom: 12px;
font-weight: 600;
}
.advantage-item p {
color: #6b7280;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* 风险提示 */
.risk-disclaimer {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 2px solid #f59e0b;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
}
.disclaimer-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.warning-icon {
font-size: 24px;
color: #d97706;
}
.disclaimer-header h4 {
color: #92400e;
font-size: 18px;
margin: 0;
font-weight: 600;
}
.disclaimer-content p {
color: #92400e;
font-size: 14px;
line-height: 1.6;
margin-bottom: 8px;
}
.disclaimer-content p:last-child {
margin-bottom: 0;
}
/* 学习建议 */
.learning-suggestions {
background: white;
border: 1px solid var(--finance-border);
border-radius: 12px;
padding: 25px;
}
.learning-suggestions h4 {
color: var(--finance-primary);
font-size: 20px;
margin-bottom: 20px;
text-align: center;
}
.suggestion-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.suggestion-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px;
background: var(--finance-light);
border-radius: 8px;
transition: all 0.3s ease;
}
.suggestion-item:hover {
background: var(--finance-hover);
transform: translateX(5px);
}
.suggestion-number {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--finance-secondary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
flex-shrink: 0;
}
.suggestion-content h5 {
color: var(--finance-primary);
font-size: 16px;
margin-bottom: 5px;
font-weight: 600;
}
.suggestion-content p {
color: #6b7280;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.sidebar-nav {
width: 350px;
background: white;
border-radius: 16px;
box-shadow: 0 4px 25px rgba(0,0,0,0.1);
padding: 25px;
height: fit-content;
position: sticky;
top: 130px;
}
.nav-header {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 2px solid #e2e8f0;
}
.nav-header h3 {
color: var(--finance-primary);
font-size: 20px;
margin-bottom: 15px;
text-align: center;
}
.nav-search {
position: relative;
}
.nav-search input {
width: 100%;
padding: 10px 35px 10px 15px;
border: 2px solid var(--finance-border);
border-radius: 20px;
font-size: 14px;
transition: all 0.3s ease;
background: var(--finance-light);
}
.nav-search input:focus {
border-color: var(--finance-secondary);
background: white;
outline: none;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
.search-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--finance-secondary);
cursor: pointer;
transition: color 0.3s ease;
}
.search-icon:hover {
color: var(--finance-primary);
}
.nav-chapters {
max-height: 600px;
overflow-y: auto;
margin-bottom: 20px;
}
.nav-chapters::-webkit-scrollbar {
width: 6px;
}
.nav-chapters::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.nav-chapters::-webkit-scrollbar-thumb {
background: var(--finance-accent);
border-radius: 3px;
}
.content-area {
flex: 1;
background: white;
border-radius: 16px;
box-shadow: 0 4px 25px rgba(0,0,0,0.1);
padding: 30px;
min-height: 600px;
}
/* 侧边栏章节样式 */
.sidebar-nav .catalog-chapter {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 15px;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.sidebar-nav .catalog-chapter:hover {
border-color: var(--finance-accent);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
}
.sidebar-nav .chapter-header {
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e2e8f0;
}
.sidebar-nav .chapter-number {
background: var(--finance-primary);
color: white;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: bold;
}
.sidebar-nav .chapter-header h4 {
font-size: 14px;
margin: 0;
color: var(--finance-primary);
}
.sidebar-nav .chapter-badge {
font-size: 10px;
padding: 2px 8px;
}
.sidebar-nav .chapter-contents {
list-style: none;
padding: 0;
margin-bottom: 10px;
}
.sidebar-nav .chapter-contents li {
margin-bottom: 4px;
}
.sidebar-nav .content-link {
font-size: 12px;
padding: 6px 8px;
border-radius: 6px;
}
.sidebar-nav .chapter-progress {
padding-top: 8px;
border-top: 1px solid #e2e8f0;
}
.sidebar-nav .progress-bar {
height: 4px;
}
/* 侧边栏统计 */
.sidebar-stats {
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
color: white;
padding: 20px;
border-radius: 12px;
text-align: center;
}
.sidebar-stats h4 {
color: white;
font-size: 16px;
margin-bottom: 15px;
}
.mini-stats {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.mini-stat {
text-align: center;
}
.mini-stat .number {
display: block;
font-size: 18px;
font-weight: bold;
color: var(--finance-accent);
}
.mini-stat .label {
font-size: 10px;
opacity: 0.8;
}
.overall-progress .progress-bar {
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
overflow: hidden;
}
.overall-progress .progress-fill {
height: 100%;
background: var(--finance-accent);
}
/* 右侧内容区域样式 */
.welcome-content h2 {
color: var(--finance-primary);
font-size: 28px;
margin-bottom: 15px;
}
.welcome-content p {
color: #4a5568;
font-size: 16px;
line-height: 1.6;
margin-bottom: 30px;
}
.learning-path {
background: #f8f9fa;
padding: 25px;
border-radius: 12px;
margin-bottom: 30px;
}
.learning-path h3 {
color: var(--finance-primary);
font-size: 20px;
margin-bottom: 20px;
}
.path-steps {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
}
.path-step {
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 15px;
text-align: center;
min-width: 120px;
transition: all 0.3s ease;
}
.path-step:hover {
border-color: var(--finance-accent);
transform: translateY(-2px);
}
.step-number {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--finance-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
font-weight: bold;
font-size: 14px;
}
.step-content h4 {
font-size: 14px;
color: var(--finance-primary);
margin-bottom: 5px;
}
.step-content p {
font-size: 12px;
color: #718096;
margin: 0;
}
.path-arrow {
font-size: 20px;
color: var(--finance-accent);
font-weight: bold;
}
.quick-start h3 {
color: var(--finance-primary);
font-size: 20px;
margin-bottom: 20px;
}
.start-options {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.start-btn {
background: linear-gradient(135deg, var(--finance-accent), #b8941f);
color: white;
border: none;
border-radius: 12px;
padding: 15px 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
}
.start-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.btn-icon {
font-size: 18px;
}
.btn-text {
font-size: 14px;
font-weight: 500;
}
/* 基金公司风格课程内容页面 */
.fund-content-area .lesson-header {
background: linear-gradient(135deg, var(--finance-light), white);
margin: 0;
padding: 30px;
border-bottom: 2px solid var(--finance-border);
border-radius: 12px 12px 0 0;
}
.fund-content-area .back-btn {
background: transparent;
border: 1px solid var(--finance-secondary);
color: var(--finance-secondary);
border-radius: 6px;
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
margin-bottom: 20px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.fund-content-area .back-btn:hover {
background: var(--finance-secondary);
color: white;
}
.fund-content-area .lesson-header h2 {
color: var(--finance-primary);
font-size: 26px;
margin-bottom: 12px;
font-weight: 600;
}
.fund-content-area .lesson-meta {
display: flex;
gap: 25px;
flex-wrap: wrap;
}
.fund-content-area .lesson-meta span {
background: white;
color: var(--finance-text);
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
border: 1px solid var(--finance-border);
}
.fund-content-area .lesson-body {
padding: 30px;
color: #374151;
line-height: 1.8;
font-size: 15px;
}
.fund-content-area .lesson-body h3 {
color: var(--finance-primary);
font-size: 20px;
margin-top: 25px;
margin-bottom: 15px;
font-weight: 600;
border-left: 4px solid var(--finance-gold);
padding-left: 15px;
}
.fund-content-area .lesson-body ul {
background: var(--finance-light);
border-radius: 8px;
padding: 20px;
margin: 15px 0;
}
.fund-content-area .lesson-body li {
margin-bottom: 8px;
color: #4b5563;
}
.fund-content-area .lesson-navigation {
background: var(--finance-light);
margin: 0;
padding: 20px 30px;
border-top: 1px solid var(--finance-border);
display: flex;
justify-content: space-between;
gap: 15px;
border-radius: 0 0 12px 12px;
}
.nav-btn {
padding: 10px 20px;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
.nav-btn.prev {
background: #f8f9fa;
color: var(--finance-primary);
border: 1px solid #e2e8f0;
}
.nav-btn.complete {
background: var(--finance-success);
color: white;
}
.nav-btn.next {
background: var(--finance-accent);
color: white;
}
.nav-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* 投资风险评测问卷样式 */
.risk-assessment-survey {
background: white;
border-radius: 16px;
box-shadow: 0 4px 25px rgba(0,0,0,0.1);
padding: 40px;
margin-bottom: 40px;
}
.survey-header {
text-align: center;
margin-bottom: 40px;
}
.survey-header h3 {
color: var(--finance-primary);
font-size: 28px;
margin-bottom: 15px;
}
.survey-header p {
color: #718096;
font-size: 16px;
margin-bottom: 25px;
}
.survey-progress {
max-width: 400px;
margin: 0 auto;
}
.survey-progress .progress-bar {
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 8px;
}
.survey-progress .progress-fill {
height: 100%;
background: linear-gradient(135deg, var(--finance-accent), #b8941f);
transition: width 0.5s ease;
}
.progress-text {
font-size: 14px;
color: #718096;
text-align: center;
}
.question-section {
margin-bottom: 30px;
}
.question-section h4 {
color: var(--finance-primary);
font-size: 20px;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #e2e8f0;
}
.question-card {
background: #f8f9fa;
border-radius: 12px;
padding: 25px;
margin-bottom: 20px;
}
.question-card h5 {
color: var(--finance-primary);
font-size: 16px;
margin-bottom: 20px;
font-weight: 600;
}
.radio-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.radio-option {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: all 0.3s ease;
padding: 12px;
border-radius: 8px;
}
.radio-option:hover {
background: rgba(212, 175, 55, 0.1);
}
.radio-custom {
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 50%;
position: relative;
transition: all 0.3s ease;
}
.radio-option input[type="radio"] {
display: none;
}
.radio-option input[type="radio"]:checked + .radio-custom {
border-color: var(--finance-accent);
background: var(--finance-accent);
}
.radio-option input[type="radio"]:checked + .radio-custom::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.option-text {
color: #4a5568;
font-size: 14px;
flex: 1;
}
/* 多选框样式 */
.checkbox-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.checkbox-option {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
padding: 12px;
border-radius: 8px;
transition: all 0.3s ease;
}
.checkbox-option:hover {
background: rgba(212, 175, 55, 0.1);
}
.checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 4px;
position: relative;
transition: all 0.3s ease;
margin-top: 2px;
}
.checkbox-option input[type="checkbox"] {
display: none;
}
.checkbox-option input[type="checkbox"]:checked + .checkbox-custom {
border-color: var(--finance-accent);
background: var(--finance-accent);
}
.checkbox-option input[type="checkbox"]:checked + .checkbox-custom::after {
content: '✓';
color: white;
font-size: 14px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 滑块样式 */
.slider-option {
text-align: center;
}
.slider-container {
margin: 20px 0;
}
.risk-slider {
width: 100%;
height: 8px;
border-radius: 4px;
background: #e2e8f0;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.risk-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--finance-accent);
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.slider-labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 12px;
color: #718096;
}
.slider-value {
margin-top: 15px;
font-size: 16px;
color: var(--finance-primary);
font-weight: 600;
}
/* 知识了解程度网格 */
.knowledge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.knowledge-item {
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 15px;
}
.item-name {
display: block;
font-weight: 600;
color: var(--finance-primary);
margin-bottom: 10px;
text-align: center;
}
.rating-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.rating-options label {
font-size: 12px;
color: #4a5568;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.3s ease;
}
.rating-options label:hover {
background: rgba(212, 175, 55, 0.1);
}
.rating-options input[type="radio"] {
margin-right: 6px;
}
/* 问卷导航 */
.survey-navigation {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding-top: 25px;
border-top: 2px solid #e2e8f0;
}
.survey-navigation .nav-btn {
padding: 12px 25px;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.survey-navigation .nav-btn.prev {
background: #f8f9fa;
color: var(--finance-primary);
border: 1px solid #e2e8f0;
}
.survey-navigation .nav-btn.next {
background: var(--finance-accent);
color: white;
}
.survey-navigation .nav-btn.submit {
background: var(--finance-success);
color: white;
}
.survey-navigation .nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.catalog-header {
text-align: center;
margin-bottom: 40px;
}
.catalog-header h3 {
color: var(--finance-primary);
font-size: 32px;
margin-bottom: 10px;
font-weight: 700;
}
.catalog-header p {
color: #718096;
font-size: 16px;
}
.catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.catalog-chapter {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 25px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.catalog-chapter::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(135deg, var(--finance-accent), #b8941f);
}
.catalog-chapter:hover,
.catalog-chapter.highlight {
border-color: var(--finance-accent);
box-shadow: 0 8px 30px rgba(212, 175, 55, 0.15);
transform: translateY(-3px);
}
.catalog-chapter.highlight {
animation: highlightPulse 2s ease-in-out;
}
@keyframes highlightPulse {
0%, 100% {
box-shadow: 0 8px 30px rgba(212, 175, 55, 0.15);
}
50% {
box-shadow: 0 12px 40px rgba(212, 175, 55, 0.3);
}
}
.chapter-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e2e8f0;
}
.chapter-number {
background: var(--finance-primary);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
}
.chapter-header h4 {
color: var(--finance-primary);
font-size: 18px;
font-weight: 600;
margin: 0;
}
.chapter-badge {
background: var(--finance-accent);
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
}
.chapter-badge:contains("必修") {
background: #e53e3e;
}
.chapter-badge:contains("重点") {
background: #d69e2e;
}
.chapter-badge:contains("核心") {
background: #3182ce;
}
.chapter-badge:contains("实战") {
background: #38a169;
}
.chapter-badge:contains("精通") {
background: #805ad5;
}
.chapter-badge:contains("案例") {
background: #d53f8c;
}
.chapter-contents {
list-style: none;
padding: 0;
margin-bottom: 20px;
}
.chapter-contents li {
margin-bottom: 8px;
}
.content-link {
display: block;
color: #4a5568;
text-decoration: none;
padding: 8px 12px;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
font-size: 14px;
}
.content-link:hover {
background: rgba(212, 175, 55, 0.1);
color: var(--finance-primary);
text-decoration: none;
transform: translateX(8px);
}
.content-link::before {
content: '📖';
margin-right: 8px;
font-size: 12px;
}
.content-link.completed::before {
content: '✅';
}
.chapter-progress {
padding-top: 15px;
border-top: 1px solid #e2e8f0;
}
.progress-text {
font-size: 12px;
color: #718096;
margin-bottom: 8px;
display: block;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, var(--finance-accent), #b8941f);
transition: width 0.3s ease;
}
/* 学习统计 */
.learning-stats {
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
color: white;
padding: 30px;
border-radius: 16px;
text-align: center;
}
.learning-stats h4 {
color: white;
font-size: 24px;
margin-bottom: 25px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
.stat-item {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 12px;
backdrop-filter: blur(10px);
}
.stat-number {
display: block;
font-size: 32px;
font-weight: bold;
color: var(--finance-accent);
margin-bottom: 8px;
}
.stat-label {
font-size: 14px;
opacity: 0.9;
}
/* 响应式用户菜单优化 - 全局样式 */
@media (max-width: 768px) {
.user-menu {
min-width: 260px !important;
max-width: 90vw !important;
right: -10px !important;
}
.menu-item {
padding: 14px 18px !important;
gap: 12px !important;
}
.menu-title {
font-size: 15px !important;
}
.menu-desc {
font-size: 13px !important;
}
}
@media (max-width: 480px) {
.user-menu {
min-width: 240px !important;
right: -20px !important;
}
.menu-header {
padding: 14px 16px !important;
}
.menu-item {
padding: 12px 16px !important;
}
}
/* 理财规划页面样式 */
.planning-goals {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin: 40px 0;
}
.planning-goals h3 {
font-size: 28px;
color: var(--finance-primary);
margin-bottom: 15px;
text-align: center;
}
.planning-goals > p {
text-align: center;
color: #666;
font-size: 16px;
margin-bottom: 40px;
}
.life-stages {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 30px 0;
}
.stage-card {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 25px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stage-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
}
.stage-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
border-color: var(--finance-primary);
}
.stage-age {
display: inline-block;
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
}
.stage-card h4 {
font-size: 20px;
color: #333;
margin-bottom: 15px;
font-weight: 600;
}
.stage-goals {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.goal-tag {
background: rgba(102, 126, 234, 0.1);
color: var(--finance-primary);
padding: 6px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
border: 1px solid rgba(102, 126, 234, 0.2);
}
.stage-description {
color: #666;
font-size: 14px;
line-height: 1.6;
}
/* 理财策略样式 */
.planning-strategies {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin: 40px 0;
}
.strategy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin: 30px 0;
}
.strategy-card {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 25px;
transition: all 0.3s ease;
}
.strategy-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(0,0,0,0.12);
border-color: var(--finance-secondary);
}
.strategy-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
text-align: center;
}
.strategy-card h4 {
font-size: 18px;
color: #333;
margin-bottom: 15px;
text-align: center;
font-weight: 600;
}
.strategy-features {
list-style: none;
padding: 0;
margin: 0;
}
.strategy-features li {
padding: 8px 0;
color: #666;
font-size: 14px;
position: relative;
padding-left: 20px;
}
.strategy-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--finance-primary);
font-weight: bold;
}
/* 工具计算器样式 */
.planning-tools {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin: 40px 0;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 30px 0;
}
.tool-card {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
}
.tool-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(0,0,0,0.12);
border-color: var(--finance-primary);
}
.tool-icon {
font-size: 40px;
margin-bottom: 15px;
display: block;
}
.tool-card h4 {
font-size: 18px;
color: #333;
margin-bottom: 10px;
font-weight: 600;
}
.tool-card p {
color: #666;
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
.tool-btn {
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.tool-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
/* 响应式设计 */
@media (max-width: 768px) {
.planning-goals,
.planning-strategies,
.planning-tools {
padding: 25px 20px;
}
.life-stages,
.strategy-grid,
.tools-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.stage-card,
.strategy-card,
.tool-card {
padding: 20px;
}
.planning-goals h3 {
font-size: 24px;
}
.stage-card h4 {
font-size: 18px;
}
}
/* 专项理财规划样式 */
.special-planning {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin: 40px 0;
}
.special-planning h3 {
font-size: 28px;
color: var(--finance-primary);
margin-bottom: 30px;
text-align: center;
}
.planning-categories {
display: flex;
flex-direction: column;
gap: 30px;
}
.category-item {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 30px;
transition: all 0.3s ease;
}
.category-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
border-color: var(--finance-secondary);
}
.category-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.category-icon {
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
border-radius: 50%;
color: white;
}
.category-header h4 {
font-size: 24px;
color: #333;
margin: 0;
font-weight: 600;
}
.category-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: start;
}
.planning-timeline {
display: flex;
flex-direction: column;
gap: 20px;
}
.timeline-item {
background: rgba(102, 126, 234, 0.05);
padding: 20px;
border-radius: 12px;
border-left: 4px solid var(--finance-primary);
}
.timeline-item .age {
display: inline-block;
background: var(--finance-primary);
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
margin-bottom: 8px;
}
.timeline-item .amount {
display: block;
font-weight: 600;
color: var(--finance-secondary);
font-size: 16px;
margin-bottom: 8px;
}
.timeline-item p {
color: #666;
font-size: 14px;
margin: 0;
line-height: 1.5;
}
.planning-solution {
background: rgba(118, 75, 162, 0.05);
padding: 25px;
border-radius: 12px;
border-left: 4px solid var(--finance-secondary);
}
.planning-solution h5 {
color: var(--finance-secondary);
font-size: 18px;
margin-bottom: 15px;
font-weight: 600;
}
.planning-solution p {
color: #666;
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px;
padding-left: 15px;
position: relative;
}
.planning-solution p::before {
content: '•';
position: absolute;
left: 0;
color: var(--finance-secondary);
font-weight: bold;
}
.tool-features {
list-style: none;
padding: 0;
margin: 15px 0;
}
.tool-features li {
padding: 5px 0;
color: #666;
font-size: 13px;
}
/* 响应式设计 - 专项规划 */
@media (max-width: 768px) {
.special-planning {
padding: 25px 20px;
}
.category-content {
grid-template-columns: 1fr;
gap: 20px;
}
.category-header {
flex-direction: column;
text-align: center;
gap: 10px;
}
.category-icon {
width: 50px;
height: 50px;
font-size: 28px;
}
.category-header h4 {
font-size: 20px;
}
.special-planning h3 {
font-size: 24px;
}
}
/* 保险规划金字塔样式 */
.insurance-pyramid {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 400px;
}
.pyramid-level {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border: 2px solid rgba(102, 126, 234, 0.2);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
position: relative;
}
.pyramid-level:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
border-color: var(--finance-primary);
}
.pyramid-level h5 {
color: var(--finance-primary);
font-size: 16px;
margin-bottom: 8px;
font-weight: 600;
}
.pyramid-level p {
color: #666;
font-size: 14px;
margin: 0;
line-height: 1.5;
}
/* 成功案例样式 */
.case-studies {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin: 40px 0;
}
.case-studies h3 {
font-size: 28px;
color: var(--finance-primary);
margin-bottom: 30px;
text-align: center;
}
.case-carousel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
margin: 30px 0;
}
.case-item {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 30px;
transition: all 0.3s ease;
}
.case-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
border-color: var(--finance-primary);
}
.case-profile {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #e2e8f0;
}
.case-profile .avatar {
font-size: 48px;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--finance-primary), var(--finance-secondary));
border-radius: 50%;
color: white;
}
.profile-info h5 {
color: #333;
font-size: 18px;
margin-bottom: 5px;
font-weight: 600;
}
.profile-info p {
color: #666;
font-size: 14px;
margin: 0;
}
.case-content h5 {
color: var(--finance-primary);
font-size: 16px;
margin: 20px 0 10px 0;
font-weight: 600;
}
.case-content p {
color: #666;
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
.case-content ul {
list-style: none;
padding: 0;
margin: 10px 0;
}
.case-content ul li {
color: #666;
font-size: 14px;
line-height: 1.6;
margin-bottom: 8px;
padding-left: 15px;
position: relative;
}
.case-content ul li::before {
content: '•';
position: absolute;
left: 0;
color: var(--finance-primary);
font-weight: bold;
}
/* 计算器结果样式 */
.result-content {
background: rgba(102, 126, 234, 0.05);
padding: 20px;
border-radius: 12px;
border-left: 4px solid var(--finance-primary);
margin-top: 20px;
}
.result-content p {
color: #333;
font-size: 14px;
line-height: 1.6;
margin-bottom: 8px;
}
.result-content p:first-child {
font-weight: 600;
color: var(--finance-primary);
}
/* 响应式设计 - 案例和金字塔 */
@media (max-width: 768px) {
.case-studies {
padding: 25px 20px;
}
.case-carousel {
grid-template-columns: 1fr;
gap: 20px;
}
.case-item {
padding: 25px;
}
.case-profile {
flex-direction: column;
text-align: center;
gap: 10px;
}
.case-profile .avatar {
width: 60px;
height: 60px;
font-size: 40px;
}
.insurance-pyramid {
max-width: 100%;
}
.pyramid-level {
padding: 15px;
}
.case-studies h3 {
font-size: 24px;
}
}
/* 快速导航样式 */
.quick-navigation {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
padding: 25px;
border-radius: 16px;
border: 2px solid #e2e8f0;
margin-bottom: 30px;
}
.quick-navigation h3 {
color: var(--finance-primary);
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
.quick-nav-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
}
.quick-nav-item {
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 15px 10px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.quick-nav-item:hover {
border-color: var(--finance-accent);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}
.nav-icon {
display: block;
font-size: 24px;
margin-bottom: 8px;
}
.nav-text {
font-size: 13px;
color: var(--finance-primary);
font-weight: 500;
}
.nav-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.nav-card {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border: 2px solid transparent;
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.nav-card:hover {
border-color: var(--finance-accent);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}
.nav-card.active {
background: linear-gradient(135deg, var(--finance-accent), #b8941f);
color: white;
border-color: var(--finance-accent);
}
.nav-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--finance-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-weight: bold;
}
.nav-card.active .nav-number {
background: white;
color: var(--finance-accent);
}
.nav-card h4 {
font-size: 18px;
margin-bottom: 8px;
color: var(--finance-primary);
}
.nav-card.active h4 {
color: white;
}
.knowledge-section {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin-bottom: 40px;
}
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-header h2 {
color: var(--finance-primary);
font-size: 32px;
margin-bottom: 15px;
}
.section-header p {
color: #718096;
font-size: 16px;
}
.knowledge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.knowledge-article {
background: #f8f9fa;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.knowledge-article:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.article-image {
height: 120px;
background: linear-gradient(135deg, var(--finance-accent), #b8941f);
display: flex;
align-items: center;
justify-content: center;
}
.article-icon {
font-size: 48px;
color: white;
}
.article-content {
padding: 20px;
}
.article-content h4 {
color: var(--finance-primary);
font-size: 18px;
margin-bottom: 12px;
}
.article-content p {
color: #718096;
line-height: 1.6;
margin-bottom: 15px;
}
.article-meta {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.article-meta span {
background: rgba(212, 175, 55, 0.1);
color: var(--finance-accent);
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
}
.article-link {
color: var(--finance-primary);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.article-link:hover {
color: var(--finance-accent);
}
/* 基金类型卡片 */
.fund-types-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.fund-type-card {
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 25px;
transition: all 0.3s ease;
}
.fund-type-card:hover {
border-color: var(--finance-accent);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15);
}
.type-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.type-header h4 {
color: var(--finance-primary);
font-size: 20px;
}
.risk-level {
padding: 4px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: bold;
}
.risk-level.low {
background: #d4edda;
color: #155724;
}
.risk-level.medium-low {
background: #fff3cd;
color: #856404;
}
.risk-level.medium {
background: #ffeaa7;
color: #6c5ce7;
}
.risk-level.high {
background: #f8d7da;
color: #721c24;
}
.type-features p {
margin-bottom: 8px;
color: #4a5568;
line-height: 1.5;
}
.type-detail-btn {
background: var(--finance-accent);
color: white;
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
font-size: 14px;
display: inline-block;
margin-top: 15px;
transition: background 0.3s ease;
}
.type-detail-btn:hover {
background: #b8941f;
text-decoration: none;
}
/* 分析工具卡片 */
.analysis-tools {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.analysis-card {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 12px;
padding: 25px;
text-align: center;
}
.analysis-card h4 {
color: var(--finance-primary);
font-size: 18px;
margin-bottom: 20px;
}
.analysis-card ul {
list-style: none;
padding: 0;
}
.analysis-card li {
color: #4a5568;
margin-bottom: 8px;
text-align: left;
}
/* 投资策略 */
.strategies-content {
margin-top: 25px;
}
.strategy-item {
display: flex;
align-items: flex-start;
gap: 20px;
background: white;
padding: 25px;
border-radius: 12px;
border-left: 4px solid var(--finance-accent);
margin-bottom: 25px;
}
.strategy-icon {
font-size: 36px;
flex-shrink: 0;
}
/* ========== 全面移动端响应式优化 ========== */
/* 确保手机和电脑显示相同的内容，只是布局不同 */
@media (max-width: 768px) {
/* 基础移动端优化 */
body {
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
}
/* 确保所有主要内容可见 */
.indexcontent > *,
.i_service,
.i_news,
.finance-data-section,
.finance-topics-section,
.finance-sections,
.data-widgets-container,
.topic-cards,
.service-items,
.news-list {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 移动端容器宽度 */
.indexcontent {
width: 100%;
padding: 0;
margin: 0;
}
/* 实时数据区域移动端完整显示 */
.finance-data-section {
width: 100%;
padding: 15px 10px;
margin: 10px 0;
}
.data-widgets-container {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
width: 100%;
}
.finance-data-widget {
padding: 12px 8px;
margin: 0;
min-height: auto;
}
.finance-stat-label {
font-size: 11px;
margin-bottom: 5px;
}
.finance-stat-number {
font-size: 16px;
font-weight: 600;
}
.finance-stat-change {
font-size: 11px;
margin-top: 3px;
}
.finance-stat-icon {
font-size: 10px;
}
/* 金融专题区域移动端 */
.finance-topics-section {
width: 100%;
padding: 20px 10px;
margin: 15px 0;
}
.topic-cards {
display: grid !important;
grid-template-columns: 1fr;
gap: 15px;
width: 100%;
}
.topic-card {
width: 100%;
padding: 20px 15px;
margin: 0;
}
.topic-icon {
font-size: 36px;
margin-bottom: 10px;
}
.topic-card h4 {
font-size: 18px;
margin-bottom: 10px;
}
.topic-description {
font-size: 13px;
line-height: 1.5;
}
.topic-link {
font-size: 13px;
padding: 8px 16px;
margin-top: 12px;
}
/* 服务区域移动端完整显示 */
.i_service {
width: 100%;
padding: 20px 10px;
background: white;
}
.i_service_list {
display: block;
width: 100%;
}
.i_service_list li {
width: 100% !important;
float: none !important;
margin: 0 0 15px 0 !important;
padding: 15px;
background: var(--finance-light);
border-radius: 8px;
}
/* 新闻区域移动端完整显示 */
.i_news {
width: 100%;
padding: 20px 10px;
background: white;
}
.i_news_l,
.i_news_m,
.i_news_r {
width: 100% !important;
float: none !important;
margin: 0 0 20px 0 !important;
padding: 0;
}
.i_news_list {
width: 100%;
}
.i_news_list li {
padding: 10px 0;
font-size: 14px;
}
/* 轮播图移动端 */
.superslider {
height: 180px !important;
width: 100%;
}
.superslider img {
height: 180px !important;
width: 100%;
object-fit: cover;
}
/* 标题移动端 */
.title1 {
font-size: 20px;
padding: 15px 0;
}
/* 底部移动端 */
.foot {
width: 100%;
padding: 20px 10px;
}
.foot_l,
.foot_m,
.foot_r {
width: 100% !important;
float: none !important;
margin: 0 0 20px 0 !important;
padding: 0;
text-align: center;
}
/* 模态框移动端 */
.modal-content {
width: 90% !important;
margin: 20px auto;
max-height: 80vh;
overflow-y: auto;
}
/* 表单移动端 */
.form-group input,
.form-group select {
width: 100%;
font-size: 16px; /* 防止iOS自动缩放 */
padding: 10px;
}
/* 分页移动端 */
.pages {
text-align: center;
padding: 10px;
}
.pages a {
padding: 5px 10px;
margin: 2px;
font-size: 14px;
}
}
/* 超小屏幕设备（<480px） */
@media (max-width: 480px) {
/* 头部超小屏幕调整 */
.clear {
height: 220px !important;
}
.header-container {
padding: 8px;
gap: 8px;
}
.site-logo {
height: 30px;
}
.nav-list {
gap: 3px;
}
.nav-link {
padding: 5px 8px;
font-size: 11px;
}
.search-input {
font-size: 12px;
padding: 6px 8px;
}
.search-button {
padding: 6px 10px;
font-size: 14px;
}
.header-btn {
padding: 5px 10px;
font-size: 12px;
}
/* 实时数据超小屏幕单列 */
.data-widgets-container {
grid-template-columns: 1fr !important;
gap: 10px;
}
.finance-data-widget {
padding: 15px 12px;
}
/* 专题卡片超小屏幕 */
.topic-card {
padding: 15px;
}
.topic-icon {
font-size: 30px;
}
.topic-card h4 {
font-size: 16px;
}
.topic-description {
font-size: 12px;
}
/* 轮播图超小屏幕 */
.superslider {
height: 150px !important;
}
.superslider img {
height: 150px !important;
}
/* 标题超小屏幕 */
.title1 {
font-size: 18px;
padding: 12px 0;
}
/* 下拉菜单超小屏幕 */
.nav-dropdown {
min-width: 250px;
left: 0;
transform: none;
}
.dropdown-group h4 {
font-size: 14px;
}
.dropdown-group a {
font-size: 12px;
padding: 6px 10px;
}
}
/* ========== 金融网站专业底部样式 ========== */
.finance-footer {
background: linear-gradient(135deg, var(--finance-primary) 0%, #1e40af 100%);
color: white;
padding: 60px 0 20px;
margin-top: 60px;
}
/* 服务导航区域 */
.footer-services {
margin-bottom: 50px;
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.service-item {
text-align: center;
padding: 30px 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.service-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
}
.service-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
}
.service-item h4 {
color: var(--finance-gold);
font-size: 20px;
margin-bottom: 12px;
font-weight: 600;
}
.service-item p {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* 网站导航 */
.footer-navigation {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 50px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.nav-section h5 {
color: var(--finance-gold);
font-size: 18px;
margin-bottom: 20px;
font-weight: 600;
border-bottom: 2px solid var(--finance-gold);
padding-bottom: 8px;
}
.nav-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-section li {
margin-bottom: 10px;
}
.nav-section a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
display: block;
padding: 5px 0;
}
.nav-section a:hover {
color: var(--finance-gold);
padding-left: 10px;
}
/* 联系信息 */
.footer-contact {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 50px;
margin-bottom: 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
align-items: center;
}
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
transition: all 0.3s ease;
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.15);
}
.contact-icon {
font-size: 24px;
flex-shrink: 0;
}
.contact-details h6 {
color: var(--finance-gold);
font-size: 16px;
margin-bottom: 5px;
font-weight: 600;
}
.contact-details p {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
margin: 0;
}
.qr-code {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
.qr-code img {
border-radius: 8px;
margin-bottom: 15px;
}
.qr-code p {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
margin: 5px 0;
}
/* 风险提示 */
.risk-disclaimer {
background: rgba(251, 191, 36, 0.1);
border: 2px solid var(--finance-gold);
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.disclaimer-content h6 {
color: var(--finance-gold);
font-size: 18px;
margin-bottom: 15px;
font-weight: 600;
}
.disclaimer-content p {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* 版权信息 */
.footer-copyright {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 30px;
max-width: 1200px;
margin: 0 auto;
}
.copyright-content {
text-align: center;
margin-bottom: 20px;
}
.copyright-content p {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin: 8px 0;
}
.copyright-content a {
color: var(--finance-gold);
text-decoration: none;
transition: color 0.3s ease;
}
.copyright-content a:hover {
color: white;
}
.copyright-content span {
margin: 0 10px;
color: rgba(255, 255, 255, 0.5);
}
.friend-links {
text-align: center;
padding: 15px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.friend-links span {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin-right: 10px;
}
.friend-links a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 14px;
margin: 0 8px;
transition: color 0.3s ease;
}
.friend-links a:hover {
color: var(--finance-gold);
}
/* 移动端底部适配 */
@media (max-width: 768px) {
.finance-footer {
padding: 40px 0 20px;
}
.service-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.service-item {
padding: 20px 15px;
}
.service-icon {
font-size: 36px;
}
.footer-navigation {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.footer-contact {
grid-template-columns: 1fr;
gap: 30px;
}
.contact-info {
grid-template-columns: 1fr;
gap: 15px;
}
.contact-item {
padding: 15px;
}
.risk-disclaimer {
padding: 20px 15px;
}
.copyright-content p {
font-size: 13px;
}
.friend-links {
padding: 10px 0;
}
.friend-links a {
display: inline-block;
margin: 5px 5px;
}
}
@media (max-width: 480px) {
.footer-navigation {
grid-template-columns: 1fr;
}
.nav-section {
margin-bottom: 25px;
}
.service-item h4 {
font-size: 18px;
}
.service-item p {
font-size: 13px;
}
}
.strategy-content h4 {
color: var(--finance-primary);
font-size: 20px;
margin-bottom: 10px;
}
.strategy-content p {
color: #4a5568;
line-height: 1.6;
margin-bottom: 15px;
}
.strategy-tips {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.strategy-tips span {
background: rgba(212, 175, 55, 0.1);
color: var(--finance-accent);
padding: 4px 10px;
border-radius: 12px;
font-size: 13px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.topic-banner {
padding: 40px 0;
}
.topic-banner h1 {
font-size: 28px;
}
.banner-stats {
gap: 15px;
}
.banner-stats span {
font-size: 12px;
padding: 6px 12px;
}
.knowledge-nav,
.knowledge-section {
padding: 20px;
}
.nav-cards {
grid-template-columns: 1fr;
}
.knowledge-grid {
grid-template-columns: 1fr;
}
.strategy-item {
flex-direction: column;
text-align: center;
}
}
/* 按钮样式的链接 - 通用样式 */
a.user-action-btn,
.btn-link {
display: inline-block;
padding: 10px 20px;
margin: 5px;
background: var(--finance-primary);
color: white !important;
text-decoration: none !important;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
text-align: center;
}
a.user-action-btn:hover,
.btn-link:hover {
background: var(--finance-secondary);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102,126,234,0.3);
color: white !important;
}
a.user-action-btn.danger,
.btn-link.danger {
background: #ef4444;
}
a.user-action-btn.danger:hover,
.btn-link.danger:hover {
background: #dc2626;
}