XEH-miniProgram/pages/index/index.vue

<template>
	<view class="page-wrap">
		<image class="banner banner-1" src="../../static/img_banner_1.jpg" mode="aspectFill"></image>
		<view class="category-panel">
			<view class="item" v-for="(item, index) in navList" :key="index" @click="handleOpenCategory">
				<image class="icon" src="../../static/auth-icon.png"></image>
				{{ item.label }}
			</view>
		</view>
		<image class="banner banner-2" src="../../static/img_banner_2.jpg" mode="aspectFill"></image>
		<view class="title-row">
			<view class="line"></view>
			<view class="point"></view>
			<view class="title">热门服务</view>
			<view class="point"></view>
			<view class="line"></view>
		</view>
		<view class="product-panel">
			<view class="item" v-for="(item, index) in [1, 2, 3, 4, 5]" :key="index">
				<image class="img" src="../../static/img_banner_1.jpg" mode="aspectFill"></image>
				<view class="name">财务大包（年度）</view>
				<view class="desc">超值低价，便捷省心</view>
			</view>
		</view>
		<view class="title-row">
			<view class="line"></view>
			<view class="point"></view>
			<view class="title">关于我们</view>
			<view class="point"></view>
			<view class="line"></view>
		</view>
		<image class="banner banner-3" src="../../static/img_home_about.png" mode="aspectFit"></image>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navList: [
				{
					label: '记账报税',
					value: 1
				},
				{
					label: '税控托管',
					value: 2
				},
				{
					label: '社保代缴',
					value: 3
				},
				{
					label: '出口退税',
					value: 4
				},
				{
					label: '财税代办',
					value: 5
				},
				{
					label: '工商代办',
					value: 6
				},
				{
					label: '资质许可',
					value: 7
				},
				{
					label: '超值套餐',
					value: 8
				}
			]
		};
	},
	methods: {
		handleOpenCategory() {
			uni.navigateTo({
				url: 'product/category'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>