瀏覽代碼

feat:增加pc端付费精品、会员免费标签

zhangsiya 11 月之前
父節點
當前提交
31d415fc44
共有 3 個文件被更改,包括 33 次插入18 次删除
  1. 13 6
      jydocs-pc/src/components/doc-item-card/Card.vue
  2. 1 1
      jydocs-pc/src/views/Content.vue
  3. 19 11
      jydocs-pc/src/views/Home.vue

+ 13 - 6
jydocs-pc/src/components/doc-item-card/Card.vue

@@ -56,7 +56,7 @@
             v-for="(item, index) in subInfo"
             :key="index"
           >{{ item }}</span>
-          <span class="vip_mark" v-if="productType === 1">会员免费</span>
+          <span class="type-tag" :class="productType === 2 ? 'boutique' : 'free'">{{productType === 2 ? '付费精品' : '会员免费' }}</span>
         </div>
         <div class="c-f-right flex-r-c">
           <slot name="price">
@@ -227,13 +227,20 @@ export default {
         background-color: rgba($color: #000, $alpha: 0.05);
       }
     }
-    .vip_mark{
-      padding: 1px 8px;
-      background: linear-gradient(to right, #FFA674 0%,#F01212 100%);
-      color: #fff;
+    .type-tag {
+      padding: 1px 8px 1px 8px;
       font-size: 12px;
-      border-radius: 4px;
       line-height: 18px;
+      border-radius: 4px;
+      &.free {
+        background: linear-gradient(98deg, #FFA674 0%, #F01212 100%);
+        color: #fff;
+      }
+      &.boutique{
+        border: 0.5px solid #D69E55;
+        background: #FAE7CA;
+        color: #B1700E;
+      }
     }
   }
 

+ 1 - 1
jydocs-pc/src/views/Content.vue

@@ -12,7 +12,7 @@
           <div class="cd-tips">
             <ul>
               <li class="li-tags" v-for="item in getContentTags" :key="item">{{ item }}</li>
-              <li class="type-tag" :class="{'free': datas.productType === 1, 'boutique': datas.productType === 2 }">{{ datas.productType === 2 ? '付费精品' : '会员免费' }}</li>
+              <li class="type-tag" :class="datas.productType === 2 ? 'boutique' : 'free'">{{ datas.productType === 2 ? '付费精品' : '会员免费' }}</li>
               <li>{{ datas.viewTimes || 0 }}次浏览<el-divider direction="vertical"></el-divider></li>
               <li>{{ datas.downTimes || 0 }}次下载<el-divider direction="vertical"></el-divider></li>
               <li>共{{ datas.docPageSize }}页<el-divider direction="vertical"></el-divider></li>

+ 19 - 11
jydocs-pc/src/views/Home.vue

@@ -30,7 +30,7 @@
                 <div class="mini-img-group">
                   <img :src="item.img" alt="" @error="handleError">
                   <i class="word-type" :class="'el-icon-jy-' + item.type" ></i>
-                  <span v-if="item.productType === 1" class="word-vip-mark">会员免费</span>
+                  <span class="type-tag" :class="item.productType === 2 ? 'boutique' : 'free'">{{item.productType === 2 ? '付费精品' : '会员免费'}}</span>
                 </div>
                 <div class="word-file-name">{{ item.title }}</div>
               </div>
@@ -611,22 +611,30 @@ export default {
               right: 4px;
               bottom: 2px;
             }
-            .word-vip-mark{
+            &>img{
+              width: 100%;
+              height: 184px;
+              border: 1px solid #ECECEC;
+              border-radius: 4px;
+            }
+            .type-tag {
               position: absolute;
               left: 0;
               top: 0;
               padding: 2px 5px;
+              border-radius: 4px 0px 9px 0px;
               font-size: 11px;
               line-height: 14px;
-              color: #fff;
-              border-radius: 4px 0px 9px 0px;
-              background: linear-gradient(to right, #FF7C32 0%, #F33838 100%);
-            }
-            &>img{
-              width: 100%;
-              height: 184px;
-              border: 1px solid #ECECEC;
-              border-radius: 4px;
+
+              &.free {
+                background: linear-gradient(to right, #FF7C32 0%, #F33838 100%);
+                color: #fff;
+              }
+              &.boutique{
+                border: 0.5px solid #D69E55;
+                background: #FAE7CA;
+                color: #C26F33;
+              }
             }
           }
           .word-file-name{