切换主题

src/views/study/chinese/index.vue

@@ -131,45 +131,77 @@
           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="flex items-center text-xl font-bold">
+            <div class="relative flex items-center text-xl font-bold">
               <i class="fas fa-calendar-alt mr-2"></i>
               考试情况统计
-              <div
-                class="ml-auto flex space-x-2 text-xs font-normal text-gray-800"
-              >
-                <div class="relative">
-                  <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="recent">最近三个月</option>
-                    <option value="this_term">本学期</option>
-                    <option value="last_term">上学期</option>
-                    <option value="this_year">本年度</option>
-                    <option value="all">全部</option>
-                  </select>
-                  <div
-                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"
-                  >
-                    <i class="fas fa-chevron-down text-xs"></i>
-                  </div>
-                </div>
-                <div class="relative">
-                  <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="weekly">周测</option>
-                    <option value="monthly">月考</option>
-                    <option value="midterm">期中考试</option>
-                    <option value="final">期末考试</option>
-                  </select>
-                  <div
-                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"
-                  >
-                    <i class="fas fa-chevron-down text-xs"></i>
-                  </div>
-                </div>
+              <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: '本年度' },
+                    { label: '全部', value: '全部' },
+                  ]"
+                  :dense="true"
+                >
+                </q-select>
+                <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: '期中考试' },
+                    { label: '期末考试', value: '期末考试' },
+                  ]"
+                  :dense="true"
+                >
+                </q-select>
               </div>
+              <!--              <div-->
+              <!--                class="ml-auto flex space-x-2 text-xs font-normal text-gray-800"-->
+              <!--              >-->
+              <!--                <div class="relative">-->
+              <!--                  <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="recent">最近三个月</option>-->
+              <!--                    <option value="this_term">本学期</option>-->
+              <!--                    <option value="last_term">上学期</option>-->
+              <!--                    <option value="this_year">本年度</option>-->
+              <!--                    <option value="all">全部</option>-->
+              <!--                  </select>-->
+              <!--                  <div-->
+              <!--                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"-->
+              <!--                  >-->
+              <!--                    <i class="fas fa-chevron-down text-xs"></i>-->
+              <!--                  </div>-->
+              <!--                </div>-->
+              <!--                <div class="relative">-->
+              <!--                  <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="weekly">周测</option>-->
+              <!--                    <option value="monthly">月考</option>-->
+              <!--                    <option value="midterm">期中考试</option>-->
+              <!--                    <option value="final">期末考试</option>-->
+              <!--                  </select>-->
+              <!--                  <div-->
+              <!--                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"-->
+              <!--                  >-->
+              <!--                    <i class="fas fa-chevron-down text-xs"></i>-->
+              <!--                  </div>-->
+              <!--                </div>-->
+              <!--              </div>-->
             </div>
           </div>
           <!-- 时间轴布局的考试记录 -->
@@ -450,6 +482,10 @@ import chart3 from './chart-3.vue'
 
 const state: any = reactive({
   type: 1,
+  query: {
+    p1: '近三个月',
+    p2: '全部类型',
+  },
 })
 onMounted(() => {})
 </script>
@@ -542,4 +578,15 @@ onMounted(() => {})
   z-index: 10;
   position: relative;
 }
+:deep(.select) {
+  .ellipsis {
+    color: #ffffff;
+  }
+  .q-select__dropdown-icon {
+    color: #ffffff;
+  }
+  .focus {
+    background: rgba(0, 0, 0, 0.1);
+  }
+}
 </style>

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

@@ -38,7 +38,7 @@
             <!--            <i-->
             <!--              class="fas fa-search absolute top-1/2 left-3 -translate-y-1/2 transform text-sm text-[#6b7280]"-->
             <!--            ></i>-->
-            <div class="quasar-css">
+            <div class="">
               <q-input
                 v-model="state.treeText"
                 outlined
@@ -60,7 +60,7 @@
             </div>
           </div>
         </div>
-        <div class="quasar-css overflow-y-auto p-2">
+        <div class="overflow-y-auto p-2">
           <q-tree
             ref="ref_tree"
             :nodes="treeData"
@@ -92,7 +92,7 @@
                 treeMapCpt.get(state.selected).total
               }}题）
             </span>
-            <div class="quasar-css absolute right-2 ml-auto flex">
+            <div class="absolute right-2 ml-auto flex">
               <q-input
                 class="w-[140px]"
                 v-model="state.query.p1"
@@ -115,8 +115,9 @@
                 </template>
               </q-input>
               <q-select
-                class="select ml-4 w-[100px]"
-                borderless
+                class="select ml-4 w-[120px]"
+                rounded
+                standout="focus"
                 v-model="state.query.p2"
                 :options="[
                   { label: '全部题型', value: '全部题型' },
@@ -724,6 +725,9 @@ $primary: red;
   .q-select__dropdown-icon {
     color: #ffffff;
   }
+  .focus {
+    background: rgba(0, 0, 0, 0.1);
+  }
 }
 
 :deep(.q-tree__node--selected),

src/views/study/home/index.vue

@@ -107,21 +107,37 @@
             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">
+              <div class="relative flex items-center text-xl font-bold">
                 <i class="fas fa-trophy mr-2"></i>
                 学生TOP排名
-                <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"
+                <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"
                   >
-                    <option value="all">综合排名</option>
-                    <option value="chinese">语文</option>
-                    <option value="math">数学</option>
-                    <option value="english">英语</option>
-                  </select>
+                  </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">
@@ -268,21 +284,37 @@
             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">
+              <div class="relative flex items-center text-xl font-bold">
                 <i class="fas fa-trophy mr-2"></i>
                 学生TOP排名
-                <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"
+                <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"
                   >
-                    <option value="all">综合排名</option>
-                    <option value="chinese">语文</option>
-                    <option value="math">数学</option>
-                    <option value="english">英语</option>
-                  </select>
+                  </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">
@@ -594,7 +626,12 @@
 import { onMounted, reactive } from 'vue'
 import StudyLayout from '@/views/study/components/study-layout.vue'
 
-const state: any = reactive({})
+const state: any = reactive({
+  query: {
+    p1: '综合排名',
+    p2: '综合排名',
+  },
+})
 onMounted(() => {
   // 教师简介轮播功能（单个老师轮播）
   const carousel = document.getElementById('teacherCarousel')
@@ -798,4 +835,15 @@ onMounted(() => {
   flex-grow: 1;
   text-align: left;
 }
+:deep(.select) {
+  .ellipsis {
+    color: #ffffff;
+  }
+  .q-select__dropdown-icon {
+    color: #ffffff;
+  }
+  .focus {
+    background: rgba(0, 0, 0, 0.1);
+  }
+}
 </style>