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.
115 lines
3.8 KiB
115 lines
3.8 KiB
<template>
|
|
<div class="cjy-pages">
|
|
<!-- 页面 头部 -->
|
|
<VHeader></VHeader>
|
|
<!-- 页面 广告条 -->
|
|
<div class="cjy-banner m-t-100">
|
|
<div class="cjy-banner-text">
|
|
<div class="title">{{ banner_data.title }}</div>
|
|
<div class="subtitle">{{ banner_data.subtitle }}</div>
|
|
</div>
|
|
<img :src="banner_data.logo" class="img"/>
|
|
</div>
|
|
<!-- 页面 面包屑 -->
|
|
<div class="v-container">
|
|
<el-breadcrumb class="m-t-normal" separator-class="el-icon-arrow-right">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<!-- 新闻 详情 -->
|
|
<div class="v-container">
|
|
<div class="cjy-news-detail row">
|
|
<div class="detail-left col">
|
|
<div class="detail-title">{{ news_data.title }}</div>
|
|
<div class="detail-date">{{ news_data.date }}</div>
|
|
<div class="detail-subTitle">公司动态</div>
|
|
<div class="detail-content" v-html="news_data.content"></div>
|
|
</div>
|
|
<div class="detail-right">
|
|
<div class="list-title">相关推荐</div>
|
|
<div class="list-item" v-for="(item,index) in news_list" :key="index" @click="getNewsList(item.id)">
|
|
<div class="item-box row">
|
|
<div class="item-image"><img :src="item.image" class="img"></div>
|
|
<div class="item-content">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="date">{{ parseTime(item.time, '{y}-{m}-{d}') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 页面 底部 -->
|
|
<VBottom></VBottom>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as Api from "@/api/cjy/columninfo"
|
|
|
|
export default {
|
|
name: "news-detail",
|
|
data() {
|
|
return {
|
|
banner_data: null,//广告图
|
|
news_id:null,
|
|
news_data: {},
|
|
// 新闻推荐数据
|
|
news_list: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.news_id = this.$route.query.id;
|
|
// 获取 轮播图
|
|
this.getBanner()
|
|
// 获取 新闻详情
|
|
this.getNewsData()
|
|
// 获取 新闻推荐
|
|
this.getNewsList()
|
|
},
|
|
methods: {
|
|
// 轮播图 函数
|
|
async getBanner() {
|
|
let res = await Api.getColumnInfoList({type: 14});
|
|
this.banner_data = res.data.list[0]
|
|
},
|
|
// 新闻详情 函数
|
|
async getNewsData() {
|
|
let res = await Api.getDetail(this.news_id)
|
|
this.news_data = res.data
|
|
},
|
|
// 新闻推荐 函数
|
|
getNewsList() {
|
|
this.news_list = [{
|
|
image: 'https://www.lutongwulian.com/uploads/250110/4-2501100932105Q-lp.jpg',
|
|
title: "智慧旅游如何实现跨区域资源整合与营销策略创新",
|
|
time: "1736759815"
|
|
}, {
|
|
image: 'https://www.lutongwulian.com/uploads/250109/4-250109130U0Q0-lp.jpg',
|
|
title: "智慧文旅AI大模型搜索的结果数据来自哪里？",
|
|
time: "1736759815"
|
|
}, {
|
|
image: 'https://www.lutongwulian.com/uploads/250106/4-2501060Z616350-lp.png',
|
|
title: "景区电子票务系统：“票务防黄牛”科技手段回应景区管理难点",
|
|
time: "1736759815"
|
|
},{
|
|
image: 'https://www.lutongwulian.com/uploads/250110/4-2501100932105Q-lp.jpg',
|
|
title: "智慧旅游如何实现跨区域资源整合与营销策略创新",
|
|
time: "1736759815"
|
|
}, {
|
|
image: 'https://www.lutongwulian.com/uploads/250109/4-250109130U0Q0-lp.jpg',
|
|
title: "智慧文旅AI大模型搜索的结果数据来自哪里？",
|
|
time: "1736759815"
|
|
}, {
|
|
image: 'https://www.lutongwulian.com/uploads/250106/4-2501060Z616350-lp.png',
|
|
title: "景区电子票务系统：“票务防黄牛”科技手段回应景区管理难点",
|
|
time: "1736759815"
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|