Browse Source

feat: 引入 ImageEvo 组件替代 wd-img,优化首页视频封面展示;调整行程卡片的点击区域样式

EvilDragon 3 months ago
parent
commit
9b3341f82e

+ 3 - 1
packages/app/src/pages/home/components/home-banner.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ImageEvo from '@/components/image-evo.vue'
 import { unix } from 'dayjs'
 
 const props = withDefaults(
@@ -37,7 +38,8 @@ onMounted(async () => {
       @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" />
+      <!-- <wd-img width="100%" height="100%" :src="cover" /> -->
+      <ImageEvo :src="cover"></ImageEvo>
     </div>
     <div
       v-if="!playing"

+ 9 - 8
packages/app/src/pages/home/components/schedule-card.vue

@@ -100,14 +100,15 @@ onMounted(() => {
         class="absolute bottom-0 left-0 right-0 px-3.5 py-7 flex flex-col items-center"
         v-show="imgDisplayed"
       >
-        <wd-icon
-          custom-class="relative bottom-6"
-          :name="data?.length > 2 ? 'arrow-up' : 'arrow-down'"
-          size="22px"
-          color="#4f4f4f"
-          @click="data?.length > 2 ? push() : pull()"
-        ></wd-icon>
-        <view class="w-full duration-800">
+        <div class="p-4 relative" @click="data?.length > 2 ? push() : pull()">
+          <wd-icon
+            custom-class=""
+            :name="data?.length > 2 ? 'arrow-up' : 'arrow-down'"
+            size="22px"
+            color="#4f4f4f"
+          ></wd-icon>
+        </div>
+        <view class="w-full">
           <wd-button block size="large" custom-class="rd!" @click="handleClick">
             查看全部行程
           </wd-button>

+ 0 - 25
packages/app/src/pages/home/index.vue

@@ -135,31 +135,6 @@ onShareAppMessage(async ({ from, target }) => {
         >
           <swiper-item>
             <HomeBanner :id="id" :url="indexPromotionalVideoImage" :cover="coverVideoImage" />
-            <!-- <div class="w-full h-full relative">
-              <video
-                class="w-full h-full"
-                :id="`video-${id}`"
-                :src="indexPromotionalVideoImage"
-              ></video>
-              <div v-if="!playing" class="absolute left-0 top-0 w-full h-full bg-black">
-                <wd-img width="100%" height="100%" :src="coverVideoImage" />
-              </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! border-white! text-white!"
-                    icon="play"
-                    @click="handlePlay"
-                  >
-                    02:30
-                  </wd-button>
-                </view>
-              </div>
-            </div> -->
           </swiper-item>
         </template>
       </swiper>