feat 对接新闻接口
This commit is contained in:
parent
636d65166a
commit
c6c41b7809
@ -19,12 +19,13 @@
|
|||||||
.news-title:hover {
|
.news-title:hover {
|
||||||
color: #f08519;
|
color: #f08519;
|
||||||
}
|
}
|
||||||
.news-title-active{
|
|
||||||
|
.news-title-active {
|
||||||
color: #f08519;
|
color: #f08519;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-title-line {
|
.news-title-line {
|
||||||
width:1px;
|
width: 1px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
background-color: #999999;
|
background-color: #999999;
|
||||||
margin: 0 30px;
|
margin: 0 30px;
|
||||||
@ -33,71 +34,71 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 新闻内容盒子
|
// 新闻内容盒子
|
||||||
.news-container-box {
|
.news-contianer {
|
||||||
|
margin: 0px auto;
|
||||||
|
height: 300px;
|
||||||
|
width: 80%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 35px;
|
||||||
|
transition: .4s;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-contianer:hover {
|
||||||
|
box-shadow: 0 0 15px 1px #e5e4e4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-box {
|
||||||
|
height: 65%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.news-big-box {
|
.news-cover-box {
|
||||||
width: 105%;
|
overflow: hidden;
|
||||||
display: flex;
|
margin-right: 20px;
|
||||||
// justify-content: center;
|
height: 100%;
|
||||||
// flex-wrap: wrap;
|
width: 25%;
|
||||||
|
object-fit: cover;
|
||||||
|
|
||||||
|
img {
|
||||||
.news-box {
|
height: 100%;
|
||||||
padding: 20px;
|
width: 100%;
|
||||||
transition: 0.4s;
|
object-fit: cover;
|
||||||
|
|
||||||
.news-s-box {
|
|
||||||
height: 450px;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: 0.4s;
|
|
||||||
padding: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.jump {
|
|
||||||
text-decoration: dashed;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0 0 15px 10px rgb(227, 225, 225);
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-img-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 70%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 30%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.news-content-title {
|
|
||||||
font-size: 25px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-content-line {
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
background: rgba(204, 204, 204, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content-right-box {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-title {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-time {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgb(153, 153, 153);
|
||||||
|
margin: 15px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-intro {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
width: 100%;
|
||||||
|
text-align: justify;
|
||||||
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ted栏
|
// ted栏
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<Head>
|
<Head>
|
||||||
<Title>{{ tdk.tdk_title }}</Title>
|
<Title>{{ tdkNewType }}{{ tdk.tdk_title }}</Title>
|
||||||
<Meta :content=tdk.tdk_keyword name="keywords" />
|
<Meta :content=tdk.tdk_keyword name="keywords" />
|
||||||
<Meta :content=tdk.tdk_description name="description" />
|
<Meta :content=tdk.tdk_description name="description" />
|
||||||
</Head>
|
</Head>
|
||||||
@ -12,8 +12,9 @@
|
|||||||
<!-- 新闻类型 -->
|
<!-- 新闻类型 -->
|
||||||
<div class="news-titile-pos-box">
|
<div class="news-titile-pos-box">
|
||||||
<div class="news-title-box" v-for="(item, index) in newsTypeList" :key="index">
|
<div class="news-title-box" v-for="(item, index) in newsTypeList" :key="index">
|
||||||
<div :class="active.idx === index ? 'news-title news-title-active' : 'news-title'" @click="handleClickType(index)">{{item.name}}</div>
|
<div :class="active.idx === index ? 'news-title news-title-active' : 'news-title'"
|
||||||
<div class="news-title-line" v-if="index !== newsTypeList.length - 1"></div>
|
@click="handleClickType(index)">{{ item.dictionary_name }}</div>
|
||||||
|
<div class="news-title-line" v-if="index !== newsTypeList.length - 1"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -23,36 +24,21 @@
|
|||||||
|
|
||||||
<!-- 模块渲染列表 -->
|
<!-- 模块渲染列表 -->
|
||||||
<div v-if="newsList.length != 0" class="news-big-box row animate__animated animate__fadeIn">
|
<div v-if="newsList.length != 0" class="news-big-box row animate__animated animate__fadeIn">
|
||||||
<div class="news-box col-lg-4 col-md-6 col-sm-12" v-for="(item, index) in newsList">
|
<div class="news-box col-lg-12" v-for="(item, index) in newsList">
|
||||||
<div class="news-s-box">
|
<div class="news-s-box">
|
||||||
<nuxt-link v-if="item.info_article_link" :to="item.info_article_link" class="jump">
|
<nuxt-link :to="getLink(item)" class="jump">
|
||||||
<div class="news-img-box">
|
<div class="news-contianer" style="border: 1px solid #e5e4e4">
|
||||||
<img :src=item.info_article_cover alt="">
|
<div class="news-content-box">
|
||||||
</div>
|
<div class="news-cover-box">
|
||||||
<div class="news-content-box">
|
<img :src=item.news_cover>
|
||||||
<div class="news-content-title">{{ item.info_article_title }}</div>
|
</div>
|
||||||
<div class="news-content-line"></div>
|
<div class="news-content-right-box">
|
||||||
<div class="news-content-sublevel">
|
<div class="news-title">{{ item.news_title }}</div>
|
||||||
<div class="news-content-more">现在阅读</div>
|
<div class="news-time">{{ item.news_issue_date }}</div>
|
||||||
<div class="news-content-time">{{ item.info_article_create_time }}
|
<div class="news-intro">{{ item.news_intro }}</div>
|
||||||
|
<el-button type="info">查看详情</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
<nuxt-link v-else :to="'/news/details/' + item.info_article_id" class="jump">
|
|
||||||
<div class="news-img-box">
|
|
||||||
<img :src=item.info_article_cover alt="">
|
|
||||||
</div>
|
|
||||||
<div class="news-content-box">
|
|
||||||
<div class="news-content-title">{{ item.info_article_title }}</div>
|
|
||||||
<div class="news-content-line"></div>
|
|
||||||
<div class="news-content-sublevel">
|
|
||||||
<div class="news-content-more">现在阅读</div>
|
|
||||||
<div class="news-content-time">{{ item.info_article_create_time }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
@ -78,32 +64,27 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
|
// 预对接
|
||||||
let newsList = ref(
|
let newsList = ref(
|
||||||
[
|
[
|
||||||
// {
|
// {
|
||||||
// info_article_id: '1',
|
// news_id: '1',
|
||||||
// info_article_title: "【2023届联考成绩公示】为理想来为梦想战",
|
// news_title: "米尔喊你抽奖啦！NXP i.MX开发板、米家台灯、血压计等礼品~",
|
||||||
// info_article_cover: "/img/business/nuxt/@2x.png",
|
// news_intro: "一年一度端午节，与往常不一样的是今年的端午节多了一个特别的礼物那就是米尔将联合XP福利送~\n免费赠送i.MX开发板、台灯、血压计快来参与，你就是锦鲤~一等奖(5名)米尔基于NXPi.MX6U儿的开发板（价值558元）\n",
|
||||||
// info_article_create_time: "2023-02-23",
|
// news_cover: "/uploads/NewsImg/20230629\\b3897ad4ecce0204b2086110539ec1b3.jpg",
|
||||||
|
// news_issue_date: "2023-02-23",
|
||||||
// },
|
// },
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
|
|
||||||
let newsTypeList = ref([
|
let newsTypeList = ref([
|
||||||
{
|
{
|
||||||
name: '公司新闻',
|
dictionary_name: '---',
|
||||||
idx: 0
|
idx: 0
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: '行业动态',
|
|
||||||
idx: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '技术分享',
|
|
||||||
idx: 2
|
|
||||||
},
|
|
||||||
])
|
])
|
||||||
|
let tdkNewType = ref()
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -137,6 +118,14 @@ const handleClickType = function (index) {
|
|||||||
router.push(String(index) + "-" + String(page))
|
router.push(String(index) + "-" + String(page))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getLink = function (item) {
|
||||||
|
if (item.news_link) {
|
||||||
|
return item.news_link;
|
||||||
|
} else {
|
||||||
|
return "/news/details/" + item.news_id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 接口对接
|
* 接口对接
|
||||||
@ -148,11 +137,17 @@ useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
|
|||||||
tdk.value = JSON.parse(res.data.value).data
|
tdk.value = JSON.parse(res.data.value).data
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 获取新闻类型
|
||||||
|
useFetch('/api/news/getNewsType').then(res => {
|
||||||
|
newsTypeList.value = JSON.parse(res.data.value).data || []
|
||||||
|
tdkNewType.value = newsTypeList?.value[active.idx]?.dictionary_name
|
||||||
|
})
|
||||||
|
|
||||||
// // 获取新闻列表
|
// // 获取新闻列表
|
||||||
// useFetch('/api/news/getinfoArticleList', { params: queryParams }).then(res => {
|
useFetch('/api/news/getNewsList', { params: queryParams }).then(res => {
|
||||||
// total.value = JSON.parse(res.data.value).count || 0
|
total.value = JSON.parse(res.data.value).count || 0
|
||||||
// newsList.value = JSON.parse(res.data.value).data || []
|
newsList.value = JSON.parse(res.data.value).data || []
|
||||||
// })
|
})
|
||||||
|
|
||||||
// // 添加流量访问
|
// // 添加流量访问
|
||||||
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
||||||
|
|||||||
25
server/api/news/getNewsList.js
Normal file
25
server/api/news/getNewsList.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import {
|
||||||
|
readRawBody,
|
||||||
|
getQuery,
|
||||||
|
getMethod
|
||||||
|
} from 'h3'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取新闻列表
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
// 基础url
|
||||||
|
const baseURL = process.env.NUXT_PROXY_WEB_API
|
||||||
|
const method = getMethod(event).toUpperCase()
|
||||||
|
let body
|
||||||
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
|
const res = await $fetch(baseURL + "/News.News/getNewsList", {
|
||||||
|
method,
|
||||||
|
baseURL: event.context.baseUrl,
|
||||||
|
headers: event.context.headers,
|
||||||
|
params: getQuery(event),
|
||||||
|
body
|
||||||
|
})
|
||||||
|
return res
|
||||||
|
})
|
||||||
24
server/api/news/getNewsType.js
Normal file
24
server/api/news/getNewsType.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import {
|
||||||
|
readRawBody,
|
||||||
|
getQuery,
|
||||||
|
getMethod
|
||||||
|
} from 'h3'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取新闻类型列表
|
||||||
|
*/
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
// 基础url
|
||||||
|
const baseURL = process.env.NUXT_PROXY_WEB_API
|
||||||
|
const method = getMethod(event).toUpperCase()
|
||||||
|
let body
|
||||||
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
|
const res = await $fetch(baseURL + "/News.News/getNewsType", {
|
||||||
|
method,
|
||||||
|
baseURL: event.context.baseUrl,
|
||||||
|
headers: event.context.headers,
|
||||||
|
params: getQuery(event),
|
||||||
|
body
|
||||||
|
})
|
||||||
|
return res
|
||||||
|
})
|
||||||
24
server/api/news/getinfoArticleInfo.js
Normal file
24
server/api/news/getinfoArticleInfo.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import {
|
||||||
|
readRawBody,
|
||||||
|
getQuery,
|
||||||
|
getMethod
|
||||||
|
} from 'h3'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取新闻详情
|
||||||
|
*/
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
// 基础url
|
||||||
|
const baseURL = process.env.NUXT_PROXY_WEB_API
|
||||||
|
const method = getMethod(event).toUpperCase()
|
||||||
|
let body
|
||||||
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
|
const res = await $fetch(baseURL + "/ExaminationInformation.InfoArticle/getinfoArticleInfo", {
|
||||||
|
method,
|
||||||
|
baseURL: event.context.baseUrl,
|
||||||
|
headers: event.context.headers,
|
||||||
|
params: getQuery(event),
|
||||||
|
body
|
||||||
|
})
|
||||||
|
return res
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user