haitu
/
aigc-h5
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

视频播放

master
ihzero 2023-08-18 23:49:47 +08:00
parent aeabc3efb7
commit 50ee303575
2 changed files with 86 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main.js
View File

@ -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 _origin = window.location.origin;
// window.location.href = _href.replace(_origin, import.meta.env.VITE_PC_HOST);
let _href = window.location.href;
let _origin = window.location.origin;
window.location.href = _href.replace(_origin, import.meta.env.VITE_PC_HOST);
}
}
platCheck();

109
src/views/communication/home.vue
View File

@ -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>
<div class="text-32px font-bold text-center mt-60px z-99">传统直播</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>
<img class="w-450px mx-auto mt-40px" src="@/assets/images/stream/102.png" alt="" srcset="">
<div class="text-32px font-bold text-center mt-80px z-99">海兔分身</div>
<img
class="w-450px mx-auto mt-40px"
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 class="w-193px mx-11px" src="@/assets/images/stream/l3.png" alt="">
<img class="w-193px mx-11px" src="@/assets/images/stream/l4.png" alt="">
<img
@click="onPlay(item)"
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>