first commit

src/pages/checkout/index.scss

@@ -0,0 +1,90 @@
+.checkout-page {
+  padding: 0 24px 24px;
+}
+
+.back-btn {
+  font-size: 40px;
+  padding: 10px;
+}
+
+/* 画布展示区 */
+.checkout-canvas {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+}
+
+.canvas-area {
+  position: relative;
+  overflow: hidden;
+  background: rgba(0,0,0,0.03);
+  border: 2px dashed var(--line-star);
+}
+
+.checkout-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* 商品信息 */
+.checkout-info {
+  padding: 24px;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  border-bottom: 1px dashed rgba(0,0,0,0.06);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 28px;
+  color: var(--text-secondary);
+}
+
+.info-value {
+  font-size: 28px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.total-row {
+  padding-top: 24px;
+  margin-top: 8px;
+}
+
+.info-total {
+  font-size: 40px;
+  font-weight: 800;
+  color: var(--accent-pink);
+}
+
+/* 底部操作 */
+.checkout-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-card);
+  border-top: var(--line-card);
+  padding: 20px 32px calc(20px + env(safe-area-inset-bottom));
+  display: flex;
+  gap: 24px;
+  z-index: 500;
+}
+
+.checkout-actions .btn-outline,
+.checkout-actions .btn-gradient {
+  flex: 1;
+  text-align: center;
+}