<template>
  <a-layout style="height: 100vh;">

    <a-layout-header class="header" style="padding: 0;">
      <div style="float: left; padding: 0 20px 0 20px;"><img src="@assets/vue.svg" alt=""/></div>
      <a-menu
          theme="dark"
          mode="horizontal"
          style="line-height: 64px;"
      >
        <a-menu-item key="curd" @click="pageName='curd'">Curd</a-menu-item>
        <a-menu-item key="videoCenter" @click="pageName='videoCenter'">VideoCenter</a-menu-item>
      </a-menu>
    </a-layout-header>

    <a-layout class="page-wrapper">
      <div class="page-tab" v-if="pageName==='curd'">
        <Curd/>
      </div>
      <div class="page-tab" v-else-if="pageName==='videoCenter'">
        <VideoCenter/>
      </div>
    </a-layout>

  </a-layout>
</template>

<script lang="ts">
import Curd from '@views/page/Curd.vue';
import VideoCenter from '@views/page/VideoCenter.vue';

export default {
  components: {VideoCenter, Curd},
  data() {
    return {
      pageName: "curd", //默认选中 curd 页面
    };
  }
}
</script>

<style scoped>
</style>