updates

src/modules/shop/components/CourseFooter.vue

 <script lang="ts" setup>
 import ContactDialog from '../components/ContactDialog.vue'
-
 import { useDevice } from '@/composables/useDevice'
 import { useUserStore } from '@/stores/user'
 const user = useUserStore()
@@ -35,7 +34,7 @@ const handleBuyCourse = () => {
 }
 </script>
 <template>
-  <div class="detail_footer">
+  <div class="detail_footer" v-if="!mobile">
     <div
       class="left_status"
       v-if="payStatus === '4' || shopItem?.isBuy === true"
@@ -53,16 +52,30 @@ const handleBuyCourse = () => {
       </div>
     </template>
 
-    <div v-if="!mobile">
     <div class="footer_btn" @click="handleBuyCourse">
       {{
-          payStatus === '4' || shopItem?.isBuy === true
-            ? '立即学习'
-            : '立即购买'
+        payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买'
       }}
     </div>
   </div>
-    <div v-else>
+  <div class="detail_footer" v-else>
+    <div
+      class="left_status"
+      v-if="payStatus === '4' || shopItem?.isBuy === true"
+    >
+      已购买
+    </div>
+    <template v-else>
+      <div class="footer_left">
+        <div class="left_tit">全部课程价格</div>
+        <div class="left_desc">根据课程价格累积计算</div>
+      </div>
+      <div class="footer_price" v-if="!mobile">
+        <div class="price_icon">¥</div>
+        <div class="price_price">{{ shopItem?.price }}</div>
+      </div>
+    </template>
+
     <div
       class="footer_btn"
       @click="handleBuyCourse"
@@ -79,7 +92,6 @@ const handleBuyCourse = () => {
     </div>
   </div>
   <ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
-  </div>
 </template>
 
 
@@ -108,13 +120,11 @@ const handleBuyCourse = () => {
       .left_tit {
         font-size: 16px;
         font-weight: 400;
-        line-height: 34px;
         color: #333333;
       }
       .left_desc {
         font-size: 14px;
         font-weight: 400;
-        line-height: 34px;
         color: #999999;
       }
     }
@@ -127,6 +137,7 @@ const handleBuyCourse = () => {
         font-weight: 500;
         line-height: 34px;
         color: #aa1941;
+        margin-top: 5px;
       }
       .price_price {
         font-size: 40px;
@@ -152,12 +163,15 @@ const handleBuyCourse = () => {
 }
 .is-h5 {
   .detail_footer {
+    width: 100%;
     border-radius: 0.2rem 0.2rem 0 0;
     background: #ffffff;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    margin: 0.28rem 0 0.54rem 0;
     padding: 0.3rem;
+    box-sizing: border-box;
     .left_status {
       font-size: 0.24rem;
       font-weight: normal;
@@ -177,7 +191,6 @@ const handleBuyCourse = () => {
       }
     }
     .footer_btn {
-      width: 4.08rem;
       height: 0.8rem;
       background: linear-gradient(102deg, #f2ca8c 0%, #e69b1c 100%);
       border-radius: 0.4rem;
@@ -185,11 +198,12 @@ const handleBuyCourse = () => {
       line-height: 0.8rem;
       color: #ffffff;
       display: flex;
-      justify-content: space-around;
+      justify-content: center;
       cursor: pointer;
+      padding: 0 0.56rem;
       .footer_price {
         display: flex;
-        padding-left: 0.48rem;
+        justify-content: flex-start;
         margin-right: 0.18rem;
         .price_icon {
           font-size: 0.24rem;
@@ -198,6 +212,7 @@ const handleBuyCourse = () => {
         }
         .price_price {
           font-size: 0.4rem;
+          font-weight: bold;
         }
       }
       .btn_buy {

src/modules/shop/components/TeacherCard.vue

@@ -258,17 +258,17 @@ const list = [
           }
         }
         ol {
-          margin-top: 0.2rem;
+          margin-top: 0.28rem;
           li {
             list-style-type: disc;
             color: #c1ab85 !important;
             margin-left: 0.3rem;
             p {
-              font-size: 0.14rem;
+              font-size: 0.24rem;
               font-weight: 400;
               color: #666666;
               width: 4.89rem;
-              white-space: wrap;
+              white-space: nowwrap;
             }
           }
         }