样式统一

Web/src/components/PopupContainer.vue

@@ -0,0 +1,117 @@
+<template>
+  <van-popup
+    v-model:show="visible"
+    position="bottom"
+    :style="{ height: height }"
+    round
+    :closeable="closeable"
+  >
+    <div class="popup-container">
+      <!-- 头部区域 -->
+      <div class="popup-header-fixed">
+        <h3 class="popup-title">{{ title }}</h3>
+        
+        <!-- 子标题/统计信息 -->
+        <div v-if="subtitle || hasActions" class="header-stats">
+          <span v-if="subtitle" class="stats-text" v-html="subtitle" />
+          <!-- 额外操作插槽 -->
+          <slot name="header-actions"></slot>
+        </div>
+      </div>
+
+      <!-- 内容区域（可滚动） -->
+      <div class="popup-scroll-content">
+        <slot></slot>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  height: {
+    type: String,
+    default: '80%'
+  },
+  closeable: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const slots = useSlots()
+
+// 双向绑定
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+// 判断是否有操作按钮
+const hasActions = computed(() => !!slots['header-actions'])
+</script>
+
+<style scoped>
+.popup-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup-header-fixed {
+  flex-shrink: 0;
+  padding: 16px;
+  background-color: var(--van-background-2, #f7f8fa);
+  border-bottom: 1px solid var(--van-border-color, #ebedf0);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.popup-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+  text-align: center;
+  color: var(--van-text-color, #323233);
+}
+
+.header-stats {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.stats-text {
+  margin: 0;
+  font-size: 14px;
+  color: var(--van-text-color-2, #646566);
+  flex: 1;
+  text-align: center;
+}
+
+.popup-scroll-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+</style>