仿mac导航条制作

package.json

@@ -31,13 +31,16 @@
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.4.0",
+    "autoprefixer": "^10.4.16",
     "chromedriver": "^119.0.1",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "geckodriver": "^4.2.1",
     "nightwatch": "^3.3.2",
     "npm-run-all2": "^6.1.1",
+    "postcss": "^8.4.32",
     "prettier": "^3.0.3",
+    "tailwindcss": "^3.3.6",
     "ts-node": "^10.9.1",
     "typescript": "~5.2.0",
     "vite": "^5.0.5",

src/App.vue

@@ -1,85 +1,92 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+import AppleBar from "@/components/layout/appleBar.vue";
+import type {navItem} from '@/types/appleBar';
+
+let navItems:navItem[] = [
+  {
+    id: 1,
+    name: '首页',
+    actionCode: 'toHome',
+    description: '返回首页',
+    icon: 'icon-home',
+  },
+  {
+    id: 1,
+    name: '首页',
+    actionCode: 'toHome',
+    description: '返回首页',
+    icon: 'icon-home',
+  },
+  {
+    id: 1,
+    name: '首页',
+    actionCode: 'toHome',
+    description: '返回首页',
+    icon: 'icon-home',
+  },
+]
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
+<!--  -->
+  <div class="app-container">
+    <div class="app-bar">
+      <!-- 模仿苹果导航条 -->
+      <apple-bar
+          :nav-items="navItems"
+          :hide-time="5000"
+      ></apple-bar>
+    </div>
+    <div class="app-content">
+      <RouterView />
     </div>
-  </header>
 
-  <RouterView />
+  </div>
+
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
+.app-container {
   width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
 }
 
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
+.app-content {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-background-soft);
+  overflow: auto;
+  background-image: url("@/assets/images/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: center;
 }
 
-nav a:first-of-type {
-  border: 0;
+.app-bar{
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  bottom: 0;
 }
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
 
-  .logo {
-    margin: 0 2rem 0 0;
+@media screen and (max-width: 768px) {
+  .app-content {
+    height: calc(100% - 50px);
   }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+  .app-bar {
+    position: relative;
+    bottom: 0;
   }
 
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
 }
 </style>

src/assets/base.css

@@ -56,6 +56,7 @@
   box-sizing: border-box;
   margin: 0;
   font-weight: normal;
+  padding: 0;
 }
 
 body {

src/assets/main.css

@@ -1,9 +1,8 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  width: 100vw;
+  height: 100vh;
   font-weight: normal;
 }
 
@@ -27,9 +26,4 @@ a,
     place-items: center;
   }
 
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
 }

src/assets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/layout/appleBar.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import {ref, onMounted} from 'vue'
+import type{PropType} from 'vue'
+import type{navItem} from '@/types/appleBar'
+
+let hideTimer:number|null = null;
+let isHidden = ref(true);
+
+
+
+let props = defineProps({
+//   是否全屏
+  isFullScreen: {
+    type: Boolean,
+    default: false
+  },
+//   导航项
+  navItems:  {
+    type: Array as PropType<navItem[]>,
+    default: ():navItem[] => []
+  },
+  hideTime: {
+    type: Number,
+    default: 3000
+  }
+});
+
+
+onMounted(() => {
+  startHideTimer();
+  console.log(props.navItems);
+})
+
+/**
+ * 用户交互时，重置隐藏计时器
+ */
+function barActiveHandle(): void{
+  isHidden.value = false;
+}
+
+
+// 倒计时
+function startHideTimer(){
+  if(hideTimer){
+    clearTimeout(hideTimer);
+  }
+  hideTimer = setTimeout(() => {
+    isHidden.value = true;
+  }, props.hideTime);
+}
+
+</script>
+
+<template>
+  <div class="appleBarBox" :class="isHidden?'hidden':''">
+    <div class="appleBar" @mousemove="barActiveHandle" @mouseout="startHideTimer">
+      <div class="appleItem" v-for="item in props.navItems" :key="item.id">
+        {{item.name}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.appleBarBox{
+  width: 80%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+
+.appleBar{
+  width: 100%;
+  height: 50px;
+  background-color: var(--color-background-soft);
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
+  opacity: 0.6;
+  transition: all 0.8s;
+  margin-bottom: 20px;
+}
+
+.appleItem{
+  width: 45px;
+  height: 45px;
+  display: flex;
+  margin: 0 10px;
+  border-radius: 50%;
+  box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--color-text);
+  cursor: pointer;
+  transition: all 0.8s;
+}
+
+.hidden .appleBar{
+  width: 10%;
+  height: 10px;
+  border-radius: 5px;
+  opacity: 0.4;
+  margin-bottom: 5px;
+  cursor: pointer;
+
+}
+
+
+
+</style>

src/components/layout/header.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -1,5 +1,5 @@
 import './assets/main.css'
-
+import './assets/tailwind.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 

src/types/appleBar.ts

@@ -0,0 +1,8 @@
+export interface navItem {
+    id: number,
+    name: string,
+    actionCode: string,
+    description: string,
+    icon: string,
+}
+

tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,

vite.config.ts

@@ -5,6 +5,7 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import nightwatchPlugin from 'vite-plugin-nightwatch'
 
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [