修改首页样式

src/App.vue

@@ -122,35 +122,6 @@ export default {
             margin-right: 0;
         }
     }
-    .group.g2 {
-        .service-item {
-            width: 100rpx;
-            margin-top: 40rpx;
-            margin-right: 42.5rpx;
-        }
-        .service-icon {
-            width: 100rpx;
-            height: 100rpx;
-        }
-        .service-item:nth-child(5n) {
-            margin-right: 0;
-        }
-    }
-    .group.g3 {
-        .service-item {
-            width: 320rpx;
-            height: auto;
-            margin-top: 40rpx;
-            margin-right: 30rpx;
-        }
-        .service-icon {
-            width: 320rpx;
-            height: 170rpx;
-        }
-        .service-item:nth-child(2n) {
-            margin-right: 0;
-        }
-    }
 }
 // 底部固定按钮
 .common-bottom-components {

src/pages/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-layout headerBackgroundColor="#4B65ED" textColor="light" btnType="city" title="熊熊安装队">
+    <app-layout headerBackgroundColor="#ffffff" backgroundColor="#ffffff" textColor="dark" btnType="city" title="熊熊安装队">
         <view class="search-component" @click="utils.toPage('/pages/service/cate', {}, 'switch')">
             <widget-search :disabled="true" />
         </view>
@@ -43,7 +43,7 @@
         </view>
         <view class="common-service-nav-group">
             <text class="section-title">维修售后服务</text>
-            <view class="group g2">
+            <view class="group g1">
                 <view
                     class="service-item"
                     v-for="(item, index) in aftermarketServiceList"
@@ -57,6 +57,13 @@
                 </view>
             </view>
         </view>
+        <view class="common-service-nav-group g4">
+            <view class="group g4">
+                <view class="service-item" @click="toPage(distribution.page)">
+                    <image class="service-icon" :src="distribution.cover" mode="aspectFill" />
+                </view>
+            </view>
+        </view>
         <view class="common-service-nav-group">
             <text class="section-title">工程企业服务</text>
             <view class="group g3">
@@ -97,6 +104,10 @@ export default {
             },
             installServiceList: [],
             aftermarketServiceList: [],
+            distribution: {
+                cover: require("@/static/temp/index/b3.png"),
+                page: "/pages/service/other/distribution",
+            },
             bussinessServiceList: [
                 {
                     id: 14,
@@ -187,10 +198,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.component-widgets-search {
+    background-color: #f6f6f6;
+}
 .search-component {
     width: 100%;
     height: 100rpx;
-    background-color: #4b65ed;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -199,7 +212,7 @@ export default {
     width: 100%;
     height: 283rpx;
     margin: 0 auto;
-    background-color: #4b65ed;
+    background-color: #f6f6f6;
 }
 .notify {
     width: 670rpx;
@@ -230,4 +243,49 @@ export default {
     max-height: 400rpx;
     overflow-y: scroll;
 }
+.common-service-nav-group {
+    .group.g2 {
+        .service-item {
+            width: 100rpx;
+            margin-top: 40rpx;
+            margin-right: 42.5rpx;
+        }
+        .service-icon {
+            width: 100rpx;
+            height: 100rpx;
+        }
+        .service-item:nth-child(5n) {
+            margin-right: 0;
+        }
+    }
+    .group.g3 {
+        .service-item {
+            width: 320rpx;
+            height: auto;
+            margin-top: 40rpx;
+            margin-right: 30rpx;
+        }
+        .service-icon {
+            width: 320rpx;
+            height: 160rpx;
+        }
+        .service-item:nth-child(2n) {
+            margin-right: 0;
+        }
+    }
+}
+.common-service-nav-group.g4 {
+    margin: 10rpx auto 0 auto;
+    padding-bottom: 0;
+    border-bottom: 0;
+    .group.g4 {
+        .service-item {
+            width: 100%;
+        }
+        .service-icon {
+            width: 618rpx;
+            height: 150rpx;
+        }
+    }
+}
 </style>