<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>
相应的样式可以使用微信小程序提供的样式库或自定义样式进行修改,并可以添加更多的表单验证、逻辑控制等功能来完善该页面
input {border: 1px solid #ccc;padding: 10px;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
上述代码中,
border
属性定义了边框的宽度、样式和颜色,padding
属性定义了输入框周围的填充量,border-radius
属性定义了边框的圆角半径,box-shadow
属性定义了输入框的阴影效果。使用类似的代码可以轻松地为多个元素添加相同的样式,大大简化了页面样式的编写。