服务和人才培养页自适应

src/components/footer.vue

@@ -5,16 +5,16 @@
                 <h4>联系我们</h4>
                 <span>CONTACT US</span>
             </div>
-            <div class="tit">
+            <div class="tit1">
                 <div class="weixin">
-                    <img src=".\img\weixin.png" alt="微信二维码">
+                    <img :src="img1" alt="微信二维码">
                     <p>官方微信</p>
                 </div>
                 <div class="contact">
-                    <p class="text-muted">网址：http://www.zhimakaihua.com</p>
-                    <p class="text-muted">电话：400-0018-318</p>
-                    <p class="text-muted">合作邮箱：123456789@163.com</p>
-                    <p class="text-muted">地址：陕西省西安市曲江新区雁塔南路1201号金辉环球中心B座1209室</p>
+                    <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>
@@ -25,8 +25,18 @@
 </template>
 
 <script>
+import img1 from "./img/weixin.png";
 export default {
-    name: 'HomeFooter'
+    name: 'HomeFooter',
+    data(){
+        return{
+            img1:img1,
+            webSite:"网址：http：//www.zhimakahua.com",
+            tel:"400-0018-318",
+            email:"123456789@163.com",
+            address:"陕西省西安市曲江新区雁塔南路1201号金辉环球中心B座1209室"
+        }    
+    }
 }
 </script>
 
@@ -34,29 +44,26 @@ export default {
 *{
     margin: 0px;
     padding: 0px;
+    text-align: left;
 }
 .footer{
     width: 100%;
+    height: 480px;
     background: #F6F6F6;
     color: aliceblue;
     padding-top: 112px;
+    padding-left: 120px;
 }
 .footer .top{
-    height: 305px;
-    /* background:rgba(40,40,40,1) */
     color: black;
 }
 .footer .top div h4{
-    margin-left: 120px;
-    /* margin-top: 112px; */
     font-family: PingFangSC-Regular;
     font-size: 28px;
     color: #4A4A4A;
     letter-spacing: 0;
 }
 .footer .top div span{
-    margin-left: 120px;
-    margin-top: 112px;
     font-family: PingFangSC-Regular;
     font-size: 18px;
     color: #999999;
@@ -64,36 +71,40 @@ export default {
     height: 22px;
     width: 140px;
 }
-.footer .top .tit{
-    width: 83.3%;
+.footer .top .tit1{
+    width: 95%;
+    display: flex;
+    flex-direction: row;
     height: 233px;
     border-top: 1px solid #E4E4E4;
     border-bottom: 1px solid #E4E4E4;
-    margin-left: 122px;
-    margin-top: 30px;
+    padding-top: 30px;
 }
-.footer .top .tit .contact{
-    float: left;
-    width: 71%;
-    height: 120px;
-    margin-top: 42px;
-    margin-left: 40px;
+.footer .top .tit1 .contact{
+    height: 140px;
+    padding-left:40px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
 }
-.footer .top .tit div p{
-    margin: 0px;
+.footer .top .tit1 div p{
     font-family: PingFangSC-Regular;
     font-size: 16px;
     color: #999999;
     letter-spacing: 0;
-    line-height: 30px;
+    height: 80px;
 }
-.footer .top .tit .weixin{
+.footer .top .tit1 .weixin{
     float: left;
     width: 118px;
+    display: flex;
+    flex-direction: column;
+}
+.footer .top .tit1 .weixin img{
+    width: 118px;
     height: 118px;
-    margin-top: 42px;
 }
-.footer .top .tit .weixin p{
+.footer .top .tit1 .weixin p{
     font-family: PingFangSC-Regular;
     font-size: 18px;
     color: #999999;
@@ -101,31 +112,104 @@ export default {
     line-height: 22px;
     text-align: center;
 }
-.footer .top .tit .weixin img{
+.footer .top .tit1 .weixin img{
     float: left;
     width: 118px;
     height: 118px;
 }
 .footer .top h4{
-    /* color: white; */
     color: black;
 }
 .footer .bottom{
     height: 81px;
-    /* background: black; */
-    /* color: white; */
+    display: flex;
+    align-items: center;
     color: black;
 }
 .footer .bottom h4{
-    padding: 0px;
-    margin: 0px;
-    width: 71%;
-    height: 30px;
-    margin-left: 120px;
-    margin-top: 23px;
     font-size: 16px;
     color: #999999;
-    line-height: 30px;
 }
-
+@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,89 +1,181 @@
 <template>
-  <div class="serve">
-    <div class="content col-md-12 container-fluid">
-        <div class="imgs">
-            <p>做你创业路上的</p>
-            <h4>技术合伙人</h4>
-        </div>
-        <div class="first">
-            <span>|</span><h3>主营业务</h3>
-            <div class="img">
-                <p class="work1"><span>技术开发</span>
+<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>
-                </p>
-                <p class="work2"><span>设计类</span>
+                </div>
+            </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>
-                </p>
-                <p class="work3"><span>其他服务</span>
+                </div>
+            </div>
+            <div class="work1">
+                <div class="img col-md-1">
+                    <img :src="workImg3">
+                </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>
-                </p>
+                </div>
             </div>
         </div>
-        <div class="second">
-            <span>|</span><h3>开发流程</h3>
-            <img src=".//images/u143.png" alt="开发流程">
+    </div>       
+    <div class="second">
+        <div class="col-md-12 tit">
+            <h3>开发流程</h3>
+         </div>
+         <div class="process col-md-12">
+             <div class="boxs col-md-2" v-for="(process,index) in process" :key="index" :style="{color:process.color}"> 
+                <div class="top" >
+                    <div class="glyphicon glyphicon-chevron-right"></div>
+                    <div class="box">
+                        <div class="circle">
+                            <div class="size">{{process.title}}</div>
+                            <div class="index">{{index}}</div>
+                        </div>
+                    </div>   
+                </div>
+                <div class="title">{{process.subhead}}</div>
+             </div>
+         </div>
+    </div>
+    <div class="third">
+        <div class="col-md-12 tit">
+            <h3>产品解决方案</h3>
         </div>
-        <div class="third">
-                <div class="methodTitle"><span>|</span><h3>产品解决方案</h3></div>
-                    <ul>
-                        <li>
-                            <img src="./images/u147.png" alt="芝麻开花">
-                            <div>
-                                <p><span>自动售酒机项目</span>
-                                    打破传统高端酒销售模式，利用互联网技术结合线下终端硬件，
-                                    建立一套新零售体系；迎合了新的互联网消费理念，让用户在
-                                    线下门店能够任意定量购买到大众熟知的高端品牌酒,产品推出
-                                    后获得众多年轻消费者的追捧。</p>
-                            </div>
-                        </li>
-                        <li>
-                            <img src="./images/u148.png" alt="芝麻开花">
-                            <div>
-                                <p><span>益车宝是</span>
-                                    一家轮胎销售代理公司，在转型之前一直延续代理—经销
-                                    —门店的传统销售模式，经营存在诸多问题。经过互联网转型规划，
-                                    将所有销售环节打通，线上线下结合，实行新的多样化互联网销售
-                                    策略和管理模式，用户量及营业收入获得突破性持续增长。</p>
-                            </div>
-                        </li>
-                        <li>
-                            <img src="./images/u149.png" alt="芝麻开花">
-                            <div>
-                                <p><span>股票自动交易系统</span>
-                                    – 将股票买卖的实盘操作完全交给程序自动完成。</p>
-                                <p><span>汽车行业互联网舆情监控系统</span>
-                                    – 已服务广汽丰田和江淮汽车。</p>
-                            </div>
-                        </li>
-                    </ul>
+        <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>
-      </div>
-      <home-footer style="position: relative; top: 2281px;"></home-footer>
-     </div>
+    </div>
+    <home-footer class="col-md-12 col-xs-12">
+    </home-footer>
+ </div>
+</div>
+</div>
+
 </template>
 
 <script>
- /* eslint-disable */
-import HomeFooter from '../components/footer.vue'
-
-
+/* eslint-disable */
+import HomeFooter from '../components/footer';
+import workImg1 from './/images/work1.png';
+import workImg2 from './/images/work2.png';
+import workImg3 from './/images/work3.png';
+import methodImg1 from './images/u147.png';
+import methodImg2 from './images/u148.png';
+import methodImg3 from './images/u149.png';
 export default {
   name: 'serve',
-    components: {
-    HomeFooter
-  },
   data(){
       return{
+          "workImg1":workImg1,
+          "workImg2":workImg2,
+          "workImg3":workImg3,
+          "title1":"技术开发",
+          "title2":"设计类",
+          "title3":"其他服务",
           "works1":["网站开发","系统开发","APP开发","微信公众号","微信小程序","手机网站"],
           "works2":["UI设计","网页设计","画册设计","logo设计"],
           "works3":["黑盒测试","需求分析","数据分析","服务器维护","网站维护","系统维护"],
+          "process":[
+              {
+                  "title":"项目评估",
+                  "subhead":"评估需求、开发周期、开发成本等",
+                  "color":"orange"
+              },
+              {
+                  "title":"立项",
+                  "subhead":"签署合同、充值预付款",
+                  "color":"green"
+              },
+              {
+                  "title":"安排工作者",
+                  "subhead":"安排项目经理及其他工作者",
+                  "color":"blue"
+              },
+              {
+                  "title":"项目开发",
+                  "subhead":"工作者按需求开发，按时发布工作进度",
+                  "color":"purple"
+              },
+              {
+                  "title":"按月结算",
+                  "subhead":"每月初结算上月工作者报酬及平台服务费",
+                  "color":"green"
+              },
+          ],
+          "methods":[
+              {
+                "img":methodImg1,
+                "contents":[
+                    {
+                        "title":"自动售酒机项目",
+                        "par":"自动售酒机项打破传统高端酒销售模式，利用互联网技术结合线下终端硬件，建立一套新零售体系；迎合了新的互联网消费理念，让用户在线下门店能够任意定量购买到大众熟知的高端品牌酒,产品推出后获得众多年轻消费者的追捧。"
+
+                    }
+                ]
+              },
+              {
+                "img":methodImg2,
+                "contents":[
+                    {
+                        "title":"益车宝是",
+                        "par":"自动售酒机项打破传统高端酒销售模式，利用互联网技术结合线下终端硬件，建立一套新零售体系；迎合了新的互联网消费理念，让用户在线下门店能够任意定量购买到大众熟知的高端品牌酒,产品推出后获得众多年轻消费者的追捧。"
+                    }
+                ]
+              },
+              {
+                "img":methodImg3,
+                "contents":[
+                    {
+                        "title":"股票自动交易系统",
+                        "par":"将股票买卖的实盘操作完全交给程序自动完成。"
+                    },
+                    {
+                        "title":"汽车行业互联网舆情监控系统",
+                        "par":"已服务广汽丰田和江淮汽车。"
+                    }
+                ]
+              }
+          ]
       }
+  },
+    components:{
+      HomeFooter
   }
 }
 </script>
@@ -91,207 +183,270 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 /************************************整体样式********************************************/
-
 *{
     margin: 0px;
     padding: 0px;
     list-style: none;
-    text-align: left;
 }
 /************************************整体样式********************************************/
 
 /************************************主体样式********************************************/
-.serve{
-    width: 1440px;
+/********************imgs***************************/
+.serve .imgs{
+    width: 100%;
+    position: relative;
 }
-
-/********************first***************************/
-.serve .content .imgs{
+.serve .imgs img{
     width: 100%;
-    height: 400px;
-    border: 1px solid black;
-    /* margin-top: 17px; */
-    background: url(.//images//u136.jpg) no-repeat;
-    background-size: 100%;
-}
-.serve .content .imgs p{
-    font-size: 45px;
-    margin-top: 130px;
-    margin-left: 320px;
+    max-height: 400px;
+}
+.serve .imgs p{
+    font-size: 40px;
     color: #999;
+    position: absolute;
+    left: 25%;
+    top: 35%;
+    font-weight: 600;   
 }
-.serve .content .imgs h4{
-    font-size: 58px;
-    margin-top: 30px;
-    margin-left: 640px;
-    color: white;
+.serve .imgs h4{
+    font-size: 50px;
+    color: white; 
+    position: absolute;
+    left: 45%;
+    top: 55%;
+    font-weight: 600;
+}
+/********************imgs***************************/
+/********************主营业务***************************/
+.serve .tit{
+    border-left: 3px solid red;
+    margin-top: 40px;
+    margin-bottom: 40px;
+    text-align: left;
+    padding-left: 3%;
 }
-.serve .content .first span{
-    margin: 20px 0px 20px 100px;
-    float: left;
-    font-size: 64px;
-    font-weight: 100;
-    color: red;
+.serve .tit h3{
+    font-size: 28px
 }
-.serve .content .first h3{
-    font-size: 28px;
-    float: left;
-    width: 160px;
-    height: 60px;
-    border: 1px solid black;
-    line-height: 60px;
-    text-align: center;
-    margin: 40px 0px 10px 60px;
+.serve .first{
+    padding-left: 5%;
 }
-.serve .content .first .img{
-    float: left;
-    width: 1440px;
-    height: 420px;
+.serve .first .work .work1{
     border-top: 1px solid rgb(212, 212, 212);
+    height: 100px;
+    line-height: 100px;
 }
-.serve .content .first .img p{
-    width: 100%;
-    height: 140px;
-    line-height: 140px;
-    padding: 0px;
-    margin: 0px;
+.serve .first .work .work2{
     border-bottom: 1px solid rgb(212, 212, 212);
 }
-.serve .content .first .img p span{
-    color: black;
-    margin: 0px;
-    padding-left: 250px;
-    font-size: 30px;
+.serve .first .work .work1 .img img{
+    width: 40%;
+}
+.serve .first .work .work1 .title{
     color:#0aa99a;
-    font-weight: 600px;
-}
-.serve .content .first .img .work1{
-    background: url(".//images/work1.png") no-repeat;
-    background-position-x: 5%;
-    background-position-y: 50%;
-    background-size: 8%;
-}
-.serve .content .first .img .work2{
-    background: url(".//images/work2.png") no-repeat;
-    background-position-x: 5%;
-    background-position-y: 50%;
-    background-size: 8%;
-}
-.serve .content .first .img .work3{
-    background: url(".//images/work3.png") no-repeat;
-    background-position-x: 5%;
-    background-position-y: 50%;
-    background-size: 8%;
-}
-.serve .content .first .img ul{
-    height: 140px;
-    margin-left: 450px;
-}
-.serve .content .first .img ul li{
-    float: left;
-    font-size: 24px;
-    margin:0px;
-    width: 150px;
+    font-size: 20px;
 }
-.serve .content .first .img ul li:hover{
-    cursor: pointer;
+.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%;
+}
+/* 主营业务的手机端 */
+@media screen and (max-width:1026px){
+   .serve .first .work .work1 .title{
+       font-size: 24px;
+       float: left;
+    } 
+    .serve .first .work .work1 .img img{
+        display: none;
+    } 
+    .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{
+    /* float: left; */
+    display: flex;
+    flex: 1;
+    font-size: 20px;
+
 }
-/*********************first*************************/
-/*********************second*************************/
-.serve .content .second{
-    width: 1440px;
 }
-.serve .content .second span{
-    margin: 20px 0px 20px 100px;
-    float: left;
-    font-size: 64px;
-    font-weight: 100;
-    color: red;
+.serve .first .work .job ul li:hover{
+    cursor: pointer;
 }
-.serve .content .second h3{
-    font-size: 28px;
-    float: left;
-    width: 160px;
-    height: 60px;
-    border: 1px solid black;
-    line-height: 60px;
+/*********************second开发流程*************************/
+@media screen and (max-width:1100px){
+    .serve .second{
+    padding-left: 0；
+    }
+    .serve .second .process .boxs .box .circle .size{
+    font-size: 18px;
+    }
+    .serve .second .process .boxs .box .circle .index{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    bottom: -2%;
+    left:50%;
+    margin-left: -5%;
+    background: rgb(245, 245,245,1);
+    width:10%;
+    font-size: 14px;
     text-align: center;
-    margin: 40px 0px 10px 60px;
+    }
+    .serve .second .process .boxs .title{
+    padding-left: 20%;
+    margin-top: 20px;
+    font-size: 20px;
+    display: flex;
+    justify-items: center;
+    align-items: centers;
+    font-size: 16px!important;
+    }
+    .serve .second .process .boxs .box .circle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20vw!important;
+    height: 20vw!important;
+    /* margin-left: -2%; */
+    border-radius: 100%;
+    border: 1px dashed;
+    position: relative;
 }
-.serve .content .second img{
-  width: 1440px;
 }
-
-/*********************second*************************/
-/*********************third*************************/
-.serve .content .third{
-    width: 1024px;
-    /* padding-bottom: 30px; */
-}
-.serve .content .third .methodTitle{
-    width: 1440px;
-    height: 90px;
-}
-.serve .content .third span{
-    margin: 20px 0px 20px 100px;
-    float: left;
-    font-size: 64px;
-    font-weight: 100;
-    color: red;
+.serve .second{
+    padding-left: 5%;
 }
-.serve .content .third h3{
-    font-size: 28px;
-    float: left;
-    width: 180px;
-    height: 60px;
-    border: 1px solid black;
-    line-height: 60px;
-    text-align: center;
-    margin: 40px 0px 10px 60px;
-}
-.serve .content .third ul{
-  float: left;
-  margin-left: 0;
-  width: 1440px;
-  height: 490px;
+.serve .second .process{
+    display: flex;
+    flex: 1;
+    flex-direction: row;
 }
-.serve .content .third ul li{
-    float: left;
-    width: 400px;
-    height: 590px;
-    margin-left: 70px;
-    border: 1px solid rgb(212, 212, 212);
+.serve .second .process .boxs{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 1%;
+    background:rgb(245,245,245);
 }
-.serve .content .third ul li img{
-    width: 400px;
+.serve .second .process .boxs .top{
+    width: 100%;
     height: 200px;
+    display: flex;
+    flex-direction:row;
+    justify-content: space-between;
+    align-items: center;
 }
-.serve .content .third ul li div{
-    padding: 20px;
+.serve .second .process .boxs:first-child .glyphicon{
+    display: none;
 }
-.serve .content .third ul li div p{
-    float: left;
-    font-size: 21px;
-    line-height: 40px;
-    margin-bottom: 50px;
+.serve .second .process .boxs:first-child .top{
+    display: flex;
+    justify-content: flex-end;
+    margin-left: -5%
 }
-.serve .content .third ul li div span{
-    float: left;
+.serve .second .process .boxs .box .circle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 10vw;
+    height: 10vw;
+    margin-left: -2%;
+    border-radius: 100%;
+    border: 1px dashed;
+    position: relative;
     font-size: 24px;
-    font-weight: bold;
-    margin: 0px;
-    color: black;
-}
-/*********************third*************************/
-/************************************右边样式********************************************/
-/* .container-fluid{
-    height: 2750px;
-} */
-.content{
+}
+.serve .second .process .boxs .box .circle .index{
     position: absolute;
     display: flex;
-    flex-direction: column;
-    width: 1440px;
+    align-items: center;
+    bottom: -8%;
+    left:50%;
+    margin-left: -5%;
+    background: rgb(245, 245,245,1);
+    width:10%;
+    font-size: 20px;
+    text-align: center;
+}
+.serve .second .process .boxs .title{
+    padding-left: 20%;
+    margin-top: 20px;
+    font-size: 20px;
+    display: flex;
+    justify-items: center;
+    align-items: centers
+}
+/*********************second开发流程*************************/
+/*********************third产品解决方案*************************/
+@media screen and (max-width:1026px){
+    .third ul li div{
+    padding: 5%;
+    border: 1px solid black;
+    /* min-height:320px; */
+    /* 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 ul li{
+    padding-right: 4%;
+}
+.third ul li div{
+    padding: 5%;
+    border: 1px solid black;
+    /* min-height:320px; */
+    height: 300px;
+}
+.third img{
+    width: 100%;
+    max-height: 300px;
+    height: 200px;
+}
+.third p{
+    font-size: 18px;
+    line-height: 40px;
+    padding-top: 10px;
+    margin-bottom: 20px;
+    text-align: left;
+}
+.third span{
+    font-weight: 600;
+    font-size: 22px;
 }
- 
+/*********************third产品解决方案*************************/
 </style>