96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
<template>
|
|
<view class="action-badge" :class="badgeClass" v-if="action">
|
|
<text class="badge-icon">{{ badgeIcon }}</text>
|
|
<text class="badge-text">{{ action }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
action: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
});
|
|
|
|
const badgeClass = computed(() => {
|
|
switch (props.action) {
|
|
case '夯': return 'badge-god';
|
|
case '顶级': return 'badge-good';
|
|
case '人上人': return 'badge-ok';
|
|
case 'NPC': return 'badge-bad';
|
|
case '拉': return 'badge-terrible';
|
|
default: return 'badge-default';
|
|
}
|
|
});
|
|
|
|
const badgeIcon = computed(() => {
|
|
switch (props.action) {
|
|
case '夯': return '👑';
|
|
case '顶级': return '🔥';
|
|
case '人上人': return '🙂';
|
|
case 'NPC': return '😐';
|
|
case '拉': return '👎';
|
|
default: return '';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.action-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 100rpx;
|
|
font-size: 20rpx;
|
|
font-weight: bold;
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.badge-icon {
|
|
margin-right: 6rpx;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
/* 夯 - 金色/黄色 */
|
|
.badge-god {
|
|
background: linear-gradient(135deg, #fff8e1, #ffe082);
|
|
color: #b07d00;
|
|
border: 1rpx solid #ffecb3;
|
|
}
|
|
|
|
/* 顶级 - 红色/橙色 */
|
|
.badge-good {
|
|
background: linear-gradient(135deg, #ffebee, #ffcdd2);
|
|
color: #c62828;
|
|
border: 1rpx solid #ffcdd2;
|
|
}
|
|
|
|
/* 人上人 - 蓝色/绿色 */
|
|
.badge-ok {
|
|
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
|
|
color: #2e7d32;
|
|
border: 1rpx solid #c8e6c9;
|
|
}
|
|
|
|
/* NPC - 灰色 */
|
|
.badge-bad {
|
|
background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
|
|
color: #616161;
|
|
border: 1rpx solid #e0e0e0;
|
|
}
|
|
|
|
/* 拉 - 深灰/暗红 */
|
|
.badge-terrible {
|
|
background: linear-gradient(135deg, #eceff1, #cfd8dc);
|
|
color: #455a64;
|
|
border: 1rpx solid #cfd8dc;
|
|
}
|
|
|
|
.badge-default {
|
|
background-color: #f5f6fa;
|
|
color: #666;
|
|
}
|
|
</style> |