145 lines
2.7 KiB
Vue
145 lines
2.7 KiB
Vue
<template>
|
|
<view class="game-category" @click="handleClick">
|
|
<view class="category-icon" :style="{ background: getCategoryGradient(category.color) }">
|
|
<text class="icon-text">{{ category.icon }}</text>
|
|
|
|
<!-- 霓虹光圈 -->
|
|
<view class="glow-ring" :style="{ borderColor: category.color }"></view>
|
|
</view>
|
|
|
|
<view class="category-name">{{ category.name }}</view>
|
|
|
|
<view v-if="category.hot" class="hot-badge">
|
|
<text class="hot-text">HOT</text>
|
|
</view>
|
|
|
|
<view v-if="showCount" class="service-count">
|
|
{{ category.serviceCount }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue'
|
|
|
|
const props = defineProps({
|
|
category: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
showCount: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['click'])
|
|
|
|
const handleClick = () => {
|
|
emit('click', props.category)
|
|
}
|
|
|
|
const getCategoryGradient = (color) => {
|
|
return `linear-gradient(135deg, ${color}40 0%, ${color}20 100%)`
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.game-category {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: 20rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
.category-icon {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16rpx;
|
|
position: relative;
|
|
border: 1px solid rgba(0, 255, 255, 0.3);
|
|
backdrop-filter: blur(10rpx);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.game-category:active .category-icon {
|
|
border-color: rgba(0, 255, 255, 0.6);
|
|
box-shadow:
|
|
0 0 20rpx rgba(0, 255, 255, 0.4),
|
|
0 0 40rpx rgba(0, 255, 255, 0.2);
|
|
}
|
|
|
|
.icon-text {
|
|
font-size: 56rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.glow-ring {
|
|
position: absolute;
|
|
top: -4rpx;
|
|
left: -4rpx;
|
|
right: -4rpx;
|
|
bottom: -4rpx;
|
|
border: 2px solid;
|
|
border-radius: 26rpx;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.game-category:active .glow-ring {
|
|
opacity: 0.6;
|
|
animation: glow 1.5s infinite;
|
|
}
|
|
|
|
@keyframes glow {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.category-name {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.hot-badge {
|
|
position: absolute;
|
|
top: 12rpx;
|
|
right: 12rpx;
|
|
padding: 4rpx 12rpx;
|
|
background: linear-gradient(135deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 71, 71, 0.9) 100%);
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
|
|
}
|
|
|
|
.hot-text {
|
|
font-size: 20rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.service-count {
|
|
font-size: 22rpx;
|
|
color: #7a7e9d;
|
|
}
|
|
</style>
|