数据可视化大屏 页面都会有一个特色的小标题，用来放标题，今天整理 vue3 数据可视化大屏蓝色标题组件-5G芒市。
效果截图
演示地址
组件代码
/**
* @Author: 858834013@qq.com
* @Name: itemTitle7
* @Date: 2023年05月18日
* @Desc:
*/
<template>
<div class="titleBody">
<div class="titleBodyl">{{title}}</div>
</div>
</template>
<script>
export default {
name: "itemTitle7",
props: {
title: {
type: String,
default() {
return '5G芒市';
}
}
}
}
</script>
<style lang="scss" scoped>
.titleBody {
background: url("./assets/titilebg.png") no-repeat;
background-size: 438px 100%;
overflow: hidden;
height: 36px;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.titleBodyl {
font-size: 18px;
font-family: PingFang;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 2px 8px rgba(0, 54, 87, 0.52);
margin-left: 20px;
}
}
</style>
