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">
        <other-login></other-login>
        <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";
import OtherLogin from "@/pages/login/model/otherLogin";
export default {
  name:'localPhoneLogin',
  components: {OtherLogin, 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);
  }


}

</style>