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

<template>
  <div :class="theme" class="wrap">
    <div class="banner">
      <van-image :src="banner" class="banner" width="375">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <h2 class="title">校管乐团启蒙课 调查问卷</h2>
    </div>
    <studentInfo v-if="form.loginFlag" class="studentInfo" />
    <van-form @submit="onSubmit"  ref="form">
      <div class="questions" v-for="(item, index) in questionList" :key="index">
        <van-tag class="form-mark" :color="themeColor" mark type="primary">{{
          item["type"] | formTypeFormat
        }}</van-tag>
        <van-cell-group :border="false">
          <van-cell
            :title-class="['questionName', item['isRequire'] ? 'require' : '']"
            :title="item['content']"
          />
          <van-field
            v-if="item['type'] != 'textarea'"
            :border="false"
            :name="item.id + ''"
            :rules="[
              {
                required: item['isRequire'] ? true : false,
                message: getErrorMsg(item),
              },
            ]"
          >
            <template #input>
              <div style="width: 100%">
                <van-radio-group
                  v-model="form[item.id]"
                  v-if="item['type'] == 'radio'"
                >
                  <van-cell-group :border="false">
                    <van-cell
                      :border="false"
                      v-for="item in item['questionnaireQuestionItemList']"
                      :clickable="true"
                      :key="item.id"
                      :title="item.answerValue"
                      class="teacher-item"
                      @click="toggle(item.id)"
                    >
                      <template #right-icon>
                        <van-radio :name="item.id">
                          <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="form[item.id]"
                  v-if="item['type'] == 'checkbox'"
                >
                  <van-cell-group :border="false">
                    <van-cell
                      :border="false"
                      v-for="(item, index) in item[
                        'questionnaireQuestionItemList'
                      ]"
                      :clickable="true"
                      :key="item.id"
                      :title="item.answerValue"
                      class="teacher-item"
                      @click="toggle(index)"
                    >
                      <template #right-icon>
                        <van-checkbox
                          shape="square"
                          :name="
                            item.id ? item.id.toString() : 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="item['type'] == 'image'">
                  <van-uploader
                    v-model="list[item.id]"
                    :max-count="1"
                    :before-delete="
                      (file) => {
                        beforeDelete(file, item.id + '', item.id);
                      }
                    "
                    :before-read="beforeRead"
                    :after-read="
                      (file) => {
                        afterRead(file, item.id, item.id);
                      }
                    "
                    accept="image/*"
                  >
                    <div class="uploaderBox">
                      <img src="../images/imageIcon.png" alt="" />
                    </div>
                  </van-uploader>
                  <!-- </van-button> -->
                  <p class="uploaderTitle">请上传5M内的图片文件</p>
                </div>

                <!-- <div v-if="item['type'] == 'file'">
                  <van-uploader
                    v-model="list[item.id]"
                    :max-count="1"
                    accept="*"
                    :before-delete="
                      (file) => {
                        beforeDelete(file, item.id, item.id);
                      }
                    "
                    :before-read="
                      (file) => {
                        return beforeRead(file, item.type);
                      }
                    "
                    :after-read="
                      (file) => {
                        afterRead(file, item.id, item.id);
                      }
                    "
                  >
                    <div class="uploaderBox">
                      <img src="../images/fileIcon.png" alt="" />
                      <p>点击上传</p>
                    </div>
                  </van-uploader>
                  <p class="uploaderTitle">
                    请上传5M以内的psd、ai、eps、svg、sketch类型文件
                  </p>
                </div> -->
              </div>
            </template>
          </van-field>

          <div v-if="item['type'] == 'textarea'">
            <!--  class="textareaClass" -->
            <van-field
              v-model="form[item.id]"
              :name="item.id + ''"
              :rules="[
                {
                  required: item['isRequire'] ? true : false,
                  message: getErrorMsg(item),
                },
              ]"
              rows="4"
              autosize
              maxlength="255"
              type="textarea"
              class="textarea"
              placeholder="请写下您的使用感受或建议～"
            />
          </div>
        </van-cell-group>
      </div>
    </van-form>
    <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="item['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"
        type="primary"
        @click="onSubmit"
        text="提交"
      />
    </van-goods-action>
    <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: 2,
         questionList: [{type:'',content:''}],
         list:''
    };
  },
  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;
      }
    },
    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();
      }
    },
      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);
      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;
      }
    },
    async onSubmit() {
      this.$emit('close')
      // 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;
      // }
      // 判断是否在题目列表里面
      // 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;
      //   }

      //   if (this.currentIndex == this.questionList.length) {
      //     // try {
      //     //   await questionnaireUserResult({
      //     //     topicId: this.topicId,
      //     //     activeType: "CLOUD_TEACHER_FEEDBACK",
      //     //     questionnaireUserResultList: this.checkList,
      //     //   });
      //     //   this.showPopup = true;
      //     // } catch {
      //     //   //
      //     // }
      //     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";
      }
    },
        getErrorMsg(item) {
      if (item.type == "radio") {
        return "请选择此题目";
      } else if (item.type == "checkbox") {
        return "请选择此题目";
      } else {
        return "";
      }
    },
  },
  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;
     background: #e4efff;
    .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;
      background: #ffe7cd;
    .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;
      background: #e8f8e9;
    .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;
    background: #f9dfdf;
    .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;
}
</style>