<template>
    <div class="rs1apply">
        <!-- 头部展示区开始 -->
        <div class="header">
            <div class="imgBlock">
                <img src="@/assets/img/login-bg-autumn.jpg" alt="">
            </div>
            <div class="headerConcent">
                <div class="rsHead2Tit" style="font-size: 22px;font-weight: bold;">人脸检测与人脸识别创意互联项目</div>
                <div class="rsHead2Tit">负责人:张紫林</div>
                <div class="rsHead2Tit rsHead2Tits">
                    <div>单位:深圳技师学院</div>
                    <div>学科:个人创客</div>
                </div>
                <div class="rsHead2Tit">
                    <i class="iconfont icon-duoren1" style="margin-right: 10px;"></i>
                    12人
                </div>
            </div>
            <div class="backBtn" @click="$router.back()">返回</div>
        </div>
        <!-- 头部展示区结束 -->

    <!-- 内容展示区域开始 -->
    <div class="rsMid">

        <!-- 顶部主要简介开始 -->
          <div class="topIntro" >
            <div>
                <i class="iconStyle iconfont icon-cubelifangti"></i>
                项目基本内容
            </div>
            <div>
                <i class="iconStyle iconfont icon-biaodan1"></i>
                项目详情
            </div>
            <div>
                <i class="iconStyle iconfont icon-jiegou"></i>
                活动开展
            </div>
            <div>
                <i class="iconStyle iconfont icon-wenjian"></i>
                项目附件
            </div>
            <div>
                <i class="iconStyle iconfont icon-baogao"></i>
                项目中期工作报告
            </div>
          </div>
        <!-- 顶部主要简介结束 -->

        <!-- 项目基本内容区域开始 -->
          <div class="projectBasicContent">
            <div class="rsMidTit"><div>项目基本内容</div></div>
            <div class="rsMidText"><p>你好你好你好你好你好你好你好你好你好你好你好你好
                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你
                好你好你好你好你好你好你好你好</p></div>
          </div>
        <!-- 项目基本内容区域结束 -->

        <!-- 项目详情内容区域开始 -->
          <div class=" bigBlock">
                <div class="bigBlockLeft">
                    <div class="rsMidTit">项目详情</div>
                    <div class="bigBlockLeftContent">
                        <div class="bigBlockLeftImg"><img src="@/assets/img/login-bg-autumn.jpg" alt=""></div>
                        <div class="bigBlockLeftTextBlock">
                            <p>
                                人生就是这样意外和惊喜，不知哪个先来临，没有太多准备好的离别，
                                很多人一转身就是一辈子，连再见都没机会说一声，请珍惜不期而遇的缘分，
                                无论亲情。友情还是爱情，
                            </p>
                        </div>
                    </div>
                </div>

                <div class="bigBlockRight">
                    <div class="rsMid3r1">
                        <div>
                            <i class="iconfont iconfont icon--zuozhengcailiao"></i>
                            材料
                        </div>
                    </div>
                    <div class="rsMid3r2"></div>
                </div>
           </div>
        <!-- 项目详情内容区域结束 -->
      
        <!-- 取得成果区域开始 -->
          <div class=" bigBlock">
                <div class="bigBlockLeft">
                    <div class="rsMidTit">取得成果</div>
                    <div class="bigBlockLeftContent">
                        <div class="bigBlockLeftImg"><img src="@/assets/img/login-bg-autumn.jpg" alt=""></div>
                        <div class="bigBlockLeftTextBlock">
                            <p>
                                人生就是这样充满了大起大落，你永远不会知道下一刻会发生什么，
                                也不会明白命运为何这样待你。只有在你经历了人生种种变故之后，
                                你才会褪尽了最初的浮华。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="bigBlockRight">
                    <div class="rsMid3r1">
                        <div>
                            <i class="iconfont iconfont icon--zuozhengcailiao"></i>
                            材料
                        </div>
                    </div>
                    <div class="rsMid3r2"></div>
                </div>
           </div>
        <!-- 取得成果区域结束 -->


        <!-- 项目实施计划区域开始 -->
           <div class=" bigBlock">
                <div class="bigBlockLeft">
                    <div class="rsMidTit">项目实施计划</div>
                    <div class="bigBlockLeftContent">
                        <div class="bigBlockLeftTextBlock rsMid3LCon4"><p>你好</p></div>
                    </div>
                </div>
                <div class="bigBlockRight">
                    <div class="rsMid3r1">
                        <div>
                            <i class="iconfont iconfont icon--zuozhengcailiao"></i>
                            材料
                        </div>
                    </div>
                    <div class="rsMid3r2"></div>
                </div>
           </div>
        <!-- 项目实施计划区域结束 -->

        <!-- 活动开展区域开始 -->
           <div class=" bigBlock">
                <div class="bigBlockLeft">
                    <div class="rsMidTit">活动开展</div>
                    <div class="bigBlockLeftContent ">
                        <div class="bigBlockLeftTextBlock rsMid3LCon4" style="background:none"><p>你好</p></div>
                    </div>
                </div>
                <div class="bigBlockRight">
                    <div class="rsMid3r1">
                        <div>
                            <i class="iconfont iconfont icon--zuozhengcailiao"></i>
                            材料
                        </div>
                    </div>
                    <div class="rsMid3r2"></div>
                </div>
           </div>
        <!-- 活动开展区域结束 -->

        <!-- 活动内容区域开始 -->
           <div class=" bigBlock">
                <div class="bigBlockLeft">
                    <div class="rsMidTit">活动内容</div>
                    <div class="bigBlockLeftContent">
                        <div class="bigBlockLeftTextBlock rsMid3LCon4" style="background:none"><p>你好</p></div>
                    </div>
                </div>
                <div class="bigBlockRight">
                    <div class="rsMid3r1">
                        <div>
                            <i class="iconfont iconfont icon--zuozhengcailiao"></i>
                            材料
                        </div>
                    </div>
                    <div class="rsMid3r2"></div>
                </div>
           </div>
        <!-- 活动内容区域结束 -->

        <!-- 活动一 -->
           <div class=" bigBlock">
                <div class="bigBlockLeft" style="padding:0;">
                    <div class="rsClassify">活动一:腾讯未来探索课堂</div>
                    <div class="bigBlockLeftContent">
                        <div class="activityIMgBlock">
                            <div class="activityIMg">
                                <img src="@/assets/img/jj.jpg" alt="">
                            </div>
                            <div class="activityIMg">
                                <img src="@/assets/img/jj.jpg" alt="">
                            </div>
                            <div class="activityIMg">
                                <img src="@/assets/img/jj.jpg" alt="">
                            </div>
                            <div class="activityIMg">
                                <img src="@/assets/img/jj.jpg" alt="">
                            </div>
                        </div>
                        <div class="activityTextBlock">
                            <p>
                                之所以潸然泪下，那是因为人生充满了太多的喜悲，大起大落，
                                跌宕起伏。过山车一样摇摆不定。而说到底，这世界平坦如砥，
                                波伏摇摆的，不过是我们成长过程中的感受。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="bigBlockRight">
                    <div class="rsMid3r1">
                        <div>
                            <i class="iconfont iconfont icon--zuozhengcailiao"></i>
                            材料
                        </div>
                    </div>
                    <div class="rsMid3r2"></div>
                </div>
           </div>
           <!-- 活动一-->

           <!-- 活动二 -->
           <div class=" bigBlock">
                <div class="bigBlockLeft" style="padding: 0;">
                    <div class="rsClassify">活动二:"未来教室"再次落地北大</div>
                    <div class="bigBlockLeftContent">
                        <!-- 可以进行循环 -->
                        <div class="activityIMgBlock">   
                            <div class="activityIMg">
                                <img src="@/assets/img/jj.jpg" alt="">
                            </div>
                            <div class="activityIMg">
                                <img src="@/assets/img/jj.jpg" alt="">
                            </div>
                            <div class="activityIMg">
                                <img src="@/assets/img/jj.jpg" alt="">
                            </div>
                            <div class="activityIMg">
                                <img src="@/assets/img/jj.jpg" alt="">
                            </div>
                        </div>
                        <div class="activityTextBlock">
                            <p>
                                人不可能是全能的，有得必有失，月有圆缺，人无完人。
                                人生就是这样，不可能会一帆风顺，到处都有坎坷，
                                弯路让我们走得更长，更苦，但是让我们懂得更多。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="bigBlockRight">
                    <div class="rsMid3r1">
                        <div>
                            <i class="iconfont iconfont icon--zuozhengcailiao"></i>
                            材料
                        </div>
                    </div>
                    <div class="rsMid3r2"></div>
                </div>
           </div>
           <!-- 活动二 -->

           <!-- 项目中期报告 -->
           <div class=" bigBlock">
                <div class="bigBlockLeft">
                    <div class="rsMidTit">项目中期报告</div>
                    <div class="bigBlockLeftContent">
                        <div class="bigBlockLeftTextBlock rsMid3LCon4"><p>你好</p></div>
                    </div>
                </div>
                <div class="bigBlockRight">
                    <div class="rsMid3r1">
                        <div>
                            <i class="iconfont iconfont icon--zuozhengcailiao"></i>
                            材料
                        </div>
                    </div>
                    <div class="rsMid3r2"></div>
                </div>
           </div>
           <!-- 项目中期报告 -->

           <div class="rsMid3rFoot">
                    <div class="rsMid3r1"><div>附件材料</div></div>
                    <div class="rsMid3rFoot2"></div>
            </div>
        </div>
      <!-- 内容展示区域结束 -->
    </div>
  </template>
  
  <script>
  
      export default {
        data() {
          return {

          }
        },
        methods:{
         
        }
      }
  </script>
  
  <style lang="less" scoped>

  .rs1apply{
        width: 100%;
        background: #dee7ee;

    .iconStyle{   //矢量图样式
        margin-right: 10px;color: #30b8ff;
        font-size: 27px;
    }
    .topIntro{//顶部导航栏样式
        width: 100%;
        height: 80px;
        background: #ffffff;
        border-radius: 10px;
        margin-top: 15px;
        display: flex;
        font-size: 18px;
        font-weight: bold;
        justify-content: space-around;
        align-items: center;
        i{
            font-size: 18px;
        }
    }
    .activityIMgBlock{
        width: 45%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 10px;
        justify-content: space-around;
        .activityIMg{
            width: 49%;
            height: 49%;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }

    .activityTextBlock{
        background: #f6f9ff;
        width: 480px;
        box-sizing: border-box;
        padding: 10px 10px;
        font-size: 16px;
    }
    p{
        text-indent: 2em;
    }

    .header{  //顶部区域
        width: 100%;
        height: 200px;
        background: #ffffff;
        display: flex;
        box-sizing: border-box;
        // justify-content: center;
        align-items: center;
        padding-left: 4%;
        position: relative;
        // background: red;
        .imgBlock{  //图片框
            width: 350px;
            height: 200px;
            box-sizing: border-box;
            padding: 20px 30px;
            flex-shrink: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .headerConcent{  //内容展示
            width: 450px;
            height: 200px;
            font-size: 14px;
            flex-shrink: 0;
            box-sizing: border-box;
            padding: 20px 0;
            .rsHead2Tit{ 
                margin-bottom: 10px;
                font-size: 16px;
            }
            .rsHead2Tits{
                display: flex;
                div{
                    margin-right: 30px;
                }
                margin-bottom: 30px;
            }
        }
    }
    .rsMidTit{  //变色标题框
        width: 150px;
        height: 45px;
        background-image: linear-gradient(to right, #56c4ff , #c47ff5);
        border-radius: 15px;
        text-align: center;
        line-height: 45px;
        color: #fff;
        display: flex;
        position: relative;
        font-size: 18px;
        box-sizing: border-box;
        padding-left: 25px;
    }
    .rsMidTit::before{//变色标题框黄点
            content: "";
            display: block;
            width: 11px;
            height:11px;
            position: absolute;
            left: 10px;
            top:calc(50% - 5px);
            background-color: yellow;
            border-radius: 50%;
    
        }

    .rsMid{ //详情展示的大盒子
        width: 85%;
        margin: auto;
        box-sizing: border-box;
        padding-bottom: 60px;
        .projectBasicContent{ //项目基本内容区域
            width: 100%;
            height: 220px;
            background: #ffffff;
            border-radius: 10px;
            margin-top: 15px;
            box-sizing: border-box;
            padding: 20px 15px; 
            .rsMidText{  //项目基本内容
                margin-top: 15px;
                font-size: 16px;
                p{
                    text-indent: 2em;
                }
            }
        }
        .bigBlock{  //详情模块的大盒子，使详情和佐证材料分开
            height: 400px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            .bigBlockLeft{    //详情模块的大盒子，使详情和佐证材料分开
                box-sizing: border-box;
                padding: 20px 30px;
                border-radius: 10px;
                overflow: hidden;
                width: 67%;
                background: #fff;
                .bigBlockLeftContent{ 
                    height: 300px;
                    display: flex;
                    margin-top: 10px;
                    .bigBlockLeftImg{ //图片框架
                        width: 400px;
                        height: 100%;
                        background: #fff;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .bigBlockLeftTextBlock{  //文字介绍
                        width: 500px;
                        height: 100%;
                        background: #f6f9ff;
                        box-sizing: border-box;
                        padding: 10px;
                    }
                    .rsMid3LCon4{
                        width: 100%;
                    }
                }
            }

            .rsClassify{   //活动一，活动二标题
                width: 100%;
                height: 50px;
                line-height: 50px;
                color: #fff;
                background: #17adff;
                text-align: left;
                box-sizing: border-box;
                padding-left: 15px;
                font-size: 18px;
            }
            .bigBlockRight{    //佐证材料区域
                width: 30%;
                height: 100%;
                background: #fff;
                border-radius: 10px;
                overflow: hidden;
                .rsMid3r1{
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    color: #fff;
                    background: #388fc0;
                    div{   //文字不靠边
                        margin-left: 15px;
                    }
                }
                .rsMid3r2{
                    width: 100%;
                    height: 310px;
                    background: #f6f9ff;
                }
            }
        }
    }
    .rsMid3rFoot{   //底部附件材料
        width: 100%;
        height: 350px;
        margin-top: 20px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        .rsMid3r1{
            width: 100%;
            height: 50px;
            line-height: 50px;
            color: #fff;
            background: #388fc0;
            text-align: left;
            box-sizing: border-box;
            padding-left: 15px;
            font-size: 18px;
        }
        .rsMid3rFoot2{
            width: 95%;
            margin-left: 30px;
            background: #f6f9ff;
            height: 250px;
        }
    }
}
    .backBtn{   //返回键
        position: absolute;
        right: 10%;
        top: 10%;
        box-sizing: border-box;
        padding: 20px 0 !important;
        font-size: 16px !important;
        cursor: pointer;

    }
  </style>