XEH-miniProgram/pages/self/contract.vue

<template>
	<view class="page-wrap">
		<view class="item-row">
			<view class="name">记账报税套餐（年度）</view>
			<view class="text">天津超易达胜科技发展有限公司</view>
			<view class="text">合同总额：3600.00</view>
			<view class="text">申请日期：2023-09 至 2024-08</view>
			<view class="state">生效中</view>
		</view>
		<view class="item-row">
			<view class="name">记账报税套餐（年度）</view>
			<view class="text">天津超易达胜科技发展有限公司</view>
			<view class="text">合同总额：3600.00</view>
			<view class="text">申请日期：2023-09 至 2024-08</view>
			<view class="state warn">逾期</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	padding: 13.74rpx 0;
}
.item-row {
	background: #fff;
	margin-top: 13.74rpx;
	height: 178.57rpx;
	padding: 13.74rpx 123.63rpx 0 27.47rpx;
	box-sizing: border-box;
	position: relative;
	&:first-child {
		margin: 0;
	}
	.name {
		font-size: 32.97rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 6.87rpx;
	}
	.text {
		font-size: 27.47rpx;
		color: #999;
	}
	.state {
		font-size: 27.47rpx;
		color: #666;
		position: absolute;
		right: 27.47rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.warn{
		color: #F97631;
	}
}
</style>