You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

47 lines
1.2 KiB

<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>