Merge branch 'feature/home' of 1-bright/frontend-uniapp into main

src/pages/home/index.vue

@@ -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>