refactor: 拆分小程序 vue 结构

src/pages/trade/checkout/styles/base.scss

@@ -0,0 +1,155 @@
+@import '../../../../styles/variables';
+
+.checkout-page {
+  min-height: 100vh;
+  padding: 14px 16px 100px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  background: $bg;
+}
+
+.checkout-page__empty-card {
+  background: $card;
+  border-radius: $r-lg;
+  box-shadow: $shadow-sm;
+  padding: 48px 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.checkout-page__empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: $text-3;
+}
+
+.checkout-page__empty-desc {
+  font-size: 13px;
+  color: $text-4;
+  margin-top: 6px;
+}
+
+.checkout-page__empty-btn {
+  margin-top: 20px;
+  height: 38px;
+  padding: 0 24px;
+  border-radius: 19px;
+  background: $primary;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkout-page__scene-tabs {
+  display: flex;
+  gap: 0;
+  background: $border;
+  border-radius: 10px;
+  padding: 3px;
+}
+
+.checkout-page__scene-tab {
+  flex: 1;
+  height: 32px;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 600;
+  color: $text-3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &--active {
+    background: $card;
+    color: $primary-dark;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.checkout-page__oc-card {
+  background: $card;
+  border-radius: $r-lg;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+}
+
+.checkout-page__oc-card-body {
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.checkout-page__store {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 18px;
+}
+
+.checkout-page__store-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: $r-sm;
+  background: $primary-light;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 18px;
+}
+
+.checkout-page__store-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.checkout-page__store-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: $text-1;
+  line-height: 1.3;
+}
+
+.checkout-page__store-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 3px;
+}
+
+.checkout-page__mode-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  background: $primary-lighter;
+  color: $primary-dark;
+}
+
+.checkout-page__store-hint {
+  font-size: 11px;
+  color: $text-4;
+  line-height: 1.3;
+}
+
+.checkout-page__field-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $text-1;
+  margin-bottom: 10px;
+}
+
+.checkout-page__field-gap {
+  margin-top: 10px;
+}