CSS はテキストの両側に水平線を実装し、CSS はテキストの両側に線を実装します

最初に効果を見てください。他の方法ではログインの両側に水平線があります

。コードは scss 構文を使用して次のとおりです。

uniappでは普通のhtmlであればviewをdivに置き換えるだけです。

    <view class="other-login">
      <view class="line"></view>
      <view class="other">
        <view class="text">其他方式登陆</view>
      </view>
    </view>

スクス

.other-login{
    
    
  display: flex;
  width: 80%;
  background: #ccc;
  height: 20px;
  margin: 0 auto;
  background-size: cover;
  position: relative;
  justify-content: center;
  align-items: center;
  .other{
    
    
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .text {
    
    
      background:#ccc;
      padding:0px 20px;
    }
  }
  .line{
    
    
    display: inline-block;
    width: 100%;
    border: 1px solid whitesmoke;
    background: whitesmoke;
    position: absolute;
  }
}