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 loading = computed(() => props.loading)
|
||||||
const error = computed(() => props.error)
|
const error = computed(() => props.error)
|
||||||
|
|
||||||
// 热门标签
|
|
||||||
const hotTags = ref([
|
|
||||||
'景区单车', '政务平台', '共享经济', '共享汽车APP开发', '共享类',
|
|
||||||
'共享汽车软件开发', '共享雨伞APP开发', '共享雨伞软件开发', '共享货车开发'
|
|
||||||
])
|
|
||||||
|
|
||||||
// 重新加载页面方法
|
// 重新加载页面方法
|
||||||
const reloadPage = () => {
|
const reloadPage = () => {
|
||||||
|
|
@ -65,37 +60,12 @@ const {initImageStyles} = useImageStyles(
|
||||||
'.article-content',
|
'.article-content',
|
||||||
{
|
{
|
||||||
maxWidth: '100%',
|
maxWidth: '100%',
|
||||||
margin: '15px 0',
|
margin: '15px 5px',
|
||||||
display: 'block',
|
display: 'block',
|
||||||
boxSizing: 'border-box'
|
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(() => {
|
onMounted(() => {
|
||||||
// 初始化图片样式处理
|
// 初始化图片样式处理
|
||||||
|
|
@ -105,82 +75,42 @@ onMounted(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<!-- 顶部 -->
|
|
||||||
|
|
||||||
<!-- 文章正文 -->
|
<section class="container mx-auto mt-20 px-4">
|
||||||
<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 v-if="loading" class="loading-container" style="text-align: center; padding: 50px;">
|
||||||
<div class="col-xs-12">
|
<div
|
||||||
<h2>{{ articleData?.title || '暂无标题' }}</h2>
|
class="loading-spinner"
|
||||||
<p id="label" style="border-bottom: 1px solid #ddd; margin-top: 20px;">
|
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;"/>
|
||||||
<span>{{ articleData?.publishDate || '暂无日期' }}</span>
|
<p style="margin-top: 20px; color: #666;">正在加载文章...</p>
|
||||||
<span class="pull-right">分类：{{ articleData?.category || '暂无分类' }}</span>
|
</div>
|
||||||
</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;">
|
<div v-else-if="error" class="error-container" style="text-align: center; padding: 50px; color: #ff6b6b;">
|
||||||
<li class="pull-left">上一篇：
|
<p>{{ error }}</p>
|
||||||
<a :href="articleData?.prevArticle?.url || '#'">{{ articleData?.prevArticle?.title || '暂无上一篇' }}</a>
|
<button
|
||||||
</li>
|
class="bg-primary mt-5 px-5 py-2.5 "
|
||||||
<li class="pull-right">下一篇：
|
style=" color: white; border: none; border-radius: 4px; cursor: pointer;"
|
||||||
<a :href="articleData?.nextArticle?.url || '#'">{{ articleData?.nextArticle?.title || '暂无下一篇' }}</a>
|
@click="reloadPage">
|
||||||
</li>
|
重新加载
|
||||||
</div>
|
</button>
|
||||||
<br><br><br><br>
|
</div>
|
||||||
</div><!--左边部分-->
|
|
||||||
|
|
||||||
<!-- 右边部分 -->
|
<!-- 文章内容 -->
|
||||||
<aside class="col-md-4" style="border-left: 1px solid #eee; background: #fefefe;">
|
<div v-else class="row">
|
||||||
<!-- 热门标签 -->
|
<div class="flex flex-col items-center">
|
||||||
<div
|
<h2>{{ articleData?.title || '暂无标题' }}</h2>
|
||||||
class="widget tags wow fadeInRight animated"
|
<p id="label" style="border-bottom: 1px solid #ddd; margin-top: 20px;">
|
||||||
style="margin-bottom: 30px !important; visibility: visible; animation-name: fadeInRight;">
|
<span>{{ articleData?.publishDate || '暂无日期' }}</span>
|
||||||
<h4>热门标签</h4>
|
<span class="pull-right"> 分类：{{ articleData?.category || '暂无分类' }}</span>
|
||||||
<ul class="tag-cloud">
|
</p>
|
||||||
<li v-for="tag in hotTags" :key="tag">
|
<div class="article-content w-full" v-html="articleData?.content || '暂无内容'"/>
|
||||||
<a class="btn btn-xs" href="#" @click.prevent>{{ tag }}</a>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</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-->
|
</section><!--/#blog-->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -201,17 +131,6 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 响应式调整 */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.col-md-8, .col-md-4 {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 标签云样式 */
|
/* 标签云样式 */
|
||||||
.tag-cloud li {
|
.tag-cloud li {
|
||||||
display: inline-block;
|
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
|
* 图片样式处理 Composable
|
||||||
|
|
@ -17,7 +17,7 @@ export const useImageStyles = (
|
||||||
// 默认配置
|
// 默认配置
|
||||||
const defaultOptions = {
|
const defaultOptions = {
|
||||||
maxWidth: 'calc(100% - 0px)',
|
maxWidth: 'calc(100% - 0px)',
|
||||||
margin: '15px 0',
|
margin: '15px auto',
|
||||||
display: 'block',
|
display: 'block',
|
||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
...options
|
...options
|
||||||
|
|
@ -36,7 +36,7 @@ export const useImageStyles = (
|
||||||
img.style.height = 'auto'
|
img.style.height = 'auto'
|
||||||
img.style.width = 'auto'
|
img.style.width = 'auto'
|
||||||
img.style.display = defaultOptions.display
|
img.style.display = defaultOptions.display
|
||||||
img.style.margin = defaultOptions.margin
|
img.style.margin = 'auto'
|
||||||
img.style.boxSizing = defaultOptions.boxSizing
|
img.style.boxSizing = defaultOptions.boxSizing
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ const cards = [
|
||||||
icon: "i-heroicons-academic-cap",
|
icon: "i-heroicons-academic-cap",
|
||||||
image: "/img/news/n1.png",
|
image: "/img/news/n1.png",
|
||||||
alt: "AI智慧养蜂系统",
|
alt: "AI智慧养蜂系统",
|
||||||
|
to: '5',
|
||||||
date: "2025.03.07"
|
date: "2025.03.07"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -14,6 +15,7 @@ const cards = [
|
||||||
icon: "i-heroicons-beaker",
|
icon: "i-heroicons-beaker",
|
||||||
image: "/img/news/n2.png",
|
image: "/img/news/n2.png",
|
||||||
alt: "智能蜂箱展示",
|
alt: "智能蜂箱展示",
|
||||||
|
to: '6',
|
||||||
date: "2024.09.26"
|
date: "2024.09.26"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -57,6 +59,7 @@ const page = ref(1)
|
||||||
:key="index"
|
:key="index"
|
||||||
:description="card.description"
|
:description="card.description"
|
||||||
:title="card.title"
|
:title="card.title"
|
||||||
|
:to="`/news/${card.to}`"
|
||||||
:ui="{
|
:ui="{
|
||||||
root:'group',
|
root:'group',
|
||||||
container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
|
container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user