Mini Program Mini Program List Template

Mini Program List Template

Today, I did a small program list page on Baidu and searched a circle and there was no template. It took two hours to make a
picture by myself ! The isolated line in the middle is lighter in color when the phone is displayed. The screenshot above is darker. The

data is dead and made alive. Just write for
WXML code.

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