修改样式

src/views/bookShelf/bookItem.vue

@@ -37,6 +37,14 @@
             <div class="book-info-right">
                 <h1 class="title">{{info.name}}</h1>
                 <!-- <b class="org">{{data.org}}</b><span class="date">2023.07.01-2023.07.21</span> -->
+                <div class="sales-box">
+                    <div class="sales-left">
+                        <span>优惠价</span>
+                        <span class="OPPOSans">￥{{info.price_discount|cutMoneyFiter}}</span>
+                        <span class="old-price">￥{{info.price|cutMoneyFiter}}</span>
+                    </div>
+                    <span class="sales-right" v-if="sales>=1000">累计销售 {{salesCn}}</span>
+                </div>
                 <div class="label-box">
                     <label v-for="(itemL,indexL) in info.label_name_list" :key="indexL" :style="{background:tagBg[indexL%3],color:tagColor[indexL%3]}">
                         {{ '# ' + itemL }}
@@ -103,22 +111,13 @@
                         <span>{{info.study_phase_name}}</span>
                     </div>
                 </div>
-                <div class="price-box" v-if="!data.isBuy">
-                    <span class="price">￥{{data.price|cutMoneyFiter}}</span>
-                    <span class="oldPrice">￥{{data.oldPrice|cutMoneyFiter}}</span>
-                </div>
                 <div class="btn-box">
                     <a class="continue" v-if="data.isBuy">继续学习</a>
                     <a class="upgrade" v-if="data.isBuy">升级为讲解版</a>
-                    <el-dropdown @command="handleChangeWay" v-else>
-                        <el-button>
-                            立即购买<svg-icon icon-class="arrow-down"></svg-icon>
-                        </el-button>
-                        <el-dropdown-menu slot="dropdown" class="bookitem-dropdown">
-                            <el-dropdown-item command='dui'>使用兑换码</el-dropdown-item>
-                            <el-dropdown-item command='wei'>直接购买</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
+                    <template v-else>
+                        <a class="el-button" @click="handleChangeWay('wei')">立即购买</a>
+                        <a class="upgrade" @click="handleChangeWay('dui')">使用兑换码</a>
+                    </template> 
                 </div>
             </div>
         </div>
@@ -414,7 +413,9 @@ export default {
         bannerFlag: true, // 是否展示广告
         id: this.$route.query.id?this.$route.query.id:'',
         info: null, // 信息
-        courseList:[]
+        courseList:[],
+        sales: 900000,
+        salesCn: '1000+',
     }
   },
   //计算属性 类似于data概念
@@ -455,6 +456,20 @@ export default {
             if(res.status===1){
                 this.info = res.lb_course
                 this.courseList = this.handleCourseLength(res.cs_item_list)
+                console.log(this.sales<10000)
+                if(this.sales<1000){
+                    this.salesCn = ''
+                }else if(1000<=this.sales&&this.sales<10000){
+                    this.salesCn = this.sales.toString().substring(0,1)+'000+'
+                }else if(10000<=this.sales&&this.sales<100000){
+                    this.salesCn = this.sales.toString().substring(0,1)+'万+'
+                }else if(100000<=this.sales&&this.sales<1000000){
+                    this.salesCn = this.sales.toString().substring(0,1)+'0万+'
+                }else if(1000000<=this.sales&&this.sales<10000000){
+                    this.salesCn = this.sales.toString().substring(0,1)+'00万+'
+                }else if(10000000<=this.sales){
+                    this.salesCn = this.sales.toString().substring(0,1)+'亿+'
+                }
             }
         })
         .catch(() => {
@@ -648,14 +663,13 @@ export default {
             .btn-box{
                 display: flex;
                 .el-button{
-                    width: 180px;
-                    height: 52px;
+                    width: 112px;
+                    height: 40px;
                     background: #EA5939;
                     box-shadow: 0px 8px 16px rgba(234, 89, 57, 0.24);
                     border-radius: 4px;
                     font-weight: 500;
-                    font-size: 20px;
-                    line-height: 28px;
+                    font-size: 16px;
                     color: #FFFFFF;
                     border: none;
                 }
@@ -678,7 +692,7 @@ export default {
                 .upgrade{
                     margin-left: 16px;
                     display: block;
-                    width: 144px;
+                    padding: 0px 24px;
                     height: 40px;
                     background: #E9E9E9;
                     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.06);
@@ -744,6 +758,33 @@ export default {
 .banner-box-close{
     margin-top: 40px;
 }
+.sales-box{
+    display: flex;
+    width: 592px;
+    padding: 16px;
+    border-radius: 4px;
+    background: #F5F5F5;
+    justify-content: space-between;
+    align-items: flex-end;
+    color: #ADADAD;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    .OPPOSans{
+        margin: 0 8px 0 16px;
+        color: #EA5939;
+        font-size: 32px;
+        font-weight: 500;
+        line-height: 40px;
+    }
+    .old-price{
+        color: rgba(0, 0, 0, 0.40);
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        text-decoration: line-through;
+    }
+}
 </style>
 <style lang="scss">
 .bookItem{

src/views/bookShelf/components/CourseList.vue

@@ -3,7 +3,7 @@
     <li v-for="(item,index) in data" :key="index" :class="[index===data.length-1?'noborder':'',isBuy||index<4?'buy':'']" @click="handleLink(item,isBuy||index<4,index)">
         <span class="number">{{index+1 + '.'}}</span>
         <b class="title">{{item.name}}</b>
-        <span class="teacher">{{'主讲教师'+item.teacher_name}}</span>
+        <span class="teacher">{{item.teacher_name?'主讲教师 '+item.teacher_name:''}}</span>
         <span class="time-length">{{item.timeCn}}</span>
         <i class="el-icon-lock" v-if="!(isBuy||index<4)"></i>
         <i class="el-icon-arrow-right" v-else></i>