frontend-uniapp/src/pages/home/index.vue

<script setup lang="ts">
import left_top_logo from '@/static/image/shouye/lt_logo.png'
import Rectangle from '@/static/image/shouye/Rectangle.png'
import ToolFun from '@/utils/index'

const titleName = ref<string>('首页')
const safeHeight = ToolFun.getSafeHeight()
const videoSrc = ref(
  'https://test-cos-1308655658.cos.ap-shanghai.myqcloud.com/bright-intro-video.mp4',
)
</script>

<template>
  <TitleBar :title-name="titleName" />
  <view
    class="flex flex-col bg-[#F5F6F7] overflow-y-auto"
    :style="`height: calc(100vh - ${safeHeight}px)`"
  >
    <view class="container">
      <video
        class="absolute top-0 left-0 w-screen h-screen"
        :src="videoSrc"
        autoplay
        loop
        object-fit="cover"
        muted
        :controls="false"
      />
      <view class="content absolute  box-border top-0 left-0 w-full h-full p-[23px]">
        <image :src="left_top_logo" class="left-3 w-48 h-6" />
        <view
          class="content_text flex justify-between flex-col  w-full h-full items-center "
        >
          <view
            class="flex justify-center flex-col text-[29px] w-full items-center mt-[100px]
          tracking-[5.45px] text-[#FFF] leading-[37px]"
          >
            <view>为你的爱宠建档</view>
            <view>制定专业喂养方案</view>
            <view class="mt-[15px]  text-[12px] text-center font-normal tracking-[1.45px] leading-[16px]">
              科学喂养专业有爱
            </view>
          </view>
          <view class="flex justify-center flex-col w-full items-center h-full mt-[200px] text-[#FFF]">
            <view
              class="content_botton flex w-[176px] h-[47px] justify-center
              items-center bg-[#4545E5] rounded-[69px]"
            >
              <button
                class=" text-[18px] font-normal
              tracking-[.36px] leading-[37px] shrink-0"  hover-class="bg-[#4545E5]"
              >
                开始建档
              </button>
            </view>
            <view class="content_details tracking-[1.8px] mt-[40px] text-[12px] font-normal ">
              下拉了解详情
            </view>
            <view class="content_img mt-[15px]">
              <image :src="Rectangle" class="w-[15px] h-[8.485px] shrink-0 stroke-[2px] fill-white stroke-white" />
              <image :src="Rectangle" class="w-[15px] h-[8.485px] shrink-0 stroke-[2px] fill-white stroke-white" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="sass" scoped>
.container
  position: relative
  width: 100%
  height: 650px /* 根据需要设置视频容器的高度 */
  /* display: flex; */
  overflow: hidden
  padding-top: calc(100% / (16 / 9)) /* 视频宽高比 */
  .video-player
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    controlslist: none
    aspect-ratio: 16 / 9
    object-fit: cover
</style>