<template>
  <div class="center_content">
    <div class="detaBox">
      <div class="anliMiddle">
        <div class="anliBox">
          <div class="anliImg">
            <img
              :src="
                anliBox[0] &&
                JSON.parse(anliBox[0].info) &&
                JSON.parse(anliBox[0].info).cover
                  ? JSON.parse(anliBox[0].info).cover[0].url
                  : noBanner
              "
              alt=""
            />
          </div>
          <div class="anliNav">
            <div>
              项目名称：{{
                anliBox[0] && JSON.parse(anliBox[0].info)
                  ? JSON.parse(anliBox[0].info).title
                  : ""
              }}
            </div>
            <div>创建人：{{ anliBox[0] ? anliBox[0].username : "" }}</div>
            <div>
              <div>单位：{{ anliBox[0] ? anliBox[0].schoolName : "" }}</div>
              <div>
                学科：{{
                  anliBox[0] && anliBox[0].typename
                    ? anliBox[0].typename
                    : "暂无分类"
                }}
              </div>
            </div>
            <div class="people">
              <div class="man">
                <img src="../../../../assets/people.png" alt />
              </div>
              <div class="person">0人</div>
            </div>
          </div>
        </div>
      </div>
      <div class="navBox">
        <div class="navTop">
          <div class="navImg" style="width: 27px">
            <img src="../../../../assets/icon/anliDetail/proOver.png" alt="" />
          </div>
          <div>项目基础信息</div>
        </div>
        <div class="navTop">
          <div class="navImg" style="width: 27px">
            <img src="../../../../assets/icon/anliDetail/proOver.png" alt="" />
          </div>
          <div>项目概况</div>
        </div>
        <div class="navTop">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/learnObj.png" alt="" />
          </div>
          <div>项目安排</div>
        </div>
        <div class="navTop">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/process.png" alt="" />
          </div>
          <div>项目活动过程</div>
        </div>
        <div class="navTop">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/proEva.png" alt="" />
          </div>
          <div>项目成果交流与评价</div>
        </div>
        <div class="navTop">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/proEff.png" alt="" />
          </div>
          <div>项目成效与反思</div>
        </div>
      </div>

      <div class="messageBox" v-if="anliBox[0]">
        <div class="proOverCss">
          <div class="whiteBg whiteLeft">
            <div class="navBgTop">
              <div class="navBg">项目概况</div>
              <el-button
                v-if="JSON.parse(anliBox[0].info).courseText != ''"
                @click="selectNav(JSON.parse(anliBox[0].info).courseText)"
                >查看更多</el-button
              >
            </div>
            <div
              class="proOverNav"
              v-html="
                JSON.parse(anliBox[0].info)
                  ? JSON.parse(anliBox[0].info).courseText
                  : ''
              "
              v-if="JSON.parse(anliBox[0].info).courseText != ''"
            ></div>
            <div class="noFile" v-else>
              <img src="../../../../assets/icon/anliDetail/noFile.jpg" alt="" />
            </div>
          </div>
          <div class="whiteRight">
            <div class="fileTop">
              <div class="fileListImg">
                <img
                  src="../../../../assets/icon/anliDetail/fileList.png"
                  alt=""
                />
              </div>
              <div>佐证材料</div>
            </div>
            <div class="fileBox">
              <div
                class="fileList"
                v-if="JSON.parse(anliBox[0].info).data.length"
              >
                <div
                  class="file"
                  v-for="(f, fIndex) in JSON.parse(anliBox[0].info).data"
                  :key="fIndex"
                >
                  <div class="fileCss">
                    <div>
                      1、{{
                        f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                      }}
                    </div>
                    <div>{{ f.name }}</div>
                  </div>
                </div>
              </div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">驱动问题</div>
                <el-button
                  v-if="JSON.parse(anliBox[0].overview).driQuestion.brief != ''"
                  @click="
                    selectNav(JSON.parse(anliBox[0].overview).driQuestion.brief)
                  "
                  >查看更多</el-button
                >
              </div>
              <div
                class="proOverNav"
                v-html="
                  anliBox[0] && JSON.parse(anliBox[0].overview)
                    ? JSON.parse(anliBox[0].overview).driQuestion.brief
                    : ''
                "
                v-if="JSON.parse(anliBox[0].overview).driQuestion.brief != ''"
              ></div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div
                  class="fileList"
                  v-if="JSON.parse(anliBox[0].overview).driQuestion.data.length"
                >
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
                      .driQuestion.data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1、{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>{{ f.name }}</div>
                    </div>
                  </div>
                </div>
                <div class="noFile" v-else>
                  <img
                    src="../../../../assets/icon/anliDetail/noFile.jpg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">学习目标</div>
                <el-button
                  v-if="JSON.parse(anliBox[0].overview).tarDesign.brief != ''"
                  @click="
                    selectNav(JSON.parse(anliBox[0].overview).tarDesign.brief)
                  "
                  >查看更多</el-button
                >
              </div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].overview)
                    ? JSON.parse(anliBox[0].overview).tarDesign.brief
                    : ''
                "
                v-if="JSON.parse(anliBox[0].overview).tarDesign.brief != ''"
              ></div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div
                  class="fileList"
                  v-if="JSON.parse(anliBox[0].overview).tarDesign.data.length"
                >
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
                      .tarDesign.data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1、{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>{{ f.name }}</div>
                    </div>
                  </div>
                </div>
                <div class="noFile" v-else>
                  <img
                    src="../../../../assets/icon/anliDetail/noFile.jpg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">评价设计</div>
                <el-button
                  v-if="JSON.parse(anliBox[0].overview).actiDesign.brief != ''"
                  @click="
                    selectNav(JSON.parse(anliBox[0].overview).actiDesign.brief)
                  "
                  >查看更多</el-button
                >
              </div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].overview)
                    ? JSON.parse(anliBox[0].overview).actiDesign.brief
                    : ''
                "
                v-if="JSON.parse(anliBox[0].overview).actiDesign.brief != ''"
              ></div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div
                  class="fileList"
                  v-if="JSON.parse(anliBox[0].overview).actiDesign.data.length"
                >
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
                      .actiDesign.data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1、{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>{{ f.name }}</div>
                    </div>
                  </div>
                </div>
                <div class="noFile" v-else>
                  <img
                    src="../../../../assets/icon/anliDetail/noFile.jpg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>

          <div
            v-for="(jd, jdIndex) in JSON.parse(anliBox[0].process).stageBox"
            :key="jdIndex"
          >
            <div class="proOverCss">
              <div class="whiteBg whiteLeft" style="padding: 0">
                <div class="hdTop">
                  <div class="longNavBg">
                    <div></div>
                    <div class="navBgTop">
                      <div>
                        阶段{{ jdIndex + 1 }}-阶段名称:{{
                          jd.staTitle
                        }}-阶段课时:{{ jd.allTime }}
                      </div>
                      <el-button
                        v-if="jd.brief != ''"
                        @click="selectNav(jd.brief)"
                        >查看更多</el-button
                      >
                    </div>
                  </div>
                  <div class="bottomBg"></div>
                </div>
                <div
                  class="proOverNav"
                  v-html="jd.brief"
                  v-if="jd.brief != ''"
                  style="padding: 20px 40px 0 40px"
                ></div>
                <div class="noFile" v-else>
                  <img
                    src="../../../../assets/icon/anliDetail/noFile.jpg"
                    alt=""
                  />
                </div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div class="fileList" v-if="jd.data.length">
                    <div
                      class="file"
                      v-for="(f, fIndex) in jd.data"
                      :key="fIndex"
                    >
                      <div class="fileCss">
                        <div>
                          1、{{
                            f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                          }}
                        </div>
                        <div>{{ f.name }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div v-for="(hd, hdIndex) in jd.actBox" :key="hdIndex">
              <div class="proOverCss">
                <div class="whiteBg whiteLeft" style="padding: 0">
                  <div class="hdTop">
                    <div class="longNavBg">
                      <div></div>
                      <div class="navBgTop">
                        <div>
                          {{ hd.actName }}-活动目标:{{ hd.driQuestion.title }}
                        </div>
                        <el-button
                          v-if="hd.driQuestion.brief != ''"
                          @click="selectNav(hd.driQuestion.brief)"
                          >查看更多</el-button
                        >
                      </div>
                    </div>
                    <div class="bottomBg"></div>
                  </div>
                  <div
                    class="proOverNav"
                    v-html="hd.driQuestion ? hd.driQuestion.brief : ''"
                    v-if="hd.driQuestion.brief != ''"
                    style="padding: 20px 40px 0 40px"
                  ></div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
                <div class="whiteRight">
                  <div class="fileTop">
                    <div class="fileListImg">
                      <img
                        src="../../../../assets/icon/anliDetail/fileList.png"
                        alt=""
                      />
                    </div>
                    <div>佐证材料</div>
                  </div>
                  <div class="fileBox">
                    <div class="fileList" v-if="hd.driQuestion.data.length">
                      <div
                        class="file"
                        v-for="(f, fIndex) in hd.driQuestion.data"
                        :key="fIndex"
                      >
                        <div class="fileCss">
                          <div>
                            1、{{
                              f.type == 1
                                ? "文档"
                                : f.type == 2
                                ? "视频"
                                : "图片"
                            }}
                          </div>
                          <div>{{ f.name }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="noFile" v-else>
                      <img
                        src="../../../../assets/icon/anliDetail/noFile.jpg"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="proOverCss">
                <div class="whiteBg whiteLeft" style="padding: 0">
                  <div class="hdTop">
                    <div class="longNavBg">
                      <div></div>
                      <div class="navBgTop">
                        <div>
                          {{ hd.actName }}-活动内容:{{ hd.tarDesign.title }}
                        </div>
                        <el-button
                          v-if="hd.tarDesign.brief != ''"
                          @click="selectNav(hd.tarDesign.brief)"
                          >查看更多</el-button
                        >
                      </div>
                    </div>
                    <div class="bottomBg"></div>
                  </div>
                  <div
                    class="proOverNav"
                    v-html="hd.tarDesign ? hd.tarDesign.brief : ''"
                    v-if="hd.tarDesign.brief != ''"
                    style="padding: 20px 40px 0 40px"
                  ></div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
                <div class="whiteRight">
                  <div class="fileTop">
                    <div class="fileListImg">
                      <img
                        src="../../../../assets/icon/anliDetail/fileList.png"
                        alt=""
                      />
                    </div>
                    <div>佐证材料</div>
                  </div>
                  <div class="fileBox">
                    <div class="fileList" v-if="hd.tarDesign.data.length">
                      <div
                        class="file"
                        v-for="(f, fIndex) in hd.tarDesign.data"
                        :key="fIndex"
                      >
                        <div class="fileCss">
                          <div>
                            1、{{
                              f.type == 1
                                ? "文档"
                                : f.type == 2
                                ? "视频"
                                : "图片"
                            }}
                          </div>
                          <div>{{ f.name }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="noFile" v-else>
                      <img
                        src="../../../../assets/icon/anliDetail/noFile.jpg"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="proOverCss">
                <div class="whiteBg whiteLeft" style="padding: 0">
                  <div class="hdTop">
                    <div class="longNavBg">
                      <div></div>
                      <div class="navBgTop">
                        <div>
                          {{ hd.actName }}-预期成果:{{ hd.actiDesign.title }}
                        </div>
                        <el-button
                          v-if="hd.actiDesign.brief != ''"
                          @click="selectNav(hd.actiDesign.brief)"
                          >查看更多</el-button
                        >
                      </div>
                    </div>
                    <div class="bottomBg"></div>
                  </div>
                  <div
                    class="proOverNav"
                    v-html="hd.actiDesign ? hd.actiDesign.brief : ''"
                    v-if="hd.actiDesign.brief != ''"
                    style="padding: 20px 40px 0 40px"
                  ></div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
                <div class="whiteRight">
                  <div class="fileTop">
                    <div class="fileListImg">
                      <img
                        src="../../../../assets/icon/anliDetail/fileList.png"
                        alt=""
                      />
                    </div>
                    <div>佐证材料</div>
                  </div>
                  <div class="fileBox">
                    <div class="fileList" v-if="hd.actiDesign.data.length">
                      <div
                        class="file"
                        v-for="(f, fIndex) in hd.actiDesign.data"
                        :key="fIndex"
                      >
                        <div class="fileCss">
                          <div>
                            1、{{
                              f.type == 1
                                ? "文档"
                                : f.type == 2
                                ? "视频"
                                : "图片"
                            }}
                          </div>
                          <div>{{ f.name }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="noFile" v-else>
                      <img
                        src="../../../../assets/icon/anliDetail/noFile.jpg"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="proOverCss">
                <div class="whiteBg whiteLeft" style="padding: 0">
                  <div class="hdTop">
                    <div class="longNavBg">
                      <div></div>
                      <div class="navBgTop">
                        <div>
                          {{ hd.actName }}-活动评价:{{ hd.evaDesign.title }}
                        </div>
                        <el-button
                          v-if="hd.evaDesign.brief != ''"
                          @click="selectNav(hd.evaDesign.brief)"
                          >查看更多</el-button
                        >
                      </div>
                    </div>
                    <div class="bottomBg"></div>
                  </div>
                  <!-- <div class="navBg">活动{{ hdIndex + 1 }}:{{ hd.actName }} </div> -->
                  <div
                    class="proOverNav"
                    v-html="hd.evaDesign ? hd.evaDesign.brief : ''"
                    v-if="hd.evaDesign.brief != ''"
                    style="padding: 20px 40px 0 40px"
                  ></div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
                <div class="whiteRight">
                  <div class="fileTop">
                    <div class="fileListImg">
                      <img
                        src="../../../../assets/icon/anliDetail/fileList.png"
                        alt=""
                      />
                    </div>
                    <div>佐证材料</div>
                  </div>
                  <div class="fileBox">
                    <div class="fileList" v-if="hd.evaDesign.data.length">
                      <div
                        class="file"
                        v-for="(f, fIndex) in hd.evaDesign.data"
                        :key="fIndex"
                      >
                        <div class="fileCss">
                          <div>
                            1、{{
                              f.type == 1
                                ? "文档"
                                : f.type == 2
                                ? "视频"
                                : "图片"
                            }}
                          </div>
                          <div>{{ f.name }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="noFile" v-else>
                      <img
                        src="../../../../assets/icon/anliDetail/noFile.jpg"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">活动成效</div>
                <el-button
                  v-if="JSON.parse(anliBox[0].proexc).brief != ''"
                  @click="selectNav(JSON.parse(anliBox[0].proexc).brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].proexc)
                    ? JSON.parse(anliBox[0].proexc).brief
                    : ''
                "
                v-if="JSON.parse(anliBox[0].proexc).brief != ''"
              ></div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div
                  class="fileList"
                  v-if="JSON.parse(anliBox[0].proexc).data.length"
                >
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].proexc).data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1、{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>{{ f.name }}</div>
                    </div>
                  </div>
                </div>
                <div class="noFile" v-else>
                  <img
                    src="../../../../assets/icon/anliDetail/noFile.jpg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">活动反思</div>
                <el-button
                  v-if="JSON.parse(anliBox[0].results).brief != ''"
                  @click="selectNav(JSON.parse(anliBox[0].results).brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].results)
                    ? JSON.parse(anliBox[0].results).brief
                    : ''
                "
                v-if="JSON.parse(anliBox[0].results).brief != ''"
              ></div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div
                  class="fileList"
                  v-if="JSON.parse(anliBox[0].results).data.length"
                >
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].results).data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1、{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>{{ f.name }}</div>
                    </div>
                  </div>
                </div>
                <div class="noFile" v-else>
                  <img
                    src="../../../../assets/icon/anliDetail/noFile.jpg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="fixBottom">
        <div class="returnAnLi" style="width: 100px" @click="goToX()">
          前往评分
        </div>
        <div
          class="returnAnLi"
          @click="goTo('/eventCenter?userid=' + userid + '&oid=' + oid)"
        >
          返回
        </div>
      </div>
    </div>
    <el-dialog
      title="查看详情"
      :visible.sync="dialogVisibleBrief"
      :append-to-body="true"
      width="1000px"
      height="80%"
      :before-close="handleClose"
      class="add_student"
    >
      <div slot="title" class="header-title">
        <div class="logoImg">
          <img src="../../../../assets/logo.png" alt />
        </div>
        <div class="title_add_student">查看详情</div>
      </div>
      <div v-html="briefNav"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleBrief = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisibleBrief: false,
      briefNav: "",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      aid: this.$route.query.aid,
      anliBox: [],
      noBanner: require("../../../../assets/noBanner.jpg"),
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    goTo(path) {
      this.$router.push(path);
    },
    goToX() {
      this.$message("暂未开放");
      return;
    },
    selectAnLi() {
      let params = {
        id: this.aid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRaceDetail", params)
        .then((res) => {
          this.anliBox = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectNav(n) {
      this.dialogVisibleBrief = true;
      this.briefNav = n;
    },
  },
  created() {
    this.selectAnLi();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
}
html,
body {
  background: #e1f1ff !important;
}
.add_student >>> .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
  background: #32455b;
}
.add_student >>> .el-dialog__title {
  font-size: 14px !important;
  color: #fff !important;
}
.add_student >>> .el-dialog__headerbtn {
  font-size: 20px !important;
}
.add_student >>> .el-form-item__label {
  margin-left: 65px;
}
.add_student >>> .el-form-item {
  display: flex;
}
.add_student >>> .el-form-item__content {
  margin: 0 !important;
}
.add_student >>> .el-dialog__footer {
  text-align: center !important;
}
.center_content {
  width: 100%;
  height: 100%;
  background: #e1f1ff;
}
.detaBox {
  padding: 10px 0 0 0;
  background: #e1f1ff;
  position: relative;
  padding-bottom: 50px;
}
.anliMiddle {
  margin: 0 0 15px 0;
  width: 100%;
  background: #fff;
}
.anliImg {
  width: 200px;
}
.anliImg > img {
  width: 100%;
  height: 100%;
}
.people {
  display: flex;
}

.person {
  margin-left: 10px;
  line-height: 18px;
}
.man {
  width: 16px;
  height: 16px;
}

.man > img {
  width: 100%;
  height: 100%;
}
.anliBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 25px 0 25px 60px;
  position: relative;
}
.anliNav {
  padding-left: 30px;
}
.anliNav > div:nth-child(1) {
  font-size: 20px;
  font-weight: bold;
}
.anliNav > div:nth-child(2) {
  margin: 10px 0 10px 0;
}
.anliNav > div:nth-child(3) {
  display: flex;
  margin-bottom: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.anliNav > div:nth-child(3) > div:nth-child(2) {
  color: #aba8a8;
  margin-left: 30px;
}
.navBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 70%;
  margin: 0 auto;
  height: 70px;
  border-radius: 10px;
}
.navTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 20px;
}
.navImg {
  width: 35px;
}
.navImg > img {
  width: 100%;
  height: 100%;
}
.messageBox {
  width: 70%;
  margin: 0 auto;
}
.whiteBg {
  width: 100%;
  background: #fff;
  margin: 20px 0;
  padding-top: 15px;
  border-radius: 10px;
  box-sizing: border-box;
}
.whiteLeft {
  width: 64%;
  margin: 0;
  min-height: 400px;
  max-height: 400px;
}
.navBg {
  width: 130px;
  height: 50px;
  background-image: url("../../../../assets/icon/anliDetail/navBg.png");
  background-size: 100% 100%;
  color: #fff;
  text-align: center;
  line-height: 47px;
  margin: 0 0 5px 20px;
  text-indent: 20px;
}
.detaBrief {
  padding: 0 0 20px 40px;
  text-indent: 25px;
  width: 90%;
  height: 100px;
  overflow: auto;
  word-break: break-word;
}
.proOverCss {
  width: 100%;
  display: flex;
  margin: 20px 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.whiteRight {
  width: 35%;
  margin-left: 2%;
}
.proOverNav {
  padding: 0 40px 20px 40px;
  max-height: 300px;
  min-height: 300px;
  overflow: auto;
  word-break: break-word;
}
.fileTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background: #398fc0;
  color: #fff;
  height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0 0 0 19px;
  font-size: 15px;
}
.fileListImg {
  width: 25px;
}
.fileListImg > img {
  width: 100%;
  height: 100%;
}
.fileBox {
  height: calc(400px - 50px);
  background: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.fileList {
  width: 98%;
  background: #f6f9fe;
  margin: 0 auto;
  border-radius: 10px;
  height: 340px;
  overflow: auto;
}
.file {
  padding: 10px;
}
.file > .fileCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  box-shadow: 2px 2px 13px 1px #e1e1e1;
}
.file > div > div:nth-child(1) {
  background: #286a8d;
  color: #fff;
  width: 95px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.file > div > div:nth-child(2) {
  background: #fff;
  height: 45px;
  width: 335px;
  line-height: 45px;
  padding-left: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdTop {
  position: relative;
  width: 100%;
  height: 60px;
}
.longNavBg {
  width: calc(100% - 30px);
  background-image: linear-gradient(90deg, #52c6ff, #18adff);
  color: #fff;
  height: 60px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 18px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding-left: 30px;
  position: absolute;
  z-index: 999;
}
.longNavBg > div:nth-child(1) {
  width: 8px;
  height: 8px;
  background: #ffeb24;
  border-radius: 50%;
  margin-right: 15px;
}
.longNavBg > div:nth-child(2) {
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.bottomBg {
  width: 98%;
  height: 40px;
  background: #d6f0ff;
  position: absolute;
  bottom: -10px;
  left: 50%;
  z-index: 9;
  transform: translate(-50%);
  border-radius: 10px;
}
.returnAnLi {
  background: #205cc6;
  width: 70px;
  height: 30px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  margin-right: 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
}
.fixBottom {
  position: fixed;
  width: 100%;
  height: 50px;
  background: #fff;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 2px 2px 13px 1px #e1e1e1;
  z-index: 999;
}
.noFile {
  width: 200px;
  margin: 0 auto;
  padding: 20px 0 0 0;
}
.noFile > img {
  width: 100%;
  height: 100%;
}
.navBgTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  width: 95%;
}
.header-title {
  display: flex;
}
.logoImg {
  width: 30px;
}
.logoImg > img {
  width: 100%;
  height: 100%;
}
.title_add_student {
  margin: 0 auto;
  color: #fff;
}
</style>