nuxt/mr_web_nuxt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat 添加新闻类型跳转

Browse Source
This commit is contained in:
lwh 2023-06-29 20:42:52 +08:00
parent 3942d0da9c
commit 636d65166a
5 changed files with 210 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
assets/css/business/news/index.scss
View File

@ -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 {
width: 100%;
// margin-top: 30px;
.news-big-box {
width: 105%;
@ -93,9 +127,4 @@
.jump {
text-decoration: dashed;
color: black;
}
.ach-container {
float: left;
margin-top: 30px;
}

4
components/Carousel/index.vue
View File

@ -69,13 +69,13 @@ useFetch('/api/banner/getBanner',{ params: { banner_location: 1 } }).then(res =>
/**整体轮播图样式*/
let styleContainer = reactive({
height: '38vw',
height: '33vw',
})
const modules = ref([Pagination, Navigation, Autoplay])
const swiperStyle = conversionStyleVal(reactive({
/**轮播图样式*/
color: '', //设置字体颜色
height: '38vw', //设置高度
height: '33vw', //设置高度
width: '100%', //设置高度
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置

2
components/Header/index.vue
View File

@ -81,7 +81,7 @@ let navList = [
{
name: '新闻中心',
children: [],
href: '/news/1',
href: '/news/1-1',
alias: 'news'
},
{

172
pages/news/[idx]-[page].vue Normal file
View 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>

145
pages/news/[page].vue
View File

@ -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>