ミニプログラムリストテンプレート
今日はバイドゥで小さなプログラムリストページを作ってサークルを検索しましたが、テンプレートがありませんでした。自分で
写真を撮るのに2時間かかりました!真ん中の孤立した線は、電話に表示すると明るくなります。上のスクリーンショットは暗い色を示しています。
データは
無効であり、生きています。WXMLコードを記述してください。
<image class="imgs" src="http://pic.616pic.com/bg_w1180/00/03/32/ZMmnErVcVd.jpg!/fw/1120"></image>
<!--账号-->
<view class="inputView">
<image class="nameImage" src="../imgs/sosuo.png"></image>
<label class="loginLab">搜索</label>
<input class="inputText" placeholder="请输入申请人" bindinput="phoneInput" />
</view>
<view class="view">
<!-- 隔离线 -->
<view class="divLine1"></view>
<text>\n</text>
<view>
<text class="text1"> 申请人</text>
<text class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text class="executor"> 马化腾</text>
</view>
<!-- 分割线 -->
<view class="divLine"></view>
<view></view>
<view>
<text class="text2"> 结束时间 </text>
<text class="endtime">2020-10-14 10:09:33</text>
</view>
<!-- 隔离线 -->
<view class="divLine1"></view>
</view>
<view class="view">
<!-- 隔离线 -->
<view class="divLine1"></view>
<text>\n</text>
<view>
<text class="text1"> 申请人</text>
<text class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text class="executor"> 马化腾</text>
</view>
<!-- 分割线 -->
<view class="divLine"></view>
<view></view>
<view>
<text class="text2"> 结束时间 </text>
<text class="endtime">2020-10-14 10:09:33</text>
</view>
<!-- 隔离线 -->
<view class="divLine1"></view>
</view>
<view class="view">
<!-- 隔离线 -->
<view class="divLine1"></view>
<text>\n</text>
<view>
<text class="text1"> 申请人</text>
<text class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text class="executor"> 马化腾</text>
</view>
<!-- 分割线 -->
<view class="divLine"></view>
<view></view>
<view>
<text class="text2"> 结束时间 </text>
<text class="endtime">2020-10-14 10:09:33</text>
</view>
<!-- 隔离线 -->
<view class="divLine1"></view>
</view>
<view class="view">
<!-- 隔离线 -->
<view class="divLine1"></view>
<text>\n</text>
<view>
<text class="text1"> 申请人</text>
<text class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text class="executor"> 马化腾</text>
</view>
<!-- 分割线 -->
<view class="divLine"></view>
<view></view>
<view>
<text class="text2"> 结束时间 </text>
<text class="endtime">2020-10-14 10:09:33</text>
</view>
<!-- 隔离线 -->
<view class="divLine1"></view>
</view>
<view class="view">
<!-- 隔离线 -->
<view class="divLine1"></view>
<text>\n</text>
<view>
<text class="text1"> 申请人</text>
<text class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text class="executor"> 马化腾</text>
</view>
<!-- 分割线 -->
<view class="divLine"></view>
<view></view>
<view>
<text class="text2"> 结束时间 </text>
<text class="endtime">2020-10-14 10:09:33</text>
</view>
<!-- 隔离线 -->
<view class="divLine1"></view>
</view>
WXSS
.imgs{
width: 803rpx;
height: 390rpx;
}
/*分割线样式*/
.divLine{
background: #E0E3DA;
width: 100%;
height: 5rpx;
position: relative;
top: -13rpx;
left: -1rpx;
}
/*隔离线样式*/
.divLine1{
/* background: rgb(193, 190, 190); */
background: #edeeec;
width: 99%;
height: 14rpx;
}
.view{
position: relative;
top: -85rpx;
left: 4rpx;
}
.text1{
font-family:Microsoft YaHei;
position: relative;
top: -44rpx;
left: 51rpx;
font-size: 30rpx;
}
.text3{
font-family:Microsoft YaHei;
position: relative;
top: -27rpx;
left: 51rpx;
font-size: 30rpx;
}
.text2{
font-family:Microsoft YaHei;
position: relative;
top: -8rpx;
left: 36rpx;
font-size: 30rpx;
}
.applicant{
font-family: Microsoft YaHei;
position: relative;
top: -46rpx;
left: 405rpx;
font-size: 30rpx;
}
.executor{
font-family:Microsoft YaHei;
position: relative;
top: -27rpx;
left: 393rpx;
font-size: 30rpx;
}
.endtime{
font-family:Microsoft YaHei;
position: relative;
top: -3rpx;
left: 230rpx;
font-size: 30rpx;
}
/* 输入框 11*/
.inputView {
background-color: #fff;
line-height: 41px;
position: relative;
top: -141rpx;
left: 88rpx;
width: 557rpx;
border-radius: 12rpx;
}
.nameImage, .keyImage {
margin-left: 22px;
width: 32px;
height: 28px;
position: relative;
top: 16rpx;
left: -31rpx;
}
.loginLab {
margin: 15px 15px 15px 10px;
color: #545454;
font-size: 14px;
position: relative;
top: -2rpx;
left: -31rpx;
}
.inputText {
flex: block;
float: right;
text-align: right;
margin-right: 42px;
margin-top: -32px;
color: #cccccc;
font-size: 14px;
}