feat:概述

ZhangXianQiang

2024-06-03 ca6099d0e74026d71d2ae091b5541411ec254043

feat:概述

 src/style.css

@@ -20,3 +20,4 @@
  width: 100%;
  display: block;
}


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

New file
@@ -0,0 +1,70 @@
<template>
  <el-card class="card">
    <el-row class="mb-5">
      <el-col>
        <div class="title text-lg font-bold">概览</div>
      </el-col>
    </el-row>

    <el-row class="mb-5" :gutter="20">

      <el-col :span="6">
        <div class="data-item flex flex-col items-center">
          <div class="data-num">
            <span class="text-num">123</span>
            <span>小时</span>
          </div>
          <div class="data-label">已学小时</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="data-item flex flex-col items-center">
          <div class="data-num">
            <span class="text-num">123</span>
            <span>节</span>
          </div>
          <div class="data-label">本周课程</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="data-item flex flex-col items-center">
          <div class="data-num">
            <span class="text-num">123</span>
            <span>节</span>
          </div>
          <div class="data-label">本周已学课程</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="data-item flex flex-col items-center">
          <div class="data-num">
            <span class="text-num">123</span>
            <span>分</span>
          </div>
          <div class="data-label">考试平均分</div>
        </div>
      </el-col>
    </el-row>

    <el-row class="mb-5" :gutter="20">
      <el-col>

      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.data-num {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.text-num {
  color: var(--el-color-primary);
}
</style>

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

New file
@@ -0,0 +1,29 @@
<template>
  <div class="info-container">
    <div class="info-content">
      <div class="info-wrapper">
        <InfoData></InfoData>
      </div>
    </div>
  </div>
</template>

<script setup>
import InfoData from '../info-data/index.vue';
</script>

<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 left-10 top-5 max-w-sm">
  <div class="user-panel sticky max-w-sm min-w-96">
    <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,15 +1,24 @@
<template>
  <UserPanel></UserPanel>
  <div class="test"></div>
  <div class="home-page container mx-auto flex justify-between py-6">
    <UserPanel class="flex-shrink-0 mr-5"></UserPanel>
    <InfoPanel class="flex-shrink-0 grow"></InfoPanel>
  </div>
</template>

<script setup>
import UserPanel from './components/user-panel/index.vue';
import InfoPanel from './components/info-panel/index.vue';

</script>

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

@media (min-width: 1836px) {
  .container {
    max-width: 1724px;
  }
}
</style>