uniapp——组件多颜色模块展示、气泡框

一、自定义颜色：

样式

代码

<template>
	<view class="content">
		<!-- 右上角 -->
		<view class="coverStatus" :class="[itemClass, positionClass,cornerClass,sanJiaoCss,sanJiaoCss2]"
			:style="dynamicStyle">
			{{title}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "cardTypeCard",
		props: {
			title: {
				type: String,
				default: '进行中',
			},
			cardType: {
				type: String,
				default: 'progress',
			},
			position: {
				type: String,
				default: 'right', // 默认值为 'right'
			},
			cornerStyle: { // 新增的 prop 控制圆角
				type: String,
				default: 'rightTop', // 默认右上角元素的圆角
			},
			sanJiao: {
				type: Boolean,
				default: false, // 默认右上角元素的小三角
			},
			sanJiao2: {
				type: Boolean,
				default: false, // 默认右上角元素的小三角
			},
			width: { // 新增的 prop 控制宽度
				type: String,
				default: '48rpx',
			},
			height: { // 新增的 prop 控制高度
				type: String,
				default: '20rpx',
			},
			fontSize: { // 新增的 prop 控制字体大小
				type: String,
				default: '14rpx',
			},
		},
		computed: {
			//定位
			positionClass() {
				return this.position === 'left' ? 'leftPosition' : 'rightPosition';
			},
			sanJiaoCss() {
				return this.sanJiao == true ? 'sanJiaoAct' : '';
			},
			sanJiaoCss2() {
				return this.sanJiao2 == true ? 'sanJiaoAct2' : '';
			},
			// 圆角样式
			cornerClass() { // 根据 cornerStyle 返回相应的圆角样式类
				switch (this.cornerStyle) {
					case 'rightTop':
						return 'rightDemo';
					case 'leftTop':
						return 'leftDemo';
					default:
						return 'allDemo';
				}
			},
			// 背景颜色
			itemClass() {
				let className;
				switch (this.cardType) {
					case 'progress':
						className = 'blueBg'
						break;
					case 'finish':
						className = 'greyBg'
						break;
					case 'enroll':
						className = 'pinkBg'
						break;
					case 'wait_upload':
						className = 'pinkBg'
						break;
					case 'wait_examine':
						className = 'greyBg'
						break;
					case 'passed':
						className = 'greyBg'
						break;
					case 'fail':
						className = 'redBg'
						break;
				}
				return className;
			},
			// 动态样式对象
			dynamicStyle() {
				return {
					width: this.width,
					height: this.height,
					fontSize: this.fontSize,
				};
			},
		},
	}
</script>
<style lang="scss" scoped>
	// 卡片颜色
	.coverStatus {
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
	}

	.sanJiaoAct {
	
	}

	.sanJiaoAct::after {
		content: '';
		position: absolute;
		left: 10rpx;
		bottom: -8rpx;
		width: 0;
		height: 0;
		border-top: 6rpx solid var(--triangle-color);
		border-right: 4rpx solid transparent;
		border-bottom: 4rpx solid transparent;
		border-left: 4rpx solid transparent;
	}

	.sanJiaoAct2 {
	}

	.sanJiaoAct2::after {
		content: '';
		position: absolute;
		right: 10rpx;
		bottom: -8rpx;
		width: 0;
		height: 0;
		border-top: 6rpx solid var(--triangle-color);
		border-right: 4rpx solid transparent;
		border-bottom: 4rpx solid transparent;
		border-left: 4rpx solid transparent;
	}

	// 左上角定位
	.leftPosition {
		left: 0;
	}

	// 右上角定位
	.rightPosition {
		right: 0;
	}

	// 右上角圆角
	.rightDemo {
		border-radius: 0rpx 10rpx 0rpx 10rpx;
	}

	// 左上角圆角
	.leftDemo {
		// border-radius: 8rpx 0rpx 8rpx 0rpx;
		border-radius: 15rpx;
	}

	// 全部圆角
	.allDemo {
		border-radius: 15rpx;
	}

	//已报名颜色 、待上传
	.pinkBg {
		background: #F364B3;
		--triangle-color: #F364B3;
	}

	//进行中颜色
	.blueBg {
		background: #A4CBE8;
		--triangle-color: #A4CBE8;
	}

	//已截止、待审核、已完成颜色
	.greyBg {
		background-color: #898989;
		--triangle-color: #898989;
	}

	//已驳回颜色
	.redBg {
		background-color: #ff0000;
		--triangle-color: #ff0000;
	}
</style>

使用

父页面：

<cardTypeColor :cardType="data.task_status" :title="data.task_status_text" cornerStyle="allDemo" :sanJiao="true">
</cardTypeColor>
import cardTypeColor from '@/components/cardTypeColor/cardTypeColor.vue'

二、使用图片作为背景

样式

代码

<template>
	<view>
		<view class="content" :class="[positionClass]">
			<!-- 右上角 -->
			<block v-if="positionClass == 'rightPosition'">
				<image src="/static/images/index/pinkImg.png" mode="aspectFit" class="signImg"
					v-if="itemClass == 'pinkBg'"></image>
				<image src="/static/images/index/blueImg.png" mode="aspectFit" class="signImg"
					v-if="itemClass == 'blueBg'"></image>
				<image src="/static/images/index/greyImg.png" mode="aspectFit" class="signImg"
					v-if="itemClass == 'greyBg'"></image>
			</block>
			<!-- 左上角 -->
			<block v-if="positionClass == 'leftPosition'">
				<image src="/static/images/index/pinkImg2.png" mode="aspectFit" class="signImg"
					v-if="itemClass == 'pinkBg'"></image>
				<image src="/static/images/index/blueImg2.png" mode="aspectFit" class="signImg"
					v-if="itemClass == 'blueBg'"></image>
				<image src="/static/images/index/greyImg2.png" mode="aspectFit" class="signImg"
					v-if="itemClass == 'greyBg'"></image>
			</block>
			<view class="coverStatus">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cardTypeCard",
		props: {
			title: {
				type: String,
				default: '进行中',
			},
			cardType: {
				type: String,
				default: 'progress',
			},
			position: {
				type: String,
				default: 'right', // 默认值为 'right'
			},
		},
		computed: {
			//定位
			positionClass() {
				return this.position === 'left' ? 'leftPosition' : 'rightPosition';
			},
			// 背景颜色
			itemClass() {
				let className;
				switch (this.cardType) {
					case 'progress':
						className = 'blueBg'
						break;
					case 'finish':
						className = 'greyBg'
						break;
					case 'enroll':
						className = 'pinkBg'
						break;
					case 'wait_upload':
						className = 'pinkBg'
						break;
					case 'wait_examine':
						className = 'greyBg'
						break;
					case 'passed':
						className = 'greyBg'
						break;
					case 'fail':
						className = 'redBg'
						break;
				}
				return className;
			},
		},
	}
</script>
<style lang="scss" scoped>
	.content {
		position: absolute;
		top: 0;
		width: 50rpx;
		height: 32rpx;

		.signImg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.coverStatus {
			position: absolute;
			left: 1rpx;
			top: 2rpx;
			z-index: 4;
			width: 100%;
			height: 100%;
			color: #FFFFFF;
		}
	}
	// 左上角定位
	.leftPosition {
		left: 0;
	}

	// 右上角定位
	.rightPosition {
		right: 0;
	}
</style>

使用

父页面：

<cardTypeColor :cardType="data.task_status" :title="data.task_status_text" position="left">
</cardTypeColor>
import cardTypeColor from '@/components/cardTypeColor/cardTypeColor.vue'