大致结构:
<template lang="pug"> .latestNews .latestNewsTitle 标题1 .latestNewsContent .News 内容1 .News 内容2 </template>
css实现效果:使用::before 对内容前的小方块进行css绘制即可
.latestNewsContent { padding-bottom: 16px; .News { padding-left: 4px; font-size: 12px; font-family: DINPro-Medium, DINPro; font-weight: 500; color: rgba(102, 102, 102, 1); line-height: 15px; &::before { display: inline-block; width: 4px; height: 8px; background: rgba(30, 147, 243, 1); content: ''; /** 这个指为正的话 小方块就往上, 为负的话,小方块就往下 */ vertical-align: 1px; margin-right: 10px; } } }