|
@@ -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>
|