refactor: 拆分小程序 vue 结构

src/components/spec-popup/styles/footer.scss

@@ -0,0 +1,74 @@
+@import '../../../styles/variables';
+
+.spec-popup__footer {
+  padding: 14px 20px;
+  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
+  background: $card;
+  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-shrink: 0;
+}
+
+.spec-popup__footer-price {
+  flex: 1;
+  min-width: 0;
+}
+
+.spec-popup__footer-label {
+  font-size: 11px;
+  color: $text-4;
+  margin-bottom: 2px;
+}
+
+.spec-popup__footer-total {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.spec-popup__footer-unit {
+  font-size: 14px;
+  font-weight: 700;
+  color: $primary-dark;
+}
+
+.spec-popup__footer-value {
+  font-size: 26px;
+  font-weight: 800;
+  color: $primary-dark;
+  line-height: 1;
+}
+
+.spec-popup__footer-summary {
+  font-size: 11px;
+  color: $text-4;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.spec-popup__footer-btn {
+  height: 48px;
+  min-width: 140px;
+  padding: 0 28px;
+  border-radius: 24px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
+  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  letter-spacing: 0.3px;
+
+  &--disabled {
+    background: $text-5;
+    box-shadow: none;
+    pointer-events: none;
+  }
+}