update

src/App.vue

@@ -45,6 +45,7 @@
           </div>
         </div>
       </div>
+      <div class="fenge"></div>
       <router-view />
     </div>
   </div>
@@ -52,6 +53,11 @@
 
 <style lang="stylus">
 @media only screen and (max-width: 479px) {
+  .fenge {
+    height: 40px !important;
+    backgroundColor: blue;
+  }
+
   #nav {
     height: 40px !important;
   }
@@ -114,6 +120,11 @@
   }
 }
 
+.fenge {
+    height: 80px;
+    backgroundColor: blue;
+  }
+
 .phonemenu {
   display: none;
   position: absolute;

src/views/About.vue

@@ -139,14 +139,14 @@ export default {
 };
 </script>
 <style scoped>
-@media only screen and (max-width: 479px) {
+/* @media only screen and (max-width: 479px) {
   .about{
     margin-top: 40px !important;
   }
 }
 .about{
     margin-top: 80px !important;
-  }
+  } */
 @media screen and (max-width: 1970px) {
     .headline p {
         font-size: 28px!important;

src/views/Home.vue

@@ -5,25 +5,17 @@
       <p class="saletitle">致力于互联网创新技术服务</p>
       <p class="salecontent">技术更跨界、创意更自由、服务更贴心</p>
       <div class="sale_content_son">
-        <div
-          v-for="(item, index) in saleArray"
-          :key="index"
-          class="pianyi-center"
-        >
+        <div v-for="(item, index) in saleArray" :key="index" class="pianyi-center">
           <div id="box1">
             <div id="box1-Up">
               <img :src="item.src" alt style="margin-top: 38px !important;" />
-              <p style="margin-top: 20px !important;margin-bottom:20px;">
-                {{ item.title }}
-              </p>
+              <p style="margin-top: 20px !important;margin-bottom:20px;">{{ item.title }}</p>
             </div>
             <div id="box1-Dn">
               <ul>
                 <li v-for="(itemson, index) in item.content" :key="index">
                   <div class="yuandian"></div>
-                  <span style="display:block;text-align:left">
-                    {{ itemson.con }}
-                  </span>
+                  <span style="display:block;text-align:left">{{ itemson.con }}</span>
                 </li>
               </ul>
             </div>
@@ -71,10 +63,7 @@
       <div id="exploit" class="liubai">
         <p class="saletitle">全新的开发模式</p>
         <p class="salecontent">高效、快速、减少花费</p>
-        <div
-          id="exploit-Box"
-          style="display:flex;justify-content:space-between; flex-wrap:wrap;"
-        >
+        <div id="exploit-Box" style="display:flex;justify-content:space-between; flex-wrap:wrap;">
           <div id="box2">
             <div id="box2-Up">
               <img src="..\components\img\exploitpic1.png" alt />
@@ -138,42 +127,18 @@
       </div>
     </div>
 
-    <div
-      style="background-image: linear-gradient(0deg, #0057cb 0%, #007bff 100%);"
-    >
+    <div style="background-image: linear-gradient(0deg, #0057cb 0%, #007bff 100%);">
       <div id="train" class="liubai">
         <p id="train-title1">灵活的人才培养方案</p>
-        <p id="train-content1">
-          免费的实习生培训计划、严格的实习生管理制度、真实的项目实战锻炼
-        </p>
-        <div id="train-pic">
-          <div class="train-pic-con">
-            <img src="..\assets\量身打造.png" alt />
-            <div class="duanhengxian"></div>
-            <p>量身打造</p>
-            <p>
-              面向互联网所需众多岗位，上班时间根据实习生自身情况决定，通过考核后在校也能办公。
-            </p>
-          </div>
-          <div class="train-pic-con">
-            <img
-              src="..\assets\严格.png"
-              alt
-              style="width: 42px; height: 46px;margin-top:61px"
-            />
-            <div class="duanhengxian"></div>
-            <p>严格管理</p>
-            <p>
-              周六公司固定例会时间，多方位知识面为实习生开拓视野，每天工作时间实时线上记录打卡。
-            </p>
-          </div>
-          <div class="train-pic-con">
-            <img src="..\assets\严格管理.png" alt />
-            <div class="duanhengxian"></div>
-            <p>严格管理</p>
-            <p>
-              知识培训外加真实项目实践，并有一对一导师指导，让实习生快速成长，独当一面。
-            </p>
+        <p id="train-content1">免费的实习生培训计划、严格的实习生管理制度、真实的项目实战锻炼</p>
+        <div class="train-pic-copy">
+          <div id="train-pic" v-for="(item, index) in trainPicArry" :key="index">
+            <div class="train-pic-con">
+              <img :src="item.src" alt />
+              <div class="duanhengxian"></div>
+              <p>{{ item.con1 }}</p>
+              <p>{{ item.con2 }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -183,17 +148,13 @@
         <p class="saletitle">服务过的品牌客户</p>
         <p class="salecontent" style="margin-bottom:40px;margin-top:6px">SERVIER BRAND CUSTOMERS</p>
         <div id="client-Pic">
-          <div
-            style="display:flex;justify-content:space-between; flex-wrap:wrap;"
-          >
+          <div style="display:flex;justify-content:space-between; flex-wrap:wrap;">
             <img src="..\assets\携程.png" alt />
             <img src="..\assets\李宁.png" alt />
             <img src="..\assets\金.png" alt />
             <img src="..\assets\广发.png" alt />
           </div>
-          <div
-            style="display:flex;justify-content:space-between; flex-wrap:wrap;"
-          >
+          <div style="display:flex;justify-content:space-between; flex-wrap:wrap;">
             <img src="..\assets\朗新.png" alt />
             <img src="..\assets\云.png" alt />
             <img src="..\assets\金关.png" alt />
@@ -209,9 +170,6 @@
 
 <style scoped>
 @media only screen and (max-width: 479px) {
-  .home {
-    margin-top: 40px !important;
-  }
   .liubai {
     width: 83.3% !important;
     margin: auto 8.3% !important;
@@ -580,6 +538,11 @@ div#box3-Right ul :nth-child(2) {
   justify-content: space-between;
   flex-wrap: wrap;
 }
+.train-pic-copy{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
 #train-pic .train-pic-con img {
   width: 44px;
   height: 44px;
@@ -631,7 +594,6 @@ div#box3-Right ul :nth-child(2) {
   margin: 0 auto;
   background: #ffffff;
   overflow: hidden;
-  margin-top: 80px;
 }
 #box {
   width: 280px;
@@ -730,6 +692,26 @@ export default {
             { con: "汽车行业互联网舆情监控系统" }
           ]
         }
+      ],
+      trainPicArry: [
+        {
+          src: require("../assets/量身打造.png"),
+          con1: "量身打造",
+          con2:
+            "面向互联网所需众多岗位，上班时间根据实习生自身情况决定，通过考核后在校也能办公。"
+        },
+        {
+          src: require("../assets/严格.png"),
+          con1: "严格管理",
+          con2:
+            "周六公司固定例会时间，多方位知识面为实习生开拓视野，每天工作时间实时线上记录打卡。"
+        },
+        {
+          src: require("../assets/严格管理.png"),
+          con1: "严格管理",
+          con2:
+            "知识培训外加真实项目实践，并有一对一导师指导，让实习生快速成长，独当一面。"
+        }
       ]
     };
   },

src/views/News.vue

@@ -106,14 +106,14 @@ export default {
 };
 </script>
 <style scoped>
-@media only screen and (max-width: 479px) {
+/* @media only screen and (max-width: 479px) {
   .news {
     margin-top: 40px !important;
   }
 }
 .news {
   margin-top: 80px !important;
-}
+} */
 * {
   text-align: left;
 }

src/views/Serve.vue

@@ -181,14 +181,14 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-@media only screen and (max-width: 479px) {
+/* @media only screen and (max-width: 479px) {
   .serve {
     margin-top: 40px !important;
   }
 }
 .serve {
   margin-top: 80px !important;
-}
+} */
 /************************************整体样式********************************************/
 *{
     margin: 0px;