金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

75 lines
1.5 KiB

  1. <template>
  2. <view>
  3. <lf-nav title="登录/注册" :showIcon="true" bgColor="#fff"></lf-nav>
  4. <view class="illustration">
  5. <image class="img" src="../../../static/images/empty.png" mode="aspectFill"></image>
  6. </view>
  7. <view class="fixed-btn">
  8. <button class="btn1" hover-class="lf-opacity" @click="toPhoneLogin">手机号登录</button>
  9. <button class="btn2" hover-class="lf-opacity" @click="getUserInfo">微信授权登录</button>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. methods: {
  16. getUserInfo(){
  17. uni.getUserProfile({
  18. desc: '我们将获取到的信息用于展示',
  19. lang: 'zh_CN',
  20. complete: result => {
  21. console.log(result);
  22. if(result.errMsg == 'getUserProfile:ok'){
  23. console.log("获取成功!");
  24. }
  25. }
  26. })
  27. },
  28. toPhoneLogin(){
  29. this.$url('/pages/user/loginType/loginType');
  30. }
  31. }
  32. }
  33. </script>
  34. <style lang="scss" scoped>
  35. .illustration{
  36. width: 750rpx;
  37. height: 750rpx;
  38. position: fixed;
  39. top: 44%;
  40. left: 0;
  41. margin-top: -375rpx;
  42. .img{
  43. width: 100%;
  44. height: 100%;
  45. }
  46. }
  47. .fixed-btn{
  48. width: 630rpx;
  49. height: max-content;
  50. position: fixed;
  51. left: calc(50% - 315rpx);
  52. top: calc(46% + 375rpx);
  53. display: flex;
  54. justify-content: space-between;
  55. .btn1, .btn2{
  56. width: 300rpx;
  57. height: 100rpx;
  58. border-radius: 60rpx;
  59. border: 1rpx solid #15716E;
  60. box-sizing: border-box;
  61. line-height: 100rpx;
  62. font-size: 32rpx;
  63. }
  64. .btn1{
  65. background-color: #F3F8F8;
  66. color: #15716E;
  67. }
  68. .btn2{
  69. background-color: #15716E;
  70. color: #FFFFFF;
  71. }
  72. }
  73. </style>