element实现按时间排序的样式

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <span class="navSpan cur">按时间排序
              <i class="el-icon-caret-top navIconTop" :class="[timeSortValue == 1?'active':'']" @click="timeSort(1)"></i>
              <i class="el-icon-caret-bottom navIconBot" :class="[timeSortValue == 2?'active':'']" @click="timeSort(2)"></i>
            </span>
        </div>
      </el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light">567</div></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
     timeSortValue: 1,     // 时间排序 0不排序 1倒叙 2正序
    };
  },
  methods: {
    // 按时间排序
    timeSort(val){
      this.timeSortValue = val
    },
  },
};
</script>
<style lang="" scoped>
.navSpan{ line-height: 42px; font-size: 14px; color: #606266; position: relative;}
  .navIconTop,
  .navIconBot{ font-size: 15px; color: #c0c4cc; position: absolute; right: -18px; z-index: 10;}
  .navIconTop{ top: -2px;}
  .navIconBot{ bottom: -2px;}
  .navIconTop.active, .navIconBot.active{ color: #409eff;}
</style>