front-end/mobile-code/src/official/index.vue

<template>
	<div class="app-content">
		<div class="tab-wrap">
			<div class="logo-img">
				<img src="../static/images/official/logo.png" alt />
			</div>
			<div class="phone-img" @click="contactFn">
				<img src="../static/images/official/phone.png" alt />
			</div>
		</div>
		<app-swiper :height="{type: 'number',val: 750}" :list="swiper" />
		<div class="module-com" v-for="(item, index) in contentData" :key="index">
			<div class="module-tit">
				<div class="tit-main" v-html="item.title"></div>
				<div class="tit-sub">{{ item.subTitle }}</div>
			</div>
			<div class="module-det">
				<img class="module-img" :src="item.img" :lazy-load="true">
			</div>
		</div>
		<!-- ad -->
		<div class="cooperation-wrap">
			<div class="ad-title">
				<span>他们</span>
				<span class="app-color-1">都在用</span>
			</div>
			<div class="ad-list-wrap">
				<div class="ad-list" v-for="(item, index) in adData" :key="index">
					<img :src="item" alt />
				</div>
			</div>
			<div class="official-wrap">
				<div class="off-title">花卉宝，花店经营的标配工具</div>
				<div class="off-sub-tit">
					<img src="../static/images/official/phone-small.png" alt="">
					<span>咨询热线：0592 - 3272000</span>
				</div>
			</div>
		</div>
		<!-- trademark -->
		<div class="bottom-trademark">
			<img src="../static/images/common/trademark.png" alt="">
		</div>
		<!-- buttom -->
		<div class="app-footer" @click="$util.pageTo('/official/pay')">免费试用</div>
	</div>
</template>

<script>
import AppSwiper from '@/components/app-swiper'
// img
import banner1 from '@/static/images/official/banner-1.png'
import banner2 from '@/static/images/official/banner-2.png'
import banner3 from '@/static/images/official/banner-3.png'
import banner4 from '@/static/images/official/banner-4.png'
// content
import content1 from '@/static/images/official/content-1.png'
import content2 from '@/static/images/official/content-2.png'
import content3 from '@/static/images/official/content-3.png'
import content4 from '@/static/images/official/content-4.png'
import content5 from '@/static/images/official/content-5.png'
import content6 from '@/static/images/official/content-6.png'
import content7 from '@/static/images/official/content-7.png'
// ad
import list1 from '@/static/images/official/list-1.png'
import list2 from '@/static/images/official/list-2.png'
import list3 from '@/static/images/official/list-3.png'
import list4 from '@/static/images/official/list-4.png'
import list5 from '@/static/images/official/list-5.png'
import list6 from '@/static/images/official/list-6.png'
import list7 from '@/static/images/official/list-7.png'
import list8 from '@/static/images/official/list-8.png'

export default {
	name: 'index',
	components: {
		AppSwiper
	},
	data() {
		return {
			swiper: [
				{
					img: banner1
				},
				{
					img: banner2
				},
				{
					img: banner3
				},
				{
					img: banner4
				}
			],
			contentData: [
				{
					title: `<span class="app-color-1">一键搭建</span>移动商城和小程序商城`,
					subTitle: `各大节日商城自动涨价，客户下单自动按距离计算运费`,
					img: content1
				},
				{
					title: `<span class="app-color-1">流程化</span>管理订单`,
					subTitle: `把控每个订单的生命周期，从下单、打单、制作到发货、配送、 送达自动通知客户，进度把控一清二楚，客户体验感大幅提升`,
					img: content2
				},
				{
					title: `提供多种的<span class="app-color-1">营销工具</span>`,
					subTitle: `契合花店日常经营的营销工具，拉新、转化、复购、裂变， 面面俱到`,
					img: content3
				},
				{
					title: `连通各渠道来源的<span class="app-color-1">客户和订单</span>`,
					subTitle: `线上、门店、微信、支付宝和美团等自动汇总后台，客户统一接待 回复，订单统一管理，不必再周旋于各个平台`,
					img: content4
				},
				{
					title: `<span class="app-color-1">一键吸粉 </span>注册会员`,
					subTitle: `告别繁琐手续，一键操作，注册会员简单快捷，到店客户的粉丝 转化率提高60%`,
					img: content5
				},
				{
					title: `智能的<span class="app-color-1">会员体系</span>`,
					subTitle: `客户充值消费自动累积成长值、自动升级会员，客户付款自动 打折，精准把握每个客户的个性和特征（二张图片）`,
					img: content6
				},
				{
					title: `经营<span class="app-color-1">数据分析</span>`,
					subTitle: `系统实时进行数据统计，花店每个时期的经营情况一目了然，知己 知彼，方能百战百胜`,
					img: content7
				}
			],
			adData: [list1, list2, list3, list4, list5, list6, list7, list8]
		}
	},
	methods: {
		contactFn() {
			uni.makePhoneCall({
				phoneNumber: '05923272000'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		background-color: #fff;
		padding-bottom: 100px;
	}
	.tab-wrap {
		@include disFlex(center, space-between);
		height: 100px;
		padding: 0 30px;
		.logo-img {
			width: 160px;
		}
		.phone-img {
			width: 50px;
		}
	}
	// module
	.module-com {
		margin-top: 80px;
		.module-tit {
			text-align: center;
			.tit-main {
				font-size: 36px;
				font-weight: 600;
				margin-bottom: 14px;
			}
			.tit-sub {
				width: 90%;
				margin: 0 auto;
				color: $fontColor3;
				line-height: 34px;
			}
		}
		.module-det {
			.module-img {
				min-height: 470px;
			}
		}
	}
	// cooperation
	.cooperation-wrap {
		width: 100%;
		height: 552px;
		background: url('../static/images/official/bg.png');
		padding-top: 60px;
		.ad-title {
			color: #fff;
			font-size: 36px;
			font-weight: 600;
			margin-bottom: 50px;
			text-align: center;
		}
		.ad-list-wrap {
			@include disFlex(center, center);
			flex-wrap: wrap;
			margin-bottom: 30px;
			.ad-list {
				width: 166px;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
		.official-wrap {
			color: #fff;
			background-color: rgba(#000000, 0.6);
			width: 90%;
			margin: 0 auto;
			padding: 20px 0;
			.off-title {
				font-size: 36px;
				font-weight: 600;
				margin-bottom: 10px;
				text-align: center;
			}
			.off-sub-tit {
				@include disFlex(center, center);
				img {
					width: 28px;
					height: 28px;
					margin-right: 10px;
				}
			}
		}
	}
	// trademark
	.bottom-trademark {
		height: 150px;
		@include disFlex(center, center);
		background-color: #242627;
		img {
			width: 140px;
		}
	}
	// footer
	.app-footer {
		color: #fff;
		font-size: 36px;
		font-weight: 600;
		background: linear-gradient(90deg, #3ab7ff, #3385ff);
	}
</style>