qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 物联网/工业互联网 › 物联网 › uni-app简便的移动端登录注册界面

uni-app简便的移动端登录注册界面

[复制链接]
发表于 2025-12-12 12:29:29 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
非常简便的登录、注册界面模板，利用uni-app编写，直接复制粘贴即可，无任何引用，全部公开。

  


废话不多说，代码如下：

   login.vue文件
  1. <template>
  2.         <view class="content">
  3.                 <view class="logo">
  4.                         LOGO
  5.                 </view>
  6.                 <view class="form-box">
  7.                         <view class="tab-menu">
  8.                                 <view class="tab-name" @click="tabChange(0)">
  9.                                         <text :class="tabIndex==0?'tab-txt':''">登录</text>
  10.                                         <text v-show="tabIndex==0" class="tab-active"></text>
  11.                                 </view>
  12.                                 <view class="tab-name" @click="tabChange(1)">
  13.                                         <text :class="tabIndex==1?'tab-txt':''">注册</text>
  14.                                         <text v-show="tabIndex==1" class="tab-active"></text>
  15.                                 </view>
  16.                         </view>
  17.                         <view v-show="tabIndex==0">
  18.                                 <view class="row-input">
  19.                                         <image mode="aspectFit" src="../../static/phone.png"></image>
  20.                                         <input placeholder="输入账号/手机号" maxlength="11" />
  21.                                 </view>
  22.                                 <view class="row-input">
  23.                                         <image mode="aspectFit" src="../../static/password.png"></image>
  24.                                         <input placeholder="输入密码" maxlength="18" />
  25.                                 </view>
  26.                                 <view class="menu-link">
  27.                                         <text>忘记密码?</text>
  28.                                 </view>
  29.                                 <view class="login-btn">
  30.                                         登录
  31.                                 </view>
  32.                         </view>
  33.                         <view v-show="tabIndex==1">
  34.                                 <view class="row-input-code">
  35.                                         <view class="input-box">
  36.                                                 <image class="img" mode="aspectFit" src="../../static/phone.png"></image>
  37.                                                 <input placeholder="输入手机号" maxlength="11" type="number" />
  38.                                         </view>
  39.                                         <view class="code-box" @click="getCode">
  40.                                                 获取验证码
  41.                                         </view>
  42.                                 </view>
  43.                                 <view class="row-input">
  44.                                         <image mode="aspectFit" src="../../static/code.png"></image>
  45.                                         <input placeholder="输入验证码" maxlength="6" type="number" />
  46.                                 </view>
  47.                                 <view class="row-input">
  48.                                         <image mode="aspectFit" src="../../static/password.png"></image>
  49.                                         <input placeholder="输入6位密码" maxlength="6" />
  50.                                 </view>
  51.                                 <view class="login-btn register">
  52.                                         注册
  53.                                 </view>
  54.                                 <view class="agree-txt">查看<text>《演示效果》</text></view>
  55.                         </view>
  56.                 </view>
  57.         </view>
  58. </template>
  60. <script>
  61.         export default {
  62.                 data() {
  63.                         return {
  64.                                 tabIndex: 0, //登录注册下标
  65.                         }
  66.                 },
  67.                 methods: {
  68.                         // tab切换
  69.                         tabChange(id) {
  70.                                 this.tabIndex = id
  71.                         },
  72.                         // 获取验证码
  73.                         getCode() {
  74.                                 uni.showToast({
  75.                                         title: "获取验证码"
  76.                                 })
  77.                         }
  78.                 }
  79.         }
  80. </script>
  82. <style lang="scss">
  83.         page {
  84.                 background-color: #5de97f;
  85.         }
  87.         .logo {
  88.                 height: 25vh;
  89.                 display: flex;
  90.                 align-items: center;
  91.                 justify-content: center;
  92.                 color: #FFFFFF;
  93.                 font-size: 120rpx;
  94.                 letter-spacing: 5rpx;
  95.                 font-weight: bold;
  96.         }
  98.         .form-box {
  99.                 padding: 0 50rpx;
  100.                 margin: 0 70rpx;
  101.                 height: 750rpx;
  102.                 background-color: #FFFFFF;
  103.                 border-radius: 20rpx;
  105.                 .tab-menu {
  106.                         padding-top: 50rpx;
  107.                         display: flex;
  108.                         justify-content: flex-start;
  109.                         align-items: center;
  110.                         height: 100rpx;
  112.                         .tab-name {
  113.                                 height: 100%;
  114.                                 display: flex;
  115.                                 justify-content: flex-start;
  116.                                 align-items: center;
  117.                                 flex-direction: column;
  118.                                 width: 150rpx;
  119.                                 font-size: 40rpx;
  120.                                 font-weight: bold;
  121.                                 color: #afafaf;
  122.                         }
  124.                         .tab-txt {
  125.                                 color: #5b5b5b;
  126.                         }
  128.                         .tab-active {
  129.                                 margin-top: 10rpx;
  130.                                 width: 100rpx;
  131.                                 height: 13rpx;
  132.                                 background-color: #6bb3fe;
  133.                                 border-radius: 15rpx;
  134.                         }
  135.                 }
  137.                 .row-input {
  138.                         margin: 60rpx 0 0 0;
  139.                         padding: 0 20rpx;
  140.                         display: flex;
  141.                         justify-content: flex-start;
  142.                         align-items: center;
  143.                         height: 80rpx;
  144.                         border: 5rpx solid #bbf7c8;
  145.                         border-radius: 8rpx;
  147.                         image {
  148.                                 width: 30rpx;
  149.                                 height: 30rpx;
  150.                         }
  152.                         input {
  153.                                 padding-left: 20rpx;
  154.                                 font-size: 28rpx;
  155.                                 width: 400rpx;
  156.                         }
  157.                 }
  159.                 .row-input-code {
  160.                         margin-top: 20rpx;
  161.                         width: 100%;
  162.                         display: flex;
  163.                         justify-content: space-between;
  164.                         align-items: center;
  165.                         height: 80rpx;
  166.                         font-size: 28rpx;
  168.                         .input-box {
  169.                                 padding: 0 20rpx;
  170.                                 width: 60%;
  171.                                 display: flex;
  172.                                 justify-content: flex-start;
  173.                                 align-items: center;
  174.                                 height: 100%;
  175.                                 border: 5rpx solid #bbf7c8;
  176.                                 border-top-left-radius: 8rpx;
  177.                                 border-bottom-left-radius: 8rpx;
  178.                                 box-sizing: border-box;
  180.                                 .img {
  181.                                         width: 40rpx;
  182.                                         height: 30rpx;
  183.                                 }
  185.                                 input {
  186.                                         padding-left: 20rpx;
  187.                                         font-size: 28rpx;
  188.                                         width: 300rpx;
  189.                                 }
  190.                         }
  192.                         .code-box {
  193.                                 display: flex;
  194.                                 justify-content: center;
  195.                                 align-items: center;
  196.                                 width: 40%;
  197.                                 height: 100%;
  198.                                 color: #FFFFFF;
  199.                                 border-top-right-radius: 8rpx;
  200.                                 border-bottom-right-radius: 8rpx;
  201.                                 background: linear-gradient(#44aae8, #4889e2);
  202.                         }
  203.                 }
  205.                 .menu-link {
  206.                         display: flex;
  207.                         justify-content: flex-end;
  208.                         align-items: center;
  209.                         height: 70rpx;
  210.                         color: #007AFF;
  211.                         font-size: 24rpx;
  212.                 }
  214.                 .login-btn {
  215.                         margin-top: 30rpx;
  216.                         display: flex;
  217.                         justify-content: center;
  218.                         align-items: center;
  219.                         height: 80rpx;
  220.                         background: linear-gradient(#44aae8, #4889e2);
  221.                         border-radius: 50rpx;
  222.                         color: #FFFFFF;
  223.                         font-size: 35rpx;
  224.                         font-weight: bold;
  225.                         letter-spacing: 4rpx;
  226.                 }
  228.                 .register {
  229.                         margin-top: 50rpx;
  230.                 }
  232.                 .agree-txt {
  233.                         display: flex;
  234.                         justify-content: center;
  235.                         align-items: center;
  236.                         height: 70rpx;
  237.                         font-size: 24rpx;
  239.                         text {
  240.                                 color: #007AFF;
  241.                         }
  242.                 }
  243.         }
  244. </style>
复制代码
  素材!

  


   更多移动端登录注册界面模板，请点击以下链接访问检察 ↓

  更多模板地点：https://ext.dcloud.net.cn/plugin?id=8937

  几十款移动端登录/注册界面模板，源码全部公开，拿来即用，点击即可检察
回复

使用道具 举报

返回列表

铁佛
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表