From 1072790993afa47934b8d72cb8b6f113f1ef6930 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 04 六月 2024 15:36:10 +0800
Subject: [PATCH] feat:封装通用header
---
src/components/NormalHeader/index.vue | 55 ++++++++++++++++++
src/views/home/components/user-panel/index.vue | 2
src/assets/icons/return.png | 0
components.d.ts | 2
src/components/ExamInfoDialog/index.vue | 21 +++++++
src/views/exam-list/index.vue | 18 ++++++
src/router/index.js | 15 ++++
src/views/exam/index.vue | 13 ++++
src/views/menu/index.vue | 9 ++
9 files changed, 131 insertions(+), 4 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index 7a35975..de775f2 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,8 +15,10 @@
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+ ExamInfoDialog: typeof import('./src/components/ExamInfoDialog/index.vue')['default']
Header: typeof import('./src/components/Header/index.vue')['default']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+ NormalHeader: typeof import('./src/components/NormalHeader/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
diff --git a/src/assets/icons/return.png b/src/assets/icons/return.png
new file mode 100644
index 0000000..a30c7ee
--- /dev/null
+++ b/src/assets/icons/return.png
Binary files differ
diff --git a/src/components/ExamInfoDialog/index.vue b/src/components/ExamInfoDialog/index.vue
new file mode 100644
index 0000000..5f0ff4e
--- /dev/null
+++ b/src/components/ExamInfoDialog/index.vue
@@ -0,0 +1,21 @@
+<template>
+ <div class="dialog-container">
+ <el-dialog v-model="dialogState" width="800" align-center>
+ <template #header="{ titleId, titleClass }">
+ <div class="dialog-header">
+ <h4 :id="titleId" :class="titleClass">鑰冪敓韬唤淇℃伅纭</h4>
+
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const dialogState = ref(false);
+
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/components/NormalHeader/index.vue b/src/components/NormalHeader/index.vue
new file mode 100644
index 0000000..4375271
--- /dev/null
+++ b/src/components/NormalHeader/index.vue
@@ -0,0 +1,55 @@
+<template>
+ <div class="w-screen h-16 bg-blue-400 flex justify-between items-center px-10 box-border">
+ <div class="return-container text-center cursor-pointer">
+ <div class="icon mx-auto">
+ <img src="@/assets/icons/return.png" class="width-img" alt="">
+ </div>
+ <div class="label text-white text-sm">杩斿洖</div>
+ </div>
+
+ <div class="user-container flex items-center">
+ <div class="avatar-container w-12 h-12 rounded-full overflow-hidden mr-3">
+ <div class="avatar-content">
+ <img src="@/assets/image/avatar/avatar.png" class="avatar-img" alt="">
+ </div>
+ <!-- <div class="avatar-content" :style="{ backgroundColor: getColor }">
+ <div class="name text-xl font-bold text-white">寮�</div>
+ </div> -->
+ </div>
+ <div class="user-name text-white">娴嬭瘯娴嬭瘯娴嬭瘯</div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import randomColor from '@/utils/randomColor.js';
+
+const getColor = computed(() => {
+ return randomColor();
+});
+</script>
+
+<style lang="scss" scoped>
+.return-container {
+ width: 50px;
+
+ .icon {
+ width: 30px;
+ }
+}
+
+.avatar-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.avatar-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 725e29e..eaa2e50 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,8 +5,9 @@
const routes = [
{
path: '/',
- redirect: '/index'
+ redirect: '/exam-list'
},
+
{
path: '/',
component: Layout,
@@ -23,7 +24,17 @@
},
]
},
-
+
+ // 鑰冭瘯鍒楄〃
+ {
+ path: '/exam-list',
+ component: () => import('@/views/exam-list/index.vue'),
+ },
+ // 鑰冭瘯椤甸潰
+ {
+ path: '/exam',
+ component: () => import('@/views/exam/index.vue'),
+ },
];
const router = createRouter({
diff --git a/src/views/exam-list/index.vue b/src/views/exam-list/index.vue
new file mode 100644
index 0000000..b065285
--- /dev/null
+++ b/src/views/exam-list/index.vue
@@ -0,0 +1,18 @@
+<template>
+ <div class="exam-list-container w-screen h-screen bg-slate-50 flex flex-col">
+ <NormalHeader class="shrink-0"></NormalHeader>
+
+ <div class="list-container grow-1">
+
+ </div>
+ </div>
+</template>
+
+<script setup>
+import NormalHeader from '@/components/NormalHeader/index.vue';
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
new file mode 100644
index 0000000..07db6ab
--- /dev/null
+++ b/src/views/exam/index.vue
@@ -0,0 +1,13 @@
+<template>
+ <div>
+
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/home/components/user-panel/index.vue b/src/views/home/components/user-panel/index.vue
index 443a832..03c2294 100644
--- a/src/views/home/components/user-panel/index.vue
+++ b/src/views/home/components/user-panel/index.vue
@@ -65,7 +65,7 @@
const getColor = computed(() => {
return randomColor();
-})
+});
</script>
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index c9a2c10..3a06d1c 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -6,7 +6,7 @@
</el-row>
<el-row :gutter="20" class="mb-2">
<el-col :span="3" v-for="item in menu.categroy">
- <div class="menu-item cursor-pointer">
+ <div class="menu-item cursor-pointer" @click="testClick(item)">
<el-card shadow="hover" class="menu-card">
<div class="item-icon mx-auto">
<img :src="item.iconPath" class="icon-img" alt="">
@@ -25,6 +25,9 @@
<script setup>
import { ref } from 'vue';
+import {useRouter} from 'vue-router';
+
+const router = useRouter();
const menuList = ref([
{
@@ -54,6 +57,10 @@
]
},
]);
+
+const testClick = (item) => {
+ router.push('/exam');
+}
</script>
<style lang="scss" scoped>
--
Gitblit v1.8.0