一、自定义颜色：
样式
代码
<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'
