vue3 数据大屏项目开发中，需要一些底座效果，今天整理的是可视化大屏菱形加椭圆形底座效果实例

实例代码

<template>
  <div class="pedestalBody">
    <div class="lingxing2">
      <div class="lingxing">
        <div class="shandianBody">
          <img class="shandian" ref="shandian" src="./assets/icon_shandian.png" alt="">
        </div>
      </div>
    </div>
    <div class="dizuo">
      <div class="dizuo2">
        <div class="dizuo3" ref="dizuo3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import WOW from "wow.js";
import gsap from 'gsap'

export default {
  name: "title",
  data() {
    return {}
  },
  components: {},
  watch: {},
  mounted() {
    var that = this;
    var wow = new WOW({
      boxClass: "wow",
      animateClass: "animated",
      offset: 0,
      mobile: true,
      live: true,
      scrollContainer: null,
      resetAnimation: true,
    });
    wow.init();
    gsap.to(this.$refs.shandian, {
      duration: 2, top: '10px', delay: 0, yoyo: true, repeat: -1, onComplete: () => {
        console.log('动画完成')
      }
    })
    gsap.to(this.$refs.dizuo3, {
      duration: 2, opacity: '0.5', delay: 0, yoyo: true, repeat: -1, onComplete: () => {
        console.log('动画完成')
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.pedestalBody {
  width: calc(100% - 0px);
  margin: 0 auto;
  height: calc(100% - 0px);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  .lingxing {
    background: url("./assets/lingxing1.png");
    width: 220px;
    height: 255px;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    z-index: 10;
    position: relative;
    flex-direction: row;
    align-content: flex-start;
  }

  .lingxing2 {
    background: url("./assets/lingxing2.png");
    width: 278px;
    height: 320px;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    z-index: 10;
    position: relative;
  }

  .shandianBody {
    position: relative;
    width: 98px;
    height: 103px;
  }

  .shandian {
    position: absolute;
    width: 98px;
    height: 103px;
  }
}

.dizuo {
  background: url("./assets/dizuo1.png") no-repeat;
  width: 468px;
  height: 88px;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  position: relative;
  z-index: 0;
  align-content: flex-start;
  margin-top: -20px;
}

.dizuo2 {
  background: url("./assets/dizuo2.png") no-repeat;
  width: 382px;
  height: 63px;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.dizuo3 {
  background: url("./assets/dizuo3.png") no-repeat;
  width: 289px;
  height: 40px;
  background-size: 100%;
}
</style>

更多底座效果

vue3 数据可视化大屏底座效果实例集合

项目应用

vue3 精美后台登录页模板-科技数据管理平台登录