feat(study-tour): 班级卡片

src/assets/svgs/frame.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M7 16C3.134 16 0 12.8656 0 8.99975C0 5.13389 3.134 2 7 2C10.866 2 14 5.13389 14 8.99975C14 12.8656 10.866 16 7 16ZM7 3.00046C3.6865 3.00046 1 5.68687 1 9.00025C1 12.3136 3.6865 15 7 15C10.3135 15 13 12.3136 13 9.00025C13 5.68687 10.3135 3.00046 7 3.00046ZM9.25 9.50023H6.75C6.612 9.50023 6.5 9.38824 6.5 9.25024V8.75026V8.74976V4.7504C6.5 4.61241 6.612 4.50041 6.75 4.50041H7.25C7.388 4.50041 7.5 4.61241 7.5 4.7504V8.49977H9.25C9.388 8.49977 9.5 8.61176 9.5 8.74976V9.25024C9.5 9.38824 9.388 9.50023 9.25 9.50023Z" fill="black" fill-opacity="0.3"/>
+</g>
+</svg>

src/assets/svgs/peoples.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M4.44813 14.048C4.44813 11.264 6.72013 9.024 9.50413 9.056C11.5201 9.088 13.2801 10.368 14.0801 12.224C14.3361 12.864 14.4641 13.472 14.4641 14.048C14.4641 14.336 14.6881 14.592 14.9761 14.592H15.0401C15.3281 14.592 15.5841 14.368 15.5841 14.08C15.5841 11.456 13.9521 9.248 11.6481 8.352C12.6081 7.68 13.2481 6.56 13.2481 5.28C13.2801 3.232 11.6161 1.504 9.56813 1.44C7.36013 1.344 5.60013 3.072 5.60013 5.248C5.60013 6.528 6.24013 7.68 7.23213 8.352C4.96012 9.248 3.32812 11.456 3.32812 14.048V14.08C3.32812 14.336 3.55212 14.56 3.84012 14.56H3.96812C4.22412 14.56 4.44813 14.336 4.44813 14.048ZM6.75213 5.696C6.43213 3.84 8.03213 2.272 9.85613 2.592C10.9761 2.784 11.8721 3.68 12.0641 4.8C12.3841 6.656 10.7841 8.224 8.96013 7.904C7.84013 7.712 6.94413 6.816 6.75213 5.696Z" fill="black" fill-opacity="0.3"/>
+<path id="Vector_2" d="M5.05624 7.64799C4.03224 7.42399 3.29624 6.52799 3.29624 5.43999C3.29624 4.35199 4.06424 3.45599 5.08824 3.23199C5.28024 3.19999 5.44024 3.00799 5.44024 2.78399C5.44024 2.49599 5.15224 2.27199 4.86424 2.33599C3.42424 2.65599 2.33624 3.93599 2.33624 5.47199C2.33624 6.55999 2.88024 7.51999 3.71224 8.09599C1.79224 8.83199 0.448242 10.72 0.448242 12.896C0.448242 13.056 0.448242 13.184 0.480242 13.344V13.376C0.480242 13.632 0.704242 13.856 0.960242 13.856C1.21624 13.856 1.44024 13.632 1.44024 13.376V13.344C1.44024 13.216 1.40824 13.056 1.40824 12.896C1.40824 10.784 2.97624 9.02399 5.02424 8.73599C5.28024 8.70399 5.50424 8.47999 5.50424 8.19199C5.44024 7.93599 5.28024 7.71199 5.05624 7.64799Z" fill="black" fill-opacity="0.3"/>
+</g>
+</svg>

src/assets/svgs/polygon-16.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="5" viewBox="0 0 4 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Polygon 16" d="M4 2.5L0.25 4.66506L0.25 0.334936L4 2.5Z" fill="black" fill-opacity="0.45"/>
+</svg>

src/assets/svgs/right.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="union" d="M1.02539 0L0 1.03062L3.94922 5L0 8.96937L1.02539 10L6 5L1.02539 0Z" fill="black" fill-opacity="0.35"/>
+</svg>

src/components/section-heading.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { right } from '@/core/libs/svgs'
+
 defineProps({
   customClass: {
     type: String,
@@ -17,6 +19,7 @@ defineProps({
     </div>
     <div class="text-right text-black/30 text-sm font-normal font-['PingFang SC'] leading-tight">
       查看全部
+      <wd-img :src="right" width="10" height="10"></wd-img>
     </div>
   </view>
 </template>

src/core/libs/svgs.ts

@@ -0,0 +1,5 @@
+import polygon16 from '@/assets/svgs/polygon-16.svg'
+import frame from '@/assets/svgs/frame.svg'
+import peoples from '@/assets/svgs/peoples.svg'
+import right from '@/assets/svgs/right.svg'
+export { polygon16, frame, peoples, right }

src/pages/index/components/class-item.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { frame, peoples, polygon16 } from '@/core/libs/svgs'
+
+defineProps({
+  customClass: {
+    type: String,
+    default: () => '',
+  },
+  title: {
+    type: String,
+    default: () => '',
+  },
+})
+</script>
+<template>
+  <view class="my-6 relative h-43 flex items-end" :class="[customClass]">
+    <view class="absolute left-0 bottom-0 rounded-2xl overflow-hidden">
+      <wd-img
+        custom-class="vertical-bottom"
+        width="136"
+        height="172"
+        mode="scaleToFill"
+        src="https://via.placeholder.com/136x172"
+      />
+      <div
+        class="absolute left-2.5 bottom-2.5 px-2 py-1 bg-black/30 rounded-[20px] backdrop-blur-[10px]"
+      >
+        <div class="text-white text-[10px] font-normal font-['PingFang SC'] leading-relaxed">
+          米兰2班
+        </div>
+      </div>
+    </view>
+    <div
+      class="w-full h-[145px] pl-39 pt-6 pr-6 pb-6 flex flex-col box-border bg-white rounded-2xl shadow"
+    >
+      <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-normal">
+        2024届米兰国际家具展
+      </div>
+
+      <view
+        class="flex items-center justify-between text-black/60 text-sm font-normal font-['PingFang SC'] leading-[34px]"
+      >
+        <wd-img width="18" height="18" :src="frame"></wd-img>
+        <div class="">07.15</div>
+        <wd-img custom-class="mx-1" width="5" height="5" :src="polygon16" />
+        <div>08.10</div>
+        <view class="flex-1"></view>
+        <wd-img :src="peoples" width="16" height="16"></wd-img>
+        <div class="ml-1">45</div>
+      </view>
+      <view class="flex-1"></view>
+      <view
+        class="flex justify-between text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
+      >
+        <div class="">班长:李威</div>
+        <div class="">领队:王艺臻</div>
+      </view>
+    </div>
+  </view>
+</template>

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

@@ -9,6 +9,8 @@ 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'
+import { frame, peoples, polygon16 } from '@/core/libs/svgs'
+import ClassItem from '../components/class-item.vue'
 </script>
 <template>
   <view class="px-3.5">
@@ -87,10 +89,8 @@ import TiltedButton from '@/components/tilted-button.vue'
       </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>
+    <class-item></class-item>
+    <class-item></class-item>
     <section-heading custom-class="my-6" title="设计圈"></section-heading>
     <moment-item></moment-item>
   </view>