chore: initial commit

components/PopupHeader.vue

@@ -0,0 +1,28 @@
+<template>
+	<view class="popup-header">
+		<view class="popup-header-spacer" aria-hidden="true"></view>
+		<text class="popup-header-title" :class="{ 'popup-header-title-danger': tone === 'danger' }">{{ title }}</text>
+		<button class="popup-header-close" :aria-label="`关闭${title}`" @tap="$emit('close')">
+			<uni-icons type="closeempty" color="#52657c" size="24" />
+		</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		emits: ['close'],
+		props: {
+			title: { type: String, required: true },
+			tone: { type: String, default: 'default' }
+		}
+	}
+</script>
+
+<style scoped>
+	.popup-header { display: grid; min-height: 48px; align-items: center; grid-template-columns: 48px minmax(0, 1fr) 48px; }
+	.popup-header-title { display: block; color: #1f2937; font-size: 17px; font-weight: 700; line-height: 24px; text-align: center; }
+	.popup-header-title-danger { color: #b42318; }
+	.popup-header-close { display: flex; width: 48px; height: 48px; margin: 0; padding: 0; align-items: center; justify-content: center; border: 0; border-radius: 8px; line-height: 48px; background: transparent; }
+	.popup-header-close::after { border: 0; }
+	.popup-header-close:active { background: #eef2f6; }
+</style>