評選投票微信小程序 畢業設計 課程設計（5）提交報名信息

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%;
}