hhrs/pages/index/index.vue

<template>
	<view class="page">
		<!-- 顶部 Banner -->
		<view class="banner">
			<image class="banner-img" src="https://aliyunoss.hn12301.net/hhrs/hhrs_header.png" mode="widthFix"></image>
		</view>

		<!-- 金刚区 -->
		<view class="king-area">
			<view class="king-item" v-for="(item, index) in kingList" :key="index" @click="goPage(item.url)">
				<image class="king-icon" :src="item.icon" mode="widthFix"></image>
				<text class="king-text">{{ item.text }}</text>
			</view>
		</view>

		<!-- 活动指南 -->
		<view class="guide-section">
			<view class="section-title">
				<view class="title-line"></view>
				<text class="title-text">活动指南</text>
			</view>
			<view class="guide-list">
				<view class="guide-card" v-for="(item, index) in guideList" :key="index" @click="goPage(item.url)">
					<image class="guide-bg" :src="item.bg" mode="scaleToFill"></image>
					<view class="guide-info">
						<text class="guide-title">{{ item.title }}</text>
						<text class="guide-sub">{{ item.sub }}</text>
						<view class="guide-tag">官方指南</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kingList: [
<<<<<<< Updated upstream
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_wlcg.png', url: '/pages/venue/venue' },
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_shzk.png', url: '/pages/discount/discount' },
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_qyb.png', url: '/pages/rights/rights' },
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_zjmd.png', url: '/pages/winners/winners' }
=======
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_wlcg.png', text: '文旅场馆', url: '/pages/venue/venue' },
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_shzk.png', text: '商户折扣', url: '/pages/discount/discount' },
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_qyb.png', text: '权益包', url: '/pages/rights/rights', isRights: true },
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_zjmd.png', text: '中奖名单', url: '/pages/winners/winners' }
>>>>>>> Stashed changes
				],
				guideList: [
					{
						title: '怀化社保卡惠民活动参加指南',
						sub: '本地文旅场馆、商户惠民福利',
						bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_cjzn.png',
						url: '/pages/guide/join'
					},
					{
						title: '社保卡领取及使用指南',
						sub: '全流程办理及激活指引',
						bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_syzn.png',
						url: '/pages/guide/use'
					}
				]
			}
		},
		onLoad() {},
		methods: {
			goPage(url) {
				uni.navigateTo({ url })
			}
		}
	}
</script>

<style>
	.page {
<<<<<<< Updated upstream
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
=======
		height: 100vh;
		background-color: #F2F2F7;
		font-family: 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
>>>>>>> Stashed changes
	}

	.banner-img {
		width: 100%;
		display: block;
	}

	/* 金刚区 */
	.king-area {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.king-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.king-icon {
		width: 100rpx;
		height: 132rpx;
		margin-bottom: 12rpx;
	}

	.king-text {
		font-size: 24rpx;
		color: #333333;
		text-align: center;
	}

	/* 活动指南 */
	.guide-section {
		background-color: #ffffff;
		margin-top: 10rpx;
		padding: 24rpx 20rpx;
		flex: 1;
	}

	.section-title {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 24rpx 0;
	}

	.title-line {
		width: 6rpx;
		height: 32rpx;
		background-color: #0088FF;
		border-radius: 3rpx;
		margin-right: 12rpx;
	}

	.title-text {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.guide-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding: 0;
	}

	.guide-card {
		position: relative;
		width: 100%;
		height: 252rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.guide-bg {
		width: 702rpx;
		height: 252rpx;
		border-radius: 16rpx;
	}

	.guide-info {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
	}

	.guide-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #0088FF;
		margin-bottom: 10rpx;
	}

	.guide-sub {
		font-size: 22rpx;
		color: #949AA0;
		margin-bottom: 16rpx;
	}

	.guide-tag {
		display: inline-block;
		width: fit-content;
		padding: 4rpx 16rpx;
		background-color: #00C0E8;
		color: #ffffff;
		font-size: 20rpx;
		border-radius: 6rpx;
	}


</style>