Browse Source

feat: 任务卡片添加 SVG 图标

- 收集任务显示 collection.svg
- 狩猎任务显示 hunting.svg
master
hanqin 4 weeks ago
parent
commit
ac265d87de
  1. 1
      Build_God_Game/src/assets/images/collection.svg
  2. 1
      Build_God_Game/src/assets/images/hunting.svg
  3. 22
      Build_God_Game/src/views/DailyMissionView.vue

1
Build_God_Game/src/assets/images/collection.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 13 KiB

1
Build_God_Game/src/assets/images/hunting.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1776231671376" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17660" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M329.142857 671.869388c-83.591837 0-151.510204-67.918367-151.510204-151.510204s67.918367-151.510204 151.510204-151.510204 151.510204 67.918367 151.510204 151.510204-67.918367 151.510204-151.510204 151.510204z m0-261.22449c-60.604082 0-109.714286 49.110204-109.714286 109.714286s49.110204 109.714286 109.714286 109.714285 109.714286-49.110204 109.714286-109.714285-49.110204-109.714286-109.714286-109.714286zM694.857143 671.869388c-83.591837 0-151.510204-67.918367-151.510204-151.510204s67.918367-151.510204 151.510204-151.510204 151.510204 67.918367 151.510204 151.510204-67.918367 151.510204-151.510204 151.510204z m0-261.22449c-60.604082 0-109.714286 49.110204-109.714286 109.714286s49.110204 109.714286 109.714286 109.714285 109.714286-49.110204 109.714286-109.714285-49.110204-109.714286-109.714286-109.714286z" fill="#d81e06" p-id="17661" data-spm-anchor-id="a313x.search_index.0.i1.f3e53a81C26W9f" class="selected"></path><path d="M644.179592 913.240816c-26.644898 0-50.155102-12.016327-66.351021-30.30204-16.195918 18.808163-39.706122 30.302041-66.35102 30.30204s-50.155102-12.016327-66.35102-30.30204c-16.195918 18.808163-39.706122 30.302041-66.351021 30.30204-48.065306 0-87.24898-39.183673-87.248979-87.248979v-36.571429c-133.746939-38.138776-198.530612-123.820408-198.530613-261.22449 0-230.4 187.559184-417.959184 417.959184-417.959183s417.959184 187.559184 417.959184 417.959183c0 137.404082-64.783673 223.085714-198.530613 261.22449v36.571429c1.044898 48.587755-38.138776 87.24898-86.204081 87.248979z m-86.726531-86.72653h41.795919c0 25.077551 20.37551 45.453061 45.453061 45.453061 25.077551 0 45.453061-20.37551 45.453061-45.453061V757.55102l15.673469-4.179591c124.865306-30.82449 182.857143-102.4 182.857143-225.175511 0-207.412245-168.75102-376.163265-376.163265-376.163265s-376.163265 168.75102-376.163265 376.163265c0 122.77551 57.991837 193.828571 182.857143 225.175511l15.673469 4.179591v68.963266c0 25.077551 20.37551 45.453061 45.453061 45.453061 25.077551 0 45.453061-20.37551 45.453061-45.453061h41.795919c0 25.077551 20.37551 45.453061 45.453061 45.453061s44.408163-20.897959 44.408163-45.453061z" fill="#d81e06" p-id="17662" data-spm-anchor-id="a313x.search_index.0.i0.f3e53a81C26W9f" class="selected"></path></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

22
Build_God_Game/src/views/DailyMissionView.vue

@ -4,6 +4,8 @@ import { useRouter } from 'vue-router'
import { dailyMissionApi, type DailyMission, DailyMissionStatus, RewardType, MissionType, MissionDifficulty, ProgressTargetType } from '@/api/dailyMission' import { dailyMissionApi, type DailyMission, DailyMissionStatus, RewardType, MissionType, MissionDifficulty, ProgressTargetType } from '@/api/dailyMission'
import Particles from '@/components/Particles/Particles.vue' import Particles from '@/components/Particles/Particles.vue'
import ElectricBorder from '@/components/ElectricBorder/ElectricBorder.vue' import ElectricBorder from '@/components/ElectricBorder/ElectricBorder.vue'
import collectionIcon from '@/assets/images/collection.svg?raw'
import huntingNormalIcon from '@/assets/images/hunting.svg?raw'
const router = useRouter() const router = useRouter()
@ -143,6 +145,13 @@ const getProgressText = (mission: DailyMission) => {
return `${targetType} ${progress.currentCount}/${progress.targetCount} ${targetName}` return `${targetType} ${progress.currentCount}/${progress.targetCount} ${targetName}`
} }
const getMissionIcon = (type: MissionType) => {
if (type === MissionType.Collection) {
return collectionIcon
}
return huntingNormalIcon
}
const MissionCardContent = defineComponent({ const MissionCardContent = defineComponent({
name: 'MissionCardContent', name: 'MissionCardContent',
props: { props: {
@ -156,7 +165,7 @@ const MissionCardContent = defineComponent({
return () => h('div', { class: 'mission-card-content' }, [ return () => h('div', { class: 'mission-card-content' }, [
h('div', { class: 'card-header' }, [ h('div', { class: 'card-header' }, [
h('div', { class: 'card-title-row' }, [ h('div', { class: 'card-title-row' }, [
h('span', { class: 'card-icon' }, '📦'), h('div', { class: 'card-icon', innerHTML: getMissionIcon(props.mission.missionType) }),
h('span', { class: 'card-title' }, props.mission.missionTitle), h('span', { class: 'card-title' }, props.mission.missionTitle),
]), ]),
h('span', { class: ['card-status', getStatusClass(props.mission.status)] }, getStatusText(props.mission.status)), h('span', { class: ['card-status', getStatusClass(props.mission.status)] }, getStatusText(props.mission.status)),
@ -433,7 +442,16 @@ const MissionCardContent = defineComponent({
} }
.card-icon { .card-icon {
font-size: 1.2rem; width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.card-icon :deep(svg) {
width: 100%;
height: 100%;
} }
.card-title { .card-title {

Loading…
Cancel
Save