feat: 新增企业认证服务悬浮窗口

apps/bigmember_pc/src/views/article-content/components/ContentThirdPopover.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="third-party-popover-content-template">
+    <div class="third-party popover-content-header">
+      <div class="p-c-h-title">剑鱼认证服务</div>
+      <div class="p-c-h-content">
+        <div class="p-c-h-c-list">
+          <div class="p-c-h-c-item">
+            <span class="icon-verify-checked"></span>&nbsp;&nbsp;认监委官网可查
+          </div>
+          <div class="p-c-h-c-item">
+            <span class="icon-verify-checked"></span>&nbsp;&nbsp;认证品类齐全
+          </div>
+          <div class="p-c-h-c-item">
+            <span class="icon-verify-checked"></span>&nbsp;&nbsp;量身定制方案
+          </div>
+        </div>
+        <div>招投标必备 · 品牌提升 · 奖励补贴 · 吸引投资</div>
+        <div>ISO体系认证丨信用评定丨服务体系认证丨其他认证证书</div>
+      </div>
+    </div>
+    <div class="third-party popover-content-main bidcontent">
+      <div class="bid_tel">
+        <img
+          src="@/assets/images/tel.png"
+          alt=""
+          style="width: 20px; height: 20px"
+        />
+        <span class="bid_phonetext">咨询 $tel 了解更多</span>
+      </div>
+      <div class="p-c-m-content">
+        <div class="p-c-m-content-l bid_classfun">
+          <div class="classfun_list">
+            <img
+              src="@/assets/images/blue-duihao.png"
+              alt=""
+              style="width: 20px; height: 20px"
+            />
+            <span class="classs_text"
+              >体系认证：品牌提升，投标加分，提升企业竞争力</span
+            >
+          </div>
+          <div class="classfun_list">
+            <img
+              src="@/assets/images/blue-duihao.png"
+              alt=""
+              style="width: 20px; height: 20px"
+            />
+            <span class="classs_text">信用认证：企业信用名片，招投标必备</span>
+          </div>
+          <div class="classfun_list">
+            <img
+              src="@/assets/images/blue-duihao.png"
+              alt=""
+              style="width: 20px; height: 20px"
+            />
+            <span class="classs_text">服务体系认证：实力认证，竞争有优势</span>
+          </div>
+        </div>
+        <div class="p-c-m-content-r">
+          <div class="t-p-verify-customer-qr" title="客服企业微信二维码">
+            <img alt="客服企业微信二维码" />
+          </div>
+          <div class="p-c-m-c-r-text">添加客服微信<br />备注认证服务</div>
+        </div>
+      </div>
+    </div>
+    <div class="third-party popover-content-footer bidfoot">
+      <a
+        class="bid_button_cancel bid_btn"
+        href="/swordfish/frontPage/enterpriseCertificatio/free/index"
+        target="_blank"
+        >了解详情</a
+      >
+      <div class="bid_button_confirm bid_btn third-party-apply-for-button">
+        申请认证
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.content-detail-container {
+  .third-party-verify-button {
+    position: relative;
+    margin: 0 6px;
+    display: inline-flex;
+    align-items: center;
+    color: #2abed1;
+    cursor: pointer;
+  }
+  .third-party-verify-button > .icon {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+  .third-party-verify-button .third-party-button-text {
+    margin-left: 20px;
+    line-height: 20px;
+    font-size: 14px;
+  }
+}
+.icon-third-party-verify-logo {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background: url(~@/assets/images/icon/verify-logo.png) no-repeat center center;
+  background-size: contain;
+}
+.icon-verify-checked {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background: url(~@/assets/images/icon/verify-check.png) no-repeat center
+    center;
+  background-size: contain;
+}
+
+.third-party-popover-content-template {
+  width: 623px;
+  background-color: #fff;
+  padding: 24px;
+
+  .center-card-container {
+    display: flex;
+    padding: 15px 0;
+  }
+  .center-card-container .center-card-item:not(:last-of-type) {
+    margin-right: 20px;
+  }
+
+  .center-card-item {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 8px 24px;
+    border: 1px solid #ececec;
+    border-radius: 6px;
+  }
+  .center-card-item .cci-title {
+    margin-bottom: 4px;
+    font-size: 16px;
+    line-height: 24px;
+    color: #1d1d1d;
+  }
+  .center-card-item .cci-content .cci-text:not(:last-of-type) {
+    margin-right: 16px;
+  }
+  .center-card-item .cci-text {
+    position: relative;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .center-card-item .cci-text.cci-light {
+    color: #2cb7ca;
+  }
+  .center-card-item .cci-text.cci-dark {
+    color: #686868;
+  }
+  .center-card-item .cci-text.suffix-right::after {
+    content: '>';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(120%, -50%);
+    color: inherit;
+  }
+  .third-party-popover-content a,
+  .center-card-item a {
+    text-decoration: none;
+  }
+
+  .lead-btn .join {
+    margin-left: 0;
+    width: unset;
+    height: unset;
+    text-align: left;
+    background-color: transparent;
+  }
+
+  .biddetail-content .popover[role='tooltip'][id^='popover'] {
+    padding: 12px;
+    max-width: unset;
+    width: 620px;
+    border-color: #ebeef5;
+  }
+  .biddetail-content .arrow {
+    display: none;
+  }
+  .third-party.popover-content {
+    padding: 20px;
+  }
+  .third-party.popover-content-main {
+    border-top: 1px solid #ececec;
+  }
+  .third-party.popover-content-header {
+    padding-bottom: 16px;
+  }
+  .third-party.popover-content-header .p-c-h-title {
+    font-size: 18px;
+    line-height: 28px;
+    color: #1d1d1d;
+  }
+  .third-party.popover-content-header .p-c-h-content {
+    margin-top: 10px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #686868;
+  }
+  .third-party.popover-content-header .p-c-h-c-list {
+    display: flex;
+    align-items: center;
+  }
+  .third-party.popover-content-header .p-c-h-c-item {
+    margin-right: 32px;
+    display: flex;
+    align-items: center;
+  }
+  .third-party.popover-content-main .p-c-m-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .third-party.popover-content-main .p-c-m-content .classfun_list {
+    margin-bottom: 8px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #1d1d1d;
+  }
+  .third-party.popover-content-main .p-c-m-content-r {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .third-party.popover-content-main .p-c-m-content-r img {
+    display: block;
+    width: 100%;
+  }
+  .t-p-verify-customer-qr {
+    padding: 4px;
+    width: 82px;
+    border-radius: 6px;
+    border: 1px solid #2abed1;
+  }
+}
+</style>