59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<script setup>
|
|
// 接收 props
|
|
const props = defineProps({
|
|
title: String,
|
|
type: {
|
|
type: String,
|
|
default: 'purple-pink', // 默认渐变
|
|
},
|
|
})
|
|
|
|
// 根据type返回不同的背景类名
|
|
const titleClass = computed(() => {
|
|
switch (props.type) {
|
|
case 'blue-green':
|
|
return 'bg-gradient-to-r from-blue-400 via-green-500 to-teal-500'
|
|
case 'orange-yellow':
|
|
return 'bg-gradient-to-r from-orange-400 via-yellow-500 to-yellow-600'
|
|
case 'red-purple':
|
|
return 'bg-gradient-to-r from-red-500 via-purple-500 to-purple-600'
|
|
default:
|
|
return 'bg-gradient-to-r from-purple-400 via-pink-500 to-red-500'
|
|
}
|
|
})
|
|
|
|
// 分割线颜色与背景对应
|
|
const lineClass = computed(() => {
|
|
switch (props.type) {
|
|
case 'blue-green':
|
|
return 'bg-gradient-to-r from-blue-400 via-green-500 to-teal-500'
|
|
case 'orange-yellow':
|
|
return 'bg-gradient-to-r from-orange-400 via-yellow-500 to-yellow-600'
|
|
case 'red-purple':
|
|
return 'bg-gradient-to-r from-red-500 via-purple-500 to-purple-600'
|
|
default:
|
|
return 'bg-gradient-to-r from-purple-400 via-pink-500 to-red-500'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative">
|
|
<!-- 标题部分 -->
|
|
<div :class="titleClass" class="inline-block rounded-lg px-2 py-1 text-white font-bold shadow-md">
|
|
{{ title }}
|
|
</div>
|
|
|
|
<!-- 左上角修饰 -->
|
|
<div class="absolute left-0 top-0 h-4 w-4 transform rounded-full bg-white shadow-md -translate-x-2 -translate-y-2" />
|
|
|
|
<!-- 分割线 -->
|
|
<div class="relative mt-1.5">
|
|
<div :class="lineClass" class="h-[2px] w-full rounded" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|