lcoco/pages/login/localPhoneLogin.vue

<template>
  <view>
    <en-nav @navHeight="setNavHeight" ></en-nav>
    <view class="login-box" :style="{'height':'calc(100vh - '+navHeight+'px)'}">
      <view class="login-top">
        <view class="login-title">
          <text class="title-item sys-color-black sys-weight-600">登录/注册</text>
          <text class="title-item title-two sys-color-black sys-weight-600">更精彩</text>
        </view>
        <view class="local-txt sys-color-gray-9">本机号码登录</view>
        <view class="local-phone sys-color-black sys-weight-400">188****4188</view>
        <view class="login-but sys-color-white sys-background-black">一键登录</view>
        <view class="other-phone sys-color-gray-6">其他手机号登录</view>
      </view>
      <view class="login-bottom">
        <view class="other-login">
          <view class="other-wire"></view>
          <view class="other-text sys-color-gray-9">其他登录方式</view>
          <view class="other-wire"></view>
        </view>
        <view class="login-icon">
          <image class="login-icon-img" src="/static/img/login/weixin.png" mode="aspectFill"></image>
          <image class="login-icon-img" src="/static/img/login/apple.png" mode="aspectFill"></image>
        </view>
        <login-agreement :type="2"></login-agreement>
      </view>


    </view>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import LoginAgreement from "@/pages/login/model/loginAgreement";
export default {
  name:'localPhoneLogin',
  components: {LoginAgreement, EnNav},
  data() {
    return {
      navHeight:40
    }
  },
  methods: {
    setNavHeight(navHeight){
      console.log('navHeight:'+navHeight)
      this.navHeight=navHeight
    }
  }
}
</script>

<style scoped lang="scss">

.login-box{
  padding: 82rpx 80rpx 0 80rpx;
  box-sizing: border-box;
  position: relative;
  .login-top{
    .login-title{
      padding-bottom: 60rpx;
      .title-item{
        font-size: 48rpx;
      }
      .title-two{
        margin-left: 30rpx;
      }

    }
    .local-txt{
      padding-bottom: 40rpx;
      font-size: 24rpx;
    }
    .local-phone{
      padding-bottom: 120rpx;
      font-size: 48rpx;
    }
    .login-but{
      border-radius: 200rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
    }
    .other-phone{
      padding-top: 60rpx;
     font-size: 28rpx;
      text-align: center;
    }
  }
  .login-bottom{
    padding-bottom: calc(62rpx + env(safe-area-inset-bottom));
    position: absolute;
    bottom: 0;
    left: 80rpx;
    width:calc(100vw - 160rpx);
    .other-login{
      width:calc(100vw - 160rpx);
      display: flex;
      justify-content: space-between;
      .other-text{
        font-size: 24rpx;
        margin: 0 14rpx;
        height: 45rpx;
        line-height: 45rpx;
      }
      .other-wire{
        margin-top: 22rpx;
        width:calc((100vw - 348rpx) / 2);
        height: 1rpx;
        background-color: #E0E0E0;
      }
    }
    .login-icon{
      padding:40rpx 156rpx 80rpx 156rpx;
      display: flex;
      justify-content: space-between;
      .login-icon-img{
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
      }
    }
  }


}

</style>