我要一个漂亮的微信小程序登录界面代码

以下是一个简单的微信小程序登录界面的代码示例：

WXML 代码：

<view class="container">
  <view class="logo"></view>
  <form bindsubmit="login">
    <view class="input-group">
      <input type="text" name="username" placeholder="请输入用户名" />
    </view>
    <view class="input-group">
      <input type="password" name="password" placeholder="请输入密码" />
    </view>
    <view class="btn-group">
      <button form-type="submit">登录</button>
      <button form-type="reset">重置</button>
    </view>
  </form>
</view>

WXSS 代码：

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

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #2d8cf0;
  margin-bottom: 30px;
}

.input-group {
  width: 80%;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin-bottom: 20px;
}

.input-group input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
}

.btn-group {
  width: 80%;
  display: flex;
  justify-content: space-between;
}

.btn-group button {
  width: 45%;
  height: 40px;
  border-radius: 5px;
  background-color: #2d8cf0;
  color: #fff;
  font-size: 16px;
  border: none;
}

该登录界面包括一个简单的 Logo 和一个表单，表单包括用户名和密码输入框以及登录和重置按钮。整体采用了简洁清晰的设计风格，使用了 Flex 布局和较为明亮的颜色搭配，使用户使用起来更加舒适和方便。您可以根据自己的需要进行改动和优化。