css——分栏样式

案例样式

案例代码

使用伪类处理

<view class="twoBox">
	<view class="numBox">
		<view class="num">1999view>
		<view class="numTxt">关注view>
	view>
	<view class="numBox">
		<view class="num">1999view>
		<view class="numTxt">粉丝view>
	view>
	<view class="numBox">
		<view class="num">1999view>
		<view class="numTxt">获赞数view>
	view>
view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

.twoBox{
	margin: 0 25rpx;
	height: 113rpx;
	background: rgba(255,255,255,0.45);
	border-radius: 15rpx 15rpx 15rpx 15rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.numBox{
		text-align: center;
		flex: 1;
		flex-shrink: 0;
		position: relative;
		.num{
			font-weight: bold;
			font-size: 28rpx;
			color: #3D3D3D;
		}
		.numTxt{
			font-size: 24rpx;
			color: #3D3D3D;
			margin-top: 10rpx;
		}
	}
	.numBox::after{
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1rpx;
		height: 52rpx;
		background-color: #CCD0D4;
	}
	.numBox:last-child::after {
	    display: none;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38