响应式布局

src/pages/index/index.vue

 <template>
   <view style="background-color: #f3f3f3; height: 100vh">
     <view class="container">
-      <view>
-        <img src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
+      <view class="top">
         <img src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
-        <img src="/static/assets/right.png" />
+        <view class="left-icon"></view>
+        <img
+          class="bottom-image"
+          src="/static/assets/bottom.png"
+          style="width: 750rpx; height: 32rpx"
+        />
+        <view>
+          <img class="right-image" src="/static/assets/right.png" />
+        </view>
       </view>
       <view class="sort">
-        <view style="display: flex; flex-direction: row">
+        <img src="/static/assets/sort.png" style="width: 750rpx; height: 186rpx" />
+        <view style="display: flex; flex-direction: row; margin-top: -200rpx; margin-left: 20rpx">
           <view class="borderClass">
-            <img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
+            <img src="/static/assets/buildingAgriculture.png" style="width: 48px; height: 48px" />
             <view class="sort-text">筑农严选</view>
           </view>
           <view class="borderClass">
-            <img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" />
+            <img src="/static/assets/rural.png" style="width: 48px; height: 48px" />
             <view class="sort-text">认养农业</view>
           </view>
           <view class="borderClass">
-            <img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
+            <img src="/static/assets/adoption.png" style="width: 48px; height: 48px" />
             <view class="sort-text">乡村旅居</view>
           </view>
           <view class="borderClass">
-            <img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
+            <img src="/static/assets/adoption.png" style="width: 48px; height: 48px" />
             <view class="sort-text">特色农庄</view>
           </view>
         </view>
@@ -33,15 +41,15 @@
         </view>
         <view style="display: flex; flex-direction: row">
           <view class="detail-border">
-            <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
+            <img src="/static/assets/detailedMapOne.png" style="width: 108px; height: 88px" />
             <view class="detail-title">干辣椒炒肉</view>
           </view>
           <view class="detail-border">
-            <img src="/static/assets/detailedMapTwo.png" style="width: 216rpx; height: 176rpx" />
+            <img src="/static/assets/detailedMapTwo.png" style="width: 108px; height: 88px" />
             <view class="detail-title">贵阳辣子鸡</view>
           </view>
           <view class="detail-border">
-            <img src="/static/assets/detailedMapThree.png" style="width: 216rpx; height: 176rpx" />
+            <img src="/static/assets/detailedMapThree.png" style="width: 108px; height: 88px" />
             <view class="detail-title">麻辣鱼豆腐</view>
           </view>
         </view>
@@ -63,20 +71,20 @@
 }
 .bottom-image {
   position: relative;
-  top: -40rpx;
+  top: -38rpx;
   width: 750rpx;
   height: 32rpx;
   opacity: 1;
 }
 .right-image {
-  top: -192rpx;
+  top: -148rpx;
   float: right;
   position: relative;
 }
 .sort {
   position: relative;
   //left: 0rpx;
-  top: 400rpx;
+  top: -150rpx;
   width: 750rpx;
   height: 186rpx;
   opacity: 1;
@@ -106,8 +114,8 @@
   border-radius: 16rpx;
   opacity: 1;
   background: #ffffff;
-  top: 420rpx;
   left: 20rpx;
+  top: -60rpx;
 }
 .page-title {
   position: relative;