【可视化大屏】中间部分的数字和地图

中间部分分为上面数字部分和下面地图两大部分

上面的数字又分为上面数字下面文字，数字部分是ul中包含两个li，采用flex布局，使两个li在同一行

 <!-- 中间部分 --><div class="column"><div class="no"><!-- 上面数字部分 --><div class="no-hd"><ul><li>48975</li><li>5465795</li></ul></div><!-- 下面是文字 --><div class="no-bd">文字</div></div></div>

.no {background: rgba(101, 132, 226, 0.1);padding: 0.1875rem;.no-hd {position: relative;border: 1px solid rgba(25, 186, 139, 0.17);ul {display: flex;li {position: relative;flex: 1;text-align: center;height: 1rem;line-height: 1rem;font-size: 0.875rem;color: #ffeb7b;padding: 0.05rem 0;font-weight: bold;}}}}

在这里插入图片描述

为了使字体更好看，这里的字体使用的是图标字体，需要引入文件DS-DIGIT.TTF，在css中声明字体，

// 声明图标字体
@font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF);
}

在li中使用字体

font-family: electronicFont;

在这里插入图片描述

下面地图板块
地图板块有三个背景图，球体，旋转的小球体，逆时针箭头光圈
其中旋转的小球体、逆时针箭头光圈是通过animation动画实现的

.map {position: relative;height: 10.125rem;.map1,.map2,.map3 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 6.475rem;height: 6.475rem;background: url(../images/map.png) no-repeat;// 缩放的时候 球背景一起缩放background-size: 100% 100%;opacity: 0.3;}.map2 {width: 8.0375rem;height: 8.0375rem;background-image: url(../images/lbx.png);opacity: 0.6;// linear匀速 infinite无限循环animation: rotate 15s linear infinite;z-index: 2;}.map3 {width: 7.075rem;height: 7.075rem;background-image: url(../images/jt.png);animation: rotate2 10s linear infinite;opacity: 0.6;}// 旋转 从0度到360度@keyframes rotate {from {// 旋转的同时保留原来的位置transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(360deg);}}// 逆时针 箭头旋转@keyframes rotate2 {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(-360deg);}}
}