assess-app/pages/loan/module/rate_compare.vue

<template>
	<view class="total-page page_env-20 page-box sys-list-background-color task-bg">
		<Nav title="利率对比" :genre="1" is_fixed></Nav>
		<view class="m-20 text-color-12">
			<view class="sys-background-fff p-30 r-30">
				<view class="center">
					<image class="wh-60" src="/static/img/task/task-else.png" mode="aspectFill"></image>
					<text class="size-28 sys-weight-600 m-l20">垫资还款</text>
				</view>
				<view class="row-justify-sb center sys-from-background-color p-tb30 p-lr40 r-30 m-t30">
					<view class="column-c">
						<view class="size-26 m-b10">张三</view>
						<text class="size-24 text-color-666">贷款人姓名</text>
					</view>
					<view class="column-c">
						<view class="size-26 m-b10">{{hidePhone('17717888888')}}</view>
						<text class="size-24 text-color-666">联系方式</text>
					</view>
					<view class="column-c">
						<view class="size-26 m-b10">2024-08-08</view>
						<text class="size-24 text-color-666">申请时间</text>
					</view>
				</view>
			</view>
			<view class="sys-background-fff p-tb30 r-30 m-t20">
				<view class="container">
					<view class="box left-box">
						<text class="title">核算前年利率</text>
						<text class="number">23.27%</text>
					</view>
					<view class="box middle-box">
						<text class="title">差值</text>
						<text class="number">5.76%</text>
					</view>
					<view class="box right-box">
						<text class="title">核算后年利率</text>
						<text class="number">18.00%</text>
					</view>
				</view>
				<view class="p-lr30 flex row-justify-sb">
					<view class="list-item">
						<ColumnItem></ColumnItem>
					</view>
					<view class="list-item">
						<ColumnItem is_center></ColumnItem>
					</view>
					<view class="list-item">
						<ColumnItem></ColumnItem>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from "@/service/tools";
	import ColumnItem from "../components/column-item.vue"

	export default {
		components: {
			ColumnItem
		},
		data() {
			return {}
		},
		methods: {
			hidePhone(phone) {
				return tools.hidePhone(phone)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		flex: 1;
		text-align: center;
	}

	.container {
		display: flex;
		justify-content: space-between;
	}

	.box {
		position: relative;
		flex: 1;
		height: 125rpx;
		background-color: red;
		text-align: center;
		color: #fff;
		flex-direction: column;
		display: flex;
		justify-content: center;

		.title {
			font-size: 26rpx
		}

		.number {
			font-size: 28;
			font-weight: 600;
			padding-top: 10rpx;
		}
	}

	.left-box {
		position: relative;
		right: -15px;
		border-radius: 20rpx 0 0 20rpx;
		clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
		background: linear-gradient(270deg, #FEA666 0%, #F9503D 100%);
	}

	.middle-box {
		position: relative;
		clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
		background: linear-gradient(270deg, #745CFF 0%, #3993FD 100%);
	}

	.right-box {

		position: relative;
		left: -15px;
		border-radius: 0 20rpx 20rpx 0;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
		background: linear-gradient(270deg, #F9503D 0%, #FEA666 100%);

	}

	.box::before {
		content: '';
		position: absolute;
		top: -15rpx;
		left: -15rpx;
		right: -15rpx;
		bottom: -15rpx;
		border: 15rpx solid #f0f0f0;
		border-radius: 20rpx;
		pointer-events: none;
	}

	.left-box::before {
		clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
	}

	.middle-box::before {
		clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
	}

	.right-box::before {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
	}
</style>