开源项目推荐-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…

跨源资源共享(CORS)

一、跨源资源共享&#xff08;CORS&#xff09;介绍 跨源资源共享&#xff08;Cross-Origin Resource Sharing&#xff0c;CORS&#xff09;是一种web标准技术&#xff0c;它允许一个网站的服务器来响应其他网站的请求&#xff0c;从而打破了同源策略的限制。通过CORS&#xff…

基于SpringBoot的网络海鲜市场管理系统源码数据库

计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已经有了很丰富的基础&#xff0c;并且在现实生活中也到处都在使用&#xff0c;可以说&#xff0c;经过几十年的发展&#xff0c;互联网技术已经把地域信息的隔阂给消除了&#xff0c;让整个世界都可以即时通话和联系…

2016-2023 年美国农业部作物序列边界

简介 2016-2023 年美国农业部作物序列边界 作物序列边界(CSB)是与美国农业部经济研究局合作开发的,它提供了美国毗连地区的田间边界、作物种植面积和作物轮作的估计数据。该数据集利用卫星图像和其他公共数据,并且是开放源码的,使用户能够对美国种植的商品进行面积和统计…

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

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

能量函数和能量基模型介绍

能量函数在物理学中通常描述系统的潜在能量&#xff0c;而在统计物理和机器学习中&#xff0c;特别是在能量基模型&#xff08;Energy-Based Models&#xff0c;EBMs&#xff09;中&#xff0c;它用来描述系统状态的概率。 在机器学习的上下文中&#xff0c;能量函数是一个映射…

docker命令记录

基本命令和参数 docker run: 运行一个新的容器实例。-itd: 组合参数&#xff0c;含义如下&#xff1a; -i: 以交互模式运行容器&#xff0c;保持标准输入打开。-t: 分配一个伪终端。-d: 后台运行容器&#xff0c;即使容器启动后依然返回控制台。 设备映射 --device/dev/dri…

聊聊最近的 AI 发展情况及未来走向

聊聊最近的AI发展情况及未来走向 引言 在当前科技浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;以其独特的魅力引领着未来的发展趋势。无论是在商业、教育、医疗还是娱乐领域&#xff0c;AI都为我们带来了前所未有的便利和惊喜。近年来&#xff0c;AI技术在多…

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;比以往的模型…

超级异地组网工具有哪些?

在当今社会&#xff0c;人们对高效的信息传输和通信有着越来越高的要求。不同地区之间的电脑与电脑、设备与设备、电脑与设备之间的信息远程通信问题成为了亟待解决的难题。由于网络环境的限制&#xff0c;如低带宽和跨运营商的网络环境&#xff0c;高速访问变得异常困难。为了…

【初体验threejs】【学习】【笔记】hello,正方体!

前言 为了满足工作需求&#xff0c;我已着手学习Three.js&#xff0c;并决定详细记录这一学习过程。在此旅程中&#xff0c;如果出现理解偏差或有其他更佳的学习方法&#xff0c;请大家不吝赐教&#xff0c;在评论区给予指正或分享您的宝贵建议&#xff0c;我将不胜感激。 搭…

git 常用命令 切换分支

切换分支 git checkout master 从 当前分支 切换到 本地master分支 git checkout origin/main 从 当前分支 切换到 远程仓库的 main 分支git checkout test6 潜在规则 git checkout test6 远程仓库有test6分支 本地没有时 自动拉取远程分支test6 并创建同名…

滑块(Slider)

滑块(Slider) 滑块,也称为滑块控件或滑动条,是一种常见的用户界面元素,允许用户通过拖动指示器(通常是一个小方块或圆点)来选择一个值或一组值。滑块广泛用于各种应用程序和网站中,用于调节音量、亮度、温度或其他可变设置。本文将探讨滑块的设计、实现和最佳实践。 …

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三个标签选择…