<view class="container">
<form>
<view class="input-wrapper">
<input type="text" placeholder="请输入用户名" />
</view>
<view class="input-wrapper">
<input type="password" placeholder="请输入密码" />
</view>
<view class="button-wrapper">
<button type="primary" form-type="submit">登录</button>
</view>
</form>
<view class="link-wrapper">
<navigator url="/pages/register/register">没有账号?点击注册</navigator>
</view>
</view>
The corresponding style can be modified using the style library or custom style provided by the WeChat applet, and more functions such as form validation and logic control can be added to improve the page
input {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
In the above code,
border
the attribute defines the width, style and color of the border,padding
the attribute defines the padding around the input box,border-radius
the attribute defines the corner radius of the border, andbox-shadow
the attribute defines the shadow effect of the input box. Using similar codes can easily add the same style to multiple elements, which greatly simplifies the writing of page styles.