|
@@ -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')
|
|
|
}
|
|
|
}
|