计划

src/style/czr.scss

@@ -1,6 +1,20 @@
 :root {
   --czr-main-color: rgba(235, 92, 32, 1);
   --czr-main-color-rgb: 235, 92, 32;
+  --czr-main-sub-color: rgba(235, 92, 32, 1);
+  --czr-main-sub-color-rgb: 235, 92, 32;
+  --czr-math-color: rgba(24, 90, 86, 1);
+  --czr-math-color-rgb: 24, 90, 86;
+  --czr-math-sub-color: rgba(251, 137, 25, 1);
+  --czr-math-sub-color-rgb: 251, 137, 25;
+  --czr-chinese-color: rgba(211, 73, 71, 1);
+  --czr-chinese-color-rgb: 211, 73, 71;
+  --czr-chinese-sub-color: rgba(2, 50, 112, 1);
+  --czr-chinese-sub-color-rgb: 2, 50, 112;
+  --czr-english-color: rgba(186, 91, 184, 1);
+  --czr-english-color-rgb: 186, 91, 184;
+  --czr-english-sub-color: rgba(4, 35, 65, 1);
+  --czr-english-sub-color-rgb: 4, 35, 65;
 }
 
 .__disabled {

src/views/study/chinese/question/index.vue

@@ -128,30 +128,14 @@
                 </template>
               </q-input>
               <q-select
-                class="select ml-4 w-[120px]"
+                class="select ml-4 w-[100px]"
                 rounded
                 standout="focus"
                 v-model="state.query.p2"
-                :options="['全部题', '错题', '正确提']"
+                :options="['全部题', '错题', '正确题']"
                 :dense="true"
               >
               </q-select>
-              <!--              <q-select-->
-              <!--                class="select ml-4 w-[120px]"-->
-              <!--                rounded-->
-              <!--                standout="focus"-->
-              <!--                v-model="state.query.p1"-->
-              <!--                :options="['近三个月', '本学期', '上学期', '本年度', '全部']"-->
-              <!--                :dense="true"-->
-              <!--              >-->
-              <!--              </q-select>-->
-              <!--              <q-toggle-->
-              <!--                class="ml-4 text-sm font-normal"-->
-              <!--                v-model="state.query.p3"-->
-              <!--                label="只看错题"-->
-              <!--                :dense="true"-->
-              <!--                color="var(&#45;&#45;czr-main-color)"-->
-              <!--              />-->
             </div>
           </div>
         </div>
@@ -577,9 +561,7 @@ const state: any = reactive({
   selected: null,
   treeText: '',
   query: {
-    p1: '近三个月',
-    p2: '全部题',
-    p3: true,
+    p2: '错题',
     date: {},
   },
   showVideo: false,

src/views/study/home/index.vue

@@ -1,99 +1,128 @@
 <template>
   <StudyLayout>
     <div class="grid h-full w-full grid-cols-3 gap-6 overflow-hidden p-6">
-      <div
-        class="col-span-1 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
-      >
-        <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
-          <div class="flex items-center text-xl font-bold">
-            <i class="fas fa-calendar-alt mr-2"></i>
-            后期学习计划
+      <div class="col-span-1 flex flex-col gap-6 overflow-hidden px-0.5">
+        <div
+          class="flex flex-col overflow-hidden rounded-xl bg-white shadow-md"
+        >
+          <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
+            <div class="flex items-center text-xl font-bold">
+              <i class="fas fa-calendar-alt mr-2"></i>
+              今日学习计划
+            </div>
           </div>
-        </div>
-        <div class="flex-1 overflow-y-auto p-4">
-          <div class="space-y-4">
-            <div class="rounded-lg border-l-4 border-orange-500 bg-gray-50 p-3">
-              <div class="mb-1 flex items-center justify-between">
-                <div class="text-base font-semibold">周一</div>
-                <span
-                  class="rounded-full bg-orange-500/10 px-2 py-0.5 text-xs text-orange-500"
-                  >语文</span
-                >
+          <div class="flex flex-col gap-2 p-4">
+            <div
+              class="flex items-center rounded-lg border-l-4 border-[var(--czr-chinese-color)] bg-gray-50 p-3"
+            >
+              <div
+                class="mr-2 rounded-full bg-[var(--czr-chinese-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-chinese-color)]"
+              >
+                语文
               </div>
-              <div class="text-sm text-gray-600">
-                完成《古诗三首》背诵和理解，完成练习册P12-15页
+              <div class="text-sm text-gray-600">8:00-10:00</div>
+              <div
+                class="text-subject-color ml-auto flex items-center text-xs hover:underline"
+              >
+                <i class="fas fa-file-alt mr-1"></i>
+                查看详情
               </div>
             </div>
-            <div class="rounded-lg border-l-4 border-blue-500 bg-gray-50 p-3">
-              <div class="mb-1 flex items-center justify-between">
-                <div class="text-base font-semibold">周二</div>
-                <span
-                  class="rounded-full bg-blue-500/10 px-2 py-0.5 text-xs text-blue-500"
-                  >数学</span
-                >
-              </div>
-              <div class="text-sm text-gray-600">
-                完成一元一次方程习题，练习册P20-25页
+            <div
+              class="flex items-center rounded-lg border-l-4 border-[var(--czr-math-color)] bg-gray-50 p-3"
+            >
+              <div
+                class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
+              >
+                数学
               </div>
+              <div class="text-sm text-gray-600">12:00-14:00</div>
             </div>
-            <div class="rounded-lg border-l-4 border-green-500 bg-gray-50 p-3">
-              <div class="mb-1 flex items-center justify-between">
-                <div class="text-base font-semibold">周三</div>
-                <span
-                  class="rounded-full bg-green-500/10 px-2 py-0.5 text-xs text-green-500"
-                  >英语</span
-                >
-              </div>
-              <div class="text-sm text-gray-600">
-                背诵Unit 3单词，完成阅读理解练习2篇
+            <div
+              class="flex items-center rounded-lg border-l-4 border-[var(--czr-english-color)] bg-gray-50 p-3"
+            >
+              <div
+                class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
+              >
+                英语
               </div>
+              <div class="text-sm text-gray-600">16:00-18:00</div>
             </div>
-            <div class="rounded-lg border-l-4 border-purple-500 bg-gray-50 p-3">
-              <div class="mb-1 flex items-center justify-between">
-                <div class="text-base font-semibold">周四</div>
-                <span
-                  class="rounded-full bg-purple-500/10 px-2 py-0.5 text-xs text-purple-500"
-                  >综合</span
-                >
-              </div>
-              <div class="text-sm text-gray-600">
-                复习本周所学内容，整理错题本
+          </div>
+        </div>
+        <div
+          class="flex flex-1 flex-col overflow-hidden rounded-xl bg-white shadow-md"
+        >
+          <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-calendar-alt mr-2"></i>
+              学习计划
+              <div class="absolute right-2 ml-auto flex">
+                <div class="date-month">
+                  <q-input
+                    class="date w-[130px]"
+                    rounded
+                    standout="focus"
+                    :dense="true"
+                    v-model="state.query.p2"
+                    readonly
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="white"
+                        @click="ref_date.handleOpen()"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                  <el-date-picker
+                    ref="ref_date"
+                    v-model="state.query.p2"
+                    value-format="YYYY-MM-DD"
+                  />
+                </div>
               </div>
             </div>
-            <div class="rounded-lg border-l-4 border-yellow-500 bg-gray-50 p-3">
+          </div>
+          <div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
+            <div
+              class="flex flex-col gap-2 rounded-lg border-l-4 border-orange-500 bg-gray-50 p-3"
+            >
               <div class="mb-1 flex items-center justify-between">
-                <div class="text-base font-semibold">周五</div>
-                <span
-                  class="rounded-full bg-yellow-500/10 px-2 py-0.5 text-xs text-yellow-500"
-                  >测试</span
-                >
-              </div>
-              <div class="text-sm text-gray-600">
-                完成本周小测试，检查学习效果
+                <div class="text-base font-semibold">周一</div>
+                <span class="text-sm text-gray-600">2023-06-11</span>
               </div>
-            </div>
-            <div class="rounded-lg border-l-4 border-red-500 bg-gray-50 p-3">
-              <div class="mb-1 flex items-center justify-between">
-                <div class="text-base font-semibold">周六</div>
-                <span
-                  class="rounded-full bg-red-500/10 px-2 py-0.5 text-xs text-red-500"
-                  >测试</span
+              <div class="flex items-center">
+                <div
+                  class="mr-2 rounded-full bg-[var(--czr-chinese-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-chinese-color)]"
                 >
+                  语文
+                </div>
+                <div class="text-sm text-gray-600">
+                  完成《古诗三首》背诵和理解，完成练习册P12-15页
+                </div>
               </div>
-              <div class="text-sm text-gray-600">
-                完成本周小测试，检查学习效果
-              </div>
-            </div>
-            <div class="rounded-lg border-l-4 border-cyan-500 bg-gray-50 p-3">
-              <div class="mb-1 flex items-center justify-between">
-                <div class="text-base font-semibold">周日</div>
-                <span
-                  class="rounded-full bg-cyan-500/10 px-2 py-0.5 text-xs text-cyan-500"
-                  >测试</span
+              <div class="flex items-center">
+                <div
+                  class="mr-2 rounded-full bg-[var(--czr-english-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-english-color)]"
                 >
+                  英语
+                </div>
+                <div class="text-sm text-gray-600">
+                  背诵Unit 3单词，完成阅读理解练习2篇
+                </div>
               </div>
-              <div class="text-sm text-gray-600">
-                完成本周小测试，检查学习效果
+              <div class="flex items-center">
+                <div
+                  class="mr-2 rounded-full bg-[var(--czr-math-color)]/10 px-2 py-0.5 text-xs text-[var(--czr-math-color)]"
+                >
+                  数学
+                </div>
+                <div class="text-sm text-gray-600">
+                  完成一元一次方程习题，练习册P20-25页
+                </div>
               </div>
             </div>
           </div>
@@ -113,7 +142,7 @@
                 <div class="absolute right-2 ml-auto flex">
                   <div class="date-month">
                     <q-input
-                      class="date w-[250px]"
+                      class="date w-[120px]"
                       rounded
                       standout="focus"
                       :dense="true"
@@ -334,6 +363,7 @@ import { YM } from '@/utils/czr-util'
 const state: any = reactive({
   query: {
     p1: YM(new Date()),
+    p2: '2023-06-11',
   },
   topHistory: {
     data: [],
@@ -345,6 +375,7 @@ const state: any = reactive({
   },
 })
 const ref_month = ref()
+const ref_date = ref()
 const initTeacher = () => {
   // 教师简介轮播功能（单个老师轮播）
   const carousel = document.getElementById('teacherCarousel')