样式优化

src/pages/RuralTravel/RuralTravel.vue

 <template>
   <view>
     <view class="container">
-      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
+      <view class="top">
+        <Search
+          background="rgba(255, 255, 255, 0.8)"
+          backIcon="black"
+          iconSrc="/static/assets/left.png"
+          placeholderText="请输入要搜索的关键词"
+        ></Search>
+      </view>
       <view class="bac-img">
         <img class="bac" src="/static/rural/bacImg.png" style="width: 750rpx; height: 440rpx" />
       </view>
@@ -54,7 +61,7 @@
                 :class="{ rotate: rotate }"
                 name="fill-arrow-down"
                 size="24rpx"
-                class="icon"
+                class="icons"
               ></wd-icon>
             </view>
           </view>
@@ -65,7 +72,7 @@
                 :class="{ rotate: rotate2 }"
                 name="fill-arrow-down"
                 size="24rpx"
-                class="icon"
+                class="icons"
               ></wd-icon>
             </view>
           </view>
@@ -76,7 +83,7 @@
                 :class="{ rotate: rotate3 }"
                 name="fill-arrow-down"
                 size="24rpx"
-                class="icon"
+                class="icons"
               ></wd-icon>
             </view>
           </view>
@@ -87,7 +94,7 @@
                 :class="{ rotate: rotate4 }"
                 name="fill-arrow-down"
                 size="24rpx"
-                class="icon"
+                class="icons"
               ></wd-icon>
             </view>
           </view>
@@ -355,7 +362,7 @@ page {
       .red {
         color: #fa5151;
       }
-      .icon {
+      .icons {
         color: #d8d8d8;
         transform: rotate(-180deg);
         transition: all 0.3s linear;
@@ -446,4 +453,11 @@ page {
   margin-top: 10rpx;
   width: 400rpx;
 }
+::v-deep .search {
+  margin-top: 60rpx;
+}
+::v-deep .icon {
+  width: 56rpx;
+  height: 56rpx;
+}
 </style>