<view class="swipe">
<view class="swipe-item">
<view class="swipe-item-title">
<span>中超第28轮</span>
<span>10月21日</span>
<span>08:00</span>
</view>
<view class="swipe-item-content">
<view class="swipe-item-content-left">
<image src="../../static/home/team_icon_test.png"></image>
<span>南通支云</span>
</view>
<view class="swipe-item-content-middle">
<span>1</span>
<span>-</span>
<span>1</span>
</view>
<view class="swipe-item-content-right">
<image src="../../static/home/team_icon_test.png"></image>
<span>南通支云</span>
</view>
</view>
<view class="swipe-item-footer">
<span><van-icon name="play-circle-o" />集锦回放</span>
</view>
</view>
</view>
css 主要用的是less
.swipe {
scrollbar-width: thin;
-ms-overflow-style: none;
&::-webkit-scrollbar {
width: 0.1rem;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
width: 100%;
overflow-x: auto;
display: flex;
&-item {
background: #f8f8f8;
box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 6px 6px 6px 6px;
opacity: 1;
width: 50%;
height: 200rpx;
font-size: 26rpx;
.d-justify-content-center();
flex-direction: column;
padding: 10rpx;
margin: 10rpx 20rpx;
position: relative;
flex-shrink: 0;
image {
width: 32rpx;
height: 32rpx;
}
&-title {
.d-justify-content-sa();
margin-bottom: 30rpx;
}
&-content {
margin-bottom: 15rpx;
.d-justify-content-sa();
&-left,
&-right {
flex: .3;
.d-flex-col();
text-align: center;
align-items: center;
span {
&:not(:nth-child(2)) {
width: 100px;
.text-overflow-ell ()
}
}
}
&-middle {
flex: .4;
.d-justify-content-center();
align-items: center;
font-size: 30rpx;
font-weight: 700;
span {
&:nth-child(2) {
margin: 0 20rpx;
}
}
}
}
&-footer {
.d-justify-content-center();
align-items: center;
background-color: #B2301B;
color: #fff;
position: absolute;
bottom: 0;
width: 95%;
border-radius: 10rpx;
padding: 0;
}
}
}