基于微信小程序云开发，请给我设计一款个人中心页面，要求页面布局新颖美观。wxss、JavaScript部分的代码中每一项都需要打上注释

基于微信小程序云开发的个人中心页面设计，我们可以采用现代、简洁的设计风格，利用Grid布局和卡片组件来展示信息。下面是一个基本的HTML、WXML以及wxss示例，注意这里主要关注的是核心结构，详细的样式调整需要你自己根据实际需求进一步优化。

**HTML (WXML)**

<!-- pages/user-center/index.wxml -->
<view class="container">
  <!-- 导航栏 -->
  <navigator url="/pages/home/home" class="navbar">首页</navigator>
  
  <!-- 主体内容区域 -->
  <view class="main-content grid-container">
    <!-- 用户信息卡 -->
    <view class="user-card grid-item">
      <view class="card-header">个人信息</view>
      <!-- 内容填写 -->
      <text>{{ userInfo.name }}</text> <!-- 显示用户姓名 -->
      <text>{{ userInfo.email }}</text> <!-- 显示用户邮箱 -->
    </view>

    <!-- 设置选项卡 -->
    <scroll-view class="settings">
      <!-- 编辑设置 -->
      <block wx:for="{{ settingsList }}" wx:key="*this">
        <view class="setting-card grid-item">
          <!-- 标题和输入框 -->
          <view class="title">{{ item.title }}</view>
          <input type="text" value="{{ item.value }}" bindinput="onSettingChange" placeholder="{{ item.placeholder }}"/>
        </view>
      </block>
    </scroll-view>
  </view>

  <!-- 底部导航栏 -->
  <view class="bottom-navbar">
    <button open-type="contact" bindtap="goToContact">联系客服</button>
    <button open-type="logout" bindtap="logOut">退出登录</button>
  </view>
</view>

**CSS (wxss, .wxs 文件夹内的 styles.wxss 或者 global.wxss)**

/* ... */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar {
  background-color: #404a59;
  color: white;
  padding: 16rpx;
  text-align: center;
}

.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
  grid-gap: 20rpx;
}

.user-card {
  background-color: #f5f7fa;
  padding: 20rpx;
}

.bottom-navbar {
  display: flex;
  justify-content: space-between;
  background-color: #f5f7fa;
  padding: 8rpx;
}
/* ... */

**JavaScript**

Page({
  // ...其他生命周期函数和数据

  onSettingChange(e) {
    this.setData({
      [e.detail.item.key]: e.detail.value
    });
  },
  
  goToContact() {
    // 跳转到客服页面
  },
  logOut() {
    // 登出逻辑
  },
})