97 lines
1.9 KiB
Vue
97 lines
1.9 KiB
Vue
<template>
|
|
<view
|
|
v-if="catalogues.length > 1"
|
|
:class="['catalogue-list', userVip ? 'vip-style' : '']"
|
|
>
|
|
<view
|
|
v-for="(catalogue, index) in catalogues"
|
|
:key="catalogue.id"
|
|
:class="['catalogue-item', currentIndex === index ? 'active' : '']"
|
|
@click="handleSelect(index)"
|
|
>
|
|
<text class="catalogue-title">{{ catalogue.title }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ICatalogue, IVipInfo } from '@/types/course'
|
|
|
|
interface Props {
|
|
catalogues: ICatalogue[]
|
|
currentIndex: number
|
|
userVip: IVipInfo | null
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
change: [index: number]
|
|
}>()
|
|
|
|
/**
|
|
* 选择目录
|
|
*/
|
|
const handleSelect = (index: number) => {
|
|
if (index === props.currentIndex) return
|
|
emit('change', index)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.catalogue-list {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 20rpx;
|
|
padding-bottom: 0;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
margin-top: 20rpx;
|
|
|
|
&.vip-style {
|
|
background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
|
|
|
|
.catalogue-item {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
color: #fff;
|
|
border-color: #fff;
|
|
|
|
&.active {
|
|
background-color: #258feb;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.catalogue-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 16rpx 0;
|
|
margin-right: 10rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
border: 1px solid #fff;
|
|
border-bottom: none;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
color: #fff;
|
|
transition: all 0.3s;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.active {
|
|
background-color: #258feb;
|
|
padding: 20rpx 0;
|
|
|
|
.catalogue-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.catalogue-title {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|