设计一个微信小程序学生一卡通静态卡片界面给出代码

以下是一个简单的微信小程序学生一卡通静态卡片界面的示例代码：

在 app.json 文件中配置页面路径：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "学生一卡通",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      }
    ]
  }
}

在 pages/index/index.js 文件中编写页面逻辑：

Page({
  data: {
    studentName: '张三',
    studentNumber: '123456789',
    balance: 100.00
  },
  onLoad: function () {
    // 页面加载时的逻辑
  }
})

在 pages/index/index.wxml 文件中编写页面结构：

<view class="card">
  <view class="card-top">
    <text class="student-name">{{studentName}}</text>
    <text class="student-number">{{studentNumber}}</text>
  </view>
  <view class="card-bottom">
    <text class="balance">余额：{{balance}}</text>
  </view>
</view>

在 pages/index/index.wxss 文件中编写页面样式：

.card {
  background-color: #FFFFFF;
  width: 300rpx;
  height: 180rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 5rpx 0 rgba(0, 0, 0, 0.1);
  margin: 50rpx auto;
  padding: 20rpx;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-bottom {
  margin-top: 20rpx;
}

.student-name {
  font-size: 24rpx;
  color: #333333;
}

.student-number {
  font-size: 14rpx;
  color: #999999;
}

.balance {
  font-size: 16rpx;
  color: #666666;
}

这个示例代码实现了一个简单的学生一卡通静态卡片界面，包含学生姓名、学号和余额信息。你可以根据实际需求进行修改和扩展。