template:
<ul class=”item policy” >
<li v-for=”(item,index) in listDat” :key=”index” @click=”hedchange(index)”>
<div class=”li-con” @click=”come(‘/policyPublicity’,item)” :class=”{color1: (index % 4) == 0, color2: (index % 4) == 1, color3: (index % 4) == 2, color4: (index % 4) == 3}”>
<div>
<h5>{{item.resourceTypeName}}</h5>
<span class=”sec”>{{item.remark}}</span>
</div>
<p>
<span class=”num”>{{item.num}}</span>
</p>
</div>
</li>
</ul>
</div>
style:
.policyhome {
width: 100%;
height: 100%;
margin-top:-.1rem;
}
main {
width: 100%;
margin: 0 auto;
display: flex;
flex-flow: column;
align-items: center;
flex-wrap: wrap;
margin-top: .75rem;
}
main .item {
width:100%;
height: .85rem;
margin-bottom: .1rem;
.li-con{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 .136364rem;
width: calc(100% – .272727rem);
}
h5{
font-size: .163636rem;
font-weight: bold;
margin-bottom: .118182rem;
}
.sec{
font-size: .127273rem;
color: #666666;
}
.num{
font-size: .145455rem;
}
.color1{
h5, .num{
color: #5CB5F0;
}
}
.color2{
h5, .num{
color: #828BC2;
}
}
.color3{
h5, .num{
color: #8EC665;
}
}
.color4{
h5, .num{
color: #F0C142;
}
}
}
main .item li{
width: 95%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
margin-top: .136364rem;
margin-left: 0.1rem;
box-shadow: 2px 3px 10px 0px rgba(0, 0, 0, 0.08);
border-radius: 4px;
}
main .item .active{
background:rgba(31,142,146,0.1);
}
main .item li dl dt img {
width:.4rem;
height:.4rem;
border-radius:50%;
}
main .item li dl dd {
color: #000000;
padding-left: .05rem;
}
main .item li p{
display: flex;
align-items: center;
margin-right:.1rem;
}
main .item li p img{
width:.14rem;
height:.24rem;
margin-right:.1rem;
}
main .item li p span{
font-size:.12rem;
}
这个可能是个最笨的方法了，如果你有好的方法给我分享一下！