效果图展示:
源码:
<template> <div> <!-- Header 部分 --> <div class="heads"> <h3>大数据可视化分析</h3> <span>2023-12-12 12:20:45</span> </div> <!-- 中间部分 --> <div class="middle"> <div class="m-left"> <div class="m-l-top"></div> <div class="m-l-bottom"></div> </div> <div class="m-middle"> <div class="m-m-top"></div> <div class="m-m-bottom"></div> </div> <div class="m-right"> <div class="m-r-top"></div> <div class="m-r-bottom"></div> </div> </div> <!-- 底部部分 --> <div class="bottom"> <div class="b-left"></div> <div class="b-right"></div> </div> </div> </template> <script> export default { name: 'VisualAnalysis', // 这里可以添加JavaScript逻辑,例如使用ECharts的代码 mounted() { // ECharts初始化代码(示例) // 你可以在此处添加你的ECharts初始化逻辑 } } </script> <style scoped> /* CSS 样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } body { max-height: 100vh; height: 100vh; background-color: blue; background: url('../assets/logo.png') no-repeat; background-size: 100% 100%; } .heads { position: relative; height: 60px; background-color: rgba(0, 0, 127, 0.5); text-align: center; margin-bottom: 5px; } .heads h3 { font-size: 24px; line-height: 60px; color: #fff; font-weight: 700; } .heads span { color: #fff; font-size: 14px; position: absolute; top: 50%; right: 2%; transform: translateY(-50%); } .middle { height: calc(70vh - 15px); display: flex; margin-bottom: 5px; } .m-left { width: 25%; height: 100%; background-color: rgba(0, 0, 127, 0.5); } .m-l-top { width: 100%; height: calc(40% - 5px); background-color: rgba(0, 0, 127, 0.5); margin-bottom: 5px; } .m-l-bottom { width: 100%; height: 60%; background-color: rgba(0, 0, 127, 0.5); } .m-middle { width: 50%; height: 100%; background-color: rgba(0, 0, 127, 0.5); } .m-right { width: 25%; height: 100%; background-color: rgba(0, 0, 127, 0.5); } .m-r-top { width: 100%; height: calc(50% - 5px); background-color: rgba(0, 0, 127, 0.5); margin-bottom: 5px; } .m-r-bottom { width: 100%; height: 50%; background-color: rgba(0, 0, 127, 0.5); } .bottom { height: calc(30vh - 60px); display: flex; } .b-left { width: 50%; height: 100%; background-color: rgba(0, 0, 127, 0.5); margin-right: 5px; } .b-right { width: 50%; height: 100%; background-color: rgba(0, 0, 127, 0.5); } </style>
标签:rgba,color,100%,height,可视化,background,127,大屏,Echarts From: https://www.cnblogs.com/atrue/p/18377220