当前位置：首页 > news >正文

vue3大屏实现；使用使用CSS Grid实现大屏

news 来源：原创 2025/7/19 19:48:35

文章目录

一、效果
- 1.效果
- 2.使用CSS Grid
- 3.插件
- 4.html代码
- 5.index.scss代码

一、效果

1.效果

方案：采用CSS的Grid布局，实现首页大屏模块划分和自适应功能；
布局： 大屏主要内容，高宽比是1920*1080；即16:9的宽高比按照该比例，自适应放大缩小；直至放大到高度撑满或者宽度先撑满为止；未撑满的那一方直接留下黑色背影即可。
全屏功能 ：代码里自带逻辑
优点： 该方案可以保证大屏的页面比列协调，不会变成扁平或者瘦高。

大屏布局

2.使用CSS Grid

CSS Grid Generator工具

使用

3.插件

使用element-resize-detector监听尺寸变化

"element-resize-detector": "^1.2.4",

4.html代码

<template><div ref="digitalEvaluationContent":class="['page-view', 'digital-evaluation-content', fullScreen ? 'full-screen' : '']"><div ref="digitalEvaluation" class="digital-evaluation"><div class="parent"><div class="div1"><div class="title_name">div1系统名称XXXXX</div><div class="time_box"><span><el-icon :size="16" class="el-icon-class"><Calendar /></el-icon><span style="display: inline-block; width: 170px;">{{currentDateTime}}</span></span><span class="ml cursor" style="color: blue;" @click="fullScreenFun"><el-icon :size="16" class="el-icon-class"><FullScreen /></el-icon>{{ fullScreen ? '退出' : '' }}全屏</span></div></div><div class="div2">div2</div><div class="div3">div3：css等设置依旧生效-这里有个 margin-bottom: 60px;<div>1</div></div><div class="div4">div4</div><div class="div5">div5</div><div class="div6">div6-依旧可以设置高度 height: 100px</div><div class="div7">div7</div><div class="div8">div8是自定义的一个div</div></div></div></div>
</template><script setup>
import { ref, unref, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
import { Calendar, FullScreen, } from '@element-plus/icons-vue'
import elementResizeDetectorMaker from 'element-resize-detector'const digitalEvaluationContent = ref(null)
const digitalEvaluation = ref(null)
let currentDateTime = ref('')
const fullScreen = ref(false)const formatDateTime = (dateTime) => {const year = dateTime.getFullYear();const month = ('0' + (dateTime.getMonth() + 1)).slice(-2);const date = ('0' + dateTime.getDate()).slice(-2);const hours = ('0' + dateTime.getHours()).slice(-2);const minutes = ('0' + dateTime.getMinutes()).slice(-2);const seconds = ('0' + dateTime.getSeconds()).slice(-2);return `${year}年${month}月${date}日 ${hours}:${minutes}:${seconds}`
}// 自适应
function resizeContent() {const erd = elementResizeDetectorMaker()erd.listenTo(unref(digitalEvaluationContent), () => {// * 默认缩放值const scale = {width: '1',height: '1'}// * 设计稿尺寸（px）const baseWidth = 1920const baseHeight = 1080// * 需保持的比例（默认16:9）const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))const box = unref(digitalEvaluationContent)const appRef = unref(digitalEvaluation)if (!appRef) return// 当前宽高比const currentRate = parseFloat((box.clientWidth / box.clientHeight).toFixed(5))if (appRef) {if (currentRate > baseProportion) {// 表示更宽scale.width = ((box.clientHeight * baseProportion) / baseWidth).toFixed(5)scale.height = (box.clientHeight / baseHeight).toFixed(5)} else {// 表示更高scale.height = (box.clientWidth / baseProportion / baseHeight).toFixed(5)scale.width = (box.clientWidth / baseWidth).toFixed(5)}appRef.style.transform = `scale(${scale.width}, ${scale.height})`}})
}// 全屏
function fullScreenFun() {fullScreen.value = !fullScreen.valueif (fullScreen.value) {if (document.documentElement.RequestFullScreen) {document.documentElement.RequestFullScreen()}// 兼容火狐// console.log(document.documentElement.mozRequestFullScreen)if (document.documentElement.mozRequestFullScreen) {document.documentElement.mozRequestFullScreen()}// 兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreenif (document.documentElement.webkitRequestFullScreen) {document.documentElement.webkitRequestFullScreen()}// 兼容IE,只能写msRequestFullscreenif (document.documentElement.msRequestFullscreen) {document.documentElement.msRequestFullscreen()}} else {if (document.exitFullScreen) {document.exitFullscreen()}// 兼容火狐// console.log(document.mozExitFullScreen)if (document.mozCancelFullScreen) {document.mozCancelFullScreen()}// 兼容谷歌等if (document.webkitExitFullscreen) {document.webkitExitFullscreen()}// 兼容IEif (document.msExitFullscreen) {document.msExitFullscreen()}}
}// 监听尺寸变化
const listenResize = () => {if (!checkFull()) {fullScreen.value = false// console.log('退出全屏');}
};// 判断全屏
const checkFull = () => {//判断浏览器是否处于全屏状态 （需要考虑兼容问题）let isFull =//火狐浏览器document.mozFullScreen ||document.fullScreen ||//谷歌浏览器及Webkit内核浏览器document.webkitIsFullScreen ||document.webkitRequestFullScreen ||document.mozRequestFullScreen ||document.msFullscreenEnabled;if (isFull === undefined) {isFull = false;}return isFull;
};// 五分钟轮询
let timer = ref(undefined) // 计时器// 系统标题
const systemName = ref("")
onMounted(() => {window.addEventListener("resize", listenResize);systemName.value = localStorage.getItem("systemName") || "调度网络综合网管"currentDateTime.value = formatDateTime(new Date())setInterval(() => {currentDateTime.value = formatDateTime(new Date())}, 1000);resizeContent()
})onBeforeUnmount(() => {// 清除定时器clearInterval(timer.value)
});onUnmounted(() => {window.removeEventListener("resize", listenResize);
})
</script>
<style lang="scss" scoped src="./index.scss"></style>

5.index.scss代码

.pall {padding: 16px 16px;
}.pr {padding-right: 16px;
}.pl {padding-left: 16px;
}.pt {padding-top: 12px;
}.pb {padding-bottom: 12px;
}.mr {margin-right: 16px;
}.ml {margin-left: 16px;
}.mt {margin-top: 12px;
}.mb {margin-bottom: 12px;
}.m0 {margin: 0;
}
.page-view {height: 100%;width: 100%;
}:deep .loading-container {background: none;
}.full-screen {position: fixed !important;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;
}.digital-evaluation-content {// overflow: hidden;display: flex;justify-content: center;align-items: center;background-color: #000000;
}.digital-evaluation {width: 1920px;height: 1080px;color: #fff;.parent {position: relative;padding: 0px 20px;width: 1920px;height: 100%;display: grid;// grid-template-columns: 1fr 900px 1fr;// grid-template-rows: 86px repeat(3, 1fr);grid-template-rows: 125px repeat(6, 1fr); // 7行=125px + 6等份grid-template-columns: 447px repeat(1, 1fr) 447px; // 三列=447px + 1等份 + 447pxgrid-column-gap: 20px;grid-row-gap: 20px;background-color: #1fff;background-image: url("@/assets/homeImg/bj.jpg");background-repeat: no-repeat;background-size: 100% 100%;}.div1 {// 占据几行几列 再默认 1 1grid-area: span 1 / span 3 / span 1 / span 1;position: relative;overflow: hidden;// height: 403px; //单独设置// pointer-events: none;background-color: #132222;opacity: 0.7;.title_name {position: absolute;text-align: center;font-size: 38px;left: 0;right: 0;margin: 0 auto;line-height: 86px;font-weight: 500;letter-spacing: 6px;font-style: italic; // 斜体z-index: 5;// 渐变字体background: linear-gradient(0deg, #eb0e0e 30%, #ffffff 60%, #fff 100%);-webkit-text-fill-color: transparent;background-clip: text;-moz-background-clip: text;-webkit-background-clip: text;}.time_box {background-color: #48ce82;position: absolute;z-index: 999;text-align: center;left: 0;right: 0;top: 80px;font-size: 14px;.el-icon-class {position: relative;top: 3px;}}}.div2 {grid-area: span 2 / span 1 / span 1 / span 1;background-color: #132222;opacity: 0.7;}.div3 {padding: 0 10px;grid-area: span 6 / span 1 / span 1 / span 1;background-color: #132222;opacity: 0.7;}.div4 {grid-area: span 4 / span 1 / span 1 / span 1;background-color: #132222;opacity: 0.7;}.div5 {grid-area: span 3 / span 1 / span 1 / span 1;background-color: #132222;opacity: 0.7;}.div6 {grid-area: span 2 / span 1 / span 1 / span 1;background-color: #132222;height: 100px;opacity: 0.7;}.div7 {height: 160px;grid-area: span 1 / span 1 / span 1 / span 1;background-color: #132222;opacity: 0.7;}.div8 {cursor: pointer;position: absolute;bottom: 0;left: 50%;height: 30px;line-height: 30px;transform: translateX(-50%);color: #00fffb;// grid-area: span 1 / span 1 / span 1 / span 2;background-color: #132222;opacity: 0.7;}
}

vue3大屏实现；使用使用CSS Grid实现大屏

文章目录一、效果1.效果2.使用CSS Grid3.插件4.html代码5.index.scss代码一、效果 1.效果方案：采用CSS的Grid布局，实现首页大屏模块划分和自适应功能； 布局： 大屏主要内容，高宽比是1920*1080；即16:9的…...

编程日记 2025/7/19 19:48:35

安卓入门二 Kotlin基础

Kotlin Kotlin的历史 Kotlin由Jet Brains公司开发设计，2011年公布第一版，2012年开源。 2016年发布1.0正式版，并且Jet Brains在IDEA加入对Kotlin的支持，安卓自此又有新的选择。 2019年谷歌宣布Kotlin成为安卓第一开发语言&#x…...

编程日记 2025/7/18 5:15:01

在ubuntu上如何使用sdkman安装两个版本的java并进行管理和维护

在Ubuntu上使用SDKMAN安装和管理两个不同版本的Java的步骤如下： 安装SDKMAN 打开终端，使用以下命令安装SDKMAN： curl -s "https://get.sdkman.io" | bash这个命令会下载并运行SDKMAN!的安装脚本。安装完成后，需要打开…...

编程日记 2025/7/20 10:23:35

《代码随想录》Day20打卡！

《代码随想录》二叉树：二叉搜索树的最近公共祖先本题的完整题目如下： 本题的思路如下： 1.之前写过一个二叉树的最近公共祖先，本题相比于另一道题，不同是本题是二叉搜索树，有一些可用的性质。 2.本题使用递…...

编程日记 2025/7/14 11:39:21

GPIO相关寄存器，点灯

目录一.输入模式 1.浮空输入 2.上拉输入 3.下拉输入 4.模拟输入二.输出模式 1.推挽输出 2.开漏输出三.寄存器 1.寄存器的作用 2.功能与类型 3.控制某一引脚输出电压来点灯所需要控制的寄存器 1.打开对应时钟开关 2.端口模式寄存器 ---输出模式 3.输出类型寄存…...

编程日记 2025/7/20 10:03:50

25 - GRACE Mascon数据缺失月份数据插值

25 - GRACE Mascon数据缺失月份数据插值 0 引言1 程序包获取1.1 获取ssa插值算法程序包1.2 try2 利用ssa对grace mascon数据进行插值3 完整代码及相关函数3.1 Main程序3.1 子程序4 总结0 引言 💦💦💦💦💦 上篇介绍了grace mascon数据提取及简单的分析过程，仔细…...

编程日记 2025/7/15 9:08:04

深入理解Redis：从理论到实践的Java之旅

Redis，这个开源的内存数据结构存储系统，自2009年诞生以来，凭借其丰富的数据结构、快速的读写性能以及高度的可扩展性，迅速成为了分布式系统和高并发应用中的明星组件。本文将带你深入理解Redis，并通过Java语言的实践示…...

编程日记 2025/7/20 9:47:30

REDIS的集群

REDIS的集群模式： 主从模式：redis高可用的基础，哨兵和集群都是建立在此基础之上特点： 主从模式和数据库的主从模式（工作模式）是一样的，主负责写入，然后把写入到数据同步到从&…...

编程日记 2025/7/19 14:44:09

linux——vi命令常用操作

一、vi模式 vi一般分为三种模式，分别是命令行模式、插入模式、末行模式 1.命令模式：控制屏幕光标的移动，按 ：进入末行模式，按 i（其他插入命令也可） 进入插入模式； 2.插入模式&…...

编程日记 2025/7/18 20:49:10

SKETCHPAD——允许语言模型生成中间草图,在几何、函数、图算法和游戏策略等所有数学任务中持续提高基础模型的性能

概述论文地址：https://arxiv.org/pdf/2406.09403 素描是一种应用广泛的有效工具，包括产生创意和解决问题。由于素描能直接传达无法用语言表达的视觉和空间信息，因此从古代岩画到现代建筑图纸，素描在世界各地被用于各种用途。儿童…...

编程日记 2025/7/16 13:45:21

计算机网络•自顶向下方法：网络应用原理

网络应用原理网络应用架构目前有两种主流的网络应用架构： 客户-服务器架构（Client-server） 服务器（server）: 有一台总是在线的主机，上面运行着服务器程序(server)服务器主机(server machine)具有永久的…...

编程日记 2025/7/19 19:08:23

python: Oracle Stored Procedure query table

oracel sql script CREATE OR REPLACE PROCEDURE SelectSchool(paramSchoolId IN char,p_cursor OUT SYS_REFCURSOR ) AS BEGINOPEN p_cursor FORSELECT *FROM SchoolWHERE SchoolId paramSchoolId; END SelectSchool; /-- 查询所有 CREATE OR REPLACE PROCEDURE SelectScho…...

编程日记 2025/7/14 20:13:56

Webpack学习笔记（6）

首先搭建一个基本的webpack环境： 执行npm init -y，创建pack.json，保存安装包的一些信息执行npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D，出现node_modules和package-lock.json。 1.source-Ma…...

编程日记 2025/7/17 19:07:00

数仓建模：如何进行实体建模？

目录 1 如何进行实体建模？业务建模领域建模逻辑建模 2 实体建模具体步骤需求分析...

编程日记 2025/7/3 10:03:57

C++ 设计模式：享元模式（Flyweight Pattern）

链接：C 设计模式链接：C 设计模式 - 单例模式享元模式（Flyweight Pattern）是一种结构型设计模式，它通过共享尽可能多的相同对象来减少内存使用和提高性能。享元模式适用于大量细粒度对象的场景，这些对象之…...

编程日记 2025/7/17 16:10:06

idea报错：There is not enough memory to perform the requested operation.

文章目录一、问题描述二、先解决三、后原因（了解） 一、问题描述就是在使用 IDEA 写代码时，IDEA 可能会弹一个窗，大概提示你目前使用的 IDEA 内存不足，其实就是提醒你 JVM 的内存不够了，需要重新分配。弹…...

编程日记 2025/7/14 19:35:18

Kubernetes Gateway API-2-跨命名空间路由

1 跨命名空间路由 Gateway API 具有跨命名空间路由的核心支持。当多个用户或团队共享底层网络基础设施时，这很有用，但必须对控制和配置进行分段，以尽量减少访问和容错域。 Gateway 和 Route(HTTPRoute,TCPRoute,GRPCRoute) 可以部署到不同的命名空间中，路由可以跨命名空间…...

编程日记 2025/7/15 11:29:36

【视觉SLAM:四、相机与图像】

相机模型相机模型是计算机视觉中的重要内容，用于描述真实相机如何将三维世界投影到二维图像平面。以下从多个角度介绍常见的相机模型。针孔相机模型针孔相机模型是最简单的相机模型，用数学公式描述从三维世界到二维图像平面的映射关系。核心公式如…...

编程日记 2025/7/18 13:13:38

【spring】参数校验Validation

前言在实际开发中，我们无法保证客户端传来的请求都是合法的。比如一些要求必传的参数没有传递，传来的参数长度不符合要求等，这种时候如果放任不管，继续执行后续业务逻辑，很有可能就会出现意想不到的bug。有人可能会…...

编程日记 2025/7/17 22:04:04

基于 InternLM 和 LangChain 搭建你的知识库

本文基于InternStudio 算力平台利用 InternLM 和 LangChain 搭建知识库。 InternStudio (OpenAIDE)[1] 是面向算法开发者与研究员的云端集成开发环境。基于「容器实例」，「镜像中心」，「分布式训练」，「公开数据集」模块为用户提供 “算力、算…...

编程日记 2025/7/14 7:14:37

C++ 设计模式：备忘录模式（Memento Pattern）

链接：C 设计模式链接：C 设计模式 - 状态模式备忘录模式（Memento Pattern）是一种行为设计模式，它允许在不破坏封装性的前提下捕获和恢复对象的内部状态。这个模式在需要保存和恢复对象状态的场景中非常有用&#xff…...

编程日记 2025/7/17 19:58:32

STM32配合可编程加密芯片SMEC88ST的防抄板加密方案设计

SMEC88ST SDK开发包下载目前市场上很多嵌入式产品方案都是可以破解复制的，主要是因为方案主芯片不具备防破解的功能，这就导致开发者投入大量精力、财力开发的新产品一上市就被别人复制，到市场上的只能以价格竞争，最后工厂复制的产…...

编程日记 2025/7/16 14:09:51

利用JavaScript实现猜数字

一，使用while循环实现以下代码为固定数字非随机数，答案通过弹窗来设置，结果太唯一。 let number;while (true) {number prompt(我正在想一个1-10的数字,你猜猜看？);switch (number) {case "1":alert("小了&quo…...

编程日记 2025/7/16 8:30:10

terminal_学习

参考： 让你的 Mac 提前用上 macOS Catalina 的 Shell——Oh My Zsh 配置指南 https://sspai.com/post/55176MAC 终端美化教程（来个全套 ）https://blog.csdn.net/weixin_42326144/article/details/121957795 x.1 zsh做美化（安装oh…...

编程日记 2025/7/20 1:17:40

MongoDB 管理工具

关于 MongoDB 的管理工具，目前市面上有多款优秀的 GUI 工具可供选择。这些工具旨在提高 MongoDB 的开发和管理效率，使得数据库操作更加便捷和高效。以下是一些推荐的工具： MongoDB Compass：这是 MongoDB 官方提供的一款 GUI 管理工…...

编程日记 2025/7/15 19:04:46

46. Three.js案例-创建颜色不断变化的立方体模型

46. Three.js案例-创建颜色不断变化的立方体模型实现效果知识点 Three.js基础组件 WebGLRenderer THREE.WebGLRenderer是Three.js提供的用于渲染场景的WebGL渲染器。它支持抗锯齿处理，可以设置渲染器的大小和背景颜色。构造器 antialias: 是否开启抗锯齿&am…...

编程日记 2025/7/17 10:31:15

机器学习-高斯混合模型

文章目录高斯混合模型对无标签的数据集：使用高斯混合模型进行聚类对有标签的数据集：使用高斯混合模型进行分类总结实战高斯混合模型对无标签的数据集：使用高斯混合模型进行聚类对有标签的数据集：使用高斯混合模型进行分类总结…...

编程日记 2025/7/14 22:42:32

Linux官文转载-- Linux 内核代码风格

Warning 此文件的目的是为让中文读者更容易阅读和理解，而不是作为一个分支。因此， 如果您对此文件有任何意见或更新，请先尝试更新原始英文文件。这是一个简短的文档，描述了 linux 内核的首选代码风格。代码风格是因人而异的&a…...

编程日记 2025/7/17 7:44:35

通过无障碍服务(AccessibilityService)实现Android设备全局水印显示

一、无障碍功能简介首先我们先来了解下无障碍功能的官方介绍： 无障碍服务仅应用于帮助残障用户使用 Android 设备和应用。它们在后台运行，并在触发 AccessibilityEvents 时接收系统的回调。此类事件表示用户界面中的某些状态转换，例如焦点已…...

编程日记 2025/7/20 1:31:25

Dockerfile基础指令

1.FROM 基于基准镜像（建议使用官方提供的镜像作为基准镜像，相对安全一些） 举例： 制作基准镜像（基于centos:lastest） FROM cenots 不依赖于任何基准镜像 FROM scratch 依赖于9.0.22版本的tomcat镜像 FROM…...

编程日记 2025/7/18 16:11:47

rocketmq5源码系列--（二）--生产者发送消息

这是broker源码系列第一篇。还是和往常一样，建议copy到本地阅读 broker是基于netty的 rocketmq队列分物理队列和逻辑队列，物理队列只有一个而逻辑队列有很多个 rocketmq 物理队列，一个物理队列对应一个文件，一个物理队列可以对…...

编程日记 2025/7/15 13:42:18

uniapp从入门到精通（全网保姆式教程）~ 别再说你不会开发小程序了

目录一、介绍二、环境搭建（hello world） 2.1 下载HBuilderX 2.2 下载微信开发者工具 2.3 创建uniapp项目 2.4 在浏览器运行 2.5 在微信开发者工具运行 2.6 在手机上运行三、项目基本目录结构四、开发规范概述五、全局配置文件&#xff0…...

编程日记 2025/7/18 10:51:33

Kali 自动化换源脚本编写与使用

1. 背景与需求在使用 Kali Linux 的过程中，软件源的配置对系统的更新与软件安装速度至关重要。 Kali 的默认官方源提供了安全且最新的软件包，但有时由于网络条件或地理位置的限制，使用官方源可能会出现速度较慢的问题。为了解决这一问题&a…...

编程日记 2025/7/15 11:37:09

mysql-二进制安装方式

目录 1. 安装组件即依赖包 2. 创建用户 3. 关闭防火墙 4. 解压mysql二进制源码包 5. 创建文件夹并赋予权限 6. 编译安装mysql，安装完成最后面，会有一串英文，那是登录数据库的密码 7. 设置配置文件 8. 将mysql添加进环境变量 9. 复制…...

编程日记 2025/7/15 14:43:32

深入剖析Android SoundPool及其JNI实现

深入剖析Android SoundPool及其JNI实现 1. SoundPool概述 SoundPool是Android中用于管理和播放音频资源的类，特别适合播放短小的音效，如游戏中的爆炸声、按钮点击声等。与MediaPlayer相比，SoundPool具有以下优势：低延迟：SoundPool适用于需要快速响应的音效播放。并发播…...

编程日记 2025/7/18 17:11:40

15_C语言 -构造类型

构造类型数据类型基本类型： 整型 short / short int（2字节）整型（默认） ：int（4字节）长整型：long / long int （8字节 （64位系统）&am…...

编程日记 2025/7/16 20:33:05

Python爬虫 - 豆瓣电影排行榜数据爬取、处理与存储

文章目录前言一、使用版本二、需求分析1. 分析要爬取的内容1.1 分析要爬取的分类1.2 分析要爬取的单个电影的数据1.3 分析如何获取单个电影数据1.3.1 预览数据1.3.2 查看请求网址、方法及请求头信息1.3.3 查看请求参数 2. 数据用途2.1 统计分析2.2 探索性数据分析 (EDA)2.3 高…...

编程日记 2025/7/14 18:33:55

知识碎片-环境配置

1.添加-i 下载快： pip install onnxruntime-gpu==X.X.X -i https://pypi.tuna.tsinghua.edu.cn/simple 清华源 pip install xxx -i https://pypi.tuna.tsinghua.edu.cn/simple/ 阿里源 pip install xxx -i https://mirrors.aliyun.com/pypi/simple 中科大源 pip install xxx -…...

编程日记 2025/7/15 14:27:29

手机实时提取SIM卡打电话的信令声音-智能拨号器的SIP线路-双卡双待单通方案

手机实时提取SIM卡打电话的信令声音 --智能拨号器的SIP线路-双卡双待单通方案一、前言蓝牙电话的技术方案最初是从蓝牙耳机和车机蓝牙的使用领域延伸出来的技术方式。通过蓝牙的HFP协议，把手机通话的声音和通话事件状态提取出来进行复用和处理。但中国大陆现行…...

编程日记 2025/7/20 6:13:13

LangChain教程 - 表达式语言 (LCEL) -构建智能链

系列文章索引 LangChain教程 - 系列文章 LangChain提供了一种灵活且强大的表达式语言 (LangChain Expression Language, LCEL)，用于创建复杂的逻辑链。通过将不同的可运行对象组合起来，LCEL可以实现顺序链、嵌套链、并行链、路由以及动态构建等高级功能…...

编程日记 2025/7/14 7:47:11

pytorch学习笔记汇总

一.tensor创建 1.张量的定义张量在形式上就是多维数组，例如标量就是0维张量，向量就是一维张量，矩阵就是二维张量，而三维张量就可以想象RGB图片，每个channel是一个二维的矩阵，共有三个channel&#xff0…...

编程日记 2025/7/15 1:29:10

uniapp配置文字艺术字体风格

1.vue配置 App.vue中： <style>/*每个页面公共css *//* 全局字体风格 */font-face {font-family: gufengFont;src: url(./static/font/gufeng.ttf) format(truetype);font-weight: normal;font-style: normal;} </style>页面中： .text1 {f…...

编程日记 2025/7/19 20:36:52

江科大学习笔记之——HAL库点亮一个LED灯

HAL三步走：1.建工程。2.设配置。3.写代码一.建立工程 HAL库写法点击FinIsh 2.配置时钟 2 、设置配置参数把模块.C.h单独设置文件生产代码三写代码控制GPIO就三步 1.RCC时钟使能 2.结构体配置GPIO寄存器 3.控制GPIO值上面的步骤已经把前两步的配置完成了接下…...

编程日记 2025/7/18 4:21:53

java web项目软件自动生成使用初体验-帅帅软件生成平台ASoft

软件默认登陆账号 admin 密码 123456 一、软件使用简介说 AI软件自动生成越来越成熟，但AI生成的软件代码只是片段化的，不成体系。有没有一款可以10-30分钟自动生成JAVA WEB休系的软件？我也找了好久，终于找到了，开发…...

编程日记 2025/7/15 1:07:18

损失函数-二分类和多分类

二分类和多分类的损失函数二分类损失函数 L ( y , y ^ ) − ( y l o g ( y ^ ) ) ( 1 − y ) l o g ( 1 − y ^ ) L(y,\hat{y}) -(ylog(\hat{y})) (1-y)log(1-\hat{y}) L(y,y^)−(ylog(y^))(1−y)log(1−y^) 其中真实标签表示为y（取值为 0 或 1&#…...

编程日记 2025/7/14 18:51:02

Springboot：后端接收数组形式参数

1、接收端写法 PermissionAnnotation(permissionName "",isCheckToken true)PostMapping("/batchDeleteByIds")public ReturnBean webPageSelf( NotNull(message "请选择要删除的单据！") Long[] ids) {for (Long string : ids) {l…...

编程日记 2025/7/19 11:38:24

CSS系列（46）-- Color Functions详解

前端技术探索系列：CSS Color Functions详解 🎨 致读者：探索颜色函数的艺术 👋 前端开发者们， 今天我们将深入探讨 CSS Color Functions，这个强大的颜色处理特性。基础函数 🚀 颜色空间 /…...

编程日记 2025/7/14 17:11:38

MySQL数据库误删恢复_mysql 数据误删

2、BigLog日志相关 2.1、检查biglog状态是否开启声明: 当前为mysql版本5.7 当前为mysql版本5.7****当前为mysql版本5.7 2.1.1、Navicat工具执行 SHOW VARIABLES LIKE LOG_BIN%;OFF 是未开启状态，如果不是ON 开启状态需要开启为ON。{默认情况下就是关闭状态} 2.…...

编程日记 2025/7/20 5:47:26