nihao vor 5 Jahren
Ursprung
Commit
e9dd474662
1 geänderte Dateien mit 48 neuen und 63 gelöschten Zeilen
  1. 48 63
      src/views/question.vue

+ 48 - 63
src/views/question.vue

@@ -1,42 +1,41 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24">
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-row class="row_auto">
-            <el-col :span="24" class="text_auto">{{ info.name }}</el-col>
-          </el-row>
-          <el-row class="row_auto">
-            <el-col :span="24" class="text_left" v-for="(item, index) in info.question" :key="index">
-              <!-- 题目 -->
-              <el-col :span="24"> {{ index + 1 }} . {{ item.topic }} </el-col>
-              <!-- 选项需判断所属类型,然后循环选项加入标签即可 -->
-              <el-col :span="24" class="text_center" v-if="item.type === '0'">
-                <el-col :span="24" class="text_left" v-for="(items, index) in item.option" :key="index">
-                  <el-radio v-model="form.radio" :label="items.opname">{{ items.opname }}</el-radio>
-                </el-col>
+      <el-col :span="24" class="style">
+        <el-form ref="form" :model="form">
+          <el-col :span="24" class="topTitle">
+            {{ info.name }}
+          </el-col>
+          <el-col :span="24" v-for="(item, index) in info.question" :key="index">
+            <el-form-item>
+              <span slot="label">{{ index + 1 }} . {{ item.topic }}</span>
+            </el-form-item>
+            <span v-if="item.type === '0'">
+              <el-col :span="24" v-for="(items, index) in item.option" :key="index">
+                <el-radio v-model="form.answer" :label="items.opname">{{ items.opname }}</el-radio>
               </el-col>
-              <el-col :span="24" class="text_center" v-if="item.type === '1'">
-                <el-col :span="24" class="text_left" v-for="(items, index) in item.option" :key="index">
-                  <el-checkbox-group v-model="form.checkList">
-                    <el-checkbox :label="items.opname">{{ items.opname }}</el-checkbox>
-                  </el-checkbox-group>
-                </el-col>
+            </span>
+            <span v-else-if="item.type === '1'">
+              <el-col :span="24" v-for="(items, index) in item.option" :key="index">
+                <el-checkbox-group v-model="form.opname">
+                  <el-checkbox :label="items.opname">{{ items.opname }}</el-checkbox>
+                </el-checkbox-group>
               </el-col>
-              <el-col :span="24" v-if="item.type === '2'">
-                <el-input
-                  type="textarea"
-                  placeholder="请输入内容"
-                  v-model="form.answer"
-                  :autosize="{ minRows: 4, maxRows: 10 }"
-                  maxlength="300"
-                  show-word-limit
-                >
-                </el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="24"><el-button type="primary" @click="onSubmit">提交</el-button></el-col>
-          </el-row>
+            </span>
+            <span v-else>
+              <el-input
+                type="textarea"
+                placeholder="请输入内容"
+                v-model="form.content"
+                :autosize="{ minRows: 4, maxRows: 6 }"
+                maxlength="300"
+                show-word-limit
+              ></el-input>
+            </span>
+          </el-col>
+          <el-col :span="24" class="btn">
+            <el-button type="primary" @click="onSubmit">提交</el-button>
+          </el-col>
         </el-form>
       </el-col>
     </el-row>
@@ -51,12 +50,7 @@ export default {
     form: null,
   },
   components: {},
-  data: () => ({
-    text: '',
-    textarea: '',
-
-    radio: '',
-  }),
+  data: () => ({}),
   created() {},
   computed: {},
   methods: {
@@ -67,33 +61,24 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.text_auto {
-  width: 100%;
-  // height: 50px;
-  line-height: 50px;
-  position: relative;
-  text-align: center;
-  border-bottom: 1px dashed #333;
+.style {
+  min-height: 300px;
+  padding: 0 40px;
 }
-
-.text_left {
-  width: 100%;
+.topTitle {
+  text-align: center;
+  height: 50px;
   line-height: 50px;
-  position: relative;
-  // padding-left: 25px;
-  color: blue;
+  border-bottom: 1px dashed #333;
 }
-.text_center {
-  width: 100%;
-  line-height: 25px;
-  padding-left: 20px;
-  color: black;
-  background: #f7f7f7;
+/deep/.el-form-item {
+  margin: 0;
 }
-.row_auto {
-  padding: 0 20px;
+/deep/.el-form-item__label {
+  color: #389ff0;
 }
-button {
-  width: 322px;
+.btn {
+  text-align: center;
+  padding: 30px 0;
 }
 </style>