44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
||
<view style="height: 100vh;">
|
||
<!-- 选择菜单 -->
|
||
<up-subsection :list="list" :current="curNow" @change="sectionChange"></up-subsection>
|
||
<!-- 案例组件展示区域 -->
|
||
<!-- <CaseList></CaseList> -->
|
||
<CaseList v-if="curNow == 0" style="height: 100vh;" :isCollection="true"></CaseList>
|
||
<!-- 视频组件展示区域 -->
|
||
<!-- 这里留位置给你的视频组件 -->
|
||
<ListVideo v-if="curNow==1" :isCollection="true"></ListVideo>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
const list = ref(['案例', '视频']);
|
||
const curNow = ref(0);
|
||
// 定义方法，注意在 setup 中不需要 this，直接访问响应式引用
|
||
function sectionChange(index) {
|
||
curNow.value = index;
|
||
console.log("当前选择为",curNow.value)
|
||
}
|
||
// 记录用户选择的选项
|
||
const selectedOption = ref('');
|
||
|
||
// 切换到案例展示
|
||
const showCases = () => {
|
||
selectedOption.value = 'cases';
|
||
}
|
||
|
||
// 切换到视频展示
|
||
const showVideos = () => {
|
||
selectedOption.value = 'videos';
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* 样式可以根据你的需要进行调整 */
|
||
button {
|
||
margin: 10px;
|
||
padding: 10px;
|
||
}
|
||
</style>
|