0224913
/
TangchaoKAI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>饰品商城</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.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;
            font-size: 14px;
            padding-bottom: 60px; /* 为底部tab栏留出空间 */
        }
        /* 底部Tab栏 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background-color: white;
            border-top: 1px solid #eee;
            z-index: 100;
        }
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 0;
            color: #666;
        }
        .tab-item.active {
            color: #1890ff;
        }
        .tab-item i {
            font-size: 20px;
            margin-bottom: 2px;
        }
        .tab-item span {
            font-size: 12px;
        }
        /* 页面容器 */
        .page {
            display: none;
            padding: 10px;
        }
        .page.active {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 内容区域 -->
    <div id="app">
        <!-- 首页 -->
        <div id="home-page" class="page">
            <!-- 首页内容 -->
        </div>
        <!-- 发现 -->
        <div id="discover-page" class="page">
            <!-- 发现内容 -->
        </div>
        <!-- 库存 -->
        <div id="inventory-page" class="page">
            <!-- 库存内容 -->
        </div>
        <!-- 店铺 -->
        <div id="shop-page" class="page">
            <!-- 店铺内容 -->
        </div>
        <!-- 我的 -->
        <div id="my-page" class="page">
            <!-- 我的内容 -->
        </div>
    </div>
    <!-- 底部Tab栏 -->
    <div class="tab-bar">
        <div class="tab-item active" data-target="home-page">
            <i class="bi bi-house"></i>
            <span>首页</span>
        </div>
        <div class="tab-item" data-target="discover-page">
            <i class="bi bi-compass"></i>
            <span>发现</span>
        </div>
        <div class="tab-item" data-target="inventory-page">
            <i class="bi bi-bag"></i>
            <span>库存</span>
        </div>
        <div class="tab-item" data-target="shop-page">
            <i class="bi bi-shop"></i>
            <span>店铺</span>
        </div>
        <div class="tab-item" data-target="my-page">
            <i class="bi bi-person"></i>
            <span>我的</span>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有页面和Tab项
            const pages = document.querySelectorAll('.page');
            const tabItems = document.querySelectorAll('.tab-item');

            // 初始化默认显示首页
            pages[0].classList.add('active');

            // 添加点击事件监听
            tabItems.forEach(item => {
                item.addEventListener('click', function() {
                    const targetPageId = this.getAttribute('data-target');
                    // 移除所有页面的active类
                    pages.forEach(page => page.classList.remove('active'));
                    // 添加目标页面的active类
                    document.getElementById(targetPageId).classList.add('active');
                    // 更新底部Tab的active状态
                    tabItems.forEach(tab => tab.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>