提交阶段性预览

src/views/system/Questionnaire/QuestionnaireView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-2 h-full flex flex-col">
-    <div class="container_box">
+    <div class="container_box flex-1">
       <div class="titlebox flex justify-between items-center">
         <span>问卷内容</span>
         <el-button link type="primary" @click="router.back()">返回</el-button>
@@ -24,7 +24,8 @@
             <!-- 单选题/多选题选项展示 -->
             <div v-if="q.type === 'radio' || q.type === 'checkbox'" class="options">
               <div v-for="(opt, idx) in q.options" :key="idx" class="option-item">
-                <span>{{ opt.label }}</span>
+                <span :class="q.type === 'radio' ? 'radio__type' : 'checkbox__type'"></span>
+                <span class="option-label">{{ opt.label }}</span>
               </div>
             </div>
 
@@ -113,9 +114,9 @@ init();
 }
 .container_box {
   background-color: white;
-  height: inherit;
   font-size: 16px;
   padding: 20px;
+  padding-bottom: 60px;
 }
 .contentBox {
   width: 1200px;
@@ -150,7 +151,25 @@ init();
       align-items: center;
       margin-bottom: 8px;
       color: #666;
-
+      position: relative;
+      .option-label {
+        padding-left: 20px;
+      }
+      .radio__type {
+        position: absolute;
+        top: 6px;
+        width: 12px;
+        height: 12px;
+        border: 1px solid #666;
+        border-radius: 50%;
+      }
+      .checkbox__type {
+        position: absolute;
+        top: 6px;
+        width: 12px;
+        height: 12px;
+        border: 1px solid #666;
+      }
       .el-icon {
         margin-right: 8px;
         color: #909399;