新版本官网优化完成
This commit is contained in:
@@ -6,50 +6,70 @@
|
||||
<template #content>
|
||||
<span class="font-600 mr-3"> 文章详情 </span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div class="flex items-center">
|
||||
<el-input v-model="where.keywords" :placeholder="`${$t('searchKeywords')}...`" :suffix-icon="Search" @change="reload"/>
|
||||
</div>
|
||||
</template>
|
||||
<el-card shadow="hover" class=" my-5">
|
||||
|
||||
<el-card shadow="hover" class=" my-5 px-2">
|
||||
|
||||
<!-- 新闻详细 -->
|
||||
<div class="news_detail bg-white">
|
||||
<h1 class="pt-5 text-2xl">{{ form.title }}</h1>
|
||||
<div class="clearfix">
|
||||
<h3 class=" text-gray-400">
|
||||
{{ $t('createTime') }}：<span>{{ dayjs(form.createTime).format('YYYY-MM-DD') }}</span>
|
||||
{{ $t('author') }}：<span>{{ form.nickname }}</span>
|
||||
{{ $t('click') }}：<span>{{ getViews(form) }}</span>
|
||||
</h3>
|
||||
<div class="share">
|
||||
<!-- Baidu Button BEGIN -->
|
||||
<div class="bdsharebuttonbox">
|
||||
<a href="#" class="bds_more" data-cmd="more"></a>
|
||||
<a href="#" class="bds_qzone" data-cmd="qzone"></a>
|
||||
<a href="#" class="bds_tsina" data-cmd="tsina"></a>
|
||||
<a href="#" class="bds_tqq" data-cmd="tqq"></a>
|
||||
<a href="#" class="bds_renren" data-cmd="renren"></a>
|
||||
<a href="#" class="bds_weixin" data-cmd="weixin"></a>
|
||||
<div class=" bg-white">
|
||||
<h1 class="pt-5 text-3xl">{{ form.title }}</h1>
|
||||
<div class="flex items-center justify-between py-4">
|
||||
<el-space size="large" class="text-gray-400">
|
||||
<span>{{ $t('createTime') }}：{{ dayjs(form.createTime).format('YYYY-MM-DD') }}</span>
|
||||
<span>{{ $t('author') }}：{{ form.author }}</span>
|
||||
<span>{{ $t('click') }}：{{ getViews(form) }}</span>
|
||||
<span v-if="form.source">文章来源：{{ form.source }}</span>
|
||||
</el-space>
|
||||
<!-- Baidu Button BEGIN -->
|
||||
<el-space class="flex items-center">
|
||||
<!-- <a href="#" class="bds_more" data-cmd="more">朋友圈</a>-->
|
||||
<!-- <a href="#" class="bds_qzone" data-cmd="qzone">QQ空间</a>-->
|
||||
<!-- <a href="#" class="bds_tsina" data-cmd="tsina">新浪</a>-->
|
||||
<!-- <a href="#" class="bds_tqq" data-cmd="tqq">腾讯</a>-->
|
||||
<!-- <a href="#" class="bds_weixin" data-cmd="weixin">微信</a>-->
|
||||
</el-space>
|
||||
</div>
|
||||
<!-- 文章摘要 -->
|
||||
<div v-if="form.comments" class="screen-item bg-orange-50 text-gray-600 p-3 text-lg">
|
||||
{{ form.comments }}
|
||||
</div>
|
||||
<!-- 文章附件 -->
|
||||
<div class="screen-item" v-if="form.files">
|
||||
<div class="text-gray-400 py-3 text-sm">图片附件</div>
|
||||
<el-scrollbar>
|
||||
<div class="flex">
|
||||
<el-image
|
||||
v-for="(item,index) in JSON.parse(form.files)"
|
||||
:key="index"
|
||||
class="scrollbar-item w-[240px] max-h-[180px] mr-4 mb-4"
|
||||
:src="item"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
:preview-src-list="srcList"
|
||||
:initial-index="4"
|
||||
fit="contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<!-- 内容组件 -->
|
||||
<Content class="content" :data="form.content" />
|
||||
<Content class="content text-lg py-5" :data="form.content" />
|
||||
|
||||
<NextArticle :articleId="articleId" />
|
||||
<h3 class="tag">{{ $t('articleUrl') }}：{{ locationUrl() }} </h3>
|
||||
<Tags :data="form.tags" />
|
||||
<NextArticle :articleId="articleId" />
|
||||
</div>
|
||||
|
||||
<!-- 最近浏览 -->
|
||||
<CmsArticleRecently :data="form" type="article" />
|
||||
<!-- 相关产品和相关新闻 -->
|
||||
<div class="relate_list">
|
||||
<CmsProductRelated :data="form" />
|
||||
<CmsArticleRelated :data="form" />
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
|
||||
|
||||
<!-- 最近浏览 -->
|
||||
<CmsArticleRecently :data="form" type="article" />
|
||||
<!-- 相关产品和相关新闻 -->
|
||||
<div class="relate_list">
|
||||
<CmsProductRelated :data="form" />
|
||||
<CmsArticleRelated :data="form" />
|
||||
</div>
|
||||
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
@@ -61,9 +81,7 @@ import {getNavIdByParamsId, getViews, locationUrl, navTo, paramsId} from "~/util
|
||||
import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
|
||||
import useFormData from "~/utils/use-form-data";
|
||||
import dayjs from "dayjs";
|
||||
import Banner from "@/components/Banner.vue";
|
||||
import type {Layout} from "~/api/layout/model";
|
||||
import Left from "~/components/Left.vue";
|
||||
import {
|
||||
getCmsArticle
|
||||
} from "~/api/cms/cmsArticle";
|
||||
@@ -71,8 +89,6 @@ import {listCmsNavigation} from "~/api/cms/cmsNavigation";
|
||||
import CmsArticleRecently from "~/components/CmsRecently.vue";
|
||||
import Tags from "~/components/Tags.vue";
|
||||
import Content from "~/components/Content.vue";
|
||||
import CmsArticleList from "~/components/CmsArticleList.vue";
|
||||
import PageBanner from "~/pages/item/components/PageBanner.vue";
|
||||
|
||||
// 引入状态管理
|
||||
const route = useRoute();
|
||||
@@ -83,6 +99,7 @@ const i18n = useI18n();
|
||||
const breadcrumb = ref<BreadcrumbItem>();
|
||||
const showPassword = ref<boolean>();
|
||||
const category = ref<CmsNavigation[]>([]);
|
||||
const srcList = ref<any[]>([]);
|
||||
|
||||
// 配置信息
|
||||
const {form, assignFields} = useFormData<CmsArticle>({
|
||||
@@ -182,6 +199,13 @@ const reload = async () => {
|
||||
await getCmsArticle(articleId.value).then(data => {
|
||||
assignFields(data)
|
||||
layout.value.banner = data?.banner;
|
||||
// 应用截图
|
||||
if(data.files){
|
||||
const imgArr = JSON.parse(data.files);
|
||||
imgArr.map((item: any) => {
|
||||
srcList.value.push(item)
|
||||
})
|
||||
}
|
||||
// 二级栏目分类
|
||||
if (data.parentId) {
|
||||
listCmsNavigation({parentId: data.parentId}).then(list => {
|
||||
@@ -223,4 +247,14 @@ watch(
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.scrollbar-flex-content {
|
||||
display: flex;
|
||||
}
|
||||
.scrollbar-item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user