feat(home): 添加首页轮播图组件并优化图片按钮

- 新增 HomeBanner 组件用于首页轮播图
- 更新 img-btn-evo 组件，增加颜色属性- 调整 study-tour 页面布局
- 优化 home 页面结构，集成新组件

packages/app/src/components/img-btn-evo.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ size?: 'large' | '110x44' }>(), { size: 'large' })
+const props = withDefaults(defineProps<{ size?: 'large' | '110x44'; color?: 'black' }>(), {
+  size: 'large',
+  color: 'black',
+})
 const width = computed(() => Number(props.size.split('x')[0]) * 2 + 'rpx')
 const height = computed(() => Number(props.size.split('x')[1]) * 2 + 'rpx')
 const types = [
@@ -10,17 +13,23 @@ const types = [
   },
   {
     size: 'large',
+    color: 'black',
+    width: 110,
+    height: 44,
     src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA1IiBoZWlnaHQ9IjQ0IiB2aWV3Qm94PSIwIDAgMTA1IDQ0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTMuMzM1MSA1LjY4MzU2QzE0Ljk5NyAyLjIxMDQ4IDE4LjUwNTMgMCAyMi4zNTU1IDBIOTVDMTAwLjUyMyAwIDEwNSA0LjQ3NzE1IDEwNSAxMFYzNEMxMDUgMzkuNTIyOCAxMDAuNTIzIDQ0IDk1IDQ0SDkuMjg0QzIuNjYxNTYgNDQgLTEuNjkyOTMgMzcuMDg4OSAxLjE2NTYgMzEuMTE1MkwxMy4zMzUxIDUuNjgzNTZaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+Cjwvc3ZnPgo=',
   },
 ]
+const type = computed(() =>
+  types.find(({ size, color }) => props.size === size && props.color === color),
+)
 </script>
 <template>
   <div
     class="flex items-center justify-center bg-[length:100%_100%] text-white pl-4 pr-2 box-border text-white text-base font-normal font-['PingFang_SC'] leading-tight"
     :style="{
-      width,
-      height,
-      backgroundImage: `url(${types.find((it) => props.size === it.size).src})`,
+      width: type.width * 2 + 'rpx',
+      height: type.height * 2 + 'rpx',
+      backgroundImage: `url(${type.src})`,
     }"
   >
     <slot></slot>

packages/app/src/pages/home/components/home-banner.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import dayjs, { unix } from 'dayjs'
+
+const props = withDefaults(
+  defineProps<{
+    id: string | number
+    url: string
+    cover: string
+    videoContext?: UniNamespace.VideoContext
+  }>(),
+  {},
+)
+const playing = ref(false)
+const duration = ref(0)
+const durationText = computed(() => unix(duration.value).format('mm:ss'))
+const handlePlay = () => {
+  props.videoContext?.play()
+  playing.value = true
+}
+const handleLoadedMetaData = ({ detail }) => {
+  duration.value = detail.duration
+}
+onMounted(async () => {
+  // props.videoContext?
+})
+</script>
+<template>
+  <div class="w-full h-full relative">
+    <video
+      class="w-full h-full"
+      :id="`video-${id}`"
+      :src="url"
+      @loadedmetadata="handleLoadedMetaData"
+    ></video>
+    <div v-if="!playing" class="absolute left-0 top-0 w-full h-full bg-black">
+      <wd-img width="100%" height="100%" :src="cover" />
+    </div>
+    <div
+      v-if="!playing"
+      class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
+    >
+      <view class="mx-7">
+        <wd-button
+          plain
+          custom-class="bg-transparent! text-white! w-20.5! min-w-20! h-8.25! border! border-solid! border-white!"
+          @click="handlePlay"
+        >
+          <div class="flex items-center">
+            <wd-icon name="play" size="22px"></wd-icon>
+            <div class="text-white text-[13px] font-['Gotham'] leading-[10.18px]">
+              {{ durationText }}
+            </div>
+          </div>
+        </wd-button>
+      </view>
+    </div>
+  </div>
+</template>

packages/app/src/pages/home/index.vue

@@ -13,6 +13,7 @@
 import Card from '@/components/card.vue'
 import HotActivity from '@/components/hot-activity.vue'
 import MomentItem from '@/components/moment-item.vue'
+import HomeBanner from './components/home-banner.vue'
 import useRequest from '../../hooks/useRequest'
 import Menus from './components/menus.vue'
 import { getCircles, getSetIndexConfigs, shareCircle } from '../../core/libs/requests'
@@ -91,12 +92,19 @@ onShareAppMessage(async ({ from, target }) => {
         <template
           v-for="{
             data: { id, coverVideoImage, indexPromotionalVideoImage },
+            videoContext,
             playing,
           } of swiperData"
           :key="id"
         >
           <swiper-item>
-            <div class="w-full h-full relative">
+            <HomeBanner
+              :id="id"
+              :url="indexPromotionalVideoImage"
+              :cover="coverVideoImage"
+              :playing="playing"
+            />
+            <!-- <div class="w-full h-full relative">
               <video
                 class="w-full h-full"
                 :id="`video-${id}`"
@@ -120,7 +128,7 @@ onShareAppMessage(async ({ from, target }) => {
                   </wd-button>
                 </view>
               </div>
-            </div>
+            </div> -->
           </swiper-item>
         </template>
       </swiper>

packages/app/src/pages/home/study-tour/index.vue

@@ -143,7 +143,7 @@ onMounted(async () => {
         筑巢荟-设计游学
       </div>
       <div
-        class="w-[319px] h-[264px] text-justify text-black/40 text-base font-normal font-['PingFang_SC'] leading-relaxed"
+        class="text-justify text-black/40 text-base font-normal font-['PingFang_SC'] leading-relaxed"
       >
         我们为您精心打造了一个独特且极具价值的游学项目。这个项目的核心旨在全方位提升您作为设计师的能力。
         在这里，您将拥有无比优质的游学资源。我们与全球知名的设计学府、顶尖设计工作室以及具有代表性的经典建筑和室内空间建立了紧密合作。您将有机会深入这些卓越的场所，亲身体验最前沿的设计理念和实践。