web-learning/index.html at main · xiteral128/web-learning · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!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/style.css">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <!-- 顶部用户栏 -->
  <header class="header-top">
    <div class="container">
      <div class="user-actions">
        <a href="javascript:;" class="login-btn" id="show-login">请登录</a>
        <a href="javascript:;" class="register-btn" id="show-register">免费注册</a>
        <a href="javascript:;" class="logout-btn" id="show-logout" style="display: none;">退出登录</a>
        <a href="javascript:;" class="cart-btn" id="show-cart">
          <i class="fas fa-shopping-cart"></i> 购物车(<span class="cart-count">0</span>)
        </a>
        <a href="javascript:;" class="collect-btn" id="show-collect">
          <i class="fas fa-star"></i> 我的收藏
        </a>
      </div>
    </div>
  </header>

  <!-- 登录弹窗（独立悬浮层优化） -->
  <div class="modal login-modal" id="login-modal">
    <div class="modal-overlay"></div>
    <div class="modal-content login-content">
      <div class="modal-header">
        <h3>用户登录</h3>
        <span class="close-btn" id="close-login">&times;</span>
      </div>
      <div class="modal-body">
        <form id="login-form">
          <div class="form-group">
            <label class="form-label">用户名</label>
            <input type="text" id="login-username" placeholder="请输入用户名" class="form-input" required>
          </div>
          <div class="form-group">
            <label class="form-label">密码</label>
            <input type="password" id="login-password" placeholder="请输入密码" class="form-input" required>
          </div>
          <div class="form-group code-group">
            <label class="form-label">验证码</label>
            <div class="code-wrap">
              <input type="text" id="login-code" placeholder="请输入验证码" class="form-input code-input" required>
              <span class="code-box" id="login-code-box">8888</span>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" id="do-login" class="modal-btn">登录</button>
      </div>
    </div>
  </div>

  <!-- 注册弹窗（独立悬浮层优化） -->
  <div class="modal register-modal" id="register-modal">
    <div class="modal-overlay"></div>
    <div class="modal-content register-content">
      <div class="modal-header">
        <h3>用户注册</h3>
        <span class="close-btn" id="close-register">&times;</span>
      </div>
      <div class="modal-body">
        <form id="register-form">
          <div class="form-group">
            <label class="form-label">用户名</label>
            <input type="text" id="reg-username" placeholder="请设置用户名" class="form-input" required>
          </div>
          <div class="form-group">
            <label class="form-label">密码</label>
            <input type="password" id="reg-password" placeholder="请设置密码" class="form-input" required>
          </div>
          <div class="form-group">
            <label class="form-label">确认密码</label>
            <input type="password" id="reg-repassword" placeholder="请再次输入密码" class="form-input" required>
          </div>
          <div class="form-group code-group">
            <label class="form-label">验证码</label>
            <div class="code-wrap">
              <input type="text" id="reg-code" placeholder="请输入验证码" class="form-input code-input" required>
              <span class="code-box" id="reg-code-box">6666</span>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" id="do-register" class="modal-btn">注册</button>
      </div>
    </div>
  </div>

  <!-- 导航栏 -->
  <nav class="nav-main">
    <div class="container">
      <div class="logo">
        <img src="https://img.alicdn.com/tfs/TB1NwmBEL9TBuNjy1zbXXXpepXa-240-80.png" alt="淘宝logo">
      </div>
      <div class="category-nav">
        <ul>
          <li class="active" data-cate="all">首页</li>
          <li data-cate="women">女装</li>
          <li data-cate="men">男装</li>
          <li data-cate="digital">数码</li>
          <li data-cate="home">家居</li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 轮播图 -->
  <div class="banner-slider">
    <div class="slider-wrapper">
      <div class="slider-item active">
        <img src="img/轮播图6.avif" alt="轮播图1">
      </div>
      <div class="slider-item">
        <img src="img/轮播图7.avif" alt="轮播图2">
      </div>
      <div class="slider-item">
        <img src="img/轮播图8.avif" alt="轮播图3">
      </div>
    </div>
    <button class="slider-btn prev-btn"><i class="fas fa-chevron-left"></i></button>
    <button class="slider-btn next-btn"><i class="fas fa-chevron-right"></i></button>
    <div class="slider-indicator">
      <span class="active" data-index="0"></span>
      <span data-index="1"></span>
      <span data-index="2"></span>
    </div>
  </div>

  <!-- 商品展示区 -->
  <div class="goods-section">
    <div class="container">
      <h2 class="section-title">商品列表</h2>
      <div class="goods-list" id="goods-list">
        <!-- 商品动态渲染 -->
      </div>
    </div>
  </div>

  <!-- 购物车弹窗 -->
  <div class="modal" id="cart-modal">
    <div class="modal-overlay"></div>
    <div class="modal-content cart-content">
      <span class="close-btn" id="close-cart">&times;</span>
      <h3>我的购物车</h3>
      <div class="cart-empty" id="cart-empty">
        <i class="fas fa-shopping-cart"></i>
        <p>购物车空空如也~ 快去添加商品吧！</p>
      </div>
      <div class="cart-list" id="cart-list">
        <!-- 购物车商品 -->
      </div>
      <div class="cart-footer" id="cart-footer">
        <div class="total-price">合计：¥<span id="total-price">0.00</span></div>
        <button class="checkout-btn" id="do-checkout">去结算</button>
      </div>
    </div>
  </div>

  <!-- 收藏弹窗 -->
  <div class="modal" id="collect-modal">
    <div class="modal-overlay"></div>
    <div class="modal-content cart-content">
      <span class="close-btn" id="close-collect">&times;</span>
      <h3>我的收藏</h3>
      <div class="cart-empty" id="collect-empty">
        <i class="fas fa-star"></i>
        <p>暂无收藏商品~ 快去收藏喜欢的商品吧！</p>
      </div>
      <div class="cart-list" id="collect-list">
        <!-- 收藏商品 -->
      </div>
    </div>
  </div>

  <!-- 结算成功弹窗 -->
  <div class="modal" id="success-modal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
      <span class="close-btn" id="close-success">&times;</span>
      <div class="success-icon">
        <i class="fas fa-check-circle"></i>
      </div>
      <h3>结算成功！</h3>
      <p>您的订单已提交，订单号：<span id="order-no">ORD20251224001</span></p>
      <button id="back-home">返回首页</button>
    </div>
  </div>

  <script src="js/main.js"></script>
</body>
</html>