Преглед изворни кода

feat: 企业搜索的4条/次,150条/次,全部改为与采购单位搜索一样的对号

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>
tangshizhe пре 4 месеци
родитељ
комит
d3080fc831
1 измењених фајлова са 129 додато и 60 уклоњено
  1. 129 60
      apps/bigmember_pc/src/views/vipsubscribe/components/Contrast.vue

+ 129 - 60
apps/bigmember_pc/src/views/vipsubscribe/components/Contrast.vue

@@ -2,33 +2,45 @@
   <div class="sub-contrast">
     <div class="contrast-header">
       <div class="line-flex">
-        <span class="split-box--before"></span>
-        <div class="second-desc">免费订阅</div>
-        <img class="text-vs" src="@/assets/images/sub-compare.png" alt="对比" />
-        <div class="second-desc">超级订阅</div>
-        <span class="split-box--after"></span>
+        <span class="split-box--before" />
+        <div class="second-desc">
+          免费订阅
+        </div>
+        <img class="text-vs" src="@/assets/images/sub-compare.png" alt="对比">
+        <div class="second-desc">
+          超级订阅
+        </div>
+        <span class="split-box--after" />
       </div>
     </div>
     <div class="contrast-main">
       <ul
-        class="contrast-main-header flex-r-c"
         ref="stickyHeader"
         v-stickyed="stickyed"
+        class="contrast-main-header flex-r-c"
       >
-        <li class="top-title modify-left">功能/产品</li>
-        <li class="top-title modify-center gray">免费订阅</li>
+        <li class="top-title modify-left">
+          功能/产品
+        </li>
+        <li class="top-title modify-center gray">
+          免费订阅
+        </li>
         <li class="top-title modify-right flex-r-c center">
           <img
             src="@/assets/images/subscribe/new-crown.png"
             style="width: 28px; position: relative"
-          />
-          <div style="margin-left: 8px">超级订阅</div>
+          >
+          <div style="margin-left: 8px">
+            超级订阅
+          </div>
         </li>
       </ul>
-      <div class="contrast-main-center" ref="main">
+      <div ref="main" class="contrast-main-center">
         <div class="center-left">
           <ul class="clearfix">
-            <li class="top-title modify-left">功能/产品</li>
+            <li class="top-title modify-left">
+              功能/产品
+            </li>
             <li class="double">
               <div style="display: flex; align-items: center">
                 <div>企业画像</div>
@@ -36,7 +48,7 @@
                   src="@/assets/images/subscribe/new-logo.png"
                   alt=""
                   style="margin-left: 8px; width: 40px"
-                />
+                >
               </div>
               <div>提供企业中标项目分析、重点客户等多维分析</div>
             </li>
@@ -47,7 +59,7 @@
                   src="@/assets/images/subscribe/new-logo.png"
                   alt=""
                   style="margin-left: 8px; width: 40px"
-                />
+                >
               </div>
               <div>提供重点供应商、采购预算/方式等分析</div>
             </li>
@@ -58,7 +70,7 @@
                   src="@/assets/images/subscribe/new-logo.png"
                   alt=""
                   style="margin-left: 8px; width: 40px"
-                />
+                >
               </div>
               <div>招标文件/采购清单一键下载</div>
             </li>
@@ -69,7 +81,7 @@
                   src="@/assets/images/subscribe/new-logo.png"
                   alt=""
                   style="margin-left: 8px; width: 40px"
-                />
+                >
               </div>
               <div>支持用户点击原文链接查看公告原地址,鉴别信息真伪</div>
             </li>
@@ -79,7 +91,7 @@
                 src="@/assets/images/subscribe/new-logo.png"
                 alt=""
                 style="margin-left: 8px; width: 40px"
-              />
+              >
             </li>
             <li>订阅关键词</li>
             <li>中标企业联系方式</li>
@@ -102,34 +114,64 @@
               <div>采购单位搜索</div>
               <div>按地区、采购单位类型等搜索采购单位信息,高效精准拓客</div>
             </li>
-            <li class="gray">月报/周报</li>
+            <li class="gray">
+              月报/周报
+            </li>
             <li class="double">
               <div>标讯收藏</div>
               <div>关注项目一键收藏,重要信息不遗漏</div>
             </li>
-            <li class="gray">专属资源社群对接</li>
+            <li class="gray">
+              专属资源社群对接
+            </li>
           </ul>
         </div>
         <div class="center-center">
           <ul class="clearfix">
-            <li class="top-title modify-center gray">免费订阅</li>
-            <li class="double"><i class="wrong"></i></li>
-            <li class="gray double"><i class="wrong"></i></li>
-            <li class="double"><i class="wrong"></i></li>
-            <li class="double"><i class="wrong"></i></li>
-            <li class="gray"><i class="wrong"></i></li>
+            <li class="top-title modify-center gray">
+              免费订阅
+            </li>
+            <li class="double">
+              <i class="wrong" />
+            </li>
+            <li class="gray double">
+              <i class="wrong" />
+            </li>
+            <li class="double">
+              <i class="wrong" />
+            </li>
+            <li class="double">
+              <i class="wrong" />
+            </li>
+            <li class="gray">
+              <i class="wrong" />
+            </li>
             <li>10组</li>
             <li>公告公示</li>
             <li>免费订阅1个省</li>
             <li>300条/天</li>
             <li>标题</li>
-            <li class="double"><i class="wrong"></i></li>
-            <li class="gray double"><i class="wrong"></i></li>
-            <li class="double">4条/次</li>
-            <li class="double"><i class="right"></i></li>
-            <li class="gray"><i class="wrong"></i></li>
-            <li class="double">100条</li>
-            <li class="gray"><i class="wrong"></i></li>
+            <li class="double">
+              <i class="wrong" />
+            </li>
+            <li class="gray double">
+              <i class="wrong" />
+            </li>
+            <li class="double">
+              <i class="right" />
+            </li>
+            <li class="double">
+              <i class="right" />
+            </li>
+            <li class="gray">
+              <i class="wrong" />
+            </li>
+            <li class="double">
+              100条
+            </li>
+            <li class="gray">
+              <i class="wrong" />
+            </li>
           </ul>
         </div>
         <div class="center-right">
@@ -139,38 +181,65 @@
                 src="@/assets/images/subscribe/new-crown.png"
                 alt=""
                 style="width: 28px; position: relative"
-              />
-              <div style="margin-left: 8px">超级订阅</div>
-            </li>
-            <li class="double">50个画像/省/月</li>
-            <li class="gold double">5个画像/省/月</li>
-            <li class="double">10个/月</li>
-            <li class="double"><i class="right"></i></li>
-            <li class="gold"><i class="right"></i></li>
+              >
+              <div style="margin-left: 8px">
+                超级订阅
+              </div>
+            </li>
+            <li class="double">
+              50个画像/省/月
+            </li>
+            <li class="gold double">
+              5个画像/省/月
+            </li>
+            <li class="double">
+              10个/月
+            </li>
+            <li class="double">
+              <i class="right" />
+            </li>
+            <li class="gold">
+              <i class="right" />
+            </li>
             <li>300组</li>
             <li>招标公告+国家企业公示</li>
             <li>根据套餐类型可选</li>
             <li>2000条/天</li>
             <li>标题+全文</li>
-            <li class="double">可选</li>
-            <li class="gold double"><i class="right"></i></li>
-            <li class="double">150条/次</li>
-            <li class="double"><i class="right"></i></li>
-            <li class="gold"><i class="right"></i></li>
-            <li class="double">5000条</li>
-            <li class="gold"><i class="right"></i></li>
+            <li class="double">
+              可选
+            </li>
+            <li class="gold double">
+              <i class="right" />
+            </li>
+            <li class="double">
+              <i class="right" />
+            </li>
+            <li class="double">
+              <i class="right" />
+            </li>
+            <li class="gold">
+              <i class="right" />
+            </li>
+            <li class="double">
+              5000条
+            </li>
+            <li class="gold">
+              <i class="right" />
+            </li>
           </ul>
         </div>
       </div>
     </div>
-    <div class="view-all" @click="viewAll">查看全部权益 <i class="iconfont icon-more"></i></div>
-
+    <div class="view-all" @click="viewAll">
+      查看全部权益 <i class="iconfont icon-more" />
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'contrast',
+  name: 'Contrast',
   data() {
     return {
       stickyed: {
@@ -182,8 +251,8 @@ export default {
   },
   mounted() {
     setTimeout(this.calcStickyNav, 100)
-    this.$refs.stickyHeader.windowScrollStickyEventCallback =
-      this.stickyCallback
+    this.$refs.stickyHeader.windowScrollStickyEventCallback
+      = this.stickyCallback
   },
   methods: {
     calcStickyNav() {
@@ -197,16 +266,16 @@ export default {
       // 表格顶部固定
       const tableDom = $(this.$refs.main)
       const tableHeaderChangeDom = $(this.$refs.stickyHeader)
-      const tableMaxHeight =
-        tableDom.height() +
-        this.stickyed.startFixedTop -
-        tableHeaderChangeDom.height()
-      const show =
-        $(window).scrollTop() > this.stickyed.startFixedTop &&
-        $(window).scrollTop() < tableMaxHeight
+      const tableMaxHeight
+        = tableDom.height()
+          + this.stickyed.startFixedTop
+          - tableHeaderChangeDom.height()
+      const show
+        = $(window).scrollTop() > this.stickyed.startFixedTop
+          && $(window).scrollTop() < tableMaxHeight
       this.stickyed.forbid = !show
     },
-    viewAll () {
+    viewAll() {
       window.open('/product/index?serviceType=0', '_blank')
     }
   }