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