page: 新增页面: 📄 数据统计

src/assets/css/index.scss

@@ -42,7 +42,7 @@
 
 :root {
   color-scheme: light;
-  --el-color-white: #ffffff;
+  --el-color-white: #000205;
   --el-color-black: #000000;
   --el-color-primary: #ffc100;
   --el-color-primary-light-3: #efc54b;

src/commpent/main.vue

@@ -1,41 +0,0 @@
-<template>
-	<el-row class="mb-4">
-		<el-button>Default</el-button>
-		<el-button type="primary">Primary</el-button>
-		<el-button type="success">Success</el-button>
-		<el-button type="info">Info</el-button>
-		<el-button type="warning">Warning</el-button>
-		<el-button type="danger">Danger</el-button>
-	</el-row>
-
-	<el-row class="mb-4">
-		<el-button plain>Plain</el-button>
-		<el-button plain type="primary">Primary</el-button>
-		<el-button plain type="success">Success</el-button>
-		<el-button plain type="info">Info</el-button>
-		<el-button plain type="warning">Warning</el-button>
-		<el-button plain type="danger">Danger</el-button>
-	</el-row>
-
-	<el-row class="mb-4">
-		<el-button round>Round</el-button>
-		<el-button round type="primary">Primary</el-button>
-		<el-button round type="success">Success</el-button>
-		<el-button round type="info">Info</el-button>
-		<el-button round type="warning">Warning</el-button>
-		<el-button round type="danger">Danger</el-button>
-	</el-row>
-
-	<el-row>
-		<el-button :icon="Search" circle />
-		<el-button :icon="Edit" circle type="primary" />
-		<el-button :icon="Check" circle type="success" />
-		<el-button :icon="Message" circle type="info" />
-		<el-button :icon="Star" circle type="warning" />
-		<el-button :icon="Delete" circle type="danger" />
-	</el-row>
-</template>
-
-<script lang="ts" setup>
-import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue';
-</script>

src/router/index.ts

@@ -5,6 +5,13 @@ const routes: Array<RouteRecordRaw> = [
 		path: '/',
 		name: 'layout',
 		component: () => import(/* webpackChunkName: "Layout" */ '@/views/layout.vue'),
+		children: [
+			{
+				path: 'statistics',
+				name: 'statistics',
+				component: () => import(/* webpackChunkName: "login" */ '@/views/statistics/index.vue'),
+			},
+		],
 	},
 	{
 		path: '/login',

src/views/layout.vue

@@ -12,7 +12,7 @@
 				</el-header>
 				<!--主体部分-->
 				<el-main>
-					<Main />
+					<RouterView />
 				</el-main>
 			</el-container>
 		</el-container>
@@ -21,7 +21,6 @@
 <script lang="ts" setup>
 import Header from '@/commpent/header/index.vue';
 import Aside from '@/commpent/aside.vue';
-import Main from '@/commpent/main.vue';
 </script>
 
 <style lang="scss" scoped>
@@ -30,4 +29,10 @@ import Main from '@/commpent/main.vue';
 .el-aside {
 	height: 100vh;
 }
+
+.el-main {
+	width: 100%;
+	height: 100%;
+	background-color: #f3f4f7;
+}
 </style>

src/views/login/index.vue

@@ -117,7 +117,6 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 
 	.login-btn {
 		width: 100%;
-		color: #1f1f1f;
 		border-radius: 25px;
 	}
 }

src/views/statistics/index.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="statistics-top">
+		<div class="statistics-select">
+			<el-radio-group v-model="radio" size="large">
+				<el-radio-button label="昨日" />
+				<el-radio-button label="近七日" />
+				<el-radio-button label="近30日" />
+				<el-radio-button label="本周" />
+				<el-radio-button label="本月" />
+			</el-radio-group>
+			<span class="get-time">已选时间：2024-02-11 至 2024-02-17</span>
+		</div>
+		<div class="statistics-export">
+			<el-button :icon="Upload" size="large">数据导出</el-button>
+		</div>
+	</div>
+
+	<div class="charts"></div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Upload } from '@element-plus/icons-vue';
+
+const radio = ref('昨日');
+</script>
+
+<style lang="scss" scoped>
+.statistics-top {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.statistics-select {
+		display: flex;
+		align-items: center;
+
+		.get-time {
+			margin: 0 0 0 20px;
+		}
+	}
+}
+</style>