<template>
  <div class="wrap">
    <div class="tabs">
      <div class="tab-wrap">
        <div class="tab-item" v-for="(item, index) in tabList" :key="index"
          :class="{ 'tab-item-current': indexStyle === index }" @click="handlerTab(index)">
          {{ item }}
        </div>
      </div>
    </div>
    <!-- 综合首页 -->
    <IndexHome v-if="indexStyle === 0" />
    <!-- 地块列表 -->
    <DkHome v-if="indexStyle === 1" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import IndexHome from './homePage/indexHome.vue';
import DkHome from './homePage/dkHome.vue';

const indexStyle = ref<any>(0);
const tabList = ref(['综合首页', '地块列表']);

function handlerTab(index: Number) {
  indexStyle.value = index;
}
</script>
<style lang="less" scoped>
.tabs {
  width: 100%;
  height: 46px;
  overflow: hidden;
  background: #fff;

  .tab-wrap {
    display: flex;
    width: 200px;
    height: 32px;
    line-height: 32px;
    margin: 0 auto;
    margin-top: 7px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #dcdcdc;

    .tab-item {
      width: 50%;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
    }

    .tab-item-current {
      background: #0882fe;
      color: #fff;
    }
  }
}
</style>
