分享好友 资讯首页 资讯分类 切换频道

微信小程序登录注册界面样式代码

2025-10-07 08:4000

微信小程序登录注册界面的样式代码可以使用微信小程序的WXML和WXSS语言进行编写。以下是一个简单的登录注册界面的样式代码示例。

微信小程序登录注册界面样式代码

在WXML文件中:

<!-- 登录注册界面 -->
<view class="container">
  <!-- 登录表单 -->
  <view class="login-form">
    <image class="logo" src=https://www.271shop.com/static/image/nopic320.png    <input class="input" type="text" placeholder="请输入用户名/邮箱/手机号"></input>
    <input class="input password" type="password" placeholder="请输入密码"></input>
    <button class="login-btn" bindtap="login">登录</button>
  </view>
  <!-- 注册表单 -->
  <view class="register-form">
    <button class="register-btn" bindtap="register">注册</button>
  </view>
</view>

在WXSS文件中:


.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; 
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%; 
  padding: 20px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
}

.input {
  width: 100%; 
  height: 40px; 
  margin-bottom: 20px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  padding: 0 10px; 
}

.password {
  type: password; 
}

.login-btn {
  width: 150px; 
  height: 40px; 
  background-color: #09bbff; 
  color: #fff; 
  border-radius: 5px; 
}

.register-btn {
  width: 150px; 
  height: 40px; 
  background-color: #f3f3f3; 
  color: #333; 
  border-radius: 5px; 
}

代码只是一个简单的示例,你可以根据自己的需求进行修改和调整,还需要在微信小程序的开发工具中编写对应的逻辑代码以实现登录和注册功能。

举报
收藏 0
打赏 0
评论 0
 
友情链接