EvenManage/src/components/pages/race/eventCenter/anliDetail.vue

<template>
  <div class="center_content">
    <div class="detaBox">
      <div class="anliMiddle">
        <div class="anliBox">
          <div class="anliImg">
            <img
              :src="
                anliBox[0] && anliBox[0].info && anliBox[0].info.cover.length
                  ? anliBox[0].info.cover[0].url
                  : noBanner
              "
              alt=""
            />
          </div>
          <div class="anliNav">
            <div>
              项目名称：{{
                anliBox[0] && anliBox[0].info ? anliBox[0].info.title : ""
              }}
            </div>
            <div>创建人：{{ anliBox[0] ? anliBox[0].name : "" }}</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">
                {{ anliBox[0] ? anliBox[0].info.tableData.length : 0 }}人
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="navBox">
        <div class="navTop" @click="jump('first')">
          <div class="navImg" style="width: 27px">
            <img src="../../../../assets/icon/anliDetail/proOver.png" alt="" />
          </div>
          <div>项目基础信息</div>
        </div>
        <div class="navTop" @click="jump('second')">
          <div class="navImg">
            <img
              src="../../../../assets/icon/anliDetail/proOverTwo.png"
              alt=""
            />
          </div>
          <div>项目概况</div>
        </div>
        <div class="navTop" @click="jump('third')">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/learnObj.png" alt="" />
          </div>
          <div>项目安排</div>
        </div>
        <div class="navTop" @click="jump('fouth')">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/process.png" alt="" />
          </div>
          <div>项目活动过程</div>
        </div>
        <div class="navTop" @click="jump('fivth')">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/proEva.png" alt="" />
          </div>
          <div>项目成果交流与评价</div>
        </div>
        <div class="navTop" @click="jump('sixth')">
          <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" id="first">
          <div class="whiteBg whiteLeft">
            <div class="navBgTop">
              <div class="navBg">项目概况</div>
              <el-button
                v-if="anliBox[0].info.courseText != ''"
                @click="selectNav(anliBox[0].info.courseText)"
                >查看更多</el-button
              >
            </div>
            <div
              v-if="
                anliBox[0].info.courseText != '' ||
                anliBox[0].info.imgBox.length > 0
              "
              class="imgAndNav"
            >
              <div
                class="leftBox"
                v-if="
                  anliBox[0].info.imgBox.length > 0 &&
                  anliBox[0].info.imgBox[0].type == 3
                "
              >
                <div
                  class="leftImg"
                  @click="
                    lookFile(
                      anliBox[0].info.imgBox[0].url,
                      anliBox[0].info.imgBox[0].type
                    )
                  "
                  v-if="anliBox[0].info.imgBox[0].type == 3"
                >
                  <img :src="anliBox[0].info.imgBox[0].url" alt="" />
                </div>
              </div>

              <div
                :class="
                  anliBox[0].info.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                "
                v-html="anliBox[0].info ? anliBox[0].info.courseText : ''"
              ></div>
            </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="
                  anliBox &&
                  anliBox[0].info &&
                  anliBox[0].info.data &&
                  anliBox[0].info.data.length
                "
              >
                <div
                  class="file"
                  v-for="(f, fIndex) in anliBox[0].info.data"
                  :key="fIndex"
                >
                  <div class="fileCss">
                    <div>
                      1.{{
                        f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                      }}
                    </div>
                    <div>
                      <div @click="lookFile(f.url, f.type)">
                        {{ f.name }}
                      </div>
                      <div class="downFile" @click="downloadFile(f.url)">
                        <img
                          src="../../../../assets/icon/anliDetail/down.png"
                          alt=""
                        />
                      </div>
                    </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" id="second">
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">驱动问题</div>
                <el-button
                  v-if="anliBox[0].overview.driQuestion.brief != ''"
                  @click="selectNav(anliBox[0].overview.driQuestion.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].overview.driQuestion.brief != '' ||
                  anliBox[0].overview.driQuestion.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].overview.driQuestion.imgBox.length > 0 &&
                    anliBox[0].overview.driQuestion.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile(
                        anliBox[0].overview.driQuestion.imgBox[0].url,
                        anliBox[0].overview.driQuestion.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].overview.driQuestion.imgBox[0].type == 3"
                  >
                    <img
                      :src="anliBox[0].overview.driQuestion.imgBox[0].url"
                      alt=""
                    />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].overview.driQuestion.imgBox.length > 0
                      ? 'proOverNav'
                      : 'noImg'
                  "
                  v-html="
                    anliBox[0].overview.driQuestion
                      ? anliBox[0].overview.driQuestion.brief
                      : ''
                  "
                ></div>
              </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="anliBox[0].overview.driQuestion.data.length"
                >
                  <div
                    class="file"
                    v-for="(f, fIndex) in anliBox[0].overview.driQuestion.data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1.{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>
                        <div @click="lookFile(f.url, f.type)">
                          {{ f.name }}
                        </div>
                        <div class="downFile" @click="downloadFile(f.url)">
                          <img
                            src="../../../../assets/icon/anliDetail/down.png"
                            alt=""
                          />
                        </div>
                      </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="anliBox[0].overview.tarDesign.brief != ''"
                  @click="selectNav(anliBox[0].overview.tarDesign.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].overview.tarDesign.brief != '' ||
                  anliBox[0].overview.tarDesign.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].overview.tarDesign.imgBox.length > 0 &&
                    anliBox[0].overview.tarDesign.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile(
                        anliBox[0].overview.tarDesign.imgBox[0].url,
                        anliBox[0].overview.tarDesign.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].overview.tarDesign.imgBox[0].type == 3"
                  >
                    <img
                      :src="anliBox[0].overview.tarDesign.imgBox[0].url"
                      alt=""
                    />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].overview.tarDesign.imgBox.length > 0
                      ? 'proOverNav'
                      : 'noImg'
                  "
                  v-html="
                    anliBox[0].overview.tarDesign
                      ? anliBox[0].overview.tarDesign.brief
                      : ''
                  "
                ></div>
              </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="anliBox[0].overview.tarDesign.data.length"
                >
                  <div
                    class="file"
                    v-for="(f, fIndex) in anliBox[0].overview.tarDesign.data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1.{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>
                        <div @click="lookFile(f.url, f.type)">
                          {{ f.name }}
                        </div>
                        <div class="downFile" @click="downloadFile(f.url)">
                          <img
                            src="../../../../assets/icon/anliDetail/down.png"
                            alt=""
                          />
                        </div>
                      </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="anliBox[0].overview.actiDesign.brief != ''"
                  @click="selectNav(anliBox[0].overview.actiDesign.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].overview.actiDesign.brief != '' ||
                  anliBox[0].overview.actiDesign.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].overview.actiDesign.imgBox.length > 0 &&
                    anliBox[0].overview.actiDesign.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile(
                        anliBox[0].overview.actiDesign.imgBox[0].url,
                        anliBox[0].overview.actiDesign.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].overview.actiDesign.imgBox[0].type == 3"
                  >
                    <img
                      :src="anliBox[0].overview.actiDesign.imgBox[0].url"
                      alt=""
                    />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].overview.actiDesign.imgBox.length > 0
                      ? 'proOverNav'
                      : 'noImg'
                  "
                  v-html="
                    anliBox[0].overview.actiDesign
                      ? anliBox[0].overview.actiDesign.brief
                      : ''
                  "
                ></div>
              </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="anliBox[0].overview.actiDesign.data.length"
                >
                  <div
                    class="file"
                    v-for="(f, fIndex) in anliBox[0].overview.actiDesign.data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1.{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>
                        <div @click="lookFile(f.url, f.type)">
                          {{ f.name }}
                        </div>
                        <div class="downFile" @click="downloadFile(f.url)">
                          <img
                            src="../../../../assets/icon/anliDetail/down.png"
                            alt=""
                          />
                        </div>
                      </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 anliBox[0].process.stageBox"
            :key="jdIndex"
            style="margin-top: 30px"
            id="third"
          >
            <div class="jdTopBox">
              <div class="jdTopNav" style="font-size: 18px">
                <div class="jdLeftNav">
                  <div class="jdImg">
                    <img
                      src="../../../../assets/icon/anliDetail/jdTitle.png"
                      alt=""
                    />
                  </div>
                  <div class="jdLeftTitle">
                    <div>阶段{{ jdIndex + 1 }}</div>
                    <div>{{ jd.staTitle }}</div>
                  </div>
                </div>
                <div class="jdRightNav" v-if="jd.allTime">
                  {{ jd.allTime }}课时
                </div>
              </div>
            </div>
            <div
              v-for="(hd, hdIndex) in jd.actBox"
              :key="hdIndex"
              style="margin-top: 20px"
            >
              <div class="jdTopBox" style="padding: 10px">
                <div class="jdTopNav">
                  <div class="jdLeftNav">
                    <div class="jdImg">
                      <img
                        src="../../../../assets/icon/anliDetail/rwTitle.png"
                        alt=""
                      />
                    </div>
                    <div class="jdLeftTitle">
                      <div>任务{{ hdIndex + 1 }}</div>
                      <div>{{ hd.actName }}</div>
                    </div>
                  </div>
                  <div class="jdRightNav" v-if="hd.actTime">
                    {{ hd.actTime }}课时
                  </div>
                </div>
              </div>
              <div class="proOverCss">
                <div class="whiteBg whiteLeft">
                  <div class="navBgTop">
                    <div class="jdNavBg">活动目标</div>
                    <el-button
                      v-if="hd.driQuestion.brief != ''"
                      @click="selectNav(hd.driQuestion.brief)"
                      >查看更多</el-button
                    >
                  </div>
                  <div
                    v-if="
                      hd.driQuestion.brief != '' ||
                      hd.driQuestion.imgBox.length > 0
                    "
                    class="imgAndNav"
                  >
                    <div
                      class="leftBox"
                      style="padding: 10px 0 0 35px"
                      v-if="
                        hd.driQuestion.imgBox.length > 0 &&
                        hd.driQuestion.imgBox[0].type == 3
                      "
                    >
                      <div
                        class="leftImg"
                        @click="
                          lookFile(
                            hd.driQuestion.imgBox[0].url,
                            hd.driQuestion.imgBox[0].type
                          )
                        "
                        v-if="hd.driQuestion.imgBox[0].type == 3"
                      >
                        <img :src="hd.driQuestion.imgBox[0].url" alt="" />
                      </div>
                    </div>

                    <div
                      :class="
                        hd.driQuestion.imgBox.length > 0
                          ? 'proOverNav'
                          : 'noImg'
                      "
                      v-html="hd.driQuestion ? hd.driQuestion.brief : ''"
                      style="margin: 10px 0 0 20px"
                    ></div>
                  </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>
                            <div @click="lookFile(f.url, f.type)">
                              {{ f.name }}
                            </div>
                            <div class="downFile" @click="downloadFile(f.url)">
                              <img
                                src="../../../../assets/icon/anliDetail/down.png"
                                alt=""
                              />
                            </div>
                          </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="jdNavBg">活动内容</div>
                    <el-button
                      v-if="hd.tarDesign.brief != ''"
                      @click="selectNav(hd.tarDesign.brief)"
                      >查看更多</el-button
                    >
                  </div>
                  <div
                    v-if="
                      hd.tarDesign.brief != '' || hd.tarDesign.imgBox.length > 0
                    "
                    class="imgAndNav"
                  >
                    <div
                      class="leftBox"
                      style="padding: 10px 0 0 35px"
                      v-if="
                        hd.tarDesign.imgBox.length > 0 &&
                        hd.tarDesign.imgBox[0].type == 3
                      "
                    >
                      <div
                        class="leftImg"
                        @click="
                          lookFile(
                            hd.tarDesign.imgBox[0].url,
                            hd.tarDesign.imgBox[0].type
                          )
                        "
                        v-if="hd.tarDesign.imgBox[0].type == 3"
                      >
                        <img :src="hd.tarDesign.imgBox[0].url" alt="" />
                      </div>
                    </div>

                    <div
                      :class="
                        hd.tarDesign.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                      "
                      v-html="hd.tarDesign ? hd.tarDesign.brief : ''"
                      style="margin: 10px 0 0 20px"
                    ></div>
                  </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>
                            <div @click="lookFile(f.url, f.type)">
                              {{ f.name }}
                            </div>
                            <div class="downFile" @click="downloadFile(f.url)">
                              <img
                                src="../../../../assets/icon/anliDetail/down.png"
                                alt=""
                              />
                            </div>
                          </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="jdNavBg">预期成果</div>
                    <el-button
                      v-if="hd.actiDesign.brief != ''"
                      @click="selectNav(hd.actiDesign.brief)"
                      >查看更多</el-button
                    >
                  </div>
                  <div
                    v-if="
                      hd.actiDesign.brief != '' ||
                      hd.actiDesign.imgBox.length > 0
                    "
                    class="imgAndNav"
                  >
                    <div
                      class="leftBox"
                      style="padding: 10px 0 0 35px"
                      v-if="
                        hd.actiDesign.imgBox.length > 0 &&
                        hd.actiDesign.imgBox[0].type == 3
                      "
                    >
                      <div
                        class="leftImg"
                        @click="
                          lookFile(
                            hd.actiDesign.imgBox[0].url,
                            hd.actiDesign.imgBox[0].type
                          )
                        "
                        v-if="hd.actiDesign.imgBox[0].type == 3"
                      >
                        <img :src="hd.actiDesign.imgBox[0].url" alt="" />
                      </div>
                    </div>

                    <div
                      :class="
                        hd.actiDesign.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                      "
                      v-html="hd.actiDesign ? hd.actiDesign.brief : ''"
                      style="margin: 10px 0 0 20px"
                    ></div>
                  </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>
                            <div @click="lookFile(f.url, f.type)">
                              {{ f.name }}
                            </div>
                            <div class="downFile" @click="downloadFile(f.url)">
                              <img
                                src="../../../../assets/icon/anliDetail/down.png"
                                alt=""
                              />
                            </div>
                          </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="jdNavBg">活动评价</div>
                    <el-button
                      v-if="hd.evaDesign.brief != ''"
                      @click="selectNav(hd.evaDesign.brief)"
                      >查看更多</el-button
                    >
                  </div>
                  <div
                    v-if="
                      hd.evaDesign.brief != '' || hd.evaDesign.imgBox.length > 0
                    "
                    class="imgAndNav"
                  >
                    <div
                      class="leftBox"
                      style="padding: 10px 0 0 35px"
                      v-if="
                        hd.evaDesign.imgBox.length > 0 &&
                        hd.evaDesign.imgBox[0].type == 3
                      "
                    >
                      <div
                        class="leftImg"
                        @click="
                          lookFile(
                            hd.evaDesign.imgBox[0].url,
                            hd.evaDesign.imgBox[0].type
                          )
                        "
                        v-if="hd.evaDesign.imgBox[0].type == 3"
                      >
                        <img :src="hd.evaDesign.imgBox[0].url" alt="" />
                      </div>
                    </div>

                    <div
                      :class="
                        hd.evaDesign.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                      "
                      v-html="hd.evaDesign ? hd.evaDesign.brief : ''"
                      style="margin: 10px 0 0 20px"
                    ></div>
                  </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>
                            <div @click="lookFile(f.url, f.type)">
                              {{ f.name }}
                            </div>
                            <div class="downFile" @click="downloadFile(f.url)">
                              <img
                                src="../../../../assets/icon/anliDetail/down.png"
                                alt=""
                              />
                            </div>
                          </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="jdTopBox" id="fouth">
            <div class="jdTopNav" style="font-size: 18px">
              <div class="jdLeftNav">
                <div class="jdImg">
                  <img
                    src="../../../../assets/icon/anliDetail/jdTitle.png"
                    alt=""
                  />
                </div>
                <div class="jdLeftTitle">
                  <div>项目活动过程</div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-for="(jd, jdIndex) in anliBox[0].process.stageBox"
            :key="jdIndex"
          >
            <div class="proOverCss">
              <div class="whiteBg whiteLeft">
                <div class="navBgTop">
                  <div class="navBg">阶段{{ jdIndex + 1 }}</div>
                  <el-button v-if="jd.brief != ''" @click="selectNav(jd.brief)"
                    >查看更多</el-button
                  >
                </div>
                <div
                  v-if="jd.brief != '' || jd.imgBox.length > 0"
                  class="imgAndNav"
                >
                  <div
                    class="leftBox"
                    v-if="jd.imgBox.length > 0 && jd.imgBox[0].type == 3"
                  >
                    <div
                      class="leftImg"
                      @click="lookFile(jd.imgBox[0].url, jd.imgBox[0].type)"
                      v-if="jd.imgBox[0].type == 3"
                    >
                      <img :src="jd.imgBox[0].url" alt="" />
                    </div>
                  </div>

                  <div
                    :class="jd.imgBox.length > 0 ? 'proOverNav' : 'noImg'"
                    v-html="jd ? jd.brief : ''"
                  ></div>
                </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>
                          <div @click="lookFile(f.url, f.type)">
                            {{ f.name }}
                          </div>
                          <div class="downFile" @click="downloadFile(f.url)">
                            <img
                              src="../../../../assets/icon/anliDetail/down.png"
                              alt=""
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="jdTopBox" id="fivth">
            <div class="jdTopNav" style="font-size: 18px">
              <div class="jdLeftNav">
                <div class="jdImg">
                  <img
                    src="../../../../assets/icon/anliDetail/jdTitle.png"
                    alt=""
                  />
                </div>
                <div class="jdLeftTitle">
                  <div>项目成果交流与评价</div>
                </div>
              </div>
            </div>
          </div>
          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">活动成效</div>
                <el-button
                  v-if="anliBox[0].proexc.brief != ''"
                  @click="selectNav(anliBox[0].proexc.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].proexc.brief != '' ||
                  anliBox[0].proexc.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].proexc.imgBox.length > 0 &&
                    anliBox[0].proexc.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile(
                        anliBox[0].proexc.imgBox[0].url,
                        anliBox[0].proexc.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].proexc.imgBox[0].type == 3"
                  >
                    <img :src="anliBox[0].proexc.imgBox[0].url" alt="" />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].proexc.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                  "
                  v-html="anliBox[0].proexc ? anliBox[0].proexc.brief : ''"
                ></div>
              </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="anliBox[0].proexc.data.length">
                  <div
                    class="file"
                    v-for="(f, fIndex) in anliBox[0].proexc.data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1.{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>
                        <div @click="lookFile(f.url, f.type)">
                          {{ f.name }}
                        </div>
                        <div class="downFile" @click="downloadFile(f.url)">
                          <img
                            src="../../../../assets/icon/anliDetail/down.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="noFile" v-else>
                  <img
                    src="../../../../assets/icon/anliDetail/noFile.jpg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="jdTopBox" id="sixth">
            <div class="jdTopNav" style="font-size: 18px">
              <div class="jdLeftNav">
                <div class="jdImg">
                  <img
                    src="../../../../assets/icon/anliDetail/jdTitle.png"
                    alt=""
                  />
                </div>
                <div class="jdLeftTitle">
                  <div>项目成效与反思</div>
                </div>
              </div>
            </div>
          </div>
          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">活动反思</div>
                <el-button
                  v-if="anliBox[0].results.brief != ''"
                  @click="selectNav(anliBox[0].results.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].results.brief != '' ||
                  anliBox[0].results.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].results.imgBox.length > 0 &&
                    anliBox[0].results.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile(
                        anliBox[0].results.imgBox[0].url,
                        anliBox[0].results.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].results.imgBox[0].type == 3"
                  >
                    <img :src="anliBox[0].results.imgBox[0].url" alt="" />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].results.imgBox.length > 0
                      ? 'proOverNav'
                      : 'noImg'
                  "
                  v-html="anliBox[0].results ? anliBox[0].results.brief : ''"
                ></div>
              </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="anliBox[0].results.data.length">
                  <div
                    class="file"
                    v-for="(f, fIndex) in anliBox[0].results.data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1.{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>
                        <div @click="lookFile(f.url, f.type)">
                          {{ f.name }}
                        </div>
                        <div class="downFile" @click="downloadFile(f.url)">
                          <img
                            src="../../../../assets/icon/anliDetail/down.png"
                            alt=""
                          />
                        </div>
                      </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 v-html="briefNav"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleBrief = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="文件预览"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      class="dialog_diy"
      :class="{ fullStyle: full }"
    >
      <div slot="title" class="header-title">
        <div style="color: #fff">文件预览</div>
        <div style="position: absolute; top: 19px; right: 50px">
          <img
            src="../../../../assets/full.png"
            style="height: 16px; cursor: pointer"
            alt=""
            @click="fullTools"
          />
        </div>
      </div>
      <pdf
        v-if="showPDF"
        :pdfUrl="pptImgUrl"
        style="width: 100%; height: 520px; overflow: auto"
        :class="{ fullStyle: full }"
      ></pdf>
      <iframe
        v-else
        :src="pptImgUrl"
        frameborder="0"
        width="100%"
        height="600"
        :class="{ fullStyle: full }"
      ></iframe>
    </el-dialog>
    <el-dialog
      title="查看视频"
      :visible.sync="videoVisible"
      :append-to-body="true"
      width="1000px"
      :before-close="handleClose"
      class="dialog_diy1"
    >
      <div class="workd_media" style="height: 100%" v-if="videoDetail.sources">
        <video-player
          class="video-player vjs-custom-skin"
          :playsinline="true"
          :options="videoDetail"
          @play="onPlayerPlay($event)"
          style="width: 100%; height: 100%"
        ></video-player>
      </div>
      <div slot="footer">
        <el-button
          style="background: #409efe; color: #fff"
          @click="(videoVisible = false), (videoDetail.sources[0].src = '')"
        >
          关 闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisibleBrief: false,
      dialogVisible: false,
      showPDF: false,
      videoVisible: false,
      full: false,
      briefNav: "",
      pptImgUrl: "",
      userid: this.$store.state.userInfo.userid,
      oid: this.$store.state.userInfo.school,
      aid: this.$route.query.aid,
      anliBox: [],
      imgAnliBox: [],
      noBanner: require("../../../../assets/noBanner.jpg"),
      videoDetail: {},
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    goTo(path) {
      this.$router.push(path);
    },
    goToX() {
      this.$message("暂未开放");
      return;
    },
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    fullTools() {
      this.full = !this.full;
    },
    selectAnLi() {
      let params = {
        id: this.aid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRaceDetail", params)
        .then((res) => {
          this.anliBox = res.data[0];
          this.anliBox[0].info = JSON.parse(this.anliBox[0].info);
          this.anliBox[0].overview = JSON.parse(this.anliBox[0].overview);
          this.anliBox[0].process = JSON.parse(this.anliBox[0].process);
          this.anliBox[0].proact = JSON.parse(this.anliBox[0].proact);
          this.anliBox[0].proexc = JSON.parse(this.anliBox[0].proexc);
          this.anliBox[0].results = JSON.parse(this.anliBox[0].results);
          var a = this.anliBox[0].info;
          var b = this.anliBox[0].overview;
          var c = this.anliBox[0].process;
          var d = this.anliBox[0].proact;
          var e = this.anliBox[0].proexc;
          var f = this.anliBox[0].results;
          a.imgBox = [];
          b.driQuestion.imgBox = [];
          b.tarDesign.imgBox = [];
          b.actiDesign.imgBox = [];
          e.imgBox = [];
          f.imgBox = [];
          for (var i = 0; i < a.data.length; i++) {
            if (a.data[i].type == 3) {
              a.imgBox.push({
                url: a.data[i].url,
                type: a.data[i].type,
              });
            }
          }
          for (var i = 0; i < b.driQuestion.data.length; i++) {
            if (b.driQuestion.data[i].type == 3) {
              b.driQuestion.imgBox.push({
                url: b.driQuestion.data[i].url,
                type: b.driQuestion.data[i].type,
              });
            }
          }
          for (var i = 0; i < b.tarDesign.data.length; i++) {
            if (b.tarDesign.data[i].type == 3) {
              b.tarDesign.imgBox.push({
                url: b.tarDesign.data[i].url,
                type: b.tarDesign.data[i].type,
              });
            }
          }
          for (var i = 0; i < b.actiDesign.data.length; i++) {
            if (b.actiDesign.data[i].type == 3) {
              b.actiDesign.imgBox.push({
                url: b.actiDesign.data[i].url,
                type: b.actiDesign.data[i].type,
              });
            }
          }
          for (var i = 0; i < c.stageBox.length; i++) {
            c.stageBox[i].imgBox = [];
            for (var j = 0; j < c.stageBox[i].data.length; j++) {
              if (c.stageBox[i].data[j].type == 3) {
                c.stageBox[i].imgBox.push({
                  url: c.stageBox[i].data[j].url,
                  type: c.stageBox[i].data[j].type,
                });
              }
            }
            for (var z = 0; z < c.stageBox[i].actBox.length; z++) {
              c.stageBox[i].actBox[z].driQuestion.imgBox = [];
              c.stageBox[i].actBox[z].tarDesign.imgBox = [];
              c.stageBox[i].actBox[z].actiDesign.imgBox = [];
              c.stageBox[i].actBox[z].evaDesign.imgBox = [];
              for (
                var k = 0;
                k < c.stageBox[i].actBox[z].driQuestion.data.length;
                k++
              ) {
                if (c.stageBox[i].actBox[z].driQuestion.data[k].type == 3) {
                  c.stageBox[i].actBox[z].driQuestion.imgBox.push({
                    url: c.stageBox[i].actBox[z].driQuestion.data[k].url,
                    type: c.stageBox[i].actBox[z].driQuestion.data[k].type,
                  });
                }
              }
              for (
                var k = 0;
                k < c.stageBox[i].actBox[z].tarDesign.data.length;
                k++
              ) {
                if (c.stageBox[i].actBox[z].tarDesign.data[k].type == 3) {
                  c.stageBox[i].actBox[z].tarDesign.imgBox.push({
                    url: c.stageBox[i].actBox[z].tarDesign.data[k].url,
                    type: c.stageBox[i].actBox[z].tarDesign.data[k].type,
                  });
                }
              }
              for (
                var k = 0;
                k < c.stageBox[i].actBox[z].actiDesign.data.length;
                k++
              ) {
                if (c.stageBox[i].actBox[z].actiDesign.data[k].type == 3) {
                  c.stageBox[i].actBox[z].actiDesign.imgBox.push({
                    url: c.stageBox[i].actBox[z].actiDesign.data[k].url,
                    type: c.stageBox[i].actBox[z].actiDesign.data[k].type,
                  });
                }
              }
              for (
                var k = 0;
                k < c.stageBox[i].actBox[z].evaDesign.data.length;
                k++
              ) {
                if (c.stageBox[i].actBox[z].evaDesign.data[k].type == 3) {
                  c.stageBox[i].actBox[z].evaDesign.imgBox.push({
                    url: c.stageBox[i].actBox[z].evaDesign.data[k].url,
                    type: c.stageBox[i].actBox[z].evaDesign.data[k].type,
                  });
                }
              }
            }
          }
          for (var i = 0; i < e.data.length; i++) {
            if (e.data[i].type == 3) {
              e.imgBox.push({ url: e.data[i].url, type: e.data[i].type });
            }
          }
          for (var i = 0; i < f.data.length; i++) {
            if (f.data[i].type == 3) {
              f.imgBox.push({ url: f.data[i].url, type: f.data[i].type });
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectNav(n) {
      this.dialogVisibleBrief = true;
      this.briefNav = n;
    },
    onPlayerPlay() {},
    lookFile(u, t) {
      //1文档2视频3图片
      if (t == 1) {
        this.pptImgUrl = "";
        var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"];
        if (
          a.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl =
            "https://view.officeapps.live.com/op/view.aspx?src=" + u;
          this.showPDF = false;
          this.dialogVisible = true;
        } else if (
          u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl = u;
          this.showPDF = true;
          this.dialogVisible = true;
        }
      } else if (t == 2) {
        this.videoDetail = {};
        this.playerOptions.sources[0].src = u;
        this.videoDetail = this.playerOptions;
        this.videoVisible = true;
      } else {
        this.previewImg(u);
      }
    },
    downloadFile(url) {
      let _url = "";
      if (
        url.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
      ) {
        _url = url.split(
          "https://view.officeapps.live.com/op/view.aspx?src="
        )[1];
      } else {
        _url = url;
      }
      const x = new XMLHttpRequest();
      x.open("GET", _url, true);
      x.responseType = "blob";
      x.onload = function (e) {
        // const url = window.URL.createObjectURL(x.response);
        // const a = document.createElement("a");
        // a.href = url;
        // a.target = "_blank";
        // a.download = url;
        // a.click();
        // a.remove();
        let content = x.response;
        let elink = document.createElement("a");
        elink.download = decodeURI(
          _url.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
        );
        elink.style.display = "none";
        let blob = new Blob([content]);
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      };
      x.send();
    },
    jump(t) {
      var a = document.getElementById(t);
      document.documentElement.scrollTop = a.offsetTop;
    },
  },
  created() {
    this.selectAnLi();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .file > div > div:nth-child(2) > div:nth-child(1) {
    width: 90px !important;
  }
  .leftImg {
    height: 230px !important;
  }
}
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;
  cursor: pointer;
}
.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,
.jdNavBg {
  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;
}
.jdNavBg {
  background-image: url("../../../../assets/icon/anliDetail/jdNavBg.png");
}
.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 {
  overflow: auto;
  word-break: break-word;
  margin-left: 15px;
  width: 50%;
  background: #f6f9fe;
  padding: 10px 10px 10px 10px;
  border-radius: 10px;
  text-indent: 20px;
  height: 280px;
}
.noImg {
  max-height: 300px;
  min-height: 300px;
  overflow: auto;
  word-break: break-word;
  min-width: 90%;
  padding-left: 30px;
  width: 90%;
}
.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;
  min-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: 100%;
  line-height: 45px;
  padding-left: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
}
.file > div > div:nth-child(2) > div:nth-child(1) {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.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;
}
.fullStyle >>> .el-dialog__body {
  height: 100% !important;
}

.fullStyle >>> .el-dialog,
.fullStyle {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.dialog_diy >>> .el-dialog__header,
.dialog_diy1 >>> .el-dialog__header {
  background: #454545 !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__title,
.dialog_diy1 >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn,
.dialog_diy1 >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close,
.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover,
.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy1 >>> .el-dialog__body {
  padding: 0;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer,
.dialog_diy1 >>> .el-dialog__footer {
  background: #fafafa;
}
.video-player >>> .video-js {
  height: 100%;
}
.downFile {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 8px;
  cursor: pointer;
  top: 8px;
}
.leftBox {
  width: 40%;
  padding: 0 0 0 35px;
}
.leftImg {
  width: 100%;
  height: 300px;
  cursor: pointer;
}
.downFile > img,
.leftImg > img {
  width: 100%;
  height: 100%;
}
.imgAndNav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  margin: 10px auto 0;
}
.jdTopBox {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}
.jdTopNav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.jdLeftNav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.jdImg {
  width: 30px;
  height: 30px;
}
.jdImg > img {
  width: 100%;
  height: 100%;
}
.jdLeftTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: 10px;
}
.jdLeftTitle > div:nth-child(2) {
  margin-left: 5px;
}
.jdRightNav {
  padding-right: 20px;
  color: #7e7e7e;
}
</style>