前言:身为前端,总是要面对来自 产品+UI 的【原创组件】的刁难。
效果图:
成品:
思路:
1.使用ul>li>div*2 + flex +vw 来实现布局。
2.使用字体图标方便设置颜色。
3.通过absolute+left动态定位标记,以实现百分比精确定位。
上代码:
内容集成为vue组件页,调用时,给好宽度就行,因为用了flex+vw,可以实现大小屏幕自适应。
开发完成后,整体效果一览:
因为偏向业务,就不提供细致源码了,给以后造轮子的小伙伴提供一下思路。
ヾ(◍°∇°◍)ノ゙
前言:身为前端,总是要面对来自 产品+UI 的【原创组件】的刁难。
效果图:
成品:
思路:
1.使用ul>li>div*2 + flex +vw 来实现布局。
2.使用字体图标方便设置颜色。
3.通过absolute+left动态定位标记,以实现百分比精确定位。
上代码:
内容集成为vue组件页,调用时,给好宽度就行,因为用了flex+vw,可以实现大小屏幕自适应。
开发完成后,整体效果一览:
因为偏向业务,就不提供细致源码了,给以后造轮子的小伙伴提供一下思路。
ヾ(◍°∇°◍)ノ゙