317 lines
7.8 KiB
Vue
317 lines
7.8 KiB
Vue
<script lang="ts" setup>
|
|
import {computed} from "vue";
|
|
import {useImageStyles} from '~/composables/useImageStyles';
|
|
|
|
// 组件属性
|
|
interface Props {
|
|
articleData: {
|
|
title: string
|
|
publishDate: string
|
|
category: string
|
|
content: string
|
|
prevArticle: {
|
|
title: string
|
|
url: string
|
|
}
|
|
nextArticle: {
|
|
title: string
|
|
url: string
|
|
}
|
|
}
|
|
loading: boolean
|
|
error: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
articleData: () => ({
|
|
title: '',
|
|
publishDate: '',
|
|
category: '',
|
|
content: '',
|
|
prevArticle: {
|
|
title: '',
|
|
url: '#'
|
|
},
|
|
nextArticle: {
|
|
title: '',
|
|
url: '#'
|
|
}
|
|
}),
|
|
loading: true,
|
|
error: ''
|
|
})
|
|
|
|
// 使用传入的数据
|
|
const articleData = computed(() => props.articleData)
|
|
const loading = computed(() => props.loading)
|
|
const error = computed(() => props.error)
|
|
|
|
// 热门标签
|
|
const hotTags = ref([
|
|
'景区单车', '政务平台', '共享经济', '共享汽车APP开发', '共享类',
|
|
'共享汽车软件开发', '共享雨伞APP开发', '共享雨伞软件开发', '共享货车开发'
|
|
])
|
|
|
|
// 重新加载页面方法
|
|
const reloadPage = () => {
|
|
if (typeof window !== 'undefined') {
|
|
window.location.reload()
|
|
}
|
|
}
|
|
|
|
// 使用图片样式处理 composable
|
|
const {initImageStyles} = useImageStyles(
|
|
() => props.articleData?.content || '',
|
|
'.article-content',
|
|
{
|
|
maxWidth: '100%',
|
|
margin: '15px 0',
|
|
display: 'block',
|
|
boxSizing: 'border-box'
|
|
}
|
|
)
|
|
|
|
// 使用 Nuxt 的 useHead 来管理页面资源
|
|
useHead({
|
|
title: computed(() => articleData.value?.title ? `${articleData.value.title} - 创特科技` : '文章详情 - 创特科技'),
|
|
meta: [
|
|
{
|
|
name: 'description',
|
|
content: computed(() => articleData.value?.content ? articleData.value.content.substring(0, 160) + '...' : '创特科技专业文章')
|
|
},
|
|
{name: 'keywords', content: '创特科技,技术文章,共享单车,软件开发,解决方案'}
|
|
],
|
|
link: [
|
|
{rel: 'stylesheet', href: '/news/bootstrap.min.css'},
|
|
|
|
{rel: 'stylesheet', href: '/news/main22.css'},
|
|
|
|
{rel: 'stylesheet', href: '/news/new_index.css'},
|
|
{rel: 'stylesheet', href: '/news/float.css'},
|
|
{rel: 'stylesheet', href: '/news/animate.min.css'},
|
|
{rel: 'stylesheet', href: '/css/main2.css'},
|
|
],
|
|
script: [
|
|
|
|
{src: '/news/float.js', defer: true}
|
|
]
|
|
})
|
|
|
|
onMounted(() => {
|
|
// 初始化图片样式处理
|
|
initImageStyles()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view>
|
|
<!-- 顶部 -->
|
|
|
|
<!-- 文章正文 -->
|
|
<section class="container" style="margin-top: 88px;">
|
|
<div class="row">
|
|
<!-- 左边部分 -->
|
|
<div class="col-md-8 wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
|
|
<!-- 加载状态 -->
|
|
<div v-if="loading" class="loading-container" style="text-align: center; padding: 50px;">
|
|
<div
|
|
class="loading-spinner"
|
|
style="border: 4px solid #f3f3f3; border-top: 4px solid #ff8200; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"/>
|
|
<p style="margin-top: 20px; color: #666;">正在加载文章...</p>
|
|
</div>
|
|
|
|
<!-- 错误提示 -->
|
|
<div v-else-if="error" class="error-container" style="text-align: center; padding: 50px; color: #ff6b6b;">
|
|
<p>{{ error }}</p>
|
|
<button
|
|
style="margin-top: 20px; padding: 10px 20px; background: #ff8200; color: white; border: none; border-radius: 4px; cursor: pointer;"
|
|
@click="reloadPage">
|
|
重新加载
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 文章内容 -->
|
|
<div v-else class="row">
|
|
<div class="col-xs-12">
|
|
<h2>{{ articleData?.title || '暂无标题' }}</h2>
|
|
<p id="label" style="border-bottom: 1px solid #ddd; margin-top: 20px;">
|
|
<span>{{ articleData?.publishDate || '暂无日期' }}</span>
|
|
<span class="pull-right">分类：{{ articleData?.category || '暂无分类' }}</span>
|
|
</p>
|
|
<div class="article-content" v-html="articleData?.content || '暂无内容'"/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 上一篇/下一篇 -->
|
|
<div class="nextorpre" style="margin-top: 38px; border-top: 1px solid #ddd; padding-top: 8px;">
|
|
<li class="pull-left">上一篇：
|
|
<a :href="articleData?.prevArticle?.url || '#'">{{ articleData?.prevArticle?.title || '暂无上一篇' }}</a>
|
|
</li>
|
|
<li class="pull-right">下一篇：
|
|
<a :href="articleData?.nextArticle?.url || '#'">{{ articleData?.nextArticle?.title || '暂无下一篇' }}</a>
|
|
</li>
|
|
</div>
|
|
<br><br><br><br>
|
|
</div><!--左边部分-->
|
|
|
|
<!-- 右边部分 -->
|
|
<aside class="col-md-4" style="border-left: 1px solid #eee; background: #fefefe;">
|
|
<!-- 热门标签 -->
|
|
<div
|
|
class="widget tags wow fadeInRight animated"
|
|
style="margin-bottom: 30px !important; visibility: visible; animation-name: fadeInRight;">
|
|
<h4>热门标签</h4>
|
|
<ul class="tag-cloud">
|
|
<li v-for="tag in hotTags" :key="tag">
|
|
<a class="btn btn-xs" href="#" @click.prevent>{{ tag }}</a>
|
|
</li>
|
|
</ul>
|
|
</div><!-- 热门标签 -->
|
|
|
|
<!-- 推荐文章 -->
|
|
<div
|
|
class="sy_news animated" data-wow-delay="200ms"
|
|
style="visibility: visible; animation-delay: 200ms; animation-name: fadeInDown;">
|
|
<RecommendedArticles
|
|
:articles-per-type="3"
|
|
:show-title="false"
|
|
:show-types="['solution', 'developKnowledge', 'industryTrend']"
|
|
/>
|
|
</div>
|
|
</aside><!-- 右边部分 -->
|
|
|
|
</div><!--/.row-->
|
|
</section><!--/#blog-->
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 文章内容样式 */
|
|
.article-content {
|
|
margin-top: 20px;
|
|
line-height: 1.8;
|
|
font-size: 14px;
|
|
color: #333;
|
|
overflow: hidden; /* 防止内容溢出 */
|
|
word-wrap: break-word; /* 长单词换行 */
|
|
}
|
|
|
|
.article-content p {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 1024px) {
|
|
.col-md-8, .col-md-4 {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 标签云样式 */
|
|
.tag-cloud li {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
}
|
|
|
|
.tag-cloud a {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
background-color: #f5f5f5;
|
|
color: #666;
|
|
text-decoration: none;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tag-cloud a:hover {
|
|
background-color: #ff8200;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 推荐文章样式 */
|
|
.sy_news ul li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.sy_news ul li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.sy_news ul li a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
display: block;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.sy_news ul li a:hover {
|
|
color: #ff8200;
|
|
}
|
|
|
|
.sy_news ul li a span {
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* 上一篇下一篇样式 */
|
|
.nextorpre {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nextorpre li {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.nextorpre a {
|
|
color: #ff8200;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nextorpre a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 加载动画 */
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* 加载状态样式 */
|
|
.loading-container {
|
|
min-height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 错误状态样式 */
|
|
.error-container {
|
|
min-height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
</style>
|
|
|