css绘制s型(grid)
在之前有通过flex布局实现了s型布局,是通过截取数组形式循环加载数据
这次使用grid直接加载数据通过css实现

<div id="app"><template v-for="(item,inx) in items"><div class="row"><template v-for="(ite, index) in item.arr"><div class="row-list" :style="setEvent(index)"><div class="lineBg"><div class="line-title"><div class="box">{{ ite }}</div></div></div></div></template></div></template>
</div>
new Vue({el: '#app',computed: {setEvent() {return function (index) {// 通过下标得当前是第几行const row = Math.floor(index / this.row) + 1;// 当前行的第几个const rowIndex = index % this.row;if (this.evenRow(index)) {return {// 设置grid属性值gridRowStart: row,gridColumnStart: this.row - rowIndex}}}},},data: {row: 6,items: [{arr: [1, 2, 3, 4, 5, 6]},{arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},{arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]},{arr: [1, 2, 3, 4]}],},})
.row {display: grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: minmax(50px, auto);grid-auto-rows: minmax(50px, auto);grid-gap: 10px;margin-bottom: 10px;text-align: center;}.row-list {border: 1px solid #cccccc;}
相关文章:
css绘制s型(grid)
在之前有通过flex布局实现了s型布局,是通过截取数组形式循环加载数据 这次使用grid直接加载数据通过css实现 <div id"app"><template v-for"(item,inx) in items"><div class"row"><template v-for"(ite…...
【华为HCIP实战课程二十八】中间到中间系统协议IS-IS邻居关系排错,网络工程师
一、ISIS邻居关系条件 1、同一层次(比如Level-2路由器不能和Level-1路由器形成邻居关系) 2、同一区域(L1必须同一区域) 3、同一网段 R1和R2之间分别配置如下IP地址和掩码: R1 的接口S1/0/0掩码为/24 R2的接口S1/0/0配置成掩码/28: 此时R1和R2依然可以建立ISIS邻居关系…...
Word首行空格不显示空格符号问题
Word段落首行空格设置指南 问题描述 在Word中编辑文档时,有时会遇到段落首行敲击空格键却不显示空格的问题。这通常与Word的自动更正设置有关。 解决方法 要解决此问题,需要调整Word的自动更正设置。具体步骤如下: 打开Word的"自动更…...
vue+element上传图片
一、html页面上传图片 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> <…...
用ChatGPT提升工作效率:从理论到实际应用
伴人工智能技术的迅速演进,像ChatGPT这类语言模型已成为提升工作效率的关键工具。这类模型不仅具备处理海量数据的能力,还能自动化许多日常任务,从而提高决策的准确性。本文将深入探讨如何在工作中利用ChatGPT等AI工具提升效率,涵…...
8、Node.js Express框架
五、Express框架 5.1概念 Express框架是一个基于Node.js平台的极简、灵活的WEB开发框架:www.express.com.cn 简单来说,Express是一个封装好的工具包,封装了很多功能,便于我们开发WEB应用 5.2安装 npm i express5.3 Express初体验 //01-express初体验.js //1.导入exrp…...
STM32F103C8T6学习笔记3--按键控制LED灯
1、实验内容 S4、S5分别接PB12和PB13,实验要求,按下S4,D1亮,D2灭;按下S5,D2亮,D1灭。 由于按键学习的是GPIO口的输入功能,和输出功能的配置略有区别。本次通过按键触发相应功能没有…...
Unity3D Shader实现法线贴图功能详解
在Unity3D中,Shader是一种强大的工具,可以帮助开发人员实现各种复杂的视觉效果,其中法线贴图功能就是其中之一。法线贴图是一种纹理映射技术,通过在模型表面上放置法线贴图纹理来模拟真实世界中的细节和凹凸,使模型看起…...
【含开题报告+文档+源码】基于SpringBoot+Vue的校园设备报修系统
开题报告 随着高校规模的不断扩大和设施设备的日益完善,传统的校园设备报修方式已经无法满足日益增长的维修需求。这种方式往往存在信息不准确、报修流程冗长、反馈不及时等问题,给高校维修工作带来了很大的困扰。为了提高设备故障处理的效率和准确性&a…...
电赛入门之软件stm32keil+cubemx
hal库可以帮我们一键生成许多基本配置,就不需要自己写了,用多了hal库就会发现原来用基本库的时候都过的什么苦日子(笑 下面我们以f103c8t6,也就是经典的最小核心板来演示 一、配置工程 首先来新建一个工程 这里我们配置rcc和sys&…...
STM32F103C8T6学习笔记2--LED流水灯与蜂鸣器
1、简要说明与电路图 LED灯与蜂鸣器都是GPIO的输出操作,给高低电平实现。GPIO操作也是后续操作的基础,没有什么难度,记不住寄存器没关系,只要把流程理清楚就可以了。 端口配置成推挽输出模式,高低电平均有驱动能力。 …...
Docker命令备忘录----Linux运维
1. Docker简介 Docker 是一个开源平台,旨在帮助开发人员和运维人员通过容器技术加速应用的开发、测试和部署。它提供了轻量级的隔离环境,使应用程序及其依赖能够快速打包并运行在任何环境中。 Docker的核心组件包括镜像(Image)、…...
Golang new() make var []int 使用的具体区别
一、数组和切片的初始化 1 var []int 格式 func main() {var t1 []intt1 append(t1, 1)fmt.Println(t1) //正常输出 1var t11 []intt11[0] 11 //panic: runtime error: index out of range [0] with length 0fmt.Println(t11)var t12 [1]intt12[0] 12fmt.Println(t12) /…...
【Linux驱动开发】多线程调用驱动时的并发与竞争(原子操作、自旋锁、信号量、互斥锁)
【Linux驱动开发】多线程调用驱动时的并发与竞争(原子操作、自旋锁、信号量、互斥锁) 文章目录 多线程调用驱动原子操作原子变量操作原子位操作调用方法 自旋锁读写锁顺序锁调用方法 信号量互斥锁(互斥体)中断中使用附录…...
qt QComboBox详解
QComboBox是一个下拉选择框控件,用于从多个选项中选择一个。通过掌握QComboBox 的用法,你将能够在 Qt 项目中轻松添加和管理组合框组件,实现复杂的数据选择和交互功能。 重要方法 addItem(const QString &text):将一个项目添…...
redis做缓存,mysql的数据怎么与redis进行同步(双写一致性)
基于业务做选择,强一致性和允许延迟再加消息队列 强一致性:当修改了数据库的数据同时更新缓存的数据,缓存和数据库的数据保持一致 读操作:缓存命中,直接返回数据,缓存没有命中,查询数据库,写入缓存,设定过期时间 写操作:延迟双删 :先删除缓存,修改数据库,等待延迟(数据库主从节…...
WPF触发器
WPF触发器 触发器(Trigger)通常指的是一种事件驱动机制,用于响应特定的事件或条件。WPF触发器是WPF中一种强大的功能,允许开发者在样式和模板中定义条件逻辑,以响应属性值的变化。WPF提供了多种触发器来实现样式和模板…...
反序列化漏洞的运行原理及防御方法
反序列化漏洞是当前网络安全领域中的一种严重安全威胁,其运行原理和防御方法对于保障应用程序和系统安全至关重要。本文将深入探讨反序列化漏洞的运行原理,并提出有效的防御策略。 ### 反序列化漏洞的运行原理 序列化是指将对象的状态信息转换为可以存储…...
护眼大路灯哪个牌子好?口碑最好的护眼灯品牌
护眼大路灯哪个牌子好?作为一名专业的测评师,我发现有大量的家长都反应自己家孩子在学习时经常出现,揉眼睛、频繁眨眼、眼睛痒等问题,而这些问题多半是与不良光线有光,这些现象使我更加关注护眼大路灯的选择࿰…...
Redis 初学者指南
Redis 初学者指南 1. 什么是 Redis?2. Redis 的基本概念3. 安装 Redis3.1 使用 Docker 安装3.2 从源码编译安装 4. 基本操作4.1 启动 Redis 服务4.2 连接 Redis 客户端4.3 常用命令 5. Redis 的数据结构5.1 字符串5.2 列表5.3 集合5.4 散列5.5 有序集合 6. 高级特性…...
告别GPIO模拟!用GD32的Timer+DMA高效驱动WS2812灯带(附完整工程)
用GD32的TimerDMA实现WS2812灯带零CPU占用驱动方案 在嵌入式LED控制领域,WS2812系列灯带因其简单的单线通信协议和丰富的色彩表现,成为许多项目的首选。然而,传统的GPIO模拟时序方法存在明显的性能瓶颈——当灯珠数量增加时,CPU会…...
喜马拉雅音频下载器终极指南:快速批量下载VIP有声小说与付费专辑
喜马拉雅音频下载器终极指南:快速批量下载VIP有声小说与付费专辑 【免费下载链接】xmly-downloader-qt5 喜马拉雅FM专辑下载器. 支持VIP与付费专辑. 使用GoQt5编写(Not Qt Binding). 项目地址: https://gitcode.com/gh_mirrors/xm/xmly-downloader-qt5 你是否…...
提示词工程精要:从角色设定到边界约束的完整设计框架
设计提示词(Prompt)是决定大语言模型回答质量的关键环节。好的提示词能让模型准确理解意图、输出符合预期的内容;糟糕的提示词则可能导致答非所问、格式混乱甚至“幻觉”。结合本研究的实践经验以及当前提示工程的主流方法,设计提…...
广州seo公司如何选择
广州seo公司如何选择 在当今数字化时代,选择一家合适的广州seo公司成为企业在竞争激烈的市场中脱颖而出的关键。SEO(搜索引擎优化)不仅仅是提升网站排名,更是提高品牌知名度和销售转化的有效手段。如何选择一家优秀的广州seo公司…...
在WSL2上搞定PyTorch模型转昇腾OM:我的Atlas 200DK部署踩坑实录
在WSL2上实现PyTorch模型到昇腾OM的高效转换:避坑指南与实战解析 对于希望在Windows环境下完成昇腾模型转换的开发者来说,WSL2提供了一个近乎完美的解决方案。本文将深入探讨如何在这一环境中高效完成从PyTorch到昇腾OM模型的完整转换流程,同…...
5种认知减负策略:2025年macOS效率工具深度测评与工作流优化指南
5种认知减负策略:2025年macOS效率工具深度测评与工作流优化指南 【免费下载链接】Ice Powerful menu bar manager for macOS 项目地址: https://gitcode.com/GitHub_Trending/ice/Ice 在数字化工作环境中,macOS菜单栏作为系统与用户交互的核心界面…...
嵌入式上位机开发入门(十):RT-Thread 后台线程代码借鉴
目录 一、前言二、后台线程的职责三、发送 AT 命令的流程四、client_parser 解析函数五、网络数据的接收处理六、总结七、结尾 一、前言 大家好,这里是 Hello_Embed。经过上一篇笔记的学习,我们了解到监听、接收、发数据、建立连接,这些过…...
BepInEx深度解析:构建Unity游戏插件生态系统的完整指南
BepInEx深度解析:构建Unity游戏插件生态系统的完整指南 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx 在Unity游戏开发领域,BepInEx框架已成为插件和模组开…...
保姆级教程:用AntV L7快速搭建可交互的3D地图(附四川地图JSON数据下载)
从零构建3D地图可视化:AntV L7实战指南与四川地貌呈现 第一次看到3D地图在城市规划、气象监测或商业分析中的应用时,那种立体数据跃然屏上的震撼感,让我立刻想动手尝试。作为蚂蚁集团推出的地理空间数据可视化引擎,AntV L7确实能让…...
mPLUG-Owl3-2B工具评测:消费级GPU上的高效视觉问答解决方案
mPLUG-Owl3-2B工具评测:消费级GPU上的高效视觉问答解决方案 1. 引言:多模态AI的平民化时代 在AI技术快速发展的今天,能够同时理解图像和文本的多模态模型正变得越来越重要。想象一下,当你上传一张照片,AI不仅能识别其…...
