youxi-app/pages/index/home.uvue

<template>
	<cl-page>
		<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>

<script lang="ts" setup>
import { ref } from 'vue'
function handleLogin() {
	uni.navigateTo({
		url: '/pages/user/login'
	})
}
</script>

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