793 lines
16 KiB
Vue
793 lines
16 KiB
Vue
<template>
|
||
<view class="top3-card" :class="{ 'top3-card2': !hasArtwork }">
|
||
<!-- 有作品的布局 -->
|
||
<template v-if="hasArtwork">
|
||
<!-- 作品图片（主要视觉元素） - 使用懒加载 -->
|
||
<view class="artwork-container">
|
||
<LazyImage
|
||
class="artwork-image"
|
||
:src="artworkImage"
|
||
mode="aspectFill"
|
||
:width="'100%'"
|
||
:height="'100%'"
|
||
@error="handleArtworkError"
|
||
/>
|
||
|
||
<!-- 人气值覆盖在作品图片左上角 -->
|
||
<view class="popularity-overlay">
|
||
<image class="fire-icon" src="/static/rank/spark.png" mode="aspectFit" lazy-load></image>
|
||
<text class="popularity-score">{{ formattedScore }}</text>
|
||
</view>
|
||
|
||
<!-- 排名徽章在作品图片底部 -->
|
||
<view class="rank-badge-bottom">
|
||
<image class="rank-icon" :src="`/static/rank/charm-rank-icon${rank}.png`" mode="aspectFit"
|
||
@error="handleRankIconError" lazy-load></image>
|
||
</view>
|
||
<view class="rank-badge-bottom rank-badge-bottom2">
|
||
<image class="rank-icon" :src="`/static/rank/rank-icon${rank}.png`" mode="aspectFit"
|
||
@error="handleRankIconError" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用户信息（头像和昵称在作品图片下方） - 使用懒加载 -->
|
||
<view class="user-info-with-artwork">
|
||
<LazyImage
|
||
class="user-avatar-small"
|
||
:src="avatar || '/static/avatar/1.jpeg'"
|
||
mode="aspectFit"
|
||
:width="'32rpx'"
|
||
:height="'32rpx'"
|
||
@error="handleAvatarError"
|
||
@tap="handleAvatarClick"
|
||
/>
|
||
<text class="user-nickname">{{'用户 :'}}
|
||
<text class="user-nickname-name">{{ nickname || '未知用户' }}</text>
|
||
</text>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 无作品的布局 -->
|
||
<template v-else>
|
||
|
||
<!-- 人气值（在头像上方） -->
|
||
<view class="popularity-container">
|
||
<image class="fire-icon" src="/static/rank/spark.png" mode="aspectFit" lazy-load></image>
|
||
<text class="popularity-score">{{ formattedScore }}</text>
|
||
</view>
|
||
|
||
<!-- 用户头像（居中显示，大尺寸） - 使用懒加载 -->
|
||
<view class="avatar-container">
|
||
<LazyImage
|
||
class="user-avatar-large"
|
||
:src="avatar || '/static/avatar/1.jpeg'"
|
||
mode="aspectFill"
|
||
:width="'180rpx'"
|
||
:height="'180rpx'"
|
||
@error="handleAvatarError"
|
||
@tap="handleAvatarClick"
|
||
/>
|
||
|
||
<view class="rank-badge-bottom">
|
||
<image class="rank-icon" :src="`/static/rank/charm-rank-icon${rank}.png`" mode="aspectFit"
|
||
@error="handleRankIconError" lazy-load></image>
|
||
</view>
|
||
<view class="rank-badge-bottom rank-badge-bottom2">
|
||
<image class="rank-icon" :src="`/static/rank/rank-icon${rank}.png`" mode="aspectFit"
|
||
@error="handleRankIconError" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 用户昵称（在头像下方） -->
|
||
<view class="nickname-container">
|
||
<text class="user-nickname">{{'用户 :'}}
|
||
<text class="user-nickname-name">{{ nickname || '未知用户' }}
|
||
</text>
|
||
</text>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 操作菜单 -->
|
||
<view v-if="showActionMenu" class="action-menu-overlay" @tap="closeActionMenu">
|
||
<view class="action-menu" @tap.stop>
|
||
<view
|
||
v-if="!isCurrentUser"
|
||
class="menu-item"
|
||
@tap="handleMenuVisit"
|
||
>
|
||
<image class="menu-icon" src="/static/icon/visit-house.png" mode="aspectFit" lazy-load></image>
|
||
<text class="menu-text">拜访小屋</text>
|
||
</view>
|
||
<view class="menu-item" @tap="handleMenuViewProfile">
|
||
<image class="menu-icon" src="/static/icon/character.png" mode="aspectFit" lazy-load></image>
|
||
<text class="menu-text">查看个人信息</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
computed
|
||
} from 'vue';
|
||
import LazyImage from '@/components/LazyImage.vue';
|
||
|
||
const props = defineProps({
|
||
rank: {
|
||
type: Number,
|
||
required: true,
|
||
validator: (value) => [1, 2, 3].includes(value)
|
||
},
|
||
avatar: {
|
||
type: String,
|
||
default: '/static/avatar/1.jpeg'
|
||
},
|
||
nickname: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
popularityScore: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
artworkImage: {
|
||
type: String,
|
||
default: '' // 改为可选，默认为空字符串
|
||
},
|
||
userId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
isCurrentUser: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
});
|
||
|
||
const emit = defineEmits(['avatar-click', 'visit', 'view-profile']);
|
||
|
||
// 操作菜单显示状态
|
||
const showActionMenu = ref(false);
|
||
|
||
// 判断是否有作品图片
|
||
const hasArtwork = computed(() => {
|
||
return !!props.artworkImage && props.artworkImage.trim() !== '';
|
||
});
|
||
|
||
// 格式化人气值（超过百万显示为 M）
|
||
const formattedScore = computed(() => {
|
||
const score = props.popularityScore;
|
||
// 处理无效数据
|
||
if (typeof score !== 'number' || isNaN(score) || score < 0) {
|
||
return '0';
|
||
}
|
||
|
||
if (score >= 1000000) {
|
||
return (score / 1000000).toFixed(1) + 'M';
|
||
} else if (score >= 1000) {
|
||
return (score / 1000).toFixed(1) + 'K';
|
||
}
|
||
return score.toString();
|
||
});
|
||
|
||
// 处理头像点击 - 显示操作菜单
|
||
const handleAvatarClick = () => {
|
||
showActionMenu.value = true;
|
||
emit('avatar-click', {
|
||
userId: props.userId,
|
||
isCurrentUser: props.isCurrentUser
|
||
});
|
||
};
|
||
|
||
// 关闭操作菜单
|
||
const closeActionMenu = () => {
|
||
showActionMenu.value = false;
|
||
};
|
||
|
||
// 处理菜单中的拜访选项
|
||
const handleMenuVisit = () => {
|
||
closeActionMenu();
|
||
emit('visit');
|
||
};
|
||
|
||
// 处理菜单中的查看个人信息选项
|
||
const handleMenuViewProfile = () => {
|
||
closeActionMenu();
|
||
emit('view-profile', props.userId);
|
||
};
|
||
|
||
// 处理排名图标加载失败
|
||
const handleRankIconError = (e) => {
|
||
// 可以设置一个默认的排名图标或者隐藏
|
||
};
|
||
|
||
// 处理头像加载失败
|
||
const handleAvatarError = (e) => {
|
||
e.target.src = '/static/avatar/1.jpeg';
|
||
};
|
||
|
||
// 处理作品图片加载失败
|
||
const handleArtworkError = (e) => {
|
||
e.target.src = '/static/avatar/1.jpeg';
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.top3-card {
|
||
width: 25%;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
/* gap: 64rpx; */
|
||
/* 优化：只动画必要属性，避免 transition: all */
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.top3-card2{
|
||
margin-top:40rpx
|
||
}
|
||
|
||
/* 排名徽章 */
|
||
.rank-badge {
|
||
position: absolute;
|
||
top: -12rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.rank-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3));
|
||
}
|
||
|
||
/* ========== 有作品的布局样式 ========== */
|
||
|
||
/* 作品图片容器 */
|
||
.artwork-container {
|
||
width: 100%;
|
||
height: 240rpx;
|
||
margin-top: 0;
|
||
margin-bottom: 84rpx;
|
||
background-image: url('/static/rank/frames/frame1.png');
|
||
background-size: 130% 115%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
position: relative;
|
||
padding: 8rpx;
|
||
padding-top: 16rpx;
|
||
}
|
||
|
||
.artwork-image {
|
||
margin: 4rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
/* LazyImage wrapper styling for artwork */
|
||
.artwork-image :deep(.lazy-image-wrapper) {
|
||
width: calc(100% - 8rpx);
|
||
height: calc(100% - 8rpx);
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
/* 人气值覆盖层（在作品图片左上角） */
|
||
.popularity-overlay {
|
||
position: absolute;
|
||
top: 24rpx;
|
||
left: 0;
|
||
display: flex;
|
||
gap: 4rpx;
|
||
align-items: center;
|
||
padding: 6rpx 12rpx;
|
||
border-radius: 12rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 排名徽章在作品图片底部 */
|
||
.rank-badge-bottom {
|
||
position: absolute;
|
||
bottom: -40rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%) scale(2.5);
|
||
z-index: 10;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.rank-badge-bottom2 {
|
||
bottom: -50rpx;
|
||
transform: translateX(-50%) scale(3)
|
||
}
|
||
|
||
.rank-badge-bottom .rank-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3));
|
||
}
|
||
|
||
/* 有作品时的用户信息 */
|
||
.user-info-with-artwork {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
/* gap: 12rpx; */
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
padding: 0 12rpx;
|
||
}
|
||
|
||
.user-avatar-small {
|
||
border-radius: 50%;
|
||
border: 3rpx solid rgba(255, 255, 255, 0.7);
|
||
/* 优化：2层阴影简化为1层 */
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
||
cursor: pointer;
|
||
/* 优化：只动画 transform，避免 transition: all */
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.user-avatar-small:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* LazyImage wrapper styling for small avatar */
|
||
.user-avatar-small :deep(.lazy-image-wrapper) {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* ========== 无作品的布局样式 ========== */
|
||
|
||
/* 人气值容器（在头像上方） */
|
||
.popularity-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: -32rpx;
|
||
|
||
}
|
||
|
||
.popularity-container .fire-icon {
|
||
width: 32rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.popularity-container .popularity-score {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
text-shadow:
|
||
0 2rpx 4rpx rgba(0, 0, 0, 0.5),
|
||
0 1rpx 2rpx rgba(0, 0, 0, 0.3);
|
||
font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
|
||
}
|
||
|
||
.popularity-overlay .fire-icon {
|
||
width: 32rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.popularity-overlay .popularity-score {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
text-shadow:
|
||
0 2rpx 4rpx rgba(0, 0, 0, 0.5),
|
||
0 1rpx 2rpx rgba(0, 0, 0, 0.3);
|
||
font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
|
||
}
|
||
|
||
/* 头像容器（居中显示，大尺寸） */
|
||
.avatar-container {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
margin-bottom: 80rpx;
|
||
margin-top: 64rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.user-avatar-large {
|
||
border-radius: 50%;
|
||
border: 5rpx solid rgba(255, 255, 255, 0.8);
|
||
/* 优化：2层阴影简化为1层 */
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
|
||
cursor: pointer;
|
||
/* 优化：只动画 transform，避免 transition: all */
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.user-avatar-large:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* LazyImage wrapper styling for large avatar */
|
||
.user-avatar-large :deep(.lazy-image-wrapper) {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* 昵称容器（在头像下方） */
|
||
.nickname-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
padding: 0 12rpx;
|
||
}
|
||
|
||
.user-nickname {
|
||
font-size: 14rpx;
|
||
margin-left: 12rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
max-width: 100%;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
text-shadow:
|
||
0 3rpx 6rpx rgba(0, 0, 0, 0.4),
|
||
0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||
font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
|
||
}
|
||
|
||
.user-nickname-name{
|
||
font-size: 14rpx;
|
||
margin-left: 0.5em; /* 缩进2格 */
|
||
color: #FFA500; /* 橙色，接近图中 LISA 的颜色 */
|
||
text-shadow:
|
||
0 3rpx 6rpx rgba(0, 0, 0, 0.4),
|
||
0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||
font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
|
||
}
|
||
|
||
/* 响应式布局 */
|
||
@media screen and (max-width: 750rpx) {
|
||
.top3-card {
|
||
padding: 20rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
/* 有作品布局 */
|
||
.artwork-container {
|
||
width: 220rpx;
|
||
height: 300rpx;
|
||
border-radius: 18rpx;
|
||
border-width: 3rpx;
|
||
}
|
||
|
||
.rank-badge-bottom {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
bottom: -18rpx;
|
||
}
|
||
|
||
.user-avatar-small {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
/* 无作品布局 */
|
||
.avatar-container {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
|
||
.user-avatar-large {
|
||
border-width: 4rpx;
|
||
}
|
||
|
||
.user-nickname {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.rank-badge {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
top: -10rpx;
|
||
}
|
||
|
||
.rank-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.charm-icon {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
.popularity-score {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.popularity-overlay .charm-icon {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
}
|
||
|
||
.popularity-overlay .fire-icon {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
}
|
||
|
||
.popularity-overlay .popularity-score {
|
||
font-size: 18rpx;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 600rpx) {
|
||
.top3-card {
|
||
padding: 18rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.rank-badge {
|
||
top: -10rpx;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.badge-text {
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
/* 有作品布局 */
|
||
.artwork-container {
|
||
width: 200rpx;
|
||
height: 280rpx;
|
||
margin-top: 0;
|
||
margin-bottom: 16rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.rank-badge-bottom {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
bottom: -16rpx;
|
||
}
|
||
|
||
.user-info-with-artwork {
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.user-avatar-small {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.popularity-overlay {
|
||
top: 6rpx;
|
||
left: 6rpx;
|
||
padding: 5rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
gap: 5rpx;
|
||
}
|
||
|
||
/* 无作品布局 */
|
||
.popularity-container {
|
||
margin-top: 20rpx;
|
||
margin-bottom: 14rpx;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.avatar-container {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
margin-bottom: 14rpx;
|
||
}
|
||
|
||
.user-avatar-large {
|
||
border-width: 4rpx;
|
||
}
|
||
|
||
.user-nickname {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.fire-icon {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
.popularity-score {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.popularity-overlay .fire-icon {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
}
|
||
|
||
.popularity-overlay .popularity-score {
|
||
font-size: 16rpx;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 480rpx) {
|
||
.top3-card {
|
||
padding: 16rpx;
|
||
border-radius: 18rpx;
|
||
}
|
||
|
||
.rank-badge {
|
||
top: -8rpx;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 18rpx;
|
||
}
|
||
|
||
.badge-text {
|
||
font-size: 18rpx;
|
||
}
|
||
|
||
/* 有作品布局 */
|
||
.artwork-container {
|
||
width: 180rpx;
|
||
height: 260rpx;
|
||
margin-top: 0;
|
||
margin-bottom: 12rpx;
|
||
border-radius: 14rpx;
|
||
border-width: 2rpx;
|
||
}
|
||
|
||
.rank-badge-bottom {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
bottom: -14rpx;
|
||
}
|
||
|
||
.user-info-with-artwork {
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.user-avatar-small {
|
||
width: 33rpx;
|
||
height: 33rpx;
|
||
border-width: 2rpx;
|
||
}
|
||
|
||
.popularity-overlay {
|
||
top: 5rpx;
|
||
left: 5rpx;
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 8rpx;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
/* 无作品布局 */
|
||
.popularity-container {
|
||
margin-top: 16rpx;
|
||
margin-bottom: 12rpx;
|
||
gap: 5rpx;
|
||
}
|
||
|
||
.avatar-container {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.user-avatar-large {
|
||
border-width: 3rpx;
|
||
}
|
||
|
||
.user-nickname {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.fire-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.popularity-score {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.popularity-overlay .fire-icon {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
}
|
||
|
||
.popularity-overlay .popularity-score {
|
||
font-size: 14rpx;
|
||
}
|
||
}
|
||
|
||
/* 操作菜单样式 */
|
||
.action-menu-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
/* 优化：移除 backdrop-filter，GPU 密集型操作 */
|
||
z-index: 10000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.action-menu {
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||
/* 优化：移除 backdrop-filter，GPU 密集型操作 */
|
||
border-radius: 24rpx;
|
||
padding: 20rpx;
|
||
min-width: 400rpx;
|
||
/* 优化：2层阴影简化为1层 */
|
||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.3);
|
||
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
||
animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
@keyframes scaleIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.9) translateY(20rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1) translateY(0);
|
||
}
|
||
}
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
padding: 28rpx 32rpx;
|
||
border-radius: 16rpx;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
margin-bottom: 12rpx;
|
||
/* 优化：只动画必要属性，避免 transition: all */
|
||
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
cursor: pointer;
|
||
border: 1rpx solid rgba(123, 104, 238, 0.2);
|
||
}
|
||
|
||
.menu-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.menu-item:active {
|
||
background: linear-gradient(135deg, rgba(123, 104, 238, 0.3) 0%, rgba(123, 104, 238, 0.2) 100%);
|
||
transform: scale(0.98);
|
||
box-shadow: 0 2rpx 8rpx rgba(123, 104, 238, 0.3);
|
||
}
|
||
|
||
.menu-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
|
||
}
|
||
|
||
.menu-text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
|
||
}
|
||
</style> |