feat:封装通用header

ZhangXianQiang

2024-06-04 1072790993afa47934b8d72cb8b6f113f1ef6930

feat:封装通用header

 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']
  }

 src/assets/icons/return.png

 src/components/ExamInfoDialog/index.vue

New file
@@ -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>

 src/components/NormalHeader/index.vue

New file
@@ -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>

 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({

 src/views/exam-list/index.vue

New file
@@ -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>

 src/views/exam/index.vue

New file
@@ -0,0 +1,13 @@
<template>
  <div>

  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

 src/views/home/components/user-panel/index.vue

@@ -65,7 +65,7 @@

const getColor = computed(() => {
  return randomColor();
})
});

</script>


 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>