增加功能报价

backend/src/views/locked/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="locked-container">
+    <div class="locked-content">
+      <div class="locked-icon">
+        <i class="fa-solid fa-lock"></i>
+      </div>
+      <div class="locked-message">功能未开通</div>
+      <div class="locked-desc">
+        当前套餐未包含<template v-if="moduleName">「{{ moduleName }}」</template>功能模块，请联系管理员升级套餐后使用。
+      </div>
+      <div class="locked-actions">
+        <a href="javascript:void(0)" class="back-home-btn" @click.prevent="backToHome">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+
+const moduleName = computed(() => route.meta?.title || "");
+
+const backToHome = () => {
+  router.push("/home");
+};
+</script>
+
+<style scoped>
+.locked-container {
+  min-height: 100%;
+  background: linear-gradient(120deg, #e0e7ff 0%, #fce7f3 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+}
+
+.locked-content {
+  background: #fff;
+  padding: 48px 48px 40px;
+  border-radius: 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  text-align: center;
+  max-width: 460px;
+  animation: float-in 0.6s cubic-bezier(0.7, 0.13, 0.45, 0.81) both;
+}
+
+.locked-icon {
+  width: 88px;
+  height: 88px;
+  margin: 0 auto 20px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  color: #f59e0b;
+}
+
+.locked-message {
+  font-size: 24px;
+  color: #222;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.locked-desc {
+  font-size: 15px;
+  color: #888;
+  margin-bottom: 28px;
+  line-height: 1.6;
+}
+
+.locked-actions {
+  margin-bottom: 4px;
+}
+
+.back-home-btn {
+  display: inline-block;
+  background: linear-gradient(90deg, #3973ff 0%, #6a82fb 100%);
+  color: #fff;
+  padding: 10px 36px;
+  border-radius: 24px;
+  font-size: 15px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: opacity 0.2s;
+}
+
+.back-home-btn:hover {
+  opacity: 0.85;
+}
+
+@keyframes float-in {
+  0% {
+    transform: translateY(30px) scale(0.97);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+</style>