基于uniapp封装的card容器 带左右侧两侧标题内容区域

代码

<template>
  <view class="card">
    <div class="x_flex_header">
      <div>
        <title v-if="title !== ''" class="title" :title="title" :num="num"></title>
      </div>
      <div>
        <slot name="xline_left"></slot>
      </div>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </view>
</template>

<script>
export default {
  name: "xCard",
  props: {
    title: {
      type: String,
      default: ''
    },
    num: {
      type: Number,
      default: 1
    }
  },
}
</script>


<style lang="scss" scoped>
.card{
  border-radius: 8px;
  margin: 16px;
  box-shadow: none;
  overflow: hidden;
  font-size: 28rpx;
  box-sizing: border-box;
  padding: 20rpx;
  display: block;
  background: #fff;
}
.card-body{
}

.title {
  display: block;
}
.x_flex_header{
  display: flex;
  justify-content: space-between;
}
</style>

全部资源:https://download.csdn.net/download/galaxyJING/88720610?spm=1001.2014.3001.5503

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/304929.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

x-cmd pkg | magick - 开源图像处理工具

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 magick 是由 ImageMagick 提供的一个功能强大且多功能的开源图像处理工具&#xff0c;可以灵活高效地处理图像文件&#xff0c;例如格式转换、图像大小调整、图像裁减、图像拼接、图像色彩校正和图像合成等常见的图像…

云化XR技术于农业领域中的表现

随着科技的不断发展和应用的深入&#xff0c;农业领域也在逐渐引入新技术来优化生产效率和成本、改进管理和监控等。云化XR&#xff08;CloudXR&#xff09;作为一种融合了云计算、虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;等技术的解决方案&am…

【教程】代码混淆详解

【教程】代码混淆详解 本文将对代码混淆进行详细解释&#xff0c;并介绍ProGuard代码混淆器以及Ipa Guard工具的使用方法。首先&#xff0c;我们将了解代码混淆的概念和作用&#xff0c;然后深入讨论ProGuard混淆文件的参数设置以及代码混淆的方法。接着&#xff0c;我们将介绍…

【node link】Node命令中的node link命令的使用,还有CLI全局命令的使用,开发命令行工具必不可少的部分

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;NodeJs &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继续前进的勇气…

【RabbitMQ】3 RabbitMQ使用及交换机

目录 代码示例交换机概述无名交换机绑定&#xff08;binding&#xff09;交换机的类型FanoutDirectTopic 官网地址&#xff1a;https://www.rabbitmq.com/getstarted.htm 代码示例 先来看下如何使用rabbitmq&#xff1a; 使用 Java 编写两个程序&#xff0c;发送单个消息的生…

10年工作经验老程序员推荐的7个开发类工具

做.NET软件工作已经10年了&#xff0c;从程序员做到高级程序员&#xff0c;再到技术主管&#xff0c;技术总监。见证了Visual Studio .NET 2003,Visul Studio 2005, Visual Studio Team System 2008, Visual Studio 2010 Ultimate,Visual Studio 2013一系列近5个版本的变化与亲…

了解vcruntime140.dll文件,有效解决vcruntime140.dll的方法丢失

vcruntime140.dll丢失是一个常见的问题&#xff0c;一旦出现关于vcruntime140.dll丢失的错误弹窗就会导致各种应用程序无法正常启动或运行。本篇文章小编将带大家了解vcruntime140.dll文件&#xff0c;从vcruntime140.dll文件的来源到属性&#xff0c;一一给大家介绍&#xff0…

选择智能酒精壁炉,拥抱环保与未来生活

保护环境一直是我们共同的责任和目标&#xff0c;而在这场争取保护环境的斗争中&#xff0c;选择使用智能酒精壁炉而非传统壁炉成为了一种积极的行动。这不仅仅是对环境负责&#xff0c;更是对我们自身生活质量的关照。 传统壁炉与智能酒精壁炉的对比 传统壁炉常常以木柴、煤炭…

SpringBoot从数据库读取数据数据源配置信息,动态切换数据源

准备多个数据库 首先准备多个数据库&#xff0c;主库smiling-datasource&#xff0c;其它库test1、test2、test3 接下来&#xff0c;我们在主库smiling-datasource中&#xff0c;创建表databasesource&#xff0c;用于存储多数据源相关信息。表结构设计如下 创建好表之后&#…

高德地图vue-amap实现区域掩膜卫星图且背景为灰色

vue-amap高德1.4.4&#xff0c;区域掩膜效果 区域掩膜区域内展示卫星图&#xff0c;区域外背景灰色–>实现原理&#xff0c;先用灰色样式&#xff0c;当区域掩膜实现之后再添加卫星图层 效果如下&#xff1a; 代码如下&#xff1a; <template><div><div c…

使用kubesphere的devops部署SpringCloud项目

devops部署SpringCloud项目 环境说明部署流程创建DevOps工程填写流水线信息创建流水线jenkinsfileDockerfiledeploy.yaml 环境说明 已经安装kubesphere的devops组件安装教程可参考官方文档:https://v3-1.docs.kubesphere.io/zh/docs/pluggable-components/devops/ 部署流程 创…

【服务器数据恢复】Raid5热备盘同步失败导致lvm结构损坏的数据恢复案例

服务器数据恢复环境&#xff1a; 两组由4块磁盘组建的raid5磁盘阵列&#xff0c;两组raid5阵列划分为lun并组成了lvm结构&#xff0c;ext3文件系统。 服务器故障&#xff1a; 一组raid5阵列中的一块硬盘离线&#xff0c;热备盘自动上线并开始同步数据。在热备盘完成同步之前&am…

Python(32):字符串转换成列表或元组,列表转换成字典小例子

1、python 两个列表转换成字典 字符串转换成列表 列表转换成字典 column "ID,aes,sm4,sm4_a,email,phone,ssn,military,passport,intelssn,intelpassport,intelmilitary,intelganghui,inteltaitonei,credit_card_short,credit_card_long,job,sm4_cbc,sm4_a_cbc" …

IDEA的lombok失效导致工程代码编译build失败的问题处理

今天也是奇了怪了&#xff0c;打包工程&#xff0c;编译始终失败&#xff0c;明明代码符号存在的 解决办法就是&#xff1a;-Djps.track.ap.dependenciesfalse

three.js实现信号波效果

three.js实现信号波效果 图例 步骤 创建平面&#xff0c;添加贴图&#xff0c;平移几何体缩放 代码 <template><div class"app"><div ref"canvesRef" class"canvas-wrap"></div></div> </template><…

pmp考试费用要多少?

参加PMP项目管理考试费用主要是分为三部分&#xff0c;报名费用、培训费用、续证费用&#xff08;这部分的费用是获取证书后的后续费用&#xff0c;可以不认为是参加PMP认证费用来看&#xff09;&#xff0c;下面会一一介绍。 一、报名费用&#xff1a; 在中国大陆参加PMP笔试…

Python print 高阶玩法

Python print 高阶玩法 当涉及到在Python中使用print函数时&#xff0c;有许多方式可以玩转文本样式、字体和颜色。在此将深入探讨这些主题&#xff0c;并介绍一些print函数的高级用法。 1. 基本的文本样式与颜色设置 使用ANSI转义码 ANSI转义码是一种用于在终端&#xff0…

lua每日tips

目录 1&#xff0c;EC618系列不支持win7下刷机2&#xff0c;为何室内无法gps定位3&#xff0c;Lot平台自动锁定4&#xff0c; LuaTools的部分操作界面是支持拖拽功能的5&#xff0c;Air780E省略 1&#xff0c;EC618系列不支持win7下刷机 1&#xff0c; EC618系列不支持win7下刷…

GitLab clone 地址 不对

1丶问题描述 2丶解决方案 解决方案&#xff1a; 找到挂载到宿主机配置文件&#xff1a;gitlab.rb vi gitlab.rb 改成自己的ip 重启容器&#xff0c;会发生一个问题&#xff1a;容器一直重启&#xff0c;这里暂未找到合适的解决方案。 所以采用粗暴的方法&#xff0c;直接干…

css中的变量和辅助函数

变量 --name 两个破折号加变量名称&#xff08;可以在当前的选择器内定义&#xff09;var(--*) 命名规则 body {--深蓝: #369;background-color: var(--深蓝); } 变量值只能做用属性值&#xff0c;不能用做属性名。变量命名不能包含 $,[,^,(,% 等字符 普通字符局限在只要是数…