价格及描述

src/views/TextbookDetail.vue

@@ -22,11 +22,14 @@
               <p class="p1">{{ TextbookData.name }}</p>
               <p class="p2">{{ TextbookData.org_name }}</p>
               <p class="p2">{{ TextbookData.author }}</p>
-              <p class="p3">
-                {{ TextbookData.description }}
-              </p>
+              <div class="text-description" v-if="TextbookData.description">
+                <p class="p3" :class="[showdecri?'':'overflow']">
+                    {{ TextbookData.description }}
+                </p>
+                <a class="showdecri" @click="showdecri=!showdecri">{{!showdecri?'...展开':'收起'}}</a>
+              </div>
               <div class="operation">
-                <span class="price">
+                <span class="price" v-if="TextbookData.price>0&&TextbookData.is_free_license=='false'">
                   ￥<span
                     class="price_1"
                     v-html="changePrice(TextbookData.price, 24, 16)"
@@ -372,6 +375,7 @@ export default {
       fileListAudio: [], // 教材资源视频数组
       fileListOtheraudio: [],
       fileListDoc: [], // 教材资源视频数组
+      showdecri:false, // 展开描述
     };
   },
   //计算属性 类似于data概念
@@ -832,7 +836,7 @@ export default {
       }
 
       .text {
-        width: 900px;
+        width: 903px;
         color: white;
         p {
           font-size: 16px;
@@ -854,15 +858,34 @@ export default {
           line-height: 150%;
           color: #ffffff;
         }
+        .text-description{
+            position: relative;
+        }
         .p3 {
           font-weight: normal;
           font-size: 16px;
           line-height: 150%;
           color: #ffffff;
+          &.overflow{
+            overflow:hidden;
+            text-overflow:ellipsis;
+            display:-webkit-box;
+            -webkit-box-orient:vertical;
+            -webkit-line-clamp:2;
+          }
+        }
+        .showdecri{
+            color: #DEEBFF;
+            background: #6e767c;
+            font-size: 16px;
+            line-height: 150%;
+            position: absolute;
+            right: 0;
+            bottom: 0;
         }
-
         .price {
           font-size: 24px;
+          margin-right: 30px;
           .price_2 {
             font-size: 16px;
           }
@@ -881,7 +904,6 @@ export default {
           outline: none;
           color: white;
           font-size: 20px;
-          margin-left: 30px;
           cursor: pointer;
         }
         .acquired {