src/components/subscriptions/ProjectCard.vue - master - itp_practice/itp_frontend

src/components/subscriptions/ProjectCard.vue
57 строк4 KB
Soupik
improve ui
28 май 2025, 17:27
28 май 2025, 17:278804fe1
<template>
  <div class="game-card bg-gradient-to-br from-accent/50 to-secondary/90 rounded-lg p-7 transition-all duration-400 hover:transform hover:-translate-y-2 hover:shadow-xl border border-primary/10 shadow-lg relative overflow-hidden flex flex-col">
    <div class="game-card__header flex items-center mb-5">
      <div class="game-card__icon w-12 h-12 bg-gradient-button rounded-full flex items-center justify-center mr-4 text-bg-dark font-bold text-xl shadow-md">₿</div>
      <h3 class="game-card__title text-xl text-primary font-bold tracking-wide">{{ project.title }}</h3>
    </div>
    <div class="game-card__description flex-grow">
      <p class="text-white/70">{{ project.description }}</p>
    </div>
    <div class="game-card__links flex gap-5 flex-wrap mb-6 mt-6">
      <a href="#" class="game-card__link text-primary text-sm font-semibold inline-flex items-center transition-all duration-300 hover:text-white relative">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-1">
          <path d="M11 7L9.6 8.4L12.2 11H2V13H12.2L9.6 15.6L11 17L16 12L11 7Z" fill="currentColor"/>
          <path d="M20 19H13V21H20C21.1 21 22 20.1 22 19V5C22 3.9 21.1 3 20 3H13V5H20V19Z" fill="currentColor"/>
        </svg>
        Подробнее
      </a>
      <a href="#" class="game-card__link text-primary text-sm font-semibold inline-flex items-center transition-all duration-300 hover:text-white relative">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-1">
          <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 16.5V7.5L16 12L10 16.5Z" fill="currentColor"/>
        </svg>
        Видео-обзор
      </a>
    </div>
    <div class="game-card__info grid grid-cols-1 md:grid-cols-2 gap-5 pt-5 border-t border-white border-opacity-10 bg-accent/30 mx-[-28px] mt-auto px-7 pb-7">
      <div class="game-card__info-item">
        <p class="text-sm text-white/70 mb-1 flex items-center">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-1 opacity-70" style="transform: translateY(-1px);">
            <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/>
          </svg>
          Ориентировочная дата листинга
        </p>
        <h4 class="text-lg font-semibold">{{ project.date }}</h4>
      </div>
      <div class="game-card__info-item">
        <p class="text-sm text-white/70 mb-1 flex items-center">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-1 opacity-70" style="transform: translateY(-1px);">
            <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13.41 18.09V20H10.74V18.07C9.03 17.71 7.58 16.61 7.47 14.67H9.43C9.53 15.72 10.25 16.54 12.08 16.54C14.04 16.54 14.48 15.56 14.48 14.95C14.48 14.12 14.04 13.34 11.81 12.81C9.33 12.21 7.63 11.19 7.63 9.14C7.63 7.42 9.02 6.15 10.74 5.81V4H13.41V5.81C15.34 6.21 16.38 7.67 16.44 9.14H14.48C14.42 7.95 13.58 7.33 12.08 7.33C10.69 7.33 9.6 7.9 9.6 9.14C9.6 9.94 10.29 10.5 12.08 10.97C13.87 11.41 16.44 12.15 16.44 14.91C16.44 16.91 14.98 17.77 13.41 18.09Z" fill="currentColor"/>
          </svg>
          Сколько еще можно заработать
        </p>
        <h4 class="text-lg font-semibold">{{ project.earn }}</h4>
      </div>
    </div>
    <div class="game-card__badge absolute top-5 right-5 bg-blue-600 text-white px-2 py-1 rounded text-xs font-semibold shadow-md">TON</div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const props = defineProps({
  project: Object
});

  const showDetails = ref(false);
</script>