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

上图：

代码：

// 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',})},
})

<!--pages/upInfo/upInfo.wxml--><view class="hhh"></view>
<view class="block" style="z-index: 3;"><view class="item p_r"><image class="loc" src="/img/loc.png"></image><view class="sheng">山东省</view></view><view class="item" style="border: none;"><image class="rrr" src="/img/rrr.png"></image><view class="title" catchtap="show_city_list" style="color:{{city?'#000':'#999'}}">{{city?city:"请选择地市"}}</view></view>
</view><view class="block"><view class="item "><view class="title p_r">用户姓名 <text>*</text> <input class="serrialNumber" value=""></input></view></view><view class="item"><view class="title p_r">业务流水号 <text>*</text> <input type="number" class="serrialNumber" value="17200615"></input></view><view class="detail">请联系营业员查询，并补充完整</view></view><view class="item"><view class="title p_r">业务号码 <text>*</text> <input type="number" class="serrialNumber" value=""></input></view><view class="detail">请联系营业厅查询，合约手机号或宽带账号</view></view><view class="item "><view class="title p_r">联系号码 <text>*</text> <input type="number" bindinput="num_input" class="serrialNumber" value=""></input></view></view>
</view><view class="btn" catchtap="nav_leaset">开始办理</view><view class="showTips" wx:if="{{showTips}}">{{tipsTxt}}</view><block wx:if='{{showCityList}}'><view class="cityBg"></view><scroll-view class="cityList" scroll-y="true"><block wx:for='{{cityList}}' wx:key=""><view class="cityName" style="padding-top: {{index==0?'250rpx':''}};" catchtap="select_item" id="{{item}}">{{item}}</view></block></scroll-view>
</block>

/* 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;
}

样式集（二）信息填写样式模板相关推荐

word精华样式篇之三使用样式集让所有文档风格统一
回顾:样式是样式是一组格式特征,例如字体名称.字号.颜色.段落对齐方式和间距. 一. 保存自己的专属样式我们将自己工作文档设置好了各级标题格式后,希望以后打开word就直接使用这种样式,在关闭当前文 ...
Word中样式与样式集
本文是对Word2010中样式与样式集的总结. 一.关于按钮1(下面有三个选项) "将所选内容保存为新快速样式":将所选文字的格式保存为一个快速样式,即先调整好文字格式再据此创建相 ...
如何用CDR创建样式与样式集
样式是一组定义对象属性的格式化属性,如轮廓或填充.例如,要定义轮廓样式,您可以指定轮廓宽度.颜色和线条类型等属性.要定义字符样式,您可以指定字体类型.字体样式和大小.文本颜色和背景色.字符位置.大写等 ...
百度地图 Api v3.0 自定义信息窗体样式
一.效果图二.代码注意要先引入: <script src="http://api.map.baidu.com/api?v=3.0&ak=IN43cyju8PVLGfSNwl ...
大学生简历信息填写模板
大学生简历信息填写模板篇1 姓名:__性别:_年龄:22健康状况:良好籍贯:__家庭背景:职工家庭所学专业:市场营销学历:本科(在读) 参业意向:可从事文秘工作.贸易.产品营销.活动策划.谈判 ...
ZXing生成多种不同样式的二维码
已经有好心人为我们做好了,我只做大自然的搬运工. 因为项目要做一个要求卡的功能,里面有一个功能是要可以生成多种样式的二维码满足用户爱美的要求,这里帮了我的大忙. 效果图地址双手奉上:https:// ...
微信扫码登录自定义二维码样式
微信扫码登录自定义二维码样式前言 Java生成data-url 1.工具类pom 2.代码实现将data-url赋值给href 前言今天在做web端扫码登录时,前端需要定义二维码的样式.官方文档 ...
Zxing生成自定义二维码样式
Zxing生成自定义二维码样式现在几乎每个app都带有二维码,但是google提供的zxing包,只给我们提供了核心的二维码算法,而开发过程中经常有自定义二维码的样式的需求,这时候我们就要自己写工具 ...
js二维码样式生成插件easy.qrcode.js
下载地址easy.qrcode.js二维码生成插件是一款原生js二维码类库,可以生产成各式各样的二维码样式.支持JavaScript模块化加载.支持点状风格,Logo,背景图片,规则色彩控制,标题等设 ...

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

样式集（二）信息填写样式模板相关推荐

最新文章

热门文章

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

样式集（二） 信息填写样式模板相关推荐

最新文章

热门文章

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

样式集（二）信息填写样式模板相关推荐