<template>
  <div class="change-page-wrap flex mx-auto">
    <nuxt-link v-if="props.prevdata" :to="`${baseurl}/${props.prevdata.id}`" class="change-btn page-prev">
      <span class="block" style="margin-bottom: 37px;">上一篇</span>
      <p class="text-ellipsis whitespace-nowrap overflow-hidden">{{ prevdata.title }}</p>
    </nuxt-link>
    <nuxt-link v-if="props.nextdata" :to="`${props.baseurl}/${props.nextdata.id}`" class="change-btn page-next">
      <span class="block" style="margin-bottom: 37px;">下一篇</span>
      <p class="text-ellipsis whitespace-nowrap overflow-hidden">{{ props.nextdata.title }}</p>
    </nuxt-link>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['prevdata', 'nextdata', 'baseurl']);

</script>

<style scoped lang="scss">

.change-page-wrap {
  width: 1145px;
  //width: fit-content;
  .change-btn {
    width: 551px;
    height: 157px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #D4D4D4;
    padding: 30px 37px;
    @apply cursor-pointer;
    &.page-prev {
      margin-right: 43px;
    }

    &.page-next {
      margin-left: auto;
    }

    &:hover {
      background-color: #022950;
      color: #fff;
    }
  }
}
</style>
