assess-app/pages/index/module/popup-module.vue

<template>
	<view class="">
		<uni-popup background-color="#fff" ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="p-24 box-border-box pop-box">
				<view class="r-40 p-20 box-border-box flex-stretch mb-48 box-shadow" :class="colorType === 1?'bgc-F92A3B-E70073':colorType === 2?'':''">
					<view class="mr-20 q-box fc-fff size-48" :class="colorType === 1?'bgc-F8516C':colorType === 2?'':''">
						$
					</view>
					<view class="flex-direction flex-start">
						<view class="size-24 fc-fff sys-weight-600 mb-10 zw-box" :class="colorType === 1?'bgc-F8516C':colorType === 2?'':''">
							债务
						</view>
						<view class="fc-fff size-32 text-overflow-ellipsis-one mb-10">
							优先担保贷款#2024-001
						</view>
						<view class="fc-fff hy-box size-24">
							活跃的
						</view>
					</view>
				</view>
				<view class="p-tb30 bt-EDEEF0">
					<view class="p-30 box-border-box bgc-EEFAFF r-40 mb-48 box-shadow b-DBEAFE flex-stretch">
						<view class="ok-box r-circle bgc-DBEAFE box-border-box mr-20">
							<view class="checkmarkempty-box r-circle center justify-center">
								<uni-icons type="checkmarkempty" size="12" color="#155DFB"></uni-icons>
							</view>
						</view>
						<view class="flex-direction flex-start">
							<view class="center mb-10">
								<view class="size-28 mr-18 fc-1B388E">
									尽职调查状态
								</view>
								<view class="size-24 yz-box fc-008235 sys-weight-600">
									已验证
								</view>
							</view>
							<view class="size-24 fc-1547E6">
								所有要求的文件均已验证并为最新文件
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			colorType: {
				default: 1
			}
		},
		data() {
			return {}
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			openPop() {
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
.pop-box{
	border-radius: 20rpx 20rpx 0 0 ;
}
.box-shadow{
	box-shadow: 5rpx 5rpx 5px 0 rgba(0, 0, 0, 0.2);
}
.q-box{
	width: 88rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 30rpx;
}
.zw-box{
	padding: 4rpx 16rpx;
	display: inline-block;
	border-radius: 20rpx;
}
.hy-box{
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	background: #00CA52;
}
.bt-EDEEF0{
	border-top: .1rpx solid #EDEEF0;
}
.b-DBEAFE{
	border: .1rpx solid #DBEAFE;
}
.yz-box{
	background: #DBFCE7;
	border-radius: 40rpx;
	padding: 4rpx 16rpx;
	border: .1rpx solid #B9F8CF;
}
.ok-box{
	width: 72rpx;
	height: 72rpx;
	line-height: 72rpx;
	text-align: center;
	padding: 16rpx;
}
.checkmarkempty-box{
	width: 100%;
	height: 100%;
	border: 1rpx solid #155DFB;
}
</style>