<template>
|
<div class="Questionnairemanagement">
|
<!-- 左侧栏 -->
|
<div class="sidecolumn">
|
<div style="height: 400px">
|
<el-steps direction="vertical" :active="Editprogress">
|
<el-step title="第一步"></el-step>
|
<el-step title="第二步"></el-step>
|
<el-step
|
title="第三步"
|
description="这是一段很长很长很长的描述性文字"
|
></el-step>
|
<el-step
|
title="第四部"
|
description="这是一段很长很长很长的描述性文字"
|
></el-step>
|
</el-steps>
|
</div>
|
</div>
|
<!-- 右侧数据 -->
|
<div class="leftvlue">
|
<!-- 基本信息 -->
|
<div v-if="Editprogress == 1">
|
<div class="leftvlue-jbxx">第一部分</div>
|
<el-button type="success" @click="submitForm('ruleForm')"
|
>下一步</el-button
|
>
|
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
</div>
|
<!-- 问卷设置 -->
|
<div v-if="Editprogress == 2">
|
<div class="leftvlue-jbxx">第二部分</div>
|
<el-button type="success" @click="submitForm('ruleForm')"
|
>下一步</el-button
|
>
|
<el-button type="primary" @click="laststep()">上一步</el-button>
|
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
</div>
|
<!-- 问卷预览 -->
|
<div v-if="Editprogress == 3">
|
<div class="leftvlue-jbxx">第三部分</div>
|
<el-button type="success" @click="submitForm('ruleForm')"
|
>下一步</el-button
|
>
|
<el-button type="primary" @click="laststep()">上一步</el-button>
|
<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
|
</div>
|
<!-- 结果反馈 -->
|
<div v-if="Editprogress == 4">
|
<div class="leftvlue-jbxx">第四部分</div>
|
<el-button type="success" @click="submitForm('ruleForm')"
|
>立即创建</el-button
|
>
|
<el-button type="primary" @click="laststep()">上一步</el-button>
|
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
Editprogress: 1, //编辑进度
|
loading: false, // 遮罩层
|
};
|
},
|
|
created() {},
|
|
methods: {
|
// 下一步
|
submitForm(formName) {
|
if (this.Editprogress <= 3) {
|
return this.Editprogress++;
|
}
|
// 提交
|
// this.$refs[formName].validate((valid, object) => {
|
// if (valid) {
|
// alert("submit!");
|
// } else {
|
// console.log("error submit!!", object);
|
// return false;
|
// }
|
// });
|
},
|
// 上一步
|
laststep() {
|
this.Editprogress--;
|
},
|
// 提交表单
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.Questionnairemanagement {
|
display: flex;
|
}
|
.sidecolumn {
|
width: 300px;
|
min-height: 100vh;
|
text-align: center;
|
// display: flex;
|
// margin-top: 20px;
|
margin: 20px;
|
margin-bottom: 0;
|
padding: 30px;
|
background: #edf1f7;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
}
|
.leftvlue {
|
// display: flex;
|
// flex: 1;
|
width: 80%;
|
margin-top: 20px;
|
// margin: 20px;
|
padding: 30px;
|
background: #ffff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.leftvlue-jbxx {
|
margin-bottom: 50px;
|
font-size: 20px;
|
span {
|
position: absolute;
|
right: 80px;
|
}
|
}
|
}
|
::v-deep .addtopic-input {
|
input {
|
background: #02a7f0;
|
color: #edf1f7;
|
width: 150px;
|
}
|
}
|
::v-deep.el-step.is-vertical .el-step__title {
|
font-size: 25px;
|
}
|
::v-deep.el-input--medium {
|
font-size: 24px !important;
|
}
|
::v-deep.ruleFormaa.el-select {
|
display: inline-block;
|
position: relative;
|
width: 700px;
|
}
|
.el-select__tags {
|
font-size: 20px;
|
max-width: 888px !important;
|
}
|
::v-deep.el-radio__inner {
|
width: 22px;
|
height: 22px;
|
}
|
// ::v-deep.topic-dev.el-radio__label {
|
// font-size: 24px;
|
// }
|
::v-deep.el-radio-group {
|
span {
|
font-size: 24px;
|
}
|
}
|
::v-deep.el-checkbox-group {
|
span {
|
font-size: 24px;
|
}
|
}
|
</style>
|
