|
|
@@ -1,26 +1,26 @@
|
|
|
<script setup>
|
|
|
-import ContentHeader from '@/views/article-content/components/ContentHeader.vue'
|
|
|
-import CollectInfo from '@/components/collect-info/CollectInfo.vue'
|
|
|
import {
|
|
|
ref,
|
|
|
onMounted,
|
|
|
onBeforeMount,
|
|
|
computed,
|
|
|
- getCurrentInstance,
|
|
|
- watch
|
|
|
+ getCurrentInstance
|
|
|
} from 'vue'
|
|
|
-import { debounce } from 'lodash'
|
|
|
-import { useRoute, useRouter } from 'vue-router/composables'
|
|
|
+import { useRoute } from 'vue-router/composables'
|
|
|
+import { debounce, throttle } from 'lodash'
|
|
|
+import { replaceKeyword } from '@/utils'
|
|
|
+import { dateFromNow } from '@jy/util'
|
|
|
+// 组件引入
|
|
|
+import ContentHeader from '@/views/article-content/components/ContentHeader.vue'
|
|
|
+import CollectInfo from '@/components/collect-info/CollectInfo.vue'
|
|
|
import Reward from '@/views/article-content/components/Reward.vue'
|
|
|
import TimeLine from '@/components/time-line/TimeLine.vue'
|
|
|
import ContentMask from '@/views/article-content/components/ContentMask.vue'
|
|
|
-
|
|
|
import Nps from '../components/Nps.vue'
|
|
|
import adsense from '@/views/order/components/adsense/index.vue'
|
|
|
import ContentLayout from '@/components/common/ContentLayout.vue'
|
|
|
-import { replaceKeyword } from '@/utils'
|
|
|
+
|
|
|
import RecommendCustomersList from '@/views/article-content/components/RecommendCustomers.vue'
|
|
|
-import { throttle } from 'lodash'
|
|
|
import ContentSummary from '@/views/article-content/components/ContentSummary.vue'
|
|
|
import RecommendEnt from '@/views/article-content/components/RecommendEnt.vue'
|
|
|
import QuickMonitor from '@/composables/quick-monitor/component/QuickMonitor.vue'
|
|
|
@@ -46,7 +46,6 @@ import ContentHeaderSkeleton from '@/views/article-content/components/ContentHea
|
|
|
import PoverTimeLine from '@/components/time-line/PoverTimeLine.vue'
|
|
|
import { useHoverHighlightTextPopover } from '@/views/article-content/composables/useHoverElementClientRect'
|
|
|
import attachmentDownload from '@/composables/attachment-download/component/AttachmentDownload.vue'
|
|
|
-import { dateFromNow } from '@jy/util'
|
|
|
|
|
|
useContentStore()
|
|
|
// 判断在哪个容器
|
|
|
@@ -339,8 +338,9 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
class="article-container"
|
|
|
:class="{ 'show-underline': hasProject }"
|
|
|
>
|
|
|
+ <!-- 标题 -->
|
|
|
<content-header></content-header>
|
|
|
-
|
|
|
+ <!-- 无权益遮罩 -->
|
|
|
<content-mask
|
|
|
v-if="canShowMask.show"
|
|
|
:type="canShowMask.type"
|
|
|
@@ -349,6 +349,7 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
></content-mask>
|
|
|
|
|
|
<div v-if="!canShowMask.show">
|
|
|
+ <!-- 顶部提示 -->
|
|
|
<div class="content-header-tip" v-if="ContentModel.isSelfSite">
|
|
|
<span>
|
|
|
该公告由业主方/采购单位直接发布，急寻供应商，立即报名直接联系业主方/采购单位参与投标采购。
|
|
|
@@ -359,7 +360,7 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
>立即报名</el-button
|
|
|
>
|
|
|
</div>
|
|
|
-
|
|
|
+ <!-- Tab + 吸顶 Tab -->
|
|
|
<div class="watch-tab-header">
|
|
|
<div class="content-tabs-fixed">
|
|
|
<div
|
|
|
@@ -387,7 +388,7 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <!-- 摘要 + 正文 -->
|
|
|
<div class="first-content-container">
|
|
|
<div
|
|
|
class="content-card watch-tab-content"
|
|
|
@@ -431,7 +432,7 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <!-- 招标/采购进度 -->
|
|
|
<div
|
|
|
class="content-card watch-tab-content"
|
|
|
name="招标/采购进度"
|
|
|
@@ -468,7 +469,7 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
</template>
|
|
|
</TimeLine>
|
|
|
</div>
|
|
|
-
|
|
|
+ <!-- 投标服务 -->
|
|
|
<div
|
|
|
class="content-card watch-tab-content"
|
|
|
name="投标服务"
|
|
|
@@ -477,7 +478,7 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
<div class="content-block-header">投标服务</div>
|
|
|
<recommend-serves @click-view-origin="doOpenOriginLink" />
|
|
|
</div>
|
|
|
-
|
|
|
+ <!-- 商机推荐 -->
|
|
|
<div
|
|
|
class="content-card watch-tab-content"
|
|
|
name="商机推荐"
|
|
|
@@ -486,7 +487,7 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
<div class="content-block-header">商机推荐</div>
|
|
|
<recommend-opportunities></recommend-opportunities>
|
|
|
</div>
|
|
|
-
|
|
|
+ <!-- 客户推荐 -->
|
|
|
<div
|
|
|
class="content-card watch-tab-content"
|
|
|
name="客户推荐"
|
|
|
@@ -507,16 +508,16 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <!-- 评分 -->
|
|
|
<Nps></Nps>
|
|
|
-
|
|
|
+ <!-- 内容底部广告 -->
|
|
|
<div class="article-content-footer-container">
|
|
|
<adsense code="jy-pccontent-bottom"></adsense>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-skeleton>
|
|
|
-
|
|
|
+ <!-- hover 项目、企业名称时展示 popover 最新标讯 -->
|
|
|
<pover-time-line
|
|
|
trigger="manual"
|
|
|
:title="popoverTimeLine.title"
|
|
|
@@ -527,17 +528,21 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
>
|
|
|
<div slot="content" :style="elementState.style"></div>
|
|
|
</pover-time-line>
|
|
|
+ <!-- 留资弹窗 -->
|
|
|
<collect-info ref="collectElement"></collect-info>
|
|
|
+ <!-- 底部悬浮广告 -->
|
|
|
<footer-ad
|
|
|
v-if="!canShowMask.show"
|
|
|
code="jy-pc-article-bottom-fixed"
|
|
|
></footer-ad>
|
|
|
+ <!-- 查看原文链接 -->
|
|
|
<origin-link
|
|
|
v-if="!canShowMask.show"
|
|
|
ref="originLinkElement"
|
|
|
:id="contentId"
|
|
|
@click-collect="doOpenCollectDialog"
|
|
|
></origin-link>
|
|
|
+ <!-- in-web 容器时右侧注入侧边栏 -->
|
|
|
<template #right v-if="InWhichContainer === 'in-web'">
|
|
|
<div id="inWebRightElement"></div>
|
|
|
</template>
|
|
|
@@ -569,246 +574,5 @@ const { elementState } = useHoverHighlightTextPopover({
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-.article-page-container {
|
|
|
- ::v-deep {
|
|
|
- .step-items:hover .item-label {
|
|
|
- text-decoration: underline;
|
|
|
- color: #fe7379;
|
|
|
- .highlight-text {
|
|
|
- color: inherit;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.article-content-footer-container {
|
|
|
- ::v-deep {
|
|
|
- .adsense {
|
|
|
- margin-top: 16px;
|
|
|
- padding: 0;
|
|
|
- cursor: pointer;
|
|
|
- .content {
|
|
|
- border: none;
|
|
|
- padding-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.content-card {
|
|
|
- margin-top: 16px;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 32px 40px;
|
|
|
- background-color: #fff;
|
|
|
- &.is-plain {
|
|
|
- border-radius: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.origin-detail-action {
|
|
|
- width: 132px;
|
|
|
- height: 34px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- color: #2abed1;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- .iconfont {
|
|
|
- font-size: 18px;
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.article-container {
|
|
|
- margin: 20px;
|
|
|
- margin-top: 0;
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- .step-circle[data-tip='']::before {
|
|
|
- transform: translate(0, -50%) scale(1.6);
|
|
|
- }
|
|
|
-
|
|
|
- .is-active-time-item {
|
|
|
- height: 22px;
|
|
|
- line-height: 22px;
|
|
|
- font-size: 12px;
|
|
|
- margin-left: 8px;
|
|
|
- padding: 0 12px;
|
|
|
- border-radius: 16px;
|
|
|
- border-bottom-left-radius: 0;
|
|
|
- background-color: rgba(255, 58, 32, 0.1);
|
|
|
- color: #ff3a20;
|
|
|
- }
|
|
|
- .content-block-header {
|
|
|
- position: relative;
|
|
|
- color: #1d1d1d;
|
|
|
- font-size: 20px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32px;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 4px;
|
|
|
- left: -40px;
|
|
|
- display: inline-block;
|
|
|
- width: 3px;
|
|
|
- height: 24px;
|
|
|
- border-radius: 0px 2px 2px 0px;
|
|
|
- background: #2abed1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content-detail-container {
|
|
|
- margin: 16px 0;
|
|
|
- color: #1d1d1d;
|
|
|
- font-size: 14px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 22px;
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- pre {
|
|
|
- display: inherit;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- font-size: 14px !important;
|
|
|
- word-break: break-word;
|
|
|
- white-space: pre-wrap;
|
|
|
- color: #333;
|
|
|
- background-color: #fff;
|
|
|
- border: 0px;
|
|
|
- border-radius: 4px;
|
|
|
- line-height: 25px;
|
|
|
- overflow-x: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .content-table-container {
|
|
|
- max-width: 100%;
|
|
|
- overflow-x: scroll;
|
|
|
- }
|
|
|
-
|
|
|
- table {
|
|
|
- white-space-collapse: collapse;
|
|
|
- border-collapse: collapse !important;
|
|
|
- border-spacing: 0px !important;
|
|
|
- line-height: 21px;
|
|
|
- background: transparent;
|
|
|
- max-width: 100%;
|
|
|
-
|
|
|
- th,
|
|
|
- tr td {
|
|
|
- border: 1px solid #ebebeb;
|
|
|
- padding: 10px;
|
|
|
- &:empty {
|
|
|
- border-width: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .first-content-container {
|
|
|
- background-color: #fff;
|
|
|
- .content-card {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .report-actions {
|
|
|
- font-size: 14px;
|
|
|
- color: #686868;
|
|
|
- }
|
|
|
- .more-text {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- color: #686868;
|
|
|
- font-size: 14px;
|
|
|
- line-height: normal;
|
|
|
- }
|
|
|
-}
|
|
|
-.article-content-container {
|
|
|
- padding: 33px 40px;
|
|
|
- background-color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.watch-tab-header {
|
|
|
- margin-top: 16px;
|
|
|
-}
|
|
|
-.content-tabs-fixed {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- height: 45px;
|
|
|
- background-color: #fff;
|
|
|
- color: #1d1d1d;
|
|
|
- font-size: 16px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- line-height: normal;
|
|
|
-
|
|
|
- &.is-fixed-top {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- z-index: 9;
|
|
|
- }
|
|
|
-
|
|
|
- .content-tab-label {
|
|
|
- flex: 1;
|
|
|
- max-width: 200px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-top: 3px solid transparent;
|
|
|
- border-bottom: 1px solid #ebebeb;
|
|
|
- cursor: pointer;
|
|
|
- &.is-active {
|
|
|
- color: #2cb7ca;
|
|
|
- border-bottom: none;
|
|
|
- border-top: 3px solid #2cb7ca;
|
|
|
- border-right: 1px solid #ebebeb;
|
|
|
- border-left: 1px solid #ebebeb;
|
|
|
- border-bottom: 1px solid transparent;
|
|
|
- &:first-child {
|
|
|
- border-left-color: transparent;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- border-right-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.content-header-tip {
|
|
|
- margin-top: 16px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- border-radius: 4px;
|
|
|
- background: rgba(42, 190, 209, 0.1);
|
|
|
- padding: 9px 40px;
|
|
|
- color: #2abed1;
|
|
|
- font-size: 14px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 22px;
|
|
|
- .action-button {
|
|
|
- padding: 3px 20px;
|
|
|
- color: #2abed1;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 22px;
|
|
|
- border: 1px solid #2abed1;
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
-}
|
|
|
+@import '~@/assets/style/page/article.scss';
|
|
|
</style>
|
