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

欢迎访问项目!

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java学习--集合(大写二.2)

看尚硅谷视频做的笔记 2.collection接口及方法 jdk8里有一些默认的方法&#xff0c;更多的是体现的是一种规范&#xff0c;规范更多关注的是一些抽象方法。 看接口里面的抽象方法&#xff0c;选一个具体的实现类。 测试collection的方法&#xff0c;存储一个一个数据都有哪些…

记录:[android] SSLHandshakeException: Handshake failed 问题;已解决!

1、问题描述&#xff1a;在使用Retrofit2 时在安卓老设备上&#xff08;安卓6.0&#xff09;网络无法请求、安卓 10 、 11 未出现此问题&#xff1f;what? 原因&#xff1a;服务端 TLS 版本过高 2、废话不多说、解决方案A 、添加依赖&#xff1a;implementation org.conscrypt…

安徽理工大学2计算机考研情况,招收计算机专业的学院和联培都不少!

安徽理工大学&#xff08;Anhui University of Science and Technology&#xff09;&#xff0c;位于淮南市&#xff0c;是安徽省和应急管理部共建高校&#xff0c;安徽省高等教育振兴计划“地方特色高水平大学”建设高校&#xff0c;安徽省高峰学科建设计划特别支持高校&#…

Java面试八股之myBatis与myBatis plus的对比

myBatis与myBatis plus的对比 基础与增强&#xff1a; MyBatis 是一个成熟的Java持久层框架&#xff0c;它允许开发者通过XML文件或注解来配置SQL语句和数据库映射&#xff0c;提供了一个灵活的方式来操作数据库&#xff0c;但需要手动编写所有的SQL语句和结果集映射。 MyBa…

oracle 外连接(+)和left join用法

案例1&#xff1a; select count(1) FROM TFUNDINFO A, TFUNDTYPE B WHERE A.VC_FUNDCODEB.VC_FUNDCODE() select count(1) FROM TFUNDINFO A, TFUNDTYPE B WHERE A.VC_FUNDCODEB.VC_FUNDCODE SELECT count(1): 这表示查询将返回一个计数&#xff0c;count(1)是一种常见的计数…

适用于 AI/ML 工作负载的有状态 KES

在此概念验证 &#xff08;POC&#xff09; 中&#xff0c;我们将探讨在 Kubernetes &#xff08;k8s&#xff09; 生态系统中安装和管理有状态密钥加密服务 &#xff08;KES&#xff09;。本指南促进了加密操作的无缝衔接&#xff0c;而不会将敏感的密钥材料暴露给使用型应用程…

Window和linux杀死进程的方式(命令行版)

在本文中&#xff0c;我们将探讨如何在Windows和Linux操作系统下高效地终止指定的进程&#xff0c;涵盖基本命令与高级技巧&#xff0c;确保您能灵活应对各种管理需求。 linux杀死进程 在终端中&#xff0c;我们通过下面命令找到端口运行的程序 lsof -i:72812. 然后输入下面…

见证数据的视觉奇迹——DataV Atlas

引言 前段时间一直沉迷于AI方向&#xff0c;几乎很久没碰大数据开发的相关内容了&#xff0c;今天突然看到阿里活动又推出DataV的体验了&#xff0c;我直接“啪”的一下就点进来了&#xff0c;很快啊&#xff01;本来之前开发数字孪生的时候就接触过基础的DataV操作了&#x…

北京BJ90升级新款迈巴赫大连屏四座头等舱行政四座马鞍

北京BJ90升级奔驰迈巴赫头等舱行政四座大联屏的内饰效果会非常出色&#xff0c;将为车辆带来更豪华、高端的内饰氛围。以下是升级后可能的效果&#xff1a; • 科技感提升&#xff1a;奔驰的中控系统一直以来都以其先进的科技和用户友好的界面而闻名。升级后&#xff0c;北京B…

Retrieval-Augmented Generation for Large Language Models A Survey

Retrieval-Augmented Generation for Large Language Models: A Survey 文献综述 文章目录 Retrieval-Augmented Generation for Large Language Models: A Survey 文献综述 Abstract背景介绍 RAG概述原始RAG先进RAG预检索过程后检索过程 模块化RAGModules部分Patterns部分 RAG…

TEMU自养号测评系统如何搭建,有哪些要求

TEMU全托管目前优点是全程不用去运营&#xff0c;只要做好选品&#xff0c;质检就可以了。缺点是无法自由决定产品的营销策略&#xff0c;这也是使得卖家会去通过自养号测评方式来为产品链接打造权重。 TEMU自养号测评的搭建是一个涉及多个步骤和细节的过程。以下是一个清晰的…

智能优化算法改进策略之局部搜索算子(六)--进化梯度搜索

1、原理介绍 进化梯度搜索(Evolutionary Gradient Search, EGS)[1]是兼顾进化计算与梯度搜索的一种混合算法&#xff0c;具有较强的局部搜索能力。在每次迭代过程中&#xff0c;EGS方法首先用受进化启发的形式估计梯度方向&#xff0c;然后以最陡下降的方式执行实际的迭代步骤&…

QListView、QTableView或QTreeView截取滚动区域(截长图)

本文以QTreeView为例,理论上继承自QAbstractScrollArea的类都支持本文所述的方法。 一.效果 一共5个文件夹,每个文件文件夹下有5个文件,先把文件夹展开,然后截图。将滚动条拖到居中位置,是为了证明截图对滚动条无影响 下面是截的图 二.原理 将滚动区域的viewport设置为…

lvgl_micropython development for esp32

​​​​​​上一篇博客已经编译源码生成了ESP32C3的固件lvgl_micropy_ESP32_GENERIC_C3-4.bin&#xff0c;这篇博客开发一个界面。 一、开发环境 1、安装开发工具 Windows安装Thonny工具&#xff0c;官网链接&#xff1a;Thonny, Python IDE for beginners。 参考博客:用M…

已解决javax.management.BadBinaryOpValueExpException异常的正确解决方法,亲测有效!!!

已解决javax.management.BadBinaryOpValueExpException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 分析错误日志 检查操作数合法性 确认操作数类型匹配 优化代码逻辑 增…

如何发现Redis热Key,有哪些解决方案?

什么是 hotkey&#xff1f; 如果一个 key 的访问次数比较多且明显多于其他 key 的话&#xff0c;那这个 key 就可以看作是 hotkey&#xff08;热 Key&#xff09;。例如在 Redis 实例的每秒处理请求达到 5000 次&#xff0c;而其中某个 key 的每秒访问量就高达 2000 次&#x…

【HTTPS云证书部署】SpingBoot部署证书

这里以华为云证书为例。 1. 下载证书 2. 解压 3. 选择.top_Tomcat复制到SpringBoot的Resource/source下 4. 在.properties文件中进行配置 修改key-store和key-store-password

秋招突击——第八弹——Redis是怎么运作的

文章目录 引言正文Redis在内存中是怎么存储的面试重点 Redis是单线程还是多线程面试重点 内存满了怎么办&#xff1f;面试重点 持久化介绍面试重点 RDB持久化面试重点 AOF日志面试重点 总结 引言 差不多花了两天把redis给过了&#xff0c;早上也只背了一半&#xff0c;完成回去…

正则表达式与文本处理器

正则表达式 基础正大表达式 查看特定字符 grep grep-n the test.txt grep-in the test.txt-n 显示行号 -i 不区分大小写 -v 反转查找 [] &#xff1a;中括号里可以写元素&#xff0c;内容符合任意元素&#xff0c;就会过滤出来 ^ :写在中括号里&#xff0c;代表取反。以^开头&…

微信 小程序应用,页面,组件的生命周期

组件生命周期 组件的生命周期&#xff1a;指的是组件自身的一些钩子函数&#xff0c;这些函数在特定的时间节点时被自动触发 组件的生命周期函数需要在 lifetimes 字段内进行声明 最重要的生命周期是 created attached detached 包含一个组件生命周期流程的最主要时间点 定…