111 lines
2.7 KiB
Vue
111 lines
2.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="detail">
|
|||
|
|
<div class="banner"></div>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="breadcrumb">
|
|||
|
|
<a href="#">首页</a>
|
|||
|
|
<right-outlined class="iconarrow" />
|
|||
|
|
<a href="#">新闻中心</a>
|
|||
|
|
<right-outlined class="iconarrow" />
|
|||
|
|
<span>新闻详情</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="title">{{ newsDetail.title }}</div>
|
|||
|
|
<div class="time">
|
|||
|
|
<p>来源：泰山先锋</p>
|
|||
|
|
<p>2022年10月23日12:23</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="newImg">
|
|||
|
|
<img :src="newsDetail.image" alt="" />
|
|||
|
|
</div>
|
|||
|
|
<div class="nr">
|
|||
|
|
{{ newsDetail.desc }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, onMounted } from 'vue'
|
|||
|
|
import { useRoute } from 'vue-router'
|
|||
|
|
import { RightOutlined } from '@ant-design/icons-vue'
|
|||
|
|
const route = useRoute()
|
|||
|
|
const newsDetail = ref(
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
|
|||
|
|
time: '2021-11-15',
|
|||
|
|
desc: '在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管...在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管......',
|
|||
|
|
image: '../../../src/assets/images/new1.png'
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
// 需要添加根据路由参数获取数据的逻辑
|
|||
|
|
onMounted(() => {
|
|||
|
|
const newsId = route.params.id
|
|||
|
|
if (newsId) {
|
|||
|
|
// 这里应该调用 API 获取对应的新闻详情
|
|||
|
|
fetchNewsDetail(newsId)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const fetchNewsDetail = (id: any) => {
|
|||
|
|
// 模拟 API 调用
|
|||
|
|
// 实际应该调用后端接口获取数据
|
|||
|
|
console.log('获取新闻详情，ID:', id)
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.detail {
|
|||
|
|
|
|||
|
|
.banner {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 450px;
|
|||
|
|
background: url('./../../../assets/images/newbanner.png')center center no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
padding: 27px 0 60px;
|
|||
|
|
margin: auto;
|
|||
|
|
|
|||
|
|
// 标题部分，面包屑
|
|||
|
|
.breadcrumb {
|
|||
|
|
border-bottom: 1px solid #e5e5e5;
|
|||
|
|
padding-bottom: 14px;
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconarrow {
|
|||
|
|
padding: 0 3px;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 31px 0 67px;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 36px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: rgba(26, 25, 25, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newImg {
|
|||
|
|
width: 676px;
|
|||
|
|
height: 330px;
|
|||
|
|
|
|||
|
|
img {}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|