dy-admin-manager/src/views/setQuestions/questionManger/component/Progressive.vue

<template>
  <div :class="theme" class="wrap">
    <div class="banner">
      <van-image :src="banner" width="375" class="banner">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <h2 class="title">{{ form.title }}</h2>
    </div>
    <studentInfo v-if="form.loginFlag" class="studentInfo" />
    <div class="questions">
      <van-tag class="form-mark" :color="themeColor" mark type="primary">{{
        questionList[currentIndex - 1]["type"] | formTypeFormat
      }}</van-tag>
      <van-cell-group :border="false">
        <van-cell
          :class="noLine(questionList[currentIndex - 1]['type'])"
          title-class="questionName"
          :title="questionList[currentIndex - 1]['content']"
        />
        <van-cell :border="false">
          <template #title>
            <van-radio-group
              v-model="check"
              v-if="questionList[currentIndex - 1]['type'] == 'radio'"
            >
              <van-cell-group :border="false">
                <van-cell
                  :border="false"
                  v-for="item in questionList[currentIndex - 1][
                    'questionnaireQuestionItemList'
                  ]"
                  :clickable="true"
                  :key="item.answerValue"
                  :title="item.answerValue"
                  class="teacher-item"
                  @click="toggle(item.answerValue)"
                >
                  <template #right-icon>
                    <van-radio :name="item.answerValue">
                      <template #icon="props">
                        <!-- <img
                          class="img-icon"
                          :src="props.checked ? activeButtonIcon : inactiveIcon"
                        /> -->

                        <i
                          class="iconfont"
                          :class="
                            props.checked ? 'icon-gouxuan' : 'icon-weigouxuan'
                          "
                          :style="{ color: themeColor }"
                        ></i>
                      </template>
                    </van-radio>
                  </template>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
            <van-checkbox-group
              v-model="checkBox"
              v-if="questionList[currentIndex - 1]['type'] == 'checkbox'"
            >
              <van-cell-group :border="false">
                <van-cell
                  :border="false"
                  v-for="(item, index) in questionList[currentIndex - 1][
                    'questionnaireQuestionItemList'
                  ]"
                  :clickable="true"
                  :key="item.answerValue"
                  :title="item.answerValue"
                  class="teacher-item"
                  @click="toggle(index)"
                >
                  <template #right-icon>
                    <van-checkbox
                      shape="square"
                      :name="item.answerValue"
                      ref="checkboxes"
                    >
                      <template #icon="props">
                        <!-- <img
                          class="img-icon"
                          :src="props.checked ? activeButtonIcon : inactiveIcon"
                        /> -->
                        <i
                          class="iconfont"
                          :class="
                            props.checked ? 'icon-gouxuan' : 'icon-weigouxuan'
                          "
                          :style="{ color: themeColor }"
                        ></i>
                      </template>
                    </van-checkbox>
                  </template>
                </van-cell>
              </van-cell-group>
            </van-checkbox-group>

            <div v-if="questionList[currentIndex - 1]['type'] == 'textarea'">
              <van-field
                v-model="textarea"
                rows="4"
                autosize
                maxlength="255"
                type="textarea"
                class="textareaClass"
                placeholder="请写下您的使用感受或建议～"
              />
            </div>
            <div v-if="questionList[currentIndex - 1]['type'] == 'image'">
              <van-field
                :name="questionList[currentIndex - 1]['id'] + ''"
                class="uploader"
              >
                <template
                  slot="input"
                  :id="questionList[currentIndex - 1]['id']"
                >
                  <div>
                    <van-uploader
                      v-model="imageList"
                      :max-count="1"
                      accept="image/*"
                      :before-delete="
                        (file) => {
                          beforeDelete(file, 'imgUrl', 'imageList');
                        }
                      "
                      :before-read="beforeRead"
                      :after-read="
                        (file) => {
                          afterRead(file, 'imgUrl', 'imageList');
                        }
                      "
                    >
                      <div class="uploaderBox">
                        <img src="../images/imageIcon.png" alt="" />
                      </div>
                    </van-uploader>
                    <p class="uploaderTitle">请上传5M内的图片文件</p>
                  </div>
                  <!-- </van-button> -->
                </template>
              </van-field>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-goods-action>
        <van-goods-action-button
          class="btn-submit"
          v-if="currentIndex != 1"
          color="#F5F5F5"
          @click="onPrev"
          :style="{ color: themeColor }"
          type="default"
          text="上一题"
        />
        <van-goods-action-button
          class="btn-submit"
          :color="themeColor"
          :disabled="!check"
          type="primary"
          v-if="questionList[currentIndex - 1]['type'] == 'radio'"
          @click="onSubmit"
          :text="
            currentIndex == questionList.length
              ? planStatus
                ? '确定'
                : '提交'
              : '下一题'
          "
        />
        <van-goods-action-button
          class="btn-submit"
          :color="themeColor"
          :disabled="checkBox.length <= 0"
          type="primary"
          v-if="questionList[currentIndex - 1]['type'] == 'checkbox'"
          @click="onSubmit"
          :text="
            currentIndex == questionList.length
              ? planStatus
                ? '确定'
                : '提交'
              : '下一题'
          "
        />
        <van-goods-action-button
          class="btn-submit"
          :color="themeColor"
          :disabled="!textarea"
          type="primary"
          v-if="questionList[currentIndex - 1]['type'] == 'textarea'"
          @click="onSubmit"
          :text="
            currentIndex == questionList.length
              ? planStatus
                ? '确定'
                : '提交'
              : '下一题'
          "
        />
        <van-goods-action-button
          class="btn-submit"
          :color="themeColor"
          :disabled="!imgUrl"
          type="primary"
          v-if="questionList[currentIndex - 1]['type'] == 'image'"
          @click="onSubmit"
          :text="
            currentIndex == questionList.length
              ? planStatus
                ? '确定'
                : '提交'
              : '下一题'
          "
        />
      </van-goods-action>
    </div>

    <van-popup
      v-model="showPopup"
      round
      closeable
      @close="popupClose"
      :close-on-click-overlay="false"
    >
      <div class="popup-success">
        <img :src="icon_success" alt="" />
        <p class="tips">提交成功，感谢您的参与！</p>
        <van-button
          type="primary"
          :color="themeColor"
          block
          round
          @click="popupClose"
          >确认</van-button
        >
      </div>
    </van-popup>
    <!-- v-if="loginFlag" -->
  </div>
</template>
<script>
import studentInfo from "../models/studentInfo.vue";
// import layout from "@/layout";
// import { postMessage } from "@/helpers/native-message";
// import { getDetail } from "@/views/questionnaire/api";
// import { questionnaireUserResult, commitFlag } from "@/views/activeList/api";
// import { browser } from "@/common/common";
export default {
  props: ["form"],
  components: { studentInfo },
  data() {
    const query = this.$route.query;
    return {
      showPopup: false,
      topicId: query.topicId || 28,
      banner1: require("../images/banner1.png"),
      banner2: require("../images/banner2.png"),
      banner3: require("../images/banner3.png"),
      banner4: require("../images/banner4.png"),
      icon_success1: require("../images/icon_success1.png"),
      icon_success2: require("../images/icon_success2.png"),
      icon_success3: require("../images/icon_success3.png"),
      icon_success4: require("../images/icon_success4.png"),
      //   inactiveIcon: require("./images/icon_default.png"),
      //   activeButtonIcon: require("./images/icon_active.png"),
      currentIndex: 1,

      check: null,
      checkBox: [],
      textarea: null,
      checkList: [],
      templateType: 1,
      questionList: [{ type: "", content: "" }],
      imageList: [],
      imgUrl: "",
    };
  },
  async mounted() {
    this.templateType = this.form.templateType;
    this.questionList = this.form.questionnaireQuestionList;
  },
  computed: {
    planStatus() {
      if (this.questionList.length == this.currentIndex + 1) {
        return true;
      } else {
        return false;
      }
    },
    theme() {
      switch (this.templateType) {
        case 1: {
          return "blue";
          break;
        }
        case 2: {
          return "org";
          break;
        }
        case 3: {
          return "green";
          break;
        }
        default: {
          return "pink";
        }
      }
    },
    themeColor() {
      switch (this.templateType) {
        case 1: {
          return "#5986FD";
          break;
        }
        case 2: {
          return "#FF9E42";
          break;
        }
        case 3: {
          return "#33B23C";
          break;
        }
        default: {
          return "#FF7888";
        }
      }
    },
    banner() {
      switch (this.templateType) {
        case 1: {
          return this.banner1;
          break;
        }
        case 2: {
          return this.banner2;
          break;
        }
        case 3: {
          return this.banner3;
          break;
        }
        default: {
          return this.banner4;
        }
      }
    },
    icon_success() {
      switch (this.templateType) {
        case 1: {
          return this.icon_success1;
          break;
        }
        case 2: {
          return this.icon_success2;
          break;
        }
        case 3: {
          return this.icon_success3;
          break;
        }
        default: {
          return this.icon_success4;
        }
      }
    },
  },
  methods: {
    onPrev() {
      // 上一步
      // 已经是第一步了
      if (this.currentIndex <= 1) {
        return;
      }
      this.check = [];
      --this.currentIndex;
      let pervQuestion = this.questionList[this.currentIndex - 1];
      if (pervQuestion.type == "radio") {
        this.check =
          this.checkList[this.currentIndex - 1].questionnaireQuestionItemIdList;
      } else if (pervQuestion.type == "checkbox") {
        this.checkBox =
          this.checkList[
            this.currentIndex - 1
          ].questionnaireQuestionItemIdList.split(",");
      } else if (pervQuestion.type == "textarea") {
        this.textarea = this.checkList[this.currentIndex - 1].additionalValue;
      } else if (pervQuestion.type == "image") {
        this.imgUrl = this.checkList[this.currentIndex - 1].additionalValue;
        this.imageList = [
          {
            url: this.checkList[this.currentIndex - 1].additionalValue,
          },
        ];
      }
    },
    toggle(index) {
      let selectList = this.questionList[this.currentIndex - 1];
      if (selectList.type == "radio") {
        this.check = index;
      } else if (selectList.type == "checkbox") {
        this.$refs.checkboxes[index].toggle();
      }
    },
    async onSubmit() {
      let selectList = this.questionList[this.currentIndex - 1];
      if (selectList.type == "radio" && !this.check) {
        this.$toast("请回答当前问题");
        return;
      } else if (selectList.type == "checkbox" && this.checkBox.length <= 0) {
        this.$toast("请回答当前问题");
        return;
      } else if (selectList.type == "textarea" && !this.textarea) {
        this.$toast("请回答当前问题");
        return;
      }
      // 判断是否终止
      let answerList = selectList.questionnaireQuestionItemList || []; //当前题的选项
      let currentIsOver = 0; // 是否终止答题
      this.checkBox;
      answerList.forEach((item) => {
        console.log(item, this.check);
        if (selectList.type == "radio" && this.check == item.answerValue) {
          currentIsOver = item.isOver;
        } else if (
          selectList.type == "checkbox" &&
          this.checkBox.includes(item.answerValue + "") &&
          !currentIsOver
        ) {
          currentIsOver = item.isOver;
        }
      });

      // 判断是否在题目列表里面
      if (this.currentIndex <= this.questionList.length) {
        if (selectList.type == "radio") {
          this.checkList[this.currentIndex - 1] = {
            questionnaireQuestionId: selectList.id,
            questionnaireQuestionItemIdList: this.check,
          };
          this.check = null;
        } else if (selectList.type == "checkbox") {
          this.checkList[this.currentIndex - 1] = {
            questionnaireQuestionId: selectList.id,
            questionnaireQuestionItemIdList: this.checkBox.join(","),
          };
          this.checkBox = [];
        } else if (selectList.type == "textarea") {
          this.checkList[this.currentIndex - 1] = {
            questionnaireQuestionId: selectList.id,
            additionalValue: this.textarea,
          };
          this.textarea = null;
        } else if (selectList.type == "image") {
          this.checkList[this.currentIndex - 1] = {
            questionnaireQuestionId: selectList.id,
            additionalValue: this.imgUrl,
          };
          this.imgUrl = "";
          this.imageList = [];
        }

        if (this.currentIndex == this.questionList.length || currentIsOver) {
          // try {
          //   await questionnaireUserResult({
          //     topicId: this.topicId,
          //     activeType: "CLOUD_TEACHER_FEEDBACK",
          //     questionnaireUserResultList: this.checkList,
          //   });
          //   this.showPopup = true;
          // } catch {
          //   //
          // }
          this.$emit("close");
          return;
        }

        this.currentIndex++;
      }
      // 回写信息
      if (this.checkList.length >= this.currentIndex) {
        let selectValue = this.checkList[this.currentIndex - 1];
        let tempList = this.questionList[this.currentIndex - 1];
        if (tempList.type == "radio") {
          this.check = selectValue.questionnaireQuestionItemIdList;
        } else if (tempList.type == "checkbox") {
          this.checkBox =
            selectValue.questionnaireQuestionItemIdList.split(",");
        } else if (tempList.type == "textarea") {
          this.textarea = selectValue.additionalValue;
        }
      }
    },
    popupClose() {
      this.showPopup = false;
      if (browser().isApp) {
        postMessage({ api: "back", content: {} }, () => {});
      } else {
        const { state } = this.$store;
        state.user.status = "init";
      }
    },
    beforeRead(file, name) {
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isLt2M) {
        this.$toast("文件大小不能超过 5MB");
        return false;
      }
      if (name && name == "fileUrl") {
        let arr = ["psd", "ai", "eps", "svg", "sketch"];
        let typeArr = file.name.split(".");
        let type = typeArr[typeArr.length - 1];
        if (arr.indexOf(type) == -1) {
          this.$toast("请上传正确的文件");
          return false;
        }
      }
      return true;
    },
    beforeDelete(file, name, list) {
      this.form[name] = ""; // 上传图片地址为空
      this[list] = [];
      return true;
    },
    async afterRead(file, name, origin) {
      // this.setLoading(true);
      let formData = new FormData();
      formData.append("file", file.file);
      this[name] = name;
      // try {
      //   await uploadFile(formData).then((res) => {
      //     let result = res.data;
      //     if (result.code == 200) {
      //       this[name] = result.data.url;
      //     } else {
      //       this[origin] = [];
      //       this[name] = "";
      //       return false;
      //     }
      //   });
      //   // this.setLoading(false);
      // } catch (err) {
      //   // this.setLoading(false);
      //   return false;
      // }
    },
    noLine(type) {
      if (type == "radio" || type == "checkbox") {
        return "Line";
      } else {
        return "noLine";
      }
    },
  },
  filters: {
    formTypeFormat(type) {
      const template = {
        radio: "单选",
        checkbox: "多选",
        textarea: "问答",
        image: "图片",
      };
      return template[type];
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  padding-bottom: 40px;
}
/deep/.van-tag {
  padding: 2px 9px 2px 5px;
}
.iconfont {
  width: 20px;
  height: 20px;
  font-size: 20px;
  display: inline-block;
}
.icon-tuoyuanxing {
  color: #c0c0c0 !important;
}
.blue {
  background: #e4efff;

  .banner {
    display: block;
    position: relative;
    line-height: 0;
    width: 100%;
    min-height: 170px;
    // background: #5986fd;
    /deep/.van-image__img,
    /deep/.van-image__loading {
      background: #e4efff;
    }
    /deep/.van-image__img {
      width: 375px;
    }
    .title {
      width: 182px;
      height: 80px;
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4c84ea;
      line-height: 40px;
      text-shadow: 0px 2px 4px #e0eaff;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: absolute;
      z-index: 10;
      left: 20px;
      top: 37px;
    }
  }

  .btn-submit {
    // width: 90%;
    height: 45px;
    line-height: 45px;
  }
  .studentInfo {
    margin-top: 12px;
  }
  .questions {
    position: relative;
    margin: 12px 12px 24px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    .form-mark {
      position: absolute;
      left: 0;
      top: 6px;
      z-index: 10;
    }
  }
  .img-icon {
    width: 22px;
    height: 22px;
  }
  .questionName {
    // padding-top: .05rem;
    padding: 15px 0 12px;
    font-size: 16px;
    color: #444;
    font-weight: 500;
    line-height: 1.5;
    span {
      display: block;
      width: 100%;
      text-align: justify;
    }
  }
  /deep/.van-cell {
    padding: 10px 28px;
  }
  /deep/.van-checkbox {
    align-items: flex-start;
  }
  /deep/.van-goods-action {
    position: inherit;
    padding: 0 15px;
    margin: 20px auto 28px;
    .van-goods-action-button--last,
    .van-goods-action-button--first {
      border-radius: 6px;
      margin-right: 0;
      margin-left: 0;
      font-size: 18px;
      font-weight: 500;
    }
    .van-goods-action-button--last {
      margin-left: 6px;
    }
    .van-goods-action-button--first {
      margin-right: 6px;
    }
    .van-goods-action-button--last.van-goods-action-button--first {
      margin-right: 0;
      margin-left: 0;
    }
  }
  .teacher-item {
    padding: 15px 5px;
    margin-top: 5px;
    border-radius: 5px;
    .van-cell__title {
      font-size: 16px;
      color: #444;
      span {
        width: 95%;
        display: block;
        text-align: justify;
      }
    }
    &.selected {
      background-color: #f3f4f8;
    }
  }
  .textareaClass {
    background-color: #f5f5f5;
    padding: 14px 12px;
  }
  /deep/.van-popup {
    width: 80%;
  }
  .popup-success {
    padding: 30px 20px 20px;
    text-align: center;
    img {
      width: 68%;
    }
    .tips {
      padding: 10px 0 25px;
      font-size: 15px;
      color: #808080;
    }
  }
}

.org {
  background: #ffe7cd;
  .banner {
    display: block;
    position: relative;
    line-height: 0;
    width: 100%;
    min-height: 170px;
    // background: #5986fd;
    /deep/.van-image__img,
    /deep/.van-image__loading {
      background: #ffe7cd;
    }
    /deep/.van-image__img {
      width: 375px;
    }
    .title {
      width: 182px;
      height: 80px;
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #fff;
      line-height: 40px;
      text-shadow: 0px 2px 4px #d37a1c;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: absolute;
      z-index: 10;
      left: 20px;
      top: 37px;
    }
  }

  .btn-submit {
    // width: 90%;
    height: 45px;
    line-height: 45px;
  }
  .studentInfo {
    margin-top: 12px;
  }
  .questions {
    position: relative;
    margin: 12px 12px 24px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    .form-mark {
      position: absolute;
      left: 0;
      top: 6px;
      z-index: 10;
    }
  }
  .img-icon {
    width: 22px;
    height: 22px;
  }
  .questionName {
    // padding-top: .05rem;
    padding: 15px 0 12px;
    font-size: 16px;
    color: #444;
    font-weight: 500;
    line-height: 1.5;
    span {
      display: block;
      width: 100%;
      text-align: justify;
    }
  }
  /deep/.van-cell {
    padding: 10px 28px;
  }
  /deep/.van-checkbox {
    align-items: flex-start;
  }
  /deep/.van-goods-action {
    position: inherit;
    padding: 0 15px;
    margin: 20px auto 28px;
    .van-goods-action-button--last,
    .van-goods-action-button--first {
      border-radius: 6px;
      margin-right: 0;
      margin-left: 0;
      font-size: 18px;
      font-weight: 500;
    }
    .van-goods-action-button--last {
      margin-left: 6px;
    }
    .van-goods-action-button--first {
      margin-right: 6px;
    }
    .van-goods-action-button--last.van-goods-action-button--first {
      margin-right: 0;
      margin-left: 0;
    }
  }
  .teacher-item {
    padding: 015px 5px;
    margin-top: 5px;
    border-radius: 5px;
    .van-cell__title {
      font-size: 16px;
      color: #444;
      span {
        width: 95%;
        display: block;
        text-align: justify;
      }
    }
    &.selected {
      background-color: #f3f4f8;
    }
  }
  .textareaClass {
    background-color: #f5f5f5;
    padding: 14px 12px;
  }
  /deep/.van-popup {
    width: 80%;
  }
  .popup-success {
    padding: 30px 20px 20px;
    text-align: center;
    img {
      width: 68%;
    }
    .tips {
      padding: 10px 0 25px;
      font-size: 15px;
      color: #808080;
    }
  }
}
.green {
  background: #e8f8e9;
  .banner {
    display: block;
    position: relative;
    line-height: 0;
    width: 100%;
    min-height: 170px;
    // background: #5986fd;
    /deep/.van-image__img,
    /deep/.van-image__loading {
      background: #e8f8e9;
    }
    /deep/.van-image__img {
      width: 375px;
    }
    .title {
      color: #38843c;
      text-shadow: 0px 2px 4px #d2ffd4;
      width: 182px;
      height: 80px;
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      line-height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: absolute;
      z-index: 10;
      left: 20px;
      top: 37px;
    }
  }

  .btn-submit {
    // width: 90%;
    height: 45px;
    line-height: 45px;
  }
  .studentInfo {
    margin-top: 12px;
  }
  .questions {
    position: relative;
    margin: 12px 12px 24px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    .form-mark {
      position: absolute;
      left: 0;
      top: 6px;
      z-index: 10;
    }
  }
  .img-icon {
    width: 22px;
    height: 22px;
  }
  .questions {
    position: relative;
    margin: 12px 12px 24px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    .form-mark {
      position: absolute;
      left: 0;
      top: 6px;
      z-index: 10;
    }
  }
  .img-icon {
    width: 22px;
    height: 22px;
  }
  .questionName {
    // padding-top: .05rem;
    padding: 15px 0 12px;
    font-size: 16px;
    color: #444;
    font-weight: 500;
    line-height: 1.5;
    span {
      display: block;
      width: 100%;
      text-align: justify;
    }
  }
  /deep/.van-cell {
    padding: 10px 28px;
  }
  /deep/.van-checkbox {
    align-items: flex-start;
  }
  /deep/.van-goods-action {
    position: inherit;
    padding: 0 15px;
    margin: 20px auto 28px;
    .van-goods-action-button--last,
    .van-goods-action-button--first {
      border-radius: 6px;
      margin-right: 0;
      margin-left: 0;
      font-size: 18px;
      font-weight: 500;
    }
    .van-goods-action-button--last {
      margin-left: 6px;
    }
    .van-goods-action-button--first {
      margin-right: 6px;
    }
    .van-goods-action-button--last.van-goods-action-button--first {
      margin-right: 0;
      margin-left: 0;
    }
  }
  .teacher-item {
    padding: 015px 5px;
    margin-top: 5px;
    border-radius: 5px;
    .van-cell__title {
      font-size: 16px;
      color: #444;
      span {
        width: 95%;
        display: block;
        text-align: justify;
      }
    }
    &.selected {
      background-color: #f3f4f8;
    }
  }
  .textareaClass {
    background-color: #f5f5f5;
    padding: 14px 12px;
  }
  /deep/.van-popup {
    width: 80%;
  }
  .popup-success {
    padding: 30px 20px 20px;
    text-align: center;
    img {
      width: 68%;
    }
    .tips {
      padding: 10px 0 25px;
      font-size: 15px;
      color: #808080;
    }
  }
}
.pink {
  background: #f9dfdf;
  .banner {
    display: block;
    position: relative;
    line-height: 0;
    width: 100%;
    min-height: 170px;
    // background: #5986fd;
    /deep/.van-image__img,
    /deep/.van-image__loading {
      background: #f9dfdf;
    }
    /deep/.van-image__img {
      width: 375px;
    }
    .title {
      width: 182px;
      height: 80px;
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #c73862;
      line-height: 40px;
      text-shadow: 0px 2px 4px #ffeaea;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: absolute;
      z-index: 10;
      left: 20px;
      top: 37px;
    }
  }

  .btn-submit {
    // width: 90%;
    height: 45px;
    line-height: 45px;
  }
  .studentInfo {
    margin-top: 12px;
  }
  .questions {
    position: relative;
    margin: 12px 12px 24px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    .form-mark {
      position: absolute;
      left: 0;
      top: 6px;
      z-index: 10;
    }
  }
  .img-icon {
    width: 22px;
    height: 22px;
  }
  .questionName {
    // padding-top: .05rem;
    padding: 15px 0 12px;
    font-size: 16px;
    color: #444;
    font-weight: 500;
    line-height: 1.5;
    span {
      display: block;
      width: 100%;
      text-align: justify;
    }
  }
  /deep/.van-cell {
    padding: 10px 28px;
  }
  /deep/.van-checkbox {
    align-items: flex-start;
  }
  /deep/.van-goods-action {
    position: inherit;
    padding: 0 15px;
    margin: 20px auto 28px;
    .van-goods-action-button--last,
    .van-goods-action-button--first {
      border-radius: 6px;
      margin-right: 0;
      margin-left: 0;
      font-size: 18px;
      font-weight: 500;
    }
    .van-goods-action-button--last {
      margin-left: 6px;
    }
    .van-goods-action-button--first {
      margin-right: 6px;
    }
    .van-goods-action-button--last.van-goods-action-button--first {
      margin-right: 0;
      margin-left: 0;
    }
  }
  .teacher-item {
    padding: 015px 5px;
    margin-top: 5px;
    border-radius: 5px;
    .van-cell__title {
      font-size: 16px;
      color: #444;
      span {
        width: 95%;
        display: block;
        text-align: justify;
      }
    }
    &.selected {
      background-color: #f3f4f8;
    }
  }
  .textareaClass {
    background-color: #f5f5f5;
    padding: 14px 12px;
  }
  /deep/.van-popup {
    width: 80%;
  }
  .popup-success {
    padding: 30px 20px 20px;
    text-align: center;
    img {
      width: 68%;
    }
    .tips {
      padding: 10px 0 25px;
      font-size: 15px;
      color: #808080;
    }
  }
}

.questions {
  .van-cell--borderless {
    // padding-bottom: 0;
    &::after {
      border-bottom: 1px solid #f0f0f0;
    }
  }
}
.questionName {
  padding-bottom: 0 !important;
}
.questionName.require {
  span {
    position: relative;
    &::before {
      content: "*";
      color: #ee0a24;
      position: absolute;
      left: -8px;
      top: 2px;
    }
  }
}
.van-cell--required {
  &::before {
    content: "";
  }
}
.textarea {
  /deep/.van-field__value {
    background-color: #f5f5f5;
    padding: 14px 12px;
  }
}
.uploaderBox {
  img {
    margin-top: 10px;
    margin-bottom: 15px;
    width: 76px;
  }
}
.uploaderTitle {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}
.noLine {
  &::after {
    border: none;
  }
}
/deep/.van-cell {
  padding: 10px 28px 24px;
}
.Line,
.noLine {
  padding: 10px 28px 16px;
}
/deep/.van-checkbox__icon,
/deep/.van-radio__icon {
  padding: 1px;
}
</style>