ssti-CollegeManage/src/views/resultShow/resultShowDetail.vue

<template>
    <!-- 成果展示 项目成果展示 -->
    <div class="rs1apply">
        <!-- 头部展示区开始 -->
        <div class="header">
            <div class="imgBlock">
                <img :src="TitleMessage.image" alt="">
            </div>
            <div class="headerConcent">
                <div class="rsHead1Tit">项目名称：<span>{{ TitleMessage.title }}</span></div>
                <div class="rsHead2Tit rsHead3Tit">
                    <div>负责人：<span class="titleMessage">{{ TitleMessage.pro_leader }}</span></div>
                </div>
                <div class="rsHead3Tit rsHead2Tit">
                    <div>学院：<span class="titleMessage">{{ TitleMessage.ClassName }}</span></div>
                    <div>分类：<span class="titleMessage">{{ TitleMessage.TypeName }}</span></div>
                </div>
                <div class="rsHead2Tit personListUL">
                    <i class="iconfont icon-duoren1" style="margin-right: 10px;color: #3a78fc;"></i>
                    <div class="personListLI">
                        <span v-for="(item,index) in TitleMessage.course_student" :key="index">{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <!-- <el-button class="backBtn" type="primary" @click="$router.back()">返回</el-button> -->
        </div>
        <!-- 头部展示区结束 -->
        <!--导航栏区域开始-->
        <div id="Nav">
            <div class="navLi" @click="pageState=0">
                <img src="@/assets/anliDetail/proOver.png" alt="">
                <span>项目基本内容</span>
            </div>
            <div class="navLi" @click="pageState=1">
                <img src="@/assets/anliDetail/proOverTwo.png" alt="">
                <span>项目详细</span>
            </div>
            <div  class="navLi" @click="pageState=2">
                <i class="iconStyle iconfont icon-jiegou" style="color:#58c2fe;font-size:22px;margin-right: 7px;"></i>
                <span>活动开展</span>
            </div>
            <div  class="navLi" @click="pageState=3">
                <i class="iconStyle iconfont icon-wenjian" style="color:#58c2fe;font-size:22px;margin-right: 7px;"></i>
                <span>项目附件</span>
            </div>
            <div  class="navLi" @click="pageState=4">
                <i class="iconStyle iconfont icon-baogao" style="color:#58c2fe;font-size:22px;margin-right: 7px;"></i>
                <span>项目结题报告</span>
            </div>
        </div>
        <!--导航栏区域结束-->
        <!--内容区开始-->
            <!--基础信息开始-->
            <div class="BaseMessage" v-show="pageState==0">
                <div class="BaseTitle">
                    <span>项目基本内容</span>
                </div>
                <div class="brief">
                    <div class="brief_title">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>开始时间与结题时间</span>
                    </div>
                    <div class="beginTime_EndTime">
                        <span>{{ TitleMessage.beginTime }}</span>
                        <i class="el-icon-arrow-right"></i>
                        <span>{{ TitleMessage.EndTime }}</span>
                    </div>
                </div>
                <div class="brief">
                    <div class="brief_title">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>成员</span>
                    </div>
                    <div class="projectStudent">
                        <el-table
                          :data="TitleMessage.course_student"
                          border
                          style="width: 100%">
                          <el-table-column
                            prop="name"
                            label="姓名"
                            align="center">
                          </el-table-column>
                          <el-table-column
                            prop="class"
                            label="班级"
                            align="center">
                          </el-table-column>
                          <el-table-column
                            prop="phone"
                            align="center"
                            label="联系电话">
                          </el-table-column>
                          <el-table-column
                            prop="score"
                            align="center"
                            label="学分">
                          </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="brief" v-if="TitleMessage.brief!=''">
                    <div class="brief_title">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>简介</span>
                    </div>
                    <div class="TextView">
                        {{ TitleMessage.brief }}
                    </div>
                </div>
            </div>
            <!--基础信息结束-->
            <!--项目详细开始-->
            <div class="BaseMessage" v-show="pageState==1">
                <div class="BaseTitle" type="1">
                    <span>项目详细</span>
                </div>

                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        
                        <span>项目创新点</span>
                    </div>
                    <div class="TextView" >
                        <VueEditor v-model="DetailMessage[0]" :disabled="true"></VueEditor>
                    </div>
                </div>


                <div class="BaseTitle" type="1">
                    <span>预期取得成果</span>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>一、项目预期成果、数量及形式</span>
                    </div>
                    <div class="TextView" >
                        <VueEditor v-model="DetailMessage[1]" :disabled="true"></VueEditor>
                    </div>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>二、创客人才培养预期成果、数量</span>
                    </div>
                    <div class="TextView" >
                        <VueEditor v-model="DetailMessage[2]" :disabled="true"></VueEditor>
                    </div>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>三、项目预期孵化、转化创业项目情况</span>
                    </div>
                    <div class="TextView" >
                        <VueEditor v-model="DetailMessage[3]" :disabled="true"></VueEditor>
                    </div>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>项目实施计划</span>
                    </div>
                    <div class="TextView" >
                        <VueEditor v-model="DetailMessage[4]" :disabled="true"></VueEditor>
                    </div>
                </div>
            </div>
            <!-- 项目详细结束 -->
            <!-- 活动开展开始 -->
            <div class="BaseMessage" v-show="pageState==2">

                <div class="BaseTitle" type="1">
                    <span>活动开展</span>
                </div>

                <div class="arrangement" v-for="(item,index) in AllActivity" :key="item.acId">
                    <div class="arrangement_assignment">
                        <div class="arrangement_assignment_title">
                            <span>
                                <img src="@/assets/anliDetail/jdNewTitle.png">
                                <span>活动{{ index+1 }}:</span>
                                <span>{{ item.title }}</span>
                            </span>
                        </div>

                        <div class="brief">
                            <div class="brief_title">
                                <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
                                <i class="el-icon-tickets"></i>
                                <span>基础信息</span>
                            </div>
                            <div class="ActivityBaseMessage">
                                <el-descriptions class="margin-top" :column="3" border>
                                  <el-descriptions-item>
                                    <template slot="label">
                                      <i class="el-icon-s-custom"></i>
                                      负责人
                                    </template>
                                    {{ item.pro_leader }}
                                  </el-descriptions-item>
                                  <el-descriptions-item>
                                    <template slot="label">
                                      <i class="el-icon-mobile-phone"></i>
                                      联系电话
                                    </template>
                                    {{ item.phone }}
                                  </el-descriptions-item>
                                  <el-descriptions-item>
                                    <template slot="label">
                                      <i class="el-icon-coordinate"></i>
                                      活动创建时间
                                    </template>
                                    {{item.create_at}}
                                  </el-descriptions-item>
                                  <el-descriptions-item>
                                    <template slot="label">
                                      <i class="el-icon-date"></i>
                                      活动开展时间
                                    </template>
                                    {{ JSON.parse(item.begin_at)[0]+"\t至\t"+JSON.parse(item.begin_at)[1] }}
                                  </el-descriptions-item>
                                  <el-descriptions-item>
                                    <template slot="label">
                                      <i class="el-icon-coin"></i>
                                      活动预算(元)
                                    </template>
                                    {{ item.money }}
                                  </el-descriptions-item>
                                  <el-descriptions-item>
                                    <template slot="label">
                                      <i class="el-icon-user"></i>
                                      参与学生人数
                                    </template>
                                    {{ item.students }}
                                  </el-descriptions-item>
                                </el-descriptions>
                            </div>

                            <div class="brief_title MarginTop30px">
                                <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
                                <i class="el-icon-user-solid"></i>
                                <span>指导老师</span>
                            </div>
                            <div class="projectStudent">
                                <el-table
                                  :data="JSON.parse(item.course_teacher)"
                                  border
                                  style="width: 100%">
                                  <el-table-column
                                    prop="Name"
                                    label="姓名"
                                    align="center">
                                  </el-table-column>
                                  <el-table-column
                                    prop="work"
                                    label="工作单位"
                                    align="center">
                                  </el-table-column>
                                  <el-table-column
                                    prop="takeCharge"
                                    align="center"
                                    label="活动分工">
                                  </el-table-column>
                                </el-table>
                            </div>
                            <div class="brief_title MarginTop30px">
                                <img src="@/assets/anliDetail/proOverTwo.png" alt="">
                                <span>活动简介</span>
                            </div>
                            <div class="TextView">
                                {{ item.brief }}
                            </div>

                            <div class="brief_title MarginTop30px">
                                <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
                                <i class="el-icon-edit-outline"></i>
                                <span>活动计划</span>
                            </div>
                            <div class="TextView" >
                                <VueEditor v-model="JSON.parse(item.chapters)[0]" :disabled="true"></VueEditor>
                            </div>

                            <div class="brief_title MarginTop30px">
                                <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
                                <i class="el-icon-data-line"></i>
                                <span>预期目标</span>
                            </div>
                            <div class="TextView" >
                                <VueEditor v-model="JSON.parse(item.chapters)[1]" :disabled="true"></VueEditor>
                            </div>

                            <div class="brief_title MarginTop30px">
                                <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
                                <i class="el-icon-pie-chart"></i>
                                <span>活动受面</span>
                            </div>
                            <div class="TextView" >
                                <VueEditor v-model="JSON.parse(item.chapters)[2]" :disabled="true"></VueEditor>
                            </div>

                            <div class="brief_title MarginTop30px">
                                <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
                                <i class="el-icon-money"></i>
                                <span>经费支出计划</span>
                            </div>
                            <div class="TextView" >
                                <VueEditor v-model="JSON.parse(item.chapters)[3]" :disabled="true"></VueEditor>
                            </div>
                            <div class="brief_title MarginTop30px" v-if="ActivityLookFile[index].url!=''">
                                <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                <!-- <i class="el-icon-money"></i> -->
                                <span>活动完结报告</span>
                            </div>
                            <div class="brief" v-if="ActivityLookFile[index].url!=''">
                                <div class="material">
                                    <div class="material_title">
                                        <img src="@/assets/anliDetail/fileList.png" alt="">
                                        <span>活动完结报告</span>
                                    </div>
                                    <div class="FileShowArea">
                                        <div class="FileShowArea_Left">
                                            <vword
                                                style="width: 100%; height: 100%; overflow: auto"
                                                class="fullStyle"
                                                v-if="checkFileType(ActivityLookFile[index].url)['type']!='pdf'&&checkFileType(ActivityLookFile[index].url)['name']!='图片'"
                                                :pdfUrl="'https://view.officeapps.live.com/op/view.aspx?src='+ActivityLookFile[index].url"
                                            ></vword>
                                            <vpdf
                                                style="width: 100%; height: 100%; overflow: auto"
                                                class="fullStyle"
                                                :pdfUrl="ActivityLookFile[index].url"
                                                v-if="checkFileType(ActivityLookFile[index].url)['type']=='pdf'"
                                            ></vpdf>
                                            <img :src="ActivityLookFile[index].url" alt="图片哦" v-if="checkFileType(ActivityLookFile[index].url)['name']=='图片'" style="width: 100%;height: 100%;">
                                        </div>
                                        <div class="FileShowArea_Right core_dialogue">
                                            <div v-for="(i,index2) in item.reportFile" :key="i.url" @click="Object.assign(ActivityLookFile[index],i)" :class="['FileList',ActivityLookFile[index]['url']==i.url?'lookFile':'']"><span>{{ index2+1 }}.{{ checkFileType(i.url)["name"] }}</span><div>{{ i.fileName }}</div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>


            </div>
            <!-- 活动开展结束 -->
            <!-- 项目附件开始 -->
            <div class="BaseMessage" v-show="pageState==3">
                <div class="BaseTitle" type="3">
                    <span>项目附件</span>
                </div>
                <div class="brief" v-if="ProjectLookFile.url!=''">
                    <div class="material">
                        <div class="material_title">
                            <img src="@/assets/anliDetail/fileList.png" alt="">
                            <span>项目材料</span>
                        </div>
                        <div class="FileShowArea">
                            <div class="FileShowArea_Left">
                                <vword
                                    style="width: 100%; height: 100%; overflow: auto"
                                    class="fullStyle"
                                    v-if="checkFileType(ProjectLookFile.url)['type']!='pdf'&&checkFileType(ProjectLookFile.url)['name']!='图片'"
                                    :pdfUrl="'https://view.officeapps.live.com/op/view.aspx?src='+ProjectLookFile.url"
                                ></vword>
                                <vpdf
                                    style="width: 100%; height: 100%; overflow: auto"
                                    class="fullStyle"
                                    :pdfUrl="ProjectLookFile.url"
                                    v-if="checkFileType(ProjectLookFile.url)['type']=='pdf'"
                                ></vpdf>
                                <img :src="ProjectLookFile.url" alt="图片哦" v-if="checkFileType(ProjectLookFile.url)['name']=='图片'" style="width: 100%;height: 100%;">
                            </div>
                            <div class="FileShowArea_Right core_dialogue">
                                <div v-for="(item,index) in ProjectFile" :key="item.url" @click="ProjectLookFile = item" :class="['FileList',ProjectLookFile['url']==item.url?'lookFile':'']"><span>{{ index+1 }}.{{ checkFileType(item.url)["name"] }}</span><div>{{ item.fileName }}</div></div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>

            <!-- 项目中期报告开始 -->
            <div class="BaseMessage" v-show="pageState==4">
                <div class="BaseTitle">
                    <span>结项评价</span>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>科研办</span>
                    </div>
                    <div class="TextView" >
                        <div class="TextView">
                            {{ endProjectRemark['kRem'] }}
                        </div>
                        <!-- <VueEditor v-model="DetailMessage[0]" :disabled="true"></VueEditor> -->
                    </div>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>学术委员会</span>
                    </div>
                    <div class="TextView" >
                        <div class="TextView">
                            {{ endProjectRemark["bRem"] }}
                        </div>
                        <!-- <VueEditor v-model="DetailMessage[0]" :disabled="true"></VueEditor> -->
                    </div>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>部门审核评语</span>
                    </div>
                    <div class="TextView" >
                        <div class="TextView">
                            {{ endProjectRemark["xRem"] }}
                        </div>
                        <!-- <VueEditor v-model="DetailMessage[0]" :disabled="true"></VueEditor> -->
                    </div>
                </div>
                
                <div class="BaseTitle" type="5">
                    <span>项目结题报告</span>
                </div>

                <div class="brief">
                    <div class="brief_title">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>项目结题附件</span>
                    </div>
                    <div class="material" v-if="ProjectEndLookFile.url!=''">
                        <div class="material_title">
                            <img src="@/assets/anliDetail/fileList.png" alt="">
                            <span>项目结题附件</span>
                        </div>
                        <div class="FileShowArea">
                            <div class="FileShowArea_Left">
                                <vword
                                    style="width: 100%; height: 100%; overflow: auto"
                                    class="fullStyle"
                                    v-if="checkFileType(ProjectEndLookFile.url)['type']!='pdf'&&checkFileType(ProjectEndLookFile.url)['name']!='图片'"
                                    :pdfUrl="'https://view.officeapps.live.com/op/view.aspx?src='+ProjectEndLookFile.url"
                                ></vword>
                                <vpdf
                                    style="width: 100%; height: 100%; overflow: auto"
                                    class="fullStyle"
                                    :pdfUrl="ProjectEndLookFile.url"
                                    v-if="checkFileType(ProjectEndLookFile.url)['type']=='pdf'"
                                ></vpdf>
                                <img :src="ProjectEndLookFile.url" alt="图片哦" v-if="checkFileType(ProjectEndLookFile.url)['name']=='图片'" style="width: 100%;height: 100%;">
                            </div>
                            <div class="FileShowArea_Right core_dialogue">
                                <div v-for="(item,index) in ProjectEndFile" :key="item.url" @click="ProjectEndLookFile = item" :class="['FileList',ProjectEndLookFile['url']==item.url?'lookFile':'']"><span>{{ index+1 }}.{{ checkFileType(item.url)["name"] }}</span><div>{{ item.fileName }}</div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--项目详结束-->
        <!--内容区结束-->
    </div>
  </template>
  
  <script>
    import vpdf from '@/components/vpdf.vue'
    import vword from '@/components/vword.vue'
    import { VueEditor } from "vue2-editor";
      export default {
        components:{vpdf,vword,VueEditor},
        data() {
          return {
            pageState:0,
            TitleMessage:{ClassName:"",EndTime:"",TypeName:"",beginTime:"",brief:"",course_student:[],image:"",pro_leader:"",title:""},
            DetailMessage:[],
            ProjectFile:[],
            ProjectLookFile:{url:"",type:""},
            ProjectEndFile:[],
            ProjectEndLookFile:{url:"",type:""},
            AllActivity:[],
            ActivityLookFile:[],
            endProjectRemark:{kRem:"",bRem:"",xRem:""},
            canonical:{
                Image:/^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
                File:/^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i
            },
          }
        },
        methods:{
            getData(){
                this.ActivityLookFile = [];
                this.ajax.get(this.$store.state.api+"/GetProjectDetailIsConclusion",{
                    uid:this.$store.state.userInfo.userid,
                    pid:this.$route.query["Id"]
                }).then(res=>{
                    let FormData = res.data;
                    console.log(FormData)
                    this.TitleMessage = FormData[0][0]
                    this.TitleMessage['course_student'] = JSON.parse(this.TitleMessage['course_student']);
                    this.DetailMessage= JSON.parse(FormData[1][0]['chapters'])[0];
                    this.ProjectFile = JSON.parse(FormData[2][0]['projectFile'])
                    if(this.ProjectFile!=null)this.ProjectLookFile = this.ProjectFile[0] 
                    else this.ProjectLookFile = {url:'',type:""};
                    this.ProjectEndFile = JSON.parse(FormData[3][0]['endFile']);
                    if(this.ProjectEndFile!=null)this.ProjectEndLookFile = this.ProjectEndFile[0];
                    else this.ProjectEndLookFile = {url:"",type:""}
                    console.log(FormData[4])
                    if(FormData[4][0]['title']!=null){
                        this.AllActivity = FormData[4]
                        this.AllActivity.forEach(item=>{
                            if(item['reportFile']!=null&&item['reportFile']!=''){
                                item['reportFile'] = JSON.parse(item['reportFile']);
                                this.ActivityLookFile.push({url:item['reportFile'][0].url,fileName:item['reportFile'][0].fileName})
                            }else this.ActivityLookFile.push({url:"",type:""})
                        })
                    };
                    console.log(this.ActivityLookFile)
                    if(JSON.parse(FormData[5][0]['endProjectRemark'])!=null)this.endProjectRemark = JSON.parse(FormData[5][0]['endProjectRemark']);
                }).catch(err=>{
                    console.log(err)
                })
            },
            checkFileType(url){
                if(typeof url=='undefined')return {type:"",name:""};
                let urlSplit = url.split(".");
                const type = urlSplit[urlSplit.length-1]
                if(this.canonical.Image.test(url))return {type:type,name:"图片"}
                if(this.canonical.File.test(url))return {type:type,name:"文档"}
                else return {type:type,name:type}
            },
            ActivityChangeFileLook(index,item){
                Object.assign(this.ActivityLookFile[index],item)
            }

        },
        mounted(){
            //监听元素滚动
            let Nav = document.querySelector("#Nav");
            document.querySelector(".core_dialogue").addEventListener("scroll",(e)=>{
                console.log()
                let scrollTop = e.target.scrollTop;
                if(scrollTop>=200){
                    document.querySelector(".core_dialogue").querySelector('.el-header').style='position:fixed;z-index:10;width:100%'
                    Nav.style = `width:100%;padding:0 20%;box-sizing: border-box;border-radius:0;display:flex;justify-content: space-around;position: fixed;top:calc(70px - 20px);z-index:99;align-items: center;box-shadow: 0 0 5px gray;`
                }else if(scrollTop<=100){
                    document.querySelector(".core_dialogue").querySelector('.el-header').style=''
                    Nav.style = ``
                }
            });
            this.getData();
        }
      }
  </script>
  
  <style lang="less" scoped>
    .rs1apply{
        width: 100%;
        height: 100%;
        // height: auto;
        display: flex;
        
        flex-direction: column;
        align-items: center;
        background-color: #e6eaf0;
        box-sizing: border-box;
        padding-bottom: 50px;
    }
    .header{
        width: 100%;
        min-height: 200px;
        background-color: white;
        margin-top: 10px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 5%;
        position: relative;
        .imgBlock{
            width: 230px;
            height: 130px;
            margin-right: 20px;

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .headerConcent{
            width: 400px;
            height: 130px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            // width: ;
            .rsHead1Tit{
                font-size: 22px;
                font-weight: bold;
            }
            .rsHead2Tit{
                font-size: 16px;
            }
            .rsHead3Tit{
                display: flex;
                div{
                    margin-right: 30px;
                }
            }
        }
        .backBtn{
            position: absolute;
            right: 10%;
            width:100px;
            top: 10%;
            box-sizing: border-box;
            padding: 9px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            cursor: pointer;
        }
    }
    #Nav{
        box-sizing: border-box;
        padding: 0 80px 0 70px;
        width: 60%;
        min-height: 50px;
        background-color: white;
        margin-top: 20px;
        border-radius: 5px;
        display: flex;
        justify-content: space-around;
        .navLi{
            // width: 150px;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 18px;
            // margin-left: 20px;
            cursor: pointer;
            img{
                height: 40px;
            }
        }
        .navLi:hover span{
            color: gray;
        }
    }
    .BaseMessage{
        width: 60%;
        position: relative;
        box-sizing: border-box;
        // margin-bottom: 20px;
        .BaseTitle{
            width: 100%;
            height: 85px;
            background-color: white;
            border-radius: 5px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            span{
                display: flex;
                align-items: center;
                // width: 160px;

                height: 50px;
                box-sizing: border-box;
                justify-content: center;
                padding-right: 2%;
                padding-left: 4%;
                align-items: center;
                background-image: url('@/assets/anliDetail/longNavBg.png');
                background-size: 100% 100%;
                margin-left: 20px;
                color: white;
                font-size: 18px;
            }
        }
        .brief{
            width: 100%;
            height: auto;
            border-radius: 5px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
            padding: 10px 10px 20px 10px;
            margin-bottom: 20px;
            position: relative;
        }
        .brief_title{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            // margin-top: 10px;
            font-size: 18px;
            i{
                width: 30px;
                height: 30px;
                font-size: 1.5em;
                color: #50c5ff;
            }
            img{
                width: 30px;
                height: 30px;
            }
            span{
                margin-left: 10px;
                color: gray;
            }
            
        }
        .TextView{
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            border-radius: 5px;
            background-color: rgb(240, 240, 240);
            line-height: 2em;
        }
        .FileView{
            width: 100%;
            box-sizing: border-box;
            padding: 0px 10px 10px 10px;
            border-radius:10px ;
            background-color: rgb(240, 240, 240);
            .FileList{
                width: 100%;
                height: 50px;
                border-radius: 10px;
                background-color: white;
                display: flex;
                overflow: hidden;
                cursor: pointer;
                box-shadow: 0px 0px 4px rgb(185, 185, 185);
                margin-top: 10px;
                .FileType{
                    width: 15%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: white;
                    font-size: 18px;
                    background-color:#0c74ab;
                }
                .FileTitle{
                    display: flex;
                    height: 100%;
                    flex: 1;
                    align-items: center;
                    box-sizing: border-box;
                    padding-left: 2%;
                }
            }
        }
        .FileShow{
            width: 100%;
            height: 200px;
            background-color: gray;
        }
    }
    .material{
        width: 100%;
        height: 900px;
        // height: 1000px;
        margin-top: 20px;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #2f89dd;
        overflow: hidden;
        .material_title{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 10px;
            color: white;
            background-color: #2f89dd;
        }
        .FileShowArea{
            width: 100%;
            height: calc(100% - 40px);
            display: flex;
            justify-content: space-around;
            align-items: center;
            .FileShowArea_Left{
                width: 60%;
                height: 95%;
                background-color: white;
            }
            .FileShowArea_Right{
                width: 35%;
                height: 95%;
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: #f6f9fe;
                border-radius: 5px;
                .FileList{
                    width: 95%;
                    height: 45px;
                    background-color: white;
                    margin-top: 20px;
                    border-radius: 10px;
                    font-size: 18px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    div{
                        height: auto;
                        width: 70%;
                        display: block;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    span{
                        max-width: 20%;
                        min-width: 20%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        background-color: #0c74ab;
                        margin-right: 10px;
                        float: left;
                    }
                }
                .FileList:hover{
                    color: gray;
                }
            }

        }
    }

    .arrangement{
        width: 100%;
        margin-top: 10px;
        background-color: white;
        border-radius: 5px;
        padding: 10 px;
        box-sizing: border-box;
        .arrangement_assignment_title{
            width: 100%;
            height: 50px;
            display: flex;
            box-sizing: border-box;
            padding: 0px 20px 0px 10px;
            justify-content: space-between;
            font-size: 18px;
            align-items: center;
            span{
                display: flex;
                align-items: center;
                color: black;
                font-weight: 600;
                span:nth-of-type(2){
                    margin-left: 10px;
                }
                img{
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                }
            }
        }
        .assignment{
            width: 100%;
            display: flex;
            box-sizing: border-box;
            padding: 0px 20px 0px 20px;
            justify-content: center;
            font-size: 18px;
            align-items: space-between;
            flex-direction: column;
            span{
                display: flex;
                align-items: center;
                color: gray;
                img{
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                }
            }
            .assignment_message{
                width: 100%;
            }
        }
    }
    .fullStyle {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
    }
    .personListUL{
        width: 100%;
        display: flex;
        align-items: center;
        .personListLI{
            width: 80%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            span{
                margin-right: 10px;
                color: darkgray;
            }
        }
    }
    .titleMessage{
        color: darkgray;
    }
    .projectStudent{
        width:100%;
        cursor: default;
    }
    .beginTime_EndTime{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 18px;
        box-sizing: border-box;
        padding-left: 20px;
        i{
            margin: 0 20px 0 20px;
            font-size:22px;
        }
        // background-color: red;
    }
    /deep/ .ql-toolbar{
        display: none !important;
    }
    /deep/ .ql-container.ql-snow{
        border:none !important;
    }
    .lookFile{
        color: grey;
    }
    .ActivityBaseMessage{
        width: 100%;
        height: auto;
    }
    .MarginTop30px{
        margin-top: 30px;
    }
  </style>