receive-task.vue 2.2 KB
<template>
	<view class="">
		<block v-for="(it,i) in taskList" :key="i">
			<view class="receive-task" :style="{background:activebg }" :class="{ active: nycolor,f_a :actv }">
				<view class="left-task">
					<text class="task-tit  title_content1">{{it.taskname}}</text>
					<text class="task-label title_content1">{{it.applydata[0].enterprisename}}</text>
				</view>
				<u-icon name="arrow-right" size="14" :color="nycolor?'#fff':'#666'"></u-icon>
			</view>
		</block>
	</view>

</template>
<script>
	export default {
		props: {
			iscolor: {
				type: Boolean,
				default: false,
			},
			actived: {
				type: Boolean,
				default: false,
			},
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				nycolor: this.iscolor,

				actv: this.actived,
				activebg: '',
			}
		},
		created() {
			this.activebg = this.$store.state.txtcor || '#106FFF'
		},
		mounted() {

		},
		watch: {
			iscolor(val, old) {
				console.log(val);
				this.nycolor = val
			},
			actived(val, old) {
				this.actv = val
			}
		},
		computed: {
			taskList() {
				return this.list
			}
		},
		components: {

		},
		methods: {

		},
	}
</script>
<style scoped lang="scss">
	.receive-task {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 16px 0;
		box-sizing: border-box;
		border-top: 0.1px solid #EBEDF0;

		.left-task {
			flex: 1;
			display: flex;
			flex-direction: column;

			.task-tit {
				opacity: 1;
				color: #000000;
				font-size: 14px;
				font-weight: 400;
				font-family: "PingFang SC";
				text-align: left;
				line-height: 20px;
				letter-spacing: 0;
			}

			.task-label {
				opacity: 1;
				color: rgba(0, 0, 0, 0.4);
				font-size: 10px;
				font-weight: 400;
				font-family: "PingFang SC";
				text-align: left;
				line-height: 14px;
			}


		}


	}

	.active {
		// background-color: #428DFF;
		padding: 16px;
		// border-radius: 6p

		&:first-child {
			border-radius: 6px 6px 0 0;

		}

		.left-task {

			.task-tit,
			.task-label {
				color: #fff;
			}

		}
	}

	.f_a {
		background-color: #fff !important;
	}
</style>
<style>


</style>