<template>
  <div class="right-row">
    <template v-for="index in data.len">
      <div class="right-item" @click="jump()">
<!--           :style="style">-->
        <!--           style="background-image: url('https://files.kardz.cn/demon/img_v3_025g_430b8ed0-cb39-4904-9f75-9191a1ce914g-4d66d8c530814e8eac431720676a989d.png?x-oss-process=image/resize,m_fill,h_450,w_300/format,jpg')">-->
        <img src="../assets/adver.jpg" :alt="index"/>
        <div class="item-btn"
        >点击购买
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import {AdverRightData} from '../entity/AdverRightData.ts'
import {defineProps} from 'vue'
import router from "../router";

const props = defineProps({
  data: {
    type: AdverRightData,
    default: () => []
  }
})
function jump() {
  router.push({name: "detail", params: {id: props.data.goodsId[0]}});
}

</script>

<style scoped lang="scss">
* {
  display: block;
}

.right-row {
  display: flex;

  justify-content: space-between;
  height: 450px;

  .right-item {
    display: flex;
    justify-content: space-between;
    width: 300px;
    height: 450px;
    cursor: pointer;

    img {
      margin: 0;
      width: 300px;
      color: #000;
      background: white;
      position: absolute;
      z-index: 1;
    }

    .item-btn {
      color: #000;
      background: white;
      //position: absolute;
      margin: 400px 66px 28px auto;
      width: 168px;
      height: 38px;
      line-height: 38px;
      border-radius: 15px;
      z-index: 2;
    }

    &:hover {
      &::after {
        display: block;
      }
    }

    &::after {
      opacity: 1;
      content: '';
      display: none;
      position: absolute;
      width: 300px;
      height: 450px;
      z-index: 1;
      background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
      animation: myfirst 0.2s ease;
    }

    @keyframes myfirst {
      0% {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0) 100%);
      }
      13% {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
      }
      25% {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
      }
      37% {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
      }
      50% {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
      }
      62% {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
      }
      75% {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
      }
      87% {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
      }
      100% {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
      }
    }

  }
}
</style>