视频播放

src/main.js

@@ -20,9 +20,9 @@ function platCheck() {
     const mobileKeywords = ['iphone', 'ipod', 'android', 'silk', 'blackberry', 'bb10', 'phone', 'mobile', 'kindle', 'opera mini', 'mobile safari', 'windows phone'];
     const isMobileDevice = mobileKeywords.some(keyword => userAgent.includes(keyword));
     if (!isMobileDevice) {
-        // let _href = window.location.href;
+        let _href = window.location.href;
-        // let _origin = window.location.origin;
+        let _origin = window.location.origin;
-        // window.location.href = _href.replace(_origin, import.meta.env.VITE_PC_HOST);
+        window.location.href = _href.replace(_origin, import.meta.env.VITE_PC_HOST);
     }
 }
 platCheck();

src/views/communication/home.vue

@@ -147,69 +147,126 @@
       <div class="text-center mt-62px text-45px font-light">
         海兔直播分身优势
       </div>
-      <div class="text-32px font-bold text-center mt-60px z-99">
+      <div class="text-32px font-bold text-center mt-60px z-99">传统直播</div>
-        传统直播
-      </div>
       <div class="mt-30px">
-        <img class="w-447px mx-auto " src="@/assets/images/stream/9.png" alt="" srcset="">
+        <img
+          class="w-447px mx-auto"
+          src="@/assets/images/stream/9.png"
+          alt=""
+          srcset=""
+        />
       </div>
 
       <div class="grid grid-cols-2 gap-20px px-30px -mt-90px">
         <TagItem text="启用演员、摄制组和工作室">
-          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" /> 
+          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" />
         </TagItem>
         <TagItem text="制作一个视频的时间：3天">
-          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" /> 
+          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" />
         </TagItem>
         <TagItem text="后期制作需要视频剪辑技能">
-          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" /> 
+          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" />
         </TagItem>
         <TagItem text="一旦完成拍摄，很难更新内容">
-          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" /> 
+          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" />
         </TagItem>
       </div>
-      <div class="text-32px font-bold text-center mt-80px z-99">
+      <div class="text-32px font-bold text-center mt-80px z-99">海兔分身</div>
-        海兔分身
+      <img
-      </div>
+        class="w-450px mx-auto mt-40px"
-      <img class="w-450px mx-auto mt-40px" src="@/assets/images/stream/102.png" alt="" srcset="">
+        src="@/assets/images/stream/102.png"
-   
+        alt=""
+        srcset=""
+      />
+
       <div class="grid grid-cols-2 gap-y-10px px-12px">
         <TagItem text="应用程序简单，支持多端操作">
-          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" /> 
+          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" />
         </TagItem>
         <TagItem text="制作一个视频的平均时间：5分钟">
-          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" />  
+          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" />
         </TagItem>
         <TagItem text="界面简单直观，适合初学者">
-          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" /> 
+          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" />
         </TagItem>
         <TagItem text="随时随地快速更新视频内容">
-          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" /> 
+          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" />
         </TagItem>
       </div>
-      
     </div>
     <div class="mt-138px">
-      <div class="text-45px font-light text-white text-center">快来打造您的数字身份吧！</div>
+      <div class="text-45px font-light text-white text-center">
+        快来打造您的数字身份吧！
+      </div>
       <div class="flex justify-center mt-40px">
-        <img class="w-193px mx-11px" src="@/assets/images/stream/l2.png" alt="">
+        <img
-        <img class="w-193px mx-11px" src="@/assets/images/stream/l3.png" alt="">
+          @click="onPlay(item)"
-        <img class="w-193px mx-11px" src="@/assets/images/stream/l4.png" alt="">
+          v-for="(item, i) in videos"
+          :key="i"
+          class="w-193px mx-11px"
+          :src="item.img"
+          alt=""
+        />
       </div>
       <div class="mt-54px text-center pb-192px">
-        <van-button type="primary" class="!rounded-full w-300px !h-68px !text-23px">联系我们</van-button>
+        <van-button
+          type="primary"
+          class="!rounded-full w-300px !h-68px !text-23px"
+          >联系我们</van-button
+        >
       </div>
     </div>
-  
+
+    <van-popup
+      v-model:show="videoShow"
+      position="center"
+      :style="{ background: 'none', width: '70%' }"
+    >
+      <div class="">
+        <video v-if="videoShow" controls autoplay :src="video.video"></video>
+        <div class="flex justify-center mt-40px">
+          <SvgIcon
+            @click="videoShow = false"
+            class="text-base"
+            name="close"
+          ></SvgIcon>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
 <script setup>
 import TagItem from './components/tag-item.vue'
+import videoBg2 from '@/assets/images/stream/l2.png'
+import videoBg3 from '@/assets/images/stream/l3.png'
+import videoBg4 from '@/assets/images/stream/l4.png'
+import { ref } from 'vue'
+const videoShow = ref(false)
+const video = ref(null)
+const videos = ref([
+  {
+    img: videoBg2,
+    video: 'https://haitu-ai.oss-cn-beijing.aliyuncs.com/videos/2.mp4',
+  },
+  {
+    img: videoBg3,
+    video: 'https://haitu-ai.oss-cn-beijing.aliyuncs.com/videos/3.mp4',
+  },
+  {
+    img: videoBg4,
+    video: 'https://haitu-ai.oss-cn-beijing.aliyuncs.com/videos/4.mp4',
+  },
+])
+
+const onPlay = (e) => {
+  video.value = e
+  videoShow.value = true
+}
 </script>
 <style lang="scss">
-.bg01{
+.bg01 {
   background: url('@/assets/images/stream/bg01.png') no-repeat;
   background-position: center;
   background-size: auto 100%;
 }
-</style>
+</style>