<template>
<div
class="center_content"
ref="cenBox"
@scroll.passive="allScrollTop($event)"
>
<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="personAndAutor">
<div>总人数：</div>
<div class="people">
<div class="man">
<img src="../../../../assets/people.png" alt />
</div>
<div class="person">
{{
anliBox[0]
? anliBox[0].info.autor.length +
anliBox[0].info.tableData.length
: 0
}}人
</div>
</div>
<div
class="autorBox"
style="margin-left: 15px"
v-if="anliBox[0].info.autor.length"
>
<div>联系人：</div>
<div v-for="(a, aIndex) in anliBox[0].info.autor" :key="aIndex">
{{ a.sn }}
</div>
</div>
<div class="autorBox" v-if="anliBox[0].info.tableData.length">
<div>协作者：</div>
<div
class="Autor"
v-for="(a, aIndex) in anliBox[0].info.tableData"
:key="aIndex"
>
{{ a.sn }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navBox" :class="{ isNavBox: isNavTop >= 300 }">
<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="isNoMessage"
v-if="
anliBox[0].info.courseText == '' &&
anliBox[0].info.imgBox.length == 0 &&
anliBox[0].info.data.length == 0 &&
anliBox[0].overview.driQuestion.brief == '' &&
anliBox[0].overview.driQuestion.imgBox.length == 0 &&
anliBox[0].overview.tarDesign.brief == '' &&
anliBox[0].overview.tarDesign.imgBox.length == 0 &&
anliBox[0].overview.actiDesign.brief == '' &&
anliBox[0].overview.actiDesign.imgBox.length == 0 &&
anliBox[0].process.stageBox[0].staTitle == '' &&
anliBox[0].process.stageBox[0].actBox[0].actName == '' &&
anliBox[0].process.stageBox[0].brief == '' &&
anliBox[0].process.stageBox[0].data.length == 0 &&
anliBox[0].proexc.brief == '' &&
anliBox[0].proexc.imgBox.length == 0 &&
anliBox[0].results.brief == '' &&
anliBox[0].results.imgBox.length == 0
"
>
<img src="../../../../assets/icon/race/isNoMessage.png" alt />
</div>
<div class="messageBox" v-else :class="{ isMessageBox: isNavTop >= 300 }">
<div
class="jdTopBox"
id="first"
v-if="
anliBox[0].info.courseText != '' ||
anliBox[0].info.imgBox.length > 0 ||
(anliBox &&
anliBox[0].info &&
anliBox[0].info.data &&
anliBox[0].info.data.length)
"
>
<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"
v-if="
anliBox[0].info.courseText != '' ||
anliBox[0].info.imgBox.length > 0 ||
(anliBox &&
anliBox[0].info &&
anliBox[0].info.data &&
anliBox[0].info.data.length)
"
>
<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="
lookFile1(
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="fileLook"
v-if="
pptImgUrl2.infoData != undefined &&
Object.keys(pptImgUrl2.infoData).length
"
>
<div class="look_file">
<pdf
v-if="pptImgUrl2.infoData.showType == 1"
:pdfUrl="pptImgUrl2.infoData.url"
style="width: 100%; height: 400px; overflow: auto"
:class="{ fullStyle: full }"
></pdf>
<iframe
v-else-if="pptImgUrl2.infoData.showType == 2"
:src="pptImgUrl2.infoData.url"
frameborder="0"
width="100%"
height="400"
:class="{ fullStyle: full }"
></iframe>
<div
class="workd_media"
style="height: 400px"
v-else-if="pptImgUrl2.infoData.showType == 3"
>
<video-player
class="video-player vjs-custom-skin"
:playsinline="true"
:options="pptImgUrl2.infoData.playerO"
@play="onPlayerPlay($event)"
style="width: 70%; height: 400px; margin: 0 auto"
></video-player>
</div>
<div
class="leftImg"
style="height: 400px"
v-else-if="pptImgUrl2.infoData.showType == 4"
>
<img :src="pptImgUrl2.infoData.url" alt="" />
</div>
</div>
<div class="whiteRight">
<div class="fileTop">
<div class="fileListImg">
<img
src="../../../../assets/icon/anliDetail/onePic.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="lookFile2(f.url, f.type, 0)">
{{ 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="second"
v-if="
(anliBox[0].overview.driQuestion.brief != '' ||
anliBox[0].overview.driQuestion.imgBox.length > 0 ||
anliBox[0].overview.driQuestion.data.length) &&
(anliBox[0].overview.tarDesign.brief != '' ||
anliBox[0].overview.tarDesign.imgBox.length > 0 ||
anliBox[0].overview.tarDesign.data.length) &&
(anliBox[0].overview.actiDesign.brief != '' ||
anliBox[0].overview.actiDesign.imgBox.length > 0 ||
anliBox[0].overview.actiDesign.data.length > 0)
"
>
<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"
v-if="
anliBox[0].overview.driQuestion.brief != '' ||
anliBox[0].overview.driQuestion.imgBox.length > 0 ||
anliBox[0].overview.driQuestion.data.length
"
>
<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="
lookFile1(
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="fileLook"
v-if="
pptImgUrl2.overData.driData != undefined &&
Object.keys(pptImgUrl2.overData.driData).length
"
>
<div class="look_file">
<pdf
v-if="pptImgUrl2.overData.driData.showType == 1"
:pdfUrl="pptImgUrl2.overData.driData.url"
style="width: 100%; height: 400px; overflow: auto"
:class="{ fullStyle: full }"
></pdf>
<iframe
v-else-if="pptImgUrl2.overData.driData.showType == 2"
:src="pptImgUrl2.overData.driData.url"
frameborder="0"
width="100%"
height="400"
:class="{ fullStyle: full }"
></iframe>
<div
class="workd_media"
style="height: 400px"
v-else-if="pptImgUrl2.overData.driData.showType == 3"
>
<video-player
class="video-player vjs-custom-skin"
:playsinline="true"
:options="pptImgUrl2.overData.driData.playerO"
@play="onPlayerPlay($event)"
style="width: 70%; height: 400px; margin: 0 auto"
></video-player>
</div>
<div
class="leftImg"
style="height: 400px"
v-else-if="pptImgUrl2.overData.driData.showType == 4"
>
<img :src="pptImgUrl2.overData.driData.url" 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="lookFile2(f.url, f.type, 1)">
{{ 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"
v-if="
anliBox[0].overview.tarDesign.brief != '' ||
anliBox[0].overview.tarDesign.imgBox.length > 0 ||
anliBox[0].overview.tarDesign.data.length
"
>
<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="
lookFile1(
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="fileLook"
v-if="
pptImgUrl2.overData.tarData != undefined &&
Object.keys(pptImgUrl2.overData.tarData).length
"
>
<div class="look_file">
<pdf
v-if="pptImgUrl2.overData.tarData.showType == 1"
:pdfUrl="pptImgUrl2.overData.tarData.url"
style="width: 100%; height: 400px; overflow: auto"
:class="{ fullStyle: full }"
></pdf>
<iframe
v-else-if="pptImgUrl2.overData.tarData.showType == 2"
:src="pptImgUrl2.overData.tarData.url"
frameborder="0"
width="100%"
height="400"
:class="{ fullStyle: full }"
></iframe>
<div
class="workd_media"
style="height: 400px"
v-else-if="pptImgUrl2.overData.tarData.showType == 3"
>
<video-player
class="video-player vjs-custom-skin"
:playsinline="true"
:options="pptImgUrl2.overData.tarData.playerO"
@play="onPlayerPlay($event)"
style="width: 70%; height: 400px; margin: 0 auto"
></video-player>
</div>
<div
class="leftImg"
style="height: 400px"
v-else-if="pptImgUrl2.overData.tarData.showType == 4"
>
<img :src="pptImgUrl2.overData.tarData.url" 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="lookFile2(f.url, f.type, 2)">
{{ 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"
v-if="
anliBox[0].overview.actiDesign.brief != '' ||
anliBox[0].overview.actiDesign.imgBox.length > 0 ||
anliBox[0].overview.actiDesign.data.length
"
>
<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="
lookFile1(
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="fileLook"
v-if="
pptImgUrl2.overData.actData != undefined &&
Object.keys(pptImgUrl2.overData.actData).length
"
>
<div class="look_file">
<pdf
v-if="pptImgUrl2.overData.actData.showType == 1"
:pdfUrl="pptImgUrl2.overData.actData.url"
style="width: 100%; height: 400px; overflow: auto"
:class="{ fullStyle: full }"
></pdf>
<iframe
v-else-if="pptImgUrl2.overData.actData.showType == 2"
:src="pptImgUrl2.overData.actData.url"
frameborder="0"
width="100%"
height="400"
:class="{ fullStyle: full }"
></iframe>
<div
class="workd_media"
style="height: 400px"
v-else-if="pptImgUrl2.overData.actData.showType == 3"
>
<video-player
class="video-player vjs-custom-skin"
:playsinline="true"
:options="pptImgUrl2.overData.actData.playerO"
@play="onPlayerPlay($event)"
style="width: 70%; height: 400px; margin: 0 auto"
></video-player>
</div>
<div
class="leftImg"
style="height: 400px"
v-else-if="pptImgUrl2.overData.actData.showType == 4"
>
<img :src="pptImgUrl2.overData.actData.url" 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="lookFile2(f.url, f.type, 3)">
{{ f.name }}
</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"
v-if="anliBox[0].process.stageBox[0].staTitle != ''"
id="third"
>
<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"
style="margin-top: 20px"
>
<div class="jdTopBox" v-if="jd.staTitle != ''">
<div class="jdTopNav">
<div class="jdLeftNav">
<div
class="jdImg"
style="width: 25px; height: 25px; padding-left: 3px"
>
<img
src="../../../../assets/icon/anliDetail/jdNewTitle.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 class="funBlock" style="padding: 0; bottom: 2px">
<div
class="fold"
@click="fold1(jdIndex, $event, 1)"
v-if="jd.isFold == 0"
>
<div>折叠</div>
</div>
<div
class="fold"
@click="fold1(jdIndex, $event, 0)"
v-if="jd.isFold == 1"
>
<div>展开</div>
</div>
</div>
</div>
</div>
<div
v-for="(hd, hdIndex) in jd.actBox"
:key="hdIndex"
style="margin-top: 20px"
>
<div
class="jdTopBox"
style="padding: 10px 20px"
v-if="hd.actName != ''"
>
<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 class="funBlock" style="padding: 0">
<div
class="fold"
@click="fold(hdIndex, jdIndex, $event, 1)"
v-if="hd.isFold == 0"
>
<div>折叠</div>
</div>
<div
class="fold"
@click="fold(hdIndex, jdIndex, $event, 0)"
v-if="hd.isFold == 1"
>
<div>展开</div>
</div>
</div>
</div>
</div>
<div
class="proOverCss"
v-if="
(hd.driQuestion.imgBox.length > 0 &&
hd.driQuestion.imgBox[0].type == 3) ||
hd.driQuestion.data.length
"
>
<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="
lookFile1(
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>
<div
class="proOverCss"
v-if="
hd.tarDesign.brief != '' ||
hd.tarDesign.imgBox.length > 0 ||
hd.tarDesign.data.length
"
>
<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="
lookFile1(
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>
<div
class="proOverCss"
v-if="
hd.actiDesign.brief != '' ||
hd.actiDesign.imgBox.length > 0 ||
hd.actiDesign.data.length
"
>
<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="
lookFile1(
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>
<div
class="proOverCss"
v-if="
hd.evaDesign.brief != '' ||
hd.evaDesign.imgBox.length > 0 ||
hd.evaDesign.data.length
"
>
<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="
lookFile1(
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>
</div>
</div>
<div
class="jdTopBox"
id="fouth"
v-if="anliBox[0].process.stageBox[0].brief != ''"
>
<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"
v-if="jd.brief != '' || jd.imgBox.length > 0 || jd.data.length"
>
<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="lookFile1(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="fileLook" v-if="pptImgUrl2.proData[jdIndex]">
<div class="look_file">
<pdf
v-if="pptImgUrl2.proData[jdIndex].showType == 1"
:pdfUrl="pptImgUrl2.proData[jdIndex].url"
style="width: 100%; height: 400px; overflow: auto"
:class="{ fullStyle: full }"
></pdf>
<iframe
v-else-if="pptImgUrl2.proData[jdIndex].showType == 2"
:src="pptImgUrl2.proData[jdIndex].url"
frameborder="0"
width="100%"
height="400"
:class="{ fullStyle: full }"
></iframe>
<div
class="workd_media"
style="height: 400px"
v-else-if="pptImgUrl2.proData[jdIndex].showType == 3"
>
<video-player
class="video-player vjs-custom-skin"
:playsinline="true"
:options="pptImgUrl2.proData[jdIndex].playerO"
@play="onPlayerPlay($event)"
style="width: 70%; height: 400px; margin: 0 auto"
></video-player>
</div>
<div
class="leftImg"
style="height: 400px"
v-else-if="pptImgUrl2.proData[jdIndex].showType == 4"
>
<img :src="pptImgUrl2.proData[jdIndex].url" 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="lookFile2(f.url, f.type, 4, jdIndex)">
{{ 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="fivth"
v-if="
anliBox[0].proexc.brief != '' ||
anliBox[0].proexc.imgBox.length > 0 ||
anliBox[0].proexc.data.length
"
>
<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"
v-if="
anliBox[0].proexc.brief != '' ||
anliBox[0].proexc.imgBox.length > 0 ||
anliBox[0].proexc.data.length
"
>
<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="
lookFile1(
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="fileLook"
v-if="
pptImgUrl2.excData != undefined &&
Object.keys(pptImgUrl2.excData).length
"
>
<div class="look_file">
<pdf
v-if="pptImgUrl2.excData.showType == 1"
:pdfUrl="pptImgUrl2.excData.url"
style="width: 100%; height: 400px; overflow: auto"
:class="{ fullStyle: full }"
></pdf>
<iframe
v-else-if="pptImgUrl2.excData.showType == 2"
:src="pptImgUrl2.excData.url"
frameborder="0"
width="100%"
height="400"
:class="{ fullStyle: full }"
></iframe>
<div
class="workd_media"
style="height: 400px"
v-else-if="pptImgUrl2.excData.showType == 3"
>
<video-player
class="video-player vjs-custom-skin"
:playsinline="true"
:options="pptImgUrl2.excData.playerO"
@play="onPlayerPlay($event)"
style="width: 70%; height: 400px; margin: 0 auto"
></video-player>
</div>
<div
class="leftImg"
style="height: 400px"
v-else-if="pptImgUrl2.excData.showType == 4"
>
<img :src="pptImgUrl2.excData.url" 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="lookFile2(f.url, f.type, 5)">
{{ 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="sixth"
v-if="
anliBox[0].results.brief != '' ||
anliBox[0].results.imgBox.length > 0 ||
anliBox[0].results.data.length
"
>
<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"
v-if="
anliBox[0].results.brief != '' ||
anliBox[0].results.imgBox.length > 0 ||
anliBox[0].results.data.length
"
>
<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="
lookFile1(
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="fileLook"
v-if="
pptImgUrl2.effData != undefined &&
Object.keys(pptImgUrl2.effData).length
"
>
<div class="look_file">
<pdf
v-if="pptImgUrl2.effData.showType == 1"
:pdfUrl="pptImgUrl2.effData.url"
style="width: 100%; height: 400px; overflow: auto"
:class="{ fullStyle: full }"
></pdf>
<iframe
v-else-if="pptImgUrl2.effData.showType == 2"
:src="pptImgUrl2.effData.url"
frameborder="0"
width="100%"
height="400"
:class="{ fullStyle: full }"
></iframe>
<div
class="workd_media"
style="height: 400px"
v-else-if="pptImgUrl2.effData.showType == 3"
>
<video-player
class="video-player vjs-custom-skin"
:playsinline="true"
:options="pptImgUrl2.effData.playerO"
@play="onPlayerPlay($event)"
style="width: 70%; height: 400px; margin: 0 auto"
></video-player>
</div>
<div
class="leftImg"
style="height: 400px"
v-else-if="pptImgUrl2.effData.showType == 4"
>
<img :src="pptImgUrl2.effData.url" 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="lookFile2(f.url, f.type, 6)">
{{ 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>
<!-- <div class="fixBottom">
<div class="returnAnLi" style="width: 100px" @click="goToX()">
前往评分
</div>
<div class="returnAnLi" @click="returnWhere">返回</div>
</div> -->
</div>
<el-dialog
title="查看详情"
:visible.sync="dialogVisibleBrief"
:append-to-body="true"
width="1000px"
height="80%"
:before-close="handleClose"
class="add_student"
>
<div class="detailTable" 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>
import pdf from "../../components/vpdf";
export default {
components: {
pdf,
},
data() {
return {
dialogVisibleBrief: false,
dialogVisible: false,
showPDF: false,
showPDF1: false,
videoVisible: false,
full: false,
briefNav: "",
pptImgUrl: "",
pptImgUrl1: {
infoData: [],
overData: {
driData: [],
tarData: [],
actData: [],
},
proData: [],
excData: [],
effData: [],
},
pptImgUrl2: {
infoData: {},
overData: {
driData: {},
tarData: {},
actData: {},
},
proData: {},
excData: {},
effData: {},
},
fileImg: "",
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: {},
isNavTop: 0,
};
},
methods: {
handleClose(done) {
done();
},
goTo(path) {
this.$router.push(path);
},
goToX() {
this.$message("暂未开放");
return;
},
previewImg(url) {
this.$hevueImgPreview(url);
},
fullTools() {
this.full = !this.full;
},
// returnWhere() {
// if (this.type == 0) {
// this.goTo("/eventCenter?steps=" + "2");
// } else {
// this.goTo("/anliList");
// }
// },
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,
});
}
this.pptImgUrl1.infoData.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,
});
}
this.pptImgUrl1.overData.driData.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,
});
}
this.pptImgUrl1.overData.tarData.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,
});
}
this.pptImgUrl1.overData.actData.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 = [];
this.pptImgUrl1.proData[i] = [];
c.stageBox[i].isFold = "";
c.stageBox[i].isFold = 0;
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,
});
}
this.pptImgUrl1.proData[i].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 = [];
c.stageBox[i].actBox[z].isFold = "";
c.stageBox[i].actBox[z].isFold = 0;
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 });
}
this.pptImgUrl1.excData.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 });
}
this.pptImgUrl1.effData.push({
url: f.data[i].url,
type: f.data[i].type,
});
}
this.lookFile();
})
.catch((err) => {
console.error(err);
});
},
selectNav(n) {
this.dialogVisibleBrief = true;
this.briefNav = n;
},
onPlayerPlay() {},
lookFile1(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);
}
},
lookFile2(u, t, type, i) {
var b = [
"DOC",
"DOCX",
"DOCM",
"DOTM",
"DOTX",
"PPTX",
"PPSX",
"PPT",
"PPS",
"PPTM",
"POTM",
"PPAM",
"POTX",
"PPSM",
];
var c = [
"BMP",
"PJP",
"APNG",
"PNG",
"JPG",
"GIF",
"SVG",
"JPEG",
"JPG",
"ICO",
"PGPEG",
"AVIF",
];
var d = JSON.parse(JSON.stringify(this.playerOptions));
if (type == 0) {
if (
b.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.infoData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" + u;
this.pptImgUrl2.infoData.showType = 2;
} else if (
u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.infoData.url = u;
this.pptImgUrl2.infoData.showType = 1;
} else if (
c.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.infoData.url = u;
this.pptImgUrl2.infoData.showType = 4;
} else {
// this.videoDetail = {};
// this.playerOptions.sources[0].src = u;
// this.videoDetail = this.playerOptions;
this.pptImgUrl2.infoData.playerO = d;
this.pptImgUrl2.infoData.playerO.sources[0].src = u;
this.pptImgUrl2.infoData.showType = 3;
}
} else if (type == 1) {
if (
b.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.driData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" + u;
this.pptImgUrl2.overData.driData.showType = 2;
} else if (
u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.overData.driData.url = u;
this.pptImgUrl2.overData.driData.showType = 1;
} else if (
c.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.driData.url = u;
this.pptImgUrl2.overData.driData.showType = 4;
} else {
this.pptImgUrl2.overData.driData.playerO = d;
this.pptImgUrl2.overData.driData.playerO.sources[0].src = u;
this.pptImgUrl2.overData.driData.showType = 3;
}
} else if (type == 2) {
if (
b.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.tarData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" + u;
this.pptImgUrl2.overData.tarData.showType = 2;
} else if (
u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.overData.tarData.url = u;
this.pptImgUrl2.overData.tarData.showType = 1;
} else if (
c.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.tarData.url = u;
this.pptImgUrl2.overData.tarData.showType = 4;
} else {
this.pptImgUrl2.overData.tarData.playerO = d;
this.pptImgUrl2.overData.tarData.playerO.sources[0].src = u;
this.pptImgUrl2.overData.tarData.showType = 3;
}
} else if (type == 3) {
if (
b.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.actData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" + u;
this.pptImgUrl2.overData.actData.showType = 2;
} else if (
u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.overData.actData.url = u;
this.pptImgUrl2.overData.actData.showType = 1;
} else if (
c.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.actData.url = u;
this.pptImgUrl2.overData.actData.showType = 4;
} else {
this.pptImgUrl2.overData.actData.playerO = d;
this.pptImgUrl2.overData.actData.playerO.sources[0].src = u;
this.pptImgUrl2.overData.actData.showType = 3;
}
} else if (type == 4) {
if (
b.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.proData[i].url =
"https://view.officeapps.live.com/op/view.aspx?src=" + u;
this.pptImgUrl2.proData[i].showType = 2;
} else if (
u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.proData[i].url = u;
this.pptImgUrl2.proData[i].showType = 1;
} else if (
c.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.proData[i].url = u;
this.pptImgUrl2.proData[i].showType = 4;
} else {
this.pptImgUrl2.proData[i].playerO = d;
this.pptImgUrl2.proData[i].playerO.sources[0].src = u;
this.pptImgUrl2.proData[i].showType = 3;
}
} else if (type == 5) {
if (
b.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.excData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" + u;
this.pptImgUrl2.excData.showType = 2;
} else if (
u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.excData.url = u;
this.pptImgUrl2.excData.showType = 1;
} else if (
c.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.excData.url = u;
this.pptImgUrl2.excData.showType = 4;
} else {
this.pptImgUrl2.excData.playerO = d;
this.pptImgUrl2.excData.playerO.sources[0].src = u;
this.pptImgUrl2.excData.showType = 3;
}
} else if (type == 6) {
if (
b.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.effData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" + u;
this.pptImgUrl2.effData.showType = 2;
} else if (
u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.effData.url = u;
this.pptImgUrl2.effData.showType = 1;
} else if (
c.indexOf(
u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.effData.url = u;
this.pptImgUrl2.effData.showType = 4;
} else {
this.pptImgUrl2.effData.playerO = d;
this.pptImgUrl2.effData.playerO.sources[0].src = u;
this.pptImgUrl2.effData.showType = 3;
}
}
},
lookFile() {
var a = this.pptImgUrl1;
var b = [
"DOC",
"DOCX",
"DOCM",
"DOTM",
"DOTX",
"PPTX",
"PPSX",
"PPT",
"PPS",
"PPTM",
"POTM",
"PPAM",
"POTX",
"PPSM",
];
var c = [
"BMP",
"PJP",
"APNG",
"PNG",
"JPG",
"GIF",
"SVG",
"JPEG",
"JPG",
"ICO",
"PGPEG",
"AVIF",
];
var d = JSON.parse(JSON.stringify(this.playerOptions));
this.pptImgUrl2.infoData = a.infoData ? a.infoData[0] : {};
if (a.infoData.length > 0) {
if (
b.indexOf(
this.pptImgUrl2.infoData.url
.split(".")
[
this.pptImgUrl2.infoData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.infoData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" +
this.pptImgUrl2.infoData.url;
this.pptImgUrl2.infoData.showType = 2;
} else if (
this.pptImgUrl2.infoData.url
.split(".")
[
this.pptImgUrl2.infoData.url.split(".").length - 1
].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.infoData.showType = 1;
} else if (
c.indexOf(
this.pptImgUrl2.infoData.url
.split(".")
[
this.pptImgUrl2.infoData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.infoData.showType = 4;
} else {
// this.videoDetail = {};
// this.playerOptions.sources[0].src = u;
// this.videoDetail = this.playerOptions;
this.pptImgUrl2.infoData.playerO = d;
this.pptImgUrl2.infoData.playerO.sources[0].src =
this.pptImgUrl2.infoData.url;
this.pptImgUrl2.infoData.showType = 3;
}
}
this.pptImgUrl2.overData.driData = a.overData.driData
? a.overData.driData[0]
: {};
if (a.overData.driData.length > 0) {
if (
b.indexOf(
this.pptImgUrl2.overData.driData.url
.split(".")
[
this.pptImgUrl2.overData.driData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.driData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" +
this.pptImgUrl2.overData.driData.url;
this.pptImgUrl2.overData.driData.showType = 2;
} else if (
this.pptImgUrl2.overData.driData.url
.split(".")
[
this.pptImgUrl2.overData.driData.url.split(".").length - 1
].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.overData.driData.showType = 1;
} else if (
c.indexOf(
this.pptImgUrl2.overData.driData.url
.split(".")
[
this.pptImgUrl2.overData.driData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.driData.showType = 4;
} else {
this.pptImgUrl2.overData.driData.playerO = d;
this.pptImgUrl2.overData.driData.playerO.sources[0].src =
this.pptImgUrl2.overData.driData.url;
this.pptImgUrl2.overData.driData.showType = 3;
}
}
this.pptImgUrl2.overData.tarData = a.overData.tarData
? a.overData.tarData[0]
: {};
if (a.overData.tarData.length > 0) {
if (
b.indexOf(
this.pptImgUrl2.overData.tarData.url
.split(".")
[
this.pptImgUrl2.overData.tarData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.tarData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" +
this.pptImgUrl2.overData.tarData.url;
this.pptImgUrl2.overData.tarData.showType = 2;
} else if (
this.pptImgUrl2.overData.tarData.url
.split(".")
[
this.pptImgUrl2.overData.tarData.url.split(".").length - 1
].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.overData.tarData.showType = 1;
} else if (
c.indexOf(
this.pptImgUrl2.overData.tarData.url
.split(".")
[
this.pptImgUrl2.overData.tarData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.tarData.showType = 4;
} else {
this.pptImgUrl2.overData.tarData.playerO = d;
this.pptImgUrl2.overData.tarData.playerO.sources[0].src =
this.pptImgUrl2.overData.tarData.url;
this.pptImgUrl2.overData.tarData.showType = 3;
}
}
this.pptImgUrl2.overData.actData = a.overData.actData
? a.overData.actData[0]
: {};
if (a.overData.actData.length > 0) {
if (
b.indexOf(
this.pptImgUrl2.overData.actData.url
.split(".")
[
this.pptImgUrl2.overData.actData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.actData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" +
this.pptImgUrl2.overData.actData.url;
this.pptImgUrl2.overData.actData.showType = 2;
} else if (
this.pptImgUrl2.overData.actData.url
.split(".")
[
this.pptImgUrl2.overData.actData.url.split(".").length - 1
].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.overData.actData.showType = 1;
} else if (
c.indexOf(
this.pptImgUrl2.overData.actData.url
.split(".")
[
this.pptImgUrl2.overData.actData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.overData.actData.showType = 4;
} else {
this.pptImgUrl2.overData.actData.playerO = d;
this.pptImgUrl2.overData.actData.playerO.sources[0].src =
this.pptImgUrl2.overData.actData.url;
this.pptImgUrl2.overData.actData.showType = 3;
}
}
for (var i = 0; i < a.proData.length; i++) {
this.pptImgUrl2.proData[i] = a.proData[i] ? a.proData[i][0] : {};
if (a.proData[i].length > 0) {
if (
b.indexOf(
this.pptImgUrl2.proData[i].url
.split(".")
[
this.pptImgUrl2.proData[i].url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.proData[i].url =
"https://view.officeapps.live.com/op/view.aspx?src=" +
this.pptImgUrl2.proData[i].url;
this.pptImgUrl2.proData[i].showType = 2;
} else if (
this.pptImgUrl2.proData[i].url
.split(".")
[
this.pptImgUrl2.proData[i].url.split(".").length - 1
].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.proData[i].showType = 1;
} else if (
c.indexOf(
this.pptImgUrl2.proData[i].url
.split(".")
[
this.pptImgUrl2.proData[i].url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.proData[i].showType = 4;
} else {
this.pptImgUrl2.proData[i].playerO = d;
this.pptImgUrl2.proData[i].playerO.sources[0].src =
this.pptImgUrl2.proData[i].url;
this.pptImgUrl2.proData[i].showType = 3;
}
}
}
this.pptImgUrl2.excData = a.excData ? a.excData[0] : {};
if (a.excData.length > 0) {
if (
b.indexOf(
this.pptImgUrl2.excData.url
.split(".")
[
this.pptImgUrl2.excData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.excData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" +
this.pptImgUrl2.excData.url;
this.pptImgUrl2.excData.showType = 2;
} else if (
this.pptImgUrl2.excData.url
.split(".")
[
this.pptImgUrl2.excData.url.split(".").length - 1
].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.excData.showType = 1;
} else if (
c.indexOf(
this.pptImgUrl2.excData.url
.split(".")
[
this.pptImgUrl2.excData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.excData.showType = 4;
} else {
this.pptImgUrl2.excData.playerO = d;
this.pptImgUrl2.excData.playerO.sources[0].src =
this.pptImgUrl2.excData.url;
this.pptImgUrl2.excData.showType = 3;
}
}
this.pptImgUrl2.effData = a.effData ? a.effData[0] : {};
if (a.effData.length > 0) {
if (
b.indexOf(
this.pptImgUrl2.effData.url
.split(".")
[
this.pptImgUrl2.effData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.effData.url =
"https://view.officeapps.live.com/op/view.aspx?src=" +
this.pptImgUrl2.effData.url;
this.pptImgUrl2.effData.showType = 2;
} else if (
this.pptImgUrl2.effData.url
.split(".")
[
this.pptImgUrl2.effData.url.split(".").length - 1
].toLocaleUpperCase() == "PDF"
) {
this.pptImgUrl2.effData.showType = 1;
} else if (
c.indexOf(
this.pptImgUrl2.effData.url
.split(".")
[
this.pptImgUrl2.effData.url.split(".").length - 1
].toLocaleUpperCase()
) != -1
) {
this.pptImgUrl2.effData.showType = 4;
} else {
this.pptImgUrl2.effData.playerO = d;
this.pptImgUrl2.effData.playerO.sources[0].src =
this.pptImgUrl2.effData.url;
this.pptImgUrl2.effData.showType = 3;
}
}
},
// 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);
var b = this.$refs["cenBox"];
if (this.isNavTop >= 300) {
b.scrollTop = a.offsetTop - 50;
} else {
b.scrollTop = a.offsetTop + 50;
}
},
allScrollTop(ev) {
console.log(ev.target.scrollTop);
this.isNavTop = ev.target.scrollTop;
},
fold(i, j, e, type) {
var a =
e.currentTarget.parentElement.parentElement.parentElement.parentElement;
var b = e.currentTarget.parentElement;
if (type == 1) {
this.anliBox[0].process.stageBox[j].actBox[i].isFold = 1;
a.className += " smallTaskBorder";
b.className += " funBlockTop";
} else {
this.anliBox[0].process.stageBox[j].actBox[i].isFold = 0;
a.className = "taskBorder";
b.className = "funBlock";
}
this.$forceUpdate();
},
fold1(i, e, type) {
var a =
e.currentTarget.parentElement.parentElement.parentElement.parentElement;
var b = e.currentTarget.parentElement;
if (type == 1) {
this.anliBox[0].process.stageBox[i].isFold = 1;
a.className += " smallTaskBorder";
b.className += " funBlockTop";
} else {
this.anliBox[0].process.stageBox[i].isFold = 0;
a.className = "taskBorder";
b.className = "funBlock";
}
this.$forceUpdate();
},
},
created() {
this.selectAnLi();
},
};
</script>
<style scoped>
@media screen and (max-width: 1280px) {
.file > div > div:nth-child(2) > div:nth-child(1) {
width: 160px !important;
}
.leftImg {
height: 230px !important;
}
.navTop {
margin: 0 5px !important;
}
/* .navTop > div:nth-child(2) {
width: 60px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} */
.navBox {
width: 95% !important;
}
.messageBox {
width: 95% !important;
}
.proOverNav {
width: 52% !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;
overflow: auto;
}
.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: center;
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: 75%;
margin: 0 auto;
height: 70px;
border-radius: 10px;
}
.isNavBox {
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 5%;
box-shadow: 2px 2px 11px 1px #bdbdbd;
width: 100%;
border-radius: 0 !important;
z-index: 999;
}
.isNavBox > div > div:nth-child(2):hover {
color: #5e5e5e;
}
.isMessageBox {
margin: 11% auto !important;
}
.navBox > div:nth-child(5) > div:nth-child(2) {
width: 150px;
}
.navBox > div:nth-child(6) > div:nth-child(2) {
width: 120px;
}
.navBox > div:nth-child(2) > div:nth-child(2),
.navBox > div:nth-child(3) > div:nth-child(2) {
width: 70px;
}
.navTop {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin: 0 20px;
cursor: pointer;
}
.navTop > div:nth-child(2) {
width: 100px;
}
.navImg {
width: 35px;
}
.navImg > img {
width: 100%;
height: 100%;
}
.messageBox {
width: 75%;
margin: 1% 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: column;
flex-wrap: nowrap;
align-items: flex-start;
}
.fileLook {
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin: 20px 0px;
}
.look_file {
background: #fff;
/* margin: 20px 0; */
/* padding-top: 15px; */
border-radius: 10px;
box-sizing: border-box;
width: 64%;
/* margin: 0; */
min-height: 400px;
max-height: 400px;
}
.whiteRight {
width: 35%;
margin-left: 2%;
}
.proOverNav {
overflow: auto;
word-break: break-word;
margin-left: 10px;
width: 55%;
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: 250px;
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: 400px;
}
.video-player >>> .video-js .vjs-tech {
height: 400px;
}
.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;
position: relative;
}
.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: 95px;
color: #7e7e7e;
}
.personAndAutor {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-end;
}
.autorBox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
margin-left: 10px;
}
.Autor {
margin: 0 5px;
}
.isNoMessage {
width: 20%;
margin: 5% auto 0;
}
.isNoMessage > img {
width: 100%;
height: 100%;
}
/* code 样式 */
.noImg >>> code,
.detailTable >>> code,
.proOverNav >>> code {
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
}
.noImg >>> pre code,
.detailTable >>> pre code,
.proOverNav >>> pre code {
display: block;
}
/* ul ol 样式 */
.noImg >>> ul,
ol,
.detailTable >>> ul,
ol,
.proOverNav >>> ul,
ol {
margin: 10px 0 10px 20px;
}
/* table 样式 */
.noImg >>> table,
.detailTable >>> table,
.proOverNav >>> table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.noImg >>> table td,
.noImg >>> table th,
.detailTable >>> table td,
.detailTable >>> table th,
.proOverNav >>> table td,
.proOverNav >>> table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 15px 5px;
max-width: 0px;
}
.noImg >>> table th,
.detailTable >>> table th,
.proOverNav >>> table th {
border-bottom: 2px solid #ccc;
text-align: center;
}
/* blockquote 样式 */
.noImg >>> blockquote,
.detailTable >>> blockquote,
.proOverNav >>> blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
.smallTaskBorder {
height: 170px;
min-height: 170px !important;
overflow: hidden;
}
.funBlock {
display: flex;
padding: 15px 0;
flex-direction: row;
justify-content: flex-end;
align-items: center;
position: absolute;
right: 0;
bottom: 5px;
}
.fold {
margin-right: 10px;
cursor: pointer;
}
.arrow > img {
width: 100%;
height: 100%;
}
.arrow {
width: 15px;
height: 15px;
margin-left: 10px;
}
</style>