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

<template>
	<uni-popup background-color="#fff" ref="popup" type="bottom" borderRadius="10px 10px 10px 10px">
		<view class="p-24 box-border-box pop-box r-20">
			<view class="r-40 p-20 box-border-box flex-stretch mb-48 box-shadow"
				:class="colorType === 1?'bgc-F92A3B-E70073':colorType === 2?'bgc-AB46FF-8125FE':colorType === 3?'bgc-00B6DC-0F62FA':'bgc-00C651-009B65'">
				<view class="mr-20 q-box fc-fff size-48"
					:class="colorType === 1?'bgc-F8516C':colorType === 2?'bgc-B768FF':colorType === 3?'bgc-33B2EB':'bgc-34CC79'">
					{{colorType === 1?'$':colorType === 2?'🏚':colorType === 3?'🛡':'🎁'}}
				</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?'bgc-B365FF':colorType === 3?'bgc-34B4EB':'bgc-34CA79'">
						债务
					</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 center justify-center">
						<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 class="">
				<view class="size-32 mb-20">
					实体详情
				</view>
				<view class="b-F3F4F6-1 box-shadow sys-radius-20">
					<view class="p-30 box-border-box b-b-F3F4F6 center row-justify-sb" v-for="(item) in 4">
						<view class="size-28">
							实体类型
						</view>
						<view class="size-28">
							公司
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		components: {},
		props: {
			colorType: {
				// 颜色状态 1红 2紫 3蓝 4绿
				default: 3
			}
		},
		data() {
			return {}
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			openPop() {
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.b-b-F3F4F6 {
		border-bottom: .1rpx solid #F3F4F6;
	}

	.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;
	}

	.checkmarkempty-box {
		width: 32rpx;
		height: 32rpx;
		border: 1rpx solid #155DFB;
	}
</style>