0224913
/
TangchaoKAI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="path/to/Common.css">
<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栏留出空间 */
}
        /* 顶部标签栏 */
        .header {
        position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            z-index: 100;
            box-shadow: 0 1px             4px rgba(0, 0, 0, 0.1);
}
                .tab-container {
display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom:             1pxsolid #eee;
 }
                .tabs {
flex: 1;
            overflow-x: auto;
            white-space:             nowrap;
scrollbar-width:             none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }
        .tabs::-webkit-scrollbar {
display: none; /*             Chrome, Safari, Opera */
        }
        .tab {
display:             inline-block;
padding: 5px 12px;
            margin: 0 5px;
            border-radius: 15px;
            font-size: 14px;
            color: #666;
        }
                    .tab.active{
 background-color:             #1890ff;
color: white;
            }
                .action-buttons {
display: flex;
padding: 0 10px;
}
                                        .action-btn {
padding: 5px;
            color: #666;
            font-size: 16px;
        }
            /* 内容区域 */
                .content {
margin-top: 50px;             /*顶部标签栏高度 */
 padding: 10px;
            }
        /* 库存统计 */
                .inventory-stats {
display: flex;
            justify-content: space-between;
            background-color:             white;
border-radius:             8px;
padding: 12px;
            margin-bottom: 15px;
            box-shadow: 0 1px             3px rgba(0, 0, 0, 0.1);
}
                .stat-item {
display: flex;
            flex-direction:             column;
align-items: center;
            flex: 1;
        }
                    .stat-value {
font-size: 18px;
            font-weight: bold;
            color: #1890ff;
        }
                    .stat-label {
font-size: 12px;
            color: #666;
            margin-top: 3px;
            }
        /* 筛选工具栏 */
                .filter-toolbar {
display: flex;
            margin-bottom: 15px;
            background-color:             white;
border-radius:             8px;
padding: 10px;
            box-shadow: 0 1px             3px rgba(0, 0, 0, 0.1);
}
                .filter-btn {
flex: 1;
            display: flex;
            align-items: center;
            justify-content:             center;
padding: 8px 5px;
            font-size: 13px;
            color: #666;
            border-right: 1px             solid#eee;
 }
                .filter-btn:last-child {
border-right: none;
            }
                .filter-btn i {
margin-right: 5px;
            }
                .filter-btn.active{
 color: #1890ff;
            }
        /* 饰品列表 */
                .item-list {
display: flex;
            flex-wrap: wrap;
            margin: 0 -5px;
        }
                    .item-card {
width: calc(50% - 10px);
            margin: 5px;
            background-color:             white;
border-radius:             8px;
overflow: hidden;
            box-shadow: 0 1px             3px rgba(0, 0, 0, 0.1);
position: relative;
        }
                    .item-checkbox {
position: absolute;
            top: 5px;
            left: 5px;
            z-index: 2;
            width: 18px;
            height: 18px;
            accent-color: #1890ff;
        }
        .item-image {
            position: relative;
            width: 100%;
            padding-top:             56.25%; /* 16:9 宽高比 */
background-color:             #f0f0f0;
overflow: hidden;
        }
                    .item-image img {
position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
object-fit: cover;
                        }
                .item-info {
padding: 10px;
        }
                    .item-name {
font-size: 14px;
font-weight: bold;
                        margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
                    .item-wear {
font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }
                    .item-price {
font-size: 16px;
            color: #f56c6c;
            font-weight: bold;
        }
            /* 底部操作栏 */
                .action-bar {
position: fixed;
            bottom: 60px;
            left: 0;
            right: 0;
            display: flex;
            background-color: white;
            padding: 10px;
            border-top: 1px solid #eee;
            z-index: 99;
            box-shadow: 0             -1px4px rgba(0, 0, 0,  0.1);
}
                .action-btn {
flex: 1;
display: flex;
            align-items: center;
                        justify-content:             center;
padding: 8px;
            background-color:             #1890ff;
color: white;
            border-radius:             20px;
margin: 0 5px;
            font-size: 14px;
        }
                    .action-btn i {
margin-right: 5px;
        }
                    .action-btn.secondary {
background-color:             #f0f0f0;
color: #666;
        }
            /* 底部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;
        }
            /* 编辑模式样式 */
                .edit-mode .item-card {
opacity: 0.7;
            }
                .edit-mode .item-card.selected{
 opacity: 1;
            border: 2px solid             #1890ff;
}
        </style>
    </head>
<body>
    <!--顶部标签栏 -->
 <div class="header">
    <div         class="tab-container">
<div class="tabs">
            <span                 class="tab">全部</span>
<span                 class="tabactive">武器</span>
 <span                 class="tab">手套</span>
<span                 class="tab">刀</span>
<span                 class="tab">贴纸</span>
<span                 class="tab">音乐盒</span>
<span                 class="tab">探员</span>
<span                 class="tab">收藏品</span>
<span                 class="tab">布章</span>
<span                 class="tab">涂鸦</span>
</div>
            <div             class="action-buttons">
<div                 class="action-btn" id="edit-btn"><i class="bi bi-pencil"></i></div>
</div>
            </div>
        </div>
        <!--内容区域 -->
 <div class="content">
            <!--库存统计 -->
 <div         class="inventory-stats">
<div class="stat-item">
                <div             class="stat-value">42</div>
<div                 class="stat-label">饰品数量</div>
</div>
            <div class="stat-item">
            <div                 class="stat-value">¥ 12,345</div>
<div                 class="stat-label">库存总价</div>
</div>
            <div             class="stat-item">
<div                 class="stat-value">¥ 1,234</div>
<div                 class="stat-label">7日涨幅</div>
</div>
            </div>
                
        <!--筛选工具栏 -->
 <div class="filter-toolbar">
        <div             class="filter-btn active">
<i class="bi                 bi-funnel"></i> 筛选
</div>
            <div class="filter-btn">
            <i class="bi                 bi-arrow-down-up"></i> 排序
</div>
            <div             class="filter-btn">
<i class="bi                 bi-search"></i> 搜索
</div>
            </div>
                
        <!--饰品列表 -->
 <div         class="item-list"id="item-list">
             <!--示例饰品卡片 - 实际应用中应该使用循环生成 -->
            <div class="item-card">
 <input                 type="checkbox" class="item-checkbox">
<div class="item-image">
                <img                     src="images/AWP.jpg" alt="饰品图片">
</div>
                <div                 class="item-info">
<div                     class="item-name">AWP | 二西莫夫 (崭新出厂)</div>
<div                     class="item-wear">磨损: 0.012345</div>
<div                     class="item-price">¥ 1,299.00</div>
</div>
                </div>
            <div class="item-card">
            <input                 type="checkbox" class="item-checkbox">
<div class="item-image">
                <img                     src="images/A4.jpg" alt="饰品图片">
                </div>
<div                 class="item-info">
<div                     class="item-name">M4A4 | 二西莫夫 (久经沙场)</div>
<div                     class="item-wear">磨损: 0.234567</div>
<div                     class="item-price">¥ 599.00</div>
</div>
                </div>
            <div class="item-card">
            <input                 type="checkbox" class="item-checkbox">
<div class="item-image">
                <img                     src="images/AK2.jpg" alt="饰品图片">
</div>
                <div class="item-info">
                <div                     class="item-name">AK-47 | 燃料喷射器 (略有磨损)</div>
<div                     class="item-wear">磨损: 0.123456</div>
<div                     class="item-price">¥ 899.00</div>
</div>
                </div>
            <div             class="item-card">
<input                 type="checkbox" class="item-checkbox">
<div                 class="item-image">
<img                     src="images/Glove.jpg" alt="饰品图片">
</div>
                <div                 class="item-info">
<div                     class="item-name">手套 | 深红之网 (战痕累累)</div>
<div                     class="item-wear">磨损: 0.456789</div>
<div                     class="item-price">¥ 2,499.00</div>
</div>
                </div>
            <div             class="item-card">
<input                 type="checkbox" class="item-checkbox">
                <div class="item-image">
                    <img src="images/Knife.jpg" alt="饰品图片">
</div>
                <div                 class="item-info">
<div                     class="item-name">蝴蝶刀 | 渐变大理石 (崭新出厂)</div>
<div                     class="item-wear">磨损: 0.001234</div>
<div                     class="item-price">¥ 5,999.00</div>
</div>
                </div>
            <div class="item-card">
            <input                 type="checkbox" class="item-checkbox">
<div                 class="item-image">
<img                     src="images/Degou.jpg" alt="饰品图片">
</div>
                <div                 class="item-info">
<div                     class="item-name">沙漠之鹰 | 印花集 (崭新出厂)</div>
<div                     class="item-wear">磨损: 0.012345</div>
<div                     class="item-price">¥ 399.00</div>
</div>
                </div>
            </div>
        </div>
        
    <!--底部操作栏 (编辑模式时显示) -->
 <div class="action-bar"     id="action-bar" style="display: none;">
<div class="action-btn secondary">
        <i class="bi             bi-x-circle"></i> 取消
</div>
        <div class="action-btn">
        <i class="bi             bi-upload"></i> 上架
</div>
        <div class="action-btn">
        <i class="bi             bi-tags"></i> 批量操作
</div>
        </div>
        
    <!-- 底部Tab栏 -->
<div class="tab-bar">
    <div class="tab-item ">
        <a href="home.html">
            <i class="bi bi-house"></i>
            <span>首页</span>
        </a>
    </div>
    <div class="tab-item">
        <a href="discover.html">
            <i class="bi bi-compass"></i>
            <span>发现</span>
        </a>
    </div>
    <div class="tab-item active">
        <a href="Kucun.html">
            <i class="bi bi-bag"></i>
            <span>库存</span>
        </a>
    </div>
    <div class="tab-item">
        <a href="Dianpu.html">
            <i class="bi bi-shop"></i>
            <span>店铺</span>
        </a>
    </div>
    <div class="tab-item">
        <a href="WOde.html">
            <i class="bi bi-person"></i>
            <span>我</span>
        </a>
    </div>
</div>
        
<script>
            document.addEventListener('DOMContentLoaded', function() {
// 切换标签
            const tabs =             document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
});
});
                                        
// 切换底部Tab
            const tabItems =             document.querySelectorAll('.tab-item');
            tabItems.forEach(item => {
                item.addEventListener('click', function() {
                    tabItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
});
});
            
                            // 编辑模式切换
            const editBtn =             document.getElementById('edit-btn');
const actionBar =             document.getElementById('action-bar');
const itemList =             document.getElementById('item-list');
let editMode = false;
            
                        editBtn.addEventListener('click', function() {
editMode =                 !editMode;
                
if (editMode) {
                                    itemList.classList.add('edit-mode');
                    actionBar.style.display= 'flex';
                     editBtn.innerHTML= '<i class="bi bi-check2"></i>';
 } else {
                                    itemList.classList.remove('edit-mode');
                    actionBar.style.display= 'none';
                     editBtn.innerHTML= '<i class="bi  bi-pencil"></i>';
                    
// 取消所有选中状态
                                        document.querySelectorAll('.item-checkbox').forEach(checkbox => {
                        checkbox.checked = false;
                        checkbox.closest('.item-card').classList.remove('selected');
});
                }
            });
            
// 选择饰品
                                            document.querySelectorAll('.item-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
if                     (this.checked) {
                        this.closest('.item-card').classList.add('selected');
} else {
                                            this.closest('.item-card').classList.remove('selected');
                    }
                });
            });
            
            // 点击饰品卡片
            document.querySelectorAll('.item-card').forEach(card => {
                card.addEventListener('click', function(e) {
if                     (editMode&&  !e.target.classList.contains('item-checkbox')) {
const checkbox =                         this.querySelector('.item-checkbox');
                        checkbox.checked = !checkbox.checked;
                        checkbox.dispatchEvent(new Event('change'));
}
                    });
});
});
</script>
</body>
</html>