feat:课表考试信息

ZhangXianQiang

2024-06-04 d54ef2a3463e0129909741bf7fb0ac355bebe54d

feat:课表考试信息

 components.d.ts

@@ -13,6 +13,8 @@
    ElCol: typeof import('element-plus/es')['ElCol']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    Header: typeof import('./src/components/Header/index.vue')['default']
    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']

 src/views/home/components/info-data/index.vue

@@ -46,15 +46,63 @@
      </el-col>
    </el-row>

    <el-row class="mb-5" :gutter="20">
      <el-col>
    <el-row class="mb-5" :gutter="40">
      <el-col :span="12">
        <div class="title text-lg font-bold">我的课表</div>
        <div class="table-container">
          <el-table :data="classList" height="500">
            <el-table-column prop="date" label="课程时间"/>
            <el-table-column prop="name" label="课程名称" />
          </el-table>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="title text-lg font-bold">我的考试</div>
        <div class="table-container">
          <el-table :data="classList" height="500">
            <el-table-column prop="date" label="课程时间"/>
            <el-table-column prop="name" label="课程名称" />
          </el-table>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import {ref} from 'vue';

 const classList = ref([
  {
    date: '2021-08-01',
    name: '语文'
  },
  {
    date: '2021-08-01',
    name: '语文'
  },
  {
    date: '2021-08-01',
    name: '语文'
  },
  {
    date: '2021-08-01',
    name: '语文'
  },
  {
    date: '2021-08-01',
    name: '语文'
  },
  {
    date: '2021-08-01',
    name: '语文'
  },
  {
    date: '2021-08-01',
    name: '语文'
  },
 ])

</script>

@@ -64,6 +112,7 @@
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.text-num {
  color: var(--el-color-primary);
}

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

@@ -14,16 +14,4 @@

<style lang="scss" scoped>

.info-container {
  position: relative;
  .info-content {
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
  }
  .info-wrapper {
    width: 100%;
  }
}
</style>

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

@@ -1,5 +1,5 @@
<template>
  <div class="user-panel sticky max-w-sm min-w-96">
  <div class="user-panel max-w-sm min-w-96 h-fit">
    <el-card class="card">
      <div class="panel-content flex flex-col items-center">
        <div class="avatar-container w-40 h-40 rounded-full overflow-hidden">

 src/views/home/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="home-page container mx-auto flex justify-between py-6">
    <UserPanel class="flex-shrink-0 mr-5"></UserPanel>
    <UserPanel class="flex-shrink-0 mr-5 sticky top-6"></UserPanel>
    <InfoPanel class="flex-shrink-0 grow"></InfoPanel>
  </div>
</template>
@@ -12,7 +12,7 @@
</script>

<style lang="scss" scoped>
::v-deep .card {
:deep(.card) {
  border-radius: 30px;
}

@@ -21,4 +21,5 @@
    max-width: 1724px;
  }
}

</style>