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

      <div class="ny-banner">
        <img src="../../assets/gw/dssj.png" alt="">
      </div>
    </div>
    <!-- new -->
    <div class="navigation">
      <div class="content">
        <div></div>
        <!--        <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="left_img" ref="leftImg">
        <img src="../../assets/images/l_img.png" alt="">
      </div>
      <div class="right_img" ref="rightImg">
        <img src="../../assets/images/l_img.png" alt="">
      </div>
      <div style="width: 76%;margin: 0 auto;background: #FFFFFF;">
        <div class="tabber-box " v-if="currentActive == 6">
          <div>
            <el-steps :active="active" finish-status="success" align-center>
              <el-step title="个人选拔赛报名"></el-step>
              <el-step title="地区选拔赛报名"></el-step>
              <el-step title="确认报名团队"></el-step>
              <el-step title="地区选拔赛报名结果"></el-step>
              <el-step title="比赛资料上传"></el-step>
            </el-steps>
            <div class="step-box" v-if="active == 0">
              <div class="step-box-title">
                <el-form label-width="80px" :model="signUpForm" :rules="rules" ref="form">
                  <el-form-item label="学号" prop="studentId">
                    <el-input v-model="signUpForm.studentId"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名" prop="stuName">
                    <el-input v-model="signUpForm.stuName"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="stuName">
                    <el-select v-model="signUpForm.sex" filterable allow-create default-first-option
                               placeholder="请选择性别"
                    >
                      <el-option key="男" label="男" value="男">
                      </el-option>
                      <el-option key="女" label="女" value="女">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="国籍" label-width="80px" prop="nationality">
                    <el-select v-model="signUpForm.nationality" filterable default-first-option
                               @change="changeNationality"
                               placeholder="请选择国籍"
                    >
                      <el-option v-for="item in dict.type.com_nationality" :key="item.value" :label="item.label"
                                 :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="所属赛区" prop="division">
                    <!-- 把这段html摆放到正确的位置，就完成了tooltip提示 -->
                    <span>
                        <el-tooltip placement="top">
                          <div slot="content">
                            东北赛区：黑龙江、吉林、辽宁、内蒙古<br>
                            华北赛区：北京、天津、河北、河南、山东、山西<br>
                            华东赛区：上海、湖北、湖南、江苏、江西、浙江、安徽<br>
                            华南赛区：广东、广西、福建、海南、云南<br>
                            西部赛区：重庆、甘肃、陕西、四川、新疆、贵州、青海、宁夏、西藏<br>
                          </div>
                          <!-- elementui图标库：显示黑色的问号图标   -->
                          <i class="el-icon-question"/>
                        </el-tooltip>
                </span>

                    <el-select v-model="signUpForm.division" filterable allow-create default-first-option
                               placeholder="请选择所属赛区"
                    >
                      <el-option v-for="item in dict.type.com_region" :key="item.value" :label="item.label"
                                 :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="学校" label-width="80px" prop="schoolName">
                    <el-input v-model="signUpForm.schoolName" style="width: 300px;" placeholder="请输入学校名称"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="院系名称" prop="collegeName">
                    <el-input v-model="signUpForm.collegeName"></el-input>
                  </el-form-item>
                  <el-form-item label="专业名称" prop="major">
                    <el-input v-model="signUpForm.major"></el-input>
                  </el-form-item>


                  <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="signUpForm.phoneNumber">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="signUpForm.email"></el-input>
                  </el-form-item>
                  <el-form-item label="学生证/学生卡" prop="studentIdCard" label-width="130px">
                    <image-upload :limit="1" v-model="signUpForm.studentIdCard"></image-upload>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" style="z-index: 99999" @click="trialsSubmitForm">提交</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="step-box" v-if="active == 1" style="position: relative">
              <div class="step-box-title" style="font-size: 20px;margin-top: 8%" v-if="signUpForm.trialsScore == null">
                个人选拔赛成绩未出，请耐心等待
                <br>
                成绩仅供参考，最终选择由指导老师和领队老师做决定
              </div>
              <!-- <div class="step-box-title" style="font-size: 20px;margin-top: 8%" v-if="signUpForm.trialsScore == null">成绩仅供参考，最终选择由指导老师和领队老师做决定</div> -->
              <div class="step-box-title" style="font-size: 20px;margin-top: 8%"
                   v-if="signUpForm.trialsScore != null && signUpForm.isPreliminary == false"
              >
                等待领队老师确认，您的个人成绩为 : {{ signUpForm.trialsScore }}
              </div>
              <div style="position: absolute;left: 15%; top: 30%" v-if="signUpForm.trialsScore">
                <div style="font-size: 24px">
                  个人选拔赛成绩：
                </div>
                <div style="font-size: 24px;color:#ff0000;margin-top: 15px">
                  {{ signUpForm.trialsScore }}
                </div>

              </div>
              <div style="margin-top: 25px;width: 600px;margin-left: 30%" v-if="signUpForm.isPreliminary == true">

                <el-form ref="form" :rules="preliminaryFormRules" :model="preliminaryForm" label-width="150px">
                  <div class="d-s" style="justify-content: space-between">
                    <el-form-item label="赛区" prop="divisionLabel">
                      <el-input v-model="preliminaryForm.divisionLabel"></el-input>
                    </el-form-item>

                    <el-form-item label="学校" prop="schoolName">
                      <el-input v-model="preliminaryForm.schoolName"></el-input>
                    </el-form-item>
                  </div>
                  <div class="d-s">
                    <el-form-item label="赛道" prop="racetrack">
                      <el-radio-group v-model="preliminaryForm.racetrack" @change="changeRacetrack()">
                        <el-radio
                          v-for="item in dict.type.com_racetrack"
                          :key="item.value"
                          :label="item.value"
                          :disabled="item.disabled || item.raw.remark == '0'"
                        >
                          {{ item.label }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                  <div class="d-s" v-if="showCompetition">
                    <el-form-item label="赛事" prop="competition">
                      <el-checkbox-group v-model="preliminaryForm.competition">
                        <el-checkbox label="1">化验赛</el-checkbox>
                        <el-checkbox label="2">虚拟赛</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </div>
                  <div class="d-s">
                    <el-form-item label="领队老师" prop="ldTeacherInfo.teacherName">
                      <el-input v-model="preliminaryForm.ldTeacherInfo.teacherName" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="团队名称" prop="teamName">
                      <el-input v-model="preliminaryForm.teamName"></el-input>
                    </el-form-item>
                  </div>
                  <div class="d-s" v-if="preliminaryForm.racetrack != 2">
                    <el-form-item label="队员1" prop="teammateOne">
                      <el-select v-model="preliminaryForm.teammateOne" placeholder="第一个队友">
                        <el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId"
                                   :label="item.stuName"
                                   :value="item.userId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="队员2" prop="teammateTwo">
                      <el-select v-model="preliminaryForm.teammateTwo" placeholder="第二个队友">
                        <el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId"
                                   :label="item.stuName"
                                   :value="item.userId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>

                  <div class="d-s" v-if="preliminaryForm.racetrack == 2">
                    <el-form-item label="队员" prop="teammate">
                      <el-select
                        v-model="preliminaryForm.teammate"
                        placeholder="请选择队友"
                        clearable
                        multiple
                      >
                        <el-option
                          v-for="item in preliminaryForm.tdStudentList"
                          :key="item.userId"
                          :label="item.stuName"
                          :value="item.userId"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>

                  <div class="d-s">
                    <el-form-item label="指导老师1" prop="teacherOne">
                      <el-select v-model="preliminaryForm.teacherOne" placeholder="指导老师1">
                        <el-option v-for="item in preliminaryForm.zdTeacherList" :key="item.userId"
                                   :label="item.teacherName" :value="item.userId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="指导老师2" prop="teacherTwo">
                      <el-select v-model="preliminaryForm.teacherTwo" placeholder="指导老师2">
                        <el-option v-for="item in preliminaryForm.zdTeacherList" :key="item.userId"
                                   :label="item.teacherName" :value="item.userId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="d-s">
                    <el-form-item label="盲样联系人" prop="sampleConcat">
                      <el-input v-model="preliminaryForm.sampleConcat"></el-input>
                    </el-form-item>
                    <el-form-item label="盲样联系人手机号" prop="sampleNumber">
                      <el-input v-model="preliminaryForm.sampleNumber"></el-input>
                    </el-form-item>
                  </div>

                  <el-form-item v-if="preliminaryForm.competition.includes('1')" label="盲样邮寄地址"
                                prop="sampleAddress"
                  >
                    <el-input v-model="preliminaryForm.sampleAddress"></el-input>
                  </el-form-item>
                  <el-form-item label="附件（纸质报名表盖章）" prop="uploadFile" label-width="180px">
                    <!-- <file-upload :fileSize="20" :fileType="['doc','docx','pdf','zip']" v-model="preliminaryForm.uploadFile"></file-upload> -->
                    <file-upload :fileSize="20" :fileType="['pdf']" v-model="preliminaryForm.uploadFile"></file-upload>
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="signUpForm.trialsScore != null && signUpForm.isPreliminary == true">
                <el-button type="primary" @click="preliminarySubmit">提交</el-button>
              </div>
            </div>
            <div class="step-box" v-if="active == 2">

              <el-descriptions class="margin-top" title="团队信息" border>
                <el-descriptions-item label="赛区">{{ preliminaryForm.divisionLabel }}</el-descriptions-item>
                <el-descriptions-item label="学校">{{ preliminaryForm.hitRegInfo.schoolName }}</el-descriptions-item>
                <el-descriptions-item label="领队老师">{{
                    preliminaryForm.ldTeacherInfo.teacherName
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="指导老师">{{ preliminaryForm.zdTeacherStr }}</el-descriptions-item>
                <el-descriptions-item label="样品联系人">{{
                    preliminaryForm.hitRegInfo.sampleConcat
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="联系人手机号">{{
                    preliminaryForm.hitRegInfo.sampleNumber
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="样品邮寄地址">{{
                    preliminaryForm.hitRegInfo.sampleAddress
                  }}
                </el-descriptions-item>

              </el-descriptions>
              <el-table :data="preliminaryForm.hitRegInfo.studentUser" border style="width: 100%">
                <el-table-column prop="userName" align="center" label="姓名">
                </el-table-column>
                <el-table-column prop="status" align="center" label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">待确认</span>
                    <span v-if="scope.row.status == 1">同意</span>
                    <span v-if="scope.row.status == 2">拒绝</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <div v-if="scope.row.isOwn == '1'">
                      <el-button size="mini" type="text" icon="el-icon-check"
                                 @click="regChoose(scope.row, 1)"
                      >同意
                      </el-button>
                      <el-button size="mini" type="text" icon="el-icon-close"
                                 @click="regChoose(scope.row, 2)"
                      >拒绝
                      </el-button>
                    </div>

                  </template>
                </el-table-column>
              </el-table>
              <div>
              </div>
            </div>
            <div class="step-box" v-if="active == 3">
              <div class="step-box-title" style="font-size: 20px;margin-top: 8%">
                地区选拔赛报名提交成功，请通过大赛通知获取通过信息
              </div>
            </div>
          </div>

          <div class="step-box" v-if="active == 4">
            <div class="step-box-title" style="font-size: 18px;margin-top: 8%;color: red">（地区选拔赛前无需上传资料）
            </div>
            <file-upload style="margin-top: 5%" :fileSize="200" :fileType="['zip', 'rar', '7z']"
                         v-model="preliminaryForm.hitRegInfo.dsFile"
            ></file-upload>
            <div>
              <el-button style="margin-top: 8%" type="primary" @click="fileSubmit">提交</el-button>
            </div>
          </div>
        </div>

        <!-- 成绩查询     -->
        <div class="tabber-box1" v-if="currentActive == 7">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="成绩" name="scores" class="tabber-box">
              <el-row>
                <el-col :span="12">
                  <h3>个人选拔赛成绩</h3>
                  <p style="color: red; font-size: 20px" v-if="studentForm.trialsScore">{{
                      studentForm.trialsScore
                    }}</p>
                  <p style="font-size: 20px" v-else>暂无</p>
                </el-col>
                <el-col :span="12">
                  <h3>虚拟赛成绩</h3>
                  <p style="color: red; font-size: 20px" v-if="studentForm.virtualScore">{{
                      studentForm.virtualScore
                    }}</p>
                  <p style="font-size: 20px" v-else>暂无</p>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <h3>化验赛成绩</h3>
                  <p style="color: red; font-size: 20px" v-if="studentForm.assayScore">{{ studentForm.assayScore }}</p>
                  <p style="font-size: 20px" v-else>暂无</p>
                </el-col>
                <el-col :span="12">
                  <h3>团队成绩</h3>
                  <p style="color: red; font-size: 20px" v-if="studentForm.teamScore">{{ studentForm.teamScore }}</p>
                  <p style="font-size: 20px" v-else>暂无</p>
                </el-col>
              </el-row>

            </el-tab-pane>
            <el-tab-pane label="个人信息" name="edit-student">
              <el-form :model="studentForm" label-width="80px" :rules="rules" label-position="left">
                <h3>修改学生信息</h3>
                <el-form-item label="学号" prop="studentId">
                  <el-input v-model="studentForm.studentId" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="stuName">
                  <el-input v-model="studentForm.stuName" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="stuName">
                  <el-select v-model="studentForm.sex" filterable allow-create default-first-option
                             placeholder="请选择性别"
                  >
                    <el-option key="男" label="男" value="男">
                    </el-option>
                    <el-option key="女" label="女" value="女">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="国籍" label-width="80px" prop="nationality">
                  <el-select v-model="studentForm.nationality" filterable default-first-option
                             @change="changeNationality"
                             placeholder="请选择国籍"
                  >
                    <el-option v-for="item in dict.type.com_nationality" :key="item.value" :label="item.label"
                               :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属赛区" prop="division">
                  <el-select v-model="studentForm.division" filterable allow-create default-first-option
                             placeholder="请选择所属赛区"
                  >
                    <el-option v-for="item in dict.type.com_region" :key="item.value" :label="item.label"
                               :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="学校" label-width="80px" prop="schoolName">
                  <el-input v-model="studentForm.schoolName" style="width: 300px;" placeholder="请输入学校名称"
                  ></el-input>

                </el-form-item>

                <el-form-item label="院系名称" prop="collegeName">
                  <el-input v-model="studentForm.collegeName" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="专业名称" prop="major">
                  <el-input v-model="studentForm.major" style="width: 300px;"></el-input>
                </el-form-item>


                <el-form-item label="手机号" prop="phoneNumber">
                  <el-input v-model="studentForm.phoneNumber" style="width: 300px;">
                  </el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="studentForm.email" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="学生证/学生卡" prop="studentIdCard" label-width="130px">
                  <image-upload :limit="1" v-model="studentForm.studentIdCard"></image-upload>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="editStudentInfo">修改</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="团队信息" name="edit-team" v-if="teamForm" label-position="left">
              <el-form :model="teamForm" ref="form" label-position="left" label-width="100px"
                       :rules="teamFormRules">
                <h3>修改团队信息</h3><span style="color:red;"
                                           v-if="!studentForm.isUpdateTeam">报名时间已超过七天  无法修改</span>
                <el-form-item label="团队名称" prop="teamName">
                  <el-input disabled v-model="teamForm.teamName" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="所属赛区" prop="division">
                  <el-select v-model="teamForm.division" filterable allow-create default-first-option
                             placeholder="请选择所属赛区"
                  >
                    <el-option v-for="item in dict.type.com_region" :key="item.value" :label="item.label"
                               :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="学校" prop="schoolName">
                  <el-select v-model="teamForm.schoolName" filterable allow-create default-first-option
                             placeholder="请选择学校名称"
                  >
                    <el-option v-for="item in dict.type.school_name" :key="item.value" :label="item.label"
                               :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="赛道" prop="racetrackArr">
                  <el-checkbox-group v-model="teamForm.racetrackArr" @change="changeUpdateTeamRacetrack()">
                    <el-checkbox
                      v-for="item in dict.type.com_racetrack"
                      :key="item.value"
                      :label="item.value"
                      :checked="checked" @change="checked=!checked"
                      :disabled="item.disabled || item.raw.remark == 0"
                    >
                      {{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="赛事" prop="competition" v-if="showCompetition">
                  <el-checkbox-group v-model="teamForm.competition">
                    <el-checkbox label="1">化验赛</el-checkbox>
                    <el-checkbox label="2">虚拟赛</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="盲样联系人" prop="sampleConcat">
                  <el-input v-model="teamForm.sampleConcat" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="盲样联系人手机号" prop="sampleNumber">
                  <el-input v-model="teamForm.sampleNumber" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item v-if="teamForm.competition && teamForm.competition.includes('1')" label="盲样邮寄地址"
                              prop="sampleAddress"
                >
                  <el-input v-model="teamForm.sampleAddress" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item v-if="studentForm.isUpdateTeam">
                  <el-button type="primary" @click="updateTeamInfo">修改</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- main -->
        <div v-show="currentActive == 0 || currentActive == 1" v-html="pageContext"></div>

        <div v-show="currentActive == 3 || currentActive == 4" 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 == 2 || currentActive == 5 || currentActive == 4" class="wrapbox">
          <div class="n-box" v-for="(item, index) in noticeList" @click="goDeatail(item)">
            <div>
              <div class="v-time">{{ item.publishDate }}</div>
              <div class="v-title">{{ item.contentTitle }}</div>
              <div class="v-size">{{ item.summary || '' }}</div>
            </div>
            <div>
              <img :src="imgurl + item.contentImg" style="width: 300px; height: 150px; ">
            </div>
          </div>

        </div>
        <div v-show="currentActive == 2 || currentActive == 4 || currentActive === 3  || currentActive == 5"
             style="z-index: 999;position:relative"
        >
          <page-util :category-id="categoryId" @event-message="handleDataFromPage"/>
        </div>
        <div class="anniu" v-show=" registerStatus == 1 &&currentActive == 0" @click="toRegister">
          <img src="../../assets/images/bhuaa.png" style="width:140px;height: 88px">
        </div>
        <div class="anniu2" v-show="registerStatus == 1 && currentActive == 0 && studentForm.signUp" @click="toQuery">
          <img src="../../assets/images/cha_kan_geng_duo.png" style="width: 140px;height: 58px">
        </div>
        <div class="anniu2" style="bottom: 280px;"
             v-show="registerStatus == 1 && currentActive == 0 && studentForm.signUp && hasRemarkOne"
             @click="toRegisterTeam">
          <img src="../../assets/images/teamReg.png" style="width:140px;height: 88px">
        </div>
        <div class="tabber-box1" v-if="currentActive == 8">
          <register-team :initial-data="preliminaryForm" :regionOptions="dict.type.com_region" @submit="submitRegTeam"
                         :show-competition="preliminaryForm.racetrack == 1 ? true : false"></register-team>
        </div>
        <div class="tabber-box1" v-if="currentActive == 9">
          <el-steps :active="teamActive" finish-status="success" align-center>
            <el-step title="地区选拔赛报名"></el-step>
            <el-step title="确认报名团队"></el-step>
            <el-step title="地区选拔赛报名结果"></el-step>
            <el-step title="比赛资料上传"></el-step>
          </el-steps>
          <div v-if="teamActive == 1">
            <register-team :initial-data="preliminaryForm" :regionOptions="dict.type.com_region" @submit="submitRegTeam"
                           :show-competition="preliminaryForm.racetrack == 1 ? true : false"></register-team>
          </div>
          <div class="step-box" v-if="teamActive == 2">
            <div class="step-box-title" style="font-size: 20px;margin-top: 8%">
              地区选拔赛报名提交成功
            </div>
          </div>
          <div class="step-box" v-if="teamActive == 3">
            <div class="step-box-title" style="font-size: 18px;margin-top: 8%;color: red">（地区选拔赛前无需上传资料）
            </div>
            <file-upload style="margin-top: 5%" :fileSize="200" :fileType="['zip', 'rar', '7z']"
                         v-model="preliminaryForm.hitRegInfo.dsFile"
            ></file-upload>
            <div>
              <el-button style="margin-top: 8%" type="primary" @click="fileSubmit('team')">提交</el-button>
            </div>
          </div>
        </div>

      </div>
      <div class="bottom_img" ref="bottomImg">
      </div>
    </div>
    <el-dialog
      :visible.sync="showSelectRacetrack"
      width="30%">
      <select-common title="选择赛道" content="请选择赛道报名" @selected="selectRacetrack"
                     :tenants="racetrackList"></select-common>
    </el-dialog>


    <footers style="position: relative"></footers>
  </div>
</template>

<script>
import {getHomeUserInfo} from '@/api/system/user'
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 SelectCommon from "@/components/select/select.vue";
import RegisterTeam from "@/components/RegisterTeam/registerTeam.vue";
import {
  editRegUser,
  register,
  getStudentInfoByStuId,
  getTeamMateInfo,
  getTeacherInfo,
  PreliminaryRegistration,
  getTeamMate,
  agreeTeam,
  refuseTeam,
  editRegInfo, editCompetitionStudentInfo, updateRegInfo, editTeam, queryIfReg
} from '@/api/officialWebsite/registerStudent'
import {getTab, getbanner} from '@/api/gw/home'
import {getToken} from '@/utils/auth'
import log from "@/views/monitor/job/log.vue";
import Vue from "vue";

export default {
  components: {
    headers,
    RegisterTeam,
    footers,
    SelectCommon,
    Swiper,
    SwiperSlide,
    'page-util': PageUtil
  },
  dicts: ['sys_user_sex', 'school_name', 'com_region', 'com_racetrack', 'com_nationality'],
  name: 'HelloWorld',

  data() {
    return {
      currentUser: '',
      checked: false,
      // 成绩查询的tab
      activeTab: 'scores',
      active: 0,//当前激活的tab
      msg: '8',
      registerStatus: 0,
      hasRemarkOne: false,
      racetrackList: [],
      showSelectRacetrack: false,
      imgurl: process.env.VUE_APP_BASE_API,
      //修改学生信息
      studentForm: {},
      //修改团队信息
      teamForm: {
        teamName: '',
        division: '',
        schoolName: '',
        teammateOne: '',
        teammateTwo: '',
        leaderTeacher: '',
        teacherOne: '',
        teacherTwo: '',
        racetrackArr: [],
        competition: [],
        racetrack: '',
      },
      //个人选拔赛表
      signUpForm: {
        stuName: '',
        schoolName: '',
        division: '',
        collegeName: '',
        phoneNumber: '',
        email: '',
        studentId: '',
        major: '',
        hitRegId: '',
        trialsScore: '',
        isPreliminary: '',
        racetrack: '',
        nationality: '',
        // racetrackArr: []
      },
      showCompetition: false,
      showSelectTeammate: false,
      //初赛表
      preliminaryForm: {
        teamName: '',
        teammate:[],
        division: '',
        schoolName: '',
        teammateOne: '',
        teammateTwo: '',
        leaderTeacher: '',
        teacherOne: '',
        teacherTwo: '',
        racetrackArr: [],
        competition: [],
        racetrack: '',
        tdStudentList:[],

      },
      //队员
      teammateInfo: {
        teamId: '',
        teamName: '',
        teamMateId: '',
        isAgreeWith: ''
      },

      teammateList: [], // 临时用于渲染的队友列表
      teacherList: [], // 临时用于渲染的导师列表
      rules: {
        stuName: [
          {required: true, message: '姓名不能为空', trigger: 'blur'}
        ],
        schoolName: [
          {required: true, message: '学校名称不能为空', trigger: 'blur'}
        ],
        studentId: [
          {required: true, message: '学号不能为空', trigger: 'blur'}
        ],
        collegeName: [
          {required: true, message: '院系名称不能为空', trigger: 'blur'}
        ],
        division: [
          {required: true, message: '所属赛区不能为空', trigger: 'blur'}
        ],
        major: [
          {required: true, message: '专业名称不能为空', trigger: 'blur'}
        ],
        studentIdCard: [
          {required: true, message: '学生证/学生卡不能为空', trigger: 'blur'}
        ],
        phoneNumber: [
          {required: true, message: '手机号不能为空', trigger: 'blur'},
          {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '邮箱不能为空', trigger: 'blur'}
        ],
        competition: [
          {required: true, message: '赛事不能为空', trigger: 'blur'}
        ],
        nationality: [
          {required: true, message: '国籍不能为空', trigger: 'blur'}
        ],

      },
      preliminaryFormRules: {
        racetrackArr: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个赛道',
            trigger: 'change'
          },
        ],
        competition: [
          {required: true, message: '请选择至少一个赛事', trigger: 'change', type: 'array'}
        ],
        divisionLabel: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        division: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        schoolName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        'ldTeacherInfo.teacherName': [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        teamName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        teammateOne: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        teammateTwo: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        teacherOne: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        // teacherTwo: [
        //   { required: true, message: "不能为空", trigger: "blur" }
        // ],
        sampleConcat: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        sampleNumber: [
          // 校验手机号
          {required: true, message: '不能为空', trigger: 'blur'},
          {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        racetrack: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        teammate: [
          {required: true, message: '请选择队友', trigger: 'change'},
          {
            validator: (rule, value, callback) => {
              if (value && value.length > 10) {
                callback(new Error('最多只能选择10个队友'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ],

        sampleAddress: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        uploadFile: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ]
      },
      teamFormRules: {
        racetrackArr: [
          {
            type: 'array',
            required: false,
            message: '请至少选择一个赛道1211',
            trigger: 'change'
          },
        ],
        competition: [
          {required: true, message: '请选择至少一个赛事', trigger: 'change', type: 'array'}
        ],
        divisionLabel: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        division: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        schoolName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        'ldTeacherInfo.teacherName': [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        teamName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        teammateOne: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        teammateTwo: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        teacherOne: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        // teacherTwo: [
        //   { required: true, message: "不能为空", trigger: "blur" }
        // ],
        sampleConcat: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        sampleNumber: [
          // 校验手机号
          {required: true, message: '不能为空', trigger: 'blur'},
          {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
        ],

        sampleAddress: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        uploadFile: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ]
      },
      pageContext: '',
      nav: [],
      teamActive: 0,
      currentActive: this.$route.query.childeIndex || 0,
      registerTeam: false,
      isMounted: false,
      input4: '',
      categoryId: '',
      noticeList: [],
      routeParam: {
        'categoryId': this.$route.query.id,
        'pageNum': 1,
        'pageSize': 10
      },
      otherList: []
    }
  },
  mounted() {
    console.log('组件创建')
    // 使用 JSON 穿透 Observer 查看原始值
    // 页面加载完毕调用
    this.initPageData()
    // 在组件挂载后添加滚动监听
    window.addEventListener('scroll', this.handleScroll)
  },

  beforeDestroy() {
    // 在组件销毁前移除滚动监听
    window.removeEventListener('scroll', this.handleScroll)
  },
  computed: {},
  created() {
    console.log('组件创建')
    this.loadUserInfo()

  },
  methods: {
    handleScroll() {
      let browserHeight = document.documentElement.clientHeight
      const leftImg = this.$refs.leftImg
      const rightImg = this.$refs.rightImg
      const bottomImg = this.$refs.bottomImg
      const scrollPosition = window.scrollY
      if (scrollPosition > 450) {
        leftImg.style.top = '100px'
        leftImg.style.position = 'fixed'
        rightImg.style.top = '0px'
        rightImg.style.position = 'fixed'
        bottomImg.style.bottom = '0'
      } else {
        leftImg.style.top = '250px'
        leftImg.style.position = 'absolute'
        rightImg.style.top = '150px'
        rightImg.style.position = 'absolute'
        bottomImg.style.bottom = '-300px'
      }
    },
    // 提交团队赛信息
    submitRegTeam(dataReg) {
      this.preliminaryForm = dataReg
      const data = JSON.parse(JSON.stringify(dataReg))
      data.competition = this.arrayToString(data.competition)
      console.log('个人选拔赛报名', data)
      PreliminaryRegistration(data).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess('地区选拔赛报名提交成功')
          this.fetchRegistrationInformation()
          this.teamActive = 2
        } else {
          this.$modal.msgError('报名失败')
        }
      })
    },
    regChoose(data, status) {
      data.status = status
      editRegUser(data).then(res => {
        this.$modal.msgSuccess('成功')
        this.fetchRegistrationInformation()
      })
    },
    fileSubmit(type) {
      let data = {
        id: this.preliminaryForm.hitRegInfo.id,
        dsFile: this.preliminaryForm.hitRegInfo.dsFile,
      }
      editTeam(data).then(res => {
        this.$modal.msgSuccess('成功')
        this.fetchRegistrationInformation()
        if (type == 'team') {
          this.teamActive = 4
        }
      })
    },
    //将数组转为字符串
    arrayToString(arr) {
      return arr.join(',')
    },
    //用户信息
    loadUserInfo() {
      if (getToken()) {
        getHomeUserInfo().then(response => {
          // this.signUpForm.studentId = response.data.userName;
          this.preliminaryForm = response.data

          this.fetchRegistrationInformation()
        })
      }
    },
    // 选择团队赛赛道
    selectRacetrack(data) {
      this.preliminaryForm.racetrack = data
      // 查询选择的赛道是否报过名
      const params = {
        racetrack: data
      }
      this.currentActive = 9
      queryIfReg(params).then(res => {
        if (res.data) {
          console.log(res.data, 666)
          this.preliminaryForm.hitRegInfo = res.data
          if (res.data.auditStatus == 1) {
            this.teamActive = 3
          }
          if (res.data.auditStatus == 0 || res.data.auditStatus == 9) {
            this.teamActive = 2
          }
          if (res.data.dsFile) {
            this.teamActive = 4
          }
        } else {
          this.teamActive = 1
        }
        console.log('此时的步骤', this.preliminaryForm.racetrack)
        this.showSelectRacetrack = false
      })
    },
    //根据学号查询学生报名信息
    fetchRegistrationInformation() {
      getStudentInfoByStuId(this.signUpForm.studentId)
        .then(response => {
          // 或使用 Vue.set 保持响应式
          // 避免直接覆盖整个对象，采用属性级赋值
          this.preliminaryForm = {
            ...this.preliminaryForm, // 保留原有结构
            ...response.data,       // 合并新数据
            racetrackArr: response.data.racetrackArr || [] // 确保数组类型
          }
          console.log('报名后的数据', this.preliminaryForm)
          this.preliminaryForm.competition = []
          // 如果nationality不是中国就禁用
          if (this.preliminaryForm.nationality !== '中国') {
            console.log('赛道', this.dict.type.com_racetrack)
            this.dict.type.com_racetrack.map(item => {
              if (item.value == '3') {
                item.disabled = false
              } else {
                item.disabled = true
              }
            })
          } else {
            this.dict.type.com_racetrack.map(item => {
              if (item.value == '3') {
                item.disabled = true
              }
            })
          }


          this.updateSignUpForm(response.data)
          this.studentForm = response.data
          this.teamForm = response.data.hitRegInfo

          if (this.teamForm) {
            this.teamForm.racetrackArr = []
            console.log('赛道', this.teamForm.racetrackArr)
            //将字符串转为数组
            this.teamForm.competition = this.teamForm.competition.split(',')
            if (this.teamForm.racetrack) {
              this.teamForm.racetrackArr = this.teamForm.racetrack.split(',')
              if (this.teamForm.racetrackArr.includes('1')) {
                this.showCompetition = true
              } else {
                this.showCompetition = false
                this.teamForm.competition = []
              }
            }
          }

          console.log('报名信息:', this.signUpForm)
        })

    },
    updateSignUpForm(data) {
      this.preliminaryForm.division = data.division
      this.preliminaryForm.divisionLabel = data.divisionLabel
      this.preliminaryForm.ldTeacherInfo = data.ldTeacherInfo
      if (data.ldTeacherInfo) {
        this.preliminaryForm.leaderTeacher = data.ldTeacherInfo.userId
      } else {
        this.preliminaryForm.ldTeacherInfo = {}
      }

      this.preliminaryForm.schoolName = data.schoolName
      this.preliminaryForm.zdTeacherList = data.zdTeacherList
      this.preliminaryForm.tdStudentList = data.tdStudentList
      this.preliminaryForm.zdTeacherStr = data.zdTeacherStr
      this.active = 1
      if (data.zdStatus == '0') {
        this.active = 3
        this.preliminaryForm.hitRegInfo = data.hitRegInfo
      } else if (data.zdStatus == '1') {
        this.active = 4
        this.preliminaryForm.hitRegInfo = data.hitRegInfo
        if (data.hitRegInfo.dsFile) {
          this.active = 5
        }
      } else if (data.zdStatus == '9') {
        console.log('执行同意界面')
        this.active = 2
        this.preliminaryForm.hitRegInfo = data.hitRegInfo
      } else if (data.id == null) {
        this.active = 0
      } else {
        this.signUpForm = data
      }
      console.log(data, 433, this.preliminaryForm)

    },

    // 触发导航
    getCurrentActive(value) {
      if (this.currentActive == value) {
        return
      }

      this.currentActive = value
      this.categoryId = ''

      if (value === 0 || value === 1) {
        this.pageContext = ''
        this.getContentDetail()
      } else {
        this.otherList = []
        this.categoryId = this.nav[value].id
      }
    },
    initPageData() {
      getbaseInfo().then(res => {
        this.registerStatus = res.data.registerStatus
        // 获取赛道信息
        const hasRemarkOne = res.data.dictDatas.some(item => item.remark == 1);
        this.hasRemarkOne = hasRemarkOne
        this.racetrackList = res.data.dictDatas
        console.log('赛道信息', hasRemarkOne)
      })
      this.categoryId = this.$route.query.id
      getCategoryByParentId(this.routeParam.categoryId).then(res => {
        this.nav = res.data
        console.log('此时的currentActive', this.currentActive)
        if (this.currentActive == 0 || this.currentActive == 1) {
          console.log('执行了')
          this.getContentDetail()

        } else {
          console.log('执行了11111')
          this.otherList = []
          this.categoryId = this.nav[this.currentActive].id
        }
      })
    },
    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 === 3) {
        this.otherList = data
      }
      if (this.currentActive === 2 || this.currentActive == 5 || this.currentActive == 4) {
        this.noticeList = data
      }
    },
    toRegister() {
      if (!getToken()) {
        this.$modal.msgWarning('报名请先登录系统！')

      } else {
        if (this.registerStatus === '1') this.currentActive = 6
      }

    },
    toRegisterTeam() {
      this.showSelectRacetrack = true
    },
    toQuery() {
      if (!getToken()) {
        this.$modal.msgWarning('报名请先登录系统！')

      } else {
        this.currentActive = 7
      }

    },
    downloadFile(fileName) {
      console.log('尝试下载文件...')
      const attachmentUrl = '/static/' + fileName

    },
    //个人选拔赛报名
    trialsSubmitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          register(this.signUpForm).then(res => {
            if (res.code === 200) {
              this.reset()
              this.$modal.msgSuccess('个人选拔赛报名提交成功')
              this.next()
            } else {
              (
                this.$modal.msgError('报名失败')
              )
            }
          })
        } else {
          this.$modal.msgError('信息未填完整')
        }
      })
    },
    changeRacetrack() {
      //将数组转换为字符串
      // this.preliminaryForm.racetrack = this.arrayToString(this.preliminaryForm.racetrackArr)
      // 判断赛道中是否包含1

      if (this.preliminaryForm.racetrack.includes('1')) {
        this.showCompetition = true
      }  else {
        this.showCompetition = false
        this.preliminaryForm.competition = []
      }
      console.log('赛道', this.preliminaryForm.racetrack)
      if (this.preliminaryForm.racetrack == 2) {
        // 直接使用 Vue.set 确保 teammate 是响应式的
        if (!this.preliminaryForm.hasOwnProperty('teammate')) {
          Vue.set(this.preliminaryForm, 'teammate', []);
        } else {
          this.preliminaryForm.teammate = []; // 如果已经是响应式，直接赋值即可
        }
      }

        // this.preliminaryForm.tdStudentList = res.data.map(item => ({
        //   ...item,
        //   userId: String(item.userId)
        // }))


    },
    changeUpdateTeamRacetrack() {
      //将数组转换为字符串
      this.teamForm.racetrack = this.arrayToString(this.teamForm.racetrackArr)
      console.log('字符串', this.teamForm.racetrack)
      console.log('数组', this.teamForm.racetrackArr)
      // 判断赛道中是否包含1
      if (this.teamForm.racetrackArr.includes('1')) {
        this.showCompetition = true
      } else {
        this.showCompetition = false
        this.teamForm.competition = []
      }
    },
    // changeNationality() {
    //   console.log(this.dict.type.com_nationality)
    //   //将选择的赛道数组设置为空
    //   this.signUpForm.racetrackArr = []
    //   this.signUpForm.racetrack = ''
    //   //判断是否是中国
    //   if (this.signUpForm.nationality == '中国') {
    //     //this.dict.type.com_nationality找出value为3的 并将diabled设为true
    //     this.dict.type.com_racetrack.forEach(item => {
    //       if (item.value == 3) {
    //         item.disabled = true
    //       } else {
    //         item.disabled = false
    //       }
    //     })
    //     console.log(this.dict.type.com_racetrack)
    //   } else {
    //     //将1和2设为false
    //     this.dict.type.com_racetrack.forEach(item => {
    //       if (item.value == 1 || item.value == 2) {
    //         item.disabled = true
    //       } else {
    //         item.disabled = false
    //       }
    //     })
    //   }
    // },
    //修改学生信息
    editStudentInfo() {
      this.studentForm.competition = null
      this.studentForm.hitRegInfo = null
      //校验表单
      editCompetitionStudentInfo(this.studentForm).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess('修改成功')
        } else {
          this.$modal.msgError('修改失败')
        }
      })
    },
    //初赛报名
    preliminarySubmit() {
      const data = JSON.parse(JSON.stringify(this.preliminaryForm))
      data.competition = this.arrayToString(data.competition)
      console.log('个人选拔赛报名', data)
      this.$refs['form'].validate(valid => {
        if (valid) {
          PreliminaryRegistration(data).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess('地区选拔赛报名提交成功')
              this.fetchRegistrationInformation()
            } else {
              this.$modal.msgError('报名失败')
            }
          })
        }
      })
    },
    updateTeamInfo() {
      const data = JSON.parse(JSON.stringify(this.teamForm))
      data.competition = this.arrayToString(data.competition)
      //判断赛道是否为空
      if (data.racetrackArr.length === 0) {
        this.$modal.msgError('赛道不能为空')
        return
      }
      // 假设表单绑定 :model="formData"
      const formData = this.$refs['form'].model;
      console.log('formData', formData); // 输出所有表单字段值
      this.$refs['form'].validate(valid => {
        if (valid) {
          updateRegInfo(data).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess('修改成功')
              this.fetchRegistrationInformation()
            } else {
              this.$modal.msgError('修改失败')
            }
          })
        }
      })

    },

    reset() {
      this.signUpForm = {
        stuName: '',
        schoolName: '',
        division: '',
        collegeName: '',
        phoneNumber: '',
        email: '',
        studentId: '',
        major: ''

      },
        this.resetForm('form')
    },

    // 步骤条跳转至下一页
    next() {
      if (this.active++ > 2) this.active = 0
    }
  }
}
</script>

<style scoped lang="scss">
.anniu {

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;

  color: #fff;
  position: fixed;
  right: 25px;
  bottom: 100px;
  border-radius: 8px;
  cursor: pointer;
}

.anniu2 {

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  position: fixed;
  right: 25px;
  bottom: 200px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 9;
}

/* .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 !important;
  /* 背景颜色 */
  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 !important;
  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%;
  text-align: center;
}

.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;
  min-height: 400px;
  padding-bottom: 0px;
  position: relative;
  background-image: url("../../assets/images/top_.png");
  background-repeat: no-repeat;
  background-position: top;

  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;
  text-align: center;
  position: relative;
  z-index: 9;
}

.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;
}

.n-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #DDDDDD;
  box-sizing: border-box;
  padding: 15px 0px;
  background: #fff;
}

.noticeRsr:hover {
  color: #00A0E8;
  cursor: pointer;
}

.v-time {
  font-weight: 500;
  font-size: 18px;
  color: #005375;
  margin-bottom: 15px;
}

.v-title {
  font-weight: bold;
  font-size: 24px;
  color: #005375;
  margin-bottom: 15px;
}

.v-size {
  width: 800px;
  font-size: 18px;
  color: #999999;
}

/* 调整整个表单的宽度 */
.step-box-title .el-form {
  width: 100%;
  /* 或者具体数值，如 500px */
  max-width: 400px;
  /* 最大宽度限制 */
  margin: 0 auto;
  font-size: 25px;
  margin-top: 5%;
  /* 水平居中 */
}

/* 调整输入框和选择框的宽度 */
.step-box-title .el-form .el-input,
.step-box-title .el-form .el-select {
  width: 100%;
  /* 使输入框和选择框宽度与表单一致 */
}

/* 如果你想要固定宽度而不是100%，可以指定一个具体数值 */
.step-box-title .el-form .el-input,
.step-box-title .el-form .el-select {
  width: 300px;
}

.student-id-upload {
  position: relative;
  text-align: center;
  /* 如果需要在其中放置文字或图标 */
  color: #ccc;
  float: left;

}


/* 成绩查询样式 */
h3 {
  margin-bottom: 20px;
}

.tabber-box1 {
  position: relative;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.left_img {
  position: absolute;
  left: 15px;
  top: 250px;
  display: inline-block;
  animation-name: bounce;
  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
  animation-timing-function: ease-in-out; /* 控制速度曲线 */
  animation-iteration-count: infinite; /* 循环播放次数 */

}

.right_img {
  position: absolute;
  right: 15px;
  top: 150px;
  display: inline-block;
  animation-name: bounce;
  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
  animation-timing-function: ease-in-out; /* 控制速度曲线 */
  animation-iteration-count: infinite; /* 循环播放次数 */
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}

.bottom_img {
  width: 100%;
  height: 400px;
  position: fixed; /* 固定在页面 */
  display: block;
  bottom: -300px;
  left: 0; /* 确保元素从页面左侧开始 */
  background-image: url("../../assets/images/bottom_.png");
  background-repeat: no-repeat;
  z-index: 0;
  background-size: cover;
  transition: all 1s linear;
}
</style>
