ssti-CollegeManage/src/views/resultShowDetail.vue

<template>
    <div class="rs1apply core_dialogue">
        <!-- 头部展示区开始 -->
        <div class="header">
            <div class="imgBlock">
                <img src="../assets/img/login-bg-autumn.jpg" alt="">
            </div>
            <div class="headerConcent">
                <div class="rsHead1Tit">项目名称：{{ ProjectBaseMessage.Name }}</div>
                <div class="rsHead2Tit">负责人：{{ ProjectBaseMessage.curator }}</div>
                <div class="rsHead3Tit rsHead2Tit">
                    <div>单位：{{ ProjectBaseMessage.curator }}</div>
                    <div>学科：{{ ProjectBaseMessage.subject }}</div>
                </div>
                <div class="rsHead2Tit">
                    <i class="iconfont icon-duoren1" style="margin-right: 10px;color: #3a78fc;"></i>
                    12人
                </div>
            </div>
            <div class="backBtn" @click="$router.back()">返回</div>
        </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">
                <i class="iconStyle iconfont icon-jiegou" style="color:#58c2fe;font-size:22px;margin-right: 7px;"></i>
                <span>活动开展</span>
            </div>
            <div  class="navLi">
                <i class="iconStyle iconfont icon-wenjian" style="color:#58c2fe;font-size:22px;margin-right: 7px;"></i>
                <span>项目附件</span>
            </div>
            <div  class="navLi">
                <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="TextView">
                        {{ ProjectBaseMessage.brief }}
                    </div>
                </div>
                <div class="brief">
                    <div class="brief_title">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>材料</span>
                    </div>
                    <div class="FileView">
                        <div class="FileList" v-for="(item,index) in File.brief"  :key="index">
                            <span class="FileType">{{ index+1 }}.{{ item.type }}</span>
                            <span class="FileTitle" :style="{color: item.show?'#4386ea':''}">{{ item.title }}</span>
                        </div>
                    </div>
                    <div class="brief_title">
                        <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">
                                <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>
            <!--基础信息结束-->
            <!--项目详细开始-->
            <div class="BaseMessage" v-show="pageState==1">

                <!-- 侧边栏开始 -->
                <div id="leftNav">
                    <div class="leftNavHeader">导航栏</div>
                    <div class="leftNavList core_dialogue">
                        <div class="leftNavTitle" @click="move(`.BaseTitle[type='1']`)">1、项目详细</div>
                        <div class="leftNavContent" @click="move(`.brief_title[type='1.1']`)"><span>1.1</span> <span>项目详细</span></div>
                        <div class="leftNavContent" @click="move(`.brief_title[type='1.2']`)"><span>1.2</span> <span>活动开展</span></div>
                        <div class="leftNavContent" @click="move(`.brief_title[type='1.3']`)"><span>1.3</span> <span>活动内容</span></div>

                        <div class="leftNavTitle" @click="move(`.BaseTitle[type='2']`)">2、项目安排</div>
                        <div class="leftNavContent" @click="move(`.arrangement_assignment_title[type='2.1']`)"><span>2.1</span> <span>腾讯未来探索课堂</span></div>
                        <div class="leftNavContent" @click="move(`.arrangement_assignment_title[type='2.2']`)"><span>2.2</span> <span>腾讯未来探索课堂</span></div>

                        <div class="leftNavTitle" @click="move(`.BaseTitle[type='3']`)">3、项目活动过程</div>
                        <div class="leftNavContent" @click="move(`.brief_title[type='3.1']`)"><span>3.1</span> <span>活动阶段一</span></div>
                        <div class="leftNavContent" @click="move(`.brief_title[type='3.2']`)"><span>3.2</span> <span>活动阶段二</span></div>

                        <div class="leftNavTitle" @click="move(`.BaseTitle[type='4']`)">4、取得成果</div>

                        <div class="leftNavTitle" @click="move(`.BaseTitle[type='5']`)">5、项目中期报告</div>
                    </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">
                        {{ 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.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">
                                <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 class="BaseTitle" type="3">
                    <span>项目活动过程</span>
                </div>
                <div class="brief">
                    <div class="brief_title" type="3.1">
                        <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">
                                <div class="FileList"><span>1.文档</span>xxxxxxx</div>
                            </div>
                        </div>
                    </div>

                    <div class="brief_title" type="3.2">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>阶段二</span>
                    </div>
                    <div class="TextView">
                        {{ ProjectBaseMessage.evaluation }}
                    </div>

                </div>

                <div class="BaseTitle" type="4">
                    <span>取得成果</span>
                </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="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="TextView">
                        {{ ProjectBaseMessage.evaluation }}
                    </div>
                </div>






            </div>
            <!--项目详结束-->
        <!--内容区结束-->
    </div>
  </template>
  
  <script>
    import vpdf from '@/components/vpdf.vue'
    import vword from '@/components/vword.vue'
      export default {
        components:{vpdf,vword},
        data() {
          return {
            pageState:0,
            ProjectBaseMessage:{
                Name:"人工智能测试数据",
                curator:"张紫林",
                unit:"深圳技师学院",
                subject:"个人创客",
                brief:"项目组委托中国软件评测中心对于本项目进行检测并出具了《软件产品登记测试报告》（报告编号：RD161713835）。a.报告中测试项目之功能：“检测抽查软件中C、PHP、Python、Nodejs等主要功能未发现异常。”测试结果为通过，完成本项目合同指标1的第三方检测验证。b.报告中测试项目之功能：“软件的主要功能模块（二级菜单以上）基本挂件。”测试项目之安全稳定性：“软件具有用户权限限制。”测试结",
                question:"云后台在线编程是指不需要经过安装编程的环境，直接在互联网浏览器上编写程序，并且可以运行出结果。而云后台在线编程的主旨是搭建一个功能完善的在线开发平台和学习分享社区。本项目具体拟采用的技术原理以及技术方法：通过Web形式实现可供编码的客户端，当代码运行时，将文件数据传输都后台linux系统进行编译运行，再将其结果反馈回到客户端，使得后端语言学习者免去硬件环境等客观阻碍的因素，能够快速得进行后端语言的学习与开发。以下为项目的几点工艺流程：1、引用云操作系统ufrom,uformd框架，实现web界面的本地化。实现界面的可视化效果。2、搭建键值对数据库mongodb，传统数据库mysql，实现用户多项目管理，目录树管理，文件夹管理，文件管理。3、实现C语言，PHP语言，Nodejs语言，Ruby语言，Perl语言，Python语言的后台编译。",
                objectives:"在线编程是指不需要安装开发环境，直接在互联网浏览器上进行开发，并且可直接以运行代码的互联网平台。目前国内制作的在线开发环境功能参差不全，支持的语言不够多，大部分国内平台只支持语法高亮与代码格式化，只有少部分提供的最基础的调试功能。而“云后台在线编程”的主旨是为团队协同工作提供方便，支持在线同时编辑代码，支持大部分语言鲜明清晰，内置数据文件可以公开，也可以分享给指定ID，可以查看修改记录。本项目的最终目标是搭建一个功能完善的在线开发平台和学习分享社区。",
                evaluation:"云后台在线编程内置的Web IDE意思为免费的在线集成开发环境，项目还包括了供Web IDE实现的云服务架构。云服务架构底层的核心是静态文件服务器集群，静态文件服务器集群是一个操作的集群，操作性能是团队选择实现技术的关键点，Node.js的底层优化和事件模型及其切合了我们的需求。以下为研究内容：1、支持十多种编程语言，例如PHP、Ruby、Python、Go、JavaScript（包括Node.js）等。它可以使开发者在一个事先安装好的环境中快速进入开发，能与其他人协作，并且能在Web开发中做到实时预览和浏览器兼容性测试等。2、完成在线文件管理系统，通过树目录实现文件管理系统功能。3、实现友好的错误提示，当程序发生错误时，提示用户如何解决此错误。4、实现项目之间的分享，让互联网用户更加容易查看到其他人制作的项目，分享成功的经验和失败的教训。5、完成平台至少40个教学案例展示。",
            },
            File:{
                brief:[
                    {id:1,title:"演讲视角.jpg",show:true,type:"图片"},
                    {id:2,title:"关于晚修课程请假.docx",show:false,type:"文档"}
                ]
            },
            canonical:{
                Image:/^\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
            },
            Develop:{
                arrangement1:false,
                arrangement2:false,
            }
          }
        },
        methods:{
            move(className){
                let rs1apply = document.querySelector('.rs1apply');
                let MoveWith = document.querySelector(className)
                rs1apply.scrollTo(0,MoveWith.offsetTop+150);

            }
        },
        mounted(){
            //监听元素滚动
            let Nav = document.querySelector("#Nav");
            document.querySelector(".rs1apply").addEventListener("scroll",(e)=>{
                let scrollTop = e.target.scrollTop;
                if(scrollTop>=300){
                    Nav.style = `width:100%;border-radius:0;display:flex;justify-content: center;position: fixed;top:calc(60px - 20px);z-index:99;align-items: center;box-shadow: 0 0 5px gray;`
                }else{
                    Nav.style = ``
                }
            })
        }
      }
  </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%;
            top: 10%;
            font-size: 16px;
            cursor: pointer;
        }
    }
    #Nav{
        width: 60%;
        min-height: 50px;
        background-color: white;
        margin-top: 20px;
        border-radius: 5px;
        display: flex;
        .navLi{
            // width: 150px;
            height: 100%;
            display: flex;
            justify-content: center;
            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;
        }
        .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: 700px;
        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;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    font-size: 18px;
                    cursor: pointer;
                    span{
                        width: 80px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        background-color: #0c74ab;
                        margin-right: 10px;
                    }
                }
                .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%;
            }
        }
    }
    #leftNav{
        position: fixed;
        left: 3%;
        width: 240px;
        height: 550px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #76b8de;
        .leftNavHeader{
            width: 100%;
            height: 40px;
            font-size: 18px;
            color: white;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left:5%;
            background-color: #316b8c;
        }
        .leftNavList{
            width: 100%;
            height: calc(100% - 40px);
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            // div:hover{
            //     background-color: #e1edf7;
            // }
            div:hover span:nth-child(2){
                color: gray;
            }
            .leftNavTitle{
                width: 90%;
                min-height: 40px;
                background-color: white;
                border-radius: 5px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding-left: 2%;
                font-size: 18px;
                margin-top: 5px;
                margin-bottom: 10px;
                font-weight: bold;
            }
            .leftNavContent{
                width: 90%;
                min-height: 40px;
                background-color: white;
                border-radius: 5px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                font-size: 16px;
                margin-top: 5px;
                margin-bottom: 10px;
                font-weight: 600;
                overflow: hidden;
                position: relative;

                span:nth-child(1){
                    min-width: 40px;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #e1edf7;
                    margin-right: 5px;
                }
                span:nth-child(2){
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-word;
                    max-width: 130px;;
                }
            }

        }

    }
    .fullStyle {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
    }

  </style>