2

pages/index/home.uvue

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