初始化创建问卷页

src/components/TopBackNav.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="page_item top_header">
+        <div class="top_left">
+            <el-button class="button_default_background" @click="router.go(-1)">
+                <el-icon class="img"><ArrowLeftBold /></el-icon>
+                返回
+            </el-button>
+        </div>
+        <div class="top_right">
+            <slot name="topRight"></slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+</script>
+
+<style lang="scss" scoped>
+
+
+.top_header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap:40px;
+    padding:10px 20px;
+    .top_left{
+        display: flex;
+        align-items: center;
+        gap:40px;
+    }
+    :deep(.button_default_background){
+        padding:8px 10px;
+        >span{
+            gap:4px;
+        }
+    }
+}
+</style>

src/router/index.ts

@@ -26,6 +26,12 @@ const routes: Array<RouteRecordRaw> = [
         name: 'surveyManagement',
         component: () => import('@/views/surveyManagement/SurveyManagement.vue')
       },
+      {
+        path: 'createQuestionnaire',
+        name: 'createQuestionnaire',
+        component: () => import('@/views/surveyManagement/createQuestionnaire/CreateQuestionnaire.vue')
+      },
+      
       {
         path: 'reviewManagement',
         name: 'reviewManagement',

src/views/surveyManagement/SurveyManagement.vue

@@ -12,7 +12,7 @@
                         />
                     </div>
                     <div class="conent_right">
-                        <el-button class="button_background">创建问卷</el-button>
+                        <el-button class="button_background" @click="GoToCreateQuestionnaire">创建问卷</el-button>
                     </div>
                 </div>
             </div>
@@ -89,7 +89,7 @@
 
 <script lang="ts" setup>
 import {onMounted, ref} from 'vue'
-
+import { useRouter } from 'vue-router';
 import Table from '@/baseComponents/Table.vue';
 import TabSearch from '@/baseComponents/TabSearch.vue';
 import TableRowStatus from '@/baseComponents/TableRowStatus.vue';
@@ -104,16 +104,20 @@ interface QuestionnaireItm {
     createTime:String,
     useStatus:Number,   //0 已使用   1 未使用
 }
+const router = useRouter()
 
-
-// 视图模式切换
+// 1. 视图模式切换
 const defaultViewMode = ref('list')
 const  HandleTabChage = (val)=>{    
     defaultViewMode.value = val
 }
 
+// 2. 跳转创建问卷
+const GoToCreateQuestionnaire = ()=>{
+    router.push('/main/createQuestionnaire')
+}
 
-//问卷列表
+//3. 问卷列表
 const currentPage = ref(1)
 const totalNum = ref(0)
 const pageSize = ref(20)
@@ -154,6 +158,8 @@ const questionnaireList = ref<QuestionnaireItm[]>([
 ]);
 
 
+
+
 </script>
 
 <style lang="scss" scoped>

src/views/surveyManagement/createQuestionnaire/CreateQuestionnaire.vue

@@ -0,0 +1,53 @@
+<template>
+    <div  ref="courseDom" class="main_container">
+        <TopBackNav>
+            <template #topRight>
+                <span class="paper_score">阅卷总分：<span class="score">60分</span></span>
+                <el-button class="button_refresh">预览问卷</el-button>
+                <el-button class="button_background">保存问卷</el-button>
+            </template>
+        </TopBackNav>
+
+        <div class="page_jg_20"></div>
+        <div  class="page_item end_item">
+            问卷
+           
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, ref} from 'vue'
+
+import TopBackNav from '@/components/TopBackNav.vue';
+
+onMounted(async ()=>{
+})
+</script>
+
+<style lang="scss" scoped>
+
+:deep(.top_header){
+    .top_right{
+        display: flex;
+        align-items: center;
+        .el-button{
+            margin-left:0px !important;
+            &.button_refresh{
+                margin-right: 10px;
+            }
+        }
+        .paper_score{
+            font-weight: 600;
+            margin-right: 20px;
+            .score{
+                color:#2E64FA;
+            }
+        }
+    }
+}
+
+
+
+
+</style>