<template>
  <div class="all">
    <div class="stxk-teacher">
      <van-nav-bar
        title="社团选课"
        left-text=""
        :right-text="rightText"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <van-dialog
        v-model:show="manageShow"
        title="班主任所属班级"
        confirmButtonText="取消"
      >
        <p
          style="width: 100%; padding: 15px; text-align: center; color: blue"
          v-show="c.is_manage == 1"
          v-for="c in user.cm_info"
          :key="c"
        >
          <router-link
            :to="{
              path: '/stxkbzr',
              query: {
                cm_id: c.cm_id,
              },
            }"
          >
            班级： {{ c.cm_name }}
          </router-link>
        </p>
      </van-dialog>

      <div class="week">
        <ul class="weekday">
          <li
            @click="(state.week = week.name), (state.showIndex = index)"
            :class="[state.week == week.name ? 'dayblue' : '']"
            v-for="(week, index) in classWeek"
            :key="week"
          >
            <p class="day">{{ week.name }}</p>
            <div class="dot">
              <div
                v-for="(dot, index) in week.course"
                v-show="index < 3"
                :key="dot"
                :class="[
                  index == 1 ? 'dot-orange' : '',
                  index == 2 ? 'dot-purple' : '',
                  index == 0 ? 'dot-blue' : '',
                  index == 3 ? 'dot-green' : '',
                ]"
              ></div>
            </div>
          </li>
        </ul>
        <div class="slide"></div>
      </div>
      <div
        v-show="state.showIndex === index"
        v-for="(week, index) in classWeek"
        :key="week"
        class="class"
      >
        <div class="class-num">课程数量（{{ week.course.length }}）</div>
        <ul class="class-content">
          <li v-for="c in week.course" :key="c">
            <div class="cc-color"></div>
            <h3 class="c-name">{{ c.khfw_kcbgl.kk_name }}</h3>
            <p class="c-detail">
              <span>主讲：{{ c.khfw_kcbgl.kkb_zjjs_xm }}</span>
              <span> 地点：{{ c.khfw_kcbgl.kj_name }}</span>
              <span> 课时数: {{ c.khfw_kcgl.kk_kss }}</span>
            </p>
            <div class="c-date">
              <span class="date"
                ><van-icon name="clock-o" />{{ c.kkbk_starttime }} -
                {{ c.kkbk_endtime }}</span
              >
              <div class="active">
                <div class="teach-plan">
                  <span
                    class="cursor-pointer"
                    @click="(planShow = true), (show = true), upPlan(c)"
                    >上传教案</span
                  >
                </div>
                <div class="teach-signIn">
                  <span
                    class="cursor-pointer"
                    v-if="c.is_qd.kkq_zt == 0 || c.is_qd.kkq_zt == -1"
                    @click="apply(c)"
                    >申请</span
                  >
                  <span
                    class="cursor-pointer"
                    v-if="c.is_qd.kkq_zt == 2"
                    @click="applied()"
                    >已申请</span
                  >
                  <span
                    class="cursor-pointer"
                    v-if="c.is_qd.kkq_zt == 3"
                    @click="(signShow = true), (show = true), beginSign(c)"
                    >签到</span
                  >
                  <span
                    class="cursor-pointer"
                    v-if="c.is_qd.kkq_zt == 4"
                    @click="(signShow = true), (show = true), endSign(c)"
                    >已签到</span
                  >
                </div>
                <span class="findmore">
                  <router-link
                    :to="{
                      name: 'stxk_teacher_class',
                      params: {
                        kkbk_id: c.kkbk_id,
                      },
                    }"
                  >
                    查看详情
                  </router-link>
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-show="show" class="cover"></div>
      <!-- 上传教案 -->
      <div class="plan-nav" v-show="planShow">
        <van-icon
          class="cha"
          @click="(planShow = false), (show = false)"
          name="cross"
          size="0.2*13.3vw"
        />
        <h3>上传教案</h3>
        <p class="rule">支持的格式:jpg,png,pdf,word,ppt</p>
        <div v-if="plan">
          <div class="upload">
            <van-uploader
              v-model="jafile"
              :after-read="upja"
              :preview-image="false"
              accept=".jpg,.png,.pdf,.word,.ppt,doc,.docx"
            >
              <van-button
                icon="plus"
                round
                size="mini"
                type="primary"
              ></van-button>
              点击上传文件
            </van-uploader>
          </div>
          <div @click="planShow = false,show=false" class="submit">
            <button>完成</button>
          </div>
        </div>
        <div class="planed" v-else>
          <ul class="upload">
            <li v-for="(p, i) in planMsg" :key="i" class="up-plan">
              <div>
                <van-icon name="success" color="#fff" />{{
                  p.kkj_fj.split(",")[0]
                }}
              </div>
              <span class="bar"
                >（100/100）100%上传成功
                <span class="delete cursor-pointer" @click="jaDelete(p)">删除</span>
              </span>
            </li>
          </ul>
          <van-uploader
            class="upmore"
            :after-read="upja"
            :preview-image="false"
            accept=".jpg,.png,.pdf,.word,.ppt"
          >
            <van-button
              icon="plus"
              round
              size="mini"
              type="primary"
            ></van-button>
            继续上传其他文件
          </van-uploader>
          <div @click="(planShow = false), (show = false)" class="submit">
            <button>完成</button>
          </div>
        </div>
      </div>
      <!-- 签到 -->
      <div class="unSignIn-nav" v-if="signShow">
        <van-icon
          class="cha"
          @click="(signShow = false), (show = false)"
          name="cross"
          size="0.2*13.3vw"
        />
        <h3>签到</h3>
        <div class="class-nav">
          <p class="rule">{{ signItem.khfw_kcbgl.kk_name }}</p>
          <p class="c-detail">
            <span>主讲：{{ signItem.khfw_kcbgl.kkb_zjjs_xm }}</span>
            <span>地点：{{ signItem.khfw_kcbgl.kj_name }}</span>
          </p>
          <p class="c-date">
            <van-icon name="clock-o" />{{ signItem.kkbk_starttime }} -
            {{ signItem.kkbk_endtime }}
          </p>
          <div class="upload">
            <template v-if="sign">
              <div
                @click="(loading = true), getPosition()"
                class="w-100px h-40px location"
              >
                获取当前定位
              </div>
              <van-loading v-if="loading" color="#1989fa" />
              <div v-if="pos.province" class="position" id="demo">
                当前位置在:{{ pos.province }}{{ pos.city }}{{ pos.district
                }}{{ pos.addr }}
              </div>
              <van-uploader
                v-model="fileList"
                :after-read="afterRead"
                :before-delete="beforeDelate"
                capture="camera"
              >
                <template #preview-cover>
                  <!-- <div class="preview-cover van-ellipsis">{{ file.name }}</div> -->
                </template>
              </van-uploader>
            </template>

            <div class="signed" v-else>
              <div class="position" id="demo">
                签到位置: {{ signItem.is_qd.kkq_address }}
              </div>
              <template class="img" v-if="signItem.is_qd.kkq_img">
                <img
                  v-for="item in signItem.is_qd.kkq_img.split(';')"
                  :key="item"
                  :src="https + '/' + item.split(',')[1]"
                />
              </template>
            </div>
          </div>
          <div v-if="sign" class="submit mb-4" >
            <van-button :disabled=isButton type="primary" color="#003eee" @click="submitSign(c)" round>提交</van-button>
            <!-- <button v-bind:disabled=isButton @click="submitSign(c)">提交</button> -->
          </div>
          <div v-else class="submit submited">
            <button>已签到</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  stxkjs_list,
  stxkjs_lb,
  stxk_up,
  stxkjs_ja,
  stxkjs_qd,
  stxkjs_sc,
  stxkjs_sq,
  qd_add,
} from "./api";
import { user } from "../../store/user";
import { ref, reactive, onMounted } from "vue";
import { showToast, Dialog,showConfirmDialog } from "vant";
import getTeamInfo from "~/store/team";
let https = ref(window.GLOBAL_CONFIG.api);
const fileList = ref([]);
const fileListTwo = ref([]);
const classShow = ref(0);
const onClickLeft = () => history.back();
const rightText = ref("");
const manageShow = ref(false);
function right() {
  rightText.value = "";
  user.cm_info.forEach((res) => {
    if (res.is_manage == 1) {
      rightText.value = "本班学生选课";
    }
  });
}
right();
const onClickRight = () => {
  if (manageShow.value == false) {
    manageShow.value = true;
  } else {
    manageShow.value = false;
  }
};
const show = ref(false); //覆盖层
const planShow = ref(false); //上传教案弹窗
// const upfile = ref(true); //点击上传按钮
const plan = ref(true); //教案显示
const signShow = ref(false); //签到弹窗
let sign = ref(true); //签到提交显示
const data = ref(""); //课表参数
const classWeek = ref([]);
const classIndex = ref();
const state = reactive({
  week: "",
  showIndex: 0,
});
let signItem = ref({});
const getWeek = async () => {
  var day = new Date().getDay();
  var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  state.week = weeks[day];
  state.showIndex = weeks.indexOf(state.week);
};
getWeek();
// 课表
let kxq_code = $ref();
function getClass() {
  getTeamInfo.then((res) => {
    if (res) {
      kxq_code = res.kxq_code;
      let data = {
        kxq_code: kxq_code,
        ex: "byweek",
      };
      stxkjs_list(data).then((res) => {
        classWeek.value = res.data;
      });
    }
  });
}
getClass();
let planMsg = ref([]);
const jafile = ref("");
let pagedata = [];
// 教案数组参数
let khfw_kcbkb_ja = {};
function upPlan(item) {
  khfw_kcbkb_ja = {
    kkb_id: item.khfw_kcbgl.kkb_id,
    kkbk_id: item.kkbk_id,
    kkbk_sszt: item.kkbk_sszt,
  };
  const data = {
    page: 1,
    limit: 999,
    kkbk_id: item.kkbk_id,
  };
  stxkjs_lb(data).then((res) => {
    pagedata = res.data.page_data;
    if (pagedata.length > 0) {
      planMsg.value = pagedata;
      plan.value = false;
    } else {
      plan.value = true;
    }
  });
}

function getlb() {
  const data = {
    page: 1,
    limit: 999,
    kkbk_id: khfw_kcbkb_ja.kkbk_id,
  };
  stxkjs_lb(data).then((res) => {
    planMsg.value = [];
    pagedata = res.data.page_data;
    if (pagedata.length > 0) {
      planMsg.value = pagedata;
      plan.value = false;
    } else {
      plan.value = true;
    }
  });
}

// 上传教案
let fileProxy = [];
let kkj_fj;
const upja = (fileList) => {
  fileProxy = [];
  stxk_up({ file: fileList.file }).then((res) => {
    if(res.code=='1'){
      fileProxy.push(res.data.file_name + "," + res.data.url);
      kkj_fj = {
        kkj_fj: fileProxy.join(";"),
      };
      Object.assign(khfw_kcbkb_ja, kkj_fj);
      let data = {
        khfw_kcbkb_ja,
      };
      stxkjs_ja(data).then((res) => {
        plan.value = false;
        // upfile.value = false;
        getlb();
      });
    }
  });
};
// 申请
function apply(c) {
  let khfw_kcbkb_qd = {
    kkb_id: c.khfw_kcbgl.kkb_id,
    kkbk_id: c.kkbk_id,
    kkbk_sszt: c.kkbk_sszt,
    kkq_zt: '2',
  };
  stxkjs_sq({ khfw_kcbkb_qd: khfw_kcbkb_qd }).then((res) => {
    getClass();
  });
}
function applied() {
  showToast("等待审核");
}
function jaDelete(item) {
  showConfirmDialog({
  title: '删除教案',
  message:
    '确认删除?',
})
  .then(() => {
    stxkjs_sc({ kkj_id: item.kkj_id }).then((res) => {
      if(res.code=='1'){
        showToast(res.msg)
        getlb();
      }
  });
  })
  .catch(() => {
    showToast('取消操作~')
  });
}
let pos = ref({});
let kkq_id = "";
let kkbk_id = "";
let kkb_id = "";
let kkbk_sszt = "";
let kkq_zt = "";
let kkq_img = [];
let isButton = $ref(false);
// 开始签到,缓存签到参数
function beginSign(c) {
  pos.value = "";
  kkq_id = c.is_qd.kkq_id;
  kkb_id = c.khfw_kcbgl.kkb_id;
  kkbk_id = c.kkbk_id;
  kkbk_sszt = c.kkbk_sszt;
  kkq_zt = c.is_qd.kkq_zt;
  signItem.value = c;
  kkq_img = [];
  sign.value = true;
  isButton = true;
}
function endSign(c) {
  kkq_id = c.is_qd.kkq_id;
  signItem.value = c;
  kkq_img = [];
  sign.value = false;
}
// 添加签到
const afterRead = (fileList) => {
  // 此时可以自行将文件上传至服务器
  const { file } = fileList;
  file.status = "uploading";
  stxk_up({ file: file }).then((res) => {
    if(res.code=='1'){
      kkq_img.push(res.data.file_name + "," + res.data.url);
      file.status = "done";
      isButton = false;
    }
  });
};
function beforeDelate(file, detail) {
  kkq_img.splice(detail.index, 1);
  isButton = true;
  return true;
}

// 获取定位
// var geolocation = new qq.maps.Geolocation(
//   "ZPTBZ-R4F6I-2IDG3-5TIDK-252R5-EQBH7",
//   "myapp"
// );

let kkq_address = "";
var positionNum = 0;
var options = { timeout: 3000 };
let loading = $ref(false);

function showPosition(position) {
  pos.value = position;
  console.log(kkq_address);
  positionNum++;
  loading = false;
}
function showErr() {
  positionNum++;
  loading = false;
  showToast("获取定位失败!");
  getPosition();
}
function getPosition() {
  // console.log(pos.value);
  pos.value = {};
  var geolocation = new window.qq.maps.Geolocation(
    "OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77",
    "nml"
  );
  geolocation.getLocation(showPosition, showErr, options);
}

// signImg = ref([]);
function submitSign(c) {
  if (pos.value.province) {
    kkq_address = pos.value.province;
  }
  if (pos.value.city) {
    kkq_address = pos.value.province + pos.value.city;
  }
  if (pos.value.district) {
    kkq_address = pos.value.province + pos.value.city + pos.district;
  }
  if (pos.value.addr) {
    kkq_address =
      pos.value.province + pos.value.city + pos.value.district + pos.value.addr;
  }
  if (kkq_img.length <= 0) {
    showToast("请上传图片");
    return;
  }
  if (!kkq_address) {
    showToast("请获取定位信息");
    return;
  }
  const data = {
    kkq_id,
    khfw_kcbkb_qd: {
      kkq_zt: "4",
      kkq_address,
      kkq_lat: pos.value.lat,
      kkq_lng: pos.value.lng,
      kkq_img: kkq_img.join(";"),
    },
  };
  stxkjs_qd(data).then((item) => {
    console.log(item, 222222222222222);
    sign.value = false;
    getClass();
  });
}

let color = ref("");
function getColor() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  color.value = "#" + r.toString(16) + g.toString(16) + b.toString(16);
}
getColor();
</script>

<style lang="scss">
.all {
  font-size: 52px;
}
</style>
<style lang="scss" scoped>
.stxk-teacher {
  background-color: #f0f3fa;
  min-height: 100vh;
  .cover {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    opacity: 0.3;
  }
  .plan-nav,
  .unSignIn-nav {
    width: 7 * 13.3vw;
    height: 7.6 * 13.3vw;
    color: #333333;
    background-color: #fff;
    position: fixed;
    top: 2.6 * 13.3vw;
    left: 0.3 * 13.3vw;
    border-radius: 0.1 * 13.3vw;
    z-index: 5;
    padding: 0.2 * 13.3vw 0.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;
    }
    h3 {
      width: 1.5 * 13.3vw;
      height: 0.4 * 13.3vw;
      font-size: 3.8vw;
      position: relative;
    }
    h3::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 0.2 * 13.3vw;
      bottom: -0.05 * 13.3vw;
      left: -0.02 * 13.3vw;
      border-radius: 0.1 * 13.3vw;
      background-color: #c5c5ff;
      opacity: 0.6;
    }
    .rule {
      color: #919191;
      height: 1 * 13.3vw;
      line-height: 1 * 13.3vw;
      font-size: 0.2 * 13.3vw;
    }
    .upload {
      width: 6.8 * 13.3vw;
      height: 4 * 13.3vw;
      overflow: scroll;
      border: 1px dashed #dcdcdc;
      text-align: center;
      line-height: 4 * 13.3vw;
      font-size: 0.28 * 13.3vw;
      box-sizing: border-box;
      button {
        width: 0.4 * 13.3vw;
        height: 0.4 * 13.3vw;
        border-radius: 50%;
        box-sizing: border-box;
        background-color: #003eee;
        vertical-align: middle;
      }
    }
    .submit {
      text-align: center;
      // margin: 0.4 * 13.3vw auto;
      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;
      }
    }
  }
  .plan-nav {
    .planed {
      line-height: 0.3 * 13.3vw;
      .upload {
        line-height: unset;
        padding-left: 0.3 * 13.3vw;
        .up-plan {
          height: 0.55 * 13.3vw;
          margin-top: 0.5 * 13.3vw;
          text-align: left;
          line-height: 0.3 * 13.3vw;
          div {
            margin: 0.1 * 13.3vw 0;
          }
          i {
            width: 0.32 * 13.3vw;
            height: 0.32 * 13.3vw;
            line-height: 0.32 * 13.3vw;
            text-align: center;
            display: inline-block;
            background-color: #01c53d;
            border-radius: 50%;
            margin-right: 0.05 * 13.3vw;
          }
          .bar {
            width: 2.9 * 13.3vw;
            height: 0.32 * 13.3vw;
            font-size: 0.24 * 13.3vw;
            font-family: AdobeHeitiStd-Regular;
            color: #2e44ff;
            line-height: 0.41 * 13.3vw;
            padding-left: 0.15 * 13.3vw;
            .delete {
              height: 0.32 * 13.3vw;
              font-size: 0.24 * 13.3vw;
              font-family: AdobeHeitiStd-Regular;
              color: #ff2e2e;
              line-height: 0.41 * 13.3vw;
              margin-left: 0.5 * 13.3vw;
              padding: 5px;
            }
          }
        }
      }
    }
  }
  .unSignIn-nav {
    height: 8.8 * 13.3vw;
    h3 {
      width: 0.7 * 13.3vw;
    }
    .rule {
      font-size: 0.28 * 13.3vw;
      color: #2c2b2b;
    }
    .c-detail {
      height: 0.32 * 13.3vw;
      font-size: 0.24 * 13.3vw;
      color: #a0a0a0;
      line-height: 0.3 * 13.3vw;
      letter-spacing: 0.01 * 13.3vw;
      span {
        margin-right: 0.6 * 13.3vw;
      }
    }
    .c-date {
      width: 90%;
      height: 0.32 * 13.3vw;
      line-height: 0.35 * 13.3vw;
      font-size: 0.24 * 13.3vw;
      line-height: 0.3 * 13.3vw;
      letter-spacing: 0.01 * 13.3vw;
      color: #a0a0a0;
      margin-top: 0.2 * 13.3vw;
      i {
        margin-right: 0.05 * 13.3vw;
      }
    }
    .upload {
      border: none;
      border-top: 1px solid #e8e8e8;
      text-align: left;
      padding-left: 0.2 * 13.3vw;
      margin-top: 0.35 * 13.3vw;
      line-height: 2 * 13.3vw;
      .location {
        height: 0.6 * 13.3vw;
        line-height: 0.6 * 13.3vw;
        cursor: pointer;
        text-align: center;
        color: #003eee;
        border: 1px solid #003eee;
        border-radius: 0.05 * 13.3vw;
        margin-top: 0.1 * 13.3vw;
      }
    }
    .signed {
      width: 100%;
      .img {
        width: 1.5 * 13.3vw;
        height: 1.5 * 13.3vw;
        overflow: hidden;
        margin-top: 0.5 * 13.3vw;
      }
      img {
        width: 1.5 * 13.3vw;
        border-radius: 0.16 * 13.3vw;
      }
      .position {
        width: 100%;
        line-height: 0.4 * 13.3vw;
      }
    }
    .submited {
      button {
        background-color: #dfdfdf;
      }
    }
  }
}
#demo {
  line-height: 0.35 * 13.3vw;
  transition: all, 1s;
}
::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;
  }
  .van-nav-bar__text {
    color: #fff !important;
    font-size: 0.32 * 13.3vw;
    font-weight: 350;
  }
}
.week {
  width: 100%;
  height: 1.8 * 13.3vw;
  background-color: #fff;
  border-radius: 0px 0px 0.4 * 13.3vw 0.4 * 13.3vw;
  padding: 0.2 * 13.3vw 0.05 * 13.3vw;
  box-shadow: 0px 0px 20px 0px rgba(12, 13, 10, 0.1);
  .weekday {
    display: flex;
    justify-content: space-between;
    li {
      width: 0.88 * 13.3vw;
      height: 1.07 * 13.3vw;
      line-height: 1.07 * 13.3vw;
      font-size: 0.28 * 13.3vw;
      background-color: #f0f2f7;
      border-radius: 0.1 * 13.3vw;
      .day {
        width: 0.56 * 13.3vw;
        height: 0.37 * 13.3vw;
        line-height: 0.34 * 13.3vw;
        margin-top: 0.2 * 13.3vw;
        margin-left: 0.1 * 13.3vw;
        text-align: center;
      }
      .dot {
        display: flex;
        justify-content: center;
        div {
          width: 0.1 * 13.3vw;
          height: 0.1 * 13.3vw;
          border-radius: 50%;
          margin: 0.15 * 13.3vw 0.06 * 13.3vw;
          border: 1px solid #ffffff;
          // box-sizing: border-box;
        }
        .dot-orange {
          background-color: #eb6100;
        }
        .dot-purple {
          background-color: #601986;
        }
        .dot-blue {
          background-color: #1d2088;
        }
        .dot-green {
          background-color: #009944;
        }
      }
    }
    .dayblue {
      background-color: #003eee;
      color: #fff;
    }
  }
  .slide {
    margin: 0.2 * 13.3vw auto;
    width: 1 * 13.3vw;
    height: 0.1 * 13.3vw;
    background: #e8e8e8;
    border-radius: 0.05 * 13.3vw;
  }
}
.class {
  width: 100%;
  margin-top: 0.5 * 13.3vw;
  padding: 0.5 * 13.3vw 0.3 * 13.3vw;
  box-sizing: border-box;
  .class-num {
    width: 3.38 * 13.3vw;
    height: 0.33 * 13.3vw;
    font-size: 0.34 * 13.3vw;
    text-align: left;
    color: #000000;
    line-height: 0.33 * 13.3vw;
    letter-spacing: 0.016 * 13.3vw;
  }
  .class-content {
    li {
      position: relative;
      background: #ffffff;
      margin: 0.4 * 13.3vw auto;
      width: 6.96 * 13.3vw;
      height: 2.4 * 13.3vw;
      border-radius: 0.2 * 13.3vw;
      padding-left: 0.5 * 13.3vw;
      padding-top: 0.3 * 13.3vw;
      box-sizing: border-box;
      .c-name {
        font-size: 0.32 * 13.3vw;
        height: 0.43 * 13.3vw;
        color: #000000;
        line-height: 0.56 * 13.3vw;
        letter-spacing: 0.016 * 13.3vw;
      }
      .c-detail {
        height: 0.3 * 13.3vw;
        font-size: 0.2 * 13.3vw;
        color: #a0a0a0;
        line-height: 0.35 * 13.3vw;
        letter-spacing: 0.01 * 13.3vw;
        margin: 0.2 * 13.3vw 0;
      }
      .c-date {
        width: 90%;
        height: 0.27 * 13.3vw;
        font-size: 0.2 * 13.3vw;
        line-height: 0.35 * 13.3vw;
        letter-spacing: 0.01 * 13.3vw;
        margin-top: 0.55 * 13.3vw;
        display: flex;
        justify-content: space-between;
        .c-date {
          color: #a0a0a0;
        }
        .active {
          width: 55%;
          display: flex;
          justify-content: space-between;
          color: #003eee;
        }
        .findmore {
          font-size: 0.2 * 13.3vw;
          float: right;
          line-height: 0.35 * 13.3vw;
          letter-spacing: 0.01 * 13.3vw;
        }
      }
      .cc-color {
        width: 0.2 * 13.3vw;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 0.19 * 13.3vw 0px 0px 0.19 * 13.3vw;
      }
    }
    li:nth-child(odd) {
      .cc-color {
        background: #eb6100;
      }
    }
    li:nth-child(even) {
      .cc-color {
        background: #009944;
      }
    }
  }
}
::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;
    }
  }
}
::v-deep .upmore {
  height: 0.3 * 13.3vw;
  margin: 0;
  font-size: 0.26 * 13.3vw;
  color: #2e44ff;
  // margin-top: -.32*13.3vw;
  button {
    width: 0.36 * 13.3vw;
    height: 0.36 * 13.3vw;
    vertical-align: top;
    background-color: #003eee;
  }
  .van-uploader__input {
    position: absolute;
  }
}
</style>
