1111

src/views/paddy/index.vue

@@ -58,20 +58,22 @@
     </div>
     <div class="detail">
       <p>产品展示</p>
+      <div class="baozhuangBox">
+        <li @click="goto('/referMenu', '五常大米-实惠装')">
+          <div class="riceBag">
+            <p class="riceBag-title">实惠装</p>
+          </div>
 
-      <li @click="goto('/referMenu', '五常大米-实惠装')">
-        <div class="riceBag">
-          <p class="riceBag-title">实惠装</p>
-        </div>
+          <img src="@/assets/images/home/detail/bag.png" alt="" />
+        </li>
+        <li @click="goto('/referMenu', '五常大米-礼盒装')">
+          <div class="riceBox">
+            <p class="riceBox-title">礼盒装</p>
+          </div>
+          <img src="@/assets/images/home/detail/box.png" alt="" />
+        </li>
+      </div>
 
-        <img src="@/assets/images/home/detail/bag.png" alt="" />
-      </li>
-      <li @click="goto('/referMenu', '五常大米-礼盒装')">
-        <div class="riceBox">
-          <p class="riceBox-title">礼盒装</p>
-        </div>
-        <img src="@/assets/images/home/detail/box.png" alt="" />
-      </li>
       <!-- <img src="@/assets/images/home/paddy-title.png" alt="" /> -->
       <!-- <img src="@/assets/images/home/paddy-detail.png" alt="" /> -->
     </div>
@@ -321,10 +323,16 @@ export default {
     }
   }
   .detail {
-    width: 90vw;
+    width: 84vw;
     height: 20vh;
-    margin: 3vh auto 0;
+    // margin: 3vh auto 0;
     position: relative;
+    top: 5vw;
+    left: 8vw;
+    .baozhuangBox {
+      display: flex;
+      justify-content: center;
+    }
     // display: flex;
     // justify-content: center;
     p {
@@ -340,9 +348,9 @@ export default {
     li {
       float: left;
       list-style: none;
-      width: 42vw;
+      width: 40vw;
       height: 105px;
-      margin: 0 0 0 9px;
+      margin: 0 4px;
       img {
         width: 100%;
       }
@@ -353,7 +361,7 @@ export default {
         border-radius: 10px 0;
         text-align: center;
         position: absolute;
-        left: 8px;
+        left: 2px;
         top: 25px;
         display: flex;
         justify-content: center;
@@ -398,7 +406,7 @@ export default {
     }
   }
   .middle {
-    width: 90vw;
+    width: 86vw;
     margin: 3vh auto 15px;
     position: relative;
     p {
@@ -484,7 +492,8 @@ export default {
     .cardTwo {
       width: 40vw;
       display: flex;
-      justify-content: center;
+      margin: 0 auto;
+      // justify-content: center;
       // align-items: center;
       .first {
         position: absolute;
@@ -525,8 +534,10 @@ export default {
 
     .cardThree {
       width: 40vw;
-      display: flex;
-      justify-content: center;
+      // display: flex;
+      margin: 0 auto;
+
+      // justify-content: center;
       position: relative;
       .first {
         position: absolute;
@@ -564,6 +575,7 @@ export default {
       width: 45vw;
       position: relative;
       // position: absolute;
+
       display: flex;
       justify-content: center;
       align-items: center;
@@ -604,6 +616,8 @@ export default {
     .cardFive {
       width: 40vw;
       display: flex;
+      margin: 0 auto;
+
       position: relative;
       justify-content: center;
       .first {
@@ -719,7 +733,7 @@ export default {
       }
     }
     .detail li .riceBox {
-      right: 137px;
+      right: 128px;
     }
   }
   @media screen and (max-width: 375px) {
@@ -802,12 +816,12 @@ export default {
       }
     }
     .detail li .riceBox {
-      right: 120px;
+      right: 112px;
     }
   }
   @media screen and (max-width: 360px) {
     .detail li .riceBox {
-      right: 113px;
+      right: 105px;
     }
     .middle .card {
       .first {
@@ -998,7 +1012,7 @@ export default {
     }
 
     .detail li .riceBox {
-      right: 94px;
+      right: 28vw;
     }
   }