vue3 数据大屏 项目开发中,需要弹窗组件,这里我们整理弹窗组件,并通过gsap补间动画给弹窗添加入场动画以及离场动画。
弹窗效果
弹窗动画
展开动画:从中间缓慢向上下两边展开;
收缩动画:从上下两边向中间收缩隐藏。
效果截图
演示动画
使用组件
组件可传值宽高控制大小。标...
yekong
2年前 (2023-06-20)
喜欢
边框由标题和主体两部分组成。上下异形边框效果。
如果您需要设计属于自己的数据可视化大屏或数据可视化大屏开发 请联系我们微信:17331886870
组件代码
/**
* @Author: 858834013@qq.com
* @Name: pageItem
* @Date: 2...
yekong
2年前 (2023-06-20)
喜欢
边框由标题和主体两部分组成。上下异形边框效果。
如果您需要设计属于自己的数据可视化大屏或数据可视化大屏开发 请联系我们微信:17331886870
组件代码
/**
* @Author: 858834013@qq.com
* @Name: pageItem
* @Date: 2...
yekong
2年前 (2023-06-19)
喜欢
vue3 数据大屏项目开发中,会遇到各种各样的头部,今天整理的是数据可视化大标题头部组件。
如果您需要设计属于自己的数据可视化大屏或开发数据可视化大屏 请联系我们微信:17331886870
效果截图
帧动画效果
通过ae实现从两侧到中间的扫光动画,使用帧动画生成。帧动画虽然增...
yekong
2年前 (2023-06-17)
喜欢
数据可视化大屏项目开发中,经常会需要需要展示进度条排行榜的效果。今天我们来整理一下其实现的思路。
获取占比
一般后端返回数据后,前端需要根据数值自行计算占比,占比方式有两种,一种是所有数据累加占比,一种是最大值占比。这就需要我们获取数组中的最大值,以及获取数据中的总数,然后我们...
yekong
2年前 (2023-06-11)
喜欢
卡片效果为标题,数字。
数字使用数字滚动组件。
静态效果
动态效果
标题渐变色
标题文字使用了从上到下的渐变色
font-size: 16px;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #FFFFFF;
...
yekong
2年前 (2023-06-09)
喜欢
vue3 数据大屏项目开发中,会遇到各种各样的头部,今天整理的是数据可视化大标题头部组件。
如果您需要设计属于自己的数据可视化大屏或开发数据可视化大屏 请联系我们微信:17331886870
效果截图
组件内容
背景加中间为标题
头部大小
1920 * 79
组件代码
/**
...
yekong
2年前 (2023-06-05)
喜欢
数据看板 项目中,每个模块都会有个小标题,为了让页面多样化,每个 数据大屏 都有自己特色的小标题样式,为了能够快速使用和复用这些小标题,这里将之前项目中遇到的小标题效果整理出来。
8. vue3 数据可视化大屏标题组件-智慧园区可视化总控平台
效果截图
7. vue3 数据可视...
yekong
2年前 (2023-06-04)
喜欢
vue3 数据大屏项目开发中,会遇到各种各样的头部,今天整理的是智慧国企运营管理系统头部组件。
如果您需要设计属于自己的数据可视化大屏或开发数据可视化大屏 请联系我们微信:17331886870
效果截图
组件内容
中间为标题
左侧为:日期 周 时间
右侧为:天气 和 定位
头...
yekong
2年前 (2023-06-04)
喜欢
边框由标题和主体两部分组成。背景四个角为异形角标.上下各有两条渐变线图装饰。
如果您需要设计属于自己的数据可视化大屏或数据可视化大屏开发 请联系我们微信:17331886870
效果图
组件代码
<template>
<div class="it...
yekong
2年前 (2023-06-04)
喜欢