|
|
@@ -1,7 +1,19 @@
|
|
|
<template>
|
|
|
<cl-page>
|
|
|
- sdsds
|
|
|
- <cl-button @tap="handleLogin">登录</cl-button>
|
|
|
+ <img src="/static/home/2.png" alt="" class="w-full h-full object-cover">
|
|
|
+ <cl-image src="/static/home/8.png" mode="widthFix" class="!absolute bottom-0 left-0 !w-[20vw] !h-[50vh] z-[1]" />
|
|
|
+ <cl-button @tap="handleLogin" class="!absolute top-10 left-10 z-[1]">登录</cl-button>
|
|
|
+ <view class="boxs">
|
|
|
+ <scroll-view class="scroll-view_H" direction="horizontal" :scroll-left="120" :show-scrollbar="false">
|
|
|
+ <view class="scroll-view-item_H bg-[white]"><text class="text">A</text></view>
|
|
|
+ <view class="scroll-view-item_H bg-[white]"><text class="text">B</text></view>
|
|
|
+ <view class="scroll-view-item_H bg-[white]"><text class="text">C</text></view>
|
|
|
+ <view class="scroll-view-item_H bg-[white]"><text class="text">C</text></view>
|
|
|
+ <view class="scroll-view-item_H bg-[white]"><text class="text">C</text></view>
|
|
|
+ <view class="scroll-view-item_H bg-[white]"><text class="text">C</text></view>
|
|
|
+ <view class="scroll-view-item_H bg-[white]"><text class="text">C</text></view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
</cl-page>
|
|
|
</template>
|
|
|
|
|
|
@@ -14,4 +26,18 @@ function handleLogin() {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.boxs {
|
|
|
+ @apply w-[70vw] h-[50vh] absolute top-1/2 right-5 z-[1];
|
|
|
+ transform: translateY(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-view_H {
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: row;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-view-item_H {
|
|
|
+ @apply w-[40vh] h-[50vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px];
|
|
|
+}
|
|
|
+</style>
|
