1440px

src/components/footer.vue

@@ -1,26 +1,31 @@
 <template>
     <div class="footer">
-        <div class="top">
-            <div>
-                <h4>联系我们</h4>
-                <span>CONTACT US</span>
-            </div>
-            <div class="tit1">
-                <div class="weixin">
-                    <img :src="img1" alt="微信二维码">
-                    <p>官方微信</p>
+        <div id="footContent">
+            <div class="top">
+                <div class="tit">
+                    <h4>联系我们</h4>
+                    <span>CONTACT US</span>
                 </div>
-                <div class="contact">
-                    <p class="text-muted">{{webSite}}</p>
-                    <p class="text-muted">电话：{{tel}}</p>
-                    <p class="text-muted">合作邮箱：{{email}}</p>
-                    <p class="text-muted">地址：{{address}}</p>
+                <div class="tit1">
+                    <div class="line">
+                        <div class="weixin">
+                            <img :src="img1" alt="微信二维码">
+                            <p>官方微信</p>
+                        </div>
+                        <div class="contact">
+                            <p class="text-muted">{{webSite}}</p>
+                            <p class="text-muted">电话：{{tel}}</p>
+                            <p class="text-muted">合作邮箱：{{email}}</p>
+                            <p class="text-muted">地址：{{address}}</p>
+                        </div>
+                    </div>
+                    
                 </div>
             </div>
-        </div>
-        <div class="bottom">
-            <h4>Copyright @ 芝麻开花科技有限公司  保留所有权利  京ICP备13040720号-8</h4>
-        </div>
+            <div class="bottom">
+                <h4>Copyright @ 芝麻开花科技有限公司  保留所有权利  京ICP备13040720号-8</h4>
+            </div>
+        </div>   
     </div>
 </template>
 
@@ -52,38 +57,54 @@ export default {
     height: 480px;
     background: #F6F6F6;
     color: aliceblue;
-    padding-top: 112px;
-    padding-left: 120px;
+}
+#footContent{
+    width: 1440px;
+    margin: 0 auto;
+}
+@media screen and (max-width:1440px){
+ #footContent{
+    width: 100%;
+}   
 }
 .footer .top{
-    color: black;
+    color: black;    
+}
+.footer .top .tit{
+    height: 158px;
+    padding-top: 60px;
+    padding-left: 8.3%;
 }
 .footer .top div h4{
     font-family: PingFangSC-Regular;
     font-size: 28px;
+    height: 40px;
     color: #4A4A4A;
     letter-spacing: 0;
+    margin-bottom: 6px;
 }
 .footer .top div span{
     font-family: PingFangSC-Regular;
     font-size: 18px;
     color: #999999;
     letter-spacing: 0.2px;
-    height: 22px;
-    width: 140px;
+    line-height: 25px;
 }
 .footer .top .tit1{
-    width: 95%;
     display: flex;
     flex-direction: row;
     height: 233px;
+    padding-left: 8.3%;
+}
+.footer .top .tit1 .line{
+    padding-top: 43px;
     border-top: 1px solid #E4E4E4;
     border-bottom: 1px solid #E4E4E4;
-    padding-top: 30px;
+    width: 84%;
 }
 .footer .top .tit1 .contact{
-    height: 140px;
-    padding-left:40px;
+    height: 118px;
+    padding-left:5%;
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -91,25 +112,28 @@ export default {
 .footer .top .tit1 div p{
     font-family: PingFangSC-Regular;
     font-size: 16px;
+    flex: 1;
     color: #999999;
     letter-spacing: 0;
-    height: 80px;
 }
 .footer .top .tit1 .weixin{
     float: left;
     width: 118px;
     display: flex;
     flex-direction: column;
+
 }
 .footer .top .tit1 .weixin img{
     width: 118px;
     height: 118px;
+    margin-bottom: 10px;
 }
 .footer .top .tit1 .weixin p{
     font-family: PingFangSC-Regular;
     font-size: 18px;
     color: #999999;
     letter-spacing: 0;
+    height: 22px;
     line-height: 22px;
     text-align: center;
 }
@@ -122,7 +146,8 @@ export default {
     color: black;
 }
 .footer .bottom{
-    height: 81px;
+    padding-left: 8.3%;
+    height: 88px;
     display: flex;
     align-items: center;
     color: black;
@@ -131,86 +156,4 @@ export default {
     font-size: 16px;
     color: #999999;
 }
-@media screen and (max-width:1100px){
-   .footer{
-    width: 100%;
-    height: 480px;
-    background: #F6F6F6;
-    color: aliceblue;
-    padding-top: 62px;
-    padding-left: 60px;
-}
-.footer .top{
-    color: black;
-}
-.footer .top div h4{
-    font-family: PingFangSC-Regular;
-    font-size: 32px;
-    color: #4A4A4A;
-    letter-spacing: 0;
-}
-.footer .top div span{
-    font-family: PingFangSC-Regular;
-    font-size: 20px;
-    color: #999999;
-    letter-spacing: 0.2px;
-    height: 22px;
-    width: 140px;
-}
-.footer .top .tit1{
-    width: 95%;
-    display: flex;
-    flex-direction: row;
-    height: 233px;
-    border-top: 1px solid #E4E4E4;
-    border-bottom: 1px solid #E4E4E4;
-    padding-top: 30px;
-}
-.footer .top .tit1 .contact{
-    height: 160px;
-    padding-left:40px;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-.footer .top .tit1 div p{
-    font-family: PingFangSC-Regular;
-    font-size: 26px;
-    color: #999999;
-    letter-spacing: 0;
-    height: 80px;
-}
-.footer .top .tit1 .weixin{
-    float: left;
-    width: 138px;
-    display: flex;
-    flex-direction: column;
-}
-.footer .top .tit1 .weixin img{
-    width: 138px!important;
-    height: 138px!important;
-}
-.footer .top .tit1 .weixin p{
-    font-family: PingFangSC-Regular;
-    font-size: 30px;
-    color: #999999;
-    letter-spacing: 0;
-    line-height: 22px;
-    text-align: center;
-    padding-top: 20px;
-}
-.footer .top h4{
-    color: black;
-}
-.footer .bottom{
-    height: 81px;
-    display: flex;
-    align-items: center;
-    color: black;
-}
-.footer .bottom h4{
-    font-size: 26px;
-    color: #999999;
-} 
-}
 </style>

src/views/Serve.vue

@@ -1,90 +1,86 @@
 <template>
-<div class="container-fuild">
-<div class="row">
 <div class="serve">
     <div class="imgs">
         <img src=".//images//u136.jpg" alt="服务">
         <p>做你创业路上的</p>
         <h4>技术合伙人</h4>
     </div>
-    <div class="first">
-         <div class="col-md-12 tit">
-            <h3>主营业务</h3>
-         </div>
-        <div class="work col-md-12">
-            <div class="work1">
-                <div class="img col-md-1">
-                    <img :src="workImg1">
-                </div>
-                <div class="title col-md-1"><p>{{title1}}</p> </div>
-                <div class="job col-md-10">
-                    <ul>
-                        <li v-for="(work1,index) in works1"  :key="index">{{work1}}</li>
-                    </ul>
-                </div>
+    <div id="content">
+        <div class="first">
+            <div class="tit">
+                <h3>主营业务</h3>
             </div>
-            <div class="work1">
-                <div class="img col-md-1">
-                    <img :src="workImg2">
-                </div>
-                <div class="title col-md-1"><p>{{title2}}</p> </div>
-                <div class="job col-md-10">
-                    <ul>
-                        <li v-for="(work2,index) in works2"  :key="index">{{work2}}</li>
-                    </ul>
+            <div class="work">
+                <div class="work1">
+                    <div class="img">
+                        <img :src="workImg1">
+                    </div>
+                    <div class="title"><p>{{title1}}</p> </div>
+                    <div class="job">
+                        <ul>
+                            <li v-for="(work1,index) in works1"  :key="index">{{work1}}</li>
+                        </ul>
+                    </div>
                 </div>
-            </div>
-            <div class="work1">
-                <div class="img col-md-1">
-                    <img :src="workImg3">
+                <div class="work1">
+                    <div class="img">
+                        <img :src="workImg2">
+                    </div>
+                    <div class="title"><p>{{title2}}</p></div>
+                    <div class="job">
+                        <ul>
+                            <li v-for="(work2,index) in works2"  :key="index">{{work2}}</li>
+                        </ul>
+                    </div>
                 </div>
-                <div class="title col-md-1"><p>{{title3}}</p> </div>
-                <div class="job col-md-10">
-                    <ul>
-                        <li v-for="(work3,index) in works3"  :key="index">{{work3}}</li>
-                    </ul>
+                <div class="work1">
+                    <div class="img">
+                        <img :src="workImg3">
+                    </div>
+                    <div class="title"><p>{{title3}}</p> </div>
+                    <div class="job">
+                        <ul>
+                            <li v-for="(work3,index) in works3"  :key="index">{{work3}}</li>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-    <div class="second">
-        <div class="col-md-12 tit">
-            <h3>开发流程</h3>
-         </div>
-         <div class="process col-md-12">
-             <div class="boxs" v-for="(process,index) in process" :key="index" :style="{color:process.color}">
-                <div class="glyphicon" :class="process.class"></div>
-                <div class="box">
-                    <div class="circle">
+        <div class="second">
+            <div class="tit">
+                <h3>开发流程</h3>
+            </div>
+            <div class="process">
+                <div class="boxs" v-for="(process,index) in process" :key="index" :style="{color:process.color}">
+                    <div class="glyphicon" :class="process.class"></div>
+                    <div class="box">
+                        <div class="circle">
                         <div class="size">{{process.title}}</div>
                         <div class="index">{{index+1}}</div>
                     </div>
                     <div class="title">{{process.subhead}}</div>
                 </div>
-             </div>
-         </div>
-    </div>
-    <div class="third">
-        <div class="col-md-12 tit">
-            <h3>产品解决方案</h3>
+            </div>
         </div>
-        <div class="methods">
-            <ul >
-                <li v-for="(method,index) in methods" :key="index" class="col-md-4">
-                    <img :src="method.img">
-                    <div >
-                        <p v-for="(content,index) in method.contents" :key="index"><span>{{content.title}}——</span>{{content.par}}</p>
-                    </div>
-                </li>
-            </ul>
+        <div class="third">
+            <div class="tit">
+                <h3>产品解决方案</h3>
+            </div>
+            <div class="methods">
+                <ul >
+                    <li v-for="(method,index) in methods" :key="index">
+                        <img :src="method.img">
+                        <div >
+                            <p v-for="(content,index) in method.contents" :key="index"><span>{{content.title}}——</span>{{content.par}}</p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
-    <home-footer class="col-md-12 col-xs-12">
-    </home-footer>
+    </div>
+    <home-footer></home-footer>
  </div>
-</div>
-</div>
-
 </template>
 
 <script>
@@ -220,6 +216,12 @@ export default {
     font-weight: 600;
 }
 /********************imgs***************************/
+#content{
+    width: 1440px;
+    margin: 0 auto;
+    padding-left: 1%;
+    padding-right: 1%;
+}
 /********************主营业务***************************/
 .serve .tit{
     border-left: 3px solid red;
@@ -231,19 +233,13 @@ export default {
 .serve .tit h3{
     font-size: 28px
 }
-.serve .first{
-    padding-left: 5%;
-}
 .serve .first .work .work1{
     border-top: 1px solid rgb(212, 212, 212);
     height: 100px;
     line-height: 100px;
 }
-.serve .first .work .work2{
-    border-bottom: 1px solid rgb(212, 212, 212);
-}
 .serve .first .work .work1 .img img{
-    width: 40%;
+    width: 60px;
 }
 .serve .first .work .work1 .title{
     color:#0aa99a;
@@ -251,18 +247,29 @@ export default {
 }
 .serve .first .work .job ul li{
     float: left;
-    /* text-align: center; */
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    flex: 1;
     font-size: 20px;
     width: 15%;
 }
+.work1{
+    display: flex;
+    flex-direction: row;
+}
+.work1 .img{
+    flex: 1
+}
+.work1 .title{
+    flex: 1
+}
+.work1 .job{
+    flex: 10
+}
 /* 主营业务的手机端 */
 @media screen and (max-width:1026px){
+    #content{
+        width: 800px!important;
+    }
    .serve .first .work .work1 .title{
-       font-size: 26px;
+       font-size: 20px;
        float: left;
     } 
     .serve .first .work .work1 .img img{
@@ -282,22 +289,18 @@ export default {
     .serve .first .work .job ul li{
     display: flex;
     flex: 1;
-    font-size: 20px;
+    font-size: 17px;
 }
 }
 .serve .first .work .job ul li:hover{
     cursor: pointer;
 }
 /*********************second开发流程*************************/
-.serve .second{
-    padding-left: 5%;
-}
 .serve .second .process{
     display: flex;
     flex-direction: row;
     flex:1;
-    padding-left: 2%;
-    padding-right: 4%;
+    padding: 2% 4% 2% 2%;
     background: #dddddd;
 }
 .serve .second .process .boxs{
@@ -309,235 +312,76 @@ export default {
 }
 .serve .second .process .boxs .glyphicon{
     position: absolute;
-    top:5.5vw;
-    left:-3vw;
+    top:85px;
+    left:-30px;
 }
 .serve .second .process .boxs .box .circle{
-    width: 10vw;
-    height: 10vw;
+    width: 150px;
+    height: 150px;
     border:1px dashed;
     border-radius: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 30px;
+    font-size: 26px;
     position: relative;
 }
 
 /* 圆圈里的字体大小     */
-@media screen and (max-width:1600px){
-    .serve .second .process .boxs .box .circle{
-        font-size: 24px!important;
-    }
-}
-@media screen and (max-width:1230px){
-    .serve .second .process .boxs .box .circle{
-        font-size: 20px!important;
-    }
-}
-@media screen and (max-width:1075px){
-    .serve .second .process .boxs .box .circle{
-        font-size: 16px!important;
-    }
-}
 .serve .second .process .boxs .box .circle .index{
     width: 25px;
     height: 25px;
     background:#dddddd;
     position: absolute;
-    bottom: 0px;
+    bottom: -5px;
     margin-bottom: -5%;
     font-size: 20px;
 }
-@media screen and (max-width:1440px){
-  .serve .second .process .boxs .box .circle .index{
-    margin-bottom: -10%!important;
-  }  
-}
 .serve .second .process .boxs .box .title{
-    width: 10vw;
     font-size: 20px;
-    margin-top: 10px;
-}
-/* 圆圈下面的字体的大小 */
-@media screen and (max-width:1440px){
-    .serve .second .process .boxs .box .title{
-    font-size: 18px!important;
-    }
-}
-@media screen and (max-width:1110px){
-    .serve .second .process .boxs .box .title{
-    font-size: 14px!important;
-    }
-}
-@media screen and (max-width:900px){
-.serve .second .process .boxs .box .circle{
-    width: 18vw;
-    height: 18vw;
-    border:1px dashed;
-    border-radius: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 30px!important;
-    position: relative;
-}
-.serve .second .process .boxs .glyphicon{
-    position: absolute;
-    top:9.5vw;
-    left:-1vw;
-}
-.serve .second .process .boxs .box .title{
-    width: 18vw!important;
-    font-size: 20px!important;
-    margin-top: 20px!important;
+    margin-top: 20px;
+    margin-left: -20px;
 }
-}
-@media screen and (max-width:700px){
-    .serve .second .process .boxs .box .circle{
-    width: 18vw;
-    height: 18vw;
-    border:1px dashed;
-    border-radius: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px!important;
-    position: relative;
-}
-}
-@media screen and (max-width:500px){
-    .serve .second .process .boxs .box .circle{
-    width: 30vw;
-    height: 30vw;
+@media screen and (max-width:1026px){
+  .serve .second .process .boxs .box .circle .index{
+    margin-bottom: -8%;
+    font-size: 18px;
+  }
+  .serve .second .process .boxs .box .circle{
+    width: 100px;
+    height: 100px;
     border:1px dashed;
     border-radius: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 20px!important;
+    font-size: 18px;
     position: relative;
+    } 
+   .serve .second .process .boxs .glyphicon{
+    top:60px;
+    left:-12px;
+    font-size: 10px;
+    } 
+    .serve .second .process .boxs .box .title{
+        font-size: 14px;
     }
-.serve .second .process .boxs .box .circle .index{
-    width: 40px;
-    height: 40px;
-    background:#dddddd;
-    position: absolute;
-    margin-bottom: -16%!important;
-    font-size: 30px;
-    line-height: 40px;
-}
-.serve .second .process .boxs .glyphicon{
-    position: absolute;
-    top:18vw;
-    left:-5vw;
-    font-size: 20px;
 }
-.serve .second .process .boxs .box .title{
-    width: 30vw!important;
-    font-size: 20px!important;
-    margin-top: 20px!important;
-}
-}
-/* @media screen and (max-width:500px){
-    .serve .second .process{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    flex:1;
-    padding-left: 2%;
-    padding-right: 4%;
-    background: #dddddd;
-}
-.serve .second .process .boxs{
-    display: flex;
-    flex-direction: row;
-    width: 30%;
-    padding: 19px; 
-    position: relative;
-}
-    .serve .second .process .boxs .box .circle{
-    width: 50vw;
-    height: 50vw;
-    border:1px dashed;
-    border-radius: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 40px!important;
-    position: relative;.serve .second .process .boxs .box .circle{
-    width: 50vw;
-    height: 50vw;
-    border:1px dashed;
-    border-radius: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 40px!important;
-    position: relative;
-}
-.serve .second .process .boxs .box .circle .index{
-    width: 40px;
-    height: 40px;
-    background:#dddddd;
-    position: absolute;
-    margin-bottom: -6%!important;
-    font-size: 40px;
-    line-height: 40px;
-}
-.serve .second .process .boxs .glyphicon{
-    position: absolute;
-    top:25vw;
-    left:-5vw;
-    font-size: 20px;
-}
-.serve .second .process .boxs .box .title{
-    width: 50vw!important;
-    font-size: 30px!important;
-    margin-top: 20px!important;
-}
-} */
 /*********************second开发流程*************************/
 /*********************third产品解决方案*************************/
-@media screen and (max-width:1026px){
-    .third ul li div{
-    padding: 5%;
-    border: 1px solid black;
-    /* min-height:320px; */
-    max-height: 600px;
-    overflow: auto;
-    /* height: 400px!important; */
-    height: auto!important;
-    margin-bottom: 30px;
-    }
-    .third img{
-    width: 100%;
-    max-height: 300px;
-    height: auto!important;
-    }
-    .third p{
-    font-size: 32px!important;
-    line-height: 70px!important;
-    padding-top: 10px;
-    margin-bottom: 20px;
-    text-align: left;
-}
-.third span{
-    font-weight: 600;
-    font-size: 34px!important;
-}
-}
-.third{
-    padding-left: 5%;
+.third .methods ul{
+    display: flex;
+    flex-direction: row;
 }
 .third ul li{
-    padding-right: 4%;
+    padding: 0 2%;
+    flex: 1
 }
 .third ul li div{
     padding: 5%;
     border: 1px solid black;
-    /* min-height:320px; */
-    height: 300px;
+    height: 320px;
+    overflow: auto;
 }
 .third img{
     width: 100%;
@@ -555,17 +399,17 @@ export default {
     font-weight: 600;
     font-size: 22px;
 }
-@media screen and (max-width:700px){
-.third p{
-    font-size: 38px!important;
-    line-height: 80px!important;
-}
-.third span{
-    font-size: 40px!important;    
-}
-h3{
-    font-size: 42px!important;
+@media screen and (max-width:1026px){
+.third ul li{
+    margin: 20px auto;
+    width: 600px;
 }
+.third ul li div{
+    padding: 5%;
+    border: 1px solid black;
+    height: 290px;
+    overflow: auto;
+}   
 }
 /*********************third产品解决方案*************************/
 </style>

src/views/Teach.vue

@@ -5,92 +5,98 @@
         <p>人才</p>
         <h4>企业成长的不竭动力</h4>
     </div>
-    <div class="title col-md-12">
-        <p>人才培养</p>
-    </div>
-    <div id="right" class="col-md-12">
-        <!-- 当吸顶时，出现，占位，将content挤到原来的位置 -->
-        <div class="middle" v-if="!flag"></div>
-        <div class='middle' :class="navBarFixed == true ? 'navBarWrap' :''">
-            <img src=".//images/line.png" alt="|">
-            <ul>
-                <li><a href="#padding" style="text-decoration:none">培训详情简介</a> </li>
-                <li><a href="#padding2" style="text-decoration:none">考核&薪资</a></li>
-                <li><a href="#padding3" style="text-decoration:none">优秀学员寄语</a></li>
-                <li><a href="#padding4" style="text-decoration:none">实习生优秀项目展示</a> </li>
-                <li><a href="#padding5" style="text-decoration:none">实习生毕业去向</a></li>
-            </ul>
+    <div id="content">
+        <div class="title">
+            <p>人才培养</p>
         </div>
-    <div class="content">
-        <div class="padding" id="padding">
-            <h3>芝麻开花实习生培训介绍</h3>
-            <div v-for="(introduce,index) in introduce" :key="index">
-                <h4>{{index+1}}、{{introduce.title}}</h4>
-                <p>{{introduce.par}}</p>
-            </div>
-            <h3>实习生招收岗位&招收对象</h3>
-            <div class="job">
-                <div v-for="(job,index) in jobs" :key="index">
-                    <h4>{{index+1}} 、{{job.title}}</h4>
-                    <ul>
-                        <li v-for="(par,index) in job.par" :key="index"><span class="glyphicon glyphicon-play-circle"></span> {{par}}</li>
-                    </ul>
-                </div>
+        <div id="right">
+            <!-- 当吸顶时，出现，占位，将content挤到原来的位置 -->
+            <div class="middleHidden" v-show="!flag"></div>
+            <div class='middle' :class="navBarFixed == true ? 'navBarWrap' :''">
+                <img src=".//images/line.png" alt="|">
+                <ul>
+                    <li><a href="#padding" style="text-decoration:none">培训详情简介</a> </li>
+                    <li><a href="#padding2" style="text-decoration:none">考核&薪资</a></li>
+                    <li><a href="#padding3" style="text-decoration:none">优秀学员寄语</a></li>
+                    <li><a href="#padding4" style="text-decoration:none">实习生优秀项目展示</a> </li>
+                    <li><a href="#padding5" style="text-decoration:none">实习生毕业去向</a></li>
+                </ul>
             </div>
-        </div>
-        <div class="padding2" id="padding2">
-            <h3>薪资待遇</h3>
-            <div class="picture">
-                <div v-for="(wages,index) in wages" :key="index">
-                    <div class="img"><img src="./images/入门待遇.png" alt="待遇图片"><p>{{wages.title}}</p></div>
-                    <div class="money"><p>{{wages.money}}</p></div>
+            <div class="content">
+                <div class="padding" id="padding">
+                    <h3>芝麻开花实习生培训介绍</h3>
+                    <div v-for="(introduce,index) in introduce" :key="index">
+                        <h4>{{index+1}}、{{introduce.title}}</h4>
+                        <p>{{introduce.par}}</p>
+                    </div>
+                    <h3>实习生招收岗位&招收对象</h3>
+                    <div class="job">
+                        <div v-for="(job,index) in jobs" :key="index">
+                            <h4>{{index+1}} 、{{job.title}}</h4>
+                            <ul>
+                                <li v-for="(par,index) in job.par" :key="index"><span class="glyphicon glyphicon-play-circle"></span> {{par}}</li>
+                            </ul>
+                        </div>
+                    </div>
                 </div>
-            </div>
-            <h3>考核标准</h3>
-            <div>
-                <div class='evaluate' v-for="(standard,index) in standard" :key="index">
-                    <p>{{standard.title}}</p>
-                    <ul>
-                        <li v-for="(par,index) in standard.par" :key="index">
-                            <span v-if="standard.par.length>1">({{index+1}})</span>{{par.tit}}
+                <div class="padding2" id="padding2">
+                    <h3>薪资待遇</h3>
+                    <div class="picture">
+                        <div v-for="(wages,index) in wages" :key="index">
+                            <div class="img"><img src="./images/入门待遇.png" alt="待遇图片"><p>{{wages.title}}</p></div>
+                            <div class="money"><p>{{wages.money}}</p></div>
+                        </div>
+                    </div>
+                    <h3>考核标准</h3>
+                    <div>
+                        <div class='evaluate' v-for="(standard,index) in standard" :key="index">
+                            <p>{{standard.title}}</p>
                             <ul>
-                                <li v-for="(model,index) in par.model" :key="index">{{model}}</li>
+                                <li v-for="(par,index) in standard.par" :key="index">
+                                    <span v-if="standard.par.length>1">({{index+1}})</span>{{par.tit}}
+                                    <ul>
+                                        <li v-for="(model,index) in par.model" :key="index">{{model}}</li>
+                                    </ul>
+                                </li>
                             </ul>
-                        </li>
-                    </ul>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
-        <div class="padding3" id="padding3">
-            <h3>优秀学员寄语</h3>
-            <div class="box">
-                <ul>
-                    <li v-for="(obj,index) in wishes" :key="index">
-                        <h5>{{obj.name}}</h5><span class="line"></span>
+                <div class="padding3" id="padding3">
+                    <h3>优秀学员寄语</h3>
+                    <div class="box">
+                        <ul>
+                            <li v-for="(obj,index) in wishes" :key="index">
+                                <h5>{{obj.name}}</h5><span class="line"></span>
+                                <div>
+                                    <p>{{obj.intro}}</p>
+                                    <p><span class="bord">学生寄语：</span>{{obj.wish}}</p>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="padding4" id="padding4">
+                    <h3>实习生优秀项目展示</h3>
+                    <div class="show">
                         <div>
-                            <p>{{obj.intro}}</p>
-                            <p><span class="bord">学生寄语：</span>{{obj.wish}}</p>
+                            <img :src="img" alt="作品展示" v-for="(img,index) in showImg" :key="index">
                         </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-        <div class="padding4" id="padding4">
-            <h3>实习生优秀项目展示</h3>
-            <div class="show">
-                <div>
-                    <img :src="img" alt="作品展示" v-for="(img,index) in showImg" :key="index">
+                    </div>
+                </div>
+                <div class="padding5" id="padding5">
+                    <h3>优秀学员毕业去向</h3>
+                    <ul>
+                        <li v-for="(goToArr,index) in goToArrs" :key="index"><img :src="goToArr" alt="优秀学员去向"></li>
+                    </ul>
                 </div>
             </div>
         </div>
-        <div class="padding5" id="padding5">
-            <h3>优秀学员毕业去向</h3>
-            <ul>
-                <li v-for="(goToArr,index) in goToArrs" :key="index"><img :src="goToArr" alt="优秀学员去向"></li>
-            </ul>
-        </div>
-    </div><home-footer></home-footer> </div>
+
     </div>
+    <home-footer id="foot"></home-footer> 
+    
+</div>   
 </template>
 
 <script>
@@ -195,19 +201,23 @@ export default {
         "showImg":[image1,image2,image3],
       "goToArrs":[img1,img2,img3,img4],
       navBarFixed :"false",
-      flag:true
+      navBar:false,
+      flag:true,
     }  
   },
    mounted () {
         // 事件监听滚动条
       window.addEventListener('scroll', this.watchScroll)
+      
   },
   methods: {
     watchScroll () {
+        let foot=document.getElementById("foot")
+        let scrollHidden=document.body.scrollHeight-window.pageYOffset -foot.offsetHeight
           var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
           //  当滚动超过400时，实现吸顶效果
-          if (scrollTop > 580) {
-            this.navBarFixed = true
+          if (scrollTop > 580 && scrollHidden>400) {
+            this.navBarFixed = true;
           } else {
             this.navBarFixed = false
           }
@@ -234,11 +244,19 @@ export default {
 #right .middle{
     flex: 1;
 }
+
+#content{
+    width: 1440px;
+    margin: 0 auto;
+}
 .content{
-    flex:3
+    flex:3;
+}
+.middleHidden{
+    flex: 1;
 }
 /********************imgs***************************/
-@media screen and (max-width:1240px){
+/* @media screen and (max-width:1240px){
     .education .imgs img{
     width: 100%;
     max-height: 400px;
@@ -333,6 +351,17 @@ export default {
         padding-top: 10px!important;
         line-height: 80px!important
     }
+} */
+@media screen and (max-width:1026px){
+    #content{
+        width: 800px!important;
+    }
+   #right .middle{
+        display: none!important;
+    } 
+   #right .middleHidden{
+        display: none!important;
+    } 
 }
 .education .imgs{
     width: 100%;
@@ -366,7 +395,7 @@ export default {
     width: 100%;
     font-family: 'Arial Normal', 'Arial';
     margin-top: 30px;
-    padding-left: 50px;
+    padding-left: 4%;
     font-size: 22px;
     border-bottom: 1px solid #333;
 }
@@ -410,7 +439,7 @@ export default {
 #right .content .padding{
     border:1px solid #e2dfdf;
     margin-top:50px;
-    padding: 0px 0px 20px 20px;
+    padding: 0px 0px 2% 2%;
 }
 #right .content .padding h3{
     width: 340px;
@@ -429,7 +458,7 @@ export default {
     font-size: 26px;
     color: #000000;
     text-indent: 2em;
-    padding: 15px 0px 15px 15px;
+    padding: 1.5%;
 }
 #right .content .padding p{
     font-size: 22px;
@@ -540,7 +569,6 @@ export default {
   margin: 30px 0px 20px 35px;
 }
 #right .content .padding3 .box{
-    border:1px solid black;
     padding: 3%;
     padding-right: 0;
 }
@@ -649,6 +677,6 @@ export default {
 .navBarWrap {
     position:fixed;
     top:-40px;
-    z-index:-1;
+    z-index: 999;
 }
 </style>

website

@@ -1 +0,0 @@
-Subproject commit 8930495fe1b3d5debbb03a4ade4176a7ec9413d2