web/apps/bigmember_pc/src/views/article-content/components/ContentMask.vue

<script setup>
import { computed } from 'vue'
// 三个类型的遮罩 free-max、proposed、purchase
/**
 *   if(!canRead){
 *     sourceKey="jyarticle_see3_plus_pc"
 *   }
 *   if (subType == '拟建') {
 *     sourceKey = 'article_proposed_project'
 *   }
 *   if (subType == '采购意向') {
 *     sourceKey = 'article_purchase_intention'
 *   }
 */

const props = defineProps({
  type: {
    type: String,
    default: ''
  }
})

const nowActiveMaskType = computed(() => {
  return props.type
})
</script>
<template>
  <div
    class="content-mask-container com-prebuilt"
    v-if="nowActiveMaskType"
    :class="nowActiveMaskType"
    style="position: relative"
  >
    <div
      v-if="nowActiveMaskType === 'proposed'"
      class="mask-zz"
      style="
        position: absolute;
        width: 100%;
        padding: 0;
        height: 408px;
        background-color: white;
        z-index: 1;
      "
    >
      <img
        style="width: 100%; height: 100%; margin-top: 27px"
        src="@/assets/images/article-mask/pc_mh.png"
      />
      <div
        class="mask-zz"
        style="
          position: absolute;
          left: 50%;
          top: 50%;
          margin-top: -184px;
          margin-left: -320px;
          width: 650px;
          height: 220px;
          background-color: white;
          z-index: 10;
          border-radius: 10px;
        "
      >
        <div style="position: relative">
          <img
            style="width: 100%; height: 128px"
            src="@/assets/images/article-mask/pc-cq-mmt.png"
          />
          <div
            id="tip-title"
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              margin-top: -38px;
              transform: translateX(-50%);
              height: 26px;
              color: antiquewhite;
              font-size: 14px;
            "
          >
            超前项目抢先知，中标更容易
          </div>
        </div>
        <div class="tip-box">
          <div
            class="tip-box-example"
            style="width: 602px; height: 357px; margin-top: -88px; z-index: 9"
          >
            <img
              style="width: 100%; height: 100%"
              src="@/assets/images/article-mask/pc-nj-example.png"
              alt=""
            />
          </div>
          <div class="tip-text" style="margin-top: 12px">
            提前3-12个月获取审批中的新项目，超前项目抢先介入，商机提前掌控。
          </div>
          <button
            class="detail-nj-btn"
            style="
              background: #2cb7ca;
              color: white;
              border: none;
              width: 132px;
              height: 36px;
              border-radius: 6px;
              margin-bottom: 20px;
              margin-top: 24px;
            "
            @click="$emit('doOpenCollect', 'article_proposed_project')"
          >
            点击体验
          </button>
        </div>
      </div>
    </div>

    <div
      v-if="nowActiveMaskType === 'purchase'"
      class="mask-zzz"
      style="padding: 0; height: 408px; background-color: white; z-index: 1"
    >
      <img
        style="width: 100%; height: 100%"
        src="@/assets/images/article-mask/pc_mh.png"
      />
      <div
        class="mask-zzz"
        style="
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate3d(-50%, -50%, 0);
          width: 500px;
          background-color: white;
          z-index: 10;
          border-radius: 10px;
        "
      >
        <div style="position: relative">
          <img
            style="width: 100%; height: 35%"
            src="@/assets/images/article-mask/pc_zzt.png"
          />
          <div
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%, -50%, 0);
              height: 26px;
              color: antiquewhite;
              font-size: 16px;
            "
          >
            项目提前介入，中标更轻松
          </div>
        </div>
        <div class="tip-box">
          <div class="tip-text">
            提前1-3个月获取项目信息，及早介入准备更充分
          </div>
          <button
            class="detail-nj-btn"
            style="
              background: #2cb7ca;
              color: white;
              border: none;
              width: 132px;
              height: 36px;
              border-radius: 6px;
              margin-bottom: 12px;
              margin-top: 10px;
            "
            @click="$emit('doOpenCollect', 'article_purchase_intention')"
          >
            点击体验
          </button>
        </div>
      </div>
    </div>

    <div
      v-if="nowActiveMaskType === 'free-max'"
      class="mask-zzz free-equity-mask"
      style="
        top: 0;
        padding: 0;
        height: 587px;
        background-color: white;
        z-index: 1;
      "
    >
      <img
        style="width: 100%; height: 100%"
        src="@/assets/images/article-mask/pc_mh.png"
      />
      <div
        class="mask-zzz"
        style="
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate3d(-50%, -50%, 0);
          width: 632px;
          background-color: white;
          z-index: 10;
          border-radius: 10px;
        "
      >
        <div style="position: relative">
          <img
            style="width: 100%; height: 35%; border-radius: 10px 10px 0 0"
            src="@/assets/images/article-mask/pc_zzt_new.jpg"
          />
          <div
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              margin-top: -13px;
              width: 100%;
              height: 26px;
              color: #1d1d1d;
              font-size: 18px;
              transform: translateX(-50%);
              text-align: center;
            "
          >
            您尚未完善信息，今日查看公告权限用完啦
          </div>
        </div>
        <div
          class="tip-box"
          style="padding: 12px 32px 32px; border: 0; border-radius: 0 0 8px 8px"
        >
          <!-- <div class="tip-text">请完善个人信息，获取更多免费查看公告权限</div>
          <button class="detail-nj-btn  jyarticle_see3" style="background: #2CB7CA;color: white;border:none;width: 132px;height: 36px;border-radius: 6px;margin-bottom: 12px;margin-top: 10px">立即解锁</button> -->
          <div class="free-equity-contrast" style="display: flex">
            <div class="table-columns">
              <div class="item-td"></div>
              <div class="item-td">标讯权益</div>
              <div class="item-td">超前项目权益</div>
              <div class="item-td">每日查看数量</div>
              <div class="item-td"></div>
            </div>
            <div class="table-columns">
              <div class="item-td">
                <strong
                  style="font-size: 14px; line-height: 22px; color: #1d1d1d"
                  >免费注册用户</strong
                >
              </div>
              <div
                class="item-td"
                style="
                  border-right: 0;
                  align-items: flex-start;
                  padding-left: 16px;
                "
              >
                可查看招标预告、招标公告、招标结果、招标信用信息
              </div>
              <div class="item-td">
                <img
                  src="@/assets/images/article-mask/icon-aaa.png"
                  alt=""
                  width="24"
                  height="24"
                />
              </div>
              <div class="item-td">3条</div>
              <div class="item-td"></div>
            </div>
            <div class="table-columns">
              <div class="item-td main-bg">
                <strong>免费注册用户</strong
                ><span style="font-size: 12px">（完善信息）</span>
              </div>
              <div
                class="item-td"
                style="border-right: 0; align-items: flex-end"
              ></div>
              <div class="item-td">
                <img
                  src="@/assets/images/article-mask/icon-aaa.png"
                  alt=""
                  width="24"
                  height="24"
                />
              </div>
              <div class="item-td main-color">不限</div>
              <div class="item-td">
                <span
                  class="detail-nj-btn jyarticle_see3 perfect-btn"
                  @click="
                    $emit('doOpenCollect', {
                      source: 'jyarticle_see3_plus_pc',
                      reload: true
                    })
                  "
                  >完善个人信息</span
                >
              </div>
            </div>
            <div class="table-columns">
              <div class="item-td gold-bg">
                <strong>大会员</strong>
                <span style="font-size: 12px; line-height: 18px"
                  >大数据赋能企业数字化营销</span
                >
                <a
                  href="/big/page/index"
                  target="_blank"
                  style="
                    font-size: 12px;
                    text-decoration: underline;
                    color: rgba(89, 57, 19, 1);
                  "
                  >全面了解></a
                >
              </div>
              <div
                class="item-td"
                style="border-right: 0; align-items: flex-start"
              ></div>
              <div class="item-td gold-color">
                采购意向
                <br />
                拟建项目
                <br />
                AI智能预测
              </div>
              <div class="item-td gold-color">不限</div>
              <div class="item-td gold-color">
                <span
                  class="free-taste-btn"
                  @click="$emit('doOpenCollect', 'pc_article_member_freeuse')"
                  >免费体验</span
                >
                <span
                  class="open-customer contact-kf"
                  @click="$emit('doOpenCustomer')"
                  >咨询客服</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content-mask-container {
  &.proposed {
    height: 620px;
    background-color: #fff;
  }
  &.purchase {
  }
  &.free-max {
  }

  .tip-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 35px;
    background: #ffffff;
    box-shadow: 0px 0px 28px 1px rgba(0, 0, 0, 0.07999999821186066);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #ececec;
  }
  .tip-text {
    font-size: 16px;

    font-weight: 400;
    color: #1d1d1d;
    line-height: 24px;
  }

  .free-equity-contrast {
    display: flex;
    width: 100%;
    border: 1px solid #ececec;
    border-radius: 8px;
  }
  .free-equity-contrast .gold-bg {
    border-radius: 0 8px 0 0;
    border-right: 0;
  }
  .table-columns:nth-child(1) {
    width: 116px;
  }
  .table-columns:nth-child(2) {
    width: 116px;
    color: #686868;
  }
  .table-columns:nth-child(3) {
    width: 154px;
    color: #686868;
  }
  .table-columns:nth-child(4) {
    width: 184px;
    color: #686868;
  }
  .table-columns .item-td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
    white-space: nowrap;
    transition: all 0.5s ease;
    text-align: center;
  }
  .table-columns:nth-child(3):hover .item-td:nth-child(1),
  .table-columns:nth-child(4):hover .item-td:nth-child(1) {
    margin-top: -12px;
    height: 84px;
    border-radius: 8px 8px 0 0;
    transition: all 0.5s ease;
    overflow: hidden;
  }
  .table-columns:nth-child(3):hover .item-td:nth-child(5),
  .table-columns:nth-child(4):hover .item-td:nth-child(5) {
    margin-bottom: -12px;
    height: 84px;
    border-radius: 0 0 8px 8px;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
  }
  .table-columns .item-td:nth-child(1) {
    height: 72px;
  }
  .table-columns .item-td:nth-child(2) {
    height: 48px;
  }
  .table-columns .item-td:nth-child(3) {
    height: 82px;
  }
  .table-columns .item-td:nth-child(4) {
    height: 48px;
  }
  .table-columns .item-td:nth-child(5) {
    height: 72px;
    border-bottom: 0;
  }
  .table-columns:nth-child(4) .item-td {
    border-right: 0;
  }
  .table-columns:nth-child(1) .item-td,
  .table-columns:nth-child(2) .item-td:nth-child(1) {
    background: #f7f9fc;
  }
  .free-equity-contrast .item-td strong {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
  }
  .free-equity-contrast .item-td.main-bg {
    background: #2cb7ca;
    color: #fff;
  }
  .free-equity-contrast .item-td.gold-bg {
    color: #593913;
    background: linear-gradient(to right, #fff3e0, #f4deb1);
  }
  .free-equity-contrast .item-td.main-color {
    color: #2cb7ca;
  }
  .free-equity-contrast .item-td.gold-color {
    color: #b1700e;
  }
  .free-equity-contrast .perfect-btn {
    display: inline-block;
    padding: 5px 14px;
    background: #2abed1;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
  }
  .free-equity-contrast .free-taste-btn {
    display: inline-block;
    padding: 5px 28px;
    border: 1px solid #e7c28a;
    background: linear-gradient(to right, #fff9f0, #fef0d7);
    color: #b1700e;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
  }
  .free-equity-contrast .contact-kf {
    margin-top: 2px;
    text-decoration: underline;
    color: #b1700e;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
  }
}
</style>