feat:页面结构布局、header开发、tailwindcss和icon模块增加
This commit is contained in:
parent
5ece3b7f63
commit
5a1c158dde
|
|
@ -1,3 +1,5 @@
|
|||
<template>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,
|
||||
body,
|
||||
.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"],
|
||||
postcss: {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
},
|
||||
modules: ['@nuxtjs/tailwindcss', "@nuxt/icon"],
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -15,8 +15,12 @@
|
|||
"vue-router": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/material-symbols": "^1.2.14",
|
||||
"@nuxt/icon": "^1.10.3",
|
||||
"@nuxtjs/tailwindcss": "^6.13.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"daisyui": "^4.12.23",
|
||||
"less": "^4.2.2",
|
||||
"postcss": "^8.5.3",
|
||||
"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