权益列表

src/views/mall/purchasePackage/components/packageList.vue

@@ -23,7 +23,14 @@
       </div> -->
       <div v-if="val.text">
         <div class="font-weight-bold my-3">权益</div>
-        <div v-html="val.text"></div>
+        <div>
+          <p
+            v-for="v in val.list"
+            :key="val.name + v.text"
+            class="vipColor"
+            :class="{ active: v.active}"
+          >{{ v.text }}</p>
+        </div>
       </div>
       <!-- <div v-else>
         <h3 class="my-3">授权范围：</h3>
@@ -99,7 +106,6 @@ const packDataList = ref([])
 const getData = async () => {
   const data = await getMembershipPackageList()
   if (!data?.length) return
-  // packDataList.value = 
   let vipFlagIndex = null
   const list = data.map((item, index) => {
     item.id = item.id?.toString()
@@ -107,6 +113,7 @@ const getData = async () => {
     if (item.recommend) active.value = index // 推荐套餐
     return {
       ...item,
+      list: JSON.parse(item.text),
       type: 3, // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
       loading: false
     }
@@ -213,6 +220,11 @@ function handleOverdue () {
   margin-right: 30px;
   color: #774e20;
   background-color: #fafafa;
+  &.active {
+    background-color: rgba(255, 251, 248, 1);
+    border: 1px solid #f1b17a;
+    box-shadow: 0px 6px 12px 0px rgba(216, 160, 82, 0.36);
+  }
   &:nth-child(5n) {
     margin-right: 0;
   }
@@ -229,11 +241,7 @@ ul li {
   margin: 10px 0;
   font-weight: 500;
 }
-.active {
-  background-color: rgba(255, 251, 248, 1);
-  border: 1px solid #f1b17a;
-  box-shadow: 0px 6px 12px 0px rgba(216, 160, 82, 0.36);
-}
+
 :deep(.v-btn) {
   border: 1px solid #bc8b55;
   color: #c30f0f !important;
@@ -292,4 +300,14 @@ ul li {
   text-align: center;
   border-radius: 4px;
 }
+
+
+.vipColor {
+  color: #774e2085;
+  font-size: 15px;
+  padding: 5px 0;
+  &.active {
+    color:#774e20;
+  }
+}
 </style>