组件中通过::before(伪元素)给文字前面加样式

通过::before可以给文字前面添加蓝色小薯条，同样的也可以添加*星号，在content: '*';就可以改变了

在html代码片段中

<span class="demonstration" style="margin-right:3%">使用时长</span>

在样式中通过定位可以调整位置

.demonstration {
  color: #1677FF;
  font-size: 1.1em;
  line-height: 38px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  position: relative;
  &::before {
    content: ''; 
    position: absolute;
    left: -20px;
    top: 0;
    width: 5px;
    height: 24px;
    background: #1677FF;
  }
}

顺便记录一下日期选择器(之前总是出错呢，第二次记录)

<el-date-picker
  v-model="timeRange"
  size="small"
  style="border-color:#A6BAF8"
  type="daterange"
  range-separator="~"
  start-placeholder="开始时间"
  end-placeholder="结束时间"
  class="time"
></el-date-picker>

在js中

data(){
    return {
    timeRange: null,
    }
 },
 watch: {
   timeRange: {
      handler (value) {
       // this.queryParams.createTimeStart = value?.[0]?.getTime();
       // this.queryParams.createTimeEnd = value?.[1]?.getTime();
      },
     deep: true,
   },
  },
 

修改日历颜色

/deep/.el-icon-date:before {
  color: #4B87FF;
}