wxml代码
<view>
<image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<view class="shuju">
<view class="shuju_xiangmu">
<view class="shuju_xiangmu_shang">196</view>
<view class="shuju_xiangmu_xia">报名数</view>
</view>
<view class="shuju_xiangmu">
<view class="shuju_xiangmu_shang">53698</view>
<view class="shuju_xiangmu_xia">总票数</view>
</view>
<view class="shuju_xiangmu no_border_right">
<view class="shuju_xiangmu_shang">1987585</view>
<view class="shuju_xiangmu_xia">访问量</view>
</view>
</view>
<view class="chaxun">
<input class="chaxun_zuo" type="text" placeholder="请输入编号或者姓名查询"></input>
<image class="chaxun_you" src="/img/cx02.png" mode="widthFix"></image>
</view>
<view class="liebiao">
<view class="liebiao_xiangmu">
<navigator url="/pages/toupiao/xiangqing" class="liebiao_xiangmu1">
<image src="/tupian/01.jpg" class="liebiao_xiangmu1_tupian" mode="widthFix"></image>
</navigator>
<view class="liebiao_xiangmu2">
<view class="liebiao_xiangmu2_zuo">001号</view>
<view class="liebiao_xiangmu2_you">赵天明</view>
</view>
<view class="liebiao_xiangmu3">
<view class="liebiao_xiangmu3_zuo">3678票</view>
<view class="liebiao_xiangmu3_you">投一票</view>
</view>
</view>
<view class="liebiao_xiangmu">
<navigator url="/pages/toupiao/xiangqing" class="liebiao_xiangmu1">
<image src="/tupian/02.jpg" class="liebiao_xiangmu1_tupian" mode="widthFix"></image>
</navigator>
<view class="liebiao_xiangmu2">
<view class="liebiao_xiangmu2_zuo">001号</view>
<view class="liebiao_xiangmu2_you">赵天明</view>
</view>
<view class="liebiao_xiangmu3">
<view class="liebiao_xiangmu3_zuo">3678票</view>
<view class="liebiao_xiangmu3_you">投一票</view>
</view>
</view>
<view class="liebiao_xiangmu">
<navigator url="/pages/toupiao/xiangqing" class="liebiao_xiangmu1">
<image src="/tupian/03.jpg" class="liebiao_xiangmu1_tupian" mode="widthFix"></image>
</navigator>
<view class="liebiao_xiangmu2">
<view class="liebiao_xiangmu2_zuo">001号</view>
<view class="liebiao_xiangmu2_you">赵天明</view>
</view>
<view class="liebiao_xiangmu3">
<view class="liebiao_xiangmu3_zuo">3678票</view>
<view class="liebiao_xiangmu3_you">投一票</view>
</view>
</view>
<view class="liebiao_xiangmu">
<navigator url="/pages/toupiao/xiangqing" class="liebiao_xiangmu1">
<image src="/tupian/04.jpg" class="liebiao_xiangmu1_tupian" mode="widthFix"></image>
</navigator>
<view class="liebiao_xiangmu2">
<view class="liebiao_xiangmu2_zuo">001号</view>
<view class="liebiao_xiangmu2_you">赵天明</view>
</view>
<view class="liebiao_xiangmu3">
<view class="liebiao_xiangmu3_zuo">3678票</view>
<view class="liebiao_xiangmu3_you">投一票</view>
</view>
</view>
</view>
wxss代码
/* pages/index/index.wxss */
.ad01{
width: 100%;
}
.shuju{
display: flex;
}
.shuju_xiangmu{
flex-grow: 1;
justify-content: center;
border-right:1px solid gainsboro;
}
.no_border_right{
border:0;
}
.shuju_xiangmu_shang{
text-align: center;
color: gray;
font-size: 12px;
padding: 5px;
}
.shuju_xiangmu_xia{
text-align: center;
color: orange;
font-weight: bold;
font-size: 14px;
}
.chaxun{
background-color:#f2f2f2;
display: flex;
margin: 10px;
padding: 5px;
}
.chaxun_zuo{
flex-grow: 1;
}
.chaxun_you{
width: 25px;
}
.liebiao{
padding: 5px;
display: flex;
flex-wrap: wrap;
}
.liebiao_xiangmu{
width: 48%;
margin: 3px;
padding: 5px;
box-sizing: border-box;
border:1px solid #f3f3f3;
box-shadow: 2px 2px 3px gainsboro;
}
.liebiao_xiangmu1{
}
.liebiao_xiangmu1_tupian{
width: 100%;
}
.liebiao_xiangmu2{
display: flex;
color: gray;
}
.liebiao_xiangmu2_zuo{
flex-grow: 1;
}
.liebiao_xiangmu2_you{
}
.liebiao_xiangmu3{
display: flex;
}
.liebiao_xiangmu3_zuo{
flex-grow: 1;
color: orangered;
}
.liebiao_xiangmu3_you{
background-color: orangered;
color: white;
flex-grow: 1;
text-align: center;
}
