zhuoxin-leader-uniapp/components/fxyk-projectCard/fxyk-projectCard.vue

<template>
	<view class="d-flex u-padding-top-30 u-padding-bottom-30 u-margin-top-10 u-margin-bottom-12" :style="{'background-color': bgColor}">
		<view v-if="projectData.status === 1" span="2" ><text class="small-tag d-flex j-center" style="background-color: #4CB1FF;">已完成</text></view>
		<view v-else-if="projectData.status === 2" span="2" ><text class="small-tag d-flex j-center" style="background-color: #E7AE5E;">进行中</text></view>
		<view v-else span="2" ><text class="small-tag d-flex j-center" style="background-color: #FF0014;">已终止</text></view>
		<view class="w-100 over_style text-style u-padding-top-5" :style="{'color': textAndIconColor}">
			<text>项目名称:&ensp;{{ projectData.name }}</text>
			<view class="d-flex a-center j-sb w-100">
				<view class="over_style">
					<view class="u-margin-top-10">项目编号:&ensp;{{ projectData.number }}</view>
					<view class="u-margin-top-10">项目内容:&ensp;{{ projectData.content }}</view>
				</view>
				<view class="d-flex a-center u-margin-right-18">
					<u-icon name="arrow-right" :color="textAndIconColor" size="30"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			projectData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 文字图标颜色
			textAndIconColor: {
				type: String,
				default: '#fff'
			},
			//  背景颜色
			bgColor: {
				type: String,
				default: '#40349C'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.small-tag {
		width: 100rpx;
		height: 33rpx;
		border-radius: 8rpx;
		margin: 5rpx 10rpx 0;
		font-size: 21rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 33rpx;
		color: #FFFFFF;
	}
	.text-style {
		font-size: 25rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 33rpx;
	}
</style>