designer-hub/src/pages/index/study-tour/index.vue

<route lang="yaml">
style:
  navigationBarTitleText: 设计游学
  navigationBarBackgroundColor: '#fff'
</route>
<script lang="ts" setup>
import AvatarGroupCasual from '@/components/avatar-group-casual/avatar-group-casual.vue'
import Card from '@/components/card.vue'
import MomentItem from '@/components/moment-item.vue'
import SectionHeading from '@/components/section-heading.vue'
import TiltedButton from '@/components/tilted-button.vue'
</script>
<template>
  <view class="px-3.5">
    <view class="my-6">
      <card class=""></card>
    </view>
    <card custom-class="my-6 p-0!">
      <view class="relative">
        <wd-img
          custom-class="vertical-bottom"
          width="100%"
          height="275"
          src="https://via.placeholder.com/347x464"
        ></wd-img>
        <div
          class="w-[63px] h-[29px] bg-black/60 rounded-[20px] backdrop-blur-[15px] absolute top-5 right-3.5 flex items-center justify-center"
        >
          <div class="text-white text-sm font-normal font-['PingFang SC'] leading-relaxed">
            报名中
          </div>
        </div>
        <view class="absolute left-3.5 bottom-2.5 flex items-center">
          <avatar-group-casual
            :show-number="3"
            :urls="[
              'https://via.placeholder.com/20x20',
              'https://via.placeholder.com/20x20',
              'https://via.placeholder.com/20x20',
            ]"
          ></avatar-group-casual>
          <div
            class="ml-1 text-white/60 text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
          >
            40人已报名
          </div>
        </view>
      </view>
      <div class="bg-[#27130d]/50 rounded-bl-2xl rounded-br-2xl backdrop-blur-[20px] p-3.5">
        <div class="w-[293px] text-white text-xl font-normal font-['PingFang SC'] leading-relaxed">
          日本研学·东京艺术大学设计游学
        </div>
        <view class="flex items-center">
          <div class="text-white/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
            游学时间：
          </div>
          <div class="text-white/60 text-base font-normal font-['PingFang SC'] leading-[34px]">
            07.15 08.10
          </div>
        </view>
        <div
          class="text-justify text-white/60 text-sm font-normal font-['PingFang SC'] leading-relaxed"
        >
          等级限制：黄金会员以上
        </div>
        <view class="flex items-center justify-between">
          <view class="flex items-end">
            <div class="text-white text-3xl font-bold font-['D-DIN Exp'] leading-normal">16000</div>
            <div class="ml-1 text-white/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
              积分
            </div>
          </view>
          <tilted-button custom-class="" size="large" color="white">立即报名</tilted-button>
        </view>
      </div>
    </card>
    <card custom-class="my-6">
      <div class="my-7.5 text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]">
        筑巢荟-设计游学
      </div>
      <div
        class="w-[319px] h-[264px] text-justify text-black/40 text-base font-normal font-['PingFang SC'] leading-relaxed"
      >
        我们为您精心打造了一个独特且极具价值的游学项目。这个项目的核心旨在全方位提升您作为设计师的能力。
        在这里，您将拥有无比优质的游学资源。我们与全球知名的设计学府、顶尖设计工作室以及具有代表性的经典建筑和室内空间建立了紧密合作。您将有机会深入这些卓越的场所，亲身体验最前沿的设计理念和实践。
        参与专业的研讨会和工作坊，与同行们分享见解、碰撞思维火花，进一步深化对设计的理解。
      </div>
    </card>
    <section-heading custom-class="my-6" title="同学荟"></section-heading>
    <view class="my-6">
      <img class="w-[136px] h-[171px] rounded-2xl" src="https://via.placeholder.com/136x171" />
      <div class="w-[347px] h-[145px] bg-white rounded-2xl shadow"></div>
    </view>
    <section-heading custom-class="my-6" title="设计圈"></section-heading>
    <moment-item></moment-item>
  </view>
</template>