frontend-app/components/common/down-popup.vue

<template>
	<view class="down-popup-view" v-if="show">
		<view class="down-panel">
			<view class="flex-r-lr mt-24">
				<view></view>
				<text class="text-gray text-32">{{title}}</text>
				<image src="https://static.tbmall.xin/static/new/close.png" @click.stop="onCancel" class="close-img"></image>
			</view>
			<text class="text-gray text-48 mt-88">{{articleTitle}}</text>
			<view class="content-text mt-48">
				<text class="text-28 text-gray">
					{{contentText}}
				</text>
			</view>
			<view class="bottom-btn">
				<view class="left-box left flex-c" @click.stop="onCancel">
					<text class="text-fu text-32">{{cancel}}</text>
				</view>
				<view class="left-box right flex-c" @click.stop="onOk">
					<text class="text-white text-32">{{ok}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Func from '/utils/func'
	export default {
		props:{
			show:{
				type:Boolean,
				default:false
			},
			title:{
				type:String,
				default:'签署合同'
			},
			articleTitle:{
				type:String,
				default:'消费型合伙人协议'
			},
			cancel:{
				type:String,
				default:'取消'
			},
			ok:{
				type:String,
				default:'去签署'
			},
			contentText:{
				type:String,
				default:`信任桥（深圳）网络科技有限公司（以下简称"甲方"或"公司"）系依据《中华人民共和国公司法》及相关法律法规，在深圳市市场监督管理局登记注册的有限责任公司（统一社会信用代码： 91440300MAD3XHDP7C），现合法存续并有效经营。

公司经核准的经营范围包括（但不限于）：
 (1) 全品类居民生活消费品零售；
 (2) 互联网零售及相关配套服务；
 (3) 供应链管理服务；
 (4) 电子商务平台运营；
 (5) 货物及技术进出口业务；
 (6) 国家法律法规允许的其他经营项目。

公司为独立企业法人，依法自主经营、自负盈亏，股东以其认缴的出资额为限对公司承担责任。

公司已依法取得开展主营业务所需的以下资质文件：
 (1) 《增值电信业务经营许可证》；
 (2) 《食品经营许可证》；
 (3) 《出版物经营许可证》；
 (4)  其他经营相关资质。`
			}
			
			
		},
		mounted(){
		},
		methods: {
			onCancel(){
				
				this.$emit('cancel');
			},
			onOk(){
				Func.debounce(this.dOk())
			},
			dOk(){
				this.$emit('ok');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.down-popup-view{
		width:100%;
		height:100vh;
		min-height:100vh;
		display: flex;
		flex-direction: column;
		background-color: rgba(0,0,0,0.3);
		position: fixed;
		left:0;
		top:0;
		z-index: 10000;
		.down-panel{
			width:100%;
			height:764rpx;
			display: flex;
			flex-direction: column;
			padding: 0 32rpx;
			box-sizing: border-box;
			background-color: #fff;
			position: absolute;
			bottom:0;
			border-radius: 32rpx 32rpx 0 0 ;
			.content-text{
				flex:1;
				width:100%;
				display: flex;
				flex-direction: column;
				overflow-y: auto;
			}
			.bottom-btn{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				position: relative;
				width:100%;
				height:88rpx;
				margin-top:40rpx;
				margin-bottom:80rpx;
				.left-box{
					width:48%;
					height:100%;
					border-radius: 8rpx;
					box-sizing: border-box;
				}
				.left{
					border:1rpx solid #eaeaea;
				}
				.right{
					background: linear-gradient( 270deg, #B164FB 0%, #7934F6 100%);
				}
			}
			.close-img{
				width:44rpx;
				height:44rpx;
			}
		}
		
	}
	
	
</style>