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'