The applet uses the step bar vant steps in vant

Today, I used to write a small program page vant-steps , Encountered two problems in the use , Record it here
Question 1 , introduce vant -steps after , The display of the last node

I do not know! Will someone else's computer have this problem , Anyway, mine is , No effect , But I'm not happy , I watched it in the developer tool for a long time , That's the icon that went up , Then we use transform：translate Just move it down
So the solution came out , Find the corresponding Selectors

.van-step--horizontal:last-child .van-step__circle-container .index--van-step__icon{
    
  transform: translate(3rpx,31rpx);
  background: #fff;
}

.van-step--horizontal:last-child .van-step__circle-container .van-step__circle{
    
  transform: translate(3rpx,36rpx);
  background: #fff;
}

Why are there two , One is successful , One is not successful , So there are two things to change

Question two ：
Description information ： Display in two lines

That's the small print here , Let it show two lines
to glance at How to use this component

At first, I just wanted to steps Medium desc Add a to the string in \n That's all right. , Who knows this method will not work , Later, I tried \n Switch to br No labels ,

The final solution Use css Of white-space:pre-wrap Also use... In the string \n

stay css in white-space Property is used to control whitespace in the text of the container 、 tabs 、 Display of line breaks, etc , Values are ：

normal： Default , Ignore all whitespace in the text 、 A newline ; Only text exists
Or when the text box reaches the constraint , Text will wrap
nowrap： and normal similar , Ignore all whitespace in the text 、 A newline ; It will not wrap automatically when encountering the width constraint of the box , The text only has br Only when the line changes
pre： Leave the text blank 、 A newline ; It will not wrap automatically when encountering the width constraint of the box , Text exists
Or when there is a newline in the text , Text will wrap
pre-wrap： and pre similar , Leave the text blank 、 A newline ; Text exists
Or when there is a newline in the text , Or when you encounter the width constraint of the box , Text will wrap
pre-line： Ignore the white space in the text ; Text exists
Or when there is a newline in the text , Or when you encounter the width constraint of the box , Text will wrap