<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="title">导航管理</span>
        </div>
      </template>

      <!-- 导航标签页 -->
      <el-tabs v-model="activeTab" type="card" class="nav-tabs">
        <!-- 底部图标导航 - 默认展示 -->
        <el-tab-pane label="底部图标导航" name="bottomIcon">
          <BottomIconNav />
        </el-tab-pane>

        <!-- 轮播图配置 -->
        <!-- <el-tab-pane label="轮播图配置" name="banner">
          <BannerConfig />
        </el-tab-pane> -->
        
        <!-- 底部主导航 - 已禁用 -->
         <!-- <el-tab-pane label="金刚区配置" name="bottomMain">
          <BottomMainNav />
        </el-tab-pane>  -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BottomMainNav from './components/BottomMainNav.vue'
import BottomIconNav from './components/BottomIconNav.vue'
import BannerConfig from './components/BannerConfig.vue'

const activeTab = ref('bottomIcon')
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.box-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  
  .title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    position: relative;
    padding-left: 12px;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 18px;
      background: #409EFF;
      border-radius: 2px;
    }
  }
}

.nav-tabs {
  :deep(.el-tabs__header) {
    margin-bottom: 20px;
  }
  
  :deep(.el-tabs__item) {
    font-size: 14px;
    font-weight: 500;
    
    &.is-active {
      color: #409EFF;
    }
  }
  
  :deep(.el-tabs__active-bar) {
    background-color: #409EFF;
  }
}
</style> 