59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<template>
|
||
<view class="nav-arrows">
|
||
<view class="arrow-btn arrow-left" @click="$emit('scroll', -1)">
|
||
<text class="arrow-text">‹</text>
|
||
</view>
|
||
<view class="arrow-btn arrow-right" @click="$emit('scroll', 1)">
|
||
<text class="arrow-text">›</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineEmits(['scroll'])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.nav-arrows {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 24rpx;
|
||
right: 24rpx;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
pointer-events: none;
|
||
z-index: 10;
|
||
}
|
||
|
||
.arrow-btn {
|
||
width: 56rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(165deg,
|
||
#f0e4b1 0%,
|
||
#f08399 50%,
|
||
#b94e73 90%,
|
||
#834b9e 100%);
|
||
border-radius: 12rpx;
|
||
pointer-events: auto;
|
||
cursor: pointer;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.arrow-btn:active {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.arrow-text {
|
||
font-size: 56rpx;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
margin-top: -6rpx;
|
||
}
|
||
</style>
|