youxi-app/pages/index/home.uvue

<script lang="ts" setup>
function handlePage(url) {
	uni.navigateTo({
		url
	})
}
</script>
<template>
	<cl-page>
		<img src="/static/home/11.png" alt="" class="w-full h-full object-cover" />
		<view class="content">
			<view class="relative w-[25vw] " @click="handlePage('/pages/catalog/index')">
				<img src="/static/home/13.png" alt="" class="w-full object-cover" />
				<view class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pb-3">
					<view class="text-2xl font-bold">全部课程</view>
					<view class="text-[11px] px-2 py-1 rounded-full bg-[#55B58A] text-white font-bold mt-2">点击这里查看上过课程</view>
				</view>
			</view>
			<view class="relative w-[50vw] ">
				<cl-row>
					<cl-col :span="12" :pt="{ className: '!p-3' }">
						<view class="relative w-full ">
							<img src="/static/home/14.png" alt="" class="w-full object-cover" />
							<view class="absolute top-4 left-5">
								<view class="text-2xl font-bold">虚拟实验</view>
							</view>
							<view class="absolute bottom-5 right-3">
								<img src="/static/home/17.png" alt="" class="w-[16vw] object-cover" />
							</view>
						</view>
					</cl-col>
					<cl-col :span="12" :pt="{ className: '!p-3' }">
						<view class="relative w-full ">
							<img src="/static/home/15.png" alt="" class="w-full object-cover" />
							<view class="absolute top-4 left-5">
								<view class="text-2xl font-bold">学习报告</view>
							</view>
							<view class="absolute bottom-1 right-3">
								<img src="/static/home/18.png" alt="" class="w-[15vw] object-cover" />
							</view>
						</view>
					</cl-col>
					<cl-col :span="12" :pt="{ className: '!p-3' }" @click="handlePage('/pages/card/index')">
						<view class="relative w-full ">
							<img src="/static/home/16.png" alt="" class="w-full object-cover" />
							<view class="absolute top-4 left-5">
								<view class="text-2xl font-bold">我的收获</view>
							</view>
							<view class="absolute bottom-2 right-2">
								<img src="/static/home/19.png" alt="" class="w-[20vw] object-cover" />
							</view>
						</view>
					</cl-col>
				</cl-row>
			</view>
		</view>
	</cl-page>
</template>
<style lang="scss" scoped>
.content {
	@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[80vw] flex flex-row items-center justify-between gap-4;
}
</style>