<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