美化了样式

pages/course/createCourseOrder/createCourseOrder.wxml

@@ -1,48 +1,53 @@
 <!-- pages/course/createCourseOrder/createCourseOrder.wxml -->
-<view class="flex-col page">
-  <view class="flex-col content">
-    <view class="flex-row items-center section">
+<view class="page">
+
+  <!-- 可滚动内容区：为固定底部预留内边距，避免遮挡 -->
+  <scroll-view scroll-y class="content no-scrollbar">
+
+    <!-- 商品信息卡片 -->
+    <view class="card product">
       <image
-        class="shrink-0 image"
+        class="cover"
         src="{{ globalImgUrl + courseObj.image }}"
+        mode="aspectFill"
+        lazy-load="true"
       />
-      <view class="flex-col flex-1 ml-11">
-        <text class="self-start text">{{ courseObj.name }}</text>
-        <view class="flex-row items-center self-stretch group mt-15">
-          <text class="text_2">￥{{ courseObj.discountPrice }}</text>
-          <view class="flex-col justify-start relative ml-1">
-            <text class="text_3">￥{{ courseObj.originPrice }}</text>
-            <view class="divider pos"></view>
-          </view>
+      <view class="info">
+        <text class="title ellipsis-2">{{ courseObj.name }}</text>
+        <view class="price-line">
+          <text class="price-now">￥{{ courseObj.discountPrice }}</text>
+          <text class="price-origin">￥{{ courseObj.originPrice }}</text>
         </view>
       </view>
     </view>
-    <view class="flex-row justify-between items-center section_2 mt-14">
-      <text class="font">商品价格</text>
-      <text class="font text_4">￥{{ courseObj.discountPrice }}</text>
+
+    <!-- 商品价格行 -->
+    <view class="card row">
+      <text class="row-left">商品价格</text>
+      <text class="row-right accent">￥{{ courseObj.discountPrice }}</text>
     </view>
-    <view class="flex-row justify-between items-center section_3 mt-14">
-      <view class="flex-row items-center">
-        <image
-          class="shrink-0 image_2"
-          src="./image/wxpay.png"
-        />
-        <text class="font ml-12">微信支付</text>
+
+    <!-- 支付方式 -->
+    <view class="card pay">
+      <view class="pay-left">
+        <image class="pay-icon" src="./image/wxpay.png" mode="aspectFit" />
+        <text class="pay-text">微信支付</text>
       </view>
-      <radio-group class="image_3">
-        <radio checked="true"></radio>
+      <radio-group class="pay-right" bindchange="onPayMethodChange">
+        <radio value="wxpay" checked></radio>
       </radio-group>
     </view>
-  </view>
-  <!-- 固定在底部的区域 -->
+
+  </scroll-view>
+
+  <!-- 固定底部结算栏 -->
   <view class="footer">
-    <view class="flex-row justify-between items-center section_4">
-      <text class="font text_5">应付￥{{ courseObj.discountPrice }}</text>
-      <view class="flex-col justify-center items-center text-wrapper" bindtap="createOrder">
-        <text class="font text_6">立即支付</text>
-      </view>
+    <view class="footer-inner">
+      <text class="to-pay">应付 <text class="to-pay-amount">￥{{ courseObj.discountPrice }}</text></text>
+      <view class="btn-pay" bindtap="createOrder">立即支付</view>
     </view>
   </view>
 
+  <!-- 遮罩 -->
   <view wx:if="{{isMaskVisible}}" class="page-mask"></view>
 </view>