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

news2024/12/23 11:03:56

代码

<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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机网络—— 概述

概述 1.1 因特网概述 网络、互联网和因特网 网络由若干结点和连接这些结点的链路组成多个网络还可以通过路由器互联起来&#xff0c;这样就构成了一个覆盖范围更大的网络&#xff0c;即互联网&#xff08;或互连网&#xff09;。因特网&#xff08;Internet&#xff09;是世…

连接两个路由器的有线连法,关键时候可能会发挥不小的作用

路由器网桥连接两个或多个路由器&#xff0c;以扩展网络范围&#xff0c;提供额外的以太网端口和无线接入点。但在开始之前&#xff0c;你必须首先决定如何使用每个路由器。因此&#xff0c;你需要知道你想要实现什么&#xff0c;并清楚地了解你对每台设备的期望。 例如你想扩…

docker run 命令详解

一、前言 Docker容器是一个开源的应用容器引擎&#xff0c;让开发者可以以统一的方式打包他们的应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何安装了Docker引擎的服务器上&#xff08;包括流行的Linux机器、Windows机器&#xff09;&#xff0c;也可以实现虚拟…

目标检测-One Stage-YOLOv5

文章目录 前言一、YOLOv5的网络结构和流程YOLOv5的不同版本YOLOv5的流程YOLOv5s的网络结构图 二、YOLOv5的创新点1. 网络结构2. 输入数据处理3. 训练策略 总结 前言 前文目标检测-One Stage-YOLOv4提到YOLOv4主要是基于技巧的集成&#xff0c;对于算法落地具有重大意义&#x…

面试算法105:最大的岛屿

题目 海洋岛屿地图可以用由0、1组成的二维数组表示&#xff0c;水平或竖直方向相连的一组1表示一个岛屿&#xff0c;请计算最大的岛屿的面积&#xff08;即岛屿中1的数目&#xff09;。例如&#xff0c;在下图中有4个岛屿&#xff0c;其中最大的岛屿的面积为5。 分析 将岛屿…

Mysql 数据库ERROR 1820 (HY000): You must reset your password using ALTER USER 解决办法

Mysql 5.7数据库原来一直都能正常访问&#xff0c;突然访问不了&#xff0c;查看日志提示数据库需要修改密码&#xff0c; 具体解决办法如下操作&#xff1a; Windows 下&#xff1a; mysql的bin目录下&#xff0c; mysql>use mysql; mysql>mysql -uroot -p密码; 判…

git常用命令及概念对比

查看日志 git config --list 查看git的配置 git status 查看暂存区和工作区的变化内容&#xff08;查看工作区和暂存区有哪些修改&#xff09; git log 查看当前分支的commit 记录 git log -p commitID详细查看commitID的具体内容 git log -L :funcName:fileName 查看file…

独家原创:“ARO算法的再进化,BMARO的创新改进与卓越表现“

人工兔优化算法ARO作为一种近期比较好的优化算法&#xff0c;深受人们和编辑的喜爱。 人工兔优化算法&#xff08;Artificial Rabbit Optimization, ARO&#xff09;是一种基于自然界兔子行为的启发式优化算法。该算法通过模拟兔子在寻找食物和规遍领地时的智能行为&#xff0…

Pytest接口自动化应用

目录 前言 一、接口自动化项目构成 二、Pytest基础介绍 1.安装Pytest 2.PyCharm中设置使用Pytest 3.pytest使用规则 4.pytest运行方式 a.读取配置文件pytest.ini b.主函数模式 c.命令行模式 5.pytest参数化 6.pytest前置和后置 7.pytest断言 三、自动化实现部分源…

工程项目管理系统源码与Spring Cloud:实现高效系统管理与二次开发

随着企业规模的不断扩大和业务的快速发展&#xff0c;传统的工程项目管理方式已经无法满足现代企业的需求。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;企业需要借助先进的数字化技术进行转型。本文将介绍一款采用Spring CloudSpring BootMybat…

Win10子系统Ubuntu实战(一)

在 Windows 10 中安装 Ubuntu 子系统&#xff08;Windows Subsystem for Linux&#xff0c;简称 WSL&#xff09;有几个主要的用途和好处&#xff1a;Linux 环境的支持、跨平台开发、命令行工具、测试和验证、教育用途。总体而言&#xff0c;WSL 提供了一种将 Windows 和 Linux…

phpcms v9后台添加草稿箱功能

一、后台添加文章模板phpcms/modules/content/templates/content_add.tpl.php中94行增加”保存草稿“按钮&#xff1a; <div class"button"><input value"<?php echo L(save_draft);?>" type"submit" name"dosubmit_draf…

【YOLO系列】 YOLOv4思想详解

前言 以下内容仅为个人在学习人工智能中所记录的笔记&#xff0c;先将目标识别算法yolo系列的整理出来分享给大家&#xff0c;供大家学习参考。 本文未对论文逐句逐段翻译&#xff0c;而是阅读全文后&#xff0c;总结出的YOLO V4论文的思路与实现路径。 若文中内容有误&#xf…

A借助AI工具提升电子邮件营销内容效果

随着互联网的普及和电子邮件的广泛应用&#xff0c;邮件营销已成为企业推广产品和服务的重要手段之一。为了提高邮件营销的效果&#xff0c;我们需要关注邮件内容的质量和吸引力。而百度文言一心等AI工具作为一款强大的在线写作工具&#xff0c;可以帮助我们提升邮件营销内容的…

pytorch基础(八)-TensorBoard

一、TensorBoard运行机制 python记录可视化的数据--》存储到硬盘--》在web端进行可视化 1.python记录可视化的数据 writer.add_scalar(名称, y轴, x轴) writer SummaryWriter(commenttest_tensorboard)for x in range(100):writer.add_scalar(y2x, x * 2, x)writer.add_sc…

Go新手别再被切片复制坑了

概述 Go 语言中切片的复制是非常重要也比较容易让新手困惑的问题。本文将通过大量示例代码,全面介绍切片复制的相关知识,包括: 切片的结构 copy()函数的用法 切片复制的本质 浅复制和深复制的区别 如何实现切片深复制 copy()函数的常见用途 切片复制需要注意的几点 1. 切…

GB28181视频汇聚平台EasyCVR级联后,部分通道视频无法播放是什么原因?

GB28181协议智慧安防平台EasyCVR是基于各种IP流媒体协议传输的视频汇聚和融合管理平台。视频流媒体服务器EasyCVR采用了开放式的网络结构&#xff0c;支持高清视频的接入和传输、分发&#xff0c;平台提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制…

如何计算JMeter性能和稳定性测试中的TPS?

1、普通计算公式 TPS 总请求数 / 总时间 按照需求得到基础数据&#xff0c;比如在去年第xxx周&#xff0c;某平台有5万的浏览量那么总请求数我们可以估算为5万&#xff08;1次浏览都至少对应1个请求&#xff09; 总请求数 50000请求数 总时间&#xff1a;由于不知道每个请…

CAN FD和传统CAN的组网技术

在汽车领域&#xff0c;特别是新能源汽车技术的发展&#xff0c;对汽车内部的数据传输带宽提出了越来越高的要求&#xff0c;因此新的总线协议CAN FD应运而生&#xff0c;其最大传输速率可达8Mbps。然而由于历史原因以及成本因素&#xff0c;在相当长的一段时间内&#xff0c;传…