114 lines
2.0 KiB
Vue
114 lines
2.0 KiB
Vue
<template>
|
||
<view class="tab-page__header">
|
||
<view v-if="showBack" :class="['tab-page__back-btn', { 'tab-page__back-btn--animate': isAnimating }]" @tap="goBack">
|
||
<text class="tab-page__back-icon">‹</text>
|
||
</view>
|
||
<view class="tab-page__title-wrap">
|
||
<text class="tab-page__title">{{ title }}</text>
|
||
<text class="tab-page__subtitle">{{ subtitle }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: '课程'
|
||
},
|
||
subtitle: {
|
||
type: String,
|
||
default: '精品团课 · 私教 · 线上课'
|
||
},
|
||
showBack: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const isAnimating = ref(false)
|
||
|
||
onMounted(() => {
|
||
if (props.showBack) {
|
||
isAnimating.value = true
|
||
}
|
||
})
|
||
|
||
function goBack() {
|
||
uni.navigateBack({
|
||
fail: () => {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tab-page__header {
|
||
padding: 48rpx 32rpx 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.tab-page__back-btn {
|
||
width: 48rpx;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
background: rgba(0, 0, 0, 0.06);
|
||
border-radius: 16rpx;
|
||
opacity: 0;
|
||
transform: translateX(120rpx);
|
||
transition: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.tab-page__back-btn--animate {
|
||
animation: slideInFromRight 0.4s ease-out forwards;
|
||
}
|
||
|
||
@keyframes slideInFromRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(120rpx);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.tab-page__back-icon {
|
||
font-size: 36rpx;
|
||
color: $text-dark;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
}
|
||
|
||
.tab-page__title-wrap {
|
||
flex: 1;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.tab-page__title {
|
||
display: block;
|
||
font-size: 40rpx;
|
||
font-weight: $font-weight-bold;
|
||
color: $text-dark;
|
||
}
|
||
|
||
.tab-page__subtitle {
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
font-size: 24rpx;
|
||
color: $text-muted;
|
||
}
|
||
</style> |