<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>
|