feat:页面结构布局、header开发、tailwindcss和icon模块增加
This commit is contained in:
parent
5ece3b7f63
commit
5a1c158dde
|
|
@ -1,3 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<NuxtLayout>
|
||||||
<NuxtPage />
|
<NuxtPage />
|
||||||
|
</NuxtLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
.main {
|
.main {
|
||||||
@apply w-full h-full;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const menuOpen = ref(false);
|
||||||
|
|
||||||
|
const handleMenuChange = () => {
|
||||||
|
menuOpen.value = !menuOpen.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
console.log(route);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<header class="flex-[0_0_auto] h-10 flex items-center">
|
||||||
|
<div class="w-56 h-10 flex items-center justify-center max-md:hidden">
|
||||||
|
<div class="avatar">
|
||||||
|
<div class="mask mask-squircle w-8">
|
||||||
|
<img src="/favicon.ico" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1 class="ml-2">maptile</h1>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
for="menu-drawer"
|
||||||
|
class="btn btn-circle w-8 h-8 min-h-8 p-2 ml-2 swap swap-rotate md:hidden"
|
||||||
|
>
|
||||||
|
<input type="checkbox" :checked="menuOpen" />
|
||||||
|
<svg
|
||||||
|
class="swap-off fill-current w-6 h-6"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
class="swap-on fill-current w-6 h-6"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
>
|
||||||
|
<polygon
|
||||||
|
points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
<div class="dropdown dropdown-end ml-auto mr-2">
|
||||||
|
<div
|
||||||
|
tabindex="0"
|
||||||
|
role="button"
|
||||||
|
class="avatar online placeholder sm-auto"
|
||||||
|
>
|
||||||
|
<div class="bg-neutral text-neutral-content w-8 rounded-full">
|
||||||
|
<span class="text-sm">AI</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
tabindex="0"
|
||||||
|
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-24 p-2 shadow"
|
||||||
|
>
|
||||||
|
<li><a>退出</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section class="flex-auto flex overflow-hidden drawer md:drawer-open">
|
||||||
|
<input
|
||||||
|
id="menu-drawer"
|
||||||
|
type="checkbox"
|
||||||
|
class="drawer-toggle"
|
||||||
|
:checked="menuOpen"
|
||||||
|
@change="handleMenuChange"
|
||||||
|
/>
|
||||||
|
<nav class="drawer-side top-10 z-30 overflow-x-hidden overflow-y-auto">
|
||||||
|
<label
|
||||||
|
for="menu-drawer"
|
||||||
|
aria-label="close sidebar"
|
||||||
|
class="drawer-overlay"
|
||||||
|
></label>
|
||||||
|
<ul class="menu bg-base-200 text-base-content min-h-full w-56 p-2">
|
||||||
|
<li>
|
||||||
|
<a href="/" :class="route.path === '/' ? 'active' : ''"
|
||||||
|
><Icon name="material-symbols:home-outline-rounded" />首页</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<details>
|
||||||
|
<summary class="group">hello</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a>Sidebar Item 1</a></li>
|
||||||
|
<li><a>Sidebar Item 2</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
<li><a>Sidebar Item 1</a></li>
|
||||||
|
<li><a>Sidebar Item 2</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<main class="drawer-content flex-auto relative overflow-auto">
|
||||||
|
<slot />
|
||||||
|
<footer class="w-full h-4 my-2 text-center text-xs">
|
||||||
|
©powered by maptile
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
:global(.main) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -14,10 +14,5 @@ export default defineNuxtConfig({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
css: ["@/assets/css/main.css"],
|
css: ["@/assets/css/main.css"],
|
||||||
postcss: {
|
modules: ['@nuxtjs/tailwindcss', "@nuxt/icon"],
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -15,8 +15,12 @@
|
||||||
"vue-router": "latest"
|
"vue-router": "latest"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@iconify-json/material-symbols": "^1.2.14",
|
||||||
|
"@nuxt/icon": "^1.10.3",
|
||||||
|
"@nuxtjs/tailwindcss": "^6.13.1",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
"daisyui": "^4.12.23",
|
"daisyui": "^4.12.23",
|
||||||
|
"less": "^4.2.2",
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"tailwindcss": "^3.4.17"
|
"tailwindcss": "^3.4.17"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="h-[2000px] bg-red-200">hello world</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
Loading…
Reference in New Issue