Flex佈局實戰:支付寶首頁
index.wxml
<view class="container">
<!-- 藍色部分 -->
<view class="blue-group">
<!-- 頂部部分 -->
<view class="top-group">
<!-- 左邊搜索框 -->
<view class="search-group">
<input class="search-input" placeholder-class="input" placeholder="螞蟻花唄"></input>
</view>
<!-- 右邊的按鈕 通訊錄 -->
<view class="more-group">
<image src="../images/01.png"></image>
<image src="../images/02.png"></image>
</view>
</view>
<!-- 主菜單 -->
<view class="main-menu-group">
<view class="main-menu">
<image src="../images/1.png"></image>
<text>掃一掃</text>
</view>
<view class="main-menu">
<image src="../images/2.png"></image>
<text>付錢</text>
</view>
<view class="main-menu">
<image src="../images/3.png"></image>
<text>收錢</text>
</view>
<view class="main-menu">
<image src="../images/4.png"></image>
<text>卡包</text>
</view>
</view>
</view>
<!-- 工具欄 白色部分 -->
<view class="white-group">
<view class="menu-group">
<image src="../images/5.png"></image>
<text>轉賬</text>
</view>
<view class="menu-group">
<image src="../images/6.png"></image>
<text>信用卡還款</text>
</view>
<view class="menu-group">
<image src="../images/7.png"></image>
<text>充值中心</text>
</view>
<view class="menu-group">
<image src="../images/8.png"></image>
<text>餘額寶</text>
</view>
<view class="menu-group">
<image src="../images/9.png"></image>
<text>淘票票電影</text>
</view>
<view class="menu-group">
<image src="../images/10.png"></image>
<text>滴滴出行</text>
</view>
<view class="menu-group">
<image src="../images/11.png"></image>
<text>生活繳費</text>
</view>
<view class="menu-group">
<image src="../images/12.png"></image>
<text>芝麻信用</text>
</view>
<view class="menu-group">
<image src="../images/13.png"></image>
<text>火車票機票</text>
</view>
<view class="menu-group">
<image src="../images/14.png"></image>
<text>螞蟻借唄</text>
</view>
<view class="menu-group">
<image src="../images/15.png"></image>
<text>高德打車</text>
</view>
<view class="menu-group">
<image src="../images/16.png"></image>
<text>更多</text>
</view>
</view>
</view>
index.css
.blue-group{
background: #1e82d2;
padding: 20rpx;
}
/* 頂部區域 */
.blue-group .top-group{
height: 58rpx;
width: 100%;
display: flex;
}
.top-group .search-group{
flex: 1;
display: flex;
}
.search-group .search-input{
flex: 1;
background-color: #1a71b7;
border-radius: 4px;
padding: 0 10rpx;
font-size: 24rpx;
height: 50rpx;
}
.search-group .input{
color: #fff;
}
.top-group .more-group{
flex-basis: 180rpx;
display: flex;
justify-content: space-evenly;
}
.top-group .more-group image{
width: 50rpx;
height: 50rpx;
}
/* 主菜單 */
.blue-group .main-menu-group{
margin-top: 30rpx;
display: flex;
justify-content: space-around;
margin-bottom: 20rpx;
}
.main-menu-group .main-menu{
width: 100rpx;
height: 120rpx;
text-align: center;
}
.main-menu image{
height: 70rpx;
width: 70rpx;
}
.main-menu text{
font-size: 32rpx;
color: #fff;
}
.white-group{
background: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 20rpx;
}
.white-group .menu-group{
width: 180rpx;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-bottom: 40rpx;
}
.white-group .menu-group image{
width: 54rpx;
height: 50rpx;
}
.white-group .menu-group text{
font-size: 32rpx;
}