|
|
@@ -1,11 +1,142 @@
|
|
|
<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>
|
|
|
- <view class="text-lg text-red-900">
|
|
|
- Hello World
|
|
|
+ <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="video-player min-h-80 max-w-full"
|
|
|
+ :src="videoSrc"
|
|
|
+ autoplay
|
|
|
+ loop
|
|
|
+ muted
|
|
|
+ :controls="false"
|
|
|
+ objectFit="fill"
|
|
|
+ />
|
|
|
+ <view class="content">
|
|
|
+ <image :src="left_top_logo" class="left-3 w-48 h-6" />
|
|
|
+ <view
|
|
|
+ class="content_text flex justify-between flex-col my-8 w-full h-5/6 items-center"
|
|
|
+ >
|
|
|
+ <view class="flex justify-center flex-col w-full items-center">
|
|
|
+ <view>为你的爱宠建档</view>
|
|
|
+ <view>制定专业喂养方案</view>
|
|
|
+ <view class="conten_science">
|
|
|
+ 科学喂养专业有爱
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex justify-center flex-col w-full items-center">
|
|
|
+ <view class="content_botton">
|
|
|
+ <button type="primary" class="content_botton_text">
|
|
|
+ 开始建档
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <view class="content_details">
|
|
|
+ 下拉了解详情
|
|
|
+ </view>
|
|
|
+ <view class="content_img">
|
|
|
+ <image :src="Rectangle" />
|
|
|
+ <image :src="Rectangle" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<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
|
|
|
+ objectfit: cover /* 修改适应方式为覆盖 */
|
|
|
+
|
|
|
+.content
|
|
|
+ position: absolute
|
|
|
+ box-sizing: border-box
|
|
|
+ top: 0
|
|
|
+ left: 0
|
|
|
+ width: 100%
|
|
|
+ height: 100%
|
|
|
+ padding: 23px
|
|
|
+ &_text
|
|
|
+ color: var(--Color, #fff)
|
|
|
+ text-align: center
|
|
|
+ font-family: "Source Han Sans CN"
|
|
|
+ font-size: 29px
|
|
|
+ font-style: normal
|
|
|
+ font-weight: 500
|
|
|
+ line-height: 37px /* 127.586% */
|
|
|
+ letter-spacing: 1.45px
|
|
|
+ .conten_science
|
|
|
+ color: var(--Color, #fff)
|
|
|
+ text-align: center
|
|
|
+ font-family: "Source Han Sans CN"
|
|
|
+ font-size: 12px
|
|
|
+ font-style: normal
|
|
|
+ font-weight: 400
|
|
|
+ line-height: 16px /* 133.333% */
|
|
|
+ letter-spacing: 0.6px
|
|
|
+
|
|
|
+ .content_botton
|
|
|
+ display: inline
|
|
|
+ padding: 5px 51px
|
|
|
+ justify-content: center
|
|
|
+ align-items: center
|
|
|
+ &_text
|
|
|
+ display: block
|
|
|
+ width: 176px
|
|
|
+
|
|
|
+ border-radius: 69px
|
|
|
+ background: #4545e5 /* 按钮 */
|
|
|
+ box-shadow: 0px 4px 12px 0px rgba(69, 69, 229, 0.3)
|
|
|
+ color: var(--Color, #fff)
|
|
|
+ text-align: center
|
|
|
+ font-family: "PingFang SC"
|
|
|
+ font-size: 18px
|
|
|
+ font-style: normal
|
|
|
+ font-weight: 400
|
|
|
+ line-height: 37px /* 205.556% */
|
|
|
+ letter-spacing: 0.36px
|
|
|
+
|
|
|
+ .content_details
|
|
|
+ margin-top: 20px
|
|
|
+ color: var(--Color, #fff)
|
|
|
+ text-align: center
|
|
|
+ font-family: "Source Han Sans CN"
|
|
|
+ font-size: 12px
|
|
|
+ font-style: normal
|
|
|
+ font-weight: 400
|
|
|
+ line-height: 16px /* 133.333% */
|
|
|
+ letter-spacing: 1.8px
|
|
|
+
|
|
|
+ .content_img
|
|
|
+ width: 16px
|
|
|
+ height: 16px
|
|
|
+ & image
|
|
|
+ background: #4545e5
|
|
|
</style>
|
