仿照管理系统布局配置
1.vue仿照snowy 配置,如下图:
2.代码实现
<template><div class="theme-settings"><!-- 导航栏 --><div class="nav-bar"><el-breadcrumb separator="/"><el-breadcrumb-item>导航设置</el-breadcrumb-item><el-breadcrumb-item>导航菜单布局</el-breadcrumb-item></el-breadcrumb></div><!-- 设置区域 --><div class="settings-section"><!-- 整体风格设置 --><div class="setting-item"><span class="label">整体风格设置</span><div class="style-options"><divv-for="(style, index) in styles":key="index":class="{ 'style-block': true, selected: selectedStyle === style.value }"@click="selectStyle(style.value)"><div :class="['style-icon', style.class]"><div :class="['header-bar', style.headerClass]"></div></div></div></div></div><!-- 整体界面布局 --><div class="setting-item"><span class="label">整体界面布局</span><div class="layout-options"><divv-for="(layout, index) in layouts":key="index":class="{ 'layout-block': true, selected: selectedLayout === layout.value }"@click="selectLayout(layout.value)"><div :class="['layout-icon', layout.class]"><div :class="['header-bar', layout.headerClass]"></div></div></div></div></div><!-- 主题设置 --><h3>主题设置 <el-button type="text" size="small" @click="resetTheme">恢复默认(黑灰)</el-button></h3><!-- 主题色 --><div class="setting-item"><span class="label">主题色</span><div class="color-picker"><divv-for="(color, index) in themeColors":key="index":style="{ backgroundColor: color }":class="{ 'color-block': true, selected: selectedThemeColor === color }"@click="selectThemeColor(color)"></div></div></div><!-- 页面公用主色 --><div class="setting-item"><span class="label">页面公用主色</span><el-switch v-model="useCommonMainColor"></el-switch></div><!-- 页面公用背景色 --><div class="setting-item"><span class="label">页面公用背景色</span><el-switch v-model="useCommonBgColor"></el-switch></div><!-- 侧边栏 --><div class="setting-item"><span class="label">侧边栏</span><el-switch v-model="showSidebar"></el-switch></div><!-- 侧边栏展开 --><div class="setting-item"><span class="label">侧边栏展开</span><el-switch v-model="expandSidebar"></el-switch></div><!-- 变更模块展开方式 --><div class="setting-item"><span class="label">变更模块展开方式</span><el-switch v-model="changeModuleExpand"></el-switch></div><!-- 变更用户小卡片 --><div class="setting-item"><span class="label">变更用户小卡片</span><el-switch v-model="changeUserCard"></el-switch></div><!-- 页面权限角色 --><div class="setting-item"><span class="label">页面权限角色</span><el-switch v-model="enablePageRole"></el-switch></div><!-- 页面权限 --><div class="setting-item"><span class="label">页面权限</span><el-switch v-model="enablePagePermission"></el-switch></div><!-- 提示信息 --><div class="tip"><el-alerttitle="提示:切换主题需重新登录,开发需先在 config/index.js 中配置默认值,否则不会生效"type="warning":closable="false"></el-alert></div><!-- 操作按钮 --><div class="actions"><el-button type="primary" @click="saveSettings">提交</el-button><el-button @click="resetSettings">重置</el-button></div></div></div>
</template><script>
export default {data() {return {// 整体风格设置选项styles: [{ value: "style1", class: "style1", headerClass: "header-dark" },{ value: "style2", class: "style2", headerClass: "header-light" },{ value: "style3", class: "style3", headerClass: "header-dark" },],selectedStyle: "style3", // 默认选中第三个// 整体界面布局选项layouts: [{ value: "layout1", class: "layout1", headerClass: "header-dark" },{ value: "layout2", class: "layout2", headerClass: "header-dark" },{ value: "layout3", class: "layout3", headerClass: "header-dark" },],selectedLayout: "layout1", // 默认选中第一个// 主题色themeColors: ["#FF0000", // 红"#FF69B4", // 粉"#00CED1", // 青"#00FF00", // 绿"#0000FF", // 蓝"#800080", // 紫"#000000", // 黑],selectedThemeColor: "#000000", // 默认黑色useCommonMainColor: false,useCommonBgColor: false,showSidebar: true,expandSidebar: false,changeModuleExpand: true,changeUserCard: false,enablePageRole: false,enablePagePermission: false,};},methods: {selectStyle(style) {this.selectedStyle = style;this.$message.success(`已选择风格:${style}`);},selectLayout(layout) {this.selectedLayout = layout;this.$message.success(`已选择布局:${layout}`);},selectThemeColor(color) {this.selectedThemeColor = color;this.$message.success(`已选择主题色:${color}`);},resetTheme() {this.selectedThemeColor = "#000000";this.$message.success("已恢复默认主题(黑灰)");},saveSettings() {const settings = {style: this.selectedStyle,layout: this.selectedLayout,themeColor: this.selectedThemeColor,useCommonMainColor: this.useCommonMainColor,useCommonBgColor: this.useCommonBgColor,showSidebar: this.showSidebar,expandSidebar: this.expandSidebar,changeModuleExpand: this.changeModuleExpand,changeUserCard: this.changeUserCard,enablePageRole: this.enablePageRole,enablePagePermission: this.enablePagePermission,};console.log("保存设置:", settings);this.$message.success("设置已保存,请重新登录以生效");},resetSettings() {this.selectedStyle = "style3";this.selectedLayout = "layout1";this.selectedThemeColor = "#000000";this.useCommonMainColor = false;this.useCommonBgColor = false;this.showSidebar = true;this.expandSidebar = false;this.changeModuleExpand = true;this.changeUserCard = false;this.enablePageRole = false;this.enablePagePermission = false;this.$message.success("已重置所有设置");},},
};
</script><style lang="less" scoped>
.theme-settings {padding: 20px;.nav-bar {margin-bottom: 20px;}.settings-section {background: #fff;padding: 20px;border-radius: 4px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);h3 {margin-bottom: 20px;font-size: 18px;display: flex;justify-content: space-between;align-items: center;}.setting-item {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;.label {font-size: 14px;color: #333;}.style-options,.layout-options {display: flex;gap: 10px;.style-block,.layout-block {width: 60px;height: 40px;border-radius: 4px;border: 2px solid transparent;cursor: pointer;position: relative;transition: border 0.3s;&.selected {border: 2px solid #409eff;&:after {content: "\2713"; /* 勾号 */position: absolute;top: 2px;right: 2px;color: #409eff;font-size: 16px;font-weight: bold;}}.style-icon,.layout-icon {width: 100%;height: 100%;border-radius: 2px;position: relative;overflow: hidden;}/* 头部颜色条 */.header-bar {position: absolute;top: 0;left: 0;width: 100%;height: 8px; /* 头部高度 */}.header-dark {background-color: #2c3e50; /* 深色头部 */}.header-light {background-color: #ecf0f1; /* 浅色头部 */}/* 整体风格设置图标样式 */.style1 {background: linear-gradient(to right, #2c3e50 20%, #ecf0f1 20%);}.style2 {background: linear-gradient(to right, #ecf0f1 20%, #ecf0f1 20%);}.style3 {background: linear-gradient(to right, #2c3e50 20%, #2c3e50 20%);}/* 整体界面布局图标样式 */.layout1 {background: linear-gradient(to right, #2c3e50 20%, #ecf0f1 20%);}.layout2 {background: linear-gradient(to right, #2c3e50 20%, #ecf0f1 20%);}.layout3 {background: linear-gradient(to right, #2c3e50 20%, #2c3e50 20%);}}}.color-picker {display: flex;gap: 10px;.color-block {width: 30px;height: 30px;border-radius: 4px;cursor: pointer;border: 2px solid transparent;transition: border 0.3s;&.selected {border: 2px solid #409eff;}}}}.tip {margin-bottom: 20px;}.actions {text-align: right;.el-button {margin-left: 10px;}}}
}
</style>
相关文章:
仿照管理系统布局配置
1.vue仿照snowy 配置,如下图: 2.代码实现 <template><div class"theme-settings"><!-- 导航栏 --><div class"nav-bar"><el-breadcrumb separator"/"><el-breadcrumb-item>导航设置…...
RLAgent note
OpenManus github LlamaGym github GRPO 实践 知乎:Deepseek R1 Zero成功复现 BabyAGI 0,环境 CUDA版本12.X:nvcc -V python 3.10:python -V gcc 11:gcc -V 1,安装llama-cpp-python [git | docs]…...
Python设计模式-工厂模式
一、模式定义与核心思想 工厂模式(Factory Pattern)属于创建型设计模式,其核心思想是通过一个"工厂类"来创建对象,而不是直接调用类的构造函数。这种模式将对象的实例化过程封装起来,使系统在实例化对象时能…...
Vue环境搭建:vue+idea
目录 第一章、Vue环境搭建:安装node2.1)node的下载2.2)配置node的环境变量2.3)常见的npm命令 第二章、使用idea创建vue工程2.1)在IDEA中设置国内镜像2.2)在IDEA中进行脚手架安装2.3)在IDEA中创建…...
庙算兵推:使用Streamlit框架构建了一个智能作战推演系统。
这段代码是一个完整的军事模拟应用,使用Streamlit框架构建了一个智能作战推演系统。该系统包括了三维地图显示、作战单位管理、应急事件处理等功能。用户可以通过界面控制推演的开始和暂停,调整时间加速倍率,并查看实时的战斗情况和系统状态。…...
APIGen-MT:高效生成多轮人机交互Agent数据的两阶段框架
APIGen-MT:高效生成多轮人机交互数据的两阶段框架 引言 随着人工智能技术的飞速发展,AI代理(Agent)已从简单的聊天机器人发展为能够执行复杂现实任务的系统,例如管理金融交易、安排预约和处理客户服务等。然而&#x…...
02-redis-数据结构实现原理
1、redis整体涉及的结构 在redis中整体是KV键值对的方式进行访问的,redis的查询的时间复杂度O(1),底层的数据结构其实跟java中的HashMap底层实现类似,整体采用的是数组链表的实现方式,哈希冲突的时候使用的是链表法解决࿱…...
京华幻梦:科技自然共生诗篇
故事摘要 故事发生在现代中国北京,展现了未来城市的奇幻景象与科技变革。在这个充满想象的未来世界里,科技与自然不再对立,而是达成了和谐共生的美妙平衡。故宫、鸟巢、798艺术区等标志性地点,在科技的赋能下焕发新的生机&#x…...
python:面向对象之包
1.包的定义: 包就是把有联系的模块组织在一起,即放在同一文件夹下,并且在这个文件夹下创建一个__init__.py文件,这个文件就叫做包。 2.包的创建: 创建好好会自动生成一个__init__.py文件。 3.包的调用: …...
spring boot整合redis
spring boot整合redis 步骤: ① 引入redis依赖 <dependency><groupId>org.springframework.boot</group><artifactId>spring-boot-starter-data-redis</artifactId> </dependency>②在application.yml配置文件中,…...
DIA——边缘检测
1.边缘 边缘是像素的突变位置。 2.常见边缘检测算法 通过找到一阶导数的极值点或者二阶导数的过零点来确定边缘像素的位置。边缘检测通常使用算子,即特定的卷积核。通过差分对离散的像素点求导,然后转化成卷积核进行卷积。使用卷积统一涵盖求导&…...
redis 免安装版本 启动方法 windows 安装包
redis 免安装版本 启动方法 windows 安装包 下载解压直接使用 百度网盘连接如下 链接:https://pan.baidu.com/s/1W4ICvdUUxkWPhK93GtdG0Q 提取码:vzw3 下载解压后会用32位和64位两种,根据自己的电脑选择 cmd命令 cd /d D:\yaochengwei\so…...
C语言练习二 进制转换
#include <stdio.h>// 强制类型转换int main(){int i 5;float j i / 2; // 只是把整形先除了 再赋值float k (float)i / 2; //先强制改成float 再赋值printf("%f\n",j);printf("%f\n",k);return 0; } #include <stdio.h> int main(){int…...
AlDente Pro for Mac电脑 充电限制保护工具
AlDente Pro for Mac电脑 充电限制保护工具 一、介绍 AlDente Pro for Mac,是一款充电限制保护工具,是可以限制最大充电百分比来保护电池的工具。锂离子和聚合物电池(如 MacBook 中的电池)在40% 至 80% 之…...
物联网卡(NB-IoT/4G)技术详解
物联网卡(IoT SIM卡)是专为物联网设备设计的流量卡,支持NB-IoT、4G Cat.1等低功耗广域网络(LPWAN),广泛应用于智能烟感、共享设备、车联网等领域。以下是NB-IoT和4G物联网卡的对比与选型指南。 1. NB-IoT v…...
HTML5 Video (视频) 深入解析
一、引言 在当今的互联网时代,视频已经成为网站内容中不可或缺的一部分。从产品介绍、教程演示到娱乐内容,视频以其生动直观的特点吸引着大量用户。HTML5 的出现,为在网页上展示视频提供了一个标准且强大的解决方案,改变了过去依赖插件(如 Flash)来显示视频的局面。 二…...
NO.87十六届蓝桥杯备战|动态规划-完全背包|疯狂的采药|Buying Hay|纪念品(C++)
完全背包 先解决第⼀问 状态表⽰: dp[i][j]表⽰:从前i个物品中挑选,总体积不超过j,所有的选法中,能挑选出来的最⼤价 值。(这⾥是和01背包⼀样哒) 那我们的最终结果就是dp[n][V] 。状态转移⽅…...
Win11企业版安装wsl遇到的坑
起因是windows11上安装了docker desktop,但是启动以后显示Docker Engine stopped,一顿搜索。 可以参考:windows 11系统下打开docker 提示 docker engine stopped - DbWong_0918 - 博客园 我这边主要是检查了第2点,开启windows h…...
C++手撕单链表及逆序打印
在学习数据结构的过程中,链表是一个非常重要的基础数据结构。今天,我们将通过C手动实现一个单链表,并添加一个逆序打印的功能,帮助大家更好地理解链表的实现和操作。 一、链表简介 链表是一种线性数据结构,其中每个元…...
Kubernetes外部etcd集群的快速Docker Compose 部署
一、背景 在高可用 Kubernetes 部署中,需要单独部署外部 etcd 集群,而不是使用 kubeadm 默认在 master 节点上部署的 etcd。以下是关于这一配置场景的详细记录。 二、etcd简介 etcd 是一个高可用的分布式键值存储系统,主要用于存储和管理配…...
docker的目录挂载与卷映射
文章目录 一、目录挂载背景定义使用 二、卷映射背景定义区别使用docker对卷的操作 一、目录挂载 背景 上一文,我们提了docker exec进入容器修改页面很麻烦,所以在这里,我们学习一个新的容器使用方法,叫“目录挂载” 定义 长话…...
十三种物联网/通信模块综合对比——《数据手册--物联网/通信模块》
物联网/通信模块 名称 功能 应用场景 USB转换模块 用于将USB接口转换为其他类型的接口,如串口、并口等,实现不同设备之间的通信。 常用于计算机与外部设备(如打印机、扫描仪等)的连接,以及数据传输和设…...
IntelliJ IDEA 中安装和使用通义灵码 AI 编程助手教程
随着人工智能技术的发展,AI 编程助手逐渐成为提升开发效率的强大工具。通义灵码是阿里云推出的一款 AI 编程助手,它能够帮助开发者实现智能代码补全、代码解释、生成单元测试等功能,极大地提升了编程效率和代码质量。 IntelliJ IDEA 是一款广…...
工业 IOT 平台重塑锂电龙头数字化未来
在 “双碳” 目标驱动下,新能源锂电池产业正经历前所未有的扩张期。作为全球原材料领域的龙头企业,某锂电巨头在国内布局的多个生产基地却陷入 “成长的烦恼”:车间里工人忙着手工录入数据,设备运行状态靠纸质报表传递,…...
蓝牙连接hci 命令和事件的交互
参考:在HCI层看蓝牙的连接过程_hci 获取蓝牙pin码-CSDN博客 我这边查看的是core 5.2 一、数据交互流程 1、ACL连接建立后的可选流程 参考蓝牙core5.2: vol2 --> PartF --> 4 1.1 AUTHENTICATION REQUESTED Authentication can be explicitly executed at …...
Maven超级详细安装部署
1.到底什么是Maven?搞清楚这个 Maven 是一个项目管理工具,主要用于 Java 项目的构建、依赖管理和文档生成。 它基于项目对象模型(POM),通过 pom.xml 文件定义项目的配置。 (简单说破:就是工程…...
OSPF不规则区域和LSA
OSPF不规则区域 1.远离骨干的非骨干区域 R1-R4四台路由器能够正常学习到彼此路由,但是R5不行,因为R5是非法ABR 解决方法: 1使用Tunnel隧道将AR4连接到骨干区域 (1) 使用隧道解决不规则区域的问题 a.可能造成选路不…...
深入了解 UI 咨询公司:数字化时代的品牌助推器
在数字化浪潮席卷全球的当下,用户界面(UI)设计已然成为企业在激烈市场竞争中脱颖而出的关键因素。UI 咨询公司应运而生,凭借其专业的知识与技能,为企业的数字化转型和品牌建设提供强大助力。 UI 咨询公司的重要性 提…...
网络建设与运维神州数码DCN sFlow网络流量信息协议
简介 用于监控网络流量信息的协议。 主要操作:由被监视的交换机,路由器把被监控的数据通过采样,统计等操作发送到用于监控的用户端分析器,由分析器对收到的数据进行用户所要求的分析,从而达到监控网络的目的。 各 sFlo…...
NO.88十六届蓝桥杯备战|动态规划-多重背包|摆花(C++)
多重背包 多重背包问题有两种解法: 按照背包问题的常规分析⽅式,仿照完全背包,第三维枚举使⽤的个数;利⽤⼆进制可以表⽰⼀定范围内整数的性质,转化成01 背包问题。 ⼩建议:并不是所有的多重背包问题都能…...
vue2添加背景水印-手动实现(无组件模式)
1. App.vue <template><div id"app" class"app"><router-view></router-view></div> </template><script> export default {mounted() {this.updateWatermark();// 监听路由变化this.$router.afterEach(() >…...
华为数通Datacom认证考试难度怎么样?
华为数通Datatcom认证是华为针对数据通信领域推出的技术认证体系,分为HCIA(初级)、HCIP(中级)、HCIE(专家级)三个等级,考试难度逐级递增,对考生的理论知识和实践能力…...
一文读懂WPF系列之常用控件以及样式
WPF控件 控件分类概览常用控件常用控件代码示例和效果 样式与模板应用样式定义方式行内样式页面/窗口级资源样式(Local Resource)应用程序全局资源独立资源字典(ResourceDictionary)控件模板(ControlTemplate&…...
代码随想录算法训练营第十四天
LeetCode题目: 513. 找树左下角的值112. 路径总和106. 从中序与后序遍历序列构造二叉树 其他: 今日总结 往期打卡 513. 找树左下角的值 跳转: 513. 找树左下角的值 学习: 代码随想录公开讲解 问题: 给定一个二叉树的 根节点 root,请找出该二叉树的 最底层 最左边…...
国产信创数据库:PolarDB 分布式版 V2.0,支持集中分布式一体化
阿里云PolarDB数据库管理软件(分布式版)V2.0 ,安全可靠的集中分布式一体化数据库管理软件。点此查看详情https://www.aliyun.com/activity/database/polardbx-v2?spma2c6h.13046898.publish-article.8.44146ffaE0lEWT 立即咨询专家…...
【教学类-102-07】剪纸图案全套代码07——Python点状虚线优化版本+制作1图2图6图
背景需求: 我觉得这个代码里面的输入信息分离太远(42行和241行),想重新优化一下 【教学类-102-05】蛋糕剪纸图案(留白边、沿线剪)04——Python白色(255)图片转为透明png再制作“点状边框和虚线边框”-CSDN博客文章浏览阅读864次,点赞14次,收藏27次。【教学类-102-0…...
基于VSCode的Qt开发‘#include ui_test.h’报错没有该文件
笔者在基于VSCode进行Qt开发时,test.ui文件是在Qt软件中绘制的,导致本项目无法使用这个ui文件,报错如标题。事实上,本工程中也确实没有生成这个头文件。出现这个错误的原因是ui文件没有被编译为c头文件。 要生成 ui_test.h 文件&…...
微信小程序跳2
// 图片压缩 compressImage (image {}, options {}) { return new Promise((resolve, reject) > { const { width 0 } image const { compressAfterSizeFlag false, scaleFlag false, scaleTargetWidth 768 } options // 超过100k压缩 const maxFileSizeLimit 100 …...
如何将excel数据快速导入数据库
最近老是收到一些手工数据,并且需要关联分析,就想到如何快速将数据导入数据库后关联查询输出结果,下面是一段将excel数据写入mysql的脚本,欢迎大家提出优化意见相互学习。 import os import pandas as pd import pymysql import …...
C++之多态
文章目录 一、多态的概念 多态的定义与类型 二、多态的实现 三、虚函数 虚函数的概念 虚函数的重写/覆盖 协变 析构函数的重写/覆盖 override,final关键字 override final 纯虚函数与抽象类 三个概念辨析 四、多态实现的原理 虚函数表指针 动态绑定与静态绑定 …...
从PDF中提取表格:以GB/T2260—2007为例
文章目录 先说结论前因后果思路1、PDF2CSV2、PDF2MD → MD2CSV3、针对不同表格的两种思路1) 竖形三线表2)五元素为一组 还没结束批量处理1、分割markdown文档2、跳过另一种格式的文档 总结一下 先说结论 结论就是,博主用了一天的时间去研究如…...
日常记录-群晖nas的docker注册表被墙,用Mac电脑的docker拉取镜像并安装到nas中
文章目录 前言一、拉取镜像二、安装到nas中总结 前言 群晖nas的docker注册表被墙,用Mac电脑的docker拉取镜像并安装到nas中 一、拉取镜像 群晖nas的架构师x86,Mac电脑的架构师arm。 在mac电脑中执行命令: # 镜像拉取 docker pull --platf…...
DeepSeek:重构办公效率的AI新范式
目录 一、效率跃迁的三重引擎 二、效率提升的量级突破 三、智能办公的范式转移 四、未来办公的效率奇点 当企业主面对堆积如山的文件审批、跨时区协作的沟通损耗、重复机械的数据整理时,是否想过这些场景正在吞噬团队的生产力?据麦肯锡研究显示&…...
AI小程序+SpringAI+管理后台+源码+支持动态添加大模型+支持动态添加AI应用
前言 今天给大家介绍一款 前端由uniapp开发的小程序,完美在小程序上运行,对话采用流式对话。后端由springbootspringai开发的应用软件源码。 功能简介 支持在管理后台动态新增“DeepSeek”,“openai”,“千帆”,“智…...
RAG的实现快速示例
RAG(Retrieval-Augmented Generation)其实就是结合了检索与生成,核心流程分为 检索(Retrieval) 和 生成(Generation) 两大阶段,通过外部知识库增强生成式模型的准确性和可靠性。 流程其实也很简单,如下图: 关于RAG的基本概念的介绍,可以参考: RAG(检索增强生成)快…...
利用 PHP 爬虫获取京东商品详情 API 返回值说明及代码示例
在电商领域,京东作为国内知名的电商平台,提供了丰富的商品信息。通过调用京东商品详情 API,我们可以获取商品的详细信息,如商品标题、价格、图片、描述等。这些信息对于数据分析、价格监控、商品推荐等场景具有重要价值。本文将详…...
PyTorch CUDA内存管理优化:深度理解GPU资源分配与缓存机制
在深度学习工程实践中,当训练大型模型或处理大规模数据集时,上述错误信息对许多开发者而言已不陌生。这是众所周知的 CUDA out of memory错误——当GPU尝试为张量分配空间而内存不足时发生。这种情况尤为令人沮丧,特别是在已投入大量时间优化…...
大模型基础知识扫盲
1 模型量化: 是什么:大模型量化是一种“压缩”技术,把模型里高精度的数字(比如32位浮点数)简化成低精度的数字(比如8位定点数)。 有什么用:它让模型占的空间更小,跑起来…...
《穿透表象,洞察分布式软总线“无形”之奥秘》
分布式系统已成为众多领域的关键支撑技术,而分布式软总线作为实现设备高效互联的核心技术,正逐渐走入大众视野。它常被描述为一条“无形”的总线,这一独特属性不仅是理解其技术内涵的关键,更是把握其在未来智能世界中重要作用的切…...
Python Cookbook-5.13 寻找子序列
任务 需要在某大序列中查找子序列。 解决方案 如果序列是字符串(普通的或者Unicode),Python 的字符串的 find 方法以及标准库的re模块是最好的工具。否则,应该使用Knuth-Morris-Pratt算法(KMP): def KnuthMorrisPratt(text,pattern): 在序列text中找…...