school_website/ruoyi-ui/src/views/officialWebsite/competition.vue

<template>
  <div class="container" style="background: #f6f6f6">
    <div class="top-box">
      <headers></headers>

      <div class="ny-banner">
        <img src="../../assets/gw/ny-banner.jpg" alt="">
      </div>
    </div>
    <!-- new -->
    <div class="navigation">
      <div class="content">
        <div class="left"> <img src="../../assets/gw/home.png" alt="">
          <p><a href="/gw">首页</a><i class="el-icon-arrow-right"></i> <span href="">大赛风采</span></p>
        </div>
        <div class="right">
          <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
            @click="getCurrentActive(index)">
            {{ item.categoryName }}
          </div>
        </div>
      </div>
    </div>
    <div class="committee-cont">
      <div class="tabber-box " v-if="currentActive == 6" >
        <el-form ref="form" :model="ruleForm" label-width="120px" :rules="rules" class="demo-ruleForm">
          <h1 class="tab_title">参赛报名表（本科组）</h1>

          <!-- 基础信息-->
          <div class="kuang">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="所属赛区" prop="division">
                <el-input v-model="ruleForm.division"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学校及院系名称" prop="schoolName">
                <el-input v-model="ruleForm.schoolName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="参赛团队名称" prop="teamName">
                <el-input v-model="ruleForm.teamName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          </div>
          <!-- 领队老师信息-->
          <div class="kuang ">
          <h2 class="tab_title tab_down_line">领队老师</h2>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名" prop="teachers.0.teacherName">
                <el-input v-model="ruleForm.teachers[0].teacherName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职务" prop="teachers.0.teacherJob">
                <el-input v-model="ruleForm.teachers[0].teacherJob"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="teachers.0.teacherNumber">
                <el-input v-model="ruleForm.teachers[0].teacherNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="E-mail" prop="teachers.0.teacherEmail">
                <el-input v-model="ruleForm.teachers[0].teacherEmail"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在系及专业" prop="teachers.0.teacherSchool">
                <el-input v-model="ruleForm.teachers[0].teacherSchool"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          </div>

          <!-- 指导老师①信息-->
          <div class="kuang ">
            <h2 class="tab_title tab_down_line">指导老师①</h2>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="姓名" prop="teachers.1.teacherName">
                  <el-input v-model="ruleForm.teachers[1].teacherName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职务" prop="teachers.1.teacherJob">
                  <el-input v-model="ruleForm.teachers[1].teacherJob"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号" prop="teachers.1.teacherNumber">
                  <el-input v-model="ruleForm.teachers[1].teacherNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="E-mail" prop="teachers.1.teacherEmail">
                  <el-input v-model="ruleForm.teachers[1].teacherEmail"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所在系及专业" prop="teachers.1.teacherSchool">
                  <el-input v-model="ruleForm.teachers[1].teacherSchool"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 指导老师②信息-->
          <div class="kuang ">
            <h2 class="tab_title tab_down_line">指导老师②</h2>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="姓名" prop="teachers.2.teacherName">
                  <el-input v-model="ruleForm.teachers[2].teacherName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职务" prop="teachers.2.teacherJob">
                  <el-input v-model="ruleForm.teachers[2].teacherJob"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号" prop="teachers.2.teacherNumber">
                  <el-input v-model="ruleForm.teachers[2].teacherNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="E-mail" prop="teachers.2.teacherEmail">
                  <el-input v-model="ruleForm.teachers[2].teacherEmail"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所在系及专业" prop="teachers.2.teacherSchool">
                  <el-input v-model="ruleForm.teachers[2].teacherSchool"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 参赛人信息-->
          <div class="kuang ">
            <h2 class="tab_title tab_down_line">参赛人信息</h2>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="姓名" prop="stuName">
                  <el-input v-model="ruleForm.stuName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" prop="stuGender">
                  <el-select
                    v-model="ruleForm.stuGender"
                    placeholder="学生性别"
                    clearable
                    style="width: 125px">
                    <el-option
                      v-for="dict in dict.type.sys_user_sex"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专业" prop="stuMajor">
                  <el-input v-model="ruleForm.stuMajor"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号" prop="stuNumber">
                  <el-input v-model="ruleForm.stuNumber"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 盲样邮寄地址 -->
          <div class="kuang">
            <h2 class="tab_title tab_down_line">盲样邮寄地址</h2>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="收件人" prop="sampleConcat">
                  <el-input v-model="ruleForm.sampleConcat"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话" prop="sampleNumber">
                  <el-input v-model="ruleForm.sampleNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮寄地址" prop="sampleAddress">
                  <el-input v-model="ruleForm.sampleAddress"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 提交按钮 -->
          <div style="text-align: center">
            <el-form-item>
              <el-button style="margin-left: -120px" type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- main -->
      <div v-show="currentActive == 3" v-html="pageContext"></div>
      <div v-for="(item, index) in nav " :key=index>
        <div class="about-conts-item1" v-show="currentActive == index">
          <div  v-show="currentActive == 0 || currentActive == 1  " class="neirong" v-html="pageContext"></div>
        </div>
      </div>
      <div v-show="currentActive  == 2 " class="wrapbox">
        <div class="rsr"    v-for="(item,index) in otherList" @click="goDeatail(item)" >
          <img  :src=" imgurl + item.contentImg" style="width: 255px;height: 220px">
          <div class="size-t">{{item.contentTitle}}</div>
        </div>
      </div>
      <div v-show="currentActive  == 4 " class="wrapbox">
        <div class="newRsr"   v-for="(item,index) in otherList" @click="goDeatail(item)" >
          <img  :src=" imgurl + item.contentImg" style="width: 255px;height: 220px">
          <div class="size-t">{{item.contentTitle}}</div>
        </div>
      </div>
      <div v-show="currentActive  == 5 " class="wrapbox">
        <div class="noticeRsr"   v-for="(item,index) in noticeList" @click="goDeatail(item)" >
            <div >{{item.contentTitle}}</div>
            <div >{{item.publishDate}}</div>
        </div>
      </div>
      <div v-show="currentActive == 2 || currentActive == 4 || currentActive === 5" >
          <page-util :category-id="categoryId" @event-message="handleDataFromPage" />
      </div>
      <div class="anniu" v-show="registerStatus == 1 && currentActive == 0" @click="toRegister" >去报名</div>
    </div>

    <footers></footers>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
import { getPageData, getCategoryByParentId,getbaseInfo } from "@/api/officialWebsite/getPageData";
import footers from '@/views/officialWebsite/Components/footer.vue'
import headers from '@/views/officialWebsite/Components/header.vue'
import PageUtil from '@/views/officialWebsite/Components/page'
import {addTeacher, register} from '@/api/officialWebsite/registerStudent'
import {getTab, getbanner} from '@/api/gw/home'
export default {
  components: {
    headers,
    footers,
    Swiper,
    SwiperSlide,
    "page-util": PageUtil
  },
  dicts: ["sys_user_sex"],
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      registerStatus:0,
      imgurl:process.env.VUE_APP_BASE_API,
      ruleForm: {
        division: null,
        schoolName: null,
        teamName: null,
        teachers: [
          {
            teacherName: null,
            teacherJob: null,
            teacherNumber: null,
            teacherEmail: null,
            teacherSchool: null
          },
          {
            teacherName: null,
            teacherJob: null,
            teacherNumber: null,
            teacherEmail: null,
            teacherSchool: null
          },
          {
            teacherName: null,
            teacherJob: null,
            teacherNumber: null,
            teacherEmail: null,
            teacherSchool: null
          }
        ],
        stuName: null,
        stuGender: null,
        stuMajor: null,
        stuNumber: null,
        leaderIds: [],
        guideIds: [],
        sampleConcat: null,
        sampleNumber: null,
        sampleAddress: null
      },
      rules: {
        stuName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        stuGender: [
          { required: true, message: "性别不能为空", trigger: "blur" }
        ],
        stuMajor: [
          { required: true, message: "专业不能为空", trigger: "blur" }
        ],
        stuNumber: [
          { required: true, message: "手机号不能为空", trigger: "blur" }
        ],
        schoolName: [
          { required: true, message: "学校及院系名称不能为空", trigger: "blur" }
        ],
        division: [
          { required: true, message: "所属赛区不能为空", trigger: "blur" }
        ],
        teamName: [
          { required: true, message: "参赛团队名称不能为空", trigger: "blur" }
        ],
        sampleConcat: [
          { required: true, message: "收件人不能为空", trigger: "blur" }
        ],
        sampleNumber: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        sampleAddress: [
          { required: true, message: "邮寄地址不能为空", trigger: "blur" }
        ],
      },
      pageContext: '',
      nav: [
      ],
      currentActive: 0,
      isMounted: false,
      input4: "",
      categoryId: "",
      noticeList:[],
      routeParam : {
        "categoryId": this.$route.query.id,
        "pageNum": 1,
        "pageSize": 10
      },
      otherList:[],
    }
  },
  mounted() {
    // 页面加载完毕调用
    this.initPageData();
  },
  computed: {

  },
  created() {
    this.createRules()
  },
  methods: {
    goDeatail(data){
      // console.log(data)
      if(data.linkType == 0){
        this.$router.push({
          name: 'details',
          query:{ id: data.id }
        });
      }
      if(data.linkType == 1){
        window.open(data.link, '_blank');
      }
    },
    createRules(){
      for (let i =  0; i < 3; i++){
        this.rules[`teachers.${i}.teacherName`] = [
          {required: true, message: '姓名不能为空', trigger: "blur"}
        ]
        this.rules[`teachers.${i}.teacherJob`] = [
          {required: true, message: '职务不能为空', trigger: "blur"}
        ]
        this.rules[`teachers.${i}.teacherNumber`] = [
          {required: true, message: '电话不能为空', trigger: "blur"}
        ]
        this.rules[`teachers.${i}.teacherEmail`] = [
          {required: true, message: 'mail不能为空', trigger: "blur"}
        ]
        this.rules[`teachers.${i}.teacherSchool`] = [
          {required: true, message: '所在系及专业不能为空', trigger: "blur"}
        ]
      }
    },
    // 触发导航
    getCurrentActive(value) {
      if (this.currentActive == value) {
        return
      }

      this.currentActive = value
      this.categoryId = ""

      if (value === 5){
        this.categoryId = this.getNoticeId()
      }else if (value === 0 || value === 1 || value === 3) {
        this.pageContext = ""
        this.getContentDetail()
      }else{
        this.otherList = []
        this.categoryId = this.nav[value].id;
      }
    },
    initPageData() {
      getbaseInfo().then(res=>{
        this.registerStatus = res.data.registerStatus
      })
      this.categoryId = this.$route.query.id
      getCategoryByParentId(this.routeParam.categoryId).then(res => {
        this.nav = res.data
        this.getContentDetail()
      })
    },
    getContentDetail(){
      this.routeParam.categoryId = this.nav[this.currentActive].id
      getPageData(this.routeParam).then(response => {
        this.pageContext = response.data.list[0].contentDetail
      })
    },
    getNoticeId(){
      getTab().then(res => {
        const query = {
          "categoryId": res.data[0].id,
          "pageNum": 1,
          "pageSize": 10
        }
        getCategoryByParentId(query.categoryId).then(res => {
          this.categoryId = res.data[1].id
        })
      })
    },
    handleDataFromPage(data){
      if (this.currentActive === 2 || this.currentActive == 4){
        this.otherList = data
      }
      if (this.currentActive === 5){
        this.noticeList = data
      }
    },
    toRegister(){
      if (this.registerStatus === '1') this.currentActive = 6;
    },
    submitForm(){
      this.$refs["form"].validate(valid => {
        if (valid){
          const leader = this.ruleForm.teachers[0]
          const guides = this.ruleForm.teachers.slice(1)
          addTeacher(leader).then(res => {
            this.ruleForm.leaderIds.push(res.data)
          })
          guides.forEach(item => {
            addTeacher(item).then(res => {
              this.ruleForm.guideIds.push(res.data)
            })
          })
          register(this.ruleForm).then(res => {
            if (res.code === 200){
              this.reset();
              this.$modal.msgSuccess("报名成功")
            }else (
              this.$modal.msgError("报名失败")
            )
          })
        }else {
          this.$modal.msgError("信息未填完整")
        }
      })
    },
    reset(){
      this.ruleForm = {
        division: null,
          schoolName: null,
          teamName: null,
          teachers: [
          {
            teacherName: null,
            teacherJob: null,
            teacherNumber: null,
            teacherEmail: null,
            teacherSchool: null
          },
          {
            teacherName: null,
            teacherJob: null,
            teacherNumber: null,
            teacherEmail: null,
            teacherSchool: null
          },
          {
            teacherName: null,
            teacherJob: null,
            teacherNumber: null,
            teacherEmail: null,
            teacherSchool: null
          }
        ],
          stuName: null,
          stuGender: null,
          stuMajor: null,
          stuNumber: null,
          leaderIds: [],
          guideIds: [],
          sampleConcat: null,
          sampleNumber: null,
          sampleAddress: null
      }
      this.resetForm("form");
    },
  }

}
</script>

<style scoped lang="scss">
.anniu{
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00A0E8;
  color: #fff;
  margin: 15px auto;
  border-radius: 8px;
  cursor: pointer;
}
/* .container {
  background: #F5F5F5;
} */
.bj {
  background: #F5F5F5;
}

::v-deep .team .el-input__inner {
  width: 240px;
  border-radius: 50px;
}

/* 圆形分页按钮样式 */
::v-deep .el-pagination .el-pager li:not(.disabled) {
  border-radius: 100%;
  /* 圆形 */
  width: 50px;
  height: 50px;
  /* 按钮高度 */
  line-height: 50px;
  /* 文字垂直居中 */
  text-align: center;
  /* 文字水平居中 */
  margin: 0 15px;
  /* 按钮间距 */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: #FFFFFF;

  border: 1px solid #DDDDDD;
}

/* 选中的页码按钮样式 */
::v-deep .el-pagination .el-pager .active {
  background-color: #005375;
  ;
  /* 背景颜色 */
  color: #fff;
  /* 文字颜色 */
}

::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .btn-prev {

  background-color: #f4f4f5;
  color: #333;
  margin: 0 15px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: #FFFFFF;

  border: 1px solid #DDDDDD;
}

::v-deep .el-pagination .btn-next .el-icon,
::v-deep .el-pagination .btn-prev .el-icon {
  font-size: 18px;
}

.top-box {
  width: 100%;
  /* height: 1000px; */
  /* background: url(''); */
  /* background-size: cover; */
  /* 背景图片铺满盒子 */
  /* background-repeat: no-repeat; */
  /* 禁止背景图片重复 */
  position: relative;
}

.tab-box {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: #005375;
  font-weight: bold;
  font-size: 18px;
  color: #FFFFFF;
  /* position: absolute; */
  z-index: 3;

}

.d-s {
  display: flex;
  align-items: center;
}

.logo-box {
  width: 50px;
  height: 50px;
  background: #fff;
}

.logo-size {
  font-weight: 800;
  font-size: 24px;
  color: #FFFFFF;
  margin-left: 20px;

}

.x-x {
  margin-right: 20px;
  cursor: pointer;
}
.wrapbox{
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 15px;
}
.rsr{
  width: 20%;
}
.newRsr{
  width: 25%;
  text-align: center;
}
.ny-banner {
  width: 100%;
}

.ny-banner img {
  width: 100%;
}

.navigation {
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid #EEEEEE;
}

.navigation .content {
  width: 80%;
  margin: 0 auto;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.navigation .content .left {
  width: 30%;
  display: flex;

  align-items: center
}

.navigation img {

  width: 15px;
  margin-right: 10px;
}

.navigation p {

  /* margin-top: 5px; */
  color: #999;
}

.navigation span {

  color: #999;
}

.navigation span:last-child {
  font-weight: 700;
  color: #005375;
}

.navigation .content .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  align-items: center
}

.navigation .content .right .nav-item {
  width: 200px;
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

.navigation .content .right .active {
  border-bottom: 3px solid #005375;
  color: #005375;
  font-weight: bold;
}
.page-box{
  width: 82%;
  margin: 10px auto;
}
.committee-cont {
  width: 80%;
  margin: 40px auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 15px;
  img{
    width: 100%;
  }
}

.committee-cont .news {
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
}

.committee-cont .news .news-list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30px;
  margin-bottom: 30px;
  cursor: pointer;
  border-bottom: 1px solid #EEEEEE;
}

.committee-cont .news .news-list .item .tts {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 80%;
  font-size: 20px;
  color: #333333;
  font-weight: 500;
}

.committee-cont .news .news-list .item .time {
  color: #999999;
  font-size: 14px;
}

.committee-cont .team {
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
}

.committee-cont .team .team-list {
  border: 1px solid #EEEEEE;
  margin-top: 30px;
}

.committee-cont .team .team-list .team-list-header {
  display: flex;
  height: 50px;
  align-items: center;
  background: #F2F3F5;
}

.committee-cont .team .team-list .team-list-header .div {
  width: 20%;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 2%;
  border-right: 1px solid #EEEEEE;
  font-size: 16px;
  font-weight: bold;
}

.committee-cont .team .team-list .team-list-header .div:last-child {
  width: 8%;
}

.committee-cont .team .team-list .item {
  display: flex;
  height: 50px;
  align-items: center;
}

.committee-cont .team .team-list .item .div {
  width: 20%;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 2%;
  border-right: 1px solid #EEEEEE;
  font-size: 16px;
}

.committee-cont .team .team-list .item .div:last-child {
  width: 8%;
  color: #005375;
}

.index-footer {
  background: #383838;
  padding-top: 30px;
}

.index-footer .footer {
  width: 80%;
  margin: 0 auto;
}

.index-footer .footer .logo {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.index-footer .footer .logo .footer-contact {}

.index-footer .footer .logo .footer-contact .p {
  display: inline-block;
  display: flex;
  float: left;
  margin-left: 50px;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  /* justify-content: flex-end; */
}

.index-footer .footer .logo .footer-contact .p img {
  margin-right: 10px;
}

.index-footer .footer .logo .footer-contact .p:nth-child(3) {
  width: 100%;
  clear: both;
  margin-top: 20px;
}

.index-footer .footer .footer-nav {
  display: flex;
  margin-top: 20px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.index-footer .footer .footer-nav .footer-nav-item {
  width: 9%;
  margin-right: 1%;
}

.index-footer .footer .footer-nav .footer-nav-item:last-child {
  margin-right: 0;
}

.index-footer .footer .footer-nav .footer-nav-item .tt {

  font-weight: 500;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 18px;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.index-footer .footer .footer-nav .footer-nav-item .tt::after {
  content: "";
  width: 20px;
  height: 2px;
  background: #005375;
  border-radius: 0px 0px 0px 0px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.index-footer .footer .footer-nav .footer-nav-item a {
  text-decoration: none;

  font-weight: 500;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 16px;
  display: block;
  margin-bottom: 15px;
}

.index-footer .footer .footer-nav .footer-nav-item a:last-child {
  margin-bottom: 0;
}

.index-footer .footer .web_icp {
  display: flex;
  margin-top: 50px;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.index-footer .footer .web_icp a {
  text-decoration: none;

  font-weight: 500;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 16px;
  margin-right: 30px;
}

.index-footer .footer .web_icp .right {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.index-footer .footer .web_icp .right div {
  margin-right: 25px;

  font-weight: 500;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 18px;

}
.tabber-box{
  width: 100%;
  box-sizing: border-box;
  padding: 15px;

}
.titel_{
  font-weight: bold;
  font-size: 28px;
  color: #333333;
  text-align: center;
  margin-bottom: 25px;
}
.kuang{
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 15px;
  margin: 15px auto;
}
.size-t{
  width: 100%;
  height: 50px;
  text-align: center;
}
.tab_title{
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
}
.tab_down_line{
  border-bottom: 1px solid #ccc;
}
.neirong{
  width: 100%; /* 或者使用具体的像素值 */
  height: 100%; /* 或者使用具体的像素值 */
}
.noticeRsr{
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
.noticeRsr:hover{
  color: #00A0E8;
  cursor: pointer;
}
</style>