From 636d65166a944324d6d0fe1adca5ae913bd6b80c Mon Sep 17 00:00:00 2001
From: lwh <2679599887@qq.com>
Date: Thu, 29 Jun 2023 20:42:52 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=B7=BB=E5=8A=A0=E6=96=B0=E9=97=BB?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/business/news/index.scss |  41 ++++++-
 components/Carousel/index.vue       |   4 +-
 components/Header/index.vue         |   2 +-
 pages/news/[idx]-[page].vue         | 172 ++++++++++++++++++++++++++++
 pages/news/[page].vue               | 145 -----------------------
 5 files changed, 210 insertions(+), 154 deletions(-)
 create mode 100644 pages/news/[idx]-[page].vue
 delete mode 100644 pages/news/[page].vue
diff --git a/assets/css/business/news/index.scss b/assets/css/business/news/index.scss
index 0bdf133..9eb6a79 100644
--- a/assets/css/business/news/index.scss
+++ b/assets/css/business/news/index.scss
@@ -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;
 }
\ No newline at end of file
diff --git a/components/Carousel/index.vue b/components/Carousel/index.vue
index b9366ea..c19f26f 100644
--- a/components/Carousel/index.vue
+++ b/components/Carousel/index.vue
@@ -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 按照上 右 下 左 或 上下 左右 设置
diff --git a/components/Header/index.vue b/components/Header/index.vue
index f845dc9..18847c3 100644
--- a/components/Header/index.vue
+++ b/components/Header/index.vue
@@ -81,7 +81,7 @@ let navList = [
   {
     name: '新闻中心',
     children: [],
-    href: '/news/1',
+    href: '/news/1-1',
     alias: 'news'
   },
   {
diff --git a/pages/news/[idx]-[page].vue b/pages/news/[idx]-[page].vue
new file mode 100644
index 0000000..5ba9419
--- /dev/null
+++ b/pages/news/[idx]-[page].vue
@@ -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>
\ No newline at end of file
diff --git a/pages/news/[page].vue b/pages/news/[page].vue
deleted file mode 100644
index 79a4325..0000000
--- a/pages/news/[page].vue
+++ /dev/null
@@ -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>
\ No newline at end of file
