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

<template>
    <!-- 成果展示 项目成果展示 -->
    <div class="rs1apply core_dialogue">
        <!-- 头部展示区开始 -->
        <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="brief">
                    <div class="brief_title" type="1.2">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>活动开展</span>
                    </div>
                    <div class="TextView">
                        {{ ProjectBaseMessage.question }}
                    </div>
                    <div class="material">
                        <div class="material_title">
                            <img src="@/assets/anliDetail/fileList.png" alt="">
                            <span>项目材料</span>
                        </div>
                        <div class="FileShowArea">
                            <div class="FileShowArea_Left">
                                <vpdf
                                    style="width: 100%; height: 100%; overflow: auto"
                                    class="fullStyle"
                                >
                                </vpdf>
                            </div>
                            <div class="FileShowArea_Right">
                                <div class="FileList"><span>1.文档</span>xxxxxxx</div>
                            </div>
                        </div>
                    </div>
                </div> -->

                <!-- <div class="brief">
                    <div class="brief_title" type="1.3">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>活动内容</span>
                    </div>
                    <div class="TextView">
                        {{ ProjectBaseMessage.evaluation }}
                    </div>
                    <div class="material">
                        <div class="material_title">
                            <img src="@/assets/anliDetail/fileList.png" alt="">
                            <span>项目材料</span>
                        </div>
                        <div class="FileShowArea">
                            <div class="FileShowArea_Left">
                                <vpdf
                                    style="width: 100%; height: 100%; overflow: auto"
                                    class="fullStyle"
                                >
                                </vpdf>
                            </div>
                            <div class="FileShowArea_Right core_dialogue">
                                <div class="FileList"><span>1.文档</span>xxxxxxx</div>
                            </div>
                        </div>
                    </div>
                </div> -->
<!-- 
                <div class="BaseTitle" type="2">
                    <span>项目安排</span>
                </div> -->

                <!-- <div class="arrangement">
                    <div class="arrangement_assignment">
                        <div class="arrangement_assignment_title" type="2.1">
                            <span>
                                <img src="@/assets/anliDetail/jdNewTitle.png">
                                阶段1 腾讯未来探索课堂
                            </span>
                            <el-button @click="Develop.arrangement1=!Develop.arrangement1">{{Develop.arrangement1?"折叠":"展开"}}</el-button>
                        </div>
                        <div class="arrangement_assignment_list">
                            <div class="assignment">
                                <span>
                                    <img src="@/assets/anliDetail/rwTitle.png" alt="">
                                    任务1 xxxxxxxx
                                </span>
                                <hr>
                                <div class="assignment_message" v-show="Develop.arrangement1">

                                    <div class="brief">
                                        <div class="brief_title">
                                            <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                            <span>活动目标</span>
                                        </div>
                                        <div class="TextView">
                                            {{ ProjectBaseMessage.evaluation }}
                                        </div>
                                    </div>

                                    <div class="brief">
                                        <div class="brief_title">
                                            <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                            <span>活动内容</span>
                                        </div>
                                        <div class="TextView">
                                            {{ ProjectBaseMessage.evaluation }}
                                        </div>
                                    </div>

                                    <div class="brief">
                                        <div class="brief_title">
                                            <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                            <span>活动评价</span>
                                        </div>
                                        <div class="TextView">
                                            {{ ProjectBaseMessage.evaluation }}
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="assignment">
                                <span>
                                    <img src="@/assets/anliDetail/rwTitle.png" alt="">
                                    任务2 xxxxxxxx
                                </span>
                                <hr>
                                <div class="assignment_message" v-show="Develop.arrangement1">

                                    <div class="brief">
                                        <div class="brief_title">
                                            <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                            <span>活动目标</span>
                                        </div>
                                        <div class="TextView">
                                            {{ ProjectBaseMessage.evaluation }}
                                        </div>
                                    </div>

                                    <div class="brief">
                                        <div class="brief_title">
                                            <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                            <span>活动内容</span>
                                        </div>
                                        <div class="TextView">
                                            {{ ProjectBaseMessage.evaluation }}
                                        </div>
                                    </div>

                                    <div class="brief">
                                        <div class="brief_title">
                                            <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                            <span>活动评价</span>
                                        </div>
                                        <div class="TextView">
                                            {{ ProjectBaseMessage.evaluation }}
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div> -->

                <!-- <div class="arrangement">
                    <div class="arrangement_assignment">
                        <div class="arrangement_assignment_title" type="2.2">
                            <span>
                                <img src="@/assets/anliDetail/jdNewTitle.png">
                                阶段2 "未来教室"再次落地北大
                            </span>
                            <el-button @click="Develop.arrangement2=!Develop.arrangement2">{{Develop.arrangement2?"折叠":"展开"}}</el-button>
                        </div>
                        <div class="arrangement_assignment_list">
                            <div class="assignment">
                                <span>
                                    <img src="@/assets/anliDetail/rwTitle.png" alt="">
                                    任务1 xxxxxx
                                </span>
                                <hr>
                                <div class="assignment_message" v-show="Develop.arrangement2">

                                    <div class="brief">
                                        <div class="brief_title">
                                            <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                            <span>活动内容</span>
                                        </div>
                                        <div class="TextView">
                                            {{ ProjectBaseMessage.evaluation }}
                                        </div>
                                    </div>

                                    <div class="brief">
                                        <div class="brief_title">
                                            <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                            <span>预期成果</span>
                                        </div>
                                        <div class="TextView">
                                            {{ ProjectBaseMessage.evaluation }}
                                        </div>
                                    </div>

                                    <div class="brief">
                                        <div class="brief_title">
                                            <img src="@/assets/anliDetail/jdTitle.png" alt="">
                                            <span>活动评价</span>
                                        </div>
                                        <div class="TextView">
                                            {{ ProjectBaseMessage.evaluation }}
                                        </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">
                    <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">
                            {{ DetailMessage[0] }}
                        </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">
                            {{ DetailMessage[0] }}
                        </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">
                            {{ DetailMessage[0] }}
                        </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">
                        <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:{},
            DetailMessage:[],
            ProjectFile:[],
            ProjectLookFile:{url:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf"},
            ProjectEndFile:[],
            ProjectEndLookFile:{url:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf"},
            canonical:{
                Image:/^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
                File:/^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i
            },
          }
        },
        methods:{
            getData(){
                this.ajax.get(this.$store.state.api+"/GetProjectDetailIsConclusion",{
                    uid:this.$store.state.userInfo.userid,
                    pid:this.$route.query["Id"]
                }).then(res=>{
                    console.log(res)
                    let data = res.data;
                    console.log(data)
                    this.TitleMessage = data[0][0]
                    this.TitleMessage['course_student'] = JSON.parse(this.TitleMessage['course_student']);
                    this.DetailMessage= JSON.parse(data[1][0]['chapters'])[0];
                    this.ProjectFile = JSON.parse(data[2][0]['projectFile'])
                    this.ProjectLookFile = this.ProjectFile[0] || '';
                    this.ProjectEndFile = JSON.parse(data[3][0]['endFile']);
                    this.ProjectEndLookFile = this.ProjectEndFile[0] || ''
                    console.log(this.ProjectEndLookFile)
                }).catch(err=>{
                    console.log(err)
                })
            },
            checkFileType(url){
                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:"文档"}
            }

        },
        mounted(){
            //监听元素滚动
            let Nav = document.querySelector("#Nav");
            document.querySelector(".rs1apply").addEventListener("scroll",(e)=>{
                let scrollTop = e.target.scrollTop;
                if(scrollTop>=200){
                    Nav.style = `width:100%;padding:0 20%;box-sizing: border-box;border-radius:0;display:flex;justify-content: space-around;position: fixed;top:calc(60px - 20px);z-index:99;align-items: center;box-shadow: 0 0 5px gray;`
                }else{
                    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%;
            }
        }
        .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{
        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;
        }
        .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-bottom: 10px;
            font-size: 18px;
            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 20px;
            justify-content: space-between;
            font-size: 18px;
            align-items: center;
            span{
                display: flex;
                align-items: center;
                color: gray;
                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;
    }
  </style>