103 lines
3.1 KiB
Vue
103 lines
3.1 KiB
Vue
<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>
|