|
|
@@ -0,0 +1,621 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>库存血压仪APP</title>
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4065880_6q6g3j4n5x.css">
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.5;
|
|
|
+ max-width: 100vw;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ max-width: 500px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #fff;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ padding: 15px;
|
|
|
+ background-color: #1976D2;
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ padding: 15px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-bottom: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ padding: 12px 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-body {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .divider {
|
|
|
+ height: 1px;
|
|
|
+ background-color: #eee;
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-item {
|
|
|
+ width: 25%;
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #E3F2FD;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 auto 8px;
|
|
|
+ color: #1976D2;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-name {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #555;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-card {
|
|
|
+ background-color: #F5F9FF;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-value {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1976D2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-subvalue {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-placeholder {
|
|
|
+ height: 150px;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .two-columns {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .column {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ padding: 5px 10px;
|
|
|
+ background-color: #E3F2FD;
|
|
|
+ border-radius: 15px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1976D2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-value {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .promo-card {
|
|
|
+ background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .promo-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #0D47A1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .promo-desc {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #1976D2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 8px 15px;
|
|
|
+ background-color: #4CAF50;
|
|
|
+ color: white;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer-service {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 80px;
|
|
|
+ right: 20px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background-color: #4CAF50;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-tabs {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: white;
|
|
|
+ display: flex;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ z-index: 100;
|
|
|
+ max-width: 500px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-tab {
|
|
|
+ flex: 1;
|
|
|
+ padding: 10px 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-tab.active {
|
|
|
+ color: #1976D2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table th, .table td {
|
|
|
+ padding: 10px;
|
|
|
+ text-align: left;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table th {
|
|
|
+ font-weight: normal;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table td {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hidden {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-tip {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px;
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ text-align: center;
|
|
|
+ padding: 15px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #1976D2;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <!-- 功能入口页 -->
|
|
|
+ <div id="home-page" class="page">
|
|
|
+ <div class="page-title">库存血压仪</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">常用功能</div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="function-grid">
|
|
|
+ <div class="function-item">
|
|
|
+ <div class="function-icon"><i class="iconfont icon-sales"></i></div>
|
|
|
+ <div class="function-name">销售</div>
|
|
|
+ </div>
|
|
|
+ <div class="function-item">
|
|
|
+ <div class="function-icon"><i class="iconfont icon-stock-in"></i></div>
|
|
|
+ <div class="function-name">进货</div>
|
|
|
+ </div>
|
|
|
+ <div class="function-item">
|
|
|
+ <div class="function-icon"><i class="iconfont icon-inventory"></i></div>
|
|
|
+ <div class="function-name">库存查询</div>
|
|
|
+ </div>
|
|
|
+ <div class="function-item">
|
|
|
+ <div class="function-icon"><i class="iconfont icon-product"></i></div>
|
|
|
+ <div class="function-name">商品管理</div>
|
|
|
+ </div>
|
|
|
+ <div class="function-item">
|
|
|
+ <div class="function-icon"><i class="iconfont icon-customer"></i></div>
|
|
|
+ <div class="function-name">客户管理</div>
|
|
|
+ </div>
|
|
|
+ <div class="function-item">
|
|
|
+ <div class="function-icon"><i class="iconfont icon-receivable"></i></div>
|
|
|
+ <div class="function-name">应收欠款</div>
|
|
|
+ </div>
|
|
|
+ <div class="function-item">
|
|
|
+ <div class="function-icon"><i class="iconfont icon-income"></i></div>
|
|
|
+ <div class="function-name">日常收支</div>
|
|
|
+ </div>
|
|
|
+ <div class="function-item">
|
|
|
+ <div class="function-icon"><i class="iconfont icon-sms"></i></div>
|
|
|
+ <div class="function-name">营销短信</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="promo-card">
|
|
|
+ <div class="promo-title">我的仓库</div>
|
|
|
+ <div class="promo-desc">打造你的专属仓库，玩转私域流量</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">单据分享</div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div>客户反馈将在这里展示</div>
|
|
|
+ <button class="btn">去分享</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="customer-service">
|
|
|
+ <i class="iconfont icon-service"></i>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="nav-tabs">
|
|
|
+ <div class="nav-tab active" onclick="showPage('home-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-home"></i></div>
|
|
|
+ <div>首页</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab" onclick="showPage('sales-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-sales"></i></div>
|
|
|
+ <div>销售</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab" onclick="showPage('finance-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-finance"></i></div>
|
|
|
+ <div>账务</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab" onclick="showPage('analysis-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-analysis"></i></div>
|
|
|
+ <div>分析</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 今日概况页 -->
|
|
|
+ <div id="sales-page" class="page hidden">
|
|
|
+ <div class="header">今日概况</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">核心指标</div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="two-columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="data-card">
|
|
|
+ <div class="data-title">销售额</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+ <div class="data-subvalue">0笔</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="column">
|
|
|
+ <div class="data-card">
|
|
|
+ <div class="data-title">毛利</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="data-card">
|
|
|
+ <div class="data-title">资金入账</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">资产情况</div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="data-title">总资产 = 账户余额 + 库存总额 + 应收欠款 - 应付欠款</div>
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <th>账户余额</th>
|
|
|
+ <td>0.00元</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>库存总额</th>
|
|
|
+ <td>4300.00元</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>应收欠款</th>
|
|
|
+ <td>0.00元</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>应付欠款</th>
|
|
|
+ <td>0.00元</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">现金流</div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="two-columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="data-title">收入</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+ </div>
|
|
|
+ <div class="column">
|
|
|
+ <div class="data-title">支出</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="nav-tabs">
|
|
|
+ <div class="nav-tab" onclick="showPage('home-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-home"></i></div>
|
|
|
+ <div>首页</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab active" onclick="showPage('sales-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-sales"></i></div>
|
|
|
+ <div>销售</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab" onclick="showPage('finance-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-finance"></i></div>
|
|
|
+ <div>账务</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab" onclick="showPage('analysis-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-analysis"></i></div>
|
|
|
+ <div>分析</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 现金流趋势页 -->
|
|
|
+ <div id="finance-page" class="page hidden">
|
|
|
+ <div class="header">现金流趋势</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">资金情况</div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="two-columns">
|
|
|
+ <div class="column">
|
|
|
+ <div class="data-title">收入</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+ </div>
|
|
|
+ <div class="column">
|
|
|
+ <div class="data-title">支出</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="chart-placeholder">
|
|
|
+ 17日 18日 19日 20日 21日 22日 23日
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">收入/支出占比</div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="data-title">收入金额</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+
|
|
|
+ <div class="divider"></div>
|
|
|
+
|
|
|
+ <div class="data-title">销售收入</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+
|
|
|
+ <div class="data-title">收回欠款</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+
|
|
|
+ <div class="data-title">其他</div>
|
|
|
+ <div class="data-value">0.00元</div>
|
|
|
+
|
|
|
+ <div class="empty-tip">统计值为0或负，无法绘制</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="nav-tabs">
|
|
|
+ <div class="nav-tab" onclick="showPage('home-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-home"></i></div>
|
|
|
+ <div>首页</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab" onclick="showPage('sales-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-sales"></i></div>
|
|
|
+ <div>销售</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab active" onclick="showPage('finance-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-finance"></i></div>
|
|
|
+ <div>账务</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab" onclick="showPage('analysis-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-analysis"></i></div>
|
|
|
+ <div>分析</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 客户分析页 -->
|
|
|
+ <div id="analysis-page" class="page hidden">
|
|
|
+ <div class="header">客户分析</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">客户分析</div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="data-title">全部客户</div>
|
|
|
+ <div class="data-value">2387户</div>
|
|
|
+
|
|
|
+ <div class="tag-container">
|
|
|
+ <div class="tag">高价值 <span class="tag-value">1011户</span></div>
|
|
|
+ <div class="tag">需保持 <span class="tag-value">78户</span></div>
|
|
|
+ <div class="tag">新增 <span class="tag-value">24户</span></div>
|
|
|
+ <div class="tag">待发展 <span class="tag-value">24户</span></div>
|
|
|
+ <div class="tag">流失风险 <span class="tag-value">4户</span></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="empty-tip">您尚未启用该应用，以上为模拟数据</div>
|
|
|
+ <button class="btn">前往开启</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">商品分析</div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="data-title">全部商品</div>
|
|
|
+ <div class="data-value">3种</div>
|
|
|
+
|
|
|
+ <div class="tag-container">
|
|
|
+ <div class="tag">推广商品 <span class="tag-value">0种</span></div>
|
|
|
+ <div class="tag">超储商品 <span class="tag-value">0种</span></div>
|
|
|
+ <div class="tag">缺货商品 <span class="tag-value">1种</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="nav-tabs">
|
|
|
+ <div class="nav-tab" onclick="showPage('home-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-home"></i></div>
|
|
|
+ <div>首页</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab" onclick="showPage('sales-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-sales"></i></div>
|
|
|
+ <div>销售</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab" onclick="showPage('finance-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-finance"></i></div>
|
|
|
+ <div>账务</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-tab active" onclick="showPage('analysis-page')">
|
|
|
+ <div class="nav-icon"><i class="iconfont icon-analysis"></i></div>
|
|
|
+ <div>分析</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ function showPage(pageId) {
|
|
|
+ // 隐藏所有页面
|
|
|
+ document.querySelectorAll('.page').forEach(page => {
|
|
|
+ page.classList.add('hidden');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 显示选中的页面
|
|
|
+ document.getElementById(pageId).classList.remove('hidden');
|
|
|
+
|
|
|
+ // 更新导航标签状态
|
|
|
+ document.querySelectorAll('.nav-tab').forEach(tab => {
|
|
|
+ tab.classList.remove('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 设置当前活动标签
|
|
|
+ const activeTab = document.querySelector(`.nav-tab[onclick="showPage('${pageId}')"]`);
|
|
|
+ if (activeTab) {
|
|
|
+ activeTab.classList.add('active');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击客服按钮
|
|
|
+ document.querySelector('.customer-service').addEventListener('click', function() {
|
|
|
+ alert('依依：您好，有什么可以帮您？');
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
Xst