数据可视化大屏 页面都会有一个特色的小标题，用来放标题，今天整理 vue3 数据可视化大屏标题组件-工业互联网融合应用。

效果描述

左侧图标 标题

演示地址

组件代码

/**
* @Author: 858834013@qq.com
* @Name: itemTitle6
* @Date: 2023年05月18日
* @Desc:
*/
<template>
  <div class="leftBodyTitle">
    <div class="leftBodyTitleS"><span>{{title}}</span></div>
  </div>
</template>

<script>

export default {
  name: "itemTitle6",
  components: {},
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.leftBodyTitle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .leftBodyTitleS {
    background: url(./assets/tabTitleBg.png) no-repeat;
    background-size: 100% 100%;
    width: 560px;
    height: 52px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    letter-spacing: 5px;

    span {
      font-size: 26px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #DEF1FF;
      margin-left: 52px;
    }
  }
}
</style>

数据可视化大屏绿色标题组件汇总

数据可视化大屏绿色标题组件汇总