效果图:
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);
}