提交

components.d.ts

@@ -9,9 +9,16 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    BreadCrumb: typeof import('./src/components/BreadCrumb/index.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     NavHeader: typeof import('./src/components/NavHeader/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/BreadCrumb/index.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ArrowRight } from '@element-plus/icons-vue'
+import { useRoute, useRouter } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+
+const matchedList = computed(() => {
+  const res = []
+  route.matched.forEach((item) => {
+    if (item.meta.breadcrumb) {
+      res.push({
+        title: item.meta.title,
+      })
+    }
+  })
+  return res
+})
+
+const linkTo = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="flex justify-between items-center h-40px w-1200px m-auto mt-10px mb-5px">
+    <div class="flex items-center text-hex-5B5B5B text-12px">
+      <el-icon :size="15"><Location /></el-icon>
+      当前位置：首页 > 考试阅卷 >
+      <el-breadcrumb class="text-hex-5B5B5B text-12px tracking-wide" :separator-icon="ArrowRight">
+        <transition-group name="breadcrumb">
+          <el-breadcrumb-item v-for="({ name, title }) in matchedList" :key="name">
+            <span>&nbsp;{{ title }}</span>
+          </el-breadcrumb-item>
+        </transition-group>
+      </el-breadcrumb>
+    </div>
+<!--    <div class="btn cursor-pointer" @click="linkTo">-->
+<!--      返回-->
+<!--    </div>-->
+  </div>
+</template>
+
+<style scoped>
+.btn {
+  width: 90px;
+  height: 36px;
+  line-height: 36px;
+  background: #367acf;
+  border-radius: 4px;
+  color: #fff;
+  text-align: center;
+}
+</style>

src/main.ts

@@ -4,6 +4,7 @@ import routes from 'virtual:generated-pages'
 import App from './App.vue'
 import 'virtual:windi.css'
 import './styles/main.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/es/components/message/style/css'
 import 'element-plus/es/components/message-box/style/css'
 const app = createApp(App)
@@ -11,6 +12,9 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
 import { createPinia } from 'pinia'
 const store = createPinia()
 app.use(store)

src/pages/index.vue

@@ -1,7 +1,67 @@
-<script setup lang="ts">
-
+<route lang="json">
+  {
+    "meta":{
+      "title":"阅卷流程",
+      "breadcrumb": true
+    }
+  }
+</route>
+<script setup>
+let exam_time = $ref('')
+let exam_form = $ref('')
+let exam_type = $ref('')
+let form_list = [{
+  value:'1',
+  label:'线上考试'
+},{
+  value:'2',
+  label:'线下考试'
+}]
+let type_list = [{
+  value:'1',
+  label:'联考'
+},{
+  value:'2',
+  label:'月考'
+},{
+  value:'3',
+  label:'周考'
+}]
 </script>
-
 <template>
-  <NavHeader />
+  <NavHeader/>
+  <bread-crumb />
+  <div class="w-1200px m-auto">
+    <div class="flex items-center">
+      <el-date-picker
+        v-model="exam_time"
+        value-format="YYYY-MM-DD"
+        type="date"
+        placeholder="考试时间"
+        size="large"
+      />
+      <el-select class="ml-20px" v-model="exam_form" placeholder="考试形式" size="large">
+        <el-option label="全部" value="0"
+        />
+        <el-option
+          v-for="item in form_list"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-select class="ml-20px" v-model="exam_form" placeholder="考试类型" size="large">
+        <el-option label="全部" value="0"
+        />
+        <el-option
+          v-for="item in type_list"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
+
+  </div>
+
 </template>