|
|
@@ -26,30 +26,39 @@ const videoSrc = ref(
|
|
|
muted
|
|
|
:controls="false"
|
|
|
/>
|
|
|
- <view class="content">
|
|
|
+ <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 my-8 w-full h-5/6 items-center"
|
|
|
+ class="content_text flex justify-between flex-col w-full h-full items-center "
|
|
|
>
|
|
|
- <view class="flex justify-center flex-col w-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="conten_science">
|
|
|
+ <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">
|
|
|
- <view class="content_botton">
|
|
|
- <button type="primary" class="content_botton_text">
|
|
|
+ <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">
|
|
|
+ <view class="content_details tracking-[1.8px] mt-[40px] text-[12px] font-normal ">
|
|
|
下拉了解详情
|
|
|
</view>
|
|
|
- <view class="content_img">
|
|
|
- <image :src="Rectangle" />
|
|
|
- <image :src="Rectangle" />
|
|
|
+ <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>
|
|
|
@@ -75,69 +84,4 @@ const videoSrc = ref(
|
|
|
controlslist: none
|
|
|
aspect-ratio: 16 / 9
|
|
|
object-fit: 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>
|
