纯css实现的swipe滑块

<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 (Chrome, Safari) */
		&::-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;

			}
		}

	}