css

assets/css/mine/login.scss

 .page-login {
+    padding: 0 60rpx;
+    background: linear-gradient(200deg, #d6e8ff 0%, #ffffff 277px);
     .logo {
         width: 170rpx;
         height: 82rpx;
     }
+    .tab {
+        margin-top: 80rpx;
+        .box {
+            font-size: 32rpx;
+            color: #919399;
+            &:first-child {
+                margin-right: 66rpx;
+            }
+            &.curr {
+                font-weight: 600;
+                color: #292b33;
+            }
+        }
+    }
+    .tip {
+        margin-top: 16rpx;
+        margin-bottom: 40rpx;
+        padding-left: 24rpx;
+        height: 60rpx;
+        background: #fff8f2;
+        border-radius: 0px 30rpx 30rpx 30rpx;
+        .iconfont {
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #f98119;
+            margin-right: 16rpx;
+        }
+        .tt {
+            font-size: 22rpx;
+            color: #f98119;
+        }
+    }
+    .input-box {
+        height: 88rpx;
+        background: #f5f5f7;
+        border-radius: 10rpx;
+        &.mobile {
+            .picker-box {
+                padding-left: 24rpx;
+                padding-right: 16rpx;
+                width: 159rpx;
+                height: 40rpx;
+                border-right: 1px solid #c2c4cc;
+                .uni-input {
+                    font-size: 26rpx;
+                    color: #484b59;
+                }
+                .iconfont {
+                    font-size: 32rpx;
+                }
+            }
+            .uni-input {
+                font-size: 26rpx;
+                text-indent: 23rpx;
+            }
+        }
+        &.code {
+            padding-right: 24rpx;
+            .uni-input {
+                text-indent: 23rpx;
+                font-size: 26rpx;
+            }
+            .code {
+                font-size: 26rpx;
+                color: #1969f9;
+            }
+        }
+    }
+    .btn {
+        height: 88rpx;
+        background: #1969f9;
+        border-radius: 10rpx;
+        font-size: 28rpx;
+        color: #ffffff;
+    }
+}
+
+.mb24 {
+    margin-bottom: 24rpx;
+}
+.mb40 {
+    margin-bottom: 40rpx;
 }

pages/mine/login.vue

 <template>
-    <view class="page-login column rowCenter verCenter"><image src="../../static/logo.png" mode="aspectFill" class="logo"></image></view>
+    <view class="page-login">
+        <image src="../../static/logo.png" mode="aspectFill" class="logo"></image>
+        <view class="tab">
+            <text class="box curr">免密登录/注册</text>
+            <text class="box">账号登录</text>
+        </view>
+        <view class="tip row verCenter">
+            <text class="iconfont icon-ts"></text>
+            <text class="tt">未注册的手机号将自动保存为猎芯账户</text>
+        </view>
+        <view class="input-box mobile row verCenter mb24">
+            <view class="picker-box">
+                <picker @change="bindPickerChange" :value="index" :range="array">
+                    <view class="row verCenter bothSide">
+                        <view class="uni-input">{{ array[index] }}</view>
+                        <view class="iconfont icon-arrbot"></view>
+                    </view>
+                </picker>
+            </view>
+            <input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" />
+        </view>
+        <view class="input-box code row bothSide verCenter mb40">
+            <input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" />
+            <text class="code">获取验证码</text>
+        </view>
+        <view class="btn row rowCenter verCenter">登录/注册</view>
+    </view>
 </template>
 
 <script>
 export default {
     data() {
-        return {};
+        return {
+            index: 0,
+            array: ['0086', '00886', '00853', '00852']
+        };
     },
     onLoad() {},
-    methods: {}
+    methods: {
+        bindPickerChange: function(e, type) {
+            console.log('picker发送选择改变，携带值为', e.detail.value);
+        }
+    }
 };
 </script>
 

router/index.js

 // router/index.js
 import Vue from 'vue'
-//这里仅示范npm安装方式的引入，其它方式引入请看最上面【安装】部分
 import Router from 'uni-simple-router'
 
 Vue.use(Router)