subject_gxj/xj_project_app/components/card-title/card-title.vue

<template>
	<view class="card-title" :class="isSpecial=== true ? 'special' :''">
		<view class="card-title-icon"></view>

		<view class="card-title-text">{{numerator}}/{{denominator}}</view>

		<view class="card-title-icon"></view>
	</view>
</template>

<script setup>
	const props = defineProps({
		numerator: {
			type: [String, Number],
			default: 0
		},
		denominator: {
			type: [String, Number],
			default: 0
		},
		isSpecial: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss" scoped>
	.card-title {
		display: flex;
		justify-content: space-between;
		width: 54%;
		height: 52rpx;
		margin: 0 auto;
		padding: 0 24rpx;
		font-size: 32rpx;
		color: #1869F6;
		background: #DBE8FF;
		border-radius: 0rpx 0rpx 24rpx 24rpx;

		.card-title-icon {
			width: 16rpx;
			height: 16rpx;
			margin-top: 14rpx;
			border-radius: 50%;
			background: #1869F6;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(12, 54, 128, 0.45);
		}

		.card-title-text {
			margin: auto;
		}
	}

	.special {
		background: none;
		color: #fff;

		.card-title-icon {
			background: #fff;
			box-shadow: 0;
		}
	}
</style>