|
@@ -2,7 +2,7 @@
|
|
|
<div class="detail-container">
|
|
<div class="detail-container">
|
|
|
<!-- 返回按钮 -->
|
|
<!-- 返回按钮 -->
|
|
|
<div v-if="isFrom !== 'weixin'" class="back-button" @click="goBack">
|
|
<div v-if="isFrom !== 'weixin'" class="back-button" @click="goBack">
|
|
|
- <img src="@/assets/indexPage/icon_back.png" alt="">
|
|
|
|
|
|
|
+ <img src="@/assets/indexPage/icon_back.png" alt="" />
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 加载状态 -->
|
|
<!-- 加载状态 -->
|
|
@@ -13,12 +13,24 @@
|
|
|
<!-- 详情内容 -->
|
|
<!-- 详情内容 -->
|
|
|
<div v-else-if="detailData" :class="['detail-content', isFrom == 'weixin' ? 'notMargin' : '']">
|
|
<div v-else-if="detailData" :class="['detail-content', isFrom == 'weixin' ? 'notMargin' : '']">
|
|
|
<!--标题 -->
|
|
<!--标题 -->
|
|
|
- <div class=" detail-title">{{ (isPreviewMode && detailData.titleB) ? detailData.titleB : (detailData.title ||
|
|
|
|
|
- '克拉玛依市博物馆') }}</div>
|
|
|
|
|
|
|
+ <div class="detail-title">
|
|
|
|
|
+ {{
|
|
|
|
|
+ isPreviewMode && detailData.titleB
|
|
|
|
|
+ ? detailData.titleB
|
|
|
|
|
+ : detailData.title || '克拉玛依市博物馆'
|
|
|
|
|
+ }}
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
<!-- 时间 -->
|
|
<!-- 时间 -->
|
|
|
- <div class="detail-time" v-if="fromtype != 'museum' && (detailData.publish || detailData.publishB)">
|
|
|
|
|
- {{ formatTimeWithDash(isPreviewMode ? (detailData.publishB || detailData.publish) : detailData.publish) }}
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="detail-time"
|
|
|
|
|
+ v-if="fromtype != 'museum' && (detailData.publish || detailData.publishB)"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{
|
|
|
|
|
+ formatTimeWithDash(
|
|
|
|
|
+ isPreviewMode ? detailData.publishB || detailData.publish : detailData.publish,
|
|
|
|
|
+ )
|
|
|
|
|
+ }}
|
|
|
</div>
|
|
</div>
|
|
|
<div v-else class="line"></div>
|
|
<div v-else class="line"></div>
|
|
|
<!-- 主图 -->
|
|
<!-- 主图 -->
|
|
@@ -27,22 +39,31 @@
|
|
|
</div> -->
|
|
</div> -->
|
|
|
|
|
|
|
|
<!-- 处理后的内容 -->
|
|
<!-- 处理后的内容 -->
|
|
|
- <div class="detail-text" v-if="isPreviewMode ? (detailData.contextB || detailData.context) : detailData.context">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="detail-text"
|
|
|
|
|
+ v-if="isPreviewMode ? detailData.contextB || detailData.context : detailData.context"
|
|
|
|
|
+ >
|
|
|
<div v-html="processedContent" class="processed-html-content"></div>
|
|
<div v-html="processedContent" class="processed-html-content"></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 展览特有按钮 -->
|
|
<!-- 展览特有按钮 -->
|
|
|
- <div class="exhibition-actions"
|
|
|
|
|
- v-if="fromtype === 'exhibition' && ((isPreviewMode && detailData.webSiteB) || detailData.webSite)">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="exhibition-actions"
|
|
|
|
|
+ v-if="
|
|
|
|
|
+ fromtype === 'exhibition' &&
|
|
|
|
|
+ ((isPreviewMode && detailData.webSiteB) || detailData.webSite)
|
|
|
|
|
+ "
|
|
|
|
|
+ >
|
|
|
<div class="online-exhibition-btn" @click="goToOnlineExhibition(detailData)">
|
|
<div class="online-exhibition-btn" @click="goToOnlineExhibition(detailData)">
|
|
|
- <img src="@/assets/exhibition/online-kz.png" alt="线上观展" class="btn-icon">
|
|
|
|
|
|
|
+ <img src="@/assets/exhibition/online-kz.png" alt="线上观展" class="btn-icon" />
|
|
|
线上观展
|
|
线上观展
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div v-if="detailData.personCount > 0 && fromtype == 'activity'" class="active-preview-btn">
|
|
|
|
|
- <a class="preview-btn">
|
|
|
|
|
- 活动预约
|
|
|
|
|
- </a>
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-if="detailData.personCount > 0 && fromtype == 'activity' && isFrom != 'weixin'"
|
|
|
|
|
+ class="active-preview-btn"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a class="preview-btn"> 活动预约 </a>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -186,7 +207,7 @@ onMounted(() => {
|
|
|
.detail-container {
|
|
.detail-container {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
height: 100vh;
|
|
height: 100vh;
|
|
|
- padding: 20px 20px 40px 20px;
|
|
|
|
|
|
|
+ padding: 20px 20px 120px 20px; /* 增加底部padding,为按钮留出空间 */
|
|
|
background: url('@/assets/indexPage/bg.png') no-repeat;
|
|
background: url('@/assets/indexPage/bg.png') no-repeat;
|
|
|
background-size: cover;
|
|
background-size: cover;
|
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
@@ -313,19 +334,26 @@ onMounted(() => {
|
|
|
|
|
|
|
|
/* 展览特有按钮样式 */
|
|
/* 展览特有按钮样式 */
|
|
|
.exhibition-actions {
|
|
.exhibition-actions {
|
|
|
- margin-top: 30px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ bottom: 40px;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ z-index: 100;
|
|
|
|
|
|
|
|
.online-exhibition-btn {
|
|
.online-exhibition-btn {
|
|
|
width: 280px;
|
|
width: 280px;
|
|
|
|
|
+ height: 60px;
|
|
|
display: inline-flex;
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
padding: 12px 40px;
|
|
padding: 12px 40px;
|
|
|
- background: linear-gradient(135deg, #B8956A 0%, #A0845A 100%);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, #b8956a 0%, #a0845a 100%);
|
|
|
color: white;
|
|
color: white;
|
|
|
border: none;
|
|
border: none;
|
|
|
- border-radius: 25px;
|
|
|
|
|
|
|
+ border-radius: 50px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
@@ -338,46 +366,58 @@ onMounted(() => {
|
|
|
margin-right: 8px;
|
|
margin-right: 8px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- &:hover {
|
|
|
|
|
- background: linear-gradient(135deg, #A0845A 0%, #8B7249 100%);
|
|
|
|
|
- transform: translateY(-2px);
|
|
|
|
|
- box-shadow: 0 6px 16px rgba(184, 149, 106, 0.4);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // &:hover {
|
|
|
|
|
+ // background: linear-gradient(135deg, #a0845a 0%, #8b7249 100%);
|
|
|
|
|
+ // transform: translateY(-2px);
|
|
|
|
|
+ // box-shadow: 0 6px 16px rgba(184, 149, 106, 0.4);
|
|
|
|
|
+ // }
|
|
|
|
|
|
|
|
- &:active {
|
|
|
|
|
- transform: translateY(0);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // &:active {
|
|
|
|
|
+ // transform: translateY(0);
|
|
|
|
|
+ // }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.active-preview-btn {
|
|
.active-preview-btn {
|
|
|
- height: 60px;
|
|
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
- bottom: 14px;
|
|
|
|
|
|
|
+ bottom: 40px;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- margin-top: 30px;
|
|
|
|
|
|
|
+ z-index: 100;
|
|
|
|
|
|
|
|
.preview-btn {
|
|
.preview-btn {
|
|
|
- display: inline-block;
|
|
|
|
|
- width: 320px;
|
|
|
|
|
- height: 60px;
|
|
|
|
|
- background: #B1967B;
|
|
|
|
|
- width: 280px;
|
|
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
|
+ width: 280px;
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ background: linear-gradient(135deg, #b1967b 0%, #9a7f69 100%);
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
- border-radius: 50px;
|
|
|
|
|
|
|
+ border-radius: 25px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
+ box-shadow: 0 4px 12px rgba(177, 150, 123, 0.3);
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+
|
|
|
|
|
+ // &:hover {
|
|
|
|
|
+ // background: linear-gradient(135deg, #9a7f69 0%, #836c59 100%);
|
|
|
|
|
+ // transform: translateY(-2px);
|
|
|
|
|
+ // box-shadow: 0 6px 16px rgba(177, 150, 123, 0.4);
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ // &:active {
|
|
|
|
|
+ // transform: translateY(0);
|
|
|
|
|
+ // }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 处理后的HTML内容样式 */
|
|
/* 处理后的HTML内容样式 */
|
|
|
.processed-html-content {
|
|
.processed-html-content {
|
|
|
-
|
|
|
|
|
/* 缩进段落样式 */
|
|
/* 缩进段落样式 */
|
|
|
:deep(.indent) {
|
|
:deep(.indent) {
|
|
|
text-indent: 2em;
|
|
text-indent: 2em;
|
|
@@ -469,4 +509,4 @@ onMounted(() => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
|
+</style>
|