模仿鲜柚小程序静态首页与搜索页

效果图：

 grapefruit.wxml页面

<!--pages/grapefruit/grapefruit.wxml-->

<view>

  <view class="header">



    <image src="../../imges/鲜柚生活/定位1.png" class="header_img"></image>



    <view class="section">

      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

        {{array[index]}}

      </picker>

    </view>

    <view class="flextest">

      <view class="header_input">

        <image src="../../imges/鲜柚生活/搜索.png" style="width: 20px; height: 20px; float: left;"> </image>

        <navigator hover-class="none" url="/pages/search/search">找吃喝玩乐，先上鲜柚生活</navigator>

        <!-- <input type="text" placeholder="找吃喝玩乐，先上鲜柚生活"/> -->



      </view>

    </view>

    <view class="h_bottom">

      <view class="header_bottom">

        <view>

          <image src="../../imges/鲜柚生活/美食精选.png"></image>

          <text>美食精选</text>

        </view>

        <view>

          <image src="../../imges/鲜柚生活/玩乐精选.png"></image>

          <text>玩乐精选</text>

        </view>

        <view>

          <image src="../../imges/鲜柚生活/亲子精选.png"></image>

          <text>亲子精选</text>

        </view>

        <view>

          <image src="../../imges/鲜柚生活/丽人美妆.png"></image>

          <text>丽人美妆</text>

        </view>

        <view>

          <image src="../../imges/鲜柚生活/旅游住宿.png"></image>

          <text>旅游住宿</text>

        </view>



      </view>

    </view>

  </view>

  <view class="middle_imgs">

    <!-- indicator-dots="true" -->

    <swiper autoplay="true" circular="true" interval="3000">

      <swiper-item wx:for="{{img_Urls}}" wx:key="*this">

        <image src="{{item}}" class="img"></image>

      </swiper-item>

    </swiper>

  </view>

  <view class="texts">

    <text class="textone_1">热门商圈</text>

    <text class="textone_2">商圈排行榜></text>

  </view>



  <scroll-view scroll-x="true">

    <view class="scroll_img" scroll-x="true">

      <view class="slideimgs">

        <image src="/imges/鲜柚生活/上海世茂.png"></image>

        <text class="scroll_text1">明发广场</text>

        <view><text class="scroll_text2">15956543人去过</text></view>

      </view>

      <view class="slideimgs">

        <image src="/imges/鲜柚生活/世贸悦海.png"></image>

        <text class="scroll_text1">世贸广场</text>

        <view><text class="scroll_text2">15956543人去过</text></view>

      </view>

      <view class="slideimgs">

        <image src="/imges/鲜柚生活/世茂悦海体验中心.png"></image>

        <text class="scroll_text1">明发广场</text>

        <view><text class="scroll_text2">15956543人去过</text></view>

      </view>

      <view class="slideimgs">

        <image src="/imges/鲜柚生活/世茂悦海效果图.png"></image>

        <text class="scroll_text1">明发广场</text>

        <view><text class="scroll_text2">15956543人去过</text></view>

      </view>

      



      <view class="slideimgs">

        <image src="/imges/鲜柚生活/商场4.png"></image>

        <text class="scroll_text1">明发广场</text>

        <view><text class="scroll_text2">15956543人去过</text></view>

      </view>

    </view>

  </scroll-view>

  <view class="line"></view>

  <view class="texts">

    <text class="textone_1">全城热卖</text>

    <text class="textone_2">查看更多></text>

  </view>

  

  <scroll-view scroll-x="true">

    <view class="footer_scroll_img" scroll-x="true">

      <view class="slideimgs2">

        <image src="/imges/鲜柚生活/豪华双人套餐.png"></image>

        <text class="one">限时抢89元/位</text>

        <text class="two">￥87.00</text>

        <view>

            <text class="three">146.05</text>

            <text class="four">927人购买</text>

        </view>

        

      </view>

      <view class="slideimgs2">

        <image src="/imges/鲜柚生活/双人套餐.png"></image>

        <text class="one">限时抢105元/位</text>

        <text class="two">￥200.00</text>

        <view>

            <text class="three">146.05</text>

            <text class="four">927人购买</text>

        </view>

        

      </view>

      <view class="slideimgs2">

        <image src="/imges/鲜柚生活/烤串双人套餐.png"></image>

        <text class="one">限时抢99元/位</text>

        <text class="two">￥150.00</text>

        <view>

            <text class="three">146.05</text>

            <text class="four">927人购买</text>

        </view>

      </view>

      <view class="slideimgs2">

        <image src="/imges/鲜柚生活/烤鸡套餐.png"></image>

        <text class="one">限时抢159元/位</text>

        <text class="two">￥350.00</text>

        <view>

            <text class="three">146.05</text>

            <text class="four">927人购买</text>

        </view>

      </view>

      <view class="slideimgs2">

        <image src="/imges/鲜柚生活/只要999.png"></image>

        <text class="one">限时抢50元/位</text>

        <text class="two">￥87.00</text>

        <view>

            <text class="three">146.05</text>

            <text class="four">927人购买</text>

        </view>

      </view>

    </view>

  </scroll-view>

</view>

grapefruit.wxss页面

/* pages/grapefruit/grapefruit.wxss */

.header{

  height: 100px;

  background: -webkit-linear-gradient(top,#ffd900,white);

}



.header_img{

  padding-top: 5px;

  height: 20px;

  width: 20px;

  float: left;

}

.section{

  padding-top: 5px;

  float: left;

}

.flextest{

  display: flex;

  margin-bottom: 15px;

}

.header_input{

  padding: 5px;

  flex: 1;

  margin-left: 5px;

  margin-right: 10px;

  /* width: 250px; */

  /* border: 1px solid black; */

  border-radius: 100px;

  float: left;

  background: #fff8d2;

  

}

.header_input navigator{

  

  color:rgb(165, 165, 165) ;

}

.h_bottom{

  /* display: flex; */

  margin-left: 15px;

  margin-right: 15px;

}

.header_bottom{

  display: flex;

  flex: 1;

  margin: 0 auto;

  height: 80px;

  border-radius: 19px;

  background: white;

  justify-content: space-around;

}

.header_bottom view image{

  height: 40px;

  width: 40px;

  margin :auto;

  

}



.header_bottom view{



  box-sizing: border-box;

  display: flex;

  flex-direction: column;

}

.header_bottom view text{

  margin-bottom: 10px;

  font-size: 10px;

  text-align: center;

}

.middle_imgs{

  margin-top: 30px;

  height: 100px;

}

.img{

  width: 100%;

  height: 100px;

}

.texts{

  width: 100%;

  height: 20px;

  line-height: 20px;

  /* border: 1px solid black; */

  box-sizing: border-box;

  padding: 13px;

  margin-bottom: 20px;

}

.textone_1{

  margin-left: 2px;

  font-weight:bold;

}

.textone_2{

  color: rgb(255, 94, 0);

  float: right;

  font-weight:bold;

  font-size: 13px;

}

.scroll_img{

  display: flex;

  display:-webkit-box; 

  flex-direction: column;

  /* border: 1px solid black; */

}

.slideimgs{



  margin-left: 12px;

  width: 130px;

  height: 100px;

  /* box-shadow: 5px 5px 5px gray; */

}

.slideimgs image{

  width: 135px;

  height:75px;

  border-radius: 3px;

  margin-bottom: 10px;

}

.scroll_text1{

  position: relative;

  top: -60px;

  left: 10px;

  color: white;

  font-size: 14px;

}

.scroll_text2{

  position: relative;

  top: -65px;

  left: 10px;

  color: white;

  font-size: 13px;

}

.line{



  margin: 0 auto;

  width: 295px;

  border-top: 1px solid rgb(204, 204, 204);

}

.footer_scroll_img{

  display: flex;

  width: 100%;

  height: 200px;

  display:-webkit-box; 

  flex-direction: column;

  /* border: 1px solid black; */

}

.slideimgs2{

  margin-left: 12px;

  width: 135px;

  height: 170px;

  box-shadow: 0px 0px 5px  gray;

  border-radius: 5px;

}

.slideimgs2 image{

  width: 135px;

  height:75px;

  border-radius: 5px;

  margin-bottom: 10px;

}

.footer_scroll_img .slideimgs2 .one {

  font-weight: bold;

}

.slideimgs2 .two{

  font-weight: bold;

    color: orangered;

}

.slideimgs2 .three{

  color: rgb(196, 196, 196);

  text-decoration:line-through;

  font-size: 14px;

}

.slideimgs2 .four{

  float: right;

  font-size: 14px;

}

search.wxml页面

<!--pages/search/search.wxml-->

<view class="big">

  <view class="box">

  <image src="../../imges/鲜柚生活/搜索.png" style="width: 20px; height: 20px; float: left;"> </image>

    <input type="text" placeholder="找吃喝玩乐，先上鲜柚生活"/>

</view>

</view>

<view>

  <view class="hot">热门搜索</view>

  <text class="small">自助</text>

  <text class="small">集美</text> 

  <text class="small">SM城市广场</text>

  <text class="small">烤肉</text>

  <text class="small">火锅</text>

  <text class="small">海沧</text>

  <text class="small">湖里万达</text>

  <text class="small">KTV</text>

  <text class="small">世贸</text>

  <text class="small">眼镜</text>



  <view class="like">猜你喜欢</view>

  <text class="small">自助</text>

  <text class="small">集美</text> 

  <text class="small">SM城市广场</text>

  <text class="small">烤肉</text>

  <text class="small">火锅</text>

  <text class="small">海沧</text>

  <text class="small">湖里万达</text>

  <text class="small">KTV</text>

  <text class="small">世贸</text>

  <text class="small">眼镜</text>

</view>

search.wxss页面

/* pages/search/search.wxss */

.big{

  display: flex;

  background: #ffd900;

}

.box{

  padding: 5px;

  flex: 1;

  margin: 10px;

  /* width: 250px; */

  /* border: 1px solid black; */

  border-radius: 100px;

  float: left;

  background: #fff8d2;

}

.hot{

  margin-top: 10px;

  padding-left: 10px;

  border-left: 3px solid red;

  font-weight: bold;

}

.like{

  margin-top: 10px;

  padding-left: 10px;

  border-left: 3px solid blue;

  font-weight: bold;

}

.small{

  margin: 10px;

  display: inline-block;

  padding: 5px;

  border-radius: 3px;

  background: rgb(236, 236, 236);

}