添加问卷进度静态页面

src/router/index.ts

@@ -60,11 +60,27 @@ const routes: Array<RouteRecordRaw> = [
         name: 'appQuestionnaireTaskListPage',    //问卷任务页
         component: () => import('@/views/appView/QuestionnaireTaskListPage.vue')
       },
+
+
       {
         path: 'questionnaireElectiveSubject',
         name: 'appQuestionnaireElectiveSubject',    //问卷选科页
         component: () => import('@/views/appView/QuestionnaireElectiveSubject.vue')
       },
+
+
+      {
+        path: 'selfQuestionnaireProcess',
+        name: 'appSelfQuestionnaireProcess',    //学生个人问卷列表进度页
+        component: () => import('@/views/appView/SelfQuestionnaireProcess.vue')
+      },
+
+
+      {
+        path: 'questionnaireCommit',
+        name: 'appQuestionnaireCommit',    //学生个人问卷填写提交页
+        component: () => import('@/views/appView/QuestionnaireCommit.vue')
+      },
     ]
   },
 

src/views/appView/SelfQuestionnaireProcess.vue

@@ -0,0 +1,227 @@
+<template>
+    <div class="app_container">
+        <!-- 顶部筛选与统计区域 -->
+        <div class="page_search">
+            <div class="search_content">
+                <div class="content_left stats_container">
+                    <div class="stat-item">
+                        <span class="stat-num blue">8位</span>
+                        <span class="stat-label">评价教师</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <span class="stat-num green">5科</span>
+                        <span class="stat-label">已评科目</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <span class="stat-num red">3科</span>
+                        <span class="stat-label">待评科目</span>
+                    </div>
+                </div>
+                <div class="content_right">
+                    <el-button class="button_border" @click="GoToElectiveSubject" >更改科目班级</el-button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 教师卡片列表区域 -->
+        <ul class="teacher_list">
+            <!-- 模拟数据循环 -->
+            <li  v-for="(item) in teacherList" 
+                :key="item.id"  
+                class="teacher_card">
+
+                <div class="card_header">
+                    <div class="subject_tag" :style="{ backgroundColor: subjectToColor(item.subject)?.color }">
+                        {{ item.subject }}
+                    </div>
+                    <div class="info_text">
+                        <div class="teacher_name">教师：{{ item.name }}</div>
+                        <div class="class_name">班级：{{ item.className }}</div>
+                    </div>
+                </div>
+                <div class="card_footer">
+                    <span class="status_text" :style="{color:fillOutStatusToColor(item.status)?.color}" >
+                        {{ fillOutStatusToColor(item.status)?.statusName }}
+                    </span>
+                </div>
+            </li>
+        </ul>
+
+        <!-- 底部操作区域 -->
+        <div class="bottom_action">
+            <!-- 开始评价按钮 -->
+            <el-button class="button_background" @click="GoToFillOutQuestionnaire">开始评价</el-button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { ref } from 'vue';
+
+import { subjectToColor,fillOutStatusToColor } from '@/components/commonDictConvert';
+
+const router = useRouter()
+
+// 模拟教师列表数据
+const teacherList = ref([
+    { id:'1', subject: '班主任', name: '张文华', className: '1班', status: 'done',  },
+    { id:'2', subject: '数学', name: '张文华', className: '1班', status: 'done',},
+    { id:'3', subject: '英语', name: '张文华', className: '1班', status: 'pending',  },
+    { id:'4', subject: '物理', name: '张文华', className: '1班', status: 'unfinish', },
+    { id:'5', subject: '道法', name: '张文华', className: '1班', status: 'unfinish', },
+    { id:'6', subject: '化学', name: '张文华', className: '1班', status: 'unfinish', },
+    { id:'7', subject: '生物', name: '张文华', className: '1班', status: 'unfinish',  },
+    { id:'8', subject: '政治', name: '张文华', className: '1班', status: 'unfinish', },
+]);
+
+
+
+const GoToElectiveSubject = ()=>{
+    router.push('/app/questionnaireElectiveSubject')
+}
+
+// 跳转到填写问卷页
+const GoToFillOutQuestionnaire = ()=>{
+    // 模拟数据
+    sessionStorage.setItem('teacherList',JSON.stringify(teacherList.value)) 
+    router.push('/main/questionnaireCommit')
+}
+</script>
+
+<style lang="scss" scoped>
+
+.app_container {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    width: 100%;
+    min-height: 100vh;
+    background-color: #ffffff;
+    padding:calc(16 * var(--app-rpx)) calc(12 * var(--app-rpx));
+
+    > * {
+        flex-shrink: 0;
+    }
+
+    /* 覆盖外部样式的一些特定调整 */
+    .stats_container {
+        gap: calc(20 * var(--app-rpx)) !important;
+        align-items: center;
+        .stat-item {
+            display: flex;
+            flex-direction: column;
+            gap: calc(4 * var(--app-rpx));
+            line-height: 1.5;
+            .stat-num {
+                font-weight: 600;
+                font-size:calc(16 * var(--app-rpx));
+                &.blue { color: #2E64FA; }
+                &.green { color: #2BC644; }
+                &.red { color: #F56C6C }
+            }
+            .stat-label {
+                font-weight: 400;
+                font-size:calc(12 * var(--app-rpx));
+                color: #999999;
+            }
+        }
+        .stat-divider {
+            width: 1px;
+            height: calc(32 * var(--app-rpx));
+            background-color: #F3F3F3;
+        }
+    }
+
+    .button_border{
+        width: calc(88 * var(--app-rpx));
+        height: calc(36 * var(--app-rpx));
+        font-size: calc(12 * var(--app-rpx));
+    }
+        
+    /* 教师列表网格布局 */
+    .teacher_list {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: calc(10* var(--app-rpx));
+        margin-top: calc(16 * var(--app-rpx));
+
+        .teacher_card {
+            display: flex;
+            flex-direction: column;
+            height: calc(110 * var(--app-rpx));
+            border: calc(1 * var(--app-rpx)) solid #EBEEF5;
+            border-radius:  calc(10 * var(--app-rpx)) ;
+            cursor: pointer;
+
+            .card_header {
+                display: flex;
+                align-items: center;
+                gap:calc(8 * var(--app-rpx));
+                padding:calc(14 * var(--app-rpx)) ;
+                background: #F8FAFE;
+                border-radius:  calc(10 * var(--app-rpx))  calc(10 * var(--app-rpx)) 0px 0px;
+                border-bottom: calc(1 * var(--app-rpx)) solid #EBEEF5;
+
+                > *{
+                    flex-shrink: 0;
+                }
+                .subject_tag {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width:  calc(40 * var(--app-rpx));
+                    height: calc(40 * var(--app-rpx));
+                    border-radius:calc(4 * var(--app-rpx));
+                    font-weight: 600;
+                    font-size: calc(12 * var(--app-rpx));
+                    color: #FFFFFF;
+                    text-align: center;
+                }
+                .info_text {
+                    height: calc(40 * var(--app-rpx));
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    color: #333333;
+                    .teacher_name {
+                        font-weight: 600;
+                        font-size: calc(16 * var(--app-rpx));
+                    }
+                    .class_name {
+                        font-size: calc(12 * var(--app-rpx));
+                    }
+                }
+            }
+            .card_footer {
+                flex: 1 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .status_text {
+                    font-weight: 600;
+                    font-size:  calc(14 * var(--app-rpx)) ;
+                }
+            }
+        }
+    }
+
+    /* 底部区域 */
+    .bottom_action {
+        margin-top: calc(84 * var(--app-rpx)) ;
+        margin-bottom:  calc(44 * var(--app-rpx)) ;
+        flex: 1 1;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        .button_background{
+            width:calc(100% - 16 * var(--app-rpx));
+            height: calc(44 * var(--app-rpx));
+            font-size:  calc(16 * var(--app-rpx));
+            font-weight: 600;
+        }
+    }
+}
+</style>