开源项目推荐-vue2+element+axios 个人财务管理系统

在这里插入图片描述

文章目录

  • financialmanagement
    • 项目简介
    • 项目特色
    • 项目预览
    • 卫星的实现方式:
    • 首次进入卫星效果的实现方式:
    • 卫星跟随鼠标滑动的随机效果实现方式:
    • 环境准备
    • 项目启动
    • 项目部署
    • 项目地址


financialmanagement

项目简介

vue2+element+axios 个人财务管理系统 是基于 vue2+element+axios 等主流技术栈构建的免费开源的后台管理前端模板。

项目特色

  • 简洁易用:无过渡封装 ,易上手。

  • 权限管理:用户、角色、菜单、字典、部门等完善的权限系统功能。

  • 基础设施:路由、代码规范、Git 提交规范、常用组件封装。

  • 持续更新:持续更新,及时跟进最新的技术和工具。

项目预览

登录页面的为动态效果,在刚刷新或者刚进入的时候有个卫星环绕的动画效果,鼠标移动或者悬浮都有不同的动态效果。

首页首次进入效果:
请添加图片描述

卫星的实现方式:

主要是用到了渐变背景和阴影。在background中使用radial-gradient,控制不同的卫星的样式效果。再用box-shadow来展示卫星的发光效果。

    background: radial-gradient(circle at 124px 3px, #5babd1, #5babd1, #3689c0, #5babd1, #386a8b, #666);// 3个小球的渐变值不同box-shadow: 0px -5px 40px #5babd1;position: absolute;bottom: -100px;width: 20vw;height: 20vw;min-width: 200px;min-height: 200px;left: 40%;animation-name: ball1-example-37dfd6fc;animation-duration: 4s;

首次进入卫星效果的实现方式:

css3的动画效果,用transformrotate控制小球的运行轨迹。

@keyframes ball-example {from {transform: rotate(397deg);}to {transform: rotate(0deg);}
}
.ball1:hover {box-shadow: 0px -15px 80px #5babd1;
}

卫星跟随鼠标滑动的随机效果实现方式:

使用@mousewheel.prevent方法,在mousePoll中配置滚轮滑动的效果。
使用方法中的deltaY deltaX ,获取鼠标的动态。
向左右上下滑动,都有不同的动态效果。
由于@mousewheel.prevent是不断的返回数据,使用加了一个节流,2秒获取一次数据,以防出现问题。

    // 滚轮滑动mousePoll(e) {let directionY = e.deltaY > 0 ? "down" : "up";let directionX = e.deltaX > 0 ? "left" : "right";// 获取各个小球let ball1 = document.getElementsByClassName("ball1")[0];let ball2 = document.getElementsByClassName("ball2")[0];let ball3 = document.getElementsByClassName("ball3")[0];// 节流if (this.mousepollShow) {this.mousepollShow = false;// 上下滑动if (directionY === "down" || directionY === "up") {// 判断是否离得太远if (this.ballScale < 1.5 && this.ballScale > 0.5) {this.ballScale =directionY === "down"? this.ballScale + 0.1: this.ballScale - 0.1;} else {this.ballScale =directionY === "down"? this.ballScale - 0.1: this.ballScale + 0.1;}ball1.style.transform = `scale(${this.ballScale})`;ball2.style.transform = `scale(${this.ballScale})`;ball3.style.transform = `scale(${this.ballScale})`;}if (directionX === "left") {// 滑轮向left滚动ball1.style.left = `35%`;ball2.style.left = "8%";ball3.style.right = "8%";} else {// 滑轮向right滚动ball1.style.left = `45%`;ball2.style.left = "12%";ball3.style.right = "12%";}
// 如果一直向下滑动 就到下一面if (this.slideDown > 1 && directionY === "down") {document.getElementsByClassName("main-second")[0].scrollIntoView();this.slideDown = 0;} else {this.slideDown = this.slideDown + 1;}this.mouseShow();}},// 节流mouseShow() {const betterFn = () => {setTimeout(() => {this.mousepollShow = true;}, 2000);};betterFn();},

如果想要知道具体的实现思路,可以到项目中查看:项目地址》》

登录页面

登录页面

支出页面
收入页面

首页

设定目标

环境准备

环境名称版本下载地址
开发工具VSCode下载
运行环境Node ≥18下载

项目启动

# 克隆代码
git clone  https://gitee.com/naitang_room/Personal-Financial-Management-System.git# 安装依赖
npm install# 启动运行
npm run serve# 打包
npm run build

项目部署

# 项目打包
npm run build:prod

项目地址

https://gitcode.com/wantRich/vue2_element_axios_PersonalFinancialManagementSystem.git

欢迎访问项目!

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

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

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

相关文章

【Linux硬盘读取】Windows下读取Linux系统的文件解决方案:Linux Reader4.5 By DiskInternals

前言 相信做机器视觉相关的很多人都会安装 Windows 和 Linux 双系统。在 Linux 下&#xff0c;我们可以很方便的访问Windows的磁盘&#xff0c;反过来却不行。但是这又是必须的。通过亲身体验&#xff0c;向大家推荐这么一个工具&#xff0c;可以让 Windows 方便的访问 Ext 2/3…

毕业了校园卡怎么改套餐?

毕业了校园卡怎么改套餐&#xff1f; 毕业生校园卡99元套餐变更8元保号套餐教程 学弟学妹们恭喜毕业呀&#x1f393; 校园卡绑定了好多东西注销不掉又不想交高额月租的看过来。 今天一招教你更改校园卡套餐。 中国移动/电信/联通App 打开App&#xff0c;在首页右上角点击人工…

Semantic Kernel 直接调用本地大模型与阿里云灵积 DashScope

本文主要介绍如何在无需网关&#xff0c;无需配置 HttpClient 的情况下&#xff0c;使用 Semantic Kernel 直接调用本地大模型与阿里云灵积 DashScope 等 OpenAI 接口兼容的大模型服务。 1. 背景 一直以来&#xff0c;我们都在探索如何更好地利用大型语言模型&#xff08;LLM&…

Windows给右键菜单添加新建.htm和.html的选项,并使用不同名称

添加新建 .html 文件的右键菜单选项 运行regedit打开注册表编辑器给计算机\HKEY_CLASSES_ROOT\.html新增,名为: ShellNew 的项, 名称不区分大小写, 可以写成shellnew给 ShellNew项 新增字符串值 命名为FileName 或 ‘NullFile’, 名称不区分大小写, 可以写成filename或nullfil…

五、在Qt下加载QVTKWidget控件,生成Visual Studio项目,显示点云(C++)

前言&#xff1a;因为项目需要通过Qt进行显示点云&#xff0c;参考了很多博文&#xff0c;但是并没有全部正确的&#xff0c;东拼西凑算是实现了&#xff0c;花费了两天时间&#xff0c;时间有点久&#xff0c;能力还有有待提升~~ 为此写篇博文记录一下。感谢各位大佬&#xff…

一套轻量、安全的问卷系统基座,提供面向个人和企业的一站式产品级解决方案

大家好&#xff0c;今天给大家分享的是一款轻量、安全的问卷系统基座。 XIAOJUSURVEY是一套轻量、安全的问卷系统基座&#xff0c;提供面向个人和企业的一站式产品级解决方案&#xff0c;快速满足各类线上调研场景。 内部系统已沉淀 40种题型&#xff0c;累积精选模板 100&a…

Linux shell 重定向输入和输出

Linux shell 重定向输入和输出 1. Standard I/O streams2. Redirecting to and from the standard file handles (标准文件句柄的重定向)2.1. command > file2.2. command >> file2.3. command 2> file2.4. command 2>> file2.5. command < file2.6. comm…

小白也能看懂 大模型的6个评估指标_大模型生成质量评估标准

近年来&#xff0c;随着深度学习技术的飞速发展&#xff0c;大型神经网络模型如BERT、GPT-3等已经成为自然语言处理、计算机视觉、语音识别等领域的重要工具。这些模型之所以称为"大型"&#xff0c;是因为它们通常包含数十亿甚至数千亿的参数&#xff0c;比以往的模型…

Semantic Kernel 中的流式输出SSE与Vue3前端接收示例

本文将介绍如何在使用 Semantic Kernel 框架的 ASP.NET 项目中使用流式输出 SSE&#xff08;Server-Sent Events&#xff09;&#xff0c;并展示如何在Vue3前端应用中接收这些数据。并介绍了如何使用 microsoft/fetch-event-source 库使用 POST 方法来接收 SSE 数据。 1. 背景 …

ABAP开发:屏幕输入中,在多个选项卡中如何确定选择了哪个Tab Strips?

在ABAP开发中&#xff0c;使用了SELECTION-SCREEN来创建了一个带有多个选项卡&#xff08;Tab Strips&#xff09;的屏幕。每个选项卡对应一个不同的屏幕编号&#xff08;SCREEN 101, 102, 103&#xff09;&#xff0c;如下图&#xff1a; 屏幕中有Name、Age、City三个标签选择…

39、基于深度学习的(拼音)字符识别(matlab)

1、原理及流程 深度学习中常用的字符识别方法包括卷积神经网络&#xff08;CNN&#xff09;和循环神经网络&#xff08;RNN&#xff09;。 数据准备&#xff1a;首先需要准备包含字符的数据集&#xff0c;通常是手写字符、印刷字符或者印刷字体数据集。 数据预处理&#xff1…

【网络安全】网络安全威胁及途径

1、网络安全威胁的种类及途径 &#xff08;1&#xff09;网络安全威胁的主要类型 网络安全面临的威胁和隐患种类繁多&#xff0c;主要包括人为因素、网络系统及数据资源和运行环境等影响。网络安全威胁主要表现为&#xff1a;黑客入侵、非授权访问、窃听、假冒合法用户、病毒…

18. 第十八章 继承

18. 继承 和面向对象编程最常相关的语言特性就是继承(inheritance). 继承值得是根据一个现有的类型, 定义一个修改版本的新类的能力. 本章中我会使用几个类来表达扑克牌, 牌组以及扑克牌性, 用于展示继承特性.如果你不玩扑克, 可以在http://wikipedia.org/wiki/Poker里阅读相关…

概率论拾遗

条件期望的性质 1.看成f(Y)即可 条件期望仅限于形式化公式&#xff0c;用于解决多个随机变量存在时的期望问题求解&#xff0c;即 E(?)E(E(?|Y))#直接应用此公式条件住一个随机变量&#xff0c;进行接下来的计算即可 定义随机变量之间的距离为&#xff0c;即均方距离 随机…

Redis分布式锁的实现、优化与Redlock算法探讨

Redis分布式锁最简单的实现 要实现分布式锁,首先需要Redis具备“互斥”能力,这可以通过SETNX命令实现。SETNX表示SET if Not Exists,即如果key不存在,才会设置它的值,否则什么也不做。利用这一点,不同客户端就能实现互斥,从而实现一个分布式锁。 举例: 客户端1申请加…

(科学:某天是星期几)泽勒一致性是由克里斯汀·泽勒开发的用于计算某天是星期几的算法。

(科学:某天是星期几)泽勒一致性是由克里斯汀泽勒开发的用于计算某天是星期几的算法。这个公式是: 其中: h是一个星期中的某一天(0 为星期六;1 为星期天;2 为星期一;3 为星期二;4 为 星期三;5 为星期四;6为星期五)。 q 是某月的第几天。 m 是月份(3 为三月&#xff0c;4 为四月,…

朴素贝叶斯分类器 #数据挖掘 #Python

朴素贝叶斯分类器是一种基于概率统计的简单但强大的机器学习算法。它假设特征之间是相互独立的&#xff08;“朴素”&#xff09;&#xff0c;尽管在现实世界中这通常不成立&#xff0c;但在许多情况下这种简化假设仍能提供良好的性能。 基本原理&#xff1a;朴素贝叶斯分类器…

笔记本开机原理

从按下开机键开始&#xff0c;机器是如何开到OS的呢&#xff1f;今天这篇文章和大家极少EC-BIOS-OS的整个开机流程。首先大家要对笔记本的基本架构有所了解&#xff0c;基本架构如下图所示&#xff08;主要组成部分为大写黑体内容&#xff09;。 一、按下PowerButton按钮&#…

人工智能发展历程了解和Tensorflow基础开发环境构建

目录 人工智能的三次浪潮 开发环境介绍 Anaconda Anaconda的下载和安装 下载说明 安装指导 模块介绍 使用Anaconda Navigator Home界面介绍 Environment界面介绍 使用Jupter Notebook 打开Jupter Notebook 配置默认目录 新建文件 两种输入模式 Conda 虚拟环境 添…

酷开会员丨酷开系统K歌模式,父亲节的家庭欢聚时光

K歌以其独特的魅力&#xff0c;为家庭娱乐带来了无限乐趣。想象一下&#xff0c;父亲节这天&#xff0c;打开电视进入K歌频道&#xff0c;与家人一起嗨唱&#xff0c;客厅里充满了欢声笑语&#xff0c;酷开系统的K歌应用也就成为了连接亲情的桥梁&#xff0c;让爸爸们都能在这个…