static news detail
This commit is contained in:
WindowBird
parent
c1296a21b4
commit
3a23aa3d9d
|
|
@ -46,11 +46,6 @@ const articleData = computed(() => props.articleData)
|
|||
const loading = computed(() => props.loading)
|
||||
const error = computed(() => props.error)
|
||||
|
||||
// 热门标签
|
||||
const hotTags = ref([
|
||||
'景区单车', '政务平台', '共享经济', '共享汽车APP开发', '共享类',
|
||||
'共享汽车软件开发', '共享雨伞APP开发', '共享雨伞软件开发', '共享货车开发'
|
||||
])
|
||||
|
||||
// 重新加载页面方法
|
||||
const reloadPage = () => {
|
||||
|
|
@ -65,37 +60,12 @@ const {initImageStyles} = useImageStyles(
|
|||
'.article-content',
|
||||
{
|
||||
maxWidth: '100%',
|
||||
margin: '15px 0',
|
||||
margin: '15px 5px',
|
||||
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(() => {
|
||||
// 初始化图片样式处理
|
||||
|
|
@ -105,82 +75,42 @@ onMounted(() => {
|
|||
|
||||
<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>
|
||||
<section class="container mx-auto mt-20 px-4">
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<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 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 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><!--左边部分-->
|
||||
<!-- 错误提示 -->
|
||||
<div v-else-if="error" class="error-container" style="text-align: center; padding: 50px; color: #ff6b6b;">
|
||||
<p>{{ error }}</p>
|
||||
<button
|
||||
class="bg-primary mt-5 px-5 py-2.5 "
|
||||
style=" color: white; border: none; border-radius: 4px; cursor: pointer;"
|
||||
@click="reloadPage">
|
||||
重新加载
|
||||
</button>
|
||||
</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 v-else class="row">
|
||||
<div class="flex flex-col items-center">
|
||||
<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 w-full" v-html="articleData?.content || '暂无内容'"/>
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -201,17 +131,6 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1024px) {
|
||||
.col-md-8, .col-md-4 {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 标签云样式 */
|
||||
.tag-cloud li {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {nextTick, watch, watchEffect, onMounted, type Ref} from 'vue'
|
||||
import {nextTick, onMounted, type Ref, watch, watchEffect} from 'vue'
|
||||
|
||||
/**
|
||||
* 图片样式处理 Composable
|
||||
|
|
@ -17,7 +17,7 @@ export const useImageStyles = (
|
|||
// 默认配置
|
||||
const defaultOptions = {
|
||||
maxWidth: 'calc(100% - 0px)',
|
||||
margin: '15px 0',
|
||||
margin: '15px auto',
|
||||
display: 'block',
|
||||
boxSizing: 'border-box',
|
||||
...options
|
||||
|
|
@ -36,7 +36,7 @@ export const useImageStyles = (
|
|||
img.style.height = 'auto'
|
||||
img.style.width = 'auto'
|
||||
img.style.display = defaultOptions.display
|
||||
img.style.margin = defaultOptions.margin
|
||||
img.style.margin = 'auto'
|
||||
img.style.boxSizing = defaultOptions.boxSizing
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ const cards = [
|
|||
icon: "i-heroicons-academic-cap",
|
||||
image: "/img/news/n1.png",
|
||||
alt: "AI智慧养蜂系统",
|
||||
to: '5',
|
||||
date: "2025.03.07"
|
||||
},
|
||||
{
|
||||
|
|
@ -14,6 +15,7 @@ const cards = [
|
|||
icon: "i-heroicons-beaker",
|
||||
image: "/img/news/n2.png",
|
||||
alt: "智能蜂箱展示",
|
||||
to: '6',
|
||||
date: "2024.09.26"
|
||||
},
|
||||
{
|
||||
|
|
@ -57,6 +59,7 @@ const page = ref(1)
|
|||
:key="index"
|
||||
:description="card.description"
|
||||
:title="card.title"
|
||||
:to="`/news/${card.to}`"
|
||||
:ui="{
|
||||
root:'group',
|
||||
container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user