9.104

src/App.vue

@@ -203,19 +203,19 @@ p {
 <style>
 #app {
   
-  font-family: "Microsoft Yahei Light","Microsoft Yahei","Helvetica Neue","Helvetica","Arial",sans-serif;
+  font-family: "Microsoft Yahei Light","Microsoft Yahei","KaiGenGothicSC-Light","Helvetica Neue","Helvetica","Arial",sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   /* background-color: fafafa; */
-  color: #2c3e50;
+  color: #000;
   margin-top: px;
   width: auto;
   margin: 0;
 }
 .app{
 
-  font-family: "Microsoft Yahei","Helvetica Neue","Helvetica","Arial",sans-serif;
+  font-family: "Microsoft Yahei","KaiGenGothicSC-Light","Helvetica Neue","Helvetica","Arial",sans-serif;
 }
 
 .coll {

src/components/Business.vue

@@ -1,38 +1,21 @@
 <template>
   <div class="business">
-
-
-    
-    <div class="swiper-container" id="swiper2">
-      <div class="swiper-wrapper">
-
-
-
-        <div class="swiper-slide swiper-no-swiping sw" v-for="(item,index) in service" :key="index">
-          <div>
-            <img :src="item.serviceImageUrl"  />
+ <div class="row st">
+          <div class="col-xs-6 col-md-3 sw" v-for="(item,index) in service" :key="index">
+            <img :src="item.serviceImageUrl" width="100%" height="100%" />
             <div>
-              <h4>{{item.labelName}}</h4>
-              <p class="text-left">
-                
-              </p>
+              <h4>{{item.serviceName}}</h4>
+              <p class="text-left business-text" v-for="(items,index) in item.serviceLabelList" :key="index">{{items.labelName}}</p>
             </div>
           </div>
-        </div>
-      
+ </div>
     
-
-     
-      </div>
-      <div class="swiper-button-prev"></div>
-      <div class="swiper-button-next"></div>
-    </div>
     <!-- <div class="contanier st">
       <div class="col-xs-6 col-md-3">
         <img src="../assets/image/home/service_brand.jpg" width="100%" height="100%" alt="..." />
         <div>
           <h4>品牌服务</h4>
-          <p class="text-left">
+          <p class="text-left business-text">
             品牌咨询
             <br />品牌策划
             <br />CIS/VIS
@@ -83,7 +66,7 @@
           </p>
         </div>
       </div>
-    </div> -->
+    </div>-->
   </div>
 </template>
 
@@ -100,63 +83,139 @@ export default {
   data () {
     return {
       show: true,
-      service:[]
+      service: []
     };
   },
   components: {},
 
   mounted () {
-    // new Swiper("#swiper2", {
-    //   // loop: true,
-    //   slidesPerView: 4,
-    //   spaceBetween: 60,
-    //   // slidesOffsetBefore: 100,
-    //   // slidesOffsetAfter: 100,
-    //   navigation: {
-    //     nextEl: ".swiper-button-next",
-    //     prevEl: ".swiper-button-prev"
-    //   }
-    // });
+  
   },
   created () {
 
-   
-   
-    
-//http://localhost:8080/pc/service/list
+
+
+
+    //http://localhost:8080/pc/service/list
     request({
       ...apis.service.list,
-      
-      
+
+
     }).then(con => {
-      // console.log(con,"124")
-       this.service = con;
+      console.log(con,"124")
+      this.service = con;
       // window.console.log(this.service, "543");
     })
 
-   
+
   }
 
-  
 
- 
+
+
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.st {
-  padding-left: 10%;
-  padding-right: 10%;
-  margin: 0;
+
+
+
+@media (max-width: 992px) {
+ .business-text{
+   display: none;
+ }
+
+
+  h4 {
+    font-family: "Microsoft Yahei Light";
+    font-size: 1.6rem;
+    padding: 5px;
+    background-color: #e03723;
+    color: #fff;
+    margin: 0;
+    height: 30px;
+    letter-spacing: 6px;
+  }
+  .st {
+    margin-bottom: 20px !important;
+    padding: 0 1% !important;
+  }
+  .sw {
+    padding: 2% !important;
+  }
+
+
+
+ 
+
+ 
 }
 
-h4 {
-  font-size: 24px;
-  padding: 10px;
-  background-color: red;
-  color: #fff;
-  margin: 0;
-  height: 43px;
+@media (min-width: 992px) {
+
+
+  p {
+    margin: 0px;
+    padding: 0px 5px 0 5px;
+    font-size: 2.4rem;
+    color: #595757;
+  }
+  
+
+  h4 {
+    font-family: "Microsoft Yahei Light";
+    font-size: 2.4rem;
+    padding: 0px;
+    background-color: #e03723;
+    color: #fff;
+    margin: 0 0 18px;
+    line-height: 43px;
+    letter-spacing: 3px;
+  }
+  .sw {
+    padding: 33px;
+  }
+
+  .st {
+    padding-left: 10%;
+    padding-right: 10%;
+    margin: 0;
+  }
+  .st .sw p {
+    line-height: 1.6em;
+    font-size: 2.2rem;
+    padding-bottom: 0;
+  }
+
+
+
 }
+
+
+
+</style>
+
+
+<style lang="less" scoped>
+
+
+
+
+
+
+
+
+ @media (max-width: 992px) {
+ 
+
+  .st {
+    padding: 0 20px;
+
+    .sw {
+      padding: 20px;
+    }
+  }
+} 
+
 </style>

src/views/About.vue

@@ -6,14 +6,14 @@
 
     <div class="contanier st">
       <div class="row" style="margin-left:0;margin-right:0">
-        <div class="">
+        <div class>
           <div class="sssss">
             <p class="text-left">
               南京福予文化传媒有限公司成立于2018年6月，是一家崇尚服务与品质的广告创意公司，拥有多元化的团队体系及全案服务能
               力。从品牌策略到营销策划、广告创意、设计成型、落地执行、一站式解决客户所需。
             </p>
             <br />
-            <div class="">
+            <div class>
               <div class="abc">
                 <img src="../assets/image/about/FOYO.jpg" style="width:100%" />
               </div>
@@ -22,7 +22,7 @@
         </div>
       </div>
 
-      <div class="row about-1"  style="margin-left:0;margin-right:0">
+      <div class="row about-1" style="margin-left:0;margin-right:0">
         <div class="col-xs-6 col-md-3">
           <img src="../assets/image/about/Advantage1.png" class="about-1-img" alt="..." />
           <div class="caption">
@@ -77,12 +77,12 @@
         </div>
       </div>
 
-      <div class="row"  style="margin-left:0;margin-right:0">
+      <div class="row" style="margin-left:0;margin-right:0">
         <h1 class="h1">我们的团队</h1>
       </div>
 
       <div class="row about-2" style="margin-left:0;margin-right:0">
-        <div class="col-xs-12 col-md-6" >
+        <div class="col-xs-12 col-md-6">
           <div style="float：left;">
             <img src="../assets/image/about/Photo_sfg.jpg" class="about-ph1" alt="..." />
           </div>
@@ -117,7 +117,7 @@
           </div>
         </div>
       </div>
-      <div class="row about-3"  style="margin-left:0;margin-right:0">
+      <div class="row about-3" style="margin-left:0;margin-right:0">
         <div class="col-xs-2 col-md-2">
           <img src="../assets/image/about/Photo_1.jpg" alt="..." class="ph5" />
         </div>
@@ -144,9 +144,7 @@
 
 
 <style scoped>
-
 @media (min-width: 768px) {
- 
 }
 
 @media (max-width: 768px) {
@@ -154,12 +152,12 @@
     padding-top: 58px;
   }
   .about-1-img {
-    width: 60px;
-    height: 60px;
+    width: 80px;
+    height: 80px;
   }
   .sssss {
-    font-size: 1.2rem;
-color: #3e3a39;
+    font-size: 1.5rem;
+    color: #3e3a39;
     padding: 20px 20px;
   }
   .about-1 {
@@ -173,7 +171,10 @@ color: #3e3a39;
     margin-top: 0;
     /* font-size: 2rem; */
   }
-  
+}
+
+.col-xs-6 {
+  padding: 0;
 }
 
 /* 中等屏幕（桌面显示器，大于等于 992px） */
@@ -194,7 +195,7 @@ color: #3e3a39;
 
   .st div div .sssss {
     padding: 0px 20px 40px;
-color: #3e3a39;
+    color: #3e3a39;
     font-size: 2.4rem;
   }
   .h1 {
@@ -234,38 +235,34 @@ color: #3e3a39;
     font-size: 1.1vw;
     color: #595757;
     margin-bottom: 20px;
-    
   }
   .teamp2 {
     font-size: 1.1vw;
   }
 }
 
-
 /* 大屏幕（大桌面显示器，大于等于 1200px） */
 @media (min-width: 1200px) {
 }
 </style>
 
 <style lang="less" scoped>
-
-@media (min-width: 992) and (max-width: 1200) { 
-  
- }
+@media (min-width: 992) and (max-width: 1200) {
+}
 
 @media (min-width: 992px) {
-  .p1{
-  color: #000;
-  font-size: 2.0rem;
-}
+  .p1 {
+    color: #000;
+    font-size: 2rem;
+  }
   .about-2 {
     padding-top: 60px;
     div {
       .about-ph1 {
         float: left;
         width: 50%;
-     
-        padding: 0 40px ;
+
+        padding: 0 40px;
       }
     }
   }
@@ -292,30 +289,29 @@ color: #3e3a39;
       // }
       .caption {
         h2 {
-          font-size: 1.2rem;
+          font-size: 2.4rem;
           font-weight: bold;
         }
         .p1 {
-          font-size: 0.8rem;
+          font-size: 1.4rem;
         }
       }
     }
   }
-  .h1{
+  .h1 {
     font-size: 2.2rem;
     font-weight: bold;
     margin-bottom: 0px;
   }
   .about-2 {
-     
-    div {margin-top: 20px;
+    div {
+      margin-top: 20px;
       div {
         .about-ph1 {
           margin-left: 10px;
           margin-right: 10px;
           float: left;
           width: 120px;
-         
         }
       }
       div {
@@ -323,13 +319,13 @@ color: #3e3a39;
           h1 {
             font-size: 1.3rem;
             font-weight: bold;
-            margin-bottom: 6px
+            margin-bottom: 6px;
           }
-          .teamp1{
+          .teamp1 {
             font-size: 1.2rem;
             margin: 2px;
           }
-          .teamp2{
+          .teamp2 {
             font-size: 1.2rem;
           }
         }

src/views/Home.vue

@@ -60,8 +60,12 @@
         </div>
       </div>
 
-      <div class="row st">
-        <div class="col-xs-6 col-md-3 sw">
+      
+<Business></Business>
+      <!-- <div class="row st"> -->
+
+        
+        <!-- <div class="col-xs-6 col-md-3 sw">
           <img src="../assets/image/home/service_brand.jpg" width="100%" height="100%" alt="..." />
           <div class>
             <h4>品牌服务</h4>
@@ -86,6 +90,7 @@
             </p>
           </div>
         </div>
+
         <div class="col-xs-6 col-md-3 sw">
           <img src="../assets/image/home/service_design.jpg" width="100%" height="100%" alt="..." />
           <div class>
@@ -104,6 +109,7 @@
             </p>
           </div>
         </div>
+
         <div class="col-xs-6 col-md-3 sw">
           <img src="../assets/image/home/service_make.jpg" width="100%" height="100%" alt="..." />
           <div class>
@@ -114,8 +120,8 @@
               <br />网络制作
             </p>
           </div>
-        </div>
-      </div>
+        </div> -->
+      <!-- </div> -->
     </div>
 
     <div class="contanier home-case top-case">
@@ -183,7 +189,7 @@
 
 import { scrollIntoView } from 'scroll-js'
 import Wheelplanting from "@/components/Wheelplanting.vue";
-// import Business from "@/components/Business.vue";
+import Business from "@/components/Business.vue";
 
 import request from '../../utils/request'
 import apis from '../config/api';
@@ -212,7 +218,7 @@ export default {
   components: {
     Wheelplanting,
     // Wheelplantings,
-    // Business,
+    Business,
   },
   mounted () {
     window.addEventListener('scroll', () => {