在这里插入图片描述


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

欢迎访问项目!

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

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部