教室預約微信小程序 畢業設計（3）預約填寫頁面

wxml代碼

<view>
    <image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<view class="xinxi">
    <view class="xinxi_xiangmu">
        <view class="xinxi_xiangmu1">預定時間</view>
        <view class="xinxi_xiangmu2">2020-06-12（星期5）</view>
    </view>
    <view class="xinxi_xiangmu">
        <view class="xinxi_xiangmu1">預定教室</view>
        <view class="xinxi_xiangmu2">教室02（第3節）</view>
    </view>    
    <view class="xinxi_xiangmu">
        <view class="xinxi_xiangmu1">主講老師</view>
        <view class="xinxi_xiangmu2"><input class="i1" type="text" /></view>
    </view>    
    <view class="xinxi_xiangmu">
        <view class="xinxi_xiangmu1">主講課程</view>
        <view class="xinxi_xiangmu2"><input class="i1" type="text" /></view>
    </view>     
    <view class="xinxi_xiangmu">
        <view class="xinxi_xiangmu1">聯繫電話</view>
        <view class="xinxi_xiangmu2"><input class="i1" type="text" /></view>
    </view>    
    <view class="xinxi_xiangmu">
        <view class="xinxi_xiangmu1">備註說明</view>
        <view class="xinxi_xiangmu2"><textarea class="t1" ></textarea></view>
    </view>    
    <view class="xinxi_xiangmu noborder">
        <button class="tijiao" bindtap="toList">提交預約</button>
    </view>    

</view>

wxss代碼

/* pages/yuyue/add.wxss */
.ad01{
    width: 100%;
}
.xinxi{
    padding: 5px;
}
.xinxi_xiangmu{
    padding: 5px;
    border-bottom: 1px solid gainsboro;
    display: flex;
}
.noborder{border: 0px;}
.xinxi_xiangmu1{
    width: 5em;
}
.xinxi_xiangmu2{
    flex-grow: 1;
}
.i1{border: 1px solid gainsboro;}
.t1{
  width: 100%;
  height: 3em;
  border: 1px solid gainsboro;
}

.tijiao{
    margin: 10px;
    width: 100%;
    background-color: orangered;
    color: white;
}