This commit is contained in:
SelfRidicule 2024-07-31 14:17:01 +08:00
parent 736c4f7fab
commit ad81e202fd
2 changed files with 93 additions and 1 deletions

View File

@ -1,5 +1,20 @@
<view class="containerView public"> <view class="containerView public">
<view class="topHead">
<view class="progressView">
<view class="point">
<view class="msgView">派单信息</view>
</view>
<view class="line"></view>
<view class="point">
<view class="msgView">派单信息</view>
</view>
<view class="line"></view>
<view class="point activity">
<view class="msgActivityView">派单信息</view>
</view>
</view>
</view>
</view> </view>

View File

@ -1,3 +1,80 @@
.containerView.public { .containerView.public {
background: none; background: none;
} }
.topHead {
border: 1rpx solid transparent;
background: white;
height: 400rpx;
}
.topHead .progressView {
display: flex;
justify-content: flex-start;
align-items: center;
margin: 100rpx;
}
.topHead .progressView .line {
flex: 1;
height: 4rpx;
background: #cccccc;
margin: 0 4rpx;
}
.topHead .progressView .point {
position: relative;
width: 20rpx;
height: 20rpx;
border-radius: 20rpx;
background: #cccccc;
}
.topHead .progressView .point.activity {
background: #2d7cf6;
}
.topHead .progressView .point .msgView {
position: absolute;
bottom: calc(100% + 20rpx);
left: 50%;
transform: translateX(-50%);
width: 140rpx;
word-break: break-all;
font-size: 24rpx;
color: #cccccc;
text-align: center;
}
.topHead .progressView .point .msgActivityView {
position: absolute;
bottom: calc(100% + 30rpx);
left: 50%;
transform: translateX(-50%);
width: 140rpx;
border-radius: 30rpx;
padding: 8rpx 0;
word-break: break-all;
font-size: 24rpx;
color: white;
text-align: center;
background: #2d7cf6;
}
.topHead .progressView .point .msgActivityView::after {
content: '';
display: block;
border-top: 18rpx solid #2d7cf6;
border-bottom: 20rpx solid transparent;
border-left: 20rpx solid transparent;
border-right: 20rpx solid transparent;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}