| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>动画商城</title>
- <link rel="stylesheet" href="../../css/store/store.css" />
- <link rel="stylesheet" href="../../css/store/item.css" />
- </head>
- <body>
- <div class="store-root">
- <div class="store-container">
- <!-- 搜索栏 -->
- <div class="store-header">
- <div class="search-bar">
- <input
- type="text"
- id="searchInput"
- class="search-input"
- placeholder="搜索资源..."
- />
- <button class="search-button" id="searchButton">
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM18 18l-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- </button>
- </div>
- </div>
- <!-- 分类栏 -->
- <div class="category-bar" id="categoryBar">
- <button class="category-item active" data-category="">全部</button>
- <!-- 分类按钮将通过 JavaScript 动态加载 -->
- </div>
- <!-- 资源网格 -->
- <div class="resources-grid" id="resourcesGrid">
- <!-- 资源项将通过 JavaScript 动态加载 -->
- </div>
- <!-- 空状态 -->
- <div class="empty-state" id="emptyState" style="display: none;">
- <div class="empty-icon">📦</div>
- <div class="empty-text">暂无资源</div>
- </div>
- <!-- 加载状态 -->
- <div class="loading-state" id="loadingState" style="display: none;">
- <div class="loading-spinner"></div>
- <div class="loading-text">加载中...</div>
- </div>
- </div>
- </div>
- <!-- 动画预览弹窗 -->
- <div class="preview-modal" id="previewModal" style="display: none;">
- <div class="preview-modal-content">
- <div class="preview-modal-header">
- <h3 class="preview-modal-title" id="previewTitle">动画预览</h3>
- <button class="preview-modal-close" id="previewClose">
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
- </svg>
- </button>
- </div>
- <div class="preview-modal-body">
- <div class="preview-animation-container">
- <img id="previewAnimationImage" class="preview-animation-image" alt="动画预览" />
- </div>
- </div>
- <div class="preview-modal-footer">
- <div class="fps-control">
- <label class="fps-label">播放速度</label>
- <input type="range" id="fpsSlider" class="fps-slider" min="1" max="30" value="8" step="1">
- <span class="fps-display" id="fpsDisplay">8 FPS</span>
- </div>
- </div>
- </div>
- </div>
- <script src="../../js/store/item.js"></script>
- <script src="../../js/store/store.js"></script>
- </body>
- </html>
|
