assess-app/page_task/task_details/module/apply.vue

<template>
	<view class="text-color-333">
		<view class="apply">
			<image class="bg-box" src="/static/img/task-details/bg-two.png" mode=""></image>
			<view class="content p-30 sys-background-fff r-30 size-26">
				<view class="">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">基本信息</text>
					</view>
					<view class="sys-from-background-color r-30 p-20 m-t30 row">
						<view class="">
							<view class="">
								<text class="text-color-666">是否涉农</text>
								<text class="m-l16">否</text>
							</view>
							<view class="m-tb16">
								<text class="text-color-666">贷款类别</text>
								<text class="m-l16">新增贷款</text>
							</view>
							<view class="">
								<text class="text-color-666">投向行业</text>
								<text class="m-l16">流动资金贷款</text>
							</view>
						</view>
						<view class="m-l40">
							<view class="m-b16">
								<text class="text-color-666">支付状态</text>
								<text class="m-l16">已缴纳</text>
							</view>
							<view class="">
								<text class="text-color-666">企业类型</text>
								<text class="m-l16">个体经营</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 抵押申请 -->
				<view class="m-t30 color-4A2600">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10 text-color-333">抵押申请</text>
					</view>
					<view class="apply-box p-20 r-20 m-t30">
						<view class="">
							<text>申请类型：</text>
							<text class="sys-weight-600">抵押</text>
						</view>
						<view class="sys-background-fff row-justify-sb center r-20 p-30 p-lr40 m-tb20">
							<view class="column-c color-653400" v-for="(item,index) in list" :key="index">
								<text class="sys-weight-600">{{item.num}}</text>
								<text class="size-24">{{item.name}}</text>
							</view>
						</view>
						<view class="m-b10">
							<text>绑定资产：</text>
							<text class="capsule sys-weight-600">房产信息(1)</text>
						</view>
						<view class="message-box r-20 p-20 m-t20" v-for="(item,index) in 3" :key="index">
							<view class="">
								<text class="sys-weight-600">还款信息(1)</text>
								<text class="m-l20">批复金额 90万</text>
							</view>
							<view class="row-c m-t16">
								<image class="wh-60" src="/static/img/task/task-put.png" mode=""></image>
								<view class="m-l30">
									<text class="size-24 text-color-333">长春农商银行</text>
									<view class="size-28 sys-weight-600 m-t10">8968 9759 6768 6970</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				list: [{
					num: '89万',
					name: '成交价'
				}, {
					num: '30万',
					name: '定金'
				}, {
					num: '29万',
					name: '资金监管'
				}, {
					num: '商业',
					name: '批复类型'
				}]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.apply {
		position: relative;

		.bg-box {
			width: 710rpx;
			height: 80rpx;
		}

		.dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #0FB160;
		}
	}

	.apply-box {
		background: linear-gradient(163deg, #EDC397 0%, #F3DBBC 100%);

		.capsule {
			display: inline-block;
			background: #FFE6C8;
			width: 185rpx;
			height: 42rpx;
			line-height: 42rpx;
			border-radius: 99rpx;
			text-align: center;
		}
	}

	.message-box {
		background: linear-gradient(180deg, #FFEEE4 0%, #FFFFFF 100%);
	}
</style>