cytWebsite/pages/index/product.vue

<template>
	<view class="content">
		<top :type="pageType"></top>
		<view class="content1">
			<view class="banner">
				<!-- 关于我们 -->
			</view>
			<view class="content4">
				<view class="left">
					<image src="../../static/pt1.png" style="width: 579px;height: 660px;margin-right: 100px;"></image>

				</view>
				<view class=" right">
					<view class="title">
						司机端产品介绍
					</view>
					<view class="text">
						经过很能吃苦的业务团队全体员工共同努力，企业已与上下游客户展开了采销一体化的合作，并形成了稳定长久的供求关系及战略合作伙伴。在北方主要粮食中转港口鲅鱼圈港、布局了港口粮食中转库及销售团队，为整个公司贸易流转提供了重要的销售前沿的业务支撑，形成了动态库存逐步向销售终端前移，多节点实现销售的重要战略目标。并实现高资金周转率、零坏账、无亏损、利润逐步递增的财务目标。
					</view>
				</view>
			</view>
			<view class="content3">
				<view class="left">
					<view class="title">
						货主端产品介绍
					</view>
					<view class="text">
						经过很能吃苦的业务团队全体员工共同努力，企业已与上下游客户展开了采销一体化的合作，并形成了稳定长久的供求关系及战略合作伙伴。在北方主要粮食中转港口鲅鱼圈港、布局了港口粮食中转库及销售团队，为整个公司贸易流转提供了重要的销售前沿的业务支撑，形成了动态库存逐步向销售终端前移，多节点实现销售的重要战略目标。并实现高资金周转率、零坏账、无亏损、利润逐步递增的财务目标。
					</view>
				</view>
				<view class="right">
					<image src="../../static/pt2.png" style="width: 579px;height: 660px;"></image>
				</view>
			</view>
			<view class="content6">
				<view class="left">
					<image src="../../static/logo.png" style="width: 208px;height: 60px;"></image>
				</view>
				<view class="right">
					<view class="btn">
						<a href="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/cyt.apk">下载司机端</a>
					</view>
					<view class="btn">
						<a href="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/cythz.apk">下载货主端</a>

					</view>
				</view>
			</view>
		</view>
		<bottom></bottom>
	</view>
</template>

<script>
	import top from '@/components/top.vue'
	import bottom from '@/components/bottom.vue'
	export default {
		components: {
			top,
			bottom
		},
		data() {
			return {
				pageType: 'product'
			};
		}
	}
</script>

<style lang="scss">
	.banner {
		width: 100%;
		height: 840rpx;
		background: url('../../static/banner3.png') no-repeat center;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 64rpx;
	}

	.content2 {
		display: flex;
		width: 70%;
		margin: 242rpx auto;
		justify-content: space-between;

		.left {
			margin-right: 290rpx;
		}
	}

	.text {
		font-size: 32rpx;
		color: #101010;
		line-height: 64rpx;
	}

	.title {
		font-size: 80rpx;
		font-weight: 600;
		color: #0B0B0B;
		line-height: 112rpx;
		margin-bottom: 20rpx;
	}

	.content3 {
		background: white;
		background-size: cover;
		display: flex;
		align-items: center;
		padding: 0 15%;
		box-sizing: border-box;
	}

	.content4 {
		background: white;
		display: flex;
		align-items: center;
		padding: 0 15%;
		box-sizing: border-box;
	}

	.content5 {
		background: url('../../static/banner3.png') no-repeat center;
		background-size: cover;
		flex-direction: column;
		justify-content: center;
		height: 1160rpx;
		display: flex;
		align-items: center;
		padding: 0 15%;
		box-sizing: border-box;
		color: white;

		.title,
		.text {
			color: white;
		}

		.f-title {
			margin: 40rpx 0 180rpx 0;
		}
	}

	.content6 {
		// background: white;
		// justify-content: center;
		height: 200rpx;
		display: flex;
		background: red;
		align-items: center;
		padding: 200px 15%;
		background: white;

		.tilte {
			margin-bottom: 100rpx;
		}

		.right {
			display: flex;

			.btn {
				width: 116px;
				height: 40px;
				background: #3F414B;
				border-radius: 20px;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 30rpx;
				margin-left: 200rpx;

				a {
					color: white;
					text-decoration: none;

				}
			}
		}
	}
</style>