完成题库管理页面路由设置，问卷查看页面布局

heimawl

2023-06-12 b850b4ca43f2ae66586bd875bd453061752d5e5a

 src/views/knowledge/questionnaire/examine/index.vue

@@ -1,21 +1,310 @@
<template>
  <div class="examineemanagement">
    <div>查看详情W</div>
    <div></div>
    <div></div>
    <!-- 左侧栏 -->

    <div class="sidecolumn">
      <div class="sidecolumn-top">
        <div class="top-wj">历史版本</div>
        <!-- <div class="top-tj" @click="dialogFormVisible = true">+添加</div> -->
      </div>
      <div class="bottom-fl">
        <el-tabs tab-position="right" v-model="activeName">
          <el-tab-pane
            class="tab-paness"
            :key="index"
            v-for="(item, index) in editableTabs"
          >
            <div class="mulsz" slot="label">
              {{ item.versionsac
              }}<span style="margin-left: 30px">{{
                item.startUsing ? "启用" : "禁用"
              }}</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 右侧数据 -->

    <div class="leftvlue">
      <div v-if="activeName == '0'">
        <div class="examine-top">
          <span>编辑人：{{ basicInformation.name }}</span>
          <span>编辑时间：{{ basicInformation.day }}</span>
          <span class="ewmyl">二维码预览</span>
        </div>
        <!-- 基础信息 -->
        <div class="examine-jic">
          <div class="headline">基础信息</div>
          <div class="jic-value">
            <div>
              问卷名称：{{ basicInformation.wname
              }}<span>适用疾病：{{ basicInformation.jbname }}</span>
            </div>
            <div>表单描述：{{ basicInformation.miaosname }}</div>
          </div>
        </div>
        <!-- 问卷预览 -->
        <div class="examine-jic">
          <div class="headline">问卷预览</div>
          <div class="jic-value">
            <div>
              问卷介绍：<span class="wenjuanjs"
                >非常好非常好非常好非常好非常好非常好非常好非常好</span
              >
            </div>
            <div>
              问卷介绍：<span class="wenjuanjs"
                >非常好非常好非常好非常好非常好非常好</span
              >
            </div>
          </div>
          <div class="preview-left">
            <!-- 单选 -->
            <div class="topic-dev" v-for="item in valssu" :key="item.aaa">
              <div class="dev-text">
                {{ item.idd }}、[单选]&nbsp&nbsp<span>{{ item.wssd }}</span>
              </div>
              <div class="dev-xx">
                <el-radio-group v-model="radio">
                  <el-radio
                    v-for="(items, index) in item.sdadd"
                    :key="index"
                    :label="index"
                    >{{ items }}</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
            <!-- 多选 -->
            <div class="topic-dev" v-for="item in valssu" :key="item.aaa">
              <div class="dev-text">
                {{ item.idd }}、[多选]&nbsp&nbsp<span>{{ item.wssd }}</span>
              </div>
              <div class="dev-xx">
                <el-checkbox-group v-model="radios">
                  <el-checkbox
                    v-for="(items, index) in item.sdadd"
                    :key="index"
                    :label="index"
                  >
                    {{ items }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <!-- 填空 -->
            <div class="topic-dev" v-for="item in valssu" :key="item.aaa">
              <div class="dev-text">
                {{ item.idd }}、[填空]&nbsp&nbsp<span>{{ item.wssd }}</span>
              </div>
              <div class="dev-xx">
                <el-input placeholder="请输入答案" v-model="radioas" clearable>
                </el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="examine-jieg">
          <div class="headline">结果反馈</div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div v-else-if="activeName == '1'">bbb</div>
      <div v-else-if="activeName == '2'">ccc</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
    return {
      activeName: "0",
      radios: [], //多选题选中

      basicInformation: {
        name: "老吴",
        day: "2023年12月11日16时12分11秒",
        wname: "大大大",
        jbname: "小小小",
        miaosname: "非常好大大大",
      },
      valssu: [
        {
          idd: 1,
          wssd: "你最近怎么样",
          sdadd: ["sss", "ssccss", "ssaas", "ss"],
        },
      ],
      editableTabs: [
        {
          versionsac: "1.0.3",
          startUsing: true,
        },
        {
          versionsac: "1.0.2",
          startUsing: false,
        },
        {
          versionsac: "1.0.1",
          startUsing: false,
        },
      ],
    };
  },

  created() {},

  methods: {},
  methods: {
    handleClick() {},
  },
};
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.examineemanagement {
  display: flex;
  .sidecolumn {
    width: 300px;
    min-height: 100vh;
    text-align: center;
    //   display: flex;
    margin-top: 20px;
    margin: 20px;
    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);
    .sidecolumn-top {
      display: flex;
      justify-content: space-between;
      .top-wj {
        font-size: 20px;
      }
      .top-tj {
        font-size: 18px;

        color: rgb(0, 89, 255);
        cursor: pointer;
      }
    }
    .center-ss {
      margin-top: 30px;
      .input-with-select {
        height: 40px !important;
      }
    }
    .bottom-fl {
      margin-top: 30px;
      display: center !important;
    }
  }
  .leftvlue {
    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);
    .mulsz {
      font-size: 20px;
      span {
        margin-left: 30px;
      }
    }
    .examine-top {
      font-size: 20px;
      margin-bottom: 40px;
      span {
        margin-right: 30px;
      }
      .ewmyl {
        color: rgb(0, 81, 255);
        cursor: pointer;
      }
    }
    .examine-jic {
      .headline {
        font-size: 28px;
        border-left: 8px solid #41a1be;
        padding-left: 5px;
        margin-bottom: 15px;
      }
      .jic-value {
        font-size: 20px;
        border-top: 1px solid #a7abac;
        padding: 20px;
        div {
          margin-bottom: 15px;
          span {
            margin-left: 180px;
          }
        }
        .wenjuanjs {
          margin-left: 15px;
          padding-bottom: 5px;
          border-bottom: 1px solid #a7abac;
        }
      }
      .preview-left {
        margin: 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);
        .topic-dev {
          margin-bottom: 25px;
          font-size: 20px !important;
          .dev-text {
            margin-bottom: 10px;
          }
        }
      }
    }
    .examine-jieg {
      .headline {
        font-size: 28px;
        padding-left: 5px;
        border-left: 8px solid #41a1be;
        // border-bottom: 1px solid #41a1be;
        margin-bottom: 15px;
      }
    }
  }
}
::v-deep.el-tabs--left,
.el-tabs--right {
  overflow: hidden;
  align-items: center;
  display: flex;
}
::v-deep.el-input--medium .el-input__inner {
  height: 40px !important;
}
::v-deep.el-tabs--right .el-tabs__active-bar.is-right {
  height: 40px;
  width: 5px;
  left: 0;
}
::v-deep.el-tabs--right .el-tabs__item.is-right {
  display: block;
  font-size: 20px;
}
::v-deep.el-radio-group {
  span {
    font-size: 24px;
  }
}
::v-deep.el-checkbox-group {
  span {
    font-size: 24px;
  }
}
</style>