r41/buy.html · 约 3694 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<title>购买课程</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="wrap">
11<div class="header">
12 <div class="top"><span class="role">学生端</span><span style="margin-left:auto;font-size:12px;opacity:.85">驰旭教育</span></div>
13 <h1>购买课程</h1>
14 <div class="sub">确认订单信息</div>
15</div>
16<div class="card" style="margin-top:12px;overflow:hidden">
17 <div class="cover" style="height:120px;background:linear-gradient(135deg,#2563eb,#1e3a8a);display:flex;align-items:center;justify-content:center;font-size:44px;color:#fff">💻</div>
18 <div style="padding:14px 16px">
19 <div style="font-size:16px;font-weight:700">前端工程师全栈实战训练营</div>
20 <div style="font-size:12px;color:var(--muted);margin-top:6px">讲师 李老师 · 42 课时 · 12 章 · 有效期 2 年</div>
21 <div style="margin-top:10px"><span class="price" style="font-size:22px">¥199</span><span class="price-old">¥499</span><span class="tag no" style="margin-left:8px">4 折</span></div>
22 </div>
23</div>
24<div class="section-title"><span>优惠券</span><span class="more">可用 3 张</span></div>
25<div class="list">
26 <div class="row"><div class="avatar" style="background:linear-gradient(135deg,#f43f5e,#be123c)">🎟️</div><div class="info"><div class="t">新人立减券 ¥30</div><div class="s">满 ¥99 可用 · 有效期至 07-31</div></div><span class="tag ok">已选</span></div>
27 <div class="row"><div class="avatar" style="background:linear-gradient(135deg,#f59e0b,#b45309)">🎟️</div><div class="info"><div class="t">编程课专属券 ¥20</div><div class="s">满 ¥150 可用 · 有效期至 08-15</div></div><span class="tag gray">未用</span></div>
28</div>
29<div class="section-title"><span>支付方式</span></div>
30<div class="list">
31 <div class="row"><div class="avatar" style="background:linear-gradient(135deg,#10b981,#047857)">💰</div><div class="info"><div class="t">余额支付</div><div class="s">当前余额 ¥260.00</div></div><span class="tag ok">✓</span></div>
32 <div class="row"><div class="avatar" style="background:linear-gradient(135deg,#2563eb,#1e3a8a)">💳</div><div class="info"><div class="t">在线支付</div><div class="s">支持储蓄卡 / 信用卡</div></div><span class="tag gray"></span></div>
33</div>
34<div class="stat-line" style="background:var(--card);margin:12px 16px 0;border-radius:16px 16px 0 0;border-top:none"><span>课程原价</span><span>¥499.00</span></div>
35<div class="stat-line" style="background:var(--card);margin:0 16px"><span>限时折扣</span><span style="color:#16a34a">−¥300.00</span></div>
36<div class="stat-line" style="background:var(--card);margin:0 16px"><span>优惠券</span><span style="color:#16a34a">−¥30.00</span></div>
37<div class="stat-line" style="background:var(--card);margin:0 16px 0;border-radius:0 0 16px 16px"><span>应付金额</span><b style="font-size:16px">¥169.00</b></div>
38<a class="btn full" href="video.html" onclick="this.textContent='✓ 支付成功，正在进入课程…';return true;">确认支付 ¥169.00</a>
39<div class="bottom-nav"><a class="nav-item" href="index.html"><span class="icon">🏠</span>首页</a><a class="nav-item active" href="courses.html"><span class="icon">📚</span>课程</a><a class="nav-item" href="video.html"><span class="icon">▶️</span>学习</a><a class="nav-item" href="notes.html"><span class="icon">📝</span>笔记</a></div><div class="safe-bottom"></div>
40</div>
41
42</body>
43</html>