blob: a38cd0aed731c0c5599a1e12f2b2205ca81eb66e [file] [log] [blame]
LaoeGaoci388f7762025-05-29 22:24:35 +08001.reward-detail {
2 max-width: 1200px;
3 margin: 0 auto;
4 padding: 2rem;
5
6 // 把标题和用户信息、发布时间都放到同一个 flex 容器里
7 .reward-header {
8 display: flex;
9 justify-content: space-between;
10 align-items: center;
11 margin-bottom: 2rem;
12
13 h1 {
14 order: 1;
15 font-size: 2rem;
16 color: #1a202c;
17 margin: 0;
18 }
19
20 .post-time {
21 order: 3;
22 color: #718096;
23 font-size: 0.875rem;
24 }
25 }
26
27 // 贴子正文,文本在左,图片 + 价格 + 按钮在右
28 .reward-content {
29 display: flex;
30 flex-direction: row;
31 align-items: flex-start;
32 margin-top: 1rem;
33
34
35 .reward-info-container {
36 display: flex;
37 flex-direction: column;
38 gap: 1rem;
39 width: 50%;
40
41 .user-info {
42 display: flex;
43 align-items: center;
44 gap: 1rem;
45 }
46
47 // 文本部分
48 .reward-info {
49
50 p {
51 font-size: 1rem;
52 line-height: 1.75;
53 color: #4a5568;
54 margin-bottom: 2rem;
55 }
56 }
57 }
58
59
60
61
62 // 右侧媒体区:图片、价格、提交按钮
63 .reward-media {
64 display: flex;
65 width: 50%;
66 flex-direction: column;
67 justify-content: flex-end;
68 align-items: flex-end;
69 gap: 2rem;
70
71 img {
72 margin-top: 1rem;
73 border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
74 }
75
76 .reward-actions {
77 min-width: 120px;
78 display: flex;
79 flex-direction: row;
80 gap: 1rem;
81 margin-bottom: 2rem;
82
83 .reward-price {
84 font-size: 2rem;
85 font-weight: bold;
86 color: #2c3e50;
87 margin-bottom: 0.5rem;
88 }
89
90 }
91 }
92 }
93}