完善农业云H5项目首页布局

pages/index/index.vue

@@ -204,6 +204,7 @@
 <style lang="scss"
   scoped>
   .page-content {
+    width: 100%;
     padding: 0;
 
     &-title {
@@ -236,9 +237,14 @@
     .main-content {
       padding: 36rpx 24rpx;
       width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
 
       .main-content-complaints {
-        width: 702rpx;
+        // width: 702rpx;
+        width: 100%;
         height: 240rpx;
         background-image: url("../../static/agrcloud-images/agrcloud-main-page-complaints-bg.png");
         background-size: cover;
@@ -246,8 +252,9 @@
         background-position: center;
 
         .complaints-container {
-          padding-top: 26rpx;
-          padding-left: 40rpx;
+          // padding-top: 26rpx;
+          // padding-left: 40rpx;
+          padding: 26rpx 40rpx;
 
           &-icon {
             width: 84rpx;
@@ -284,14 +291,21 @@
       }
 
       .main-content-metexpregnotice {
+        width: 100%;
         padding-top: 24rpx;
 
         .complaints-metexpregnotice {
+          width: 100%;
+          display: flex;
+
           .metexpregnotice-meteregula {
-            float: left;
+            // width: calc(50% - 12rpx);
+            flex: 1;
+            /* float: left; */
 
             .meteregula-meteorological {
-              width: 338rpx;
+              // width: 338rpx;
+              width: 100%;
               height: 260rpx;
               background-image: url("../../static/agrcloud-images/agrcloud-main-page-meteorological-bg.png");
               background-size: cover;
@@ -299,8 +313,9 @@
               background-position: center;
 
               .meteorological-container {
-                padding-top: 32rpx;
-                padding-left: 40rpx;
+                // padding-top: 32rpx;
+                // padding-left: 40rpx;
+                padding: 32rpx 40rpx 26rpx;
 
                 &-icon {
                   width: 84rpx;
@@ -337,8 +352,9 @@
             }
 
             .meteregula-regulations {
-              margin-top: 25rpx;
-              width: 338rpx;
+              margin-top: 24rpx;
+              // width: 338rpx;
+              width: 100%;
               height: 380rpx;
               background-image: url("../../static/agrcloud-images/agrcloud-main-page-regulations-bp.png");
               background-size: cover;
@@ -346,8 +362,9 @@
               background-position: center;
 
               .regulations-container {
-                padding-top: 71rpx;
-                padding-left: 40rpx;
+                // padding-top: 71rpx;
+                // padding-left: 40rpx;
+                padding: 71rpx 40rpx 60rpx;
 
                 &-icon {
                   width: 84rpx;
@@ -385,11 +402,14 @@
           }
 
           .metexpregnotice-expertsnotice {
-            float: left;
-            margin-left: 25rpx;
+            /* float: left; */
+            margin-left: 24rpx;
+            // width: calc(50% - 12rpx);
+            flex: 1;
 
             .expertsnotice-experts {
-              width: 338rpx;
+              // width: 338rpx;
+              width: 100%;
               height: 380rpx;
               background-image: url("../../static/agrcloud-images/agrcloud-main-page-experts-bg.png");
               background-size: cover;
@@ -397,8 +417,9 @@
               background-position: center;
 
               .experts-container {
-                padding-top: 78rpx;
-                padding-left: 40rpx;
+                // padding-top: 78rpx;
+                // padding-left: 40rpx;
+                padding: 78rpx 40rpx 60rpx;
 
                 &-icon {
                   width: 84rpx;
@@ -435,8 +456,9 @@
             }
 
             .expertsnotice-notice {
-              margin-top: 25rpx;
-              width: 338rpx;
+              margin-top: 24rpx;
+              // width: 338rpx;
+              width: 100%;
               height: 260rpx;
               background-image: url("../../static/agrcloud-images/agrcloud-main-page-notice-bp.png");
               background-size: cover;
@@ -444,8 +466,9 @@
               background-position: center;
 
               .notice-container {
-                padding-top: 32rpx;
-                padding-left: 40rpx;
+                // padding-top: 32rpx;
+                // padding-left: 40rpx;
+                padding: 32rpx 40rpx 26rpx;
 
                 &-icon {
                   width: 84rpx;
@@ -486,9 +509,11 @@
 
       .main-content-monitoring {
         padding-top: 24rpx;
+        width: 100%;
 
         .content-monitoring {
-          width: 702rpx;
+          // width: 702rpx;
+          width: 100%;
           height: 240rpx;
           background-image: url("../../static/agrcloud-images/agrcloud-main-page-monitoring-bp.png");
           background-size: cover;
@@ -496,8 +521,9 @@
           background-position: center;
 
           .monitoring-container {
-            padding-top: 26rpx;
-            padding-left: 40rpx;
+            // padding-top: 26rpx;
+            // padding-left: 40rpx;
+            padding: 26rpx 40rpx;
 
             &-icon {
               width: 84rpx;