非你网

安装好了 tailwindcss 以及相关的插件后。也安装一下 vscode 对应的插件。常规网站，顶部，底部一般都是公用的，我们可以提取出来，作为 layout。然后是自适应问题，tailwindcss 已居右自适应的特性。我们再扩展一下啊，支持得更宽一点。现在电脑，分辨率也都已经很高了。支持的多一点，体验也会好一些。然后正如 bootstrap 框架一样。container 容器，我们还是要用的。tailwindcss 默认的 container 是不居中的，我们可以在插件中配置一下。默认就居住。其实居中和 bootstrap 一样，都是使用 margin:auto 来搞定的。

那么开始吧。

配置断点和容器

编辑 tailwind.config, 先扩充宽度。也可以更多点。

  …
  theme: {
    extend: {},
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1782px',
    }
  },

然后设置容器，让其默认就居中。相同的位置，增加 container 配置。其中，center 为 true 时，container 容器默认就居中，这个和 bootstrap 一样了。然后 padding 设置的是每个节点下的内边距。

  …
  theme: {
    extend: {},
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
        '3xl': '6rem',
      },
    },
    …

填充 header 部分

header 分三块。最左边是 logo，点击 logo 能跳转到首页。然后是导航栏，最后是登录注册按钮。其中 logo，和导航栏居左，登录注册按钮居右。这是大的视口下的布局。这样布局也好布局。

虽然 tailwindcss 的思想是默认就是移动端布局，通过断点来控制大的视口布局。我们先别管这个。先只要把大的视口布局出来就好。因为重点是 nuxt 。

修改 layouts/base/header.vue，填入以下内容。

<template>
    <header class="w-full shadow-sm">
        <div class="container flex items-center h-[72px]">
            <img class="w-[72px] h-[72px] mr-10" src="../../assets/image/base/logo.png" alt="首页" />

            <div class="flex items-center relative group cursor-pointer h-full mr-5">
                <div class="text-black text-[15px] font-medium">产品</div>
                <div class="absolute bottom-0 w-full h-[3px] scale-0 transition-all group-hover:scale-100 bg-lime-300"></div>
            </div>

            <div class="flex items-center relative group cursor-pointer h-full mr-5">
                <div class="text-black text-[15px] font-medium">Web3D</div>
                <div class="absolute bottom-0 w-full h-[3px] scale-0 transition-all group-hover:scale-100 bg-lime-300"></div>
            </div>

            <div class="flex items-center relative group cursor-pointer h-full mr-5">
                <div class="text-black text-[15px] font-medium">关于我们</div>
                <div class="absolute bottom-0 w-full h-[3px] scale-0 transition-all group-hover:scale-100 bg-lime-300"></div>
            </div>

            <a class="flex items-center relative group cursor-pointer h-full mr-auto" href="https://hao123.com">
                <div class="text-black text-[15px] font-medium">技术博客</div>
                <div class="absolute bottom-0 w-full h-[3px] scale-0 transition-all group-hover:scale-100 bg-lime-300"></div>
            </a>

            <a class="text-gray-600 text-[13px] cursor-pointer hover:text-black" href="#">登录</a>
            <a class="text-gray-600 text-[13px] cursor-pointer hover:text-black ml-3" href="#">注册</a>
        </div>
    </header>
</template>

然后在 layouts/base.vue 中使用它。

<template>
    <Header />

    <div class="content">
        <slot></slot>
    </div>
</template>

<script setup>
import Header from './base/header.vue'
</script>

看看效果。

现在仅仅是鼠标移上去有效果，当前 nav 还没做。得接入 js ，通过路由来实现激活状态。

下边加入 js 代码。一方面用数据驱动展示导航信息。另外一方面通过路由和导航信息接活，来确定哪个导航栏是当前导航栏。从而确定激活状态的显示效果（就是底部有一条绿色的横线)

不过这里的导航和 vue 的不一样。是由 nuxt 提供的，写法是一样的。

<template>
    <header class="w-full shadow-sm">
        <div class="container flex items-center h-[72px]">
            <img class="w-[72px] h-[72px] mr-10" src="../../assets/image/base/logo.png" alt="首页" />

            <a v-for="(item, index) in links" :key="index" class="flex items-center relative group cursor-pointer h-full mr-5" :href="item.value">
                <div class="text-black text-[15px] font-medium">{{ item.label }}</div>
                <div :class="lineClass(item)"></div>
            </a>

            <a class="text-gray-600 text-[13px] cursor-pointer ml-auto hover:text-black" href="#">登录</a>
            <a class="text-gray-600 text-[13px] cursor-pointer hover:text-black ml-3" href="#">注册</a>
        </div>
    </header>
</template>

<script setup lang="ts">

import { computed } from 'vue'

import { useRoute } from 'nuxt/app';

interface Item {
    label: string,
    value: string,
    active: boolean
}

const links:Array<Item> = [ 
    {label: '产品', value: '/', active: false},
    {label: 'Web3D',value: 'web3D', active: false},
    {label: '关于我们',value: 'about', active: false},
    {label: '技术博客',value: 'https://blog.vini123.com', active: false},
];

const lineClass = computed(() => {
    return (item:Item) => {
        if (item.active) {
            return 'absolute bottom-0 w-full h-[3px] bg-lime-300'
        }
        return 'absolute bottom-0 w-full h-[3px] scale-0 transition-all group-hover:scale-100 bg-lime-300'
    }
})

const route = useRoute();

for(let item of links) {
    if (item.value == route.path) {
        item.active = true
    }
}
</script>

然后效果是这样的。

这里默认产品是首页，所以它是激活状态。鼠标移动到其他导航栏上，底下会有 hove 的效果。这里暂时告一段落。下边写底部的信息。

相关搜索

https://blog.csdn.net/qq_43456781/article/details/120255080