smartFactory/pages/solution/zncc.vue

<template>
	<view class="content">
		<!-- 顶部logo和菜单 -->
		<uTop data-aos="fade-down"></uTop>
		<!-- 标题和介绍 -->
		<uDesc :title="dTitle" :description="dMemo" :bg="bannerBg" data-aos="slide-right" data-aos-delay="300"></uDesc>
		<view class="ques" data-aos="slide-left" data-aos-delay="600">
			<view class="quesTitle">仓储的管理，您是否有以下烦恼？</view>
			<view class="quesContent">
				<view class="li" v-for="(item,index) in qiesContent" :key="index">{{item}}</view>
			</view>
		</view>
		<view class="boxs">
			<view class="fajg box" data-aos="slide-right" data-aos-delay="900">
				<view class="title">智能仓储架构图</view>
				<image src="../../static/imgs/zncc0.png" mode="widthFix" @click="showBigImg"></image>
			</view>

			<view class="ggld box">
				<view class="title" data-aos="slide-left">功能亮点</view>
				<view class="list">
					<view class="li2">
						<view class="li" v-for="(item,index) in gnlds" :key="index" data-aos="slide-left">
							<view class="tit">{{item.txt}}</view>
							<view class="subtit">{{item.subtit}}</view>
							<image :src="item.img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 合作与咨询 -->
		<uForm data-aos="zoom-in"></uForm>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dTitle: '智能仓储管理平台',
				bannerBg: '../../static/imgs/znccBg.png',
				dMemo: '基于物流运作过程中仓库内部精益化管理的作业运作平台，包含供应商协同平台,仓库收、发、存及内部各类管控流程的实现',
				qiesContent: ['仓库现场物料堆放混乱，找货难', '作业员凭经验作业，容易错发漏发物料', '录单不及时，导致账实不符，库存准确率低', '先进先出管理不严谨、导致产生不必要的呆滞库存',
					'拣货和发料路线不科学，导致搬运成本增高'
				],
				gnlds:[{
					txt:'智能仓储管理',
					subtit:'高效仓储作业流程，全程可溯可视',
					img:'../../static/imgs/zncc1.png'
				},{
					txt:'丰富作业策略',
					subtit:'多种策略规则，满足多元化仓储管理需求',
					img:'../../static/imgs/zncc2.png'
				},{
					txt:'多系统对接',
					subtit:'无缝对接第三方管理系统，加强供应链管控',
					img:'../../static/imgs/zncc3.png'
				},{
					txt:'数据自动采集',
					subtit:'支持PDA/RF,轻松实现仓储数据的自动化采集',
					img:'../../static/imgs/zncc4.png'
				},{
					txt:'多硬件集成',
					subtit:'集成各种自动化设备，提升仓库自动化程度',
					img:'../../static/imgs/zncc5.png'
				}]
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: '智能仓储管理系统'
			})
		},
		methods: {
			showBigImg(e) {
				let current = e.target.dataset.src;
				let that = this;
				uni.previewImage({
					current,
					urls: ['../../static/imgs/zncc0.png'],
					longPressActions: {
						itemList: ['保存图片'],
						success(data) {
							let imgUrl = '../../static/imgs/zncc0.png';
							that.saveImage(imgUrl);
						},
						fail(err) {
							that.$showToast(err.errMsg);
						}
					}
				})
			},
			saveImage(url) {
				let that = this;
				uni.downloadFile({
					url,
					success(res) {
						let filePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath,
							success() {
								that.$showToast('保存成功');
							},
							fail(err) {
								that.$showToast('保存失败');
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	::v-deep .desc .memo{
		padding-right: 193rpx;
	}
	
	.ques {
		background: url(../../static/imgs/txtBg.png) no-repeat;
		background-size: 100% 100%;
		padding: 48rpx 54rpx 74rpx;

		.quesTitle {
			padding: 0 111rpx;
			font-size: 42rpx;
			color: #333;
			line-height: 60rpx;
			text-align: center;
			font-weight: bold;
		}

		.quesContent {
			.li {
				height: 72rpx;
				background-color: #ffff;
				border-radius: 16rpx;
				border: 2rpx solid #F7910B;
				color: #111111;
				line-height: 72rpx;
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 34rpx;
				text-align: center;
			}
		}

	}

	.content {
		padding-bottom: 98rpx;
		overflow: hidden;
		.boxs {
			width: 100%;
			padding: 0 0;
			box-sizing: border-box;
			background: #FFFFFF;
			font-size: 0;
			.box {
				width: 100%;
				margin-top: 48rpx;

				.title {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #111111;
					line-height: 50rpx;
					text-align: center;
				}

				&.fajg {
					image {
						width: 100%;
						margin-top: 20rpx;
					}
				}

				&.ggld{
					background: #FFE7D0 url(../../static/imgs/txtBg2.png) top center no-repeat;
					padding:0 20rpx 1rpx ;
					box-sizing: border-box;
					margin-bottom: -66rpx;
					.title{
						padding: 48rpx 0;
					}
					.li2{
						width: 100%;
						overflow: hidden;
					}
					.li{
						padding: 36rpx 40rpx;
						background-color: #fff;
						margin-bottom: 48rpx;
						border-radius: 12rpx;
						.tit{
							color: #111111;
							font-size: 32rpx;
							font-weight: bold;
						}
						.subtit{
							color: #666666;
							font-size: 24rpx;
							margin:24rpx 0 35rpx ;
						}
						image{
							width: 100%;
							height: 340rpx;
						}
					}
				}
			}
		}
	}
</style>