对三个文件进行了加工,主要是为了实现添加收支的界面
app.json
{
"pages":[
"pages/index/index",
"pages/item/item"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2297f1",
"navigationBarTitleText": "灵犀账本",
"navigationBarTextStyle":"white"
}
}
item.wxml
<!--item.wxml-->
<view class="page">
<view class="section">
<view class="section__title">标题</view>
<input bindinput="bindTitleInput" placeholder="内容" value="{{title}}" />
</view>
<view class="section">
<view class="section__title">类型</view>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio">
<radio class="radio" value="income" checked="true"/>收入
</label>
<label class="radio">
<radio class="radio" value="cost"/>支出
</label>
</radio-group>
</view>
<view class="section">
<view class="section__title">金额</view>
<input bindinput="bindAccountInput" type="number" placeholder="请输入数字,不加正负号"/>
</view>
<button class="button" type="primary">添加</button>
</view>
item.wxss
.page {
min-height: 100%;
flex: 1;
background-color: #FBF9FE;
font-size: 32rpx;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
overflow: hidden;
}
.page input{
padding: 20rpx 30rpx;
background-color: #fff;
}
.section{
margin:40rpx 0;
}
.section_gap{
padding: 0 30rpx;
}
.section__title{
margin-bottom: 16rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.section_gap .section__title{
padding-left: 0;
padding-right: 0;
}
.radio-group {
margin:50rpx;
font-size:25rpx;
}
.radio{
margin-right: 20rpx;
}
/**按钮**/
.button {
margin:10rpx;
}