美化了样式

pages/course/courseDetail/courseDetail.wxml

@@ -1,36 +1,47 @@
-<view class="flex-col page">
-  <view class="flex-col">
-    <view class="flex-col">
-      <image class="image" src="{{ globalImgUrl + courseObj.image }}" />
-      <view class="flex-col section">
-        <view class="flex-row items-center group">
-          <view class="shrink-0 group_2">
-            <text class="text">{{ courseObj.discountPrice }}</text>
-            <text class="font text_2">元券后价</text>
-          </view>
-          <view class="ml-4 flex-col justify-start items-start shrink-0 relative group_3">
-            <text class="font text_3">{{ courseObj.originPrice }}元</text>
-            <view class="divider pos"></view>
-          </view>
+<!-- pages/course/courseDetail/courseDetail.wxml -->
+<view class="page">
+  <!-- 滚动内容 -->
+  <scroll-view scroll-y class="content no-scrollbar">
+    <!-- 顶部主图 -->
+    <view class="hero">
+      <image class="hero-img" src="{{ globalImgUrl + courseObj.image }}" mode="aspectFill" lazy-load="true" />
+    </view>
+
+    <!-- 价格 + 标题 -->
+    <view class="card">
+      <view class="price-row">
+        <view class="price-now">
+          <text class="price-num">{{ courseObj.discountPrice }}</text>
+          <text class="price-suffix">元券后价</text>
+        </view>
+        <view class="price-origin">
+          <text class="origin-text">{{ courseObj.originPrice }}元</text>
         </view>
-        <text class="group text_4 mt-9">{{ courseObj.name }}</text>
       </view>
+      <text class="title">{{ courseObj.name }}</text>
     </view>
-    <view class="mt-26 flex-col section_2">
-      <view class="flex-row items-center group_4">
-        <image class="image_2" src="./image/cal.png" />
-        <text class="ml-6 font text_5">课程概述</text>
+
+    <!-- 课程概述 -->
+    <view class="card">
+      <view class="card-head">
+        <image class="head-icon" src="./image/cal.png" mode="aspectFit" />
+        <text class="head-text">课程概述</text>
       </view>
-      <rich-text class="section_3" nodes="{{ richText }}"></rich-text>
+      <rich-text class="rt" nodes="{{ richText }}"></rich-text>
+    </view>
+
+    <!-- 占位，避免被底部栏遮挡 -->
+    <view class="bottom-gap"></view>
+  </scroll-view>
+
+  <!-- 固定底部购买栏 -->
+  <view class="buy-bar">
+    <view class="buy-left">
+      <image class="consult-icon" src="./image/messge.png" mode="aspectFit" />
+      <text class="consult-text">咨询</text>
+    </view>
+    <view class="buy-btn" bindtap="gotoCourseOrder" data-id="{{ courseObj.id }}">
+      <text class="buy-btn-text">立即购买</text>
     </view>
   </view>
-  <view class="flex-row justify-between items-center section_4 mt-37">
-    <view class="flex-col items-center">
-      <image class="image_3" src="./image/messge.png" />
-      <text class="text_7 mt-1">咨询</text>
-    </view>
-    <view class="flex-col justify-start items-center text-wrapper" bind:tap="gotoCourseOrder" data-id="{{ courseObj.id }}">
-      <text class="text_6">立即购买</text>
-    </view>
-  </view>
-</view>
+</view>