套餐详情

src/pages/packageDetails/packageDetails.vue

@@ -14,6 +14,7 @@
       ></wd-swiper>
     </view>
     <!-- 轮播-end -->
+    <!-- card -->
     <view class="package-details-card">
       <view class="package-details-num">
         <view class="num">
@@ -39,24 +40,34 @@
         <view class="bz">
           <text class="yh-name">保障：</text>
           <view class="icon-box">
-            <i classs="iconfont icon-jinggao" />
+            <i class="iconfont icon icon-jinggao" />
             过期退
           </view>
           <view class="icon-box">
-            <i classs="iconfont icon-jinggao"></i>
+            <i class="iconfont icon icon-jinggao" />
             随时退
           </view>
           <view class="icon-box">
-            <i classs="iconfont icon-jinggao"></i>
+            <i class="iconfont icon icon-jinggao" />
             随时用
           </view>
-          <i classs="iconfont icon-jinggao"></i>
+          <i class="iconfont jg icon-jinggao" />
         </view>
         <view class="xz">
           <text class="yh-name">限制：</text>
+          多多补贴每人限购1张
         </view>
       </view>
     </view>
+    <!-- card-end -->
+    <view class="rich-text-card">
+      <text class="title">商品详情</text>
+      <rich-text :nodes="'nodes'"></rich-text>
+    </view>
+    <view class="rich-text-card">
+      <text class="title">购买须知</text>
+      <rich-text :nodes="'nodes'"></rich-text>
+    </view>
   </view>
 </template>
 
@@ -146,7 +157,6 @@ page {
         .bt-icon {
           display: flex;
           position: relative;
-          margin-left: 26rpx;
           image {
             width: 125 * 2rpx;
             height: 22 * 2rpx;
@@ -172,12 +182,45 @@ page {
       .bz {
         display: flex;
         align-items: center;
+        margin: 22rpx 0 32rpx 0;
         .icon-box {
           display: flex;
           align-items: center;
+          font-size: 11 * 2rpx;
+          color: #abaaaa;
+
+          .icon {
+            font-size: 46rpx;
+            font-weight: bold;
+            color: #fa5151;
+          }
         }
+        .jg {
+          font-size: 46rpx;
+          font-weight: bold;
+          margin-left: auto;
+          color: #abaaaa;
+        }
+      }
+      .xz {
+        font-size: 10 * 2rpx;
+        color: #abaaaa;
       }
     }
   }
+  .rich-text-card {
+    width: 355 * 2rpx;
+    padding: 20rpx;
+    box-sizing: border-box;
+    background: #fff;
+    margin: 0 auto;
+    margin-top: 10rpx;
+    border-radius: 8 * 2rpx;
+    box-shadow: 0 -8rpx 22 * 2rpx 0 rgba(255, 255, 255, 0.6);
+    .title {
+      font-size: 13 * 2rpx;
+      color: #151515;
+    }
+  }
 }
 </style>