Huaihua-High-tech-Site/src/layout/component/HeadBlock.vue

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
// import type { TabsInstance } from 'element-plus'

import { useRoute, useRouter } from 'vue-router'
const input3 = ref('')
const tabs = ref([
  { title: '信用信息', placeholder: '请输入主体名称' },
  { title: '统一社会信用代码', placeholder: '请输入统一社会信用代码' },
  { title: '站内文章', placeholder: '请输入站内文章关键字' },
]);

const route: any = useRoute()
const router: any = useRouter()


const munTabs = ref([
  { title: '首页', route:'home'},
  { title: '信用动态', route:'creditDynamics' },
  { title: '信用慧企', route:'creditWiseEnterprise' },
  { title: '信用评价结果', route:'creditEcaluationResults' },
  { title: '信用警示', route:'creditWarning' },
  { title: '信用服务', route:'creditServices' },
  { title: '通知公告', route:'about' },
]);
const activeTab = ref(0); // 默认激活第一个tab  
const activeMun = ref(0); // 默认激活第一个tab  

const placeholder = ref('请输入主体名称');
// const tabPosition = ref<TabsInstance['tabPosition']>('left')
const setActiveTab = (index: any, value: any) => {
  activeTab.value = index;
  placeholder.value = value.placeholder;
  console.log(index, value);
};
const munActiveTab = (index: any,tab:any) => {
  console.log(index, tab);
  
  activeMun.value = index;
  router.push({
      path: tab.route,
      query: {}
    });
};


</script>

<template>
  <div class="headContainer w100vw">
    <!-- 标题部分登录跳转 -->
    <div class="headTitle">
      <text>欢迎来到怀化市高新区企业信用信息分级分类平台</text>
      <div>
        <el-button type="primary">登录</el-button>
      </div>
    </div>
    <!-- 头部功能及其显示内容 -->
    <div class="headModule">
      <div>
        <H1>怀化市高新区企业信用信息分级分类平台</H1>
        <H3>www.aabbccd.com</H3>
      </div>
      <div class="headSearch">
        <!-- 搜索上方tab切换选择 -->
        <div class="headSTab">
          <div v-for="(tab, index) in tabs" :key="index" class="tab" :class="{ active: activeTab === index }"
            @click="setActiveTab(index, tab)">
            {{ tab.title }}
          </div>
        </div>
        <!-- 搜索框位置 -->
        <div>
          <el-input v-model="input3" style="width: 337px;height:33px" :placeholder=placeholder class="input-with-select">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="D" style="display:flex;justify-content:center">
      <div style="width:100%;position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    background:rgba(255,255,255,.22);
    height:46px">
        <div class="headMune">
          <div v-for="(tab, index) in munTabs" :key="index" class="tab" :class="{ activeMun: activeMun === index }"
            @click="munActiveTab(index,tab)">
            {{ tab.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$boxWidth: 1200px;

.headContainer {
  background-image: url("../../assets/img/back.png");
  background-size: 100% 100%;
  height: 238px;
  position: relative;

  .headTitle {
    margin: 0 40px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    text {
      font-weight: 400;
      font-size: 13px;
      color: #FFFFFF;
    }
  }

  .headModule {
    margin-top: 27px;
    width: $boxWidth;
    margin: 27px auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    H1 {
      font-weight: bold;
      font-size: 26px;
      color: #FFFFFF;
    }

    H3 {
      font-weight: bold;
      font-size: 14px;
      color: #FFFFFF;
      margin: 16px 0 0 0;
    }

    .headSearch {

      .headSTab {
        display: flex;

        .tab {
          color: white;
          padding: 6px 6px;
          margin-bottom: 16px;
          border-radius: 6px;
        }

        .active {
          background-color: #FF9900;
        }
      }
    }
  }

  .headMune {
    width: 100%;
    position: absolute;
    bottom: 0;
    width: $boxWidth;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;

    .tab {
      color: white;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .activeMun {
      background-color: #FF9900;
    }
  }
}
</style>