数据可视化大屏 项目开发中经常会需要各种各样的边框，为了方便复用可能会出现的类似边框，这里将可能会遇到的 数据可视化大屏边框组件 都整理出来，今天整理的是渐变色加两个底角效果。

效果截图

演示地址：

vue3 数据可视化大屏边框组件-渐变色加两个底角效果

组件代码

<template>
  <div class="item1">
    <div class="item1Body">
      <img class="titleIcon" style="bottom:0;left: 0;" src="./assets/icon_left_bottom.png" alt="">
      <img class="titleIcon" style="bottom:0;right: 0;" src="./assets/icon_right_bottom.png" alt="">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {}
  },
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    }
  },
  components: {},
  computed: {},
  mounted() {
    var that = this;
  },
  methods: {},
  filters: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.item1 {
  width: 100%;
  position: relative;
  height: 100%;

  .item1Body {
    position: relative;
    width: 100%;
    height: calc(100% - 0px);
    background: linear-gradient(0deg, rgba(#094771, 0.5) 0%, rgba(#0C1E39, 0.5) 100%);

    .titleIcon {
      width: 10px;
      height: 10px;
      position: absolute;
    }
  }
}
</style>

更多数据可视化大屏边框效果

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