1

src/components/common/MethodUnavailableNotice.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    message: string
+  }>(),
+  {
+    title: '该服务不适用当前计价方法'
+  }
+)
+</script>
+
+<template>
+  <div
+    class="flex h-full min-h-0 w-full flex-1 items-center justify-center bg-[radial-gradient(circle_at_top,_rgba(220,38,38,0.18),rgba(0,0,0,0.03)_46%,transparent_72%)] p-6"
+  >
+    <div class="w-full max-w-xl rounded-2xl border border-red-300/85 bg-white/90 px-8 py-10 text-center shadow-[0_18px_38px_-22px_rgba(153,27,27,0.6)] backdrop-blur">
+      <p class="text-lg font-semibold tracking-wide text-neutral-900">{{ props.title }}</p>
+      <p class="mt-2 text-sm leading-6 text-red-700">{{ props.message }}</p>
+    </div>
+  </div>
+</template>