front/src/components/PathCard.vue - master - renix/TravelGuide

front/src/components/PathCard.vue
95 строк3 KB
Dolfi-er
Небольшие косметические правки
03 апр 2025, 15:37
03 апр 2025, 15:37e713b00
<script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const isHovered = ref<boolean>(false)
  const isLiked = ref<boolean>(true)
  const isDisLiked = ref<boolean>(false)

  const props = defineProps<{
    id: number;
    title: string;

  }>();

  const clickLike = (event: Event) => {
    event.stopPropagation()
    if (isLiked.value) {
      isLiked.value = false
    } else {
      isLiked.value = true

      if (isDisLiked.value) {
        isDisLiked.value = false
      }
    }
  }

  const clickDisLike = (event: Event) => {
    event.stopPropagation()
    if (isDisLiked.value) {
      isDisLiked.value = false
    } else {
      isDisLiked.value = true

      if (isLiked.value) {
        isLiked.value = false
      }
    }
  }

  const goToPathPage = (index: number = props.id) => {
    const routeUrl = router.resolve({ name: 'PathPage', params: { id: index } }).href
    window.open(routeUrl, '_blank')
  }
</script>

<template>
  <div
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
    @click="goToPathPage()"
    class="relative h-[320px] shadow-[0_4px_24px_rgba(0,0,0,0.4)] rounded-xl flex flex-col cursor-pointer"
  >
    <div
      class="absolute rounded-xl bg-cover bg-no-repeat bg-center inset-0 transition-all"
      :class="{ 'brightness-30': isHovered }"
      style="background: linear-gradient(0deg, rgba(42,157,143,1) 0%, rgba(233,196,106,1) 95%);"
    ></div>

    <div class="flex justify-between items-center p-[16px] z-0">

      <button @click="clickLike" class="w-[28px] h-[28px] cursor-pointer">
        <svg width="53" height="51" viewBox="0 0 53 51" fill="none" xmlns="http://www.w3.org/2000/svg"
                :style="{ fill: isLiked? 'white' : 'none', stroke: '#FFD700' }"
                class="w-[30px] h-[30px] hover:scale-110 transition-transform"
              >
                <path d="M26.5 1.08325L34.3538 16.9941L51.9167 19.5612L39.2083 31.9391L42.2075 49.4258L26.5 41.1653L10.7925 49.4258L13.7917 31.9391L1.08334 19.5612L18.6463 16.9941L26.5 1.08325Z" stroke="#F1EFEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>

    <div
      class="mt-[120px] bg-linear-[180deg,rgba(217,217,217,0)_40%,black_100%] h-full rounded-b-xl z-0 overflow-hidden"
    ></div>

    <div
      class="absolute w-full px-[16px] bottom-[20px] text-[#F1EFEA] text-center"
      :class="{ 'bottom-0 top-[50px]': isHovered }"
    >
      <h4 class="font-amatic underline underline-offset-3 text-[28px] mb-[15px]">{{ title }}</h4>
    </div>
  </div>
</template>

<style scoped>
  .line-clamp-10 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    line-clamp: 10;
    overflow: hidden;
  }
</style>