web/src/views/vipsubscribe/components/Contrast.vue

<template>
  <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>
      </div>
    </div>
    <div class="contrast-main">
      <ul class="contrast-main-header flex-r-c" ref="stickyHeader" v-stickyed="stickyed">
        <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>
        </li>
      </ul>
      <div class="contrast-main-center" ref="main">
        <div class="center-left">
          <ul class="clearfix">
            <li class="top-title modify-left">功能/产品</li>
            <li class="double">
              <div style="display: flex; align-items: center;">
                <div>企业画像</div>
                <img src="@/assets/images/subscribe/new-logo.png" alt="" style="margin-left: 8px;width: 40px;"></div>
              <div>提供企业中标项目分析、重点客户等多维分析</div>
            </li>
            <li class="gray double">
              <div style="display: flex; align-items: center;">
                <div>采购单位画像</div>
                <img src="@/assets/images/subscribe/new-logo.png" alt="" style="margin-left: 8px;width: 40px;">
              </div>
              <div>提供重点供应商、采购预算/方式等分析</div>
            </li>
            <li class="double">
              <div style="display: flex; align-items: center;">
                <div>附件下载</div>
                <img src="@/assets/images/subscribe/new-logo.png" alt="" style="margin-left: 8px;width: 40px;">
              </div>
              <div>招标文件/采购清单一键下载</div></li>
            <li class="gray" style="display: flex; align-items: center;">
              <div>项目报告下载</div>
              <img src="@/assets/images/subscribe/new-logo.png" alt="" style="margin-left: 8px;width: 40px;">
            </li>
            <li>订阅关键词</li>
            <li>中标企业联系方式</li>
            <li>订阅区域</li>
            <li>订阅推送</li>
            <li>匹配方式</li>
            <li class="double"><div>推送设置</div><div>固定时间/实时推送</div></li>
            <li class="gray double"><div>标讯高级搜索</div><div>按联系方式、附件、项目名称/标的物、发布时间搜索</div></li>
            <li class="double"><div>企业搜索</div><div>按中标项目/标的物、联系方式等搜索企业信息</div></li>
            <li class="gray">月报/周报</li>
            <li class=" double"><div>标讯收藏</div><div>关注项目一键收藏，重要信息不遗漏</div></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="gray"><i class="wrong"></i></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="gray "><i class="wrong"></i></li>
            <li class=" double">100条</li>
            <li class="gray"><i class="wrong"></i></li>
          </ul>
        </div>
        <div class="center-right">
          <ul class="clearfix">
            <li class="top-title modify-right flex-r-c center">
              <img 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="gold"><i class="right"></i></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="gold "><i class="right"></i></li>
            <li class="double">5000条</li>
            <li class="gold "><i class="right"></i></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'contrast',
  data () {
    return {
      stickyed: {
        className: ['contrast-fixed'],
        startFixedTop: 1000, // 从高度为startFixedTop处开始置顶
        forbid: false
      }
    }
  },
  mounted () {
    setTimeout(this.calcStickyNav, 100)
    this.$refs.stickyHeader.windowScrollStickyEventCallback = this.stickyCallback
  },
  methods: {
    calcStickyNav () {
      const offset = $(this.$refs.main).offset()
      if (offset) {
        this.stickyed.startFixedTop = offset.top - 70
      }
    },
    stickyCallback () {
      // 表格顶部固定
      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
      this.stickyed.forbid = !show
    }
  }
}
</script>

<style lang="scss" scoped>
.split-box {
  &--before {
    margin-right: 25px;
    &::before {
      content: "";
      display: inline-block;
      width: 120px;
      height: 1px;
      margin-bottom: 4px;
      background: linear-gradient(90deg, rgba(204, 173, 135, 0), #CCAD87 100%);
    }
    &::after {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #CCAD87;
      transform: rotate(45deg);
    }
  }
  &--after {
    margin-left: 25px;
    &::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #CCAD87;
      transform: rotate(45deg);
    }
    &::after {
      content: "";
      display: inline-block;
      width: 120px;
      height: 1px;
      margin-bottom: 4px;
      background: linear-gradient(90deg, #CCAD87, rgba(204, 173, 135, 0) 100%);
    }
  }
}
.line-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.text-vs {
  width: 39px;
  height: 18px;
  margin: 0 10px;
}
.second-desc {
  font-size: 24px;
  color: #1D1D1D;
  line-height: 36px;
}
.sub-contrast {
  width: 100%;
  min-height: 1020px;
  padding-top: 79px;
  background-color: #fff;
  .contrast-header {
    width: 100%;
    height: 31px;
  }
  .contrast-main {
    width: 100%;
    height: 1020px;
    margin-top: 32px;

    $border-color: #ececec;

    i {
      &.wrong {
        width: 100%;
        height: 100%;
        &::before {
          display: block;
          width: 100%;
          height: 100%;
          content: "";
          background: url(~@/assets/images/icon/guan.png) no-repeat center;
          background-size: 16px 16px;
        }
      }
      &.right::before {
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        background-image: url(~@/assets/images/icon/right.png);
        background-size: 24px 24px;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
    .top-title {
      height: 68px;
      text-align: center;
      transition: all 0.5s;
      line-height: 68px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(29, 29, 29, 1);
      opacity: 1;
      border-bottom: 1px solid $border-color;
    }
    .contrast-main-header {
      display: none;
      padding: 0 30px;
      height: 68px;
      flex-wrap: nowrap;
      .modify-left {
        width: 468px;
        height: 100%;
        background-color: #fff;
        border: 1px solid $border-color;
      }
      .modify-center {
        width: 336px;
        height: 100%;
        background: #F5F5FB;
        border: 1px solid $border-color;
      }
      /* 选中VIP订阅专属服务 */
      .modify-right {
        width: 336px!important;
        height: 100%;
        background: rgba(52, 53, 90, 1);
        color: rgba(255, 218, 177, 1);
        position: relative;
        border-right: 0;
        width: 100%;
        background-image: url(~@/assets/images/vip/mengban.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        img {
          background: rgba(52, 53, 90, 1);
          color: rgba(255, 218, 177, 1);
          position: absolute;
          right: 0;
          bottom: 0;
          width: 174px;
        }
      }
    }
    .contrast-fixed {
      display: block;
    }
    .contrast-main-center {
      display: flex;
      justify-content: center;
      padding: 0 32px;
      width: 100%;
      .gray {
        background: #F5F5FB;
      }
      .gold {
        background: #FBF5EB !important;
      }

      /* 功能/价格 */
      /* li+li表示选中除第一个li其他所有的li */
      .center-left {
        flex: 4;
        & > ul {
          width: 100%;
          margin: 0;
          li + li {
            color: rgba(29, 29, 29, 1);
            padding-left: 24px;
            width: 100%;
            opacity: 1;
            border-left: 1px solid #ececec;
            border-bottom: 1px solid $border-color;
            border-right: 1px solid $border-color;
            font-family: Microsoft YaHei;
            &.double {
              height: 74px;
              font-size: 16px;
              font-weight: 400;
              color: rgba(29, 29, 29, 1);
              display: flex;
              flex-direction: column;
              justify-content: center;
              & > div:nth-child(1){
                font-size: 16px;
                line-height: 24px;
                color: #1D1D1D;
                font-weight: 400;
              }
            }
            &:not(.double) {
              height: 52px;
              line-height: 52px;
              font-size: 16px;
              font-weight: 400;
              color: rgba(29, 29, 29, 1);
            }

            &.double,
            &.double > div:nth-child(2) {
              font-size: 14px;
              font-weight: 400;
              color: #686868;
              line-height: 22px;
            }
          }
        }
        .modify-left {
          width: 100%;
          border-left: 1px solid $border-color;
          border-top: 1px solid $border-color;
        }
      }

      // 免费版
      .center-center {
        flex: 3;
        transition: all 0.5s;
        & > ul {
          width: 100%;
          transition: all 0.5s;
          margin: 0;
          li + li {
            transition: all 0.5s;
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(29, 29, 29, 1);
            opacity: 1;
            border-bottom: 1px solid $border-color;
            border-right: 1px solid $border-color;

            &.double {
              height: 74px;
              line-height: 74px;
            }
            &:not(.double) {
              height: 52px;
              line-height: 52px;
            }
          }

          li {
            &:last-of-type {
              display: flex;
              transition: all 0.5s;
              justify-content: center;
              align-items: center;

              .btn-free {
                display: block;
                cursor: pointer;
                transition: all 0.5s;
                width: 90px;
                height: 30px;
                background: rgba(246, 246, 246, 1);
                opacity: 1;
                border-radius: 4px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 26px;
                color: rgba(104, 104, 104, 1);
              }
            }
          }
        }

        /* 免费版滑过特效 */
        &:hover {
          position: relative;
          ul {
            transition: 0.5s;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
            margin-top: -22px;

            .modify-center {
              height: 90px;
              line-height: 90px;
              transition: 0.5s;
            }

            li {
              &:last-of-type {
                height: 65px;
                transition: 0.5s;
                line-height: 80px;
                display: flex;
                justify-content: center;
                align-items: center;

                .btn-free {
                  transition: 0.5s;
                  background: rgba(44, 183, 202, 1);
                  color: white;
                }
              }
            }
          }
        }
      }

      /* VIP订阅专属服务 */
      .center-right {
        flex: 3;
        transition: all 0.5s;
        border-right: 1px solid $border-color;

        & > ul {
          width: 100%;
          margin: 0;
          transition: all 0.5s;

          li + li {
            width: 100%;
            text-align: center;
            transition: all 0.5s;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #714402;
            background: rgba(255, 226, 193, 0.08);
            opacity: 1;
            border-bottom: 1px solid $border-color;

            &.double {
              height: 74px;
              line-height: 74px;
            }
            &:not(.double) {
              height: 52px;
              line-height: 52px;
            }
          }

          li {
            &:last-of-type {
              align-items: center;
              transition: all 0.5s;

              .On-trial {
                width: 90px;
                height: 30px;
                border: 1px solid rgba(207, 173, 137, 1);
                transition: all 0.5s;
                opacity: 1;
                border-radius: 4px;
                display: block;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: rgba(207, 173, 137, 1);
                margin-left: 16px;
                text-decoration: none !important;
              }
            }
          }
        }

        /* VIP订阅滑过特效 */
        &:hover {
          position: relative;
          ul {
            margin-top: -22px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
            transition: all 0.5s;

            .modify-right {
              height: 90px;
              line-height: 90px;
              transition: all 0.5s;
            }

            li {
              &:last-of-type {
                height: 65px;
                line-height: 80px;
                transition: all 0.5s;

                .On-trial {
                  background: #34355A;
                  font-size: 14px;
                  font-family: MicrosoftYaHei;
                  line-height: 30px;
                  color: rgba(255, 218, 177, 1);
                  transition: all 0.5s;
                  opacity: 1;
                  text-decoration: none;
                }
              }
            }
          }
        }
      }

      ul {
        /* 选中免费版 */
        .modify-center {
          background: #F5F5FB;
          width: 100%;
        }
        /* 选中VIP订阅专属服务 */
        .modify-right {
          background: rgba(52, 53, 90, 1);
          color: rgba(255, 218, 177, 1);
          position: relative;
          border-right: 0;
          width: 100%;
          background-image: url(~@/assets/images/vip/mengban.png);
          background-repeat: no-repeat;
          background-position: right bottom;
          img {
            background: rgba(52, 53, 90, 1);
            color: rgba(255, 218, 177, 1);
            position: absolute;
            right: 0;
            bottom: 0;
            width: 174px;
          }
        }

        li > p {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #686868;
          line-height: 22px;
        }
      }
    }
  }
}
</style>