vue知识补充
1.列的样式
第一种:一列一列的写
<div class="house-detail"><div class="static-container"><form-item-static label="业主姓名">{{ baseData.mainOwnerName }}</form-item-static><form-item-static label="账户余额" class="color-primary">{{ $filters.currency(baseData.balance) }}元</form-item-static><form-item-static label="不动产证坐落">{{ baseData.bdcAddress }}</form-item-static></div><div class="static-container"><form-item-static label="联系电话">{{ baseData.phoneNo }}</form-item-static><form-item-static label="冻结金额" class="color-primary">{{ $filters.currency(baseData.frozen) }}元</form-item-static><!-- <form-item-static label="利息总额" class="color-primary">{{ baseData.accrTotalAmount }}(元)</form-item-static> --><form-item-static v-if="isShowSubHouseRemark === 'Y'" label="备注">{{ baseData.subHouseRemark }}</form-item-static></div><div class="static-container"><form-item-static label="公众服务">{{ baseData.openInternetName }}</form-item-static><form-item-static label="可用金额" class="color-primary">{{ $filters.currency(baseData.usableBalance) }}元</form-item-static><form-item-static label="状态">已销户</form-item-static><!--<form-item-static label="企业交存金额">0.00(元)</form-item-static>--></div><div class="static-container"><form-item-static label="初交日期">{{ baseData.firstDepDate }}</form-item-static><form-item-static label="是否企业垫交">{{ baseData.isPrePayName }}</form-item-static><form-item-static label="销户日期">{{ baseData.cancelTime }}</form-item-static></div><div class="static-container"><form-item-static label="初交票号" class="color-primary">{{ baseData.firstDepVoucherNo }}</form-item-static></div></div>
.house-detail {width: 95%;display: flex;justify-content: space-between;
}
封装的样式:
弊端:如果某一行很长,就会无限往后挤
第二种:自定义
<div class="flexs flex-wrap house-detail-box"><div class="static-container"><form-item-static label="业主姓名">{{ baseData.mainOwnerName }}</form-item-static></div><div class="static-container"><form-item-static label="联系电话">{{ baseData.phoneNo }}</form-item-static></div><div class="static-container"><form-item-static label="公众服务">{{baseData.openInternetName}}</form-item-static></div><div class="static-container"><form-item-static label="初交日期">{{baseData.firstDepDate}}</form-item-static></div><div class="static-container"><form-item-static label="初交票号" class="color-primary">{{ baseData.firstDepVoucherNo }}</form-item-static></div><div class="static-container"><form-item-static label="账户余额" class="color-primary">{{ $filters.currency(baseData.balance) }}元</form-item-static></div><div class="static-container"><form-item-static label="冻结金额" class="color-primary">{{ $filters.currency(baseData.frozen) }}元</form-item-static></div><div class="static-container"><form-item-static label="可用金额" class="color-primary">{{ $filters.currency(baseData.usableBalance) }}元</form-item-static></div><div class="static-container" style='width: 40%'><form-item-static label="是否企业垫交">{{baseData.isPrePayName}}</form-item-static></div><div class="static-container" style='width: 40%'><form-item-static ellipsis label="不动产证坐落">{{ baseData.bdcAddress }}</form-item-static></div><!-- <form-item-static label="利息总额" class="color-primary">{{ baseData.accrTotalAmount }}(元)</form-item-static> -->
<!-- <div class="static-container"><form-item-static v-if="isShowSubHouseRemark === 'Y'" label="备注">{{baseData.subHouseRemark}}</form-item-static></div>--><div class="static-container"><form-item-static label="状态">已销户</form-item-static></div><div class="static-container"><form-item-static label="销户日期">{{ baseData.cancelTime }}</form-item-static></div></div>
.house-detail-box {width: 100%;.static-container {width: 20%;padding: 0 30px;line-height: 20px;}
}
优点:在原有css样式封装的基础初上,line-height: 20px;覆盖原来的样式调整高度,还有间隔距离padding: 0 30px;规定一行100%,每一个元素20%,规定flexs布局,wrap是如果超过100%就自动换行。可以在检查的style中即时修改并看到效果。使用ellipsis 和 style=‘width: 40%’ 控制长度和省略号
方法三:layout布局
<bv-row :layout="4" type="flex" class="item-static flex-wrap"><bv-col><form-item-static label="业主姓名">{{ baseData.mainOwnerName }}</form-item-static></bv-col><bv-col><form-item-static label="联系电话">{{ baseData.phoneNo }}</form-item-static></bv-col><bv-col><form-item-static label="公众服务">{{baseData.openInternetName}}</form-item-static></bv-col><bv-col><form-item-static label="初交日期">{{baseData.firstDepDate}}</form-item-static></bv-col><bv-col><form-item-static label="初交票号" class="color-primary">{{ baseData.firstDepVoucherNo }}</form-item-static></bv-col><bv-col><form-item-static label="账户余额" class="color-primary">{{ $filters.currency(baseData.balance) }}元</form-item-static></bv-col><bv-col><form-item-static label="冻结金额" class="color-primary">{{ $filters.currency(baseData.frozen) }}元</form-item-static></bv-col><bv-col><form-item-static label="可用金额" class="color-primary">{{ $filters.currency(baseData.usableBalance) }}元</form-item-static></bv-col><bv-col layout="2"><form-item-static label="是否企业垫交">{{baseData.isPrePayName}}</form-item-static></bv-col><bv-col layout="2"><form-item-static label="不动产证坐落">{{ baseData.bdcAddress }}</form-item-static></bv-col><bv-col><form-item-static label="状态">已销户</form-item-static></bv-col><bv-col><form-item-static label="销户日期">{{ baseData.cancelTime }}</form-item-static></bv-col></bv-row>
.item-static {padding: 5px 20px 5px 25px;margin-top: 15px;
}
弊端:需要被24整除,不能分成5列,elementui中 :span 同理
优点:封装好的容易使用
flex布局:https://blog.csdn.net/niezhilang/article/details/119181163
相关文章:

vue知识补充
1.列的样式 第一种:一列一列的写 <div class"house-detail"><div class"static-container"><form-item-static label"业主姓名">{{ baseData.mainOwnerName }}</form-item-static><form-item-static la…...

pushgateway指标聚合问题
一 问题现象 一个job有多个实例推送指标,但是从pushgateway上看这个job的instance字段,只显示一个实例的ip,而不是多个实例。导致在grafana上无法正常根据ip查看监控。 应用的prometheus的配置 management:metrics:tags:application: ${spr…...

使用docker搭建FastDFS文件服务
1.拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/qiluo-images/fastdfs:latest2.使用docker镜像构建tracker容器(跟踪服务器,起到调度的作用) docker run -dti --networkhost --name tracker -v /data/fdfs/tracker:/var/fdfs -…...

【R语言】数据分析
一、描述性统计量 借助R语言内置的airquality数据集进行简单地演示: 1、集中趋势:均值和中位数 head(airquality) # 求集中趋势 mean(airquality$Ozone, na.rmT) # 求均值 median(airquality$Ozone, na.rmT) # 求中位数 2、众数 众数(mod…...

蓝桥杯C语言组:图论问题
蓝桥杯C语言组图论问题研究 摘要 图论是计算机科学中的一个重要分支,在蓝桥杯C语言组竞赛中,图论问题频繁出现,对参赛选手的算法设计和编程能力提出了较高要求。本文系统地介绍了图论的基本概念、常见算法及其在蓝桥杯C语言组中的应用&#…...

jmeter 性能测试Linux 常用的安装
把软件安装包全部都放在/data/soft目录下 一、 Java 环境安装 1. 把JDK的安装包上传到/data/soft/目录下 2. 解压jdk安装包,重命名jdk 3. 配置环境变量 JAVA_HOME [root@MiWiFi-RA72-srv soft]# vim /etc/profile export JAVA_HOME=/data/soft/jdk1.8 export PATH=…...
19 角度操作模块(angle.rs)
angle.rs代码定义了一个泛型结构体 Angle,用于表示一个角度,其中角度以弧度为单位存储。这个结构体提供了许多特性,包括复制、克隆、默认实现、调试输出、部分相等性比较、哈希等。此外,它还根据编译时的特性(features…...
前端高级面试题及其答案
以下是一些前端高级面试题及其答案: 一、JavaScript相关 事件循环(Event Loop)机制 答案: JavaScript的事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。它包含宏任务(macrotask)队列&…...
【ORACLE】这个‘‘和null不等价的场景,deepseek你怎么看?
【ORACLE】一处’和null不等价的场景–to_char(number,varchar2) 背景 最近在做一个国产数据库替代项目,要求将ORACLE迁移到一个openGauss系数据库,迁移后,执行一个存储过程时,发现国产库的执行结果和ORACLE不一致, …...

使用Python实现PDF与SVG相互转换
目录 使用工具 使用Python将SVG转换为PDF 使用Python将SVG添加到现有PDF中 使用Python将PDF转换为SVG 使用Python将PDF的特定页面转换为SVG SVG(可缩放矢量图形)和PDF(便携式文档格式)是两种常见且广泛使用的文件格式。SVG是…...
ComfyUI 安装教程:macOS 和 Linux 统一步骤
本教程将详细介绍如何在 macOS 和 Linux 上安装 ComfyUI。我们将从 安装 Anaconda 开始,到安装 PyTorch 和 ComfyUI,最后提供一些常见问题的解决方法。 macOS和linux安装步骤很相似 可以按照1️⃣安装anaconda2️⃣安装python3️⃣torch4️⃣comfyui Co…...

360手机刷机 360手机解Bootloader 360手机ROOT
360手机刷机 360手机解Bootloader 360手机ROOT 问:360手机已停产,现在和以后,能刷机吗? 答:360手机,是肯定能刷机的 360手机资源下载网站 360手机-360手机刷机RootTwrp 360os.top 360rom.github.io 一、…...

t113-qt
修改QT配置: # # qmake configuration for building with arm-linux-gnueabi-g ## MAKEFILE_GENERATOR UNIX # CONFIG incremental # QMAKE_INCREMENTAL_STYLE sublib# include(../common/linux.conf) # include(../common/gcc-base-unix.conf) # inc…...

【真一键部署脚本】——一键部署deepseek
目录 deepseek一键部署脚本说明 0 必要前提 1 使用方法 1.1 使用默认安装配置 1.1 .1 使用其它ds模型 1.2 使用自定义安装 2 附录:deepseek模型手动下载 3 脚本下载地址 deepseek一键部署脚本说明 0 必要前提 linux环境 python>3.10 1 使用方法 1.1 …...

【AI 语音】实时语音交互优化全解析:从 RTC 技术到双讲处理
网罗开发 (小红书、快手、视频号同名) 大家好,我是 展菲,目前在上市企业从事人工智能项目研发管理工作,平时热衷于分享各种编程领域的软硬技能知识以及前沿技术,包括iOS、前端、Harmony OS、Java、Python等…...

pytest-xdist 进行多进程并发测试
在自动化测试中,运行时间过长往往是令人头疼的问题。你是否遇到过执行 Pytest 测试用例时,整个测试流程缓慢得让人抓狂?别担心,pytest-xdist 正是解决这一问题的利器!它支持多进程并发执行,能够显著加快测试…...
【Android】版本和API对应关系表
目录 版本和API对应关系表 不积跬步,无以至千里;不积小流,无以成江海。要沉下心来,诗和远方的路费真的很贵! 版本和API对应关系表 版本名版本号名称APIAndroid 1616.0W36Android 1515.0V35Android 1414.0U34Android 1…...
通过acme生成与续签ssl证书,并部署到nginx
通过acme生成与续签ssl证书,并部署到nginx 介绍 官方介绍: acme.sh 实现了 acme 协议,可以从 ZeroSSL,Lets Encrypt 等 CA 生成免费的证书。 安装 acme.sh 1. curl方式 curl https://get.acme.sh | sh -s emailmyexample.com…...

mysql系统库介绍,数据字典(介绍,存储方式,常见表,访问权限),系统表(介绍,不同功能的表)
目录 mysql系统库 介绍 数据字典 介绍 不同版本下的存储方式 常见的数据字典表 访问权限 系统表 介绍 权限授予系统表 对象信息系统表 服务器端帮助系统表 时区系统表 mysql系统库 介绍 MySQL 默认创建 的特殊数据库,主要用于存储服务器运行时所需的信…...

spring 学习(工厂方式 实例化对象(静态工厂,实例化工厂,实现factorybean 规范))
目录 前言 第一种:静态工厂方式实例化对象 静态工厂的特点 demo(案例) 第二种:实例工厂的方式 实例工厂和静态工厂的区别 demo(案例) 第三种:实现FactoryBean规范的方式 demo(案例) 前言 spring 实…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...

visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...

Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
Python爬虫实战:研究Restkit库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的有价值数据。如何高效地采集这些数据并将其应用于实际业务中,成为了许多企业和开发者关注的焦点。网络爬虫技术作为一种自动化的数据采集工具,可以帮助我们从网页中提取所需的信息。而 RESTful API …...

Copilot for Xcode (iOS的 AI辅助编程)
Copilot for Xcode 简介Copilot下载与安装 体验环境要求下载最新的安装包安装登录系统权限设置 AI辅助编程生成注释代码补全简单需求代码生成辅助编程行间代码生成注释联想 代码生成 总结 简介 尝试使用了Copilot,它能根据上下文补全代码,快速生成常用…...
接口 RESTful 中的超媒体:REST 架构的灵魂驱动
在 RESTful 架构中,** 超媒体(Hypermedia)** 是一个核心概念,它体现了 REST 的 “表述性状态转移(Representational State Transfer)” 的本质,也是区分 “真 RESTful API” 与 “伪 RESTful AP…...