Merge branch 'master' of http://121.40.40.223:3000/zizhong.wang/SesameDevelopment

src/components/footer.vue

@@ -78,6 +78,7 @@ export default {
     font-family: PingFangSC-Regular;
     font-size: 28px;
     height: 40px;
+    line-height: 40px;
     color: #4A4A4A;
     letter-spacing: 0;
     margin-bottom: 6px;
@@ -155,4 +156,77 @@ export default {
     font-size: 16px;
     color: #999999;
 }
+@media screen and (max-width:900px){
+    .footer .top div h4{
+        font-size: 24px;
+    }
+    .footer .top div span{
+    font-size: 15px;
+    }
+    .footer .top .tit1 div p{
+    font-size: 15px;
+    }
+    .footer .top .tit1 .weixin p{
+    font-size: 16px;
+    }
+    .footer .bottom h4{
+        font-size: 15px;
+        text-align: center;
+    }
+}
+@media screen and (max-width:500px){
+    .footer{
+        height: 490px;
+    }
+    .footer .top div h4{
+        font-size: 20px;
+    }
+    .footer .top div span{
+        font-size: 12px;
+    }
+.line{
+    display: flex;
+    flex-direction: column;
+}
+.line .weixin{
+    padding: 0;
+    margin: 0 auto;
+}
+.footer .top .tit{
+    height: 108px;
+    padding-top: 20px;
+}
+.footer .top .tit1{
+    height: 303px;
+    padding-left: 8.3%;
+}
+.footer .top .tit1 .weixin img{
+    width: 90px;
+    height: 90px;
+    margin-bottom: 2px;
+}
+.footer .top .tit1 .weixin p{
+    font-size: 14px;
+    color: #999999;
+    letter-spacing: 4px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    width: 90px;
+}
+.footer .contact{
+    padding: 10px 0px ;
+}
+.footer .bottom{
+    height: 78px;
+    padding: 0px 20px
+}
+.footer .bottom h4{
+    font-size: 13px;
+    color: #999999;
+}
+.footer .top .tit1 div p{
+    font-size: 13px;
+}
+}
 </style>

src/views/Home.vue

@@ -178,7 +178,7 @@
   #box1 ul {
     /* display: none; */
     margin: 0px !important;
-    overflow: scroll;
+    overflow: auto;
     height: 50px !important;
     font-size: 12px;
   }
@@ -225,6 +225,8 @@
   #box2-Dn p {
     line-height: 20px !important;
     font-size: 14px !important;
+    margin-bottom: 10px !important;
+    margin-top: 10px !important;
   }
   .saletitle {
     font-size: 19px !important;
@@ -267,12 +269,13 @@
     margin-bottom: 20px !important;
   }
   .box3-Right-li ul li {
-    overflow: hidden;
-    text-overflow: ellipsis;
+    /* overflow: hidden; */
+    /* text-overflow: ellipsis; */
     white-space: nowrap;
     width: 100px;
     font-size: 13px !important;
     margin-top: 0px !important;
+    overflow: auto;
   }
   #blurr .blurrtext {
     width: 138px !important;

src/views/Serve.vue

@@ -55,10 +55,11 @@
                     <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 class="size">{{process.title}}</div>
+                            <div class="index">{{index+1}}</div>
+                        </div>
+                        <div class="title">{{process.subhead}}</div>
                     </div>
-                    <div class="title">{{process.subhead}}</div>
                 </div>
             </div>
         </div>
@@ -77,7 +78,7 @@
                 </ul>
             </div>
         </div>
-    </div>
+    
     </div>
     <home-footer></home-footer>
  </div>
@@ -181,14 +182,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-/* @media only screen and (max-width: 479px) {
-  .serve {
-    margin-top: 40px !important;
-  }
-}
-.serve {
-  margin-top: 80px !important;
-} */
 /************************************整体样式********************************************/
 *{
     margin: 0px;
@@ -239,7 +232,7 @@ export default {
     padding-left: 3%;
 }
 .serve .tit h3{
-    font-size: 28px
+    font-size: 28px;
 }
 .serve .first .work .work1{
     border-top: 1px solid rgb(212, 212, 212);
@@ -272,15 +265,35 @@ export default {
     flex: 10
 }
 /* 主营业务的手机端 */
+@media screen and (max-width: 1440px) {
+     #content{
+        width: 100%;
+    }
+}
+@media screen and (max-width: 1200px) {
+ .serve .second .process .boxs .glyphicon{
+    top:60px;
+    left:-19px!important;
+    }   
+}
+@media screen and (max-width: 1100px) {
+ .serve .second .process .boxs .glyphicon{
+    top:60px;
+    left:-10px!important;
+    }   
+}
 @media screen and (max-width:1026px){
     #content{
-        width: 800px!important;
+        width: 100%!important;
+    }
+    .serve .tit h3{
+    font-size: 26px;
     }
    .serve .first .work .work1 .title{
        font-size: 20px;
        float: left;
     } 
-    .serve .first .work .work1 .img img{
+    .serve .first .work .work1 .img{
         display: none;
     } 
     .serve .first .work .work1{
@@ -300,6 +313,58 @@ export default {
     font-size: 17px;
 }
 }
+@media screen and (max-width:800px){
+    .serve .tit h3{
+    font-size: 22px;
+}
+    .serve .first .work .work1 .title{
+       font-size: 17px;
+    } 
+    .serve .first .work .work1{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    .serve .first .work .work1 .title{
+        flex:2;
+    }
+    .serve .first .work .work1 .job{
+        flex:10
+    }
+    .serve .first .work .job ul li{
+    display: flex;
+    flex: 1;
+    font-size: 13px;
+    }
+}
+@media screen and (max-width:600px){
+    .serve .first .work .work1{
+        height: 70px;
+        line-height: 70px;
+    }
+    .serve .tit h3{
+        font-size: 20px;
+    }
+    .serve .first .work .work1 .title{
+       font-size: 14px;
+    } 
+    .serve .first .work .work1{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    .serve .first .work .work1 .title{
+        flex:1;
+    }
+    .serve .first .work .work1 .job{
+        flex:6;
+    }
+    .serve .first .work .job ul li{
+    display: flex;
+    flex: 1;
+    font-size: 12px;
+    }
+}
 .serve .first .work .job ul li:hover{
     cursor: pointer;
 }
@@ -355,6 +420,19 @@ export default {
     margin-bottom: -8%;
     font-size: 18px;
   }
+  .serve .imgs p{
+    font-size: 36px;
+    left: 25%;
+    top: 35%;
+    font-weight: 600;   
+    }
+    .serve .imgs h4{
+    font-size: 40px;
+    color: white; 
+    left: 55%;
+    top: 55%;
+    font-weight: 600;
+    }
   .serve .second .process .boxs .box .circle{
     width: 100px;
     height: 100px;
@@ -375,6 +453,62 @@ export default {
         font-size: 14px;
     }
 }
+@media screen and (max-width:800px){
+  .serve .second .process .boxs .box .circle .index{
+    margin-bottom: -8%;
+    font-size: 16px;
+  }
+  .serve .imgs p{
+    font-size: 25px;   
+    }
+    .serve .imgs h4{
+    font-size: 30px;
+
+    }
+  .serve .second .process .boxs .box .circle{
+    width: 70px;
+    height: 70px;
+    font-size: 13px;
+    position: relative;
+    } 
+   .serve .second .process .boxs .glyphicon{
+    top:50px;
+    left:-8px;
+    font-size: 10px;
+    } 
+    .serve .second .process .boxs .box .title{
+        font-size: 12px;
+    }
+}
+@media screen and (max-width:600px){
+    .serve .second .process{
+        width: 100%;
+    }
+  .serve .second .process .boxs .box .circle .index{
+    margin-bottom: -11%;
+    font-size: 14px;
+  }
+  .serve .imgs p{
+    font-size: 22px;   
+    }
+    .serve .imgs h4{
+    font-size: 26px;
+
+    }
+  .serve .second .process .boxs .box .circle{
+    width: 58px;
+    height: 58px;
+    font-size: 10px;
+    } 
+   .serve .second .process .boxs .glyphicon{
+    top:45px;
+    left:-6px;
+    font-size: 10px;
+    } 
+    .serve .second .process .boxs .box .title{
+        font-size: 10px;
+    }
+}
 /*********************second开发流程*************************/
 /*********************third产品解决方案*************************/
 .third .methods ul{
@@ -389,11 +523,9 @@ export default {
     padding: 5%;
     border: 1px solid black;
     height: 320px;
-    overflow: auto;
 }
 .third img{
     width: 100%;
-    max-height: 300px;
     height: 200px;
 }
 .third p{
@@ -407,17 +539,200 @@ export default {
     font-weight: 600;
     font-size: 22px;
 }
+@media screen and (max-width:1440px){
+.third ul li div{
+    padding: 5%;
+    border: 1px solid black;
+    height: 330px!important;
+} 
+}    
+@media screen and (max-width:1206px){
+.third ul li div{
+    padding: 5%;
+    border: 1px solid black;
+    height: 380px!important;
+}     
+}
 @media screen and (max-width:1026px){
-.third ul li{
-    margin: 20px auto;
-    width: 600px;
+.third ul li div{
+    border: 1px solid black;
+    height: 350px!important;
+} 
+.third img{
+    width: 100%;
+    height: 150px;
+}  
+.third p{
+    font-size: 16px;
+    line-height: 30px;
+    padding-top: 10px;
+    margin-bottom: 30px;
+    text-align: left;
+}
+.third span{
+    font-weight: 600;
+    font-size: 20px;
+}
 }
+@media screen and (max-width:800px){
+    .third .methods ul{
+        display: flex;
+        flex-direction: column;
+    }
+    .third ul li{
+        width: 60%;
+        margin: 0 auto;
+        margin-bottom: 25px;
+    }
+    .third ul li:last-child{
+        margin-bottom: 0px;
+    }
 .third ul li div{
     padding: 5%;
-    border: 1px solid black;
-    height: 290px;
-    overflow: auto;
-}   
+    height: 240px!important;
+} 
+.third img{
+    width: 100%;
+    height: 150px;
+}  
+.third p{
+    font-size: 16px;
+    line-height: 30px;
+    padding-top: 10px;
+    margin-bottom: 30px;
+    text-align: left;
+}
+.third span{
+    font-weight: 600;
+    font-size: 20px;
+}
+}
+@media screen and (max-width:600px){
+.third ul li div{
+    padding: 5%;
+    height: 250px;
+} 
+.third img{
+    width: 100%;
+    height: 150px;
+}  
+.third p{
+    font-size: 15px;
+    line-height: 30px;
+    padding-top: 10px;
+    margin-bottom: 30px;
+    text-align: left;
+}
+.third span{
+    font-weight: 600;
+    font-size: 18px;
+}
+}
+@media screen and (max-width: 500px) {
+    #content{
+        width: 100%;
+    }
+    .serve .imgs p{
+        font-size: 18px;
+        left: 20%;
+        top: 25%;
+    }
+    .serve .imgs h4{
+        font-size: 20px;
+        left: 50%;
+        top: 55%;
+    }
+    .serve .first{
+        width: 100%;
+    }
+    .serve .first .work .work1{
+        padding-left: 10px;
+        line-height: 20px;
+    }
+    .serve .tit h3{
+        font-size: 20px;
+    }
+    .serve .first .work .work1 .title{
+       font-size: 13px;
+       display: flex;
+       align-items: center;
+       flex:1;
+    } 
+    .serve .first .work .work1{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    .serve .first .work .work1 .job{
+        display: flex;
+        flex:4;
+        align-items: center;
+    }
+    .serve .first .work .job ul li{
+        display: flex;
+        width: 33%;
+        font-size: 12px;
+        padding-left: 10px;
+    }
+    .serve .first .work .work1:nth-child(2) ul li{
+        width: 50%;
+    }
+    .serve .second{
+        width: 100%;
+        overflow: hidden;
+        margin-top: -15px;
+    }
+.serve .second .process{
+    display: flex;
+    flex-direction: row;
+    flex:1;
+    flex-wrap: wrap;
+    padding: 3% 5%;
+    background: #dddddd;
+    margin-top: -20px;
+}
+.serve .second .process .boxs{
+    width: 50%;
+    padding: 19px; 
+}
+.serve .second .process .boxs .glyphicon{
+    position: absolute;
+    top:52px;
+    left:-6px!important;
+    display: none;
+}
+.serve .second .process .boxs .box .circle{
+    width: 80px;
+    height: 80px;
+    font-size: 14px;
+}
+.serve .second .process .boxs .box .circle .index{
+    width: 20px;
+    height: 20px;
+    background:#dddddd;
+    position: absolute;
+    bottom: -6px;
+    margin-bottom: -5%;
+    font-size: 16px;
+}
+.serve .second .process .boxs .box .title{
+    font-size: 14px;
+    margin-top: 20px;
+    margin-left: -20px;
+}
+
+.third{
+    width: 100%;
+    
+} 
+.third ul li{
+    margin: 0 auto;
+    width: 80%;
+    margin-bottom: 20px;
+}
+.third ul li div{
+    height: auto!important;
+}
 }
 /*********************third产品解决方案*************************/
 </style>

src/views/Teach.vue

@@ -255,115 +255,9 @@ export default {
     flex: 1;
 }
 /********************imgs***************************/
-/* @media screen and (max-width:1240px){
-    .education .imgs img{
-    width: 100%;
-    max-height: 400px;
-    }
-    .education .imgs p{
-    font-size: 50px!important;
-    color:rgb(97, 137, 224);
-    position: absolute;
-    left: 52%;
-    top: 35%;
-    font-weight: 600;   
-    }
-    .education .imgs h4{
-    font-size: 30px!important;
-    color:rgb(114, 76, 76); 
-    position: absolute;
-    left: 58%;
-    top: 60%;
-    font-weight: 600;
-    }
-    .middle{
-        display: none;
-    }
-    .title p{
-        font-size: 50px!important;
-        width: 210px!important;
-    }
-    h3{
-        font-size: 40px!important;
-        width: 500px!important;
-    }
-    h4{
-        font-size: 40px!important;
-        margin-top: 30px!important;
-        margin-bottom: 30px!important;
-    }
-    h5{
-        font-size: 32px!important;
-    }
-    .padding2 h3{
-        width: 200px!important;
-    }
-    .padding3 h3{
-        width: 280px!important;
-    }
-    .padding4 h3{
-        width: 350px!important;
-    }
-    .padding5 h3{
-        width: 350px!important;
-    }
-    .content{
-        padding: 2%!important;
-    }
-    .content .padding2{
-        padding: 4%!important;
-
-    }
-    .content .padding{
-        padding: 4%!important;
-        margin: 0!important;
-    }
-    .content .padding3{
-        padding: 4%!important;
-
-    }
-    .content .padding4{
-        padding: 4%!important;
-
-    }
-    .padding p{
-        font-size: 36px!important;
-        line-height: 80px!important;
-    }
-    .job ul li{
-        font-size: 28px!important;
-        height: 80px!important;
-        line-height: 80px!important;
-    }
-    .padding2 p{
-        font-size: 32px!important;
-    }
-    .padding2 ul li{
-        font-size: 32px!important;
-        padding-top: 30px!important;
-    }
-    .padding3 ul li span{
-        font-size: 36px!important;
-    }
-    .padding3 ul li p{
-        font-size: 32px!important;
-        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%;
+    height: auto;
     position: relative;
 }
 .education .imgs img{
@@ -371,7 +265,7 @@ export default {
     max-height: 400px;
 }
 .education .imgs p{
-    font-size: 70px;
+    font-size: 68px;
     color:rgb(97, 137, 224);
     position: absolute;
     left: 52%;
@@ -379,7 +273,7 @@ export default {
     font-weight: 600;   
 }
 .education .imgs h4{
-    font-size: 50px;
+    font-size: 48px;
     color:#ddd; 
     position: absolute;
     left: 58%;
@@ -397,6 +291,7 @@ export default {
     padding-left: 4%;
     font-size: 22px;
     border-bottom: 1px solid #333;
+    color: red;
 }
 .education .title p{
     width: 130px;
@@ -441,7 +336,7 @@ export default {
     padding: 0px 0px 2% 2%;
 }
 #right .content .padding h3{
-    width: 340px;
+    display: inline-block;
     line-height: 60px;
     border-bottom: 1px solid #006699;
     font-family: PingFangSC-Regular;
@@ -449,7 +344,7 @@ export default {
     text-align: center;
     font-size: 28px;
     color: #006699;
-    margin: 30px 0px 0px 15px;
+    margin: 30px 0px 10px 15px;
 }
 #right .content .padding h4{
     font-family: PingFangSC-Regular;
@@ -466,19 +361,21 @@ export default {
     padding-left: 20px;
     line-height: 50px;
 }
-#right .content .padding .job ul{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
 #right .content .padding .job ul li{
-    width: 100%;
     font-size: 22px;
     height: 50px;
     line-height: 50px;
-    padding-left: 5%;
+    padding-left: 6%;
+}
+#right .content .padding .job ul li span{
+    margin-right: 20px;
 }
 /* 招收岗位底下的li每行有两个 */
+#right .content .padding .job>div:first-of-type ul{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
 #right .content .padding .job>div:first-of-type ul li {
     width: 50%;
 }
@@ -493,7 +390,7 @@ export default {
     padding: 0px 0px 20px 20px;
 }
 #right .content .padding2 h3{
-  width: 120px;
+display: inline-block;
   line-height: 60px;
   border-bottom: 1px solid #006699;
   font-family: PingFangSC-Regular;
@@ -504,13 +401,13 @@ export default {
   margin: 40px 0px 0px 15px;
 }
 #right .content .padding2 .picture{
-    /* padding: 0 0 30px 150px; */
     display: flex;
     flex: 1;
     flex-direction: column;
 }
 #right .content .padding2 .picture p{
     font-size: 22px;
+    margin-left: 50px;
 }
 #right .content .padding2 .picture img{
     width: 90px;
@@ -554,10 +451,9 @@ export default {
 #right .content .padding3{
   border:1px solid #e2dfdf;
   margin-top:50px;
-  padding-bottom: 30px;
 }
 #right .content .padding3 h3{
-  width: 170px;
+    display: inline-block;
   line-height: 60px;
   border-bottom: 1px solid #006699;
   font-family: PingFangSC-Regular;
@@ -565,7 +461,7 @@ export default {
   text-align: center;
   font-size: 28px;
   color: #006699;
-  margin: 30px 0px 20px 35px;
+  margin: 30px 0px 10px 35px;
 }
 #right .content .padding3 .box{
     padding: 3%;
@@ -607,7 +503,7 @@ export default {
     margin-top: 50px;
 }
 #right .content .padding4 h3{
-  width: 260px;
+display: inline-block;
   line-height: 60px;
   border-bottom: 1px solid #006699;
   font-family: PingFangSC-Regular;
@@ -642,7 +538,7 @@ export default {
     padding-bottom: 80px;
 }
 #right .content .padding5 h3{
-  width: 260px;
+  display: inline-block;
   line-height: 60px;
   border-bottom: 1px solid #006699;
   font-family: PingFangSC-Regular;
@@ -675,7 +571,516 @@ export default {
 /************************************右边样式********************************************/
 .navBarWrap {
     position:fixed;
-    top:-40px;
+    top:40px;
     z-index: 999;
 }
+@media screen and (max-width: 1440px) {
+     #content{
+        width: 100%;
+    }
+    #right .middle img{
+    float: left;
+    margin-left: 20px;
+    margin-top: 45px; 
+    height: 340px;   
+}
+#right .middle ul{
+    margin-left: 20px;
+    float: left;
+    margin-top:12px;
+}
+#right .middle ul li{
+    padding:40px 0px 0px 0px;
+    height: 75px;
+    font-weight: 400;
+    font-size: 20px;
+}
+}
+@media screen and (max-width:1050px){
+   
+   #right .middle{
+        display: none;
+    } 
+   #right .middleHidden{
+        display: none;
+    }
+    .education .imgs p{
+    font-size: 50px;
+    left: 52%;
+    top: 40%;   
+}
+.education .imgs h4{
+    font-size: 40px;
+    left: 58%;
+    top: 60%;
+} 
+}
+@media screen and (max-width:900px){
+
+    .education .imgs img{
+        height: 300px;
+    }
+    .education .imgs p{
+    font-size: 48px;
+    left: 52%;
+    top: 40%;   
+}
+.education .imgs h4{
+    font-size: 36px;
+    left: 58%;
+    top: 60%;
+} 
+.education .title {
+    margin-top: 20px;
+    padding-left: 4%;
+    font-size: 20px;
+}
+#right .content .padding{
+    border:1px solid #e2dfdf;
+    margin-top:30px;
+    padding: 0px 0px 2% 2%;
+}
+#right .content .padding h3{
+    line-height: 40px;
+    font-size: 26px;
+}
+#right .content .padding h4{
+    font-size: 24px;
+    padding: 1.5%;
+}
+#right .content .padding p{
+    font-size: 21px;
+    padding-right: 20px;
+    padding-left: 20px;
+}
+#right .content .padding .job ul li{
+    font-size: 20px;
+    padding-left: 6%;
+}
+/*********第二个浅色框***************/
+#right .content .padding2{
+    margin-top:40px;
+    padding: 0px 0px 20px 20px;
+}
+#right .content .padding2 h3{
+  line-height: 50px;
+  font-size: 26px;
+  margin: 30px 0px 0px 15px;
+}
+#right .content .padding2 .picture p{
+    font-size: 22px;
+}
+#right .content .padding2 .picture img{
+    width: 90px;
+}
+#right .content .padding2 .picture>div{
+    display: flex;
+    flex-direction: row;
+    padding-top: 50px;
+    justify-content: space-between;
+}
+#right .content .padding2 .picture .img{
+    padding-left: 10%;
+    display: flex;    
+    width: 50%;
+    flex-direction: row;
+    align-items: center;
+}
+#right .content .padding2 .picture .money{
+    display: flex;
+    width: 50%;
+    align-items: center;
+}
+#right .content .padding2 .evaluate{
+    margin-top: 15px;
+    padding-left: 5%;
+    font-family: PingFangSC-Regular;
+}
+#right .content .padding2 .evaluate p{
+    font-size: 18px;
+    line-height: 40px;
+}
+#right .content .padding2 .evaluate ul li{
+    line-height: 30px;
+    font-size: 15px;
+}
+#right .content .padding2 .evaluate ul li ul{
+    padding-left: 10px;
+}
+/*********第二个浅色框***************/
+/*********第三个浅色框***************/
+#right .content .padding3{
+  margin-top:40px;
+}
+#right .content .padding3 h3{
+  line-height: 50px;
+  font-size: 26px;
+  margin: 30px 0px 0px 30px;
+}
+#right .content .padding3 ul li h5{
+    font-size: 26px;
+    line-height: 50px;
+    text-align: center;
+    width: 15%;
+    height: 50px;
+}
+#right .content .padding3 ul li .line{
+    width: 85%;
+    height: 30px;
+    border-bottom: 2px solid #006699;
+}
+#right .content .padding3 .box div p{
+  line-height: 50px;
+  font-size: 20px;
+}
+/*********第三个浅色框***************/
+/*********第四个浅色框***************/
+#right .content .padding4{
+    margin-top: 40px;
+}
+#right .content .padding4 h3{
+  line-height: 50px;
+  font-size: 26px;
+  color: #006699;
+  margin: 20px 0px 30px 35px;
+}
+/*********第四个浅色框***************/
+/*********第五个浅色框***************/
+#right .content .padding5{
+    margin-top:40px;
+    padding-bottom: 60px;
+}
+#right .content .padding5 h3{
+  line-height: 50px;
+  font-size: 26px;
+  margin: 20px 0px 40px 35px;
+}
+#right .content .padding5 ul{
+    width: 80%;
+    border: 1px solid black;
+    margin: 0px auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+#right .content .padding5 ul li{
+    padding: 1%;
+    width: 50%;
+    border: 1px solid black;
+}
+#right .content .padding5 ul li img{
+    width: 100%;
+    max-height: 200px;
+}
+}
+@media screen and (max-width:800px){
+    #content{
+        width: 100%;
+        padding-left: 2%;
+    }
+    .education .imgs img{
+        height: 270px;
+    }
+    .education .imgs p{
+    font-size: 40px;
+    left: 48%;
+    top: 40%;   
+}
+.education .imgs h4{
+    font-size: 30px;
+    left: 55%;
+    top: 60%;
+} 
+}
+@media screen and (max-width:659px){
+    .education .imgs img{
+        height: 200px;
+    }
+    .education .imgs p{
+    font-size: 35px;
+    left: 46%;
+    top: 40%;   
+}
+.education .imgs h4{
+    font-size: 24px;
+    left: 50%;
+    top: 62%;
+} 
+#right .content .padding{
+    margin-top:30px;
+    padding: 0px 0px 2% 2%;
+}
+#right .content .padding h3{
+    line-height: 40px;
+    font-size: 24px;
+    margin-top: 15px;
+}
+#right .content .padding h4{
+    font-size: 22px;
+    padding: 1.5%;
+}
+#right .content .padding p{
+    font-size: 18px;
+    padding-right: 20px;
+    padding-left: 20px;
+}
+#right .content .padding .job ul li{
+    font-size: 16px;
+    padding-left: 6%;
+}
+/*********第二个浅色框***************/
+#right .content .padding2{
+    margin-top:30px;
+    padding: 0px 0px 20px 20px;
+}
+#right .content .padding2 h3{
+  line-height: 40px;
+  font-size: 24px;
+  margin: 15px 0px 0px 15px;
+}
+#right .content .padding2 .picture p{
+    font-size: 20px;
+    margin-left: 20px;
+}
+#right .content .padding2 .picture img{
+    width: 80px;
+}
+#right .content .padding2 .picture>div{
+    padding-top: 30px;
+}
+#right .content .padding2 .picture .img{
+    padding-left: 5%;
+    width: 50%;
+}
+#right .content .padding2 .evaluate{
+    margin-top: 15px;
+    padding-left: 5%;
+}
+/*********第二个浅色框***************/
+/*********第三个浅色框***************/
+#right .content .padding3{
+  margin-top:30px;
+}
+#right .content .padding3 h3{
+  line-height: 40px;
+  font-size: 24px;
+  margin: 15px 0px 0px 20px;
+}
+#right .content .padding3 ul li h5{
+    font-size: 22px;
+    line-height: 46px;
+    width: 18%;
+    height: 46px;
+}
+#right .content .padding3 ul li .line{
+    width: 82%;
+    height: 23px;
+}
+#right .content .padding3 .box div p{
+  line-height: 46px;
+  font-size: 18px;
+}
+/*********第三个浅色框***************/
+/*********第四个浅色框***************/
+#right .content .padding4{
+    margin-top: 30px;
+}
+#right .content .padding4 h3{
+  line-height: 40px;
+  font-size: 24px;
+  margin: 20px 0px 30px 35px;
+}
+#right .content .padding4 .show img{
+    height:80%;
+}
+/*********第四个浅色框***************/
+/*********第五个浅色框***************/
+#right .content .padding5{
+    margin-top:30px;
+    padding-bottom: 50px;
+}
+#right .content .padding5 h3{
+  width: 220px;
+  line-height: 50px;
+  font-size: 26px;
+  margin: 20px 0px 40px 35px;
+}
+#right .content .padding5 ul{
+    width: 80%;
+    border: 1px solid black;
+    margin: 0px auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+#right .content .padding5 ul li{
+    padding: 1%;
+    width: 50%;
+    border: 1px solid black;
+}
+#right .content .padding5 ul li img{
+    width: 100%;
+    max-height: 200px;
+}
+} 
+@media screen and (max-width: 539px) {
+    #right .content .padding .job ul li{
+    font-size: 15px;
+    padding-left: 5%;
+}
+}  
+@media screen and (max-width:500px){
+    .education .imgs img{
+        height: 160px;
+    }
+    #content .title p{
+        font-size: 24px;
+        width: auto;
+        display: inline-block;
+        margin-top: 0px;
+    }
+    .education .imgs p{
+    font-size: 26px;
+    left: 46%;
+    top: 40%;   
+}
+.education .imgs h4{
+    font-size: 16px;
+    left: 45%;
+    top: 66%;
+} 
+#right .content .padding{
+    margin-top:15px;
+    padding: 0px 0px 2% 2%;
+    padding-bottom: 50px
+}
+#right .content .padding h3{
+    line-height: 30px;
+    font-size: 18px;
+    margin-top: 15px;
+}
+#right .content .padding h4{
+    font-size: 16px;
+    padding: 1% 0;
+    margin: 10px 0;
+}
+#right .content .padding p{
+    font-size: 14px;
+    padding-right: 10px;
+    padding-left: 10px;
+    line-height: 40px;
+}
+#right .content .padding .job ul li{
+    font-size: 13px;
+    padding-left: 6%;
+    height: 50px;
+    padding-right: 15px;
+}
+#right .content .padding .job ul li span{
+    margin-right: 0;
+}
+#right .content .padding .job>div:last-child{
+    margin-top: 50px;
+}
+#right .content .padding .job :first-child ul li span{
+    margin-right: 15px;
+}
+/*********第二个浅色框***************/
+#right .content .padding2{
+    margin-top:20px;
+    padding: 0px 0px 20px 20px;
+}
+#right .content .padding2 h3{
+  line-height: 40px;
+  font-size: 18px;
+  margin: 15px 0px 0px 15px;
+}
+#right .content .padding2 .picture p{
+    font-size: 16px;
+    margin-left: 22px;
+}
+#right .content .padding2 .picture img{
+    width: 60px;
+}
+#right .content .padding2 .picture>div{
+    padding-top: 30px;
+}
+#right .content .padding2 .picture .img{
+    padding-left: 5%;
+    width: 50%;
+}
+#right .content .padding2 .evaluate{
+    margin-top: 15px;
+    padding-left: 5%;
+}
+#right .content .padding2 .evaluate p{
+    font-size: 14px;
+    line-height: 40px;
+}
+#right .content .padding2 .evaluate ul li{
+    line-height: 30px;
+    font-size: 13px;
+}
+#right .content .padding2 .evaluate ul li ul{
+    padding-left: 10px;
+}
+/*********第二个浅色框***************/
+/*********第三个浅色框***************/
+
+#right .content .padding3 h3{
+  line-height: 40px;
+  font-size: 18px;
+  margin: 15px 0px 0px 20px;
+}
+#right .content .padding3 ul li h5{
+    font-size: 16px;
+    line-height: 40px;
+    height: 40px;
+}
+#right .content .padding3 ul li .line{
+    height: 20px;
+}
+#right .content .padding3 .box div p{
+  line-height: 40px;
+  font-size: 14px;
+}
+/*********第三个浅色框***************/
+/*********第四个浅色框***************/
+#right .content .padding4{
+    margin-top: 30px;
+    padding-bottom: 20px;
+}
+#right .content .padding4 h3{
+  font-size: 18px;
+}
+#right .content .padding4 .show img{
+    height:80%;
+}
+/*********第四个浅色框***************/
+/*********第五个浅色框***************/
+#right .content .padding5{
+    margin-top:20px;
+    padding-bottom: 40px;
+}
+#right .content .padding5 h3{
+    width: auto;
+  line-height: 40px;
+  font-size: 18px;
+  margin: 20px 0px 30px 35px;
+}
+#right .content .padding5 ul li{
+    padding: 1%;
+    width: 50%;
+    border: 1px solid black;
+}
+#right .content .padding5 ul li img{
+    width: 100%;
+    max-height: 200px;
+}
+}
+@media screen and (max-width: 340px) {
+#right .content .padding .job div:nth-of-type(2) ul li:nth-child(2){
+    margin-bottom: 40px;
+}   
+}
 </style>