<template>
  <div class="nav">
    <dl v-for="(item, index) in diamondAreas" :key="index" class="nav-item">
      <dt class="nav-item-img">
        <cr-image class="nav-item-img" width="46px" height="46px" :src="item.img" />
      </dt>
      <dd class="nav-item-text">{{ item.name }}</dd>
    </dl>
  </div>
</template>
<script>
export default {
  props: {
    diamondAreas: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style lang="less" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 97px;
  padding: 14px 15px 18px 15px;
  box-sizing: border-box;
  background: url(~@/assets/images/sericeGoods/nav-shadow.png) no-repeat center center;
  // background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, #f6f6f6 35%);
  /* Sketch doesnt export gradient borders at this point */
  border-radius: 16px;
  // background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, #f6f6f6 35%);
  // border-radius: 16px;

  &-item {
    width: 55px;
    &-img {
      text-align: center;
    }
    &-text {
      .text-size(12);
      color: @black;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      // .mx_multline_overwrite(1);
    }
  }
}
</style>
