<template>
  <div class="filter-box">
    <div class="left">
      <!-- 标的 -->
      {{ $t('home.l7') }}
    </div>
    <div class="right flex">
      <div class="table-row flex">
        <!-- 涨跌幅 -->
        {{ $t('market.l5') }}
        <!-- <div>
          <i class="el-icon-caret-top"></i>
          <i class="el-icon-caret-bottom"></i>
        </div> -->
      </div>
      <div class="table-row flex">
        <!-- 平值 -->
        {{ $t('download.l42') }}
        <!-- <div>
          <i class="el-icon-caret-top"></i>
          <i class="el-icon-caret-bottom"></i>
        </div> -->
      </div>
      <div class="table-row flex">
        <!-- 虚值105 -->
        {{ $t('download.l43') }}
        <!-- <div>
          <i class="el-icon-caret-top"></i>
          <i class="el-icon-caret-bottom"></i>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="less" scoped>
.filter-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0 4px;
  color: #959697;
  font-size: 12px;
  position: relative;
  z-index: 3;
  .left {
    column-gap: 13px;
    .icon {
      width: 18px;
      cursor: pointer;
    }
  }
  .table-row {
    width: 70px;
    cursor: pointer;
    justify-content: flex-end;
    text-align: right;
    word-break: break-all;
  }
  .el-icon-caret-top {
    margin-bottom: -5px;
    display: block;
    font-size: 10px;
  }
  .el-icon-caret-bottom {
    margin-top: -5px;
    display: block;
    font-size: 10px;
  }
}
</style>