搜索框适配 页面样式

app.json

@@ -6,7 +6,7 @@
     "pages/serch/serch",
     "pages/logs/logs",
     "pages/my/my",
-    "pages/Integral/my-Integral"
+    "pages/Integral/Integral"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/index/index.js

@@ -5,9 +5,9 @@ const app = getApp()
 Page({
     data: {
         swiperImgs: [
-            'https://img.zcool.cn/community/0124335d234357a801207640051686.jpg@1280w_1l_2o_100sh.jpg',
-            'https://img.zcool.cn/community/01bac95d233e81a80121376323538b.jpg@1280w_1l_2o_100sh.jpg',
-            'https://img.zcool.cn/community/01731a5d234357a801213763876d7f.jpg@1280w_1l_2o_100sh.jpg',
+            './images/5.png',
+            './images/6.png',
+            './images/7.png',
             './images/1.png'
         ],
         show: true,

pages/index/index.json

@@ -15,6 +15,7 @@
     "van-calendar": "@vant/weapp/calendar/index",
     "van-uploader": "@vant/weapp/uploader/index",
     "van-popup": "@vant/weapp/popup/index",
-    "van-overlay": "@vant/weapp/overlay/index"
+    "van-overlay": "@vant/weapp/overlay/index",
+    "van-field": "@vant/weapp/field/index"
   }
 }

pages/index/index.wxml

@@ -1,21 +1,22 @@
 <view class="FixButton" bindtap="clickBtn">
+  <!-- bindtap="clickBtn" -->
   <view class="search-box" style="margin-bottom:20rpx">
     <view class="search-top">
-      <input class="search-ipt" focus="true" placeholder="搜索用户手机号" type="text" value="{{value}}" bindinput="mobileInput" maxlength="11" type="number" placeholder-style="color:#b0b0b0" />
-      <!--  输入的时候显示  -->
-      <van-icon name="cross" size="{{showInput}}" custom-style="margin-top: 20rpx" bind:click="clear" />
+      <van-icon name="search" class="search-icon" />
+      <input class="search-ipt" placeholder="搜索商家名称" type="text" value="{{value}}" placeholder-style="color:#9d9d9d" />
       <button class="search-btn" bindtap="Search">搜索</button>
-    </view>
-    <view style="margin: 4%;">
+    </view>+
+    <view style="margin: 2%;">
       <view class="" hover-class="none" hover-stop-propagation="false">
-        <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="700" circular="true" previous-margin="36rpx" next-margin="36rpx" indicator-color="#999999" indicator-active-color="#ff8700">
+        <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="700" circular="true" previous-margin="0rpx" next-margin="0rpx" indicator-color="#999999" indicator-active-color="#ff8700">
           <swiper-item class="swiper-image" wx:for="{{ swiperImgs }}" wx:key="*this">
-            <image src="{{ item }}" mode="widthFix" bindtap="getLunBoList" mode="aspectFit"></image>
+            <image style="width:95%;" src="{{ item }}" mode="widthFix" bindtap="getLunBoList" mode="aspectFit"></image>
           </swiper-item>
         </swiper>
       </view>
     </view>
   </view>
+
   <view>
     <view class="front-content" style="padding: 4% 4% 0;">
       <view>
@@ -90,7 +91,7 @@
   </view>
 </view>
 
-<view>
+<view style="font-size:32rpx;">
   <!-- 弹出框 -->
   <!-- hidden="{{show}}" -->
   <view class="all-bottom" hidden="{{show}}">
@@ -112,9 +113,9 @@
 
     </view>
     <!-- <van-icon name="clear" /> -->
-    <van-icon name="close" bindtap="clickBtnDelete" />
-
+    <van-icon name="close" bindtap="clickBtnDelete" class="del-icon" color="#ffffff" />
   </view>
+
 </view>
 
 

pages/index/index.wxss

@@ -10,43 +10,57 @@ page {
 }
 
 .search-top {
-  width: 700rpx;
-  height: 80rpx;
-  border: 1px solid #e1e1e1;
+  display: flex;
+  align-items: center;
   border-radius: 50rpx;
+  height: 75rpx;
   margin: 3%;
+  background: #f4f4f4;
 }
 
-.search-ipt {
-  width: 474rpx;
-  height: 80rpx;
-  border: none;
+.search-icon {
+  font-size: 45rpx;
   float: left;
-  font-size: 29rpx;
+  margin: 20rpx;
+  box-sizing: border-box;
+  color: #888888;
+}
+
+.search-ipt {
+  height: 75rpx;
+  font-size: 30rpx;
   /* 去掉获取焦点的蓝边 */
   outline: none;
-  /* text-indent: 20rpx; */
-  padding-left: 30rpx;
 }
 
 .search-btn {
   border-radius: 50rpx;
-  width: 151rpx;
-  height: 80rpx;
+  width: 150rpx;
+  height: 50rpx;
   display: flex;
-  justify-content: center;
   align-items: center;
-  float: right;
+  justify-content: center;
+  margin-right: 15rpx;
   background: #ff8e0b;
   color: #fff;
-  font-size: 29rpx;
+  font-size: 30rpx;
+}
+
+.swiper {
+  /* background-color: blue; */
+  height: 330rpx;
+}
+
+.swiper-image {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20rpx;
 }
 
 .front-content {
   display: flex;
-  /* padding: 0; */
-  /* justify-content: space-between; */
-  /* color: #696969; */
   width: 100%;
   background-color: #fff;
 }
@@ -86,53 +100,6 @@ page {
   border-radius: 8rpx;
 }
 
-
-.ert {
-  position: relative;
-}
-
-.btn {
-  position: absolute;
-  right: 40rpx;
-  top: 32rpx;
-}
-
-
-
-.top {
-  height: 350rpx;
-  padding: 12%;
-  box-sizing: border-box;
-  padding-top: 100rpx;
-}
-
-.swiper {
-  height:450rpx;
-}
-
-.swiper-image {
-  width: 100%;
-  height: 100%;
-}
-
-.under {
-  text-align: center;
-  line-height: 70rpx;
-  color: #fdeff0;
-}
-
-.FixButton {
-  /* position: fixed; */
-}
-
-.wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-
 .all-bottom {
   background-color: black;
   opacity: 0.5;
@@ -144,15 +111,19 @@ page {
   z-index: 11;
 }
 
+.top {
+  height: 350rpx;
+  padding: 12%;
+  box-sizing: border-box;
+  padding-top: 100rpx;
+}
+
 .block {
   width: 120px;
   height: 120px;
   background-color: #fff;
 }
 
-
-
-
 .pop-up {
   width: 520rpx;
   height: 500rpx;
@@ -164,4 +135,17 @@ page {
   top: 350rpx;
   z-index: 12;
   background: linear-gradient(#ff7e4c, #f62446);
+  /* padding-bottom: 70rpx; */
+}
+
+.under {
+  text-align: center;
+  line-height: 70rpx;
+  color: #fdeff0;
+}
+
+.del-icon {
+  margin-top: 70rpx;
+  border-radius: 100%;
+  font-size: 50rpx;
 }

pages/my/my.js

@@ -10,7 +10,7 @@ Page({
   onClickintegral(){
     console.log(1);
     wx.navigateTo({
-      url:'../my-Integral/my-Integral'
+      url:'../Integral/Integral'
     })
   },
   /**

pages/my/my.json

@@ -2,6 +2,5 @@
   "usingComponents": {
     "van-button": "@vant/weapp/button/index",
     "van-icon": "@vant/weapp/icon/index"
-
   }
 }

pages/my/my.wxml

@@ -68,35 +68,35 @@
     <!-- 内容 -->
     <view class="content">
       <!-- 1 -->
-      <view class="content-one">
+      <view class="content-one" style="margin-right: 130rpx;">
         <view class="img-box">
           <view class="img-paid">
-            <van-icon name="paid" size="80rpx" />
+            <van-icon name="paid" size="60rpx" />
           </view>
         </view>
-        <view style="margin-left: 10rpx;">
+        <view style="font-size: 30rpx;">
           待支付
         </view>
       </view>
       <!-- 2 -->
-      <view class="content-one">
+      <view class="content-one" style="margin-right: 130rpx;">
         <view class="img-box" style="background: #52a6ff;">
           <view class="img-paid">
-            <van-icon name="logistics" size="80rpx" />
+            <van-icon name="logistics" size="60rpx" />
           </view>
         </view>
-        <view style="margin-left: 10rpx;">
+        <view style="font-size: 30rpx;">
           待送达
         </view>
       </view>
       <!-- 3 -->
-      <view>
+      <view class="content-one" >
         <view class="img-box" style="background: #66dc8e;">
           <view class="img-paid">
-            <van-icon name="completed" size="80rpx" />
+            <van-icon name="completed" size="60rpx" />
           </view>
         </view>
-        <view style="margin-left: 10rpx;">
+        <view style="font-size: 30rpx;">
           已完成
         </view>
       </view>

pages/my/my.wxss

@@ -132,8 +132,11 @@ page {
 }
 
 .content-one {
-  margin-right: 130rpx;
 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .pic-one {
@@ -163,16 +166,17 @@ page {
 
 .img-box {
   background: #ffa05c;
-  border-radius: 30rpx;
-  width: 120rpx;
-  height: 120rpx;
+  border-radius: 20rpx;
+  width: 100rpx;
+  height: 100rpx;
   color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .img-paid {
   /* text-align: center; */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 20rpx;
+
+
 }

project.private.config.json

@@ -10,7 +10,7 @@
       "list": [
         {
           "name": "",
-          "pathName": "pages/index/index",
+          "pathName": "pages/my/my",
           "query": "",
           "launchMode": "default",
           "scene": null
@@ -24,7 +24,21 @@
         },
         {
           "name": "",
-          "pathName": "pages/my-Integral/my-Integral",
+          "pathName": "pages/index/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/serch/serch",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/serch-outcome/serch-outcome",
           "query": "",
           "launchMode": "default",
           "scene": null