|
|
@@ -11,7 +11,12 @@ import NavbarEvo from '@/components/navbar-evo.vue'
|
|
|
import Card from '@/components/card.vue'
|
|
|
import SectionHeading from '@/components/section-heading.vue'
|
|
|
import { getBadges, getCertificates } from '../../../core/libs/requests'
|
|
|
+import { useRouter } from '../../../core/utils/router'
|
|
|
+import arcBottom from '@designer-hub/assets/src/libs/assets/arcBottom'
|
|
|
+import { NetImages } from '../../../core/libs/net-images'
|
|
|
+import ProgressEvo from '@/components/progress-evo.vue'
|
|
|
|
|
|
+const router = useRouter()
|
|
|
const active = ref('badge')
|
|
|
const tabs = ref([
|
|
|
{ label: '徽章', value: 'badge' },
|
|
|
@@ -50,14 +55,127 @@ onMounted(async () => {
|
|
|
</script>
|
|
|
<template>
|
|
|
<div class="flex-grow bg-gradient-to-b from-[#181614] to-[#0f0f0f] flex flex-col gap-4 p-3.5">
|
|
|
- <NavbarEvo dark placeholder transparent></NavbarEvo>
|
|
|
- <wd-tabs v-model="active">
|
|
|
+ <div class="aspect-[1.63/1] m--3.5 overflow-hidden relative">
|
|
|
+ <wd-img width="100%" mode="widthFix" :src="NetImages.HonorsHeader"></wd-img>
|
|
|
+ <div class="absolute left-7 bottom-6.5">
|
|
|
+ <div
|
|
|
+ class="text-white text-3xl font-bold font-['Alimama_ShuHeiTi'] leading-relaxed pr-2.5"
|
|
|
+ style="
|
|
|
+ background: linear-gradient(92deg, #fff 0.4%, #ffebb2 107.42%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 荣誉主页
|
|
|
+ </div>
|
|
|
+ <div class="mt-4 flex justify-between">
|
|
|
+ <template
|
|
|
+ v-for="(it, i) in [
|
|
|
+ { label: '获得徽章', value: 10, unit: '枚' },
|
|
|
+ { label: '获得证书', value: 10, unit: '个' },
|
|
|
+ ]"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <div class="flex flex-col items-center gap-1.25">
|
|
|
+ <div
|
|
|
+ class="text-center text-[#f6e8da]/80 text-xs font-normal font-['PingFang SC'] leading-snug"
|
|
|
+ >
|
|
|
+ {{ it.label }}
|
|
|
+ </div>
|
|
|
+ <div class="flex items-end gap-1">
|
|
|
+ <div class="text-center text-white text-2xl font-medium font-['DIN'] leading-6">
|
|
|
+ {{ it.value }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-center text-[#f6e8da]/80 text-xs font-normal font-['PingFang SC'] leading-snug"
|
|
|
+ >
|
|
|
+ {{ it.unit }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <NavbarEvo dark fixed transparent></NavbarEvo>
|
|
|
+ <!-- <wd-tabs v-model="active">
|
|
|
<template v-for="(it, i) in tabs" :key="i">
|
|
|
<wd-tab :title="it.label" :name="it.value"></wd-tab>
|
|
|
</template>
|
|
|
- </wd-tabs>
|
|
|
+ </wd-tabs> -->
|
|
|
+ <div class="flex items-center justify-around">
|
|
|
+ <template v-for="(it, i) in tabs" :key="i">
|
|
|
+ <div class="flex flex-col items-center gap-1" @click="active = it.value">
|
|
|
+ <div
|
|
|
+ class="text-center font-normal font-['PingFang_SC']"
|
|
|
+ :class="`${it.value === active ? 'text-white text-lg leading-relaxed ' : 'text-white/60 text-base leading-normal'}`"
|
|
|
+ >
|
|
|
+ {{ it.label }}
|
|
|
+ </div>
|
|
|
+ <wd-img v-if="it.value === active" width="17" height="5.6" :src="arcBottom"></wd-img>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
<template v-if="active === 'badge'">
|
|
|
- <Card custom-class="border border-solid bg-[#25221f]! border-[rgba(255,236,185,0.20)]"></Card>
|
|
|
+ <Card custom-class="border border-solid bg-[#25221f]! border-[rgba(255,236,185,0.20)]">
|
|
|
+ <div class="grid grid-cols-[90px_1fr] gap-x-4">
|
|
|
+ <div class="grid-row-start-1 grid-row-end-4 col-start-1">
|
|
|
+ <wd-img width="90" height="90" src="https://via.placeholder.com/86x91"></wd-img>
|
|
|
+ </div>
|
|
|
+ <div class="row-start-1 col-start-2 flex items-center justify-between">
|
|
|
+ <div
|
|
|
+ class="text-center text-[#ffecb9] text-lg font-normal font-['PingFang_SC'] leading-relaxed"
|
|
|
+ >
|
|
|
+ 学习大师
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="h-[26px] px-2.5 rounded-[30px] border border-solid border-[#ffecb9] justify-center items-center gap-2.5 inline-flex"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="text-center text-[#ffecb9] text-xs font-normal font-['PingFang_SC'] leading-relaxed"
|
|
|
+ >
|
|
|
+ 获取条件
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-start-2 col-start-2">
|
|
|
+ <div
|
|
|
+ class="text-start text-white/60 text-xs font-normal font-['PingFang_SC'] leading-relaxed"
|
|
|
+ >
|
|
|
+ 参加游学解锁典藏徽章
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-start-3 col-start-2 flex items-center gap-4">
|
|
|
+ <div class="flex-1">
|
|
|
+ <ProgressEvo
|
|
|
+ :height="5"
|
|
|
+ :model-value="0.2 * 100"
|
|
|
+ color="linear-gradient(90deg, #FFDA72 0%, #FFECB9 100%)"
|
|
|
+ ></ProgressEvo>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="text-white text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
+ 2
|
|
|
+ </span>
|
|
|
+ <span class="text-[#a1a1a1] text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
+ /8
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-start-4 col-start-1 flex items-center justify-center">
|
|
|
+ <div
|
|
|
+ class="w-[59px] h-[21px] px-2.5 bg-[#524c3b] rounded-[30px] shadow shadow-inner justify-center items-center gap-0.5 inline-flex"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="text-center text-[#ffecb9] text-[10px] font-normal font-['PingFang SC'] leading-relaxed"
|
|
|
+ >
|
|
|
+ 获取榜
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
<template v-for="([key, it], index) in Object.entries(badges)" :key="index">
|
|
|
<Card
|
|
|
custom-class="bg-[#171615]! text-white border border-solid border-[rgba(255,236,185,0.20)]"
|
|
|
@@ -68,7 +186,10 @@ onMounted(async () => {
|
|
|
</div>
|
|
|
<div class="grid grid-cols-3 gap-y-6">
|
|
|
<template v-for="(item, i) in it" :key="i">
|
|
|
- <div class="w-full px-4 box-border">
|
|
|
+ <div
|
|
|
+ class="w-full px-4 box-border"
|
|
|
+ @click="router.push(`/pages/mine/honors/detail/index?data=${JSON.stringify(item)}`)"
|
|
|
+ >
|
|
|
<wd-img width="100%" mode="widthFix" :src="item.badgeNotObtainedImage"></wd-img>
|
|
|
<div
|
|
|
class="text-center text-white text-xs font-normal font-['PingFang_SC'] leading-relaxed"
|
