uniProject/components/scroll-list-card-zhengshu/scroll-list-card-zhengshu.vue

<template>
	<view class="scroll-list-card mobile-card-box">
		<view>
			<img style="width: 100rpx;height: 100rpx;;" :src="data.pic" alt="" />
		</view>
		<text>{{data.name}}</text>
		<view class="timeSpan">发证日期：{{data}}</view>
		<view class="timeSpan">到期日期：{{data.expiryDate?data.expiryDate: '永久'}}</view>
		<view class="timeSpan">证书状态：{{data.disabled}}</view>
	</view>
</template>

<script setup>
	import {
		toRefs,
		ref,
		computed
	} from "vue";

	const props = defineProps({
		data: {
			type: Object,
		},
	});
	const {
		data
	} = toRefs(props);
</script>

<style lang="scss" scoped>
	.mobile-card-box {
		box-sizing: border-box;
		margin: 0 30rpx 10rpx;
		border-bottom: 2rpx solid #f2f1f2;
		padding-bottom: 30rpx;
	}

	.mobile-card-title {
		color: #333;
		font-size: 32rpx;
		font-weight: 500;
		margin: 24rpx 0 24rpx 0;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		overflow: hidden;
		word-wrap: break-word;
		display: -webkit-box;
		white-space: normal;
		-webkit-box-orient: vertical;
		text-align: justify;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		line-height: 48rpx;
	}

	// 行
	.mobile-card-row {
		margin-bottom: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		text {
			font-size: 28rpx;
			line-height: 40rpx;
		}

		// 得分
		.mobile-card-score {
			font-size: 40rpx;
			color: #f10a0a;
		}

		// 分数（有最小宽度）
		.card-score-box {
			min-width: 240rpx;
			text-align: left;
		}
	}

	// 按钮
	.mobile-card-btn {
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 50rpx auto;
		background: linear-gradient(0deg, #436aff 0%, #234ff7 100%);
		border-radius: 80rpx;
		display: block;
	}
</style>