支付通路

yelaymaths/pages/buy/buy.wxss

@@ -1,14 +1,106 @@
 /* pages/buy/buy.wxss */
 
-/* 占位样式，UI 定稿后连同 wxml 一起替换 */
 .buy-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 70vh;
+  min-height: 100vh;
+  background: #f6f7f9;
+  padding: 24rpx 24rpx 48rpx;
+  box-sizing: border-box;
 }
 
-.buy-placeholder {
-  color: #999;
-  font-size: 28rpx;
+/* ── 单课程 ───────────────────────────────────────────── */
+.buy-single {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 48rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.buy-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #222;
+  text-align: center;
+}
+
+.buy-price {
+  margin-top: 24rpx;
+  font-size: 44rpx;
+  color: #ff4d4f;
+  font-weight: 600;
+}
+
+/* ── 课程列表 ─────────────────────────────────────────── */
+.buy-list {
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.buy-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28rpx 24rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.buy-item:last-child {
+  border-bottom: none;
+}
+
+.buy-item-main {
+  flex: 1;
+  min-width: 0;
+  margin-right: 20rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.buy-item-title {
+  font-size: 28rpx;
+  color: #222;
+  line-height: 1.4;
+}
+
+.buy-item-price {
+  margin-top: 8rpx;
+  font-size: 26rpx;
+  color: #ff4d4f;
+}
+
+.buy-empty {
+  padding: 80rpx 0;
+  text-align: center;
+  color: #999;
+  font-size: 26rpx;
+}
+
+/* ── 按钮 ─────────────────────────────────────────────── */
+.buy-btn {
+  margin-top: 40rpx;
+  background: #07c160;
+  color: #fff;
+  font-size: 30rpx;
+  border-radius: 44rpx;
+  line-height: 2.6;
+}
+
+.buy-btn-mini {
+  margin-top: 0;
+  flex: none;
+  font-size: 26rpx;
+  line-height: 2.4;
+  padding: 0 30rpx;
+}
+
+.buy-btn[disabled] {
+  background: #d8d8d8;
+  color: #fff;
+}
+
+/* 去掉微信按钮自带的那圈边框 */
+.buy-btn::after {
+  border: none;
 }