xiaoyu/topfans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:选择作品的等级图标

Browse Source
This commit is contained in:
zerosaturation 2026-05-21 14:16:10 +08:00
parent ff22b29ede
commit c76d779f4e
1 changed files with 21 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/pages/components/AssetSelector.vue
View File

@ -51,7 +51,7 @@
:src="getGradeBackground(gradeItem.grade)"
mode="aspectFill"
></image>
<text class="grade-title">{{ formatGrade(gradeItem.grade) }}</text>
<!-- <text class="grade-title">{{ formatGrade(gradeItem.grade) }}</text> -->
</view>
<scroll-view class="asset-row" scroll-x :show-scrollbar="false" :enable-flex="true">
<view class="asset-row-content">
@ -202,20 +202,22 @@ const currentItems = computed(() => {
});
// grade 中文转换
const gradeMap = { 1: '一', 2: '二', 3: '三', 4: '四', 5: '五' };
const formatGrade = (grade) => `V${grade}`;
// const gradeMap = { 1: '一', 2: '二', 3: '三', 4: '四', 5: '五' };
// const formatGrade = (grade) => `V${grade}`;
// 获取等级背景图
const getGradeBackground = (grade) => {
if (grade <= 2) {
return '/static/starbookcontent/V1dengji.png';
} else if (grade <= 4) {
return '/static/starbookcontent/V2dengji.png';
} else {
return '/static/starbookcontent/V3dengji.png';
}
const gradeMap = {
1: '/static/starbookcontent/grade/Ndengji.png',
2: '/static/starbookcontent/grade/Rdengji.png',
3: '/static/starbookcontent/grade/SRdengji.png',
4: '/static/starbookcontent/grade/SSRdengji.png',
5: '/static/starbookcontent/grade/URengji.png',
};
function getGradeBackground(grade) {
return gradeMap[grade] || gradeMap[1];
}
// 切换类型
const switchType = (type) => {
currentType.value = type;
@ -485,30 +487,20 @@ const handleTouchEnd = (e) => {
}
.grade-section {
background: #f0839960;
border-radius: 16rpx;
padding: 20rpx;
margin-bottom: 20rpx;
padding:0 20rpx;
}
.grade-header {
position: relative;
margin-bottom: 16rpx;
padding: 16rpx 24rpx;
display: inline-flex;
align-items: center;
justify-content: center;
width: 160rpx;
height: 32rpx;
/* width: 160rpx; */
height: 80rpx;
}
.grade-header-bg {
position: absolute;
top: 0;
left: 0;
width: 160rpx;
height: 64rpx;
z-index: 0;
width: 80rpx;
height: 80rpx;
}
.grade-title {
@ -523,6 +515,8 @@ const handleTouchEnd = (e) => {
width: 100%;
height: 288rpx;
white-space: nowrap;
background: #f0839960;
padding: 0.5rem;
}
.asset-row::-webkit-scrollbar {