newsssred/components/mzsm.vue

<template>
	<view class="">
		<view class="mzsm" @click.stop="mzss">
			免责声明
		</view>
		<uni-popup ref="popupmz" type="center">
			<view class="mzsm-wrap">
				<view class="mzsm-tit">
					AED导航地图免责声明
				</view>
				<view class="mzsm-content">
					本应用所提供的网点名称、地址信息，仅供查询参考，实际导航结果以用户所选用的第三方地图应用所显示的位置为准，本应用不保证其导航定位准确性。
				</view>
				<view class="mzsm-content">
					在法律允许的范围内，本应用声明，不承担用户或任何人士就使用或未能使用本应用所提供的信息所导致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。
				</view>
				<view class="mzsm-close" @click="mzssClose()">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			mzss() {
				this.$refs.popupmz.open();
			},
			mzssClose() {
				this.$refs.popupmz.close();
			},
		}
	} 
</script>

<style lang="scss">
	.mzsm {
		position: fixed;
		top: 20rpx;
		right: 20rpx;
		width: 150rpx;
		height: 50rpx;
		border-radius: 25rpx;
		background-color: #000000;
		color: #fff;
		font-size: 28rpx;
		// line-height: 50rpx;
		text-align: center;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mzsm-wrap {
		width: 500rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.mzsm-tit {
			text-align: center;
			line-height: 150rpx;
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
		}
		.mzsm-content {
			 text-indent: 56rpx;
			width: 450rpx;
			margin: auto;
			text-align: justify;
			line-height: 100rpx;
			color: #888;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 1.5;
		}
		.mzsm-close {
			margin-top: 20rpx;
			border-top: 1px solid #eee;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #000;
		}
	}
</style>