Forráskód Böngészése

loading及弹框样式修改

liurongli 1 hónapja
szülő
commit
33c0d9bf0d

+ 11 - 0
src/components/ReportModule.vue

@@ -439,5 +439,16 @@ defineExpose({
       }
     }
   }
+  :deep(.el-loading-spinner) {
+    .el-loading-text {
+      font-size: 14px;
+      margin: 0 auto;
+    }
+    .circular {
+      width: 20px;
+      height: 20px;
+      color: #2e64fa;
+    }
+  }
 }
 </style>

+ 3 - 199
src/components/StudentList.vue

@@ -35,8 +35,8 @@
             :data="studentListData"
             border
             v-loading="tableLoading"
-            element-loading-text="加载中……"
-            element-loading-spinner="el-icon-loading"
+            element-loading-text="加载中..."
+            :element-loading-spinner="loadingSvgIcon"
             element-loading-background="#ffffff"
           >
             <el-table-column
@@ -153,6 +153,7 @@ import {
   GetExcelFileName,
   studentListStaticHeaderData,
 } from "@/utils/exportExcel";
+import {loadingSvgIcon} from "@/utils/common";
 import { useAnalysisStore } from "@/store/analysis";
 const analysisStore = useAnalysisStore();
 const filterObject = computed(() => analysisStore.filterObject || {});
@@ -189,7 +190,6 @@ const pageData = reactive({
 const exportLoading = ref(false);
 const isAssign = ref(0);
 const tableLoading = ref(true);
-
 const studentListData = computed(() => {
   const tableData = studentList.value;
   const { pageSize, pageNum } = pageData;
@@ -323,11 +323,6 @@ const ChangePage = (val) => {
   th.el-table__cell {
     border-right: 1px solid #e9e9e9;
   }
-
-  th.el-table__cell:nth-last-child(2) {
-    border-right: none; // 去掉最后一个单元格的右侧边框  最右边还有个滚动条的 所以要去掉倒数第二个
-  }
-
   .el-table th.el-table__cell.is-leaf,
   .el-table td.el-table__cell {
     border-bottom: 1px solid #e9e9e9;
@@ -335,109 +330,7 @@ const ChangePage = (val) => {
 
   .el-table {
     min-height: 463px;
-    border-radius: 8px;
     border: 0px;
-
-    .el-table__body-wrapper {
-      table {
-        tr {
-          td {
-            border-right: 1px solid #e9e9e9;
-          }
-
-          td:last-child,
-          th:last-child {
-            border-right: 0px solid green;
-          }
-        }
-      }
-    }
-
-    .el-table__empty-block {
-      min-height: 120px;
-      background-image: url("../assets/bg/table_no_data.png");
-      background-size: 64px 72px;
-      background-position: 50% 50%;
-      background-repeat: no-repeat;
-
-      .el-table__empty-text {
-        display: none;
-      }
-    }
-  }
-
-  //表格加载动画字体
-  .el-loading-spinner .el-loading-text {
-    font-size: 14px;
-  }
-
-  .el-loading-spinner i {
-    font-size: 20px;
-    color: #2e64fa;
-  }
-
-  //表格里的输入框 选择框样式覆盖
-  .el-input__inner {
-    height: 36px !important;
-    line-height: 36px !important;
-  }
-
-  // 下拉选择框 中间箭头上下居中
-  .el-select .el-input .el-select__caret {
-    height: 36px;
-  }
-
-  // 下拉选择框 中间箭头上下居中
-  .el-input__icon {
-    line-height: 36px;
-  }
-
-  //去掉滚动条后的表格整体宽度
-  .el-table__body {
-    width: 100% !important;
-  }
-  //标题栏背景色
-  .el-table tr th.el-table__cell {
-    // background-color: #F0F2F5;
-    background-color: #f4f6f8 !important;
-    font-size: 16px;
-    color: #333;
-    font-weight: 600;
-    // padding-left: 8px;
-  }
-
-  // 表格标题行背景
-  .el-table tr th.el-table__cell .cell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  //  表格内容行背景
-  .el-table .cell {
-    padding: 0 5px !important;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // color:#666;
-  }
-
-  .el-table thead {
-    color: #333 !important;
-    font-weight: 500;
-    font-size: 14px;
-    height: 52px;
-
-    .is-left {
-      padding-left: 10px; //靠左的标题加10边距
-    }
-  }
-  .el-table .el-table__cell {
-    padding: 0;
-    height: 52px;
-    color: #666;
   }
 }
 //表格42行高
@@ -523,93 +416,4 @@ const ChangePage = (val) => {
     color: #666;
   }
 }
-// 分页公共样式
-:deep(.page_pagination) {
-  width: 100%;
-  height: 30px;
-  margin-top: 18px;
-  margin-bottom: 2px;
-
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-
-  &.space_between {
-    justify-content: space-between;
-  }
-
-  .page_total {
-    font-size: 14px;
-    color: #666666;
-
-    span {
-      margin: 0 4px;
-    }
-  }
-
-  .el-pagination {
-    padding: 0 !important;
-    display: flex;
-    align-items: center;
-
-    .el-input__suffix {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .el-input--mini .el-input__inner {
-    height: 30px !important;
-    line-height: 30 !important;
-  }
-
-  // 上一页
-  .el-pagination .btn-prev {
-    width: 30px !important;
-    height: 30px;
-    padding: 0 !important;
-    background: #f3f3f3;
-    border-radius: 4px 4px 4px 4px;
-  }
-
-  // 下一页
-  .el-pagination .btn-next {
-    width: 30px !important;
-    height: 30px;
-    padding: 0 !important;
-    background: #f3f3f3;
-    border-radius: 4px 4px 4px 4px;
-    margin-left: 8px;
-  }
-
-  .el-pagination span:not([class*="suffix"]),
-  .el-pagination button {
-    min-width: 30px;
-  }
-
-  .el-pager {
-    display: flex;
-  }
-  .el-pager li {
-    min-width: 30px;
-    height: 30px;
-    width: 30px;
-    line-height: 30px;
-    background: #f3f3f3;
-    border-radius: 4px 4px 4px 4px;
-    padding: 0 !important;
-    margin-left: 8px;
-
-    font-weight: 400;
-    font-size: 14px;
-    color: #666;
-  }
-
-  .el-pager li.is-active {
-    background: #2f51ff;
-    font-weight: 400;
-    font-size: 14px;
-    color: #ffffff;
-  }
-}
 </style>

+ 15 - 2
src/components/StudentPaper.vue

@@ -24,8 +24,8 @@
         <div 
           class="canvas_image" 
           v-loading="isLoading" 
-          element-loading-text="加载中……" 
-          element-loading-spinner="el-icon-loading" 
+          element-loading-text="加载中..." 
+          :element-loading-spinner="loadingSvgIcon"
           element-loading-background="#ffffff"
         >
           <PaperImage 
@@ -76,6 +76,7 @@ import { ref, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
 import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
 import PaperImage from "@/components/PaperImage.vue"; // 学生试卷组件
 import { getStudentPaperCardInfo } from "@/api/analysis";
+import {loadingSvgIcon} from "@/utils/common";
 
 // ================= 类型定义 =================
 interface PaperInfo {
@@ -388,6 +389,18 @@ onBeforeUnmount(() => {
       width: calc(100% - 88px - 40px);
       height: 100%;
       margin: auto;
+      //表格加载动画字体
+      :deep(.el-loading-spinner) {
+        .el-loading-text{
+          font-size: 14px;
+          margin:0 auto;
+        }
+        .circular {
+          width: 20px;
+          height: 20px;
+          color: #2e64fa;
+        }
+      }
     }
   }
 

+ 14 - 2
src/components/StudentQuestionImg.vue

@@ -2,8 +2,8 @@
   <div
     class="canvas_image"
     v-loading="isLoading"
-    element-loading-text="加载中……"
-    element-loading-spinner="el-icon-loading"
+    element-loading-text="加载中..."
+    :element-loading-spinner="loadingSvgIcon"
     element-loading-background="#ffffff"
   >
     <!-- PointCanvas 组件需要确保也是 Vue 3 版本 -->
@@ -21,6 +21,7 @@
 import { ref, watch, onMounted, nextTick } from "vue";
 import PointCanvas from "@/components/QuestionPoint.vue"; // 小题的画布版本
 import { getStudentPaperCardInfo } from "@/api/analysis";
+import { loadingSvgIcon } from "@/utils/common";
 
 // --- 类型定义 ---
 
@@ -403,5 +404,16 @@ onMounted(() => {
     height: 100%;
     position: relative;
   }
+  :deep(.el-loading-spinner) {
+    .el-loading-text {
+      font-size: 14px;
+      margin: 0 auto;
+    }
+    .circular {
+      width: 20px;
+      height: 20px;
+      color: #2e64fa;
+    }
+  }
 }
 </style>

+ 11 - 18
src/styles/common.scss

@@ -311,9 +311,11 @@ body {
   //表格加载动画字体
   .el-loading-spinner .el-loading-text {
     font-size: 14px;
+    margin:0 auto;
   }
-  .el-loading-spinner i {
-    font-size: 20px;
+  .el-loading-spinner .circular {
+    width: 20px;
+    height: 20px;
     color: #2e64fa;
   }
   //表格里的输入框 选择框样式覆盖
@@ -517,9 +519,11 @@ body {
     font-size: 14px;
     color: #666;
   }
-
-  .el-pagination .el-pager li.active {
-    background: #2f51ff;
+  .el-pagination button.is-active, .el-pagination button:hover {
+  color: #2f51ff !important;
+}
+  .el-pagination .el-pager li.is-active {
+    background: #2f51ff !important;
     font-weight: 400;
     font-size: 14px;
     color: #ffffff;
@@ -1479,19 +1483,8 @@ body {
       outline: none;
     }
     .el-dialog__headerbtn {
-      // display: none;
-      // width: 100px;
-      // height: 24px;
-      // margin-top: -8px;
-      // background-image: url("../assets/icon/close-line.png");
-      // background-position: 100% 50%;
-      // background-repeat: no-repeat;
-      // background-size: 24px 24px;
-      // // background-color: red;
-      // cursor: pointer;
-      // i {
-      //   display: none;
-      // }
+      color: #909399;
+      font-size: 22px;
     }
   }
 

+ 2 - 2
src/styles/element.scss

@@ -163,10 +163,10 @@ button:focus, button:focus-visible {
 }
 
 .el-pagination button.is-active, .el-pagination button:hover {
-  color: #2E64FA;
+  color: #2f51ff;
 }
 .el-pagination.is-background .el-pager li.is-active {
-  background: #2E64FA;
+  background: #2f51ff;
 }
 
 //全屏弹窗

+ 4 - 0
src/utils/common.ts

@@ -309,3 +309,7 @@ export const getFormatNumber = (numberStr: string | number): string => {
 
   return formatted;
 };
+// 加载中svg图标
+export const loadingSvgIcon = () => { 
+  return `<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248m452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248M828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0"></path></svg>`
+};

+ 3 - 3
src/views/analysis/classComparison.vue

@@ -171,7 +171,7 @@
         class="no_content_data"
         v-loading="state.analysisLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <span>暂无数据</span>
@@ -349,7 +349,7 @@ import StudentList from "@/components/studentList.vue"; //学生列表弹窗组
 import { onMounted, reactive, computed, watch, ref } from "vue";
 import { useAnalysisStore } from "@/store/analysis";
 import { classContrastSubjectTable, publicExportFive } from "@/api/analysis";
-import { getSchoolFiveRateColor } from "@/utils/common";
+import { getSchoolFiveRateColor,loadingSvgIcon } from "@/utils/common";
 import { downloadExcel, GetExcelFileName } from "@/utils/exportExcel";
 import { cloneDeep } from "lodash-es";
 
@@ -538,7 +538,7 @@ const state = reactive<PageState>({
     markLineData: [],
   },
   analysisLoading: false, // 班级分析表加载中
-  loadingText: "加载中,请稍后……",
+  loadingText: "加载中,请稍后...",
   rankType: 2, // 超均分/超均率 联1 校2切换
   groupTitle: "平均分", // 默认平均分
   sortValue: "1",

+ 3 - 2
src/views/analysis/errorAnalysis.vue

@@ -20,7 +20,7 @@
         :cell-class-name="ErrorTableCellClassName"
         v-loading="state.tableLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <el-table-column
@@ -141,6 +141,7 @@ import { useAnalysisStore } from "@/store/analysis";
 import ErrorsPdf from "@/components/ErrorsPdf.vue";
 import { onMounted, reactive, computed, ref, watch } from "vue";
 import { errorQuestionAnalysis, exportErrorQuestion } from "@/api/analysis";
+import {loadingSvgIcon} from "@/utils/common";
 import {
   downloadExcel,
   GetExcelFileName,
@@ -150,7 +151,7 @@ import {
 const state = reactive({
   tableData: [],
   tableLoading: true,
-  loadingText: "加载中……",
+  loadingText: "加载中,请稍后...",
 });
 const analysisStore = useAnalysisStore();
 const reportModuleRef = ref<any>(null);

+ 6 - 5
src/views/analysis/groupAnalysis.vue

@@ -64,7 +64,7 @@
         class="no_content_data"
         v-loading="state.dataLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <span>暂无数据</span>
@@ -138,7 +138,7 @@
         class="no_content_data"
         v-loading="state.dataLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <span>暂无数据</span>
@@ -197,7 +197,7 @@
         class="no_content_data"
         v-loading="state.dataLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <span>暂无数据</span>
@@ -252,7 +252,7 @@
           class="module_chart no_content_data"
           v-loading="state.dataLoading"
           :element-loading-text="state.loadingText"
-          element-loading-spinner="el-icon-loading"
+          :element-loading-spinner="loadingSvgIcon"
           element-loading-background="#ffffff"
         >
           <span>暂无数据</span>
@@ -499,6 +499,7 @@ import DifferenceChart from "@/components/echarts/differenceChart.vue"; //率差
 import BarChart from "@/components/echarts/barChart_answer.vue"; //单柱状图
 import StudentQuestionImg from "@/components/StudentQuestionImg.vue"; // 学生小题答题卡组件
 import { downloadExcel, GetExcelFileName } from "@/utils/exportExcel";
+import {loadingSvgIcon} from "@/utils/common";
 import { onMounted, reactive, watch, ref, computed, nextTick } from "vue";
 import { cloneDeep } from "lodash-es";
 const analysisStore = useAnalysisStore();
@@ -736,7 +737,7 @@ const state = reactive({
   chartKey: 0,
 
   dataLoading: false,
-  loadingText: "加载中,请稍后……",
+  loadingText: "加载中,请稍后...",
 
   errorPdfLoading: false, //错题导出PDF loading
   paperInfo: {

+ 3 - 2
src/views/analysis/levelDistribution.vue

@@ -69,7 +69,7 @@
         class="no_content_data"
         v-loading="state.tableLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <span>暂无数据</span>
@@ -198,6 +198,7 @@ import BarLineChart from "@/components/echarts/barLineChart.vue"; //柱状图折
 import LineBarChart from "@/components/echarts/lineBarChart.vue"; //折线图柱状图组件
 import StudentList from "@/components/studentList.vue"; //学生列表弹窗组件
 import { useAnalysisStore } from "@/store/analysis";
+import {loadingSvgIcon} from "@/utils/common";
 import { onMounted, reactive, computed, watch, ref } from "vue";
 import { scoreSegment, publicExport } from "@/api/analysis";
 import { downloadExcel, GetExcelFileName } from "@/utils/exportExcel";
@@ -356,7 +357,7 @@ const state = reactive<State>({
     pageNum: 1, //当前页
   }, //分数段图数据
   tableLoading: true,
-  loadingText: "加载中……",
+  loadingText: "加载中,请稍后...",
   scoreSegmentClassData: {
     datax: [],
     datay: [],

+ 3 - 2
src/views/analysis/optionDetail.vue

@@ -44,7 +44,7 @@
         height="500"
         v-loading="state.tableLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <el-table-column
@@ -114,6 +114,7 @@ import {
 import { useAnalysisStore } from "@/store/analysis";
 import { Search } from "@element-plus/icons-vue";
 import { downloadExcel } from "@/utils/exportExcel";
+import {loadingSvgIcon} from "@/utils/common";
 import { onMounted, reactive, ref, computed, watch } from "vue";
 
 interface TableColumn {
@@ -167,7 +168,7 @@ const state = reactive<State>({
     total: 0,
   },
   tableLoading: true,
-  loadingText: "加载中……",
+  loadingText: "加载中,请稍后...",
   paperInfo: {
     examPaperId: "", //考试科目id
     platformNumber: "", //学籍号平台号

+ 5 - 5
src/views/analysis/propositionAnalysis.vue

@@ -55,7 +55,7 @@
         class="module_chart no_content_data"
         v-loading="state.dataLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <span>暂无数据</span>
@@ -88,7 +88,7 @@
           class="module_chart no_content_data"
           v-loading="state.dataLoading"
           :element-loading-text="state.loadingText"
-          element-loading-spinner="el-icon-loading"
+          :element-loading-spinner="loadingSvgIcon"
           element-loading-background="#ffffff"
         >
           <span>暂无数据</span>
@@ -176,7 +176,7 @@
           class="module_chart no_content_data"
           v-loading="state.dataLoading"
           :element-loading-text="state.loadingText"
-          element-loading-spinner="el-icon-loading"
+          :element-loading-spinner="loadingSvgIcon"
           element-loading-background="#ffffff"
         >
           <span>暂无数据</span>
@@ -369,7 +369,7 @@ import {
   GetExcelFileName,
   propositionAnalysisStaticHeaderData,
 } from "@/utils/exportExcel";
-
+import {loadingSvgIcon} from "@/utils/common";
 const analysisStore = useAnalysisStore();
 const reportModuleRef = ref<any>(null);
 
@@ -452,7 +452,7 @@ const state = reactive({
   },
   exportLoading: false,
   dataLoading: false,
-  loadingText: "加载中,请稍后……",
+  loadingText: "加载中,请稍后...",
 });
 
 const questionTable = computed(() => {

+ 5 - 4
src/views/analysis/questionAnalysis.vue

@@ -64,7 +64,7 @@
         class="no_content_data"
         v-loading="state.dataLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <span>暂无数据</span>
@@ -123,7 +123,7 @@
         class="no_content_data"
         v-loading="state.dataLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <span>暂无数据</span>
@@ -178,7 +178,7 @@
           class="module_chart no_content_data"
           v-loading="state.dataLoading"
           :element-loading-text="state.loadingText"
-          element-loading-spinner="el-icon-loading"
+          :element-loading-spinner="loadingSvgIcon"
           element-loading-background="#ffffff"
         >
           <span>暂无数据</span>
@@ -426,6 +426,7 @@ import BarChart from "@/components/echarts/barChart_answer.vue"; //单柱状图
 import StudentQuestionImg from "@/components/StudentQuestionImg.vue"; // 学生小题答题卡组件
 import { downloadExcel, GetExcelFileName } from "@/utils/exportExcel";
 import { onMounted, reactive, watch, ref, computed, nextTick } from "vue";
+import {loadingSvgIcon} from "@/utils/common";
 import { cloneDeep } from "lodash-es";
 const analysisStore = useAnalysisStore();
 const reportModuleRef = ref<any>(null);
@@ -647,7 +648,7 @@ const state = reactive({
   chartKey: 0,
 
   dataLoading: false,
-  loadingText: "加载中,请稍后……",
+  loadingText: "加载中,请稍后...",
 
   errorPdfLoading: false, //错题导出PDF loading
   paperInfo: {

+ 3 - 2
src/views/analysis/score.vue

@@ -57,7 +57,7 @@
         :height="state.tableHeight"
         v-loading="state.tableLoading"
         :element-loading-text="state.loadingText"
-        element-loading-spinner="el-icon-loading"
+        :element-loading-spinner="loadingSvgIcon"
         element-loading-background="#ffffff"
       >
         <el-table-column
@@ -152,6 +152,7 @@ import {
 import { useAnalysisStore } from "@/store/analysis";
 import { downloadExcel } from "@/utils/exportExcel";
 import { Search } from "@element-plus/icons-vue";
+import {loadingSvgIcon} from "@/utils/common";
 import {
   nextTick,
   ref,
@@ -227,7 +228,7 @@ const state = reactive<State>({
     total: 0,
   },
   tableLoading: true,
-  loadingText: "加载中……",
+  loadingText: "加载中,请稍后...",
   paperInfo: {
     examPaperId: "", //考试科目id
     platformNumber: "", //学籍号平台号