You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.6 KiB
150 lines
3.6 KiB
<template>
|
|
<div class="news-list-bg">
|
|
<div class="news-list" :style="screenWidth > 980 ? 'width: 1180px' : ''">
|
|
<div class="breadcrumb">
|
|
<a-breadcrumb>
|
|
<a-breadcrumb-item>
|
|
<a @click="openUrl(`/`)"><HomeOutlined /> Home</a>
|
|
</a-breadcrumb-item>
|
|
<a-breadcrumb-item>
|
|
<a :href="`/article/${form.categoryId}`">{{ form.categoryName }}</a>
|
|
</a-breadcrumb-item>
|
|
<a-breadcrumb-item>
|
|
<span>{{ form.title }}</span>
|
|
</a-breadcrumb-item>
|
|
</a-breadcrumb>
|
|
</div>
|
|
<a-card :title="form.title">
|
|
<div v-html="form.content"></div>
|
|
</a-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {toDateString} from "ele-admin-pro";
|
|
import {ref, unref, watch} from "vue";
|
|
import {Article} from "@/api/cms/article/model";
|
|
import {pageArticle,getArticle} from "@/api/cms/article";
|
|
import {useThemeStore} from "@/store/modules/theme";
|
|
import {storeToRefs} from "pinia";
|
|
import {getAd} from "@/api/cms/ad";
|
|
import { RightOutlined } from '@ant-design/icons-vue';
|
|
import {useRouter} from "vue-router";
|
|
import useFormData from "@/utils/use-form-data";
|
|
import {getArticleCategory, listArticleCategory} from "@/api/cms/category";
|
|
import {ArticleCategory} from "@/api/cms/category/model";
|
|
import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue';
|
|
import {openUrl} from "@/utils/common";
|
|
|
|
const { currentRoute } = useRouter();
|
|
const themeStore = useThemeStore();
|
|
const { screenWidth, styleResponsive } = storeToRefs(themeStore);
|
|
const list = ref<Article[]>([]);
|
|
const activeKey = ref('1');
|
|
const newsBg3 = ref('');
|
|
const articleId = ref<number>(0);
|
|
const currentPage = ref(1);
|
|
const total = ref();
|
|
|
|
// 表单数据
|
|
const { form,assignFields } = useFormData<Article>({
|
|
categoryId: undefined,
|
|
categoryName: '',
|
|
title: '',
|
|
image: '',
|
|
content: '',
|
|
parentId: undefined,
|
|
parentName: '',
|
|
source: '',
|
|
virtualViews: undefined,
|
|
actualViews: undefined
|
|
});
|
|
|
|
// getAd(253).then(data => {
|
|
// const { images } = data;
|
|
// if(images){
|
|
// newsBg3.value = JSON.parse(images)[0].url;
|
|
// }
|
|
// })
|
|
|
|
const reload = () => {
|
|
// getArticleCategory(categoryId.value).then(data => {
|
|
// assignFields(data);
|
|
// })
|
|
getArticle(articleId.value).then(data => {
|
|
assignFields(data)
|
|
})
|
|
}
|
|
|
|
watch(
|
|
currentRoute,
|
|
(route) => {
|
|
const { params } = unref(route);
|
|
const { id } = params;
|
|
if (id) {
|
|
articleId.value = Number(id);
|
|
}
|
|
reload();
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.news-list-bg{
|
|
padding-bottom: 70px;
|
|
.news-list{
|
|
.breadcrumb{
|
|
padding-bottom: 20px;
|
|
padding-left: 5px;
|
|
}
|
|
margin: 0 auto;
|
|
padding: 20px 0;
|
|
.title{
|
|
margin-top: 10px;
|
|
padding-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
h4{
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
font-size: 26px;
|
|
}
|
|
.title-bar{
|
|
width: 6px;
|
|
height: 28px;
|
|
margin-right: 14px;
|
|
background: linear-gradient(to bottom, #b7a381, #e5cc8c);
|
|
}
|
|
}
|
|
.img-list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 30px;
|
|
}
|
|
}
|
|
.title-box{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
height: 120px;
|
|
.title-text {
|
|
font-weight: bold; font-size: 16px;
|
|
color: #333333;
|
|
}
|
|
.title-text:hover{
|
|
color: #ff0000;
|
|
}
|
|
.desc{
|
|
font-size: 14px;
|
|
}
|
|
.actions{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
.pagination{
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
</style>
|