样式集（二） 信息填写样式模板

上图：

代码：

// pages/upInfo/upInfo.js
Page({
  data: {
    tipsTxt: "请填写正确的业务流水号",
    showTips: false,
    showCityList:false,
    city:"",
    cityList:["济南市","青岛市","枣庄市","东营市","烟台市","潍坊市","东营市","烟台市","潍坊市","东营市","烟台市","潍坊市","济宁市","泰安市","威海市","週博市"]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.set_showTips();
  },
  show_city_list(){
    this.setData({
      showCityList:true
    })
  },
  num_input(e){
    console.log('e',e.detail.value)

  },
  select_item(e){
    this.setData({
      city:e.target.id,
      showCityList:false
    })
  },
  set_showTips() {
    this.setData({
      showTips: true
    })
    setTimeout(() => {
      this.setData({
        showTips: false
      })
    }, 1500);
  },
  nav_leaset() {
    wx.navigateTo({
      url: '../lease/lease',
    })
  },
})

	
		
		山东省
	
	
		
		{{city?city:"请选择地市"}}
	




	
		用户姓名 * 
	

	
		业务流水号 * 
		请联系营业员查询，并补充完整
	

	
		业务号码 * 
		请联系营业厅查询，合约手机号或宽带账号
	

	
		联系号码 * 

	


开始办理

{{tipsTxt}}


	
	
		
			{{item}}
		
	

/* pages/upInfo/upInfo.wxss */
page{
  background-color: #f0f0f8;
  height: 100%;
}
.loc{
  width: 30rpx;
  height: 36rpx;
}
.hhh{
  height: 30rpx;
  background-color: #f0f0f8;
  z-index: 3;
  position: relative;
}
.block{
  background-color: white;
  margin-bottom: 30rpx;
  padding-left: 30rpx;
  z-index: 0;
  position: relative;
}
.item{
  padding-top: 36rpx;
  padding-bottom: 36rpx;
  border-bottom: 1rpx solid #f3f3f3;
}
.sheng{
  margin-left: 22rpx;
  margin-top: -3rpx;
}
.rrr{
  position: absolute;
  right: 30rpx;
  width: 17rpx;
  height: 29rpx;
  margin-top: 6rpx;
}
.title{
  color: #999999;
}
text{
  color: red;
}
.serrialNumber{
  color: #000;
  margin-left: 50rpx;
}
input{
  margin-left: 30rpx;
}
.detail{
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #333333;
}
.btn{
  background-color: #ff9000;
  width: 80%;
  margin-left: 10%;
  border-radius: 50rpx;
  margin-top: 60rpx;
  height: 100rpx;
  text-align: center;
  color: white;
  line-height: 100rpx;
  font-weight: 600;
  letter-spacing:4rpx;
}
.showTips{
  color: #ff8d00;
  background-color: #ffedd7;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
}
.cityList{
  position: fixed;
  height: 100%;
  top: 0rpx;
  width: 100%;
  text-align: center;
  z-index: 2;
  padding-bottom: -250rpx;
}
.cityBg{
  position: fixed;
  height: 100%;
  top: 0;
  width: 100%;
  z-index: 2;
  background:rgba(0,0,0,0.5);

}
.cityName{
  
  position: relative;
  opacity: 1;
  background-color: #f0f0f8;
  left: 60%;
  width: 40%;
  height: 99rpx;
  line-height: 99rpx;
  /* font-weight: 600; */
  border-bottom: 1rpx solid #cccccc;
  z-index: 3;
}