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

【组件分享】商品列表组件-最佳实践

news 来源：原创 2025/6/8 6:48:47

商品列表组件

商品列表组件用于展示商品信息列表，支持多种布局方式和自定义配置。
在这里插入图片描述

基础用法

<template><ProGoodsList :goods-list="goodsList" :layout="layout" @item-click="handleItemClick" />
</template><script setup>
import { ref } from 'vue';const layout = ref('grid'); // 'grid' | 'list'
const goodsList = ref([{id: 1,name: '商品名称',price: 99.99,image: 'https://example.com/image.jpg',description: '商品描述',},
]);const handleItemClick = (item) => {console.log('点击商品:', item);
};
</script>

API

Props

参数	说明	类型	默认值
goodsList	商品列表数据	Array	[]
layout	布局方式	String	‘grid’
showPrice	是否显示价格	Boolean	true
showDescription	是否显示描述	Boolean	true

Events

事件名称	说明	回调参数
item-click	点击商品项时触发	(item: Object)
load-more	加载更多时触发	-

Slots

名称	说明
item	自定义商品项内容
empty	自定义空状态内容

主题定制

组件支持通过 CSS 变量进行主题定制：

.pro-goods-list {--goods-item-bg: #ffffff;--goods-item-padding: 16px;--goods-item-radius: 8px;--goods-item-gap: 16px;--goods-price-color: #ff6b6b;
}

布局示例

网格布局

<template><ProGoodsList :goods-list="goodsList" layout="grid" />
</template>

列表布局

<template><ProGoodsList :goods-list="goodsList" layout="list" />
</template>

商品列表组件

<template><view class="goods"><view v-if="list.length > 0" class="scroll-wrapper"><scroll-view:scroll-top="scrollTop":scroll-y="scrollY":class="scrollY && 'scroll-Y'"@scrolltolower="onScrolltolower"><view class="goods-card-wrapper"><viewv-for="(item, index) in list":key="index"@click.stop="itemClick(item)"class="card-item"><view class="pro-good-card"><view class="img-wrapper-A" :class="cardType === 'B' && 'img-wrapper-B'"><image class="pro-good-img" mode="widthFix" :src="item.picUrl" alt="" /></view><view class="pro-good-info"><view class="first-title">{{ item.name }}</view><viewv-if="item.goodsDes"class="sec-title-A":class="cardType === 'B' && 'sec-title-A'">{{ item.goodsDes }}</view><view class="pro-good-price-A" :class="cardType === 'B' && 'pro-good-price-B'"><view><text v-if="priceInfo.unit" class="price-unit">{{ priceInfo.unit }}</text><text class="retail-price">{{ item.countPrice }}</text><text v-if="priceInfo.des" class="price-des">{{ priceInfo.des }}</text></view><view v-if="item.counterPrice" class="counter-price">¥{{ item.counterPrice }}</view></view></view></view></view></view></scroll-view></view><view v-else><imageclass="empty-img"src="https://static.wxb.com.cn/frontEnd/images/benz-mp/goods-empty.png"></image><view class="empty-text">暂无商品</view></view></view>
</template>
<script setup>import { ref, computed } from "vue";const props = defineProps({// 列表数据list: {type: Array,required: true,default: () => [],},// 卡片类型：A/BcardType: {type: String,default: "A",},// 卡片样式goodsStyle: {type: Object,default: () => {return {};},},// 价格相关的信息priceInfo: {type: Object,default: () => {return {unit: "￥",des: "起",};},},// 是否开启上拉加载scrollY: {type: Boolean,default: false,},//  滚动高度scrollHeight: {type: Number,default: 0,},});const scrollHeight = props.scrollHeight;const _goodsStyle = computed(() => {const options = {borderRadius: "16rpx", // 卡片圆角bgColor: props.cardType === "A" ? "#fff" : "rgba(255, 255, 255, 0.74)", // 卡片背景颜色//一级标题样式firstTitle: {fontSize: "28rpx",color: "#333",fontFamily: "PingFang SC, sans-serif",},//二级标题样式secondTitle: {fontSize: "22rpx",color: "#666",fontFamily: "PingFang SC, sans-serif",},priceColor: "#FF4D3B", // 价格字体颜色columnGap: "24rpx", // 列间距rowGap: "24rpx", // 行间距};return Object.assign(options, props.goodsStyle);});// 卡片圆角const borderRadius = _goodsStyle.value.borderRadius;// 一级标题样式const { fontSize: ffs, color: fc, fontFamily: ffm } = _goodsStyle.value.firstTitle;// 二级标题样式const { fontSize: sfs, color: sc, fontFamily: sfm } = _goodsStyle.value.secondTitle;// 价格颜色const priceColor = _goodsStyle.value.priceColor;// 卡片背景色const bgColor = _goodsStyle.value.bgColor;// 列间距const columnGap = _goodsStyle.value.columnGap;// 行间距const rowGap = _goodsStyle.value.rowGap;// 点击事件const emits = defineEmits(["itemClick", "scroll"]);const itemClick = (item) => {emits("itemClick", item.id);};const onScrolltolower = () => {console.log("上拉加载");emits("scroll");};
</script>
<style scoped lang="scss">@import '../base.scss';// 用于数字的特殊字体@font-face {font-family: "TCloudNumberRegular";src: url("./fonts/TCloudNumber-Regular.ttf") format("truetype"),url("./fonts/TCloudNumber-Regular.ttf") format("woff2");}.goods {text-align: center;height: v-bind(scrollHeight);.scroll-wrapper {height: 100%;.scroll-Y {height: 100%;}.goods-card-wrapper {column-gap: v-bind(columnGap);column-count: 2;.card-item {margin-bottom: 24rpx;break-inside: avoid; //避免子元素内容被截取.pro-good-card {width: 100%;background: v-bind(bgColor);border-radius: v-bind(borderRadius);overflow: hidden;.img-wrapper-A {padding: 12rpx 12rpx 0 12rpx;.pro-good-img {display: block;width: 100%;border-radius: 12rpx;}}.img-wrapper-B {padding: 0;.pro-good-img {display: block;width: 100%;border-radius: 0;}}.pro-good-info {padding: 0rpx 20rpx 28rpx 20rpx;}.first-title {font-size: v-bind(ffs);color: v-bind(fc);font-family: v-bind(ffm);font-weight: 500;line-height: 36rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;margin-top: 20rpx;text-align: left;}.first-title-B {margin-top: 10rpx;}.sec-title-A {font-size: v-bind(sfs);color: v-bind(sc);font-family: v-bind(sfm);line-height: 32rpx;margin-top: 8rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;text-align: left;}.sec-title-B {margin-top: 4rpx;}.pro-good-price-A {display: flex;align-items: baseline;margin-top: 24rpx;.price-unit {font-size: 20rpx;font-family: "TCloudNumberRegular";font-weight: 400;color: v-bind(priceColor);line-height: 24rpx;}.price-des {font-size: 20rpx;font-family: PingFang SC, sans-serif;font-weight: 500;color: v-bind(priceColor);line-height: 28rpx;margin-left: 4rpx;}.retail-price {font-size: 40rpx;color: v-bind(priceColor);line-height: 44rpx;font-family: "TCloudNumberRegular";vertical-align: middle;}.counter-price {font-size: 24rpx;text-decoration: line-through;margin-left: 12rpx;color: #cecece;font-family: "TCloudNumberRegular";}}.pro-good-price-B {margin-top: 20rpx;}}}}}}
</style>

【组件分享】商品列表组件-最佳实践

商品列表组件商品列表组件用于展示商品信息列表，支持多种布局方式和自定义配置。基础用法 <template><ProGoodsList :goods-list"goodsList" :layout"layout" item-click"handleItemClick" /> </template>&l…...

编程日记 2025/5/30 15:18:53

【JAVA】BOSS系统发版艺术：构建高效、优雅的微服务部署策略

在现代软件开发领域，微服务架构与容器化部署已迅速成为行业新趋势。微服务架构通过将应用拆分成多个小型、自治的服务单元，每个服务承担某项特定的业务功能。而容器化部署则以其轻量级和高度可移植的特性，为这些微服务的有效打包、分发和运行…...

编程日记 2025/6/2 18:02:39

React的响应式

在 React 中，useState 是一个 Hook，用于在函数组件中定义和管理状态。 setCount 是由 useState 返回的第二个值，用于更新状态并触发组件重新渲染。它的本质是一个状态更新函数，背后是 React 的状态管理和调度机制。下面是对 setCo…...

编程日记 2025/6/3 13:03:46

deep face cam 部署报错解决

这里写自定义目录标题使用conda创建py3.9环境使用按照readme.txt安装所有依赖后遇到的报错2.最后一个模块insightface安装报错3.运行run.py又报错原因：解决方法：4.缺少模块解决方法：pip命令安装5.AttributeError: NoneType object has no attribute configure解决方法：安装…...

编程日记 2025/6/4 14:21:20

图像处理基础(4)：高斯滤波器详解

本文主要介绍了高斯滤波器的原理及其实现过程高斯滤波器是一种线性滤波器，能够有效的抑制噪声，平滑图像。其作用原理和均值滤波器类似，都是取滤波器窗口内的像素的均值作为输出。其窗口模板的系数和均值滤波器不同，均值滤波器的…...

编程日记 2025/6/2 4:33:10

outlook附件限制最大5m如何解决

Outlook 附件大小限制为 5MB，通常由邮件服务器（如 Exchange、Office 365、Gmail 等）或本地 Outlook 配置决定。可以采取以下几种方法来解决该限制问题： 解决方案 1：调整服务器端限制（管理员权限&#xff09…...

编程日记 2025/6/3 16:16:01

Word常见问题：嵌入图片无法显示完整

场景：在Word中，嵌入式图片显示不全，一部分图片在文字下方。如： 问题原因：因段落行距导致方法一快捷方式选中图片，通过"ctrl1"快捷调整为1倍行距方法二通过工具栏调整选中图片&#xff0…...

编程日记 2025/6/2 19:31:41

【面试题】java基础概念

以下是关于这道面试题的回答，包括JDK中一些相关概念的区别以及JIT的原理： JDK中相关概念区别 JDK、JRE和JVM JDK（Java Development Kit）：是Java开发工具包，它包含了JRE和一系列开发工具。JDK提供了编译、…...

编程日记 2025/6/2 6:21:11

WebSocket实现私聊私信功能

目录后端pom.xmlConfig配置类Controller类DTO 前端安装相关依赖websocketService.js接口javascripthtmlCSS 效果展示简单测试连接： 报错解决方法1、vue3 使用SockJS报错 ReferenceError: global is not defined 后面将继续完善，待更新... 后端 pom.xml…...

编程日记 2025/6/2 6:34:10

进程的哪些内存类型容易引起内存泄漏

相信你在平时的工作中，应该遇到过下面这些场景： 伴随着服务器中的后台任务持续地运行，系统中可用内存越来越少； 应用程序正在运行时忽然被 OOM kill 掉了； 进程看起来没有消耗多少内存，但是系统内存就是不够…...

编程日记 2025/5/31 1:54:07

用着很顺手的电脑亮度随心随意调节

一、功能介绍显示高级设置，可以调节屏幕RGB色彩。娱乐亮度，一键娱乐亮度调节。护眼亮度，保护眼睛，减少蓝光。恢复正常，一键恢复到默认模块。二、问题解答 1、亮度更改后显示器无变化！软件根本都没…...

编程日记 2025/5/30 13:44:47

图片生成Prompt编写技巧

1. 图片情绪（场景氛围） 一张图片一般都会有一个情绪基调，因为作画本质上也是在传达一些情绪，一般都会借助图片的氛围去转达。例如：比如家庭聚会一般是欢乐、喜乐融融。断壁残垣一般是悲凉。还有萧瑟、孤寂等。 2.补充细…...

编程日记 2025/5/31 9:37:25

博客之星2024年度总评选——我的年度创作回顾与总结

2024年，是我在CSDN博客上持续耕耘、不断成长的一年。在此，与大家分享一下我的年度创作回顾与总结。一、创作成长与突破在人工智能领域，技术迭代迅速，知识更新频繁。为了保持自己的竞争力，在今年，我始终…...

编程日记 2025/6/2 13:38:25

前端Vue2项目使用md编辑器

项目中有一个需求，要在前端给用户展示内容，内容有 AI 生成的，返回来的是 md 格式，所以需要给用户展示 md 格式，并且管理端也可以编辑这个 md 格式的文档。使用组件库 v-md-editor。 https://code-farmer-i.github.i…...

编程日记 2025/6/1 8:29:26

Docker核心命令与Yocto项目的高效应用

随着软件开发逐渐向分布式和容器化方向演进，Docker 已成为主流的容器化技术之一。它通过标准化的环境配置、资源隔离和高效的部署流程，大幅提高了开发和构建效率。Yocto 项目作为嵌入式 Linux 系统构建工具，与 Docker 的结合进一步增强了开发…...

编程日记 2025/5/30 6:49:04

kong 网关和spring cloud gateway网关性能测试对比

该测试只是简单在同一台机器设备对spring cloud gateway网关和kong网关进行对比，受限于笔者所拥有的资源，此处仅做简单评测。一、使用spring boot 的auth-service作为服务提供者该服务提供了一个/health接口，接口返回"OK"&…...

编程日记 2025/6/1 16:29:05

DDoS攻击防护能力测试：Python版脚本

引言在互联网服务日益复杂和流量持续增长的今天，确保服务器能够应对高并发请求并具备良好的抗DDoS攻击的能力至关重要。声明以下代码仅在合法的前提下使用。工具设计原理脚本的核心在于它能够创建多个线程来并发执行不同的攻击方法，从而实现对目标…...

编程日记 2025/5/30 16:09:41

白玉微瑕：闲谈 SwiftUI 过渡（Transition）动画的“口是心非”（下）

概述秃头小码农们都知道，SwiftUI 不仅仅是一个静态 UI 构建框架那么简单，辅以海量默认或自定义的动画和过渡（Transition）特效，我们可以将 App 界面的绚丽升华到极致。不过，目前 SwiftUI 中的过渡&#x…...

编程日记 2025/5/30 5:04:38

5.4 解锁 OpenAI - Translator：模块设计，构建翻译系统的 “基石”

OpenAI-Translator 模块设计 OpenAI-Translator 作为一款基于 OpenAI GPT 模型的智能翻译助手，其模块设计至关重要。为了保证翻译的高效性、准确性与可扩展性，系统需要一个结构清晰、功能强大的模块化设计。本文将对 OpenAI-Translator 的各个模块进行详细解析，涵盖其核心功…...

编程日记 2025/6/2 17:17:44

数据分析变异系数

目录变异系数的应用场景包括： 特点： 注意事项： np.nanvar——方差，np.sanstd标准差简单来讲就是平均值/标准差变异系数（Coefficient of Variation, CV）是一种相对量的变异指标，常用于衡…...

编程日记 2025/6/3 13:57:55

C语言——编译与链接

目录前言一程序的两种环境 1翻译环境 2执行环境二预处理 1预处理符号 2#define 2.1#define 定义标识符 2.2#define 定义宏 2.2.1#和## 2.3带副作用的宏参数 2.4宏和函数的比较 2.5命名约定 3#undef 4命令行定义 5条件编译 5.1单分支 5.2多分支 5.3判断是…...

编程日记 2025/6/4 12:21:01

NewStar CTF week1 web wp

谢谢皮蛋做这题之前需要先去学习一些数据库的知识 1 order by 2 1可以理解为输入的id，是一个占位符，按第二列排序用来测试列数，如果没有两列则会报错-1 union select 1,2 -1同样是占位符，union的作用是将注入语句合并到原始语句…...

编程日记 2025/6/2 17:00:27

Android BitmapShader简洁实现马赛克，Kotlin（一）

Android BitmapShader简洁实现马赛克，Kotlin（一） 这一篇， Android使用PorterDuffXfermode模式PorterDuff.Mode.SRC_OUT橡皮擦实现马赛克效果，Kotlin（3）-CSDN博客基于PorterDuffXfermode实现马…...

编程日记 2025/6/3 16:52:10

NavVis手持激光扫描帮助舍弗勒快速打造“数字孪生”工厂-沪敖3D

在全球拥有近100家工厂的舍弗勒，从2016年开启数字化运营进程，而当前制造、库存、劳动力和物流的数字化，已无法支持其进一步简化工作流程，亟需数字化物理制造环境，打造“数字孪生”工厂。 NavVis为其提供NavVis VLX 3…...

编程日记 2025/6/3 8:04:53

web服务器网站部署的架构

WEB服务器工作原理 Web web是WWW(World Wide Web)的简称，基本原理是：请求(客户端)与响应(服务器端)原理，由遍布在互联网中的Web服务器和安装了Web浏览器的计算机组成客户端发出请求的方式：地址栏请求、超链接请求、表单请求 …...

编程日记 2025/6/4 15:35:35

ecovadis验厂相关要求

EcoVadis验厂的相关要求主要包括以下几个方面： 一、企业基本资质要求合法注册与运营：企业必须是合法注册并运营的法人实体，具备合法的经营资质，如营业执照、税务登记证等。无严重违法记录：在过去三年内，…...

编程日记 2025/6/4 16:18:25

SSM开发(一)JAVA,javaEE,spring,springmvc,springboot,SSM,SSH等几个概念区别

目录 JAVA 框架 javaEE spring springmvc springboot SSM SSH maven JAVA 一种面向对象、高级编程语言，Python也是高级编程语言；不是框架(框架：一般用于大型复杂需求项目，用于快速开发)具有三大特性，所谓Jav…...

编程日记 2025/5/30 20:28:36

Spring Boot中选择性加载Bean的几种方式

说明：用过Spring框架的都知道其自动装配的特性，本文介绍几种选择性加载Bean的方式。Spring自动装配参考以下两篇文章： 基于SpringBoot的三层架构开发&统一响应结果 SpringBoot自动装配原理简单分析 ConditionalOnProperty Conditiona…...

编程日记 2025/6/4 11:02:25

【JVM】垃圾收集器详解

你将学到 1. Serial 收集器 2. ParNew 收集器 3. Parallel Scavenge 收集器 4. Serial Old 收集器 5. Parallel Old 收集器 6. CMS 收集器 7. G1 收集器在 Java 中，垃圾回收（GC）是自动管理内存的一个重要机制。HotSpot JVM 提供了多种…...

编程日记 2025/5/31 3:41:46

【实用技能】如何在Stimulsoft产品中使用用户函数，快速创建报表及仪表盘

Stimulsoft Ultimate （原Stimulsoft Reports.Ultimate）是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能，Stimulsoft Ultimate包含了…...

编程日记 2025/5/28 22:44:54

MySQL四种隔离级别

MySQL的隔离级别是在事务这个大主题下面产生的说法。那么什么是事务，事务就是一组sql语句，要么全部执行成功，要么都不执行，不能只执行成功其中的部分sql。事务的最终目的是为了保证数据库数据的完整性、一致性和可用性。要保…...

编程日记 2025/6/2 18:36:41

Unity入门1

安装之后无法获得许可证，可以考虑重装新建项目单击空白处生成脚本双击c#文件会自动打开vstudio 检查引用如果没有引用，重开vstu，或者重新加载项目 hierarchy层级 scenes场景 assets资产 inspector督察 icon图标资源链接&…...

编程日记 2025/6/4 12:19:25

qml Loader详解

1、概述 QML Loader是Qt Quick框架中的一个关键元素，它允许开发者动态地加载和卸载QML组件。这种动态加载机制对于提升应用程序的性能、响应速度和用户体验至关重要。通过Loader，应用程序可以在需要时才加载特定的组件，而不是在启动时一次性…...

编程日记 2025/6/3 20:23:28

《安富莱嵌入式周报》第349期：VSCode正式支持Matlab调试，DIY录音室级麦克风，开源流体吊坠，物联网在军工领域的应用，Unicode字符压缩解压

周报汇总地址：嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版： 《安富莱嵌入式周报》第349期：VSCode正式支持Matlab调试，DIY录音室级麦克风…...

编程日记 2025/6/2 5:59:51

web端ActiveMq测试工具

如何用vue3创建简单的web端ActiveMq测试工具？ 1、复用vue3模板框架创建main.js,引入APP文件，createApp创建文件，并加载element插件，然后挂载dom节点 2、配置vue.config.js脚本配置 mport { defineConfig } from "vite&qu…...

编程日记 2025/6/4 9:48:10

1561. 你可以获得的最大硬币数目

class Solution:def maxCoins(self, piles: List[int]) -> int:piles.sort()res,n0,len(piles)for i in range(n//3):respiles[n-2-2*i]return res这里如果"你"想要获取最大，那么从最大的开始找每隔俩算一个最大累计，Bob默认自己从最小那找…...

编程日记 2025/6/2 6:10:06

NIO | 什么是Java中的NIO —— 结合业务场景理解 NIO （二）

实时通信应用的主流技术并非NIO ， 整理本文的目的是更好的理解 NIO 。在现代的即时聊天应用中，使用 WebSocket、MQTT 或 SignalR 等协议更为普遍。若您想了解当前主流的有关实时通信应用的技术 ， 请移步他文。 (一) 业务场景实…...

编程日记 2025/6/3 19:59:32

GD32L233RB 驱动数码管

1.数码管有8段A、B、C、D、E、F、G 和 H小数点以及片选信号（DIG） DIG用来选择那一位，A-G 用来显示段静态显示每次只能一次显示单个位动态显示（动态扫描）所有的位显示结束要在10ms左右显示2ms 消光1ms 实…...

编程日记 2025/5/24 16:12:48

AIGC视频生成模型：Stability AI的SVD(Stable Video Diffusion)模型

大家好，这里是好评笔记，公主号：Goodnote，专栏文章私信限时Free。本文详细介绍Stability AI的视频生成模型SVD(Stable Video Diffusion)模型，这家公司在图像生成领域富有盛名，开发并维护了知名开源项目SD系列…...

编程日记 2025/6/2 6:01:30

Linux 系统错误处理简介

Linux 系统错误处理简介 1. errno：错误代码的载体2. strerror()：错误信息的翻译官3. perror()：便捷的错误信息输出4. 系统调用与库函数的区别5. 错误处理的最佳实践在 C/C 程序开发中，我们经常需要处理各种错误情况 Linux 系统提…...

编程日记 2025/6/3 16:42:28

main.cpp #include <memory> using namespace std; #include "top.h" int sc_main(int i, char *av[]) { // 关闭关于 IEEE 1666 标准中过时特性的警告 sc_report_handler::set_actions("/IEEE_Std_1666/deprecated", SC_DO_NOTHING); cout <…...

编程日记 2025/6/3 5:05:50

C++打字模拟

改进于文宇炽筱_潜水 c版的打字效果_c自动打字-CSDN博客https://blog.csdn.net/2401_84159494/article/details/141023898?ops_request_misc%257B%2522request%255Fid%2522%253A%25227f97863ddc9d1b2ae9526f45765b1744%2522%252C%2522scm%2522%253A%252220140713.1301023…...

编程日记 2025/6/4 17:17:10

国产低功耗带LCD驱动和触摸按键功能的MCU

以下是国产低功耗、集成LCD驱动和触摸按键功能的MCU精选型号及其核心特性，结合性能、功耗和适用场景进行综合推荐： 1.灵动微MM32L0130系列 257 核心特性：低功耗：待机模式功耗低至100nA，支持多种低功耗模式。 LCD驱动&a…...

编程日记 2025/6/3 10:36:13

在 imx93 平台调试 nau88c10 声卡

一、环境介绍 linux 版本：6.6.52 soc：imx9331 codec：nau88c10 使用的内核文件为 Image，dtb 文件为：imx93-11x11-evk.dtb 二、硬件检查 i2s 信号线要接对 i2c 控制信号建议为 4.7k 上拉 codec 供电可以按参考设计…...

编程日记 2025/5/31 0:37:33

机器学习-分类算法评估标准

一. 准确率 accuracy 将预测结果和测试集的目标值比较，计算预测正确的百分比准确率越高说明模型效果越好 from sklearn import datasets from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier #加载鸢尾花…...

编程日记 2025/6/3 16:17:50

美区TikTok解封后如何回归使用？

随着2025年初美区TikTok解封的消息引起了广泛关注，许多用户纷纷开始重新关注这一全球最受欢迎的短视频平台。在经历了数月的禁用期后，TikTok在美国市场的回归，代表了这一平台的巨大潜力和挑战。从用户的使用习惯，到平台的内容策略…...

编程日记 2025/6/4 15:47:54

行人识别检测数据集，yolo格式，PASICAL VOC XML，COCO JSON,darknet等格式的标注都支持，准确识别率可达99.5%

作者简介： 高科，先后在 IBM PlatformComputing从事网格计算，淘米网，网易从事游戏服务器开发，拥有丰富的C，go等语言开发经验，mysql，mongo，redis等数据库，设计模…...

编程日记 2025/6/3 19:14:18

grafana + Prometheus + node_exporter搭建监控大屏

本文介绍生产系统监控大屏的搭建，比较实用也是实际应用比较多的方式，希望能够帮助大家对监控系统有一定的认识。 0、规划 grafana主要是展示和报警，Prometheus用于保存监控数据，node_exporter用于实时采集各个应用服务器的事实状…...

编程日记 2025/6/3 22:10:22

【腾讯云】docker创建网络遇到Unable to enable SKIP DNAT rule

docker创建网络遇到Unable to enable SKIP DNAT rule 背景今天打算在服务器上安装es,但是在创建网络时，提示 Error response from daemon: Failed to Setup IP tables: Unable to enable SKIP DNAT rule: (iptables failed: iptables --wait -t nat -I DOCKER…...

编程日记 2025/6/2 6:50:15

DeepSeek R1模型解读与使用

DeepSeek在推出R1预览版两个月后，发布了R1的正式版本，并且开源了模型，开放了API调用。我们直接来解读一下这款模型。这是官方的性能评测图。从左到右分别是DeepSeek-R1，o1正式版，32B蒸馏版R1，o1-mini&…...

编程日记 2025/6/3 5:31:35

商品列表组件

基础用法

API

Props

Events

Slots

主题定制

布局示例

网格布局

列表布局

商品列表组件

相关文章：