<template>
  <div class="my-favorite narrow-scrollbar">
    <h2>我的收藏</h2>
    <div class="favorite-item narrow-scrollbar">
      <div class="favorite-data" v-for="(item, index) in 17" :key="index">
        <img :src="Imgs.closeSvg" alt="" />
        <p>Fonvvity Token</p>
        <p>7.05{{ item }}</p>
        <p class="favorite-active">+10.8%</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const Imgs = {
  closeSvg: '/images/svg/header/close.svg',
};
</script>

<style lang="less" scoped>
@import '@/style/flex.less';
.my-favorite {
  border: 1px solid #e4e4e4;
  padding: 15px 20px;
  height: calc(100vh - 70px);
  overflow-x: auto;
  h2 {
    text-align: left;
  }
  .favorite-item {
    height: calc(100vh - 160px);
    min-width: 900px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    cursor: pointer;
    .favorite-data:hover {
      border: 1px solid rgb(37, 123, 251);
      box-shadow: 0 0 10px rgb(37, 123, 251);
      transition: all 0.3s;
    }
    .favorite-data {
      width: 40%;
      height: 88px;
      border: 1px solid #cbcaca;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-evenly;
      border-radius: 5px;
      margin-bottom: 20px;
      margin: 0 20px 20px 60px;
      img {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      p {
        font-size: 18px;
        font-weight: bold;
        color: #000;
      }
      .favorite-active {
        color: #42b5a1;
      }
    }
  }
}
</style>
