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

ops/2024/11/13 11:36:56/

一、自定义颜色:

样式

在这里插入图片描述

代码

<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>css">// 卡片颜色.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>css">.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'

http://www.ppmy.cn/ops/13548.html

相关文章

汇智知了堂晨会聚焦:NAS应用如何赋能网络安全实战

在近期汇智知了堂网络安全75班的晨会上&#xff0c;一场关于NAS应用的深入分享完美展开。学员们以饱满的热情投入到这场安全讨论中&#xff0c;共同探索网络安全的新天地。 此次分享会聚焦于NAS的应用&#xff0c;旨在帮助学员们更好地了解NAS的定义与功能&#xff0c;掌握其在…

uniapp封装websocket以及心跳检测、重连

websocket 封装 在所需文件夹下建立websocketUtils.js文件&#xff0c;封装代码如下&#xff1a; class websocketUtils {constructor(openId, time) {this.url wss://**** //ws地址 拼接一下 此处用的是openIdthis.data nullthis.isOpenSocket false //避免重复连接this.…

Unity进阶之ScriptableObject

目录 ScriptableObject 概述ScriptableObject数据文件的创建数据文件的使用非持久数据让其真正意义上的持久ScriptableObject的应用配置数据复用数据数据带来的多态行为单例模式化的获取数据 ScriptableObject 概述 ScriptableObject是什么 ScriptableObject是Unity提供的一个…

做一个答题pk小程序多少钱

在探讨“做一个答题pk小程序多少钱”这一问题时&#xff0c;我们首先需要明确的是&#xff0c;小程序的价格并非固定不变&#xff0c;而是受到多种因素的影响。这些因素包括但不限于小程序的复杂度、功能需求、开发周期、技术难度以及开发团队的规模和经验等。因此&#xff0c;…

Linux 学习之路 -- 进程篇 -- 进程控制

目录 一、进程终止 <1>使用语言和系统自带的方法&#xff0c;进行转换 <2>自定义错误码 <3>小结&#xff1a; <2>两个接口exit / _exit 二、进程等待 <1>简单了解 <2>wait调用 <3>waitpid调用 <4>status <1>W…

error ‘xxx‘ is defined but never used(2024/4/21更新)

vue中我们经常会遇到这种报错&#xff0c;可能有的变量是传来但不一定现在用得上的却会导致报错 解决方法&#xff1a; 在package.json文件的rules中加上以下内容 "no-unused-vars": "off"&#x1f388;如果没有即时生效重新启动项目即可

【web开发网页制作】html+css家乡长沙旅游网页制作(4页面附源码)

家乡长沙网页制作 涉及知识写在前面一、网页主题二、网页效果Page1、主页Page2、历史长沙Page3、著名人物Page4、留言区 三、网页架构与技术3.1 脑海构思3.2 整体布局3.3 技术说明书 四、网页源码HtmlCSS 五、源码获取5.1 获取方式 作者寄语 涉及知识 家乡长沙网页制作&#x…

MySQL中InnoDB存储引擎详细介绍

介绍 InnoDB是一种兼顾高可靠性高和高性能的通用存储引擎&#xff0c;在MySQL5.5之后&#xff0c;InnoDB是默认的MySQL存储引擎。 特点 DML(增删改)操作遵循ACID(事务四大特性)模型&#xff0c;支持事务&#xff1b;行级锁&#xff0c;提高并发访问性能支持外链FORELGN KEY约…