epidemic-h5/pages/index/index1.vue

<template>
	<view id="shareImage">
	<view class="border" >
		<view class="content">
			<view class="title_1" @click="drewImage">
				<text>郑州</text>>>><text>安阳</text>
			</view>
			<view class="title_2">
				郑州回安阳过年需要隔离吗?12123655
			</view>
			<view class="text_1">
				对于在湖北入境的人员，实施“14+14”的健康管理措施。即14天集中隔离医学观察，期间进行2次核酸检测和1次抗体检测;集中隔离医学观察期满后再实施14天居家医学观察，期间进行两次核酸检测。入境人员隔离点应在隔离对象隔离期满前3天，将隔离人员相关信息通知其地新冠肺炎疫情防控指挥部，以便当地落实居家医学观察。
	
				天居家医学观察，期间进行两次核酸检测。入境人员隔离点应在隔离对象隔离期满前3天，将隔离人员相关信息通知其地新冠肺炎疫情防控指挥部，以便当地落实居家医学观察。
			</view>
			<view class="tip_share">
				<view class="left_share">
					<image src="../../static/img/erwei.jpg" mode=""></image>
				</view>
				<view class="right_share">
					<view class="">
						数据来源(可点击,数据来源列表)
					</view>
					<view class="">
						<text>xxxx</text>城市疫情防控指挥中心
					</view>
				</view>
			</view>
		</view>
		<image class="btimg" src="../../static/img/btimg.png" mode=""></image>
		<image src="../../static/img/icon6.png" mode="" class="icon"></image>
	</view>
	</view>
</template>

<script>
import html2canvas from '@/static/html/js/html2canvas.js';
export default {
	data() {
		return{}
	},
	methods:{
		drewImage(){
			html2canvas(document.querySelector('#shareImage'),{
            useCORS: true,
          }).then(canvas => {
				let previewFile = canvas.toDataURL('image/png');
				this.download(previewFile)
			});
		},
		download(url) {
			var oA = document.createElement("a");
				oA.download = '';// 设置下载的文件名，默认是'下载'
				oA.href = url;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
		  },
	}
}
</script>

<style>
	body {
		height:100% ;
		margin: 0;
		padding: 0;
	}
	#size{
		margin: 30px;
		background-color: #00BFFF;
	}
	.border {
	/* 	width: 100%; */
		position: relative;
		/* height:100%; */
		padding: 0 15px;
		padding-top: 50px;
		padding-bottom: 40px;
	/* 	height: 600px; */
		background: linear-gradient(180deg, #1E37EB 0%, #0FC6A1 100%);
	}
	
	.content {
		padding: 45px 17px;
		background-color: #FFFFFF;
		border-radius: 12px;
		margin-bottom: 170px;
	}
	
	.btimg {
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	.icon {
		position: absolute;
		top: 23px;
		right: 15px;
		height: 80px;
		width: 80px;
	}
	
	.title_1 {
		text-align: center;
		font-size: 26px;
		font-weight: bold;
		line-height: 88px;
		color: #23459D;
		opacity: 1;
	}
	
	.title_2 {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		line-height: 34px;
		color: #333333;
		opacity: 1;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	
	.text_1 {
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		color: #333333;
		opacity: 1;
	}
	
	.tip_share {
		display: flex;
		margin-top: 32px;
	}
	
	.left_share {
		flex: 1;
	}
	
	.left_share image {
		height: 60px;
		width: 60px;
		margin-left: 30px;
		/* right: 17px; */
	}
	
	.right_share {
		text-align: right;
		margin-top: 8px;
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		color: #333333;
		opacity: 1;
	}
</style>