1、效果图
2、wxml
<view class="master"> <view class="home"> <view class="home1"> <view class="home2"> <image src="/image/home1.png" style="width:40px;height:40px;"></image> </view> <view class="home3">导航</view> </view> <view class="home1"> <view class="home2"> <image src="/image/home2.png" style="width:40px;height:40px;"></image> </view> <view class="home3">海边</view> </view> <view class="home1"> <view class="home2"> <image src="/image/home3.png" style="width:40px;height:40px;"></image> </view> <view class="home3">热气球</view> </view> <view class="home1"> <view class="home2"> <image src="/image/home4.png" style="width:40px;height:40px;"></image> </view> <view class="home3">自行车</view> </view> </view> <view class="helicopter"> <view class="helicopter1"> <image src="/image/helicopter.png" style="width:30px;height:30px;"></image> <text style="margin:10rpx;">我的飞机</text> </view> <view class="fly">想飞哪里></view> </view> <view class="thunder"> <view class="thunder1"> <image src="/image/thunder.png" style="width:30px;height:30px;"></image> <text style="margin:10rpx;">我的雷电数</text> </view> <view class="thunder2"> <view style="width:50%">10567<text class="ka">kA</text> </view> <view class="thunder3"> <view> <button class="mini-btn" type="warn" size="mini" style="rgb(0, 0, 0);border-radius: 98rpx;height:70rpx;line-height:70rpx;">雷电记录</button> </view> </view> </view> </view> <view class="stars"> <view class="stars1"> <view class="stars3"> <text style="margin-left:10rpx;">发现一个海星</text> </view> <view class="stars3"> <image style="width:30px;height:30px;margin-left:20rpx;" src="/image/photo.png"></image> <text style="margin-left:10rpx;color: rgb(192, 192, 192);">附近海星</text> </view> </view> <view class="stars2"> <image style="width:160px;height:140px;" src="/image/stars.png"></image> </view> </view> </view>
3、wxss
page{
background-color:rgb(249, 249, 249);
}
.home{
width: 90%;
height: 200rpx;
background-color: rgb(255, 255, 255);
margin-left: 5%;
margin-top: 50rpx;
display: flex;
flex-direction: row;
border-radius: 20rpx;
}
.home1{
width: 25%;
display: flex;
height: 200rpx;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 22rpx;
}
.home2{
display: flex;
}
.home3{
display: flex;
}
.helicopter{
height: 100rpx;
width: 90%;
background-color: rgb(255, 255, 255);
margin-left: 5%;
margin-top: 50rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
}
.helicopter1{
display: flex;
width: 50%;
align-items: center;
font-size: 24rpx;
margin-left: 20rpx;
}
.fly{
display: flex;
align-items: center;
justify-content:flex-end;
width: 50%;
font-size: 24rpx;
margin-right: 22rpx;
color:rgb(180, 182, 185);
}
.thunder{
height: 300rpx;
width: 90%;
background-color: rgb(255, 255, 255);
margin-left: 5%;
margin-top: 50rpx;
border-radius: 20rpx;
display: flex;
flex-direction: column;
}
.thunder1{
height: 150rpx;
display: flex;
align-items: center;
margin-left: 20rpx;
}
.thunder2{
height: 150rpx;
margin-left: 25rpx;
font-size: 48rpx;
display: flex;
flex-direction: row;
}
.ka{
font-size: 36rpx;
margin-left: 20rpx;
}
.thunder3{
display: flex;
width: 50%;
align-items: center;
justify-content:flex-end;
margin-right: 20rpx;
}
.stars{
height: 300rpx;
width: 90%;
background-color: rgb(255, 255, 255);
margin-left: 5%;
margin-top: 50rpx;
border-radius: 20rpx;
display: flex;
flex-direction: row;
}
.stars1{
width: 50%;
}
.stars2{
width: 50%;
}
.stars3{
height: 100rpx;
display: flex;
margin-left: 20rpx;
margin-top: 20rpx;
align-items: center;
}
请发表评论