pbl-student-table/src/components/index.vue

<template>
  <div class="pb_content">
    <div class="pb_content_body">
      <div class="student_head">
        <!-- <img src="../assets/banner.png" alt="" /> -->
        <el-carousel trigger="click" style="width: 100%; height: 100%">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <!-- <h3 class="small">{{ item }}</h3> -->
            <img class="imgS" :src="item.poster" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="reBox">
        <div class="reTop">
          <div>课程</div>
          <div>
            <div class="search" @click="selectAll">
              <img src="../assets/icon/search.png" alt="" />
            </div>
            <input class="sInput" type="text" placeholder="请输入关键字" v-model="sCourse" />
          </div>
        </div>
        <div class="choose">
          <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index"
            :style="{ margin: !CourseTypeJson[item.id].length && 0 }">
            <span v-if="CourseTypeJson[item.id].length">{{ item.name }}:</span>
            <div class="typeCss" v-if="CourseTypeJson[item.id].length">
              <div class="cName" @click="getCourse(item.name, '', item.id, 1)"
                :class="typeE.indexOf(item.id) != -1 ? 'isCType' : ''">
                全部
              </div>
              <div v-for="(item1, index1) in CourseTypeJson[item.id]" :key="index + '-' + index1" :label="item1.id"
                @click="getCourse(item.name, item.id, item1.id, 2)">
                <div class="cName" :class="
                  typea == item1.id || typeb == item1.id || typed == item1.id
                    ? 'isCType'
                    : ''
                ">
                  {{ item1.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="body_student" v-loading="loading">
        <div class="typeCheck">
          <el-switch v-model="typeCheck"></el-switch><span>分类显示</span>
        </div>
        <div>
          <div class="main_box">
            <div style="display:flex;flex-wrap:wrap" v-if="!typeCheck">
              <div class="box_course" v-for="(item, index) in zoneClass" :key="index">
                <div class="wheel">
                  <img :src="
                    item.cover
                      ? JSON.parse(item.cover)[0].url
                      : require('../assets/wheel.png')
                  " alt="" />
                </div>
                <div class="middle_white">
                  <div class="textOverflow">{{ item.title }}</div>
                  <div class="nameAndLength">
                    <el-tooltip class="typeN" effect="light" :content="item.typename" placement="top">
                      <div>{{ item.typename }}</div>
                    </el-tooltip>

                    <div>{{ JSON.parse(item.chapters).length }}阶段</div>
                  </div>
                  <div class="school_box">
                    <el-tooltip effect="light" :content="item.school" placement="top">
                      <div class="school">
                        {{ item.school }}
                      </div>
                    </el-tooltip>
                    <div style="color: #b4b4b4">{{ item.utime }}</div>
                  </div>
                </div>
                <div class="now_study" @click="
                  goTo(
                    '/courseDetail?courseId=' +
                    item.courseId +
                    '&userid=' +
                    userid +
                    '&oid=' +
                    oid +
                    '&org=' +
                    org +
                    '&cid=' +
                    classId +
                    '&tType=' +
                    tType +
                    '&screenType=' +
                    screenType
                  )
                ">
                  立即学习
                </div>
              </div>
            </div>
            <div v-else>
              <div class="FirstTypeBox" v-for="(type, tindex) in CourseType2" :key="tindex">
                <div class="title">{{ type.name }}</div>
                <div style="display: flex;flex-flow: wrap;margin-top: 20px;">
                  <div class="box_course" v-for="(item, index) in type.course" :key="tindex + '-' + index">
                    <div class="wheel">
                      <img :src="
                        item.cover
                          ? JSON.parse(item.cover)[0].url
                          : require('../assets/wheel.png')
                      " alt="" />
                    </div>
                    <div class="middle_white">
                      <div class="textOverflow">{{ item.title }}</div>
                      <div class="nameAndLength">
                        <el-tooltip class="typeN" effect="light" :content="item.typename" placement="top">
                          <div>{{ item.typename }}</div>
                        </el-tooltip>

                        <div>{{ JSON.parse(item.chapters).length }}阶段</div>
                      </div>
                      <div class="school_box">
                        <el-tooltip effect="light" :content="item.school" placement="top">
                          <div class="school">
                            {{ item.school }}
                          </div>
                        </el-tooltip>
                        <div style="color: #b4b4b4">{{ item.utime }}</div>
                      </div>
                    </div>
                    <div class="now_study" @click="
                      goTo(
                        '/courseDetail?courseId=' +
                        item.courseId +
                        '&userid=' +
                        userid +
                        '&oid=' +
                        oid +
                        '&org=' +
                        org +
                        '&cid=' +
                        classId +
                        '&tType=' +
                        tType +
                        '&screenType=' +
                        screenType
                      )
                    ">
                      立即学习
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="course_empty" v-if="zoneClass.length == 0">
              暂无课程
            </div>
          </div>
        </div>
        <div class="student_page" style="margin: 15px 0 0" v-if="zoneClass.length > 0 && !typeCheck">
          <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" v-if="page"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoneList: [],
      zoneClass: [],
      page: 1,
      total: 0,
      isListAjax: false,
      zoneListId: "",
      bannerList: [],
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      classId: this.$route.query.cid,
      tType: this.$route.query.tType,
      org: this.$route.query.org,
      screenType: this.$route.query.screenType,
      CourseType: [],
      CourseType2: [],
      CourseTypeJson: {},
      courseTypeId: {},
      sCourse: "",
      isCType: "",
      typea: "",
      typeb: "",
      typed: "",
      typeE: [],
      loading: "",
      typeCheck: false
    };
  },
  watch: {
    typeCheck(newValue, oldValue) {
      this.loading = true
      if (newValue) {
        this.selectAll()
      } else {
        this.page = 1
        this.selectAll2()
      }
    }
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    //获取专区下的课程
    getZoneClass(zid) {
      this.isListAjax = true;
      // const loading = this.openLoading(document.querySelector(".main_box"));
      let params = {
        bid: zid,
        oid: this.oid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getZoneClassStudent", params)
        .then((res) => {
          // loading.close();
          this.isListAjax = false;
          this.zoneClass = res.data[0];
          this.total = res.data[0].length ? res.data[0][0].num : 0;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getCourse(typeName, ftypeId, typeid, type) {
      this.page = 1;
      this.zoneClass = [];
      if (typeName == "年级") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            this.typeE.splice(this.typeE.indexOf(typeid), 1);
          } else {
            this.typeE.push(typeid);
            if (this.typea != "") {
              this.typea = "";
            }
          }
        } else {
          if (this.typea == typeid) {
            this.typea = "";
          } else {
            this.typea = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeName == "专栏") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            this.typeE.splice(this.typeE.indexOf(typeid), 1);
          } else {
            this.typeE.push(typeid);
            if (this.typeb != "") {
              this.typeb = "";
            }
          }
        } else {
          if (this.typeb == typeid) {
            this.typeb = "";
          } else {
            this.typeb = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeName == "栏目") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            this.typeE.splice(this.typeE.indexOf(typeid), 1);
          } else {
            this.typeE.push(typeid);
            if (this.typeb != "") {
              this.typeb = "";
            }
          }
        } else {
          if (this.typeb == typeid) {
            this.typeb = "";
          } else {
            this.typeb = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeName == "主题") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            this.typeE.splice(this.typeE.indexOf(typeid), 1);
          } else {
            this.typeE.push(typeid);
            if (this.typeb != "") {
              this.typeb = "";
            }
          }
        } else {
          if (this.typeb == typeid) {
            this.typeb = "";
          } else {
            this.typeb = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeName == "学院") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            this.typeE.splice(this.typeE.indexOf(typeid), 1);
          } else {
            this.typeE.push(typeid);
            if (this.typeb != "") {
              this.typeb = "";
            }
          }
        } else {
          if (this.typeb == typeid) {
            this.typeb = "";
          } else {
            this.typeb = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeName == "学科") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            this.typeE.splice(this.typeE.indexOf(typeid), 1);
          } else {
            this.typeE.push(typeid);
            if (this.typed != "") {
              this.typed = "";
            }
          }
        } else {
          if (this.typed == typeid) {
            this.typed = "";
          } else {
            this.typed = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      }
      this.loading = true;
      if (this.typeCheck) {
        this.selectAll();
      } else {
        this.selectAll2();
      }
    },
    selectAll() {
      this.zoneListId = 0;
      this.isListAjax = true;

      let params = {
        uid: this.userid,
        oid: this.oid,
        typea: this.typea != undefined ? this.typea : "",
        typeb: this.typeb != undefined ? this.typeb : "",
        typec: "",
        typed: this.typed != undefined ? this.typed : "",
        typeE: this.typeE.join(","),
        // typeE: "",
        cu: "",
        cn: this.sCourse,
        classid: this.classId,
        org: this.org,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectTypeCourse2Mode", params)
        .then((res) => {
          this.loading = false;
          this.isListAjax = false;
          this.zoneClass = res.data[0];
          // this.total = res.data[0].length ? res.data[0][0].num : 0;
          let CourseType2 = JSON.parse(JSON.stringify(this.CourseType[0]))
          for (var i = 0; i < CourseType2.length; i++) {
            CourseType2[i].course = []
            for (var j = 0; j < res.data[0].length; j++) {
              if (res.data[0][j].pid && res.data[0][j].pid.indexOf(CourseType2[i].id) != -1) {
                CourseType2[i].course.push(res.data[0][j])
              }
            }
          }
          let noTypeCourse = []
          for (var j = 0; j < res.data[0].length; j++) {
            if (!res.data[0][j].pid) {
              noTypeCourse.push(res.data[0][j])
            }
          }
          if (noTypeCourse.length > 0) {
            CourseType2.push({
              course: noTypeCourse,
              name: '其他'
            })
          }
          CourseType2 = CourseType2.filter(item => {
            return item.course.length > 0;
          })
          this.CourseType2 = CourseType2
          // this.selectType({
          //   data: [res.data[1], res.data[2], res.data[3], res.data[4]],
          // });
          this.getBanner({
            data: [res.data[6], res.data[5], res.data[7]],
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectAll2() {
      this.zoneListId = 0;
      this.isListAjax = true;

      let params = {
        uid: this.userid,
        oid: this.oid,
        typea: this.typea != undefined ? this.typea : "",
        typeb: this.typeb != undefined ? this.typeb : "",
        typec: "",
        typed: this.typed != undefined ? this.typed : "",
        typeE: this.typeE.join(","),
        // typeE: "",
        cu: "",
        cn: this.sCourse,
        classid: this.classId,
        org: this.org,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectTypeCourse2", params)
        .then((res) => {
          this.loading = false;
          this.isListAjax = false;
          this.zoneClass = res.data[0];
          this.total = res.data[0].length ? res.data[0][0].num : 0;
          let CourseType2 = []
          // this.selectType({
          //   data: [res.data[1], res.data[2], res.data[3], res.data[4]],
          // });
          this.getBanner({
            data: [res.data[6], res.data[5], res.data[7]],
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    checkZone(id) {
      this.page = 1;
      this.zoneListId = id;
      this.getZoneClass(id);
    },
    // handleCurrentChange(val) {
    //   this.page = val;
    //   this.getZoneClass(this.zoneListId);
    // },
    handleCurrentChange(val) {
      this.loading = true;
      this.page = val;
      this.selectAll2();
    },
    //获取banner
    getBanner(res) {
      // var a = false;
      // if (this.org == "eb2af5e9-ac3d-46b6-9fe3-3c1c364f018d") {
      //   a = true;
      // }
      // let params = {
      //   oid: this.org,
      // };
      // this.ajax
      //   .get(this.$store.state.api + "selectBannerByOid", params)
      //   .then((res) => {
      if (res.data[0].length > 0) {
        this.bannerList = res.data[0];
      } else {
        this.getBannerByOid({
          data: [res.data[1], res.data[2]],
        });
      }
      // })
      // .catch((err) => {
      //   console.error(err);
      // });
    },
    getBannerByOid(res) {
      // let params = {
      //   oid: this.oid,
      // };
      // this.ajax
      //   .get(this.$store.state.api + "selectBannerByOid", params)
      //   .then((res) => {
      if (res.data[0].length > 0) {
        this.bannerList = res.data[0];
      } else {
        this.getOldBanner({
          data: [res.data[1]],
        });
      }
      // })
      // .catch((err) => {
      //   console.error(err);
      // });
    },
    getOldBanner(res) {
      // this.ajax
      //   .get(this.$store.state.api + "getBanner", "")
      //   .then((res) => {
      this.bannerList = res.data[0];
      // })
      // .catch((err) => {
      //   console.error(err);
      // });
    },
    selectAllType() {
      let params = {
        org: this.org && this.org != "" ? this.org : "",
        oid: this.oid && this.oid != "" ? this.oid : "",
      };
      this.ajax
        .get(this.$store.state.api + "selectAllType", params)
        .then((res) => {
          this.CourseTypeJson = {};
          this.CourseType = res.data;
          for (var i = 0; i < res.data[0].length; i++) {
            if (!this.cid) {
              this.courseTypeId[res.data[0][i].id] = "";
            }
            if (!this.CourseTypeJson[res.data[0][i].id]) {
              this.CourseTypeJson[res.data[0][i].id] = [];
            }
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              if (res.data[0][i].name == "栏目") {
                this.CourseType[0][i].name = "主题";
              }
            }

            if (res.data[2].length == 0 && res.data[3].length == 0) {
              for (var j = 0; j < res.data[1].length; j++) {
                if (res.data[0][i].id == res.data[1][j].pid) {
                  if (!this.CourseTypeJson[res.data[0][i].id]) {
                    this.CourseTypeJson[res.data[0][i].id] = [];
                  }
                  this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
                }
              }
            } else {
              if (res.data[2].length > 0) {
                for (var j = 0; j < res.data[2].length; j++) {
                  if (res.data[0][i].id == res.data[2][j].pid) {
                    this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
                  }
                }
              }
              if (res.data[3].length > 0) {
                for (var j = 0; j < res.data[3].length; j++) {
                  if (res.data[0][i].id == res.data[3][j].pid) {
                    this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
                  }
                }
              }
            }
          }
          if (this.typeCheck) {
            this.selectAll();
          } else {
            this.selectAll2();
          }
          this.$forceUpdate();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectType(res) {
      // this.ajax
      //   .get(this.$store.state.api + "selectType")
      //   .then((res) => {
      this.CourseTypeJson = {};
      this.CourseType = res.data;
      for (var i = 0; i < res.data[0].length; i++) {
        if (!this.cid) {
          this.courseTypeId[res.data[0][i].id] = "";
        }
        if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
          if (res.data[0][i].name == "栏目") {
            this.CourseType[0][i].name = "主题";
          }
        }
        for (var j = 0; j < res.data[1].length; j++) {
          if (res.data[0][i].id == res.data[1][j].pid) {
            if (!this.CourseTypeJson[res.data[0][i].id]) {
              this.CourseTypeJson[res.data[0][i].id] = [];
            }
            this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
          }
        }
      }
      this.selectTypeByOid({ data: [res.data[0], res.data[2]] });
      this.selectTypeByOrg({ data: [res.data[0], res.data[3]] });
      // })
      // .catch((err) => {
      //   console.error(err);
      // });
    },
    selectTypeByOid(res) {
      // let params = {
      //   oid: this.oid,
      // };
      // this.ajax
      //   .get(this.$store.state.api + "selectTypeByOid", params)
      //   .then((res) => {
      for (var i = 0; i < res.data[0].length; i++) {
        for (var j = 0; j < res.data[1].length; j++) {
          if (res.data[0][i].id == res.data[1][j].pid) {
            if (!this.CourseTypeJson[res.data[0][i].id]) {
              this.CourseTypeJson[res.data[0][i].id] = [];
            }
            this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
          }
        }
      }
      this.$forceUpdate();
      // })
      // .catch((err) => {
      //   console.error(err);
      // });
    },
    selectTypeByOrg(res) {
      // let params = {
      //   oid: this.org,
      // };
      // this.ajax
      //   .get(this.$store.state.api + "selectTypeByOrg", params)
      //   .then((res) => {
      for (var i = 0; i < res.data[0].length; i++) {
        for (var j = 0; j < res.data[1].length; j++) {
          if (res.data[0][i].id == res.data[1][j].pid) {
            if (!this.CourseTypeJson[res.data[0][i].id]) {
              this.CourseTypeJson[res.data[0][i].id] = [];
            }
            this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
          }
        }
      }
      this.$forceUpdate();
      // })
      // .catch((err) => {
      //   console.error(err);
      // });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  created() {
    this.loading = true;
    // this.selectType();
    this.selectAllType();
    // this.getBanner();
    this.timer = setInterval(() => {
      this.selectAllType();
      // this.getBanner();
    }, 60000);
    document.scrollingElement.scrollTop = 0;
  },
};
</script>

<style scoped>
@media screen and (max-width: 1024px) {
  .box_course {
    margin: 0px 5px 20px 5px !important;
  }
}

.student_head .imgS {
  width: 100%;
  height: 100%;
  cursor: pointer;
  object-fit: cover;
}

.top {
  padding: 20px 30px 20px 1%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.top div {
  cursor: pointer;
  box-sizing: border-box;
  height: 35px;
  line-height: 35px;
  margin: 0 10px 0 0;
  padding-bottom: 5px;
  width: 80px;
  text-align: center;
}

.top .active {
  border-bottom: 3px solid #0e71e6;
}

.isactive {
  border-bottom: 3px solid #0e71e6;
}

.box_fk {
  width: 8px;
  height: 21px;
  background: #0e71e6;
  margin-right: 5px;
}

.wheel {
  width: 100%;
  height: 140px;
}

.man {
  width: 16px;
  height: 16px;
}

.wheel>img,
.man>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box_course {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  /* margin: 0px 1% 20px; */
  margin: 0 15px 20px 0;
  width: 300px;
  height: 260px;
  /*border: 1px solid #cecece; */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
    0px 2px 1px -1px rgb(0 0 0 / 12%);
  justify-content: space-between;
}

.middle_white {
  font-size: 14px;
  margin: 5px 10px;
}

.people {
  display: flex;
  align-items: center;
}

.people>div:nth-child(2) {
  margin-left: 10px;
}

.now_study {
  width: 100%;
  height: 40px;
  color: #fff;
  background: #4a9eed;
  text-align: center;
  line-height: 40px;
  font-size: 13px;
  cursor: pointer;
}

.now_study:hover {
  background: #205cc6;
}

.main_box {
  width: 100%;
  /* display: flex; */
  /* flex-direction: row; */
  /* flex-wrap: wrap; */
  /* justify-content: flex-start; */
  margin: 0 auto;
}

.right_bottom_flex {
  width: 219px;
  height: 144px;
  margin: auto 0;
}

.right_bottom_flex>img {
  width: 100%;
  height: 100%;
}

.body_student {
  margin: 0 auto;
  width: 90%;
  height: 100%;
}

.student_head {
  width: 100%;
  /* height: 30%; */
}

.textOverflow {
  padding: 0 5px 0 0px;
  width: 95%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
  font-size: 16px;
}

.student_page {
  margin-top: 10px;
}

.course_empty {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.choose {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 10px 0;
}

.all_choose {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin: 10px 0;
  width: 100%;
}

.all_choose>span {
  min-width: 80px;
  display: block;
  letter-spacing: 14px;
}

.all_choose>span:nth-child(1) {
  font-weight: bold;
}

.all_choose>>>.el-checkbox-group {
  display: flex;
  flex-direction: row;
  width: 820px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  margin-top: 3px;
}

.all_choose>.el-checkbox-group>>>.el-checkbox {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label {
  min-width: 80px;
  overflow: hidden;
  width: 80px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label:hover {
  width: auto;
}

.cName {
  cursor: pointer;
  margin: 0 10px 10px 0;
  color: #b9b6b9;
  min-width: 80px;
  width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reBox {
  position: relative;
  top: -25px;
  z-index: 999;
  /* left: auto; */
  /* right: auto; */
  background: #fff;
  width: 90%;
  border-radius: 5px;
  padding-left: 20px;
  margin: 0 auto;
  box-sizing: border-box;
}

.reTop {
  padding: 20px 0 0 0;
  border-bottom: 1px solid #eee;
  width: 98%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.reTop>div:nth-child(1) {
  font-weight: bold;
  width: 40px;
  border-bottom: 1px solid #205cc6;
  padding-bottom: 20px;
  color: #205cc6;
  font-size: 20px;
}

.reTop>div:nth-child(2) {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #ccced3;
  width: 300px;
  border-radius: 8px;
  padding: 5px 0;
  margin-bottom: 10px;
}

.search {
  width: 20px;
  padding: 0 5px;
}

.search>img {
  width: 100%;
  height: 100%;
}

.sInput {
  border: none;
  width: 85%;
}

.sInput:focus-visible {
  outline: none;
}

.nameAndLength {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
}

.typeN {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.isCType {
  color: #6282c2;
}

.typeCss {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.school {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  box-sizing: border-box;
}

.school_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.FirstTypeBox {}

.FirstTypeBox+.FirstTypeBox {
  margin-top: 20px;
}

.FirstTypeBox>.title {
  font-size: 24px;
  font-weight: 700;
}

.typeCheck {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* margin-bottom: 20px; */
}

.typeCheck>span {
  margin-left: 10px;
}
</style>