pet-system-merchant-app/pages/index/index.vue

<template>
	<view class="home-page">
		<!-- 顶部背景与搜索区域 @Author: Antigravity -->
		<view class="header-section">
			<image src="/static/images/index-header.png" class="header-bg" mode="widthFix"></image>
		</view>

		<!-- 系统通知栏 @Author: Antigravity -->
		<view class="notice-section">
			<view class="notice-bar">
				<image src="/static/images/index-notice.png" class="notice-icon" mode="aspectFit"></image>
				<text class="notice-text">【重要通知】尊敬的用户，由于近期接送需求激增，请各位宠主尽量提前24小时进行服务预约，感谢您的理解与配合！</text>
			</view>
		</view>

		<!-- 业务导航区 (左1右2) @Author: Antigravity -->
		<view class="main-nav-section">
			<view class="nav-container">
				<!-- 左侧大按钮: 宠物接送 -->
				<view class="nav-card large-card">
					<image src="/static/images/pickup-dropoff.png" class="card-bg" mode="aspectFill"></image>
					<view class="card-info">
						<text class="card-title">宠物接送</text>
						<text class="card-desc">支持单操/往返服务</text>
					</view>
				</view>

				<!-- 右侧分栏 -->
				<view class="right-stack">
					<!-- 右上: 上门喂遛 -->
					<view class="nav-card small-card">
						<image src="/static/images/feed-walk.png" class="card-bg" mode="aspectFill"></image>
						<view class="card-info">
							<text class="card-title">上门喂遛</text>
							<text class="card-desc">每次上门基础费用</text>
						</view>
					</view>
					
					<!-- 右下: 上门洗护 -->
					<view class="nav-card small-card">
						<image src="/static/images/laundry-clean.png" class="card-bg" mode="aspectFill"></image>
						<view class="card-info">
							<text class="card-title">上门洗护</text>
							<text class="card-desc">每次上门基础费用</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script setup>
import customTabbar from '@/components/custom-tabbar/index.vue'

/** 首页脚本 @Author: Antigravity */
</script>

<style lang="scss" scoped>
.home-page {
	background: #f8f9fb;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* ====== 顶部搜索与背景 ====== */
.header-section {
	position: relative;
	width: 100%;
}
.header-bg {
	width: 100%;
	display: block;
}

/* ====== 通知栏 ====== */
.notice-section {
	padding: 20rpx 32rpx;
}
.notice-bar {
	display: flex;
	align-items: center;
	background: #fffbef;
	border-radius: 20rpx;
	padding: 16rpx 24rpx;
	gap: 16rpx;
}
.notice-icon {
	width: 40rpx;
	height: 40rpx;
	flex-shrink: 0;
}
.notice-text {
	font-size: 24rpx;
	color: #e6a23c;
	line-height: 1.4;
}

/* ====== 核心卡片布局 @Author: Antigravity ====== */
.main-nav-section {
	padding: 10rpx 32rpx;
}
.nav-container {
	display: flex;
	height: 380rpx;
	gap: 20rpx;
}

.nav-card {
	border-radius: 24rpx;
	position: relative;
	overflow: hidden;
	background: #fff;
}

.card-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.card-info {
	position: relative;
	z-index: 2;
	padding: 30rpx 24rpx;
}

.large-card {
	flex: 1;
}
.right-stack {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}
.small-card {
	flex: 1;
}

.card-title {
	font-size: 32rpx;
	font-weight: 800;
	color: #333;
	margin-bottom: 4rpx;
	display: block;
}
/* 根据图片色系微调文字颜色以匹配 UI 稿 */
.large-card .card-title { color: #d35400; }
.right-stack .small-card:first-child .card-title { color: #2c5ba7; }
.right-stack .small-card:last-child .card-title { color: #c0392b; }

.card-desc {
	font-size: 20rpx;
	color: #8e8e8e;
	display: block;
}

</style>