<template>
  <div class="filter-box">
    <div>
      <!-- 名称 -->
      {{ $t('market.l17') }}
    </div>
    <div class="right flex">
      <div class="table-row flex">
        <!-- 价格 -->
        <div class="text">
          {{ $t('market.l4') }}
        </div>
        <!-- <div>
          <i class="el-icon-caret-top"></i>
          <i class="el-icon-caret-bottom"></i>
        </div> -->
      </div>
      <div class="table-row flex">
        <!-- 涨跌幅 -->
        <div class="text">
          {{ $t('market.l5') }}
        </div>
        <!-- <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;
  background-color: #fff;
  font-size: 12px;
  position: relative;
  z-index: 3;
  .table-row {
    width: 84px;
    cursor: pointer;
    justify-content: flex-end;
    padding-left: 3px;
    .text {
      min-width: 0px;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .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>