f

src/components/common/CertificationNotice.vue

@@ -0,0 +1,102 @@
+<template>
+  <div v-if="showNotice" class="certification-notice">
+    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 mb-6">
+      <div class="flex items-start">
+        <div class="flex-shrink-0">
+          <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+        <div class="ml-3 flex-1">
+          <h3 class="text-sm font-medium text-blue-800">
+            {{ title || '企业认证提示' }}
+          </h3>
+          <div class="mt-2 text-sm text-blue-700">
+            <p>
+              {{ description || '为了享受完整的API调用服务，请先完成企业入驻认证。完成认证即可领取额度奖励' }}
+            </p>
+          </div>
+          <div class="mt-3">
+            <router-link
+              to="/profile/certification"
+              class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+            >
+              <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              立即认证
+            </router-link>
+          </div>
+        </div>
+        <div class="ml-auto pl-3">
+          <button
+            @click="dismissNotice"
+            class="inline-flex text-blue-400 hover:text-blue-600 focus:outline-none focus:text-blue-600 transition-colors duration-200"
+          >
+            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CertificationNotice',
+  props: {
+    // 是否显示提示
+    show: {
+      type: Boolean,
+      default: true
+    },
+    // 自定义标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 自定义描述
+    description: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      dismissed: false
+    }
+  },
+  computed: {
+    showNotice() {
+      return this.show && !this.dismissed
+    }
+  },
+  methods: {
+    dismissNotice() {
+      this.dismissed = true
+    }
+  },
+  mounted() {
+
+  }
+}
+</script>
+
+<style scoped>
+.certification-notice {
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>