nml_mobile/src/pages/stxkjs/stxk_js_classdetail/index.vue

<template>
  <div class="class-detail">
    <van-nav-bar title="课程详情" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="detail" v-if="classdetail.khfw_kcgl">
      <h3 class="title">{{ classdetail.khfw_kcgl.kk_name }}</h3>
      <p class="text-3vw text-gray-500 my-2">
        <span>主讲 : {{ classdetail.teach_info.kkb_zjjs_xm }}</span>
      </p>
      <p class="text-3vw text-gray-500 my-2">
        <span>地点：{{ classdetail.teach_info.kj_name }}</span>
      </p>
      <p class="date">
        <span>{{ classdetail.kkbk_starttime }} - {{ classdetail.kkbk_endtime }}</span> <span class="ml-2">课时: {{
          classdetail.khfw_kcgl.kk_kss }}</span>
      </p>
      <div v-for="ja in classdetail.ja" :key="ja" class="plan-file">
        <a :href="resolveSingleFileString(ja.kkj_fj).url">课程教案：{{ resolveSingleFileString(ja.kkj_fj).name }}
        </a>
      </div>
      <p class="des" v-html="classdetail.khfw_kcgl.kk_kcjj"></p>
      <van-tabs v-model:active="activeName" shrink background="#fff">
        <van-tab class="rollname" title="上课点名" name="a">
          <span class="stu-num">上课人数：{{ classdetail.member.length }}</span>
          <div class="students">
            <span class="stu-name" @click="selectStudent(stu)"
              :class="{ redName: stu.kccq_cqycztbh == 2 || stu.is_cq == 2 }" v-for="stu in classdetail.member"
              :key="stu">{{ stu.kkbm_s_realname }} {{ stu.kkbm_s_class_name }}
              <i v-show="stu.kccq_cqycztbh == 2"></i></span>

            <!-- <div class="check">
              <input :disabled="plusCheck" type="checkbox" v-model="isTellCheck" />
              <p>未到</p>
            </div>
            <div class="check">
              <input :disabled="isTellCheck" type="checkbox" v-model="plusCheck" />
              <p>补卡</p>
            </div> -->
          </div>
          <van-checkbox-group v-model="checked" @change="checkChange" direction="horizontal" class="text-3.5vw mt-5">
            <van-checkbox name="1" shape="square" icon-size="4vw" class="text-blue-500">未到</van-checkbox>
            <van-checkbox name="2" shape="square" icon-size="4vw">补卡</van-checkbox>
          </van-checkbox-group>
          <div class="submit">
            <button @click="submitDM(classdetail.member)">提交</button>
          </div>
        </van-tab>
        <van-tab class="feedback" title="课程情况反馈" name="b">
          <div class="unback" v-if="Object.keys(classdetail.fk).length == 0">
            <textarea v-model="textMessage" placeholder="请输入课程情况反馈内容..." class="textarea"></textarea>
            <p class="up-pic">上传照片</p>
            <div class="relative w-25vw h-25vw">
              <div class="w-full h-full bg-gray-100 text-center leading-25vw text-30px text-gray-500">
                <van-loading class="absolute loading_center" v-if="img_loading" color="#1989fa" />
                <span v-else>+</span>
              </div>
              <input ref="fileRef" title="上传文件" type='file' multiple name="file"
                class="file-input absolute top-0 left-0 w-25vw h-25vw" @change="fkUpload($event)"
                accept="image/png, image/jpeg, image/jpg, .svs" />
            </div>
            <div v-if="kkk_img.length > 0" class="flex flex-wrap">
              <div class="w-30vw mr-2 my-2 relative" v-for="(m, i) in kkk_img" :key="i">
                <img class="w-full" :src="https + m.split(',')[1]" alt="">
                <div
                  class="w-20px h-20px border-red-500 border-1 rounded-1/2 bg-red-500 text-white absolute -top-5px -right-5px text-center text-25px leading-16px cursor-pointer"
                  @click="deleteFkimg(i)">×</div>
              </div>
            </div>
            <!-- <van-uploader v-model="fileList" :after-read="afterRead">
              <template #preview-cover="{ file }">
                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
              </template>
            </van-uploader> -->
            <div @click="(back = false), fkback()" class="submit">
              <button>提交</button>
            </div>
            <p class="tip">*课堂反馈是能提交一次</p>
          </div>
          <div class="backed" v-else>
            <p>
              {{ classdetail.fk.kkk_content }}
            </p>
            <div class="backImg">
              <img v-for="img in classdetail.fk.kkk_img.split(';')" :key="img" :src="https + img.split(',')[1]" />
            </div>
            <div class="submit submited">
              <button>已提交课堂反馈</button>
            </div>
          </div>
        </van-tab>
        <van-tab title="错到学生" name="c">
          <button @click="addCd" style="border-color: #003eee; color: #003eee"
            class="w-full h-10 border border-solid rounded-35px font-size-26">
            + 添加错到学生
          </button>
          <ul v-if="cdsx.length != 0" class="wrongstudent p-2">
            <li class="w-full h-8 leading-5 border-grey-bottom relative flex justify-between" v-for="c in cdsx"
              :key="c.kkc_user_id">
              <span style="color: #000" class="text-4.2vw">{{
                c.kkc_user_realname
              }}</span>
              <span style="color: #9f9f9f" class="text-4.2vw color-3">{{
                c.kkc_class_name
              }}</span>
              <span style="color: #9f9f9f" class="text-4.2vw color-3">{{
                c.kk_name_right
              }}</span>
              <span @click="delCd(c)" class="order-icon cursor-pointer del"></span>
            </li>
          </ul>
          <div class="p-10 none" v-else>
            <img class="w-full" src="../../../assets/images/none.png" alt="" />
            <span class="none-text" style="color: #9f9f9f">暂无错到学生</span>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div v-show="show" class="cover"></div>
    <div v-show="addStu" class="addStu">
      <span class="cha" @click="(addStu = false), (show = false)" name="cross" size="0.2*13.3vw">×</span>
      <div class="title">
        <h3>错到学生</h3>
      </div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <select @change="njChange" class="w-full bg-light-100" v-model="grade">
            <option value="" label="请选择年级">请选择年级</option>
            <option v-for="n in nj" :key="n.grade" :value="n.grade" :label="n.gradename">
              {{ n.gradename }}
            </option>
          </select>
          <select @change="classChange" class="w-full bg-light-100" v-model="classes">
            <option value="" label="请选择班级">请选择班级</option>
            <option v-for="b in bj" :key="b.cm_id" :value="b.cm_id" :label="b.cm_name">
              {{ b.cm_name }}
            </option>
          </select>
          <select @change="stuChange" class="w-full bg-light-100" :disabled="studentFlag" v-model="student">
            <option value="" label="请选择学生">请选择学生</option>
            <option v-for="s in stu" :key="s.user_id" :value="s.user_id" :label="s.realname">
              {{ s.realname }}
            </option>
          </select>
          <div style="position: relative">
            <input class="w-full pl-1.5" style="color: #9f9f9f" v-model="szst" label="所在社团名称(默认)" placeholder="所在社团名称" />
            <van-loading v-show="studentFlag" class="load" />
          </div>

          <input class="w-full pl-1.5" style="color: #9f9f9f" v-model="classdetail.kkb_name" disabled label="误入社团名称"
            placeholder="误入社团名称" />
        </van-cell-group>
        <div class="btn" style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import {
  stxkjs_detail,
  stxkjs_check,
  stxkjs_back,
  stxkjs_delete,
  cdxs_list,
  cdxs_delete,
  grade_list,
  grade_detail,
  kcbm_list,
  cdxs_add,
  stxk_repair,
} from "./api";
import { stxk_up } from "../api";
import { ref, reactive, nextTick } from "vue";
import { useRoute } from "vue-router";
import { showConfirmDialog, showToast } from "vant";
import { user } from "../../../store/user";
import getTeamInfo from "~/store/team";
import { resolveSingleFileString, resolveFileString } from "~/utils/helper";
let https = ref(window.GLOBAL_CONFIG.api);
const $route = useRoute();
const onClickLeft = () => history.back();
const activeName = ref("a");
const textMessage = ref("");
const fileList = ref([]);
const redCheck = ref(0); //点名
const que = ref(0);
const back = ref(true); //课堂反馈是否提交
const isTellCheck = ref(false);
let plusCheck = $ref(false);
// let pic = ref("");

const classdetail = ref({});
const img = ref([]);
//课程详情
const detailData = reactive({
  kkbk_id: $route.params.kkbk_id,
});
function getDetail() {
  stxkjs_detail(detailData).then((res) => {
    classdetail.value = res.data.one_info;
    cdList();
  });
}
getDetail();

//#region 点名
let user_ids = [];
let checked = $ref([]);
function checkChange(e) {
  if (e.length == '2') {
    e.splice(0, 1)
  }
}
function selectStudent(stu) {
  // console.log(stu);
  if (stu.kccq_cqycztbh == 2) {
    console.log(1111);
    stu.kccq_cqycztbh = 0;
    stu.is_cq = 0;
    let index = user_ids.indexOf(stu.kkbm_s_user_id);
    user_ids.splice(index, 1);
  } else {
    console.log(22222);
    stu.kccq_cqycztbh = 2;
    stu.is_cq = 2;
    user_ids.push(stu.kkbm_s_user_id);
  }
}
let memberMsg = ref([]);
function submitDM(member) {
  member.forEach((item) => {
    memberMsg.value.push({
      kccq_cqycxsbh: item.kkbm_s_user_id,
      kccq_cqycxsxm: item.kkbm_s_realname,
      kccq_cqycztbh: item.kccq_cqycztbh,
    });
  });
  if (checked.length == '0') {
    if (user_ids.length == '0' && classdetail.value.dm?.qdqk?.length == 0 && classdetail.value.member.length > 0) {
      return showToast('所有学生已到!')
    } else {
      return showToast('请选择未到或补卡');
    }
  } else if (checked.length == '2') {
    return showToast('未到 补卡 二选一')
  } else {
    if (checked == "1") {
      const data = {
        member: memberMsg.value,
        kkbk_id: detailData.kkbk_id,
        sendmsg: isTellCheck.value ? 1 : 0,
        kccq_sfydm: 2,
      };
      stxkjs_check(data).then((res) => {
        showToast(res.msg);
        getDetail();
      });
    } else if (checked == "2") {
      console.log(classdetail.value.dm.qdqk.length);
      if (classdetail.value.dm.qdqk.length > 0) {
        console.log(111111111);
        classdetail.value.dm?.qdqk.forEach(val => {
          user_ids.push(val.kkbm_s_user_id)
        })
      }
      console.log(user_ids);
      let repairData = {
        kkbk_id: detailData.kkbk_id,
        user_ids: user_ids.join(","),
        kccq_sfydm: 2,
      };
      console.log(user_ids);
      stxk_repair(repairData).then((res) => {
        if (res.code == "1") {
          showToast(res.msg);
          getDetail();
        }
      });
    }
    checked = [];
  }

}
// #endregion

// 课堂反馈图片上传
let img_loading = $ref(false);
let kkq_id = "";
let kkk_img = $ref([]);
function fkUpload(e) {
  img_loading = true;
  console.log('上传文件列表', e.target.files)
  let file = [];
  console.log(typeof e.target.files);
  Array.from(e.target.files).forEach(item => {
    stxk_up({ file: item }).then((res) => {
      if (res.code == '1') {
        showToast(res.msg)
        kkk_img.push(res.data.file_name + "," + res.data.url);
        console.log(kkk_img);
        img_loading = false;
      }else{
        showToast(res.msg);
        img_loading = false;
      }
    });
  })
}
function deleteFkimg(i) {
  showConfirmDialog({
    title: '删除该图片',
    message:
      '确认删除?',
  })
    .then(() => {
      kkk_img.splice(i, 1);
      showToast('操作成功~')
    })
    .catch(() => {
      showToast('取消操作~')
    });

}
const afterRead = (fileList) => {
  const { file } = fileList;
  console.log(file);
  file.status = "uploading";
  stxk_up({ file: file }).then((res) => {
    if (res.code == '1') {
      kkk_img.push(res.data.file_name + "," + res.data.url);
      file.status = "done";
    }
  });
};
// 课堂反馈提交
function fkback() {
  // if(!textMessage.value)
  // {
  //   return showToast("反馈原因必填")
  // }
  const backData = {
    khfw_kcbkb_kcqkfk: {
      kkb_id: classdetail.value.kkb_id,
      kkbk_id: detailData.kkbk_id,
      kkbk_sszt: classdetail.value.kkbk_sszt,
      kkk_content: textMessage.value,
      kkk_img: kkk_img.join(";"),
    },
  };
  stxkjs_back(backData).then((res) => {
    getDetail();
  });
}

let cdsx = $ref([]);
// 错到学生列表
function cdList() {
  let data = {
    kk_id_error: classdetail.value?.khfw_kcgl?.kk_id,
    kkc_sszt: classdetail.value?.kkbk_sszt,
  };
  console.log(data);
  cdxs_list(data).then((res) => {
    cdsx = res.data.page_data;
  });
}

const show = ref(false);
let grade = $ref("");
let classes = $ref("");
let nj = $ref([]);
let bj = $ref([]);
let addStu = ref(false);
// 选择年级
function njChange(e) {
  for (var i = 0; i < nj.length; i++) {
    var oneSubject = nj[i];
    if (grade === oneSubject.grade) {
      bj = oneSubject.classes;
    }
  }
}
// 选择班级
let stu = $ref([]);
let student = $ref("");
function classChange(e) {
  let data;
  bj.forEach((item) => {
    if (classes === item.cm_id) {
      data = {
        cm_id: item.cm_id,
      };
      grade_detail(data).then((res) => {
        stu = res.data.one_info.students;
      });
    }
  });
}
let szst = $ref("");
let szst_id;
let loading = $ref(true);
let kxq_code = "";
getTeamInfo.then((res) => {
  kxq_code = res.kxq_code;
  loading = false;
});
// 选择学生
let xs = $ref([]);
let studentFlag = $ref(false);
function stuChange(e) {
  szst = "";
  szst_id = "";
  let data = {
    kxq_code,
    kkbm_s_user_id: student,
  };
  studentFlag = true;
  kcbm_list(data).then((res) => {
    if (res.code == 1) {
      studentFlag = false;
    }
    if (res.data.page_data.length === 0) {
      showToast("该生未报社团");
    } else {
      xs = res.data.page_data;
      xs.forEach((item) => {
        if (item.kkbm_s_user_id === student) {
          szst = item.kk_name;
          szst_id = item.kk_id;
        }
      });
    }
  });
}
// let st_name = $ref("");
// 添加错到学生弹窗
function addCd() {
  show.value = true;
  addStu.value = true;
  grade = "";
  classes = "";
  student = "";
  szst = "";
  let data = {
    sm_id: user.sm_info.sm_id,
  };
  grade_list(data).then((res) => {
    nj = res.data;
  });
}
// 提交
function onSubmit() {
  if (!grade || !classes || !student || !szst) {
    showToast("信息未填写完整");
    return;
  }
  let grade_name;
  let class_name;
  let stu_name;
  nj.forEach((item) => {
    if (item.grade === grade) {
      grade_name = item.gradename;
    }
  });
  bj.forEach((item) => {
    if (item.cm_id === classes) {
      class_name = item.cm_name;
    }
  });
  stu.forEach((item) => {
    if (item.user_id === student) {
      stu_name = item.realname;
    }
  });
  let data = {
    khfw_kcbkb_cdxs: {
      kkc_grade_id: grade,
      kkc_grade_name: grade_name,
      kkc_cm_id: classes,
      kkc_class_name: class_name,
      kkc_user_realname: stu_name,
      kkc_user_id: student,
      kk_id_right: szst_id,
      kk_name_right: szst,
      kkbk_id: classdetail.value?.kkbk_id,
      kk_id_error: classdetail.value?.khfw_kcgl?.kk_id,
      kk_name_error: classdetail.value?.khfw_kcgl?.kk_name,
      kkc_sszt: classdetail.value.kkbk_sszt,
    },
  };
  cdxs_add(data).then((res) => {
    cdList();
    show.value = false;
    addStu.value = false;
  });
}
// 删除错到学生
function delCd(c) {
  let data = {
    kkc_id: c.kkc_id,
  };
  cdxs_delete(data).then((res) => {
    console.log(res);
    cdList();
  });
}
</script>

<style lang="scss" scoped>
* {
  font-family: PingFang-SC-Regular;
  --van-padding-xs: 0;
}

.file-input {
  display: inline-block;
  color: #fff;
  // padding: 8px 10px 0px 30px;
  // width: 40px;
  font-size: 20px;
  background: url();
  opacity: 0;
  z-index: 100;
}

.loading_center {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.class-detail {
  background-color: #fff;
  min-width: 3.75 * 13.3vw;
  min-height: 100vh;

  .detail {
    width: 100%;
    padding: 0.25 * 13.3vw 0.4 * 13.3vw;
    box-sizing: border-box;

    .title {
      font-size: 0.3 * 13.3vw;
      color: #2d2d2d;
      letter-spacing: 0.025 * 13.3vw;
    }

    .date {
      font-size: 0.28 * 13.3vw;
      color: #969696;
      margin: 0.2 * 13.3vw 0;
    }

    .plan-file {
      font-size: 0.28 * 13.3vw;
      color: #0036ff;
      line-height: 0.3 * 13.3vw;
    }

    .des {
      width: 7 * 13.3vw;
      font-size: 0.24 * 13.3vw;
      color: #7f7f7f;
      letter-spacing: 0.02 * 13.3vw;
      line-height: 0.4 * 13.3vw;
    }
  }
}

::v-deep .van-nav-bar {
  width: 100%;
  height: 1 * 13.3vw;
  line-height: 1 * 13.3vw;
  background-color: #003eee;

  .van-nav-bar__title {
    color: #fff !important;
    font-size: 0.36 * 13.3vw;
    font-weight: 350;
  }
}

::v-deep .van-tabs {
  .van-tab__text {
    font-size: 0.3 * 13.3vw;
    font-weight: 400;
    color: #333333;
    line-height: 0.36 * 13.3vw;
    z-index: 5;
  }

  .van-tabs__nav {
    .van-tab {
      margin-right: 0.4 * 13.3vw;
      border-bottom: 0.1 * 13.3vw solid rgba(0, 0, 0, 0);
    }

    .van-tab--active {
      font-weight: 400;
      box-sizing: border-box;

      .van-tab__text {
        position: relative;
      }

      .van-tab__text::after {
        position: absolute;
        bottom: -0.08 * 13.3vw;
        left: -0.03 * 13.3vw;
        content: "";
        width: 105%;
        height: 0.2 * 13.3vw;
        background-color: #c5c5ff;
        opacity: 0.6;
        border-radius: 0.1 * 13.3vw;
      }
    }
  }

  .van-tabs__line {
    background: unset;
  }

  .van-tabs__content {
    margin-top: 0.1 * 13.3vw;
    line-height: 0;
    padding: 0.2 * 13.3vw 0;

    .stu-num {
      padding-left: 0.1 * 13.3vw;
      font-size: 0.28 * 13.3vw;
      font-weight: 400;
      color: #7f7f7f;
      letter-spacing: 0.023px;
    }

    .students {
      margin-top: 0.3 * 13.3vw;
      display: flex;
      flex-wrap: wrap;

      // height: 4vw;
      .stu-name {
        // display: inline-block;
        padding: 0.05 * 13.3vw 0.08 * 13.3vw;
        line-height: 0.4 * 13.3vw;
        margin: 0.08 * 13.3vw;
        text-align: center;
        font-size: 0.24 * 13.3vw;
        color: #003adf;
        border: 1px solid #003eee;
        border-radius: 0.03 * 13.3vw;
        letter-spacing: 0.02 * 13.3vw;
        position: relative;

        i {
          display: block;
          width: 0;
          height: 0;
          line-height: 0.1 * 13.3vw;
          font-size: 0.01 * 13.3vw;
          border: 0.14 * 13.3vw solid;
          border-color: red red transparent transparent;
          border-radius: 0 0.03 * 13.3vw;
          position: absolute;
          top: 0;
          right: 0;
          color: #fff;
        }
      }

      .redName {
        color: #e64545;
        border: 1px solid #e64545 !important;
      }

      .check {
        margin-top: 0.1 * 13.3vw;
        height: 0.4 * 13.3vw;
        line-height: 0.4 * 13.3vw;
        display: flex;

        p {
          margin-left: 0.1 * 13.3vw;
          font-size: 0.24 * 13.3vw;
          color: #0036ff;
          letter-spacing: 0.02 * 13.3vw;
        }
      }
    }

    .submit {
      text-align: center;
      margin-top: 0.4 * 13.3vw;

      button {
        width: 5 * 13.3vw;
        height: 0.68 * 13.3vw;
        background: #003eee;
        border-radius: 0.34 * 13.3vw;
        color: #fff;
        font-size: 0.34 * 13.3vw;
      }
    }

    .textarea {
      resize: none;
      appearance: none;
      padding: 0.12 * 13.3vw;
      box-sizing: border-box;
      border-radius: 0.06 * 13.3vw;
      margin-bottom: 0.12 * 13.3vw;
      width: 6.8 * 13.3vw;
      height: 2.78 * 13.3vw;
      line-height: 0.3 * 13.3vw;
      font-size: 0.28 * 13.3vw;
      background-color: #f8f8f8;
    }

    .up-pic {
      height: 0.37 * 13.3vw;
      font-size: 0.28 * 13.3vw;
      color: #000000;
      line-height: 0.4 * 13.3vw;
      margin: 0.3 * 13.3vw 0;
    }

    .backed {
      p {
        width: 7 * 13.3vw;
        font-size: 0.24 * 13.3vw;
        color: #7f7f7f;
        letter-spacing: 0.02 * 13.3vw;
        line-height: 0.4 * 13.3vw;
      }

      .backImg {
        width: 6.75 * 13.3vw;
        display: flex;

        img {
          width: 1.8 * 13.3vw;
          margin: 0.5 * 13.3vw 0.14 * 13.3vw 0.5 * 13.3vw 0;
        }
      }

      .submited {
        button {
          background-color: #dfdfdf;
        }
      }
    }

    .wrongstudent {
      .order-icon {
        display: inline-block;
        vertical-align: top;
        width: 4.5vw;
        height: 4.5vw;
        background: url("@/assets/images/del.png") center no-repeat;
        background-size: 100%;
      }

      .del {
        float: right;
      }
    }
  }

  .tip {
    font-size: 0.2 * 13.3vw;
    color: #ff0000;
    margin: 0.3 * 13.3vw 0 0 0.8 * 13.3vw;
  }
}

::v-deep .van-uploader__wrapper {
  flex-direction: row-reverse;

  .van-uploader__preview {
    .van-image {
      overflow: unset;
    }

    .van-uploader__preview-delete {
      width: 0.42 * 13.3vw;
      height: 0.42 * 13.3vw;
      border-radius: 50%;
      position: absolute;
      top: -0.15 * 13.3vw;
      right: -0.15 * 13.3vw;
      background-color: #e64545;

      .van-icon-cross {
        display: none;
      }
    }

    .van-uploader__preview-delete::before {
      content: "";
      position: absolute;
      width: 0.26 * 13.3vw;
      height: 0.03 * 13.3vw;
      border-radius: 0.03 * 13.3vw;
      background-color: #fff;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  }
}

.cover {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  opacity: 0.3;
}

.addStu {
  width: 7 * 13.3vw;
  color: #333333;
  background-color: #fff;
  position: fixed;
  top: 2 * 13.3vw;
  left: 0.3 * 13.3vw;
  border-radius: 0.1 * 13.3vw;
  z-index: 10;
  box-sizing: border-box;

  .title {
    height: 1 * 13.3vw;
    line-height: 1 * 13.3vw;

    h3 {
      width: 1.5 * 13.3vw;
      text-align: center;
      font-size: 0.3 * 13.3vw;
      position: relative;
      z-index: 5;
    }

    h3::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 0.2 * 13.3vw;
      bottom: 0.2 * 13.3vw;
      left: 0.02 * 13.3vw;
      border-radius: 0.1 * 13.3vw;
      background-color: #c5c5ff;
      opacity: 0.6;
    }
  }
}

.none {
  position: relative;

  .none-text {
    position: absolute;
    bottom: 1 * 13.3vw;
    left: 2.4 * 13.3vw;
  }
}

.van-form {
  padding: 0;
  box-sizing: border-box;

  .van-cell-group {
    width: 100%;
    margin: 0;
    padding: 0.05 * 13.3vw 0.2 * 13.3vw;
    box-sizing: border-box;
    background-color: #f2f2f2;
  }

  select,
  input {
    height: 0.8 * 13.3vw;
    margin-top: 0.2 * 13.3vw;
    border-radius: 0.08 * 13.3vw;
  }

  .van-button {
    margin-top: 1 * 13.3vw;
    box-sizing: border-box;
  }
}

.cha {
  display: block;
  width: 0.4 * 13.3vw;
  height: 0.4 * 13.3vw;
  font-size: 0.5 * 13.3vw;
  position: absolute;
  right: 0.2 * 13.3vw;
  top: 0.2 * 13.3vw;
  cursor: pointer;
}

::v-deep .MsoNormal {
  span {
    font-size: 3.74vw !important;
    color: #7f7f7f;
    font-family: PingFang-SC-Regular;
  }
}

.load {
  position: absolute;
  top: 0.32 * 13.3vw;
  right: 0.3 * 13.3vw;
}</style>