updates

src/modules/shop/components/CourseFooter.vue

@@ -16,7 +16,6 @@ const props = defineProps({
 const buyDialogVisible = ref(false)
 
 const handleBuyCourse = () => {
-  console.log('999')
   if (user.isLogin) {
     if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
       window.open('https://paa-learning.ezijing.com')
@@ -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,33 +52,46 @@ const handleBuyCourse = () => {
       </div>
     </template>
 
-    <div v-if="!mobile">
-      <div class="footer_btn" @click="handleBuyCourse">
-        {{
-          payStatus === '4' || shopItem?.isBuy === true
-            ? '立即学习'
-            : '立即购买'
-        }}
-      </div>
+    <div class="footer_btn" @click="handleBuyCourse">
+      {{
+        payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买'
+      }}
+    </div>
+  </div>
+  <div class="detail_footer" v-else>
+    <div
+      class="left_status"
+      v-if="payStatus === '4' || shopItem?.isBuy === true"
+    >
+      已购买
     </div>
-    <div v-else>
-      <div
-        class="footer_btn"
-        @click="handleBuyCourse"
-        v-if="payStatus === '4' || shopItem?.isBuy === true"
-      >
-        <div class="btn_buy">立即学习</div>
+    <template v-else>
+      <div class="footer_left">
+        <div class="left_tit">全部课程价格</div>
+        <div class="left_desc">根据课程价格累积计算</div>
       </div>
-      <div class="footer_btn" @click="handleBuyCourse" v-else>
-        <div class="footer_price">
-          <div class="price_icon">¥</div>
-          <div class="price_price">{{ shopItem?.price }}</div>
-        </div>
-        <div class="btn_buy">立即购买</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"
+      v-if="payStatus === '4' || shopItem?.isBuy === true"
+    >
+      <div class="btn_buy">立即学习</div>
+    </div>
+    <div class="footer_btn" @click="handleBuyCourse" v-else>
+      <div class="footer_price">
+        <div class="price_icon">¥</div>
+        <div class="price_price">{{ shopItem?.price }}</div>
+      </div>
+      <div class="btn_buy">立即购买</div>
     </div>
-    <ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
   </div>
+  <ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
 </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

 <script setup>
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Grid, Navigation } from 'swiper'
+import { useDevice } from '@/composables/useDevice'
 import 'swiper/css'
 import 'swiper/css/grid'
 import 'swiper/css/navigation'
-import { useDevice } from '@/composables/useDevice'
 const { mobile } = useDevice()
 
 defineProps({
@@ -21,6 +21,31 @@ function prev(swiper) {
 function next(swiper) {
   swiper?.slideNext()
 }
+const list = [
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟',
+    title_list: ['清华大学国家金融研究院副院长、副研究员']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_02.png',
+    name: '高皓',
+    title_list: ['清华大学五道口金融学院全球家族企业研究中心主任']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_03.png',
+    name: '肇越',
+    title_list: ['清华大学五道口金融学院硕士生导师首席经济学家']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png',
+    name: '陈秉正',
+    title_list: [
+      '清华大学经济管理学院金融系教授',
+      '中国保险与风险管理研究中心主任'
+    ]
+  }
+]
 </script>
 
 <template>
@@ -233,17 +258,17 @@ function next(swiper) {
           }
         }
         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;
             }
           }
         }