wxml代码
<!--pages/toupiao/baoming.wxml-->
<view class="neirong">
<image class="neirong_zuo" src="/img/a1.png" mode="widthFix"></image>
<view class="neirong_zhong">宝宝姓名</view>
<input class="neirong_you" type="text" value="张三" />
</view>
<view class="h15"></view>
<view class="neirong">
<image class="neirong_zuo" src="/img/a2.png" mode="widthFix"></image>
<view class="neirong_zhong">宝宝性别</view>
<input class="neirong_you" type="text" value="男" />
</view>
<view class="neirong">
<image class="neirong_zuo" src="/img/a3.png" mode="widthFix"></image>
<view class="neirong_zhong">宝宝年龄</view>
<input class="neirong_you" type="text" value="2岁" />
</view>
<view class="neirong">
<image class="neirong_zuo" src="/img/a4.png" mode="widthFix"></image>
<view class="neirong_zhong">联系方式</view>
<input class="neirong_you" type="text" value="13512345678" />
</view>
<view class="h15"></view>
<view class="neirong">
<image class="neirong_zuo" src="/img/a5.png" mode="widthFix"></image>
<view class="neirong_zhong">参赛宣言</view>
<input class="neirong_you" type="text" value="宝宝可爱健康又大方" />
</view>
<view class="neirong">
<image class="neirong_zuo" src="/img/a6.png" mode="widthFix"></image>
<view class="neirong_zhong">上传照片</view>
</view>
<view class="zhaopian">
<view class="zhaopian_tu"><image class="tupian" src="/tupian/04.jpg" mode="widthFix"></image></view>
<view class="zhaopian_tu"><image class="tupian" src="/tupian/05.jpg" mode="widthFix"></image></view>
<view class="zhaopian_tu"><image class="tupian" src="/tupian/03.jpg" mode="widthFix"></image></view>
<view class="zhaopian_tu"><image class="tupian" src="/tupian/02.jpg" mode="widthFix"></image></view>
<view class="zhaopian_tu">
<image class="zhaopian_tu_add" src="/img/add01.png" mode="widthFix"></image>
<view class="zhaopian_tu_text">添加照片</view>
</view>
</view>
<button class="tijao">提交报名</button>
wxss代码
/* pages/toupiao/baoming.wxss */
page{
background-color: #f3f3f3;
}
.neirong{
display: flex;
background-color: white;
padding: 7px;
}
.neirong_zuo{
width: 25px;
padding: 0px 10px;
}
.neirong_zhong{
width: 5em;
}
.neirong_you{
flex-grow: 1;
color: gray;
text-align: right;
}
.h15{
height: 10px;
}
.zhaopian{
display: flex;
flex-wrap: wrap;
padding: 0px 5px 5px 5px;
background-color: white;
}
.zhaopian_tu{
width: 30%;
padding: 5px;
margin: 4px;
box-sizing: border-box;
display: flex;
flex-direction: column;
border:1px solid gainsboro;
align-items: center;
}
.tupian{
width: 100%;
}
.zhaopian_tu_add{
width: 80%;
}
.zhaopian_tu_text{
text-align: center;
color: gray;
font-size: 13px;
}
.tijao{
background-color: orangered;
color: white;
border-radius: 5px;
width: 90%;
}
