
<template>
  <div :class="props.data.id % 2 == 0 ? ' bg-systemCardBg' : ' bg-white'" class="pt-10 pb-24">
    <div
      class="wrappper flex w-bodySet px-48 mx-auto items-center justify-between"
      :class="style"
      ref="card"
      data-aos="fade-up"
      data-aos-duration="600"
      data-aos-easing="ease-in-out-cubic"
    >
      <div>
        <svg-icon v-if="props.data.url" :iconClass="props.data.url" width="576px" height="464px" />
        <img v-else :src="getImgUrl(props.data.png!)" />
      </div>

      <div
        class="w-96 px-12 py-16 flex flex-col self-center mt-10"
      >
        <svg-icon :iconClass="props.data.icon" class="w-12 h-12 mb-1" />
        <div class="pt-2 text-headerMain text-2xl font-semibold">{{ props.data.title }}</div>
        <div class="text-sm text-contentMain pt-4 text-justify">{{ props.data.detail }}</div>
       
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, computed, ref } from "vue"

interface item {
  id: number,
  title: string,
  detail: string,
  icon: string,
  url?: string,
  png?: string,
}
const props = withDefaults(defineProps<{
  data: item,
  isActive: boolean
}>(), {
  isActive: false
})

const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})

const style = computed(() => {
  return props.data.id % 2 == 0 ? ' flex-row-reverse' : 'flex-row'
})

</script>

<style scoped>
/* 文字逐行进入效果 */
.isActive {
  transform: translateY(-10%) translateZ(0);
  /* animation: 1s cubic-bezier(.455,.03,.515,.955) 0s forwards line_enter; */
  animation: 2s cubic-bezier(0.43, 0.195, 0.02, 1) 0s forwards line_enter;
}

.line {
  position: relative;
  display: block;
  will-change: opacity, transform;
  opacity: 0;
  transform: translateY(100%) translateZ(0);
  animation: 0s cubic-bezier(0.43, 0.195, 0.02, 1) 0s forwards line_leave;
}
@keyframes line_enter {
  0% {
    opacity: 0;
    transform: translateY(100%) rotate(4deg) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-15%) translateZ(0);
  }
}
</style>
