vue 实战 tab标签页+el-card+流式布局+异步接口调用

<template><div><!-- 布局按钮 --><el-button @click="dialogVisible = true">布局配置查看</el-button><!-- 布局配置对话框 --><el-dialog :visible.sync="dialogVisible" title="布局配置查看" width="1200px"><!-- 表单 --><el-form :inline="true" :model="filter" class="form-row"><!-- 玩家 uid 输入框 --><el-form-item label="玩家 uid"><el-input v-model="filter.uid" placeholder="请输入玩家 uid" clearable size="small"></el-input></el-form-item><!-- 游戏类型 id 输入框 --><el-form-item label="游戏类型 id"><el-input v-model="filter.gameId" placeholder="请输入游戏类型 id" clearable size="small"></el-input></el-form-item><!-- 时间点选择器 --><el-form-item label="时间点"><el-date-picker v-model="filter.timePoint" type="datetime" placeholder="请选择时间点" clearable size="small"></el-date-picker></el-form-item><!-- 搜索和重置按钮 --><el-form-item><el-button type="primary" @click="search" icon="el-icon-search" size="mini">搜索</el-button><el-button @click="reset" icon="el-icon-refresh" size="mini">重置</el-button></el-form-item></el-form><el-tabs v-model="activeTab"><!-- 结束面板引流区页面 --><el-tab-pane label="开始面板引流区" name="drainage"><el-card class="box-card-area"><div class="component-list"><el-buttonv-for="(component, index) in drainComponents":key="component.comId"class="component-button":style="getButtonStyle(index)"><div>{{ component.name }}</div><div class="comId">{{ component.comId }}</div></el-button></div></el-card></el-tab-pane><!-- 结束面板数据区页面 --><el-tab-pane label="开始面板数据区" name="data"><el-card class="box-card-area"><div class="component-list"><el-buttonv-for="(component, index) in dataComponents":key="component.comId"class="component-button":style="getButtonStyle(index)"><div>{{ component.name }}</div><div class="comId">{{ component.comId }}</div></el-button></div></el-card></el-tab-pane><!-- 直播中默认区域页面 --><el-tab-pane label="生活中默认区域" name="default"><el-card class="box-card-area"><div class="component-list"><el-buttonv-for="(component, index) in liveComponents":key="component.comId"class="component-button":style="getButtonStyle(index)"><div>{{ component.name }}</div><div class="comId">{{ component.comId }}</div></el-button></div></el-card></el-tab-pane></el-tabs></el-dialog></div>
</template><script>
const generateSoftColor = () => {const hue = Math.floor(Math.random() * 360);const saturation = 60 + Math.random() * 20; // 饱和度在60%-80%之间const lightness = 70 + Math.random() * 20; // 亮度在70%-90%之间return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
};// 通用转换函数
const convertDataList = (dataList) => {return dataList.map(item => ({comId: item.comId,name: item.name,weight: item.weight,color: generateSoftColor()}));
};const sortedDataList = (dataList) => {return dataList.slice().sort((a, b) => b.weight - a.weight);
};// 数据列表
const dataList1 = [{ comId: '1000009', name: '对方如果', property: 0, type: 0, weight: 4 },{ comId: '1000004', name: '辅导费人', property: 0, type: 0, weight: 1 },{ comId: '1000010', name: '电电风扇', property: 0, type: 0, weight: 2 },{ comId: '1000006', name: '小组件', property: 0, type: 0, weight: 3 },{ comId: '1000007', name: '飒飒飒飒', property: 0, type: 0, weight: 5 },{ comId: '1000011', name: '你说的分手', property: 0, type: 0, weight: 6 },{ comId: '1000012', name: '大润发儿童', property: 0, type: 0, weight: 9 },{ comId: '1000013', name: '大方的发过的', property: 0, type: 0, weight: 8 }
];const dataList2 = [{ comId: '1000001', name: '哈哈哈', property: 0, type: 1, weight: 2 },{ comId: '1000005', name: '测试组件名称', property: 0, type: 1, weight: 2 },{ comId: '1000002', name: '啦啦啦', property: 1, type: 0, weight: 0 }
];const dataList3 = [{ comId: '1000017', name: 'GV地方大幅度', property: 0, type: 0, weight: 3 },{ comId: '1000016', name: '奋斗奋斗发的', property: 0, type: 0, weight: 2 },{ comId: '1000008', name: '大幅度发', property: 0, type: 0, weight: 1 },{ comId: '1000003', name: '似懂非懂发', property: 1, type: 1, weight: 0 },{ comId: '1000014', name: '个人发一个发帖人', property: 0, type: 0, weight: 0 },{ comId: '1000015', name: '会更好多说点', property: 0, type: 0, weight: 0 }
];export default {data() {return {dialogVisible: false,activeTab: "drainage",filter: {uid: '',gameId: '',timePoint: ''},drainComponents: convertDataList(sortedDataList(dataList1)),dataComponents: convertDataList(sortedDataList(dataList2)),liveComponents: convertDataList(sortedDataList(dataList3))};},methods: {getButtonStyle(index) {return {backgroundColor: this.drainComponents[index]?.color,paddingLeft: '5px',paddingRight: '5px',marginLeft: (index === 0) ? '10px' : '',};},async search() {/* eslint-disable */const { uid, gameId, timePoint } = this.filter;// 使用搜索条件调用获取组件数据的方法this.drainComponents = await this.getComponents(uid, gameId, '');this.dataComponents = await this.getComponents(uid, gameId, '');this.liveComponents = await this.getComponents(uid, gameId, '');},reset() {this.filter = {uid: '',gameId: '',timePoint: ''};// 重置后的操作},async getComponents(uid, gameId, area) {let componentsData = [];try {const response = await getComConfListItems({'uid': uid,'clientType': 1,'clientVerNum': '','templateType': 0,'gameId': gameId,'area': area});console.log('快捷布局配置 getComConfListItems response.data: ', response.data);componentsData = convertDataList(response.data);} catch (error) {console.error('Error fetching components:', error);}return componentsData;}},
};
</script><style scoped>
/* 表单行样式 */
.form-row {margin-bottom: 20px;
}/* 流式布局样式 */
.component-list {display: flex;flex-wrap: wrap;gap: 10px;
}.component-button {display: flex;flex-direction: column;align-items: center;
}.comId {font-size: 12px;color: gray;
}/* 设置 el-card__body 的 padding */
::v-deep .box-card-area .el-card__body {padding-top: 10px !important;padding-bottom: 10px !important;padding-right: 0px !important;padding-left: 0px !important;
}
</style>

 

小技巧: F12 只有鼠标悬浮上去才会出现页面元素 想看它的样式 并且让页面元素停在页面

查看该元素所在的源代码位置

方法一:按下F12,点击我们想要查看的元素,然后选择快捷键:ctrl+shift+c。按快捷键可以选中这个小提示,然后看到对应的样式,这样就能修改这个元素的样式了

方法二:

1、fn + F12 打开调试模式

2、打开Sources(源代码)

3、找到触发悬浮的元素,鼠标放上去

定位住悬浮元素停留在页面:

1、按【F12】键(或右键点击【检查】)打开调试模式

2、找到自己悬浮的元素,右键点击后,不要乱点

3、移入调试面板,按下【N】键,就自动定位到目标元素了,接下来就可以查看和调试想要的样式了。

css f12界面如何选中鼠标指上去才弹出的界面的元素_f12 怎么在网页上选取元素-CSDN博客文章浏览阅读1k次,点赞2次,收藏2次。按快捷键可以选中这个小提示,然后看到对应的样式,这样就能修改这个元素的样式了。f12打开网页的审查元素界面,例如下面hover上去才会出现的小提示。研究了下发现,这个选择有快捷键,ctrl+shift+c。会发现用工具的选择,选中不到这个小提示。_f12 怎么在网页上选取元素https://blog.csdn.net/wnk1997/article/details/128614050

chrome浏览器 调试鼠标悬停后出现的元素样式_浏览器f12怎么获取到悬浮窗的元素-CSDN博客文章浏览阅读4.4k次,点赞4次,收藏17次。鼠标悬停后出现的样式,我们遇见的有两种情况,一种是用css设置的hover时的样式,第二种就像el-tooltip组件,鼠标悬停时出现提示文字的样式。_浏览器f12怎么获取到悬浮窗的元素https://blog.csdn.net/qq_58340302/article/details/133086852 

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

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

相关文章

Invalid bound statement (not found)

Invalid bound statement (not found) 首先申明的是这个错误一般是使用mybatis方法没有找到或者参数不匹配等原因造成的&#xff01; 原本项目是使用eclipse运行&#xff0c;导入到idea之后&#xff0c;项目启动就报错 …Invalid bound statement (not found)… 解决办法&#…

Python 爬虫(爬取百度翻译的数据)

前言 要保证爬虫的合法性&#xff0c;可以从以下几个方面着手&#xff1a; 遵守网站的使用条款和服务协议&#xff1a;在爬取数据之前&#xff0c;仔细阅读目标网站的相关规定。许多网站会在其 robots.txt 文件中明确说明哪些部分可以爬取&#xff0c;哪些不可以。 例如&…

中电金信:AI数据服务

01 方案简介 AI数据服务解决方案为泛娱乐、电子商务、交通出行等行业提供数据处理、数据分析、AI模型训练等服务&#xff0c;通过自主研发的IDSC自动化数据服务平台与客户业务流程无缝衔接&#xff0c;实现超低延时的实时数据处理支持。 02 应用场景 智能医疗&#xff1a; 通…

深入浅出mediasoup—通信框架

libuv 是一个跨平台的异步事件驱动库&#xff0c;用于构建高性能和可扩展的网络应用程序。mediasoup 基于 libuv 构建了包括管道、信号和 socket 在内的一整套通信框架&#xff0c;具有单线程、事件驱动和异步的典型特征&#xff0c;是构建高性能 WebRTC 流媒体服务器的重要基础…

《javaEE篇》--单例模式详解

目录 单例模式 饿汉模式 懒汉模式 懒汉模式(优化) 指令重排序 总结 单例模式 单例模式属于一种设计模式&#xff0c;设计模式就好比是一种固定代码套路类似于棋谱&#xff0c;是由前人总结并且记录下来我们可以直接使用的代码设计思路。 单例模式就是&#xff0c;在有…

升级python版本

参考 https://blog.51cto.com/u_15579956/10397535 python3 main.py

聚焦保险行业客户经营现状,概述神策数据 CJO 解决方案

触点红利时代&#xff0c;企业的经营需求从「深度的用户行为分析」转变为「个性化、全渠道一致的客户体验」。客户旅程编排&#xff08;Customer Journey Orchestration&#xff0c;简称 CJO&#xff09;从体验出发&#xff0c;关注客户需求、感受和满意度&#xff0c;能够帮助…

HarmonyOS Next系列之地图组件(Map Kit)使用(九)

系列文章目录 HarmonyOS Next 系列之省市区弹窗选择器实现&#xff08;一&#xff09; HarmonyOS Next 系列之验证码输入组件实现&#xff08;二&#xff09; HarmonyOS Next 系列之底部标签栏TabBar实现&#xff08;三&#xff09; HarmonyOS Next 系列之HTTP请求封装和Token…

「运费速查神器」精明买家必备!一键查询1688供应商发货费用

对于从事跨境买家还是国内电商买家&#xff0c;在选品时&#xff0c;需要全面考虑商品成本&#xff0c;发货费用是供应链成本的重要组成部分。 原来如果我们在1688选品看供应商发货运费&#xff0c;需要一个个单独点击到商品的详情页去查看&#xff0c;再选择具体的收货地、再…

Elastic:监控不同于可观察性的 3 个原因

作者&#xff1a;来自 Elastic Observability Team 监控和可观察性经常互换使用&#xff0c;但它们并不完全相同。监控是可观察性的重要组成部分&#xff0c;但可观察性远远超出了传统监控实践的范围。 关键区别&#xff1a;监控从各个组件收集数据 —— 何时和什么&#xff0…

微信小程序-CANVAS写入图片素材、文字等数据生成图片

微信小程序中&#xff0c;CANVAS写入图片素材、文字等数据生成图片&#xff0c;最终可将生成的 base64 格式图片保存至相册操作 Tips&#xff1a; 1、canvas 标签默认宽度 300px、高度 150px canvas 生成图片时&#xff0c;写入图片素材、文字等数据前&#xff0c;需要根据实…

叶再豪降龙精英课程总结

文章目录 1.思维认知1.1 稻盛和夫成功公式1.2 龙头主升模式1.3 龙头主升-两种路径1.4 股市新手的炒股思路1.5 龙头案例1.6 降龙心法 2.情绪周期2.1 情绪周期2.1 情绪演绎周期2.2 情绪的四个部分2.2.1 指数的情绪周期2.2.3 热点情绪周期2.2.4 热点情绪演绎周期2.2.5 大热点支线2…

深入了解路由器工作原理:从零开始的简单讲解

简介 在现代网络中&#xff0c;路由器扮演着至关重要的角色。它不仅连接了不同的设备&#xff0c;还确保数据能够准确地传输到目的地。本文将带你深入探讨路由器的工作原理&#xff0c;帮助网络基础小白们理解这一重要设备的基本功能。 路由器的构成 路由器是一种具有多个输入…

纷享AI | AI技术在销售场景的应用与实践

AI高速发展的今天&#xff0c;各行业都经历着深刻变革。但机遇与挑战总相伴相生&#xff0c;各企业负责人事实上也正面临着如何有效利用AI以完成赋能销售业务的难题。 毋庸置疑&#xff0c;跟上技术潮流&#xff0c;通过落实AI在销售场景中的应用进而取得卓越赋能成果必然是行…

Android TabLayout的简单用法

TabLayout 注意这里添加tab&#xff0c;使用binding.tabLayout.newTab()进行创建 private fun initTabs() {val tab binding.tabLayout.newTab()tab.text "模板库"binding.tabLayout.addTab(tab)binding.tabLayout.addOnTabSelectedListener(object : TabLayout.On…

深度学习系列一

激活函数 sigmod 梯度消失问题&#xff1a; sigmoid函数的导数在输入值较大或较小时接近于0。在反向传播过程中&#xff0c;这些小梯度会相乘&#xff0c;导致深层网络的梯度变得非常小。结果是&#xff0c;深层网络的参数几乎不会更新&#xff0c;训练变得非常困难。这就是为…

Passing output of 3DCNN layer to LSTM layer

题意&#xff1a;将3DCNN&#xff08;三维卷积神经网络&#xff09;层的输出传递给LSTM&#xff08;长短期记忆网络&#xff09;层 问题背景&#xff1a; Whilst trying to learn Recurrent Neural Networks(RNNs) am trying to train an Automatic Lip Reading Model using 3…

2024年上半年主要游戏安全风险,该如何应对?

随着游戏行业的蓬勃发展&#xff0c;安全问题也日益成为行业关注的焦点。面对 2024 年上半 年的游戏安全风险挑战&#xff0c;游戏行业需要不断加强技术能力&#xff0c;完善安全策略&#xff0c;与各方共 同努力&#xff0c;打造一个更加安全、公平的游戏环境。 游戏安全解…

前端程序员会演化出类TA岗位吗?

前端开发领域确实在不断演化&#xff0c;随着技术的进步和行业的需求变化&#xff0c;前端程序员的角色和职责也在拓展&#xff0c;这自然催生了一系列相关的专业岗位。以下是一些从前端开发领域分化出来的专业角色&#xff0c;我们可以称之为“类TA”&#xff08;Technical Ad…

BGP之选路MED

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时&#xff0c;BGP协议会对这些BGP路由的属性进行比较&#xff0c;以确定去往该目标网络的最优BGP路由。BGP路由属性的比较顺序为Preferred Value属性、Local Preference属性、路由生成方式、AS_Path属性、Origin属…