top

src/style/index.scss

@@ -127,4 +127,7 @@ body,
   }
 }
 
+.flex {
+  flex-wrap: unset !important;
+}
 

src/views/study/home/index.vue

@@ -109,176 +109,43 @@
             <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
               <div class="relative flex items-center text-xl font-bold">
                 <i class="fas fa-trophy mr-2"></i>
-                学生TOP排名
+                历史刷题榜单
                 <div class="absolute right-2 ml-auto flex">
-                  <q-select
-                    class="select ml-4 w-[120px]"
-                    rounded
-                    standout="focus"
-                    v-model="state.query.p1"
-                    :options="[
-                      { label: '综合排名', value: '综合排名' },
-                      { label: '语文', value: '语文' },
-                      { label: '数学', value: '数学' },
-                      { label: '英语', value: '英语' },
-                    ]"
-                    :dense="true"
-                  >
-                  </q-select>
-                </div>
-                <!--                <div-->
-                <!--                  class="ml-auto flex space-x-2 text-xs font-normal text-gray-800"-->
-                <!--                >-->
-                <!--                  <select-->
-                <!--                    class="focus:ring-subject-color/50 appearance-none rounded-lg bg-gray-100 py-1.5 pr-8 pl-3 text-sm focus:ring-2 focus:outline-none"-->
-                <!--                  >-->
-                <!--                    <option value="all">综合排名</option>-->
-                <!--                    <option value="chinese">语文</option>-->
-                <!--                    <option value="math">数学</option>-->
-                <!--                    <option value="english">英语</option>-->
-                <!--                  </select>-->
-                <!--                </div>-->
-              </div>
-            </div>
-            <div class="flex-1 overflow-y-auto p-4">
-              <div class="space-y-2">
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-orange-600 text-sm font-bold text-white"
-                  >
-                    1
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1012/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">张明</div>
-                    <div class="text-xs text-gray-500">初一(1)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      98分
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-orange-500 text-sm font-bold text-white"
-                  >
-                    2
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1027/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
+                  <div class="date-month">
+                    <q-input
+                      class="date w-[250px]"
+                      rounded
+                      standout="focus"
+                      :dense="true"
+                      v-model="state.query.p1"
+                      readonly
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="white"
+                          @click="ref_month.handleOpen()"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                    <el-date-picker
+                      ref="ref_month"
+                      v-model="state.query.p1"
+                      type="month"
+                      value-format="YYYY-MM"
                     />
                   </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">李华</div>
-                    <div class="text-xs text-gray-500">初一(2)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      96分
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-orange-400 text-sm font-bold text-white"
-                  >
-                    3
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1025/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">王芳</div>
-                    <div class="text-xs text-gray-500">初一(1)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      94分
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-gray-400 text-sm font-bold text-white"
-                  >
-                    4
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1074/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">赵伟</div>
-                    <div class="text-xs text-gray-500">初一(3)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      92分
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-gray-400 text-sm font-bold text-white"
-                  >
-                    5
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1062/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">陈静</div>
-                    <div class="text-xs text-gray-500">初一(2)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      90分
-                    </div>
-                  </div>
                 </div>
               </div>
             </div>
+            <div class="flex-1 overflow-hidden p-4">
+              <topCom
+                :data="state.topHistory.data"
+                :user="state.topHistory.user"
+              />
+            </div>
           </div>
           <div
             class="col-span-1 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
@@ -286,175 +153,11 @@
             <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
               <div class="relative flex items-center text-xl font-bold">
                 <i class="fas fa-trophy mr-2"></i>
-                学生TOP排名
-                <div class="absolute right-2 ml-auto flex">
-                  <q-select
-                    class="select ml-4 w-[120px]"
-                    rounded
-                    standout="focus"
-                    v-model="state.query.p2"
-                    :options="[
-                      { label: '综合排名', value: '综合排名' },
-                      { label: '语文', value: '语文' },
-                      { label: '数学', value: '数学' },
-                      { label: '英语', value: '英语' },
-                    ]"
-                    :dense="true"
-                  >
-                  </q-select>
-                </div>
-                <!--                <div-->
-                <!--                  class="ml-auto flex space-x-2 text-xs font-normal text-gray-800"-->
-                <!--                >-->
-                <!--                  <select-->
-                <!--                    class="focus:ring-subject-color/50 appearance-none rounded-lg bg-gray-100 py-1.5 pr-8 pl-3 text-sm focus:ring-2 focus:outline-none"-->
-                <!--                  >-->
-                <!--                    <option value="all">综合排名</option>-->
-                <!--                    <option value="chinese">语文</option>-->
-                <!--                    <option value="math">数学</option>-->
-                <!--                    <option value="english">英语</option>-->
-                <!--                  </select>-->
-                <!--                </div>-->
+                本月刷题榜单
               </div>
             </div>
-            <div class="flex-1 overflow-y-auto p-4">
-              <div class="space-y-2">
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-orange-600 text-sm font-bold text-white"
-                  >
-                    1
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1012/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">张明</div>
-                    <div class="text-xs text-gray-500">初一(1)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      98分
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-orange-500 text-sm font-bold text-white"
-                  >
-                    2
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1027/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">李华</div>
-                    <div class="text-xs text-gray-500">初一(2)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      96分
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-orange-400 text-sm font-bold text-white"
-                  >
-                    3
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1025/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">王芳</div>
-                    <div class="text-xs text-gray-500">初一(1)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      94分
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-gray-400 text-sm font-bold text-white"
-                  >
-                    4
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1074/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">赵伟</div>
-                    <div class="text-xs text-gray-500">初一(3)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      92分
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
-                >
-                  <div
-                    class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-gray-400 text-sm font-bold text-white"
-                  >
-                    5
-                  </div>
-                  <div
-                    class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200"
-                  >
-                    <img
-                      src="https://picsum.photos/id/1062/100/100"
-                      alt="学生头像"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate font-medium text-gray-800">陈静</div>
-                    <div class="text-xs text-gray-500">初一(2)班</div>
-                  </div>
-                  <div class="min-w-[50px] text-right">
-                    <div class="text-sm font-bold text-[var(--czr-main-color)]">
-                      90分
-                    </div>
-                  </div>
-                </div>
-              </div>
+            <div class="flex-1 overflow-hidden p-4">
+              <topCom :data="state.topNow.data" :user="state.topNow.user" />
             </div>
           </div>
         </div>
@@ -623,16 +326,26 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import StudyLayout from '@/views/study/components/study-layout.vue'
+import topCom from './top.vue'
+import { YM } from '@/utils/czr-util'
 
 const state: any = reactive({
   query: {
-    p1: '综合排名',
-    p2: '综合排名',
+    p1: YM(new Date()),
+  },
+  topHistory: {
+    data: [],
+    user: null,
+  },
+  topNow: {
+    data: [],
+    user: null,
   },
 })
-onMounted(() => {
+const ref_month = ref()
+const initTeacher = () => {
   // 教师简介轮播功能（单个老师轮播）
   const carousel = document.getElementById('teacherCarousel')
   const slides = document.querySelectorAll('.teacher-slide')
@@ -647,7 +360,7 @@ onMounted(() => {
   let slideInterval
 
   // 初始化轮播
-  function initCarousel() {
+  const initCarousel = () => {
     slides.forEach((slide, index) => {
       if (index !== currentIndex) {
         slide.classList.remove('active', 'prev', 'next')
@@ -658,7 +371,7 @@ onMounted(() => {
   }
 
   // 显示指定索引的幻灯片
-  function showSlide(index) {
+  const showSlide = (index) => {
     // 移除所有幻灯片的类
     slides.forEach((slide) => {
       slide.classList.remove('active', 'prev', 'next')
@@ -685,7 +398,7 @@ onMounted(() => {
   }
 
   // 自动轮播函数
-  function startSlideInterval() {
+  const startSlideInterval = () => {
     slideInterval = setInterval(() => {
       const nextIndex = (currentIndex + 1) % totalSlides
       showSlide(nextIndex)
@@ -723,13 +436,49 @@ onMounted(() => {
   carousel.addEventListener('mouseleave', startSlideInterval)
 
   // 重置轮播定时器
-  function resetSlideInterval() {
+  const resetSlideInterval = () => {
     clearInterval(slideInterval)
     startSlideInterval()
   }
 
   // 初始化轮播
   initCarousel()
+}
+const initTopHistory = () => {
+  const arr: any = []
+  for (let i = 0; i < 10; i++) {
+    arr.push({
+      name: i === 3 ? '当前学生' : '学生_' + i,
+      total: 100 - i,
+      isUser: i === 3,
+    })
+  }
+  state.topHistory = {
+    data: arr,
+    user: null,
+  }
+}
+const initTopNow = () => {
+  const arr: any = []
+  for (let i = 0; i < 8; i++) {
+    arr.push({
+      name: '学生_' + i,
+      total: 100 - i,
+    })
+  }
+  state.topNow = {
+    data: arr,
+    user: {
+      name: '当前学生',
+      total: 50,
+      rank: 23,
+    },
+  }
+}
+onMounted(() => {
+  initTeacher()
+  initTopHistory()
+  initTopNow()
 })
 </script>
 
@@ -846,4 +595,22 @@ onMounted(() => {
     background: rgba(0, 0, 0, 0.1);
   }
 }
+:deep(.focus) {
+  background: rgba(0, 0, 0, 0.1) !important;
+}
+:deep(.date) {
+  .q-placeholder {
+    color: #ffffff;
+  }
+}
+:deep(.date-month) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  .el-input {
+    position: absolute;
+    z-index: -1;
+  }
+}
 </style>

src/views/study/home/top.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="flex h-full w-full flex-col">
+    <div class="flex flex-1 flex-col gap-2 overflow-y-auto">
+      <template v-for="(item, index) in dataCpt">
+        <div
+          class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
+        >
+          <div
+            class="mr-3 flex h-7 w-7 items-center justify-center rounded-full text-sm font-bold text-white"
+            :class="{
+              'bg-[var(--czr-main-color)]': index === 0,
+              'bg-[var(--czr-main-color)]/80': index === 1,
+              'bg-[var(--czr-main-color)]/60': index === 2,
+              'bg-gray-400': index > 2,
+            }"
+          >
+            {{ index + 1 }}
+          </div>
+          <div class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200">
+            <img
+              src="https://picsum.photos/id/1012/100/100"
+              alt="学生头像"
+              class="h-full w-full object-cover"
+            />
+          </div>
+          <div class="min-w-0 flex-1">
+            <div
+              class="truncate font-medium"
+              :class="{
+                'text-gray-800': !item.isUser,
+                'text-[var(--czr-main-color)]': item.isUser,
+              }"
+            >
+              {{ item.name }}
+            </div>
+            <!--            <div class="text-xs text-gray-500">初一(1)班</div>-->
+          </div>
+          <div class="min-w-[50px] text-right">
+            <div
+              class="text-sm font-bold"
+              :class="{
+                'text-gray-500': !item.isUser,
+                'text-[var(--czr-main-color)]': item.isUser,
+              }"
+            >
+              {{ item.total }}题
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+    <template v-if="user">
+      <div class="my-1 flex w-full justify-center">
+        <i class="fa-solid fa-ellipsis text-2xl text-gray-400" />
+      </div>
+      <div
+        class="flex items-center rounded-lg p-2 transition-colors hover:bg-gray-50"
+      >
+        <div
+          class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-gray-400 text-sm font-bold text-white"
+        >
+          {{ user?.rank }}
+        </div>
+        <div class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200">
+          <img
+            src="https://picsum.photos/id/1012/100/100"
+            alt="学生头像"
+            class="h-full w-full object-cover"
+          />
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="truncate font-medium text-[var(--czr-main-color)]">
+            {{ user?.name }}
+          </div>
+          <!--            <div class="text-xs text-gray-500">初一(1)班</div>-->
+        </div>
+        <div class="min-w-[50px] text-right">
+          <div class="text-sm font-bold text-[var(--czr-main-color)]">
+            {{ user?.total }}题
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+
+const props = defineProps({
+  data: { default: () => [] },
+  user: { default: null },
+})
+const state: any = reactive({})
+const dataCpt = computed(() => {
+  if (props.user) {
+    const arr: any = props.data?.slice(0, 8)
+    return arr
+  } else {
+    return props.data
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>