vue组件 AQI指数 传参定位

246 阅读1分钟
前言:身为前端,总是要面对来自 产品+UI 的【原创组件】的刁难。

效果图:


成品:


思路:

1.使用ul>li>div*2 + flex +vw 来实现布局。

2.使用字体图标方便设置颜色。

3.通过absolute+left动态定位标记,以实现百分比精确定位。

上代码:



内容集成为vue组件页,调用时,给好宽度就行,因为用了flex+vw,可以实现大小屏幕自适应。

开发完成后,整体效果一览:



因为偏向业务,就不提供细致源码了,给以后造轮子的小伙伴提供一下思路。

ヾ(◍°∇°◍)ノ゙