主页框架

src/views/home/index.vue

@@ -0,0 +1,45 @@
+<template>
+	<div class="home">
+		<div class="left-nav"></div>
+		<div class="right-main">
+			<div class="top-nav"></div>
+			<div class="bottom-view"><router-view></router-view></div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	const globalStore = useGlobalStore()
+	const loading = computed(() => globalStore.state.loading)
+</script>
+
+<style lang="less" scoped>
+	.home {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		display: flex;
+		> .left-nav {
+			width: 29.5rem;
+			height: 100%;
+			background-color: #a12828;
+		}
+		> .right-main {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			> .top-nav {
+				height: 8rem;
+				background-color: #ea5050;
+			}
+			> .bottom-view {
+				flex: 1;
+				background-color: #fff;
+				overflow: hidden;
+				display: flex;
+			}
+		}
+	}
+</style>

src/views/home/test.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="test">
+		<p>老八秘制小汉堡</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+</script>
+
+<style lang="less" scoped>
+	.test {
+		flex: 1;
+		margin: 10px;
+		border-radius: 10px;
+		background-color: rgb(242, 130, 90);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 10rem;
+	}
+</style>

src/views/login/index.vue

@@ -0,0 +1,13 @@
+<template>
+	<div class="index"></div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	const globalStore = useGlobalStore()
+	const loading = computed(() => globalStore.state.loading)
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/login/login.vue

@@ -0,0 +1,13 @@
+<template>
+	<div class="login"></div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	const globalStore = useGlobalStore()
+	const loading = computed(() => globalStore.state.loading)
+</script>
+
+<style lang="less" scoped>
+</style>