smartFactory/pages/solution/zhxf.vue

<template>
	<view class="content">
		<!-- 顶部logo和菜单 -->
		<uTop data-aos="fade-down"></uTop>
		<!-- 标题和介绍 -->
		<uDesc :title="dTitle" :description="dMemo" :bg="descBg" data-aos="slide-right" data-aos-delay="300"></uDesc>
		<view class="boxs">
			<view class="box1" data-aos="zoom-in" data-aos-delay="600">
				<view class="b_title">方案背景</view>
				<view class="b_desc">公消（2017）297号文件《关于全面推进“智慧消防”建设的指导意见》指出了消防信息建设的目标，要求综合运用物联网、云计算、大数据、移动互联网等新兴信息技术，加快推进“智慧消防”建设，全面促进信息化与消防业务工作的深度融合，为构建立体化、全覆盖的社会火灾防控体系，打造符合实战要求的现代消防警务机制提供有力支撑，全面提升社会火灾防控能力、部队灭火应急救援能力和队伍管理水平，实现“传统消防”向“现代消防”的转变。</view>
			</view>
			<!-- 方案特征 -->
			<view class="fatz box" data-aos="zoom-in" data-aos-delay="900" data-aos-offset="10">
				<view class="b_title">方案特征</view>
				<view class="items">
					<view class="item">
						<image src="../../static/imgs/fmcs_fatz1.png"></image>
						<p>消防数据实时在线</p>
						<view class="tip">全面的信息收集和分析处理使各级部门能及时、全面地了解各项业务的进展情况</view>
					</view>
					<view class="item">
						<image src="../../static/imgs/fmcs_fatz2.png"></image>
						<p>事件闭环处理机制</p>
						<view class="tip">快速感知灾情发生、实时了解灾害情况、可视化远程指挥调度</view>
					</view>
					<view class="item">
						<image src="../../static/imgs/fmcs_fatz3.png"></image>
						<p>全面感知精准防控</p>
						<view class="tip">基于一张图、可视化技术实现战备值守、应急指挥、重大安保、辅助决策</view>
					</view>
					<view class="item">
						<image src="../../static/imgs/fmcs_fatz4.png"></image>
						<p>辅助决策分析</p>
						<view class="tip">多维度数据分析挖掘，图表展现，为决策提供辅助支撑</view>
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="boxTwo">
					<view class="b_title" data-aos="slide-left">方案架构</view>
					<image data-aos="slide-left" class="img" src="../../static/imgs/zhxf_img1.png" mode="widthFix" @click="e=>showBigImg(e,'../../static/imgs/zhxf_img1.png')"></image>
				</view>
			</view>
			<view class="box3">
				<view class="boxTwo">
					<view class="b_title" data-aos="slide-left">应用场景</view>
					<view class="desc" data-aos="slide-left">凡是具有消防中控室与消防设备房的场景均可使用，属于通用型解决方案。</view>
					<view class="items">
						<view class="item" v-for="(item,index) in yycjList" :key="index">
							<view class="boxTwo" data-aos="slide-right">
								<view class="img">
									<image :src="item.img"></image>
								</view>
								<view class="title">{{item.title}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 合作与咨询 -->
		<uForm data-aos="zoom-in"></uForm>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				dTitle:'智慧消防综合解决方案',
				dMemo:'借助物联网、云计算、大数据、地理信息等新一代信息技术，与传统消防系统相结合。实现“传统消防”到“智慧消防”的转变。',
				descBg:'../../static/imgs/zhxf_descbg.png',
				yycjList:[
					{
						img:'../../static/imgs/zhxf_img2.png',
						title:'商业综合体'
					},
					{
						img:'../../static/imgs/zhxf_img3.png',
						title:'学校园区'
					},
					{
						img:'../../static/imgs/zhxf_img4.png',
						title:'政府机关'
					},
					{
						img:'../../static/imgs/zhxf_img5.png',
						title:'工业园区'
					},
					{
						img:'../../static/imgs/zhxf_img6.png',
						title:'生产园区'
					},
					{
						img:'../../static/imgs/zhxf_img7.png',
						title:'商业办公'
					}
				],
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title:'智慧消防'
			})
		},
		methods:{
			showBigImg(e,imgUrl){
				let current = e.target.dataset.src;
				let that = this;
				uni.previewImage({
					current,
					urls:[imgUrl],
					longPressActions:{
						itemList:['保存图片'],
						success(data) {
							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 .title{
		margin-top: 16rpx;
	}
	::v-deep .desc .memo{
		padding-right: 101rpx;
		margin-top: 36rpx;
	}
	::v-deep .form{
		margin-top: 100rpx;
	}
	
	.content{
		width: 100%;
		padding-bottom: 44rpx;
		overflow-x: hidden;
		
		.boxTwo{
			width: 100%;
			overflow: hidden;
		}
		.box2,.box3{
			overflow: hidden;
		}
		
		.boxs{
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			.b_title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 42rpx;
				color: #111111;
				line-height: 42rpx;
				text-align: center;
				margin-top: 64rpx;
			}
			
			.b_desc{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: justify;
				font-style: normal;
				margin-top: 48rpx;
			}
			
			.fatz{
				.items{
					margin-top: 12rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					overflow: hidden;
					.item{
						width: calc(50% - 15rpx);
						height: 360rpx;
						background: #FAFCFF;
						border-radius: 2rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 24rpx;
						overflow: hidden;
						image{
							width: 118rpx;
							height: 118rpx;
						}
						p{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #111111;
							line-height: 42rpx;
							text-align: center;
							margin-top: 2rpx;
						}
						.tip{
							width: 100%;
							padding: 0 20rpx;
							box-sizing: border-box;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							line-height: 33rpx;
							margin-top: 16rpx;
						}
					}
				}
			}
			
			.img{
				width: 100%;
				margin-top: 48rpx;
			}
			
			.box2{
				.img{
					width: calc(100% + 60rpx);
					position: relative;
					left: -30rpx;
				}
			}
			
			.box3{
				.desc{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #111111;
					line-height: 42rpx;
					text-align: left;
					margin-top: 48rpx;
				}
				
				.items{
					margin-top: 24rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					overflow: hidden;
					.item{
						width: calc(50% - 25rpx);
						background: #FFFFFF;
						box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06);
						margin-top: 25rpx;
						overflow: hidden;
						.img{
							width: 320rpx;
							height: 200rpx;
							margin-top: 0;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.title{
							width: 100%;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #111111;
							line-height: 32rpx;
							text-align: center;
							padding: 22rpx 0;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>