first commit

2026-07-27 14:54:21 +08:00
commit 4d086758e8
161 changed files with 63776 additions and 0 deletions
@@ -0,0 +1,226 @@
+.product-page {
+  padding: 0 24px 24px;
+  padding-bottom: calc(24px + 160px); /* 为底部 action-bar 留空 */
+}
+
+/* 返回按钮 */
+.back-btn {
+  font-size: 40px;
+  padding: 10px;
+}
+
+/* Hero 轮播 */
+.hero-section {
+  margin-top: 20px;
+}
+
+.hero-swiper {
+  height: 400rpx;
+}
+
+.hero-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.hero-icon {
+  font-size: 100px;
+  margin-bottom: 16px;
+}
+
+.hero-name {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.hero-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* 基本信息 */
+.info-section {
+  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-price {
+  font-size: 40px;
+  font-weight: 800;
+  color: var(--accent-pink);
+}
+
+.info-value {
+  font-size: 28px;
+  color: var(--text-primary);
+}
+
+/* 详细介绍 */
+.detail-section {
+  padding: 24px;
+}
+
+.detail-text {
+  font-size: 28px;
+  color: var(--text-secondary);
+  line-height: 1.8;
+}
+
+/* 底部操作栏 */
+.action-bar .price-summary {
+  flex-shrink: 0;
+}
+
+.summary-label {
+  font-size: 22px;
+  color: var(--text-secondary);
+  display: block;
+}
+
+.summary-price {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--accent-pink);
+}
+
+/* 弹窗 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 48px;
+}
+
+.modal-card {
+  width: 100%;
+  max-width: 600px;
+  padding: 40px;
+}
+
+.modal-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-align: center;
+  margin-bottom: 24px;
+  display: block;
+}
+
+.modal-product {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.modal-icon {
+  font-size: 48px;
+}
+
+.modal-name {
+  font-size: 32px;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.quantity-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 32px;
+}
+
+.qty-label {
+  font-size: 28px;
+  color: var(--text-secondary);
+}
+
+.qty-control {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.qty-btn {
+  width: 60px;
+  height: 60px;
+  border-radius: 12px;
+  background: var(--bg-input);
+  border: var(--line-card);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.qty-num {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--text-primary);
+  min-width: 48px;
+  text-align: center;
+}
+
+.modal-total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 32px;
+  padding-top: 24px;
+  border-top: 1px dashed rgba(0,0,0,0.06);
+}
+
+.total-label {
+  font-size: 28px;
+  color: var(--text-secondary);
+}
+
+.total-price {
+  font-size: 36px;
+  font-weight: 800;
+  color: var(--accent-pink);
+}
+
+.modal-actions {
+  display: flex;
+  gap: 20px;
+}
+
+.modal-actions .btn-outline,
+.modal-actions .btn-gradient {
+  flex: 1;
+  padding: 20px 0;
+}