新闻列表

src/api/NewsCenter/index.js

@@ -0,0 +1,23 @@
+/**
+ * @Description: 
+ * @Author: gcz
+ * @Date: 2022-08-22 16:08:25
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-08-22 16:21:03
+ * @FilePath: \veterans_client_web\src\api\NewsCenter\index.js
+ * @Copyright: Copyright (c) 2016~2022 by gcz, All Rights Reserved. 
+ */
+import request from '@/utils/request'
+
+/**
+ * 获取个人信息
+ * @param {*} params
+ * @returns
+ */
+export function getNoticeList(params) {
+  return request({
+    url: `/app/notice/list/${params.name}`,
+    method: 'get',
+    params
+  })
+}

src/assets/styles/common.scss

@@ -208,3 +208,10 @@ input::-webkit-outer-spin-button {
 input[type='number'] {
   -moz-appearance: textfield;
 }
+
+// 单行省略点点点
+.u-line-1{
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}

src/assets/styles/flex.scss

@@ -0,0 +1,73 @@
+.u-flex {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+}
+
+.u-flex-wrap {
+	flex-wrap: wrap;
+}
+
+.u-flex-nowrap {
+	flex-wrap: nowrap;
+}
+
+.u-col-center {
+	align-items: center;
+}
+
+.u-col-top {
+	align-items: flex-start;
+}
+
+.u-col-bottom {
+	align-items: flex-end;
+}
+
+.u-row-center {
+	justify-content: center;
+}
+
+.u-row-left {
+	justify-content: flex-start;
+}
+
+.u-row-right {
+	justify-content: flex-end;
+}
+
+.u-row-between {
+	justify-content: space-between;
+}
+
+.u-row-around {
+	justify-content: space-around;
+}
+
+.u-text-left {
+	text-align: left;
+}
+
+.u-text-center {
+	text-align: center;
+}
+
+.u-text-right {
+	text-align: right;
+}
+
+.u-flex-col {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+}
+
+// 定义flex等分
+@for $i from 0 through 12 {
+	.u-flex-#{$i} {
+		flex: $i;
+	}
+}

src/assets/styles/index.scss

@@ -1,2 +1,3 @@
 @import './reset.scss';
-@import './common.scss';
+@import './common.scss';
+@import './flex.scss';

src/views/NewsCenter/NewsCenterIndex.vue

@@ -2,23 +2,256 @@
  * @Description: 新闻中心
  * @Author: 空白格
  * @Date: 2022-08-22 10:20:21
- * @LastEditors: 空白格
- * @LastEditTime: 2022-08-22 10:25:48
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-08-22 16:33:25
  * @FilePath: \veterans_client_web\src\views\NewsCenter\NewsCenterIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
   <div class="app-main">
-    <BannerBreadcrumb title="新闻中心" :breadcrumb="false" />
+    <div class="BannerBreadcrumb-wrap">
+      <BannerBreadcrumb title="新闻中心" :breadcrumb="true" />
+      <div class="tabs">
+        <span v-for="(item,index) in tabList" 
+          @click="changeTab(index)" 
+          :class="{active:tabsActive==index}" :key="index">
+          {{item}}
+        </span>
+      </div>
+    </div>
+    
+    <section class="app-main-box">
+      <div class="app-main-box-content">
+        <div class="title" v-if="tabsActive==0">{{tabList[tabsActive]}}</div>
+        <div v-if="tabsActive==0" class="news-list" v-loading="loading">
+          <el-row :gutter="16">
+            <el-col
+              class="data-item"
+              :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="24"
+              :xl="24"
+              v-for="(item, index) in dataList"
+              :key="index"
+            >
+              <div class="u-flex u-row-between" v-if="tabsActive==0">
+                <div class="artTitle u-line-1" >{{item.artTitle}}</div>
+                <div class="time">{{parseTime(item.updateTime, "{y}-{m}-{d}")}}</div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+
+        <el-tabs v-if="tabsActive==1" v-model="noticeActiveName" @tab-click="noticeClick">
+          <el-tab-pane 
+            v-for="(item,index) in noticeTypeList" :key="index" 
+            :label="item.label" 
+            :name="item.name">
+            <el-row :gutter="16">
+            <el-col
+              class="data-item"
+              :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="24"
+              :xl="24"
+              v-for="(item, index) in dataList"
+              :key="index"
+            >
+              <div class="u-flex u-row-between" v-if="tabsActive==1">
+                <div class="artTitle u-line-1" >{{item.name}}</div>
+                <div class="time">{{parseTime(item.releasTime, "{y}-{m}-{d}")}}</div>
+              </div>
+            </el-col>
+          </el-row>
+            
+          </el-tab-pane>
+        </el-tabs>
+        <el-empty v-if="dataList<1" description="暂无数据"></el-empty>
+        <div class="pagination" v-if="total>queryParams.pageSize">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="queryParams.pageSize"
+            :total="total"
+            @current-change="currentChange"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
 import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import {getNewsList} from "@/api/Home";
+import {getNoticeList} from "@/api/NewsCenter";
+import { parseTime } from "@/utils/utils";
 export default {
   name: "NewsCenterIndex",
   components: {
     BannerBreadcrumb,
   },
+  data() {
+    return {
+      parseTime: parseTime,
+      tabsActive:0,
+      tabList:['新闻动态','通知公告'],
+      loading: false,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      dataList:[],
+      total: 0,
+      noticeTypeList:[
+        {label:'系统通知',name:'0'},
+        {label:'培训通知',name:'2'},
+        {label:'就业通知',name:'3'},
+      ],
+      noticeActiveName:'0'
+    }
+  },
+  created() {
+    this.handleClick()
+  },
+  methods:{
+    changeTab(index){
+      this.queryParams.pageNum=1;
+      this.tabsActive = index;
+      this.handleClick()
+    },
+    /**
+     * 获取新闻
+     * @date 2022-08-10
+     * @returns {any}
+     */
+    getNews() {
+      getNewsList(Object.assign({artCategoryId: 2},this.queryParams)).then((res) => {
+        this.dataList = res?.rows ?? [];
+        this.total = Number(res.total);
+      });
+    },
+    /**
+     * 获取公告
+     * @date 2022-08-10
+     * @returns {any}
+     */
+    getNotice() {
+      let param = Object.assign({name: this.noticeActiveName},this.queryParams);
+      getNoticeList(param).then((res) => {
+        this.dataList = res?.rows ?? [];
+        this.total = Number(res.total);
+      });
+    },
+    /**
+     * tab点击事件
+     * @date 2022-08-10
+     * @param {any} tab
+     * @returns {any}
+     */
+    handleClick() {
+      switch (this.tabsActive) {
+        case 0:
+          this.getNews();
+          break;
+        case 1:
+          this.getNotice();
+          break;
+      }
+    },
+    /**
+     * 分页切换
+     * @date 2022-08-11
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.handleClick();
+    },
+    noticeClick(tab, event) {
+      this.getNotice()
+    }
+  }
 };
 </script>
+<style lang="scss" scoped>
+.app-main-box-content{
+  min-height: calc( 100vh - 73px - 104px - 64px - 23px - 100px - 40px );
+}
+.BannerBreadcrumb-wrap{
+  position: relative;
+  .tabs{
+    position: absolute;
+    right: 15%;
+    bottom: 18px;
+    span{
+      cursor: pointer;
+      font-size: 20px;
+      margin-left: 20px;
+      color: #7E7E7E;
+      &.active{
+        color: #f00;
+      }
+    }
+  }
+}
+.title{
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  font-weight: 400;
+  font-size: 20px;
+  color: #000;
+  letter-spacing: 1.34px;
+  border-bottom: 1px solid #D5D5D5;
+}
+.app-main-box-content{
+  // margin-bottom: 24px;
+  .data-item{
+    margin-bottom: 12px;
+    cursor: pointer;
+    &:hover{
+      .artTitle{
+        color: #ff3939;
+      }
+    }
+    .artTitle{
+      font-weight: 400;
+      font-size: 16px;
+      color: #373737;
+      letter-spacing: 0.83px;
+      max-width: 600px;
+      line-height: 22px;
+    }
+  }
+  
+}
+.pagination {
+  text-align: center;
+  :deep(.el-pager .active) {
+    background-color: #ff3939;
+  }
+  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
+    background-color: #ff3939;
+  }
+}
+
+// 修改tabs样式
+:deep(.el-tabs__item) {
+  font-size: 20px;
+  font-weight: 500;
+  color: #000000;
+}
+:deep(.el-tabs__item:hover) {
+  color: #163da5;
+}
+:deep(.el-tabs__item.is-active) {
+  color: #163da5;
+}
+:deep(.el-tabs__active-bar) {
+  background-color: #163da5;
+}
+</style>