|
1 | 1 | <template> |
2 | 2 | <div class="pricing-container"> |
3 | 3 | <h1 class="pricing-title">选择适合您的版本</h1> |
| 4 | + <p class="pricing-subtitle"> |
| 5 | + 此仓库作为模板库公开,任何个人或企业均可自由使用!<br> |
| 6 | + 专业版是社区共建计划的一部分,您的支持将加速功能升级,推动全社区技术架构演进 |
| 7 | + </p> |
4 | 8 | <div class="pricing-cards"> |
5 | 9 | <!-- 开源版 --> |
6 | 10 | <div class="pricing-card"> |
|
10 | 14 | <p class="card-description">{{ plans.openSource.description }}</p> |
11 | 15 | </div> |
12 | 16 | <div class="price-section"> |
13 | | - <div class="current-price">{{ plans.openSource.price.current }}</div> |
| 17 | + <div class="current-price">{{ plans.openSource.price.current }} <span class="billing-cycle">/ 年</span> |
| 18 | + </div> |
14 | 19 | <div v-if="plans.openSource.price.original" class="original-price"> |
15 | 20 | <del>{{ plans.openSource.price.original }}</del> |
16 | 21 | </div> |
|
22 | 27 | </li> |
23 | 28 | </ul> |
24 | 29 | </div> |
25 | | - <button class="cta-button">立即使用</button> |
| 30 | + <button class="cta-button" |
| 31 | + @click="openSponsorLink('/fastapi_best_architecture_docs/backend/summary/quick-start.html')"> |
| 32 | + 立即使用 |
| 33 | + </button> |
26 | 34 | </div> |
27 | 35 |
|
28 | 36 | <!-- 专业版 --> |
|
34 | 42 | <p class="card-description">{{ plans.professional.description }}</p> |
35 | 43 | </div> |
36 | 44 | <div class="price-section"> |
37 | | - <div class="current-price">{{ plans.professional.price.current }} <span class="billing-cycle">/ 年</span></div> |
| 45 | + <div class="current-price">{{ plans.professional.price.current }} <span class="billing-cycle">/ 年</span> |
| 46 | + </div> |
38 | 47 | <div v-if="plans.professional.price.original" class="original-price"> |
39 | 48 | <del>{{ plans.professional.price.original }}</del> |
40 | 49 | </div> |
|
46 | 55 | </li> |
47 | 56 | </ul> |
48 | 57 | </div> |
49 | | - <button class="cta-button primary" @click="goSponsor">立即购买</button> |
| 58 | + <button class="cta-button primary" @click="openSponsorLink(sponsorUrl + '#有偿赞助')">立即购买</button> |
50 | 59 | </div> |
51 | 60 |
|
52 | 61 | <!-- 企业版 --> |
|
57 | 66 | <p class="card-description">{{ plans.enterprise.description }}</p> |
58 | 67 | </div> |
59 | 68 | <div class="price-section"> |
60 | | - <div class="current-price">{{ plans.enterprise.price.current }} <span class="billing-cycle">/ 年</span></div> |
| 69 | + <div class="current-price">{{ plans.enterprise.price.current }} <span class="billing-cycle">/ 年</span> |
| 70 | + </div> |
61 | 71 | <div v-if="plans.enterprise.price.original" class="original-price"> |
62 | 72 | <del>{{ plans.enterprise.price.original }}</del> |
63 | 73 | </div> |
|
69 | 79 | </li> |
70 | 80 | </ul> |
71 | 81 | </div> |
72 | | - <button class="cta-button" @click="goSponsor">立即购买</button> |
| 82 | + <button class="cta-button">无此方案</button> |
73 | 83 | </div> |
74 | 84 | </div> |
75 | 85 | </div> |
|
78 | 88 | <script setup> |
79 | 89 | import { plans } from "../data/price"; |
80 | 90 | import { openSponsorLink, sponsorUrl } from "../data/sponsors"; |
81 | | -
|
82 | | -const goSponsor = () => { |
83 | | - openSponsorLink(sponsorUrl + '#有偿赞助') |
84 | | -} |
85 | 91 | </script> |
86 | 92 |
|
87 | 93 | <style scoped> |
| 94 | +.pricing-subtitle { |
| 95 | + text-align: center; |
| 96 | + margin-bottom: 2.5rem; |
| 97 | + color: var(--vp-c-text-2); |
| 98 | +} |
| 99 | +
|
88 | 100 | .pricing-container { |
89 | | - max-width: 1200px; |
90 | 101 | margin: 0 auto; |
91 | 102 | padding: 2rem 0; |
92 | 103 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
93 | 104 | } |
94 | 105 |
|
95 | 106 | .pricing-title { |
96 | 107 | text-align: center; |
97 | | - margin-bottom: 3rem; |
| 108 | + margin-bottom: 2rem; |
98 | 109 | } |
99 | 110 |
|
100 | 111 | .pricing-cards { |
@@ -134,15 +145,10 @@ const goSponsor = () => { |
134 | 145 | } |
135 | 146 |
|
136 | 147 | .card-header { |
137 | | - margin-bottom: 1.5rem; |
| 148 | + margin: -1rem 0 1.5rem; |
138 | 149 | text-align: center; |
139 | 150 | } |
140 | 151 |
|
141 | | -.card-header h2 { |
142 | | - font-size: 1.5rem; |
143 | | - margin-bottom: 0.5rem; |
144 | | -} |
145 | | -
|
146 | 152 | .card-description { |
147 | 153 | font-size: 0.9rem; |
148 | 154 | color: var(--vp-c-text-2); |
|
0 commit comments