vue3 数据可视化大屏边框-智慧工地监管系统

边框由标题 主体 背景图片 下展背景动画等组成。

效果截图

动画效果

动画处理

默认隐藏边框，然后使用gsap来加载一个自上而下展开的动画效果，动画效果完成后，再将边框主体渐显出来。可以父组件可以通过 :duration="0.8" :delay="0.3"参数来控制组件的延迟时间以及持续时间。

部分代码展示

/**
* @Author: 858834013@qq.com
* @Name: pageItem
* @Date: 2023年09月12日16:36:17
* @Desc: vue3 数据可视化大屏边框组件
*/
<template>
  <div class="pageItemBody">
    <div class="pageItemBodyInner" ref="inner" v-if="show">
      <titleCom :title="title"></titleCom>
      <div class="line"></div>
      <!--      主题部分-->
      <div class="itemMain">
        <slot></slot>
        <div class="lineLeft" ref="lineLeft">
          <div v-for="(divWidth,index) in divWidths" :key="divWidth" class="insertedDiv wow fadeInLeft"
               :style="{ width: divWidth + 'px' }" :data-wow-delay="index*0.01+'s'"></div>
        </div>
        <div class="lineRight" ref="lineRight">
          <div v-for="(divWidth,index) in divWidths" :key="divWidth" class="insertedDiv wow fadeInRight"
               :style="{ width: divWidth + 'px' }" :data-wow-delay="index*0.01+'s'"></div>
        </div>
        <div class="itemMainFoot">
          <div class="line1"></div>
          <div class="line3"></div>
          <div class="line5"></div>
          <div class="line7" ref="line7"></div>
          <div class="line9"></div>
          <div class="line8" ref="line8"></div>
          <div class="line6"></div>
          <div class="line4"></div>
          <div class="line2"></div>
          <div class="dot1" ref="dot1"></div>
          <div class="dot2" ref="dot2"></div>
        </div>
      </div>
      <!--      图片背景-->
      <div class="bgImg"></div>
    </div>
    <!--    向下展开的背景-->
    <div class="bg" ref="bg" v-if="!show"></div>
  </div>
</template>

更多边框组件

vue3 数据可视化大屏边框效果整理

组件实例代码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础

虚拟产品一经售出 概不退款请谅解