For mobile terminal 1 using the stylus pixel line

In the definition of public function in mixin.stylus

 1 border-1px($color)
 2     position: relative
 3     &:after
 4         display: block
 5         position: absolute
 6         left: 0
 7         bottom: 0
 8         width: 100%
 9         border-top: 1px solid $color
10         content: ''

Defined scaling devices at different dpi in base.stylus

 1 @media (-webkit-min-device-pixel-ratio:1.5) , (min-device-pixel-ratio:1.5)
 2     .border-1px
 3         &::after
 4             -webkit-transform: scaleY(0.7)
 5             transform: scaleY(0.7)
 6 @media (-webkit-min-device-pixel-ratio:2) , (min-device-pixel-ratio:2)
 7     .border-1px
 8         &::after
 9             -webkit-transform: scaleY(0.5)
10             transform: scaleY(0.5)

Using the function in the border-1px component vue

 1 @import '~common/stylus/mixin.styl';
 2   .tab
 3     display: flex
 4     width: 100%
 5     height: 40px
 6     line-height 40px
 7     border-1px(rgba(7,17,27,0.1))
 8     .tab-item
 9       flex-grow: 1
10       text-align: center