feat 添加新闻类型跳转
This commit is contained in:
parent
3942d0da9c
commit
636d65166a
@ -1,6 +1,40 @@
|
|||||||
|
// 新闻类型
|
||||||
|
.news-titile-pos-box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 50px 0;
|
||||||
|
|
||||||
|
.news-title-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.news-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-title:hover {
|
||||||
|
color: #f08519;
|
||||||
|
}
|
||||||
|
.news-title-active{
|
||||||
|
color: #f08519;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-title-line {
|
||||||
|
width:1px;
|
||||||
|
height: 36px;
|
||||||
|
background-color: #999999;
|
||||||
|
margin: 0 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新闻内容盒子
|
||||||
.news-container-box {
|
.news-container-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// margin-top: 30px;
|
|
||||||
|
|
||||||
.news-big-box {
|
.news-big-box {
|
||||||
width: 105%;
|
width: 105%;
|
||||||
@ -93,9 +127,4 @@
|
|||||||
.jump {
|
.jump {
|
||||||
text-decoration: dashed;
|
text-decoration: dashed;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
|
||||||
|
|
||||||
.ach-container {
|
|
||||||
float: left;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
}
|
@ -69,13 +69,13 @@ useFetch('/api/banner/getBanner',{ params: { banner_location: 1 } }).then(res =>
|
|||||||
|
|
||||||
/**整体轮播图样式*/
|
/**整体轮播图样式*/
|
||||||
let styleContainer = reactive({
|
let styleContainer = reactive({
|
||||||
height: '38vw',
|
height: '33vw',
|
||||||
})
|
})
|
||||||
const modules = ref([Pagination, Navigation, Autoplay])
|
const modules = ref([Pagination, Navigation, Autoplay])
|
||||||
const swiperStyle = conversionStyleVal(reactive({
|
const swiperStyle = conversionStyleVal(reactive({
|
||||||
/**轮播图样式*/
|
/**轮播图样式*/
|
||||||
color: '', //设置字体颜色
|
color: '', //设置字体颜色
|
||||||
height: '38vw', //设置高度
|
height: '33vw', //设置高度
|
||||||
width: '100%', //设置高度
|
width: '100%', //设置高度
|
||||||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||||||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||||||
|
@ -81,7 +81,7 @@ let navList = [
|
|||||||
{
|
{
|
||||||
name: '新闻中心',
|
name: '新闻中心',
|
||||||
children: [],
|
children: [],
|
||||||
href: '/news/1',
|
href: '/news/1-1',
|
||||||
alias: 'news'
|
alias: 'news'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
172
pages/news/[idx]-[page].vue
Normal file
172
pages/news/[idx]-[page].vue
Normal file
@ -0,0 +1,172 @@
|
|||||||
|
<template>
|
||||||
|
<Head>
|
||||||
|
<Title>{{ tdk.tdk_title }}</Title>
|
||||||
|
<Meta :content=tdk.tdk_keyword name="keywords" />
|
||||||
|
<Meta :content=tdk.tdk_description name="description" />
|
||||||
|
</Head>
|
||||||
|
<Header></Header>
|
||||||
|
<Poster :type=1></Poster>
|
||||||
|
|
||||||
|
<div class="background_box">
|
||||||
|
|
||||||
|
<!-- 新闻类型 -->
|
||||||
|
<div class="news-titile-pos-box">
|
||||||
|
<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="news-title-line" v-if="index !== newsTypeList.length - 1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="container ">
|
||||||
|
<!--招生新闻-->
|
||||||
|
<div class="news-container-box container">
|
||||||
|
|
||||||
|
<!-- 模块渲染列表 -->
|
||||||
|
<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-s-box">
|
||||||
|
<nuxt-link v-if="item.info_article_link" :to="item.info_article_link" 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>
|
||||||
|
</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>
|
||||||
|
</nuxt-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list_none" v-else>
|
||||||
|
<el-empty description="暂无数据" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="page-box">
|
||||||
|
<pagination class="page" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit"
|
||||||
|
@pagination="routerJump()" />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Final></Final>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
let newsList = ref(
|
||||||
|
[
|
||||||
|
// {
|
||||||
|
// info_article_id: '1',
|
||||||
|
// info_article_title: "【2023届联考成绩公示】为理想来为梦想战",
|
||||||
|
// info_article_cover: "/img/business/nuxt/@2x.png",
|
||||||
|
// info_article_create_time: "2023-02-23",
|
||||||
|
// },
|
||||||
|
]
|
||||||
|
)
|
||||||
|
|
||||||
|
let newsTypeList = ref([
|
||||||
|
{
|
||||||
|
name: '公司新闻',
|
||||||
|
idx: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '行业动态',
|
||||||
|
idx: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '技术分享',
|
||||||
|
idx: 2
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
let active = reactive({ idx: Number(route.params.idx), name: newsTypeList.value[0] })
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(active, (nv) => {
|
||||||
|
router.push(String(nv['idx']) + "-1")
|
||||||
|
})
|
||||||
|
|
||||||
|
// --- 参数 ---
|
||||||
|
let total = ref(0)
|
||||||
|
const queryParams = reactive({
|
||||||
|
page: parseInt(route.params.page) || 1,
|
||||||
|
idx: parseInt(route.params.idx) || 0,
|
||||||
|
limit: 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// --- 方法 ---
|
||||||
|
const routerJump = function () {
|
||||||
|
let { page } = queryParams
|
||||||
|
router.push(String(newsTypeList.value[active['idx']]) + "-" + String(page))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClickType = function (index) {
|
||||||
|
let { page } = queryParams
|
||||||
|
router.push(String(index) + "-" + String(page))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 接口对接
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 获取Tdk
|
||||||
|
let tdk = ref({})
|
||||||
|
useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
|
||||||
|
tdk.value = JSON.parse(res.data.value).data
|
||||||
|
})
|
||||||
|
|
||||||
|
// // 获取新闻列表
|
||||||
|
// useFetch('/api/news/getinfoArticleList', { params: queryParams }).then(res => {
|
||||||
|
// total.value = JSON.parse(res.data.value).count || 0
|
||||||
|
// newsList.value = JSON.parse(res.data.value).data || []
|
||||||
|
// })
|
||||||
|
|
||||||
|
// // 添加流量访问
|
||||||
|
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
||||||
|
|
||||||
|
|
||||||
|
// fontSizeReactive({
|
||||||
|
// 880: 1,
|
||||||
|
// 480: 3,
|
||||||
|
// })
|
||||||
|
onMounted(() => {
|
||||||
|
htmlAddAnimations()
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped src="~/assets/css/business/news/index.scss"></style>
|
||||||
|
<style scoped src="~/assets/css/business/news/media.scss"></style>
|
@ -1,145 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Head>
|
|
||||||
<Title>{{ tdk.tdk_title }}</Title>
|
|
||||||
<Meta :content=tdk.tdk_keyword name="keywords" />
|
|
||||||
<Meta :content=tdk.tdk_description name="description" />
|
|
||||||
</Head>
|
|
||||||
<Header></Header>
|
|
||||||
<Poster :type=1></Poster>
|
|
||||||
|
|
||||||
<div class="background_box">
|
|
||||||
|
|
||||||
<div class="About-main">
|
|
||||||
<div class="About-container">
|
|
||||||
|
|
||||||
<main class="container ">
|
|
||||||
|
|
||||||
<!--招生新闻-->
|
|
||||||
<div class="news-container-box container">
|
|
||||||
|
|
||||||
<!-- 模块渲染列表 -->
|
|
||||||
<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-s-box">
|
|
||||||
<nuxt-link v-if="item.info_article_link" :to="item.info_article_link" 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>
|
|
||||||
</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>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="list_none" v-else>
|
|
||||||
<el-empty description="暂无数据" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="page-box">
|
|
||||||
<pagination class="page" :total="total" v-model:page="queryParams.page"
|
|
||||||
v-model:limit="queryParams.limit" @pagination="routerJump()" />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Final></Final>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
let newsList = ref(
|
|
||||||
[
|
|
||||||
// {
|
|
||||||
// info_article_id: '1',
|
|
||||||
// info_article_title: "【2023届联考成绩公示】为理想来为梦想战",
|
|
||||||
// info_article_cover: "/img/business/nuxt/@2x.png",
|
|
||||||
// info_article_create_time: "2023-02-23",
|
|
||||||
// },
|
|
||||||
]
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// --- 参数 ---
|
|
||||||
let total = ref(0)
|
|
||||||
const queryParams = reactive({
|
|
||||||
page: parseInt(route.params.page) || 1,
|
|
||||||
limit: 10
|
|
||||||
})
|
|
||||||
|
|
||||||
// --- 方法 ---
|
|
||||||
const routerJump = function () {
|
|
||||||
let { page } = queryParams
|
|
||||||
router.push(String(page))
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 接口对接
|
|
||||||
*/
|
|
||||||
|
|
||||||
// 获取Tdk
|
|
||||||
let tdk = ref({})
|
|
||||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
|
|
||||||
tdk.value = JSON.parse(res.data.value).data
|
|
||||||
})
|
|
||||||
|
|
||||||
// // 获取新闻列表
|
|
||||||
// useFetch('/api/news/getinfoArticleList', { params: queryParams }).then(res => {
|
|
||||||
// total.value = JSON.parse(res.data.value).count || 0
|
|
||||||
// newsList.value = JSON.parse(res.data.value).data || []
|
|
||||||
// })
|
|
||||||
|
|
||||||
// // 添加流量访问
|
|
||||||
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
|
||||||
|
|
||||||
|
|
||||||
// fontSizeReactive({
|
|
||||||
// 880: 1,
|
|
||||||
// 480: 3,
|
|
||||||
// })
|
|
||||||
onMounted(() => {
|
|
||||||
htmlAddAnimations()
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped src="~/assets/css/business/news/index.scss"></style>
|
|
||||||
<style scoped src="~/assets/css/business/news/media.scss"></style>
|
|
Loading…
Reference in New Issue
Block a user