【案例】可视化大屏

人狠话不多，直接上效果图

这里放的地图自己去实现吧，如果也想实现3D地球话，等笔者那天有心情写篇文章；

说明：script中methods部分代码是没用，可以直接删掉，根据个人情况去写，

内容：笔者也就对页面布局进行了设计，内容的填充就靠个人了

<template>
    <div :style="{height: height+'px', width:'100%' }">
        <div id="baidumao"   >
            
            <div id="header" > 
                
                <span style="font-size: 1.6rem; font-family:'宋体';font-weight:600;">可视化数据统计大屏span>
                
                <div style="position:absolute; bottom: 0; right: 0; width:43%;">
                    <ul>
                        <li class="left">菜单栏一li>
                        <li class="left">菜单栏二li>
                        <li class="left">菜单栏三li>
                        <li class="left">菜单栏四li>
                        <li class="left">菜单栏五li>
                    ul>
                div>
                
                <div style="position:absolute; bottom: 0; left: 0; width:calc(43% - 40px);">
                    <ul>
                        <li class="right">菜单栏六li>
                        <li class="right">菜单栏七li>
                        <li class="right">菜单栏八li>
                        <li class="right">菜单栏九li>
                        <li class="right">菜单栏十li>
                    ul>
                div>
                
                <div style="position:absolute; top: -15%; right: 0%; ">
                    <ul>
                        <li class="righttoptime" >登陆者li>
                        
                    ul>
                div>
                
                <div style="position:absolute; top: -15%; left: -40px; ">
                    <ul>
                        <li class="lefttoptime" >2023年11月16日 上午10点31分li>
                    ul>
                div>
                { i }}