designer-hub/packages/app/src/pages/home/study-tour/detail.vue

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "游学计划",
    "navigationBarBackgroundColor": "#fff",
    "navigationStyle": "custom"
  }
}
</route>
<script setup lang="ts">
import NavbarEvo from '@/components/navbar-evo.vue'
import { getContent } from '../../../core/libs/requests'
import { map } from '@designer-hub/assets/src/assets/svgs'
import TiltedButton from '@/components/tilted-button.vue'

const id = ref()
const { data, run: setData } = useRequest(() => getContent({ id: id.value }))
onLoad(async (query: { id: string }) => {
  id.value = query.id
  await setData()
  console.log(data.value)
})
</script>
<template>
  <div class="flex-grow bg-[#36200f] px-3.5">
    <NavbarEvo transparent></NavbarEvo>
    <div class="aspect-[1.26/1]">
      <wd-img width="100%" height="100%" src=""></wd-img>
    </div>
    <div class="flex">
      <wd-img width="18" height="18" :src="map"></wd-img>
      <div class="text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-normal">
        第一站
      </div>
    </div>
    <div class="w-[347px] text-white text-[26px] font-normal font-['PingFang_SC'] leading-[44px]">
      日本研学·东京艺术大学设计游学
      <div class="inline-block py-1.5 px-4 bg-white rounded-[20px] backdrop-blur-[15px]">
        <div
          class="w-[42px] h-[21px] text-[#a60707] text-sm font-normal font-['PingFang_SC'] leading-relaxed"
        >
          报名中
        </div>
      </div>
    </div>
    <div class="px-4 py-6 bg-[#29170b] rounded-2xl my-8">
      <div class="flex items-center">
        <wd-img width="16" height="16"></wd-img>
        <div
          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-normal"
        >
          报名时间
        </div>
        <div class="w-4"></div>
        <div class="text-white text-base font-normal font-['PingFang_SC'] leading-[34px]">
          2024.12.15 2025.01.15
        </div>
      </div>
      <div class="flex items-center">
        <wd-img width="16" height="16"></wd-img>
        <div
          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-normal"
        >
          游学时间
        </div>
        <div class="w-4"></div>
        <div class="text-white text-base font-normal font-['PingFang_SC'] leading-[34px]">
          2024.12.15 2025.01.15
        </div>
      </div>
      <div class="flex items-center">
        <wd-img width="16" height="16"></wd-img>
        <div
          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-normal"
        >
          游学名额
        </div>
        <div class="w-4"></div>
        <div class="text-white text-base font-normal font-['PingFang_SC'] leading-[34px]">
          40人/剩余10人
        </div>
      </div>
      <div class="flex items-center">
        <wd-img width="16" height="16"></wd-img>
        <div
          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-normal"
        >
          等级限制
        </div>
        <div class="w-4"></div>
        <div class="text-white text-base font-normal font-['PingFang_SC'] leading-[34px]">
          黄金以上等级
        </div>
      </div>
    </div>
    <wd-tabs>
      <wd-tab title="活动介绍"></wd-tab>
      <wd-tab title="行程安排"></wd-tab>
    </wd-tabs>
    <div class="mt-5">
      <div
        class="text-justify text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-relaxed"
      >
        东京艺术大学（英文：Tokyo University of the
        Arts；日文平假名：とうきょうげいじゅつだいがく），简称东京艺大、艺大（とうきょうげいだい、げいだい），是一所校本部位于东京都台东区上野公园内的艺术类日本国立大学。其是超级国际化大学计划、亚洲校园 成员。其前身是于1887年分别创立的东京美术学校和东京音乐学校，1949年两校合并成为新制东京艺术大学。东京艺术大学的主要目的为培养美术和音乐领域的艺术家，其中音乐学部已培养了许多著名作曲家、演奏家、指挥家，美术学部也诞生了许多著名画家、艺术家、建筑家。
      </div>
    </div>
    <div
      class="fixed bottom-4 w-[347px] h-[63px] bg-white/90 rounded-2xl backdrop-blur-[20px] flex items-center px-4 box-border"
    >
      <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN_Exp'] leading-normal">16000</div>
      <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-[34px]">
        积分
      </div>
      <div class="flex-1"></div>
      <div>
        <TiltedButton size="large">立即报名</TiltedButton>
      </div>
    </div>
  </div>
</template>