health-front/pages/index/index.vue

<template>
	<view class="page__view">

		<navbar bgColor="#FFFFFF" >
			<image class="nav-icon" src="@/static/image/icon-nav.png" mode="widthFix"></image>
		</navbar>

		<view class="content">
			<productSwiper :list="productSwiperList"></productSwiper>

			<view class="section">
				<sectionHeader title="个性推荐" desc="Personal Recommendation"></sectionHeader>
				<recommend-swiper :list="recommendList"></recommend-swiper>
				<health-records-intro :list="detectionStepList"></health-records-intro>
			</view>

			<view class="section">
				<achievement-intro :list="achievementList"></achievement-intro>
			</view>

			<view class="section">
				<sectionHeader title="团队成员背景" desc="Background of Team Members"></sectionHeader>
				<team-bg-intro :list="medicineList"></team-bg-intro>
			</view>

			<view class="section">
				<sectionHeader desc="Background of Team Members">
					<template #title>
						关注我们<br/>参与更多健康活动
					</template>
				</sectionHeader>
				<follow-us-intro :articleList="followReasonList" :wayList="followWayList"></follow-us-intro>
			</view>

		</view>

		<tabber select="home" />
		
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import sectionHeader from '@/components/home/sectionHeader.vue'
	import productSwiper from '@/components/home/productSwiper.vue'
	import recommendSwiper from '@/pages_order/home/recommendSwiper.vue'
	import healthRecordsIntro from '@/pages_order/home/healthRecordsIntro.vue'
	import achievementIntro from '@/pages_order/home/achievementIntro.vue'
	import teamBgIntro from '@/pages_order/home/teamBgIntro.vue'
	import followUsIntro from '@/pages_order/home/followUsIntro.vue'

	export default {
		components: {
			productSwiper,
			sectionHeader,
			recommendSwiper,
			healthRecordsIntro,
			achievementIntro,
			teamBgIntro,
			followUsIntro,
			tabber,
		},
		data() {
			return {
				productSwiperList: [],
				recommendList: [],
				detectionStepList: [],
				achievementList: [],
				medicineList: [],
				followReasonList: [],
				followWayList: [],
			}
		},
		onLoad() {

			this.productSwiperList = [
				{ 
					id: '001', 
					url: '', 
					arr: [
						{ text: '你是独一无二的', class: 'font1' }, 
						{ text: '你的健康数据也是', class: 'font2' }, 
						{ text: '普兆，即精准', class: 'font3' }, 
					],
					btns: [
						{ text: '全部产品', path: '/pages_order/auth/wxLogin' },
						{ text: '定制健康档案', path: '/pages_order/auth/wxLogin' },
					],
				},
				{ 
					id: '002', 
					url: '', 
					arr: [
						{ text: '你是独一无二的', class: 'font1' }, 
						{ text: '你的健康数据也是', class: 'font2' }, 
						{ text: '普兆，即精准', class: 'font3' }, 
					],
					btns: [
						{ text: '全部产品', path: '/pages_order/auth/wxLogin' },
						{ text: '定制健康档案', path: '/pages_order/auth/wxLogin' },
					],
				},
				{ 
					id: '003', 
					url: '', 
					arr: [
						{ text: '你是独一无二的', class: 'font1' }, 
						{ text: '你的健康数据也是', class: 'font2' }, 
						{ text: '普兆，即精准', class: 'font3' }, 
					],
					btns: [
						{ text: '全部产品', path: '/pages_order/auth/wxLogin' },
						{ text: '定制健康档案', path: '/pages_order/auth/wxLogin' },
					],
				},
			]

			this.recommendList = [
				{ 
					id: '001', 
					url: '', 
					arr: [
						{ text: '你的身体在“说话”', class: 'font1' }, 
						{ text: '你听懂了吗？', class: 'font2' }, 
						{ text: '5分钟问卷', class: 'font3' }, 
					],
					btn: { text: 'Al定制方案', path: '/pages_order/auth/wxLogin' },
				},
				{ 
					id: '002', 
					url: '', 
					arr: [
						{ text: '你的健康', class: 'font1' }, 
						{ text: '需要“管理员”', class: 'font2' }, 
						{ text: '私人营养师全程跟进', class: 'font3' }, 
					],
					btn: { text: '领取管家', path: '/pages_order/auth/wxLogin' },
				},
				{ 
					id: '003', 
					url: '', 
					arr: [
						{ text: '你的身体在“说话”', class: 'font1' }, 
						{ text: '你听懂了吗？', class: 'font2' }, 
						{ text: '5分钟问卷', class: 'font3' }, 
					],
					btn: { text: 'Al定制方案', path: '/pages_order/auth/wxLogin' },
				},
			]

			this.detectionStepList = [
				{ 
					id: '001', 
					title: '定制检测',
					url: '', 
					desc: '测评读懂你的身体语言，完成定制化检测。',
				},
				{ 
					id: '002', 
					title: '定制检测',
					url: '', 
					desc: '用数据精准跟踪你的健康档案。',
				},
				{ 
					id: '003', 
					title: '定制检测',
					url: '', 
					desc: '测评读懂你的身体语言，完成定制化检测。',
				},
			]

			this.achievementList = [
				{ 
					id: '001', 
					url: '', 
				},
				{ 
					id: '002', 
					url: '', 
				},
				{ 
					id: '003', 
					url: '', 
				},
			]

			this.medicineList = [
				{ 
					id: '001', 
					url: '', 
					zh: '维生素D',
					en: 'Vitamin D',
				},
				{ 
					id: '002', 
					url: '', 
					zh: '维生素B2',
					en: 'Vitamin B2',
				},
				{ 
					id: '003', 
					url: '', 
					zh: '维生素P',
					en: 'Vitamin P',
				},
				{ 
					id: '004', 
					url: '', 
					zh: '维生素M',
					en: 'Vitamin M',
				},
				{ 
					id: '005', 
					url: '', 
					zh: '维生素B1',
					en: 'Vitamin B1',
				},
				{ 
					id: '006', 
					url: '', 
					zh: '维生素C',
					en: 'Vitamin C',
				},
			]

			this.followReasonList = [
				{ 
					id: '001', 
					url: '', 
					path: '/pages_order/auth/wxLogin',
				},
				{ 
					id: '002', 
					url: '', 
					path: '/pages_order/auth/wxLogin',
				},
				{ 
					id: '003', 
					url: '', 
					path: '/pages_order/auth/wxLogin',
				},
			]

			this.followWayList = [
				{ 
					id: '001', 
					title: '公众号',
					desc: 'PETUAL MEDICAL',
					url: '/pages_order/static/index/wx.png', 
					path: '/pages_order/auth/wxLogin',
				},
				{ 
					id: '002', 
					title: '健康伙伴',
					desc: 'PETUAL MEDICAL',
					url: '/pages_order/static/index/group.png', 
					path: '/pages_order/auth/wxLogin',
				},
				{ 
					id: '003', 
					title: '官方号',
					desc: 'PETUAL MEDICAL',
					url: '/pages_order/static/index/xhs.png', 
					path: '/pages_order/auth/wxLogin',
				},
			]
		},
		methods: {
		},
	}
</script>

<style scoped lang="scss">
	.page__view {
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color;
		position: relative;
	}

	.nav-icon {
		width: 200rpx;
		height: auto;
		vertical-align: top;
	}

	.content {
		// padding: 80rpx 32rpx 182rpx 32rpx;
		padding: 70rpx 0 182rpx 0;
	}

	.section {
		margin-top: 80rpx;
	}
</style>