From ef37c59e055a990ce247b265b27d3fcef430a243 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 15 八月 2025 10:19:18 +0800
Subject: [PATCH] first submit
---
src/views/informationCenter/index.vue | 337 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 337 insertions(+), 0 deletions(-)
diff --git a/src/views/informationCenter/index.vue b/src/views/informationCenter/index.vue
new file mode 100644
index 0000000..2b2e32b
--- /dev/null
+++ b/src/views/informationCenter/index.vue
@@ -0,0 +1,337 @@
+<template>
+ <div class="minWidth">
+ <el-carousel :height="screenheight + 'px'" v-loading="bannerLoading">
+ <template v-if="!bannerLoading">
+ <el-carousel-item v-for="item in bannerList" :key="item.id">
+ <div class="bannerBox imgBox" :style="item.caupress_link ? 'cursor: pointer' : ''">
+ <img class="bannerImg" :src="item.icon" @click="bannerLink(item)"/>
+ </div>
+ </el-carousel-item>
+ </template>
+ </el-carousel>
+ <div class="contentBox">
+ <div class="tabs">
+ <div
+ :class="tabsSelected == 0 ? 'tabSelect' : ''"
+ class="tab"
+ @click="
+ () => {
+ this.tabsSelected = 0;
+ this.getData();
+ }
+ "
+ >
+ <i class="el-icon-document"></i>
+ 鏈ぞ璧勮
+ </div>
+ <div class="division"></div>
+ <div
+ :class="tabsSelected == 1 ? 'tabSelect' : ''"
+ class="tab"
+ @click="
+ () => {
+ this.tabsSelected = 1;
+ this.getData();
+ }
+ "
+ >
+ <i class="el-icon-bell"></i>
+ 鏈ぞ閫氱煡
+ </div>
+ </div>
+ <div class="list" v-loading="reLoading">
+ <el-empty
+ description="鏆傛棤鏁版嵁"
+ class="empty"
+ :image-size="200"
+ v-if="list.length == 0"
+ ></el-empty>
+ <div>
+ <div
+ class="listItem"
+ v-for="(item, index) in list"
+ :key="index"
+ @click="gotoDetails(item.linkInfo)"
+ >
+ <div class="wrapImg">
+ <div v-if="item.icon.includes('default')" class="date">
+ <div>
+ {{
+ item.caupress_publishDate
+ ? moment(item.caupress_publishDate).format("DD")
+ : moment(item.createDate).format("DD")
+ }}
+ </div>
+ <div class="year">
+ {{
+ item.caupress_publishDate
+ ? moment(item.caupress_publishDate).format("YYYY-MM")
+ : moment(item.createDate).format("YYYY-MM")
+ }}
+ </div>
+ </div>
+ <img v-else class="autoImg" :src="item.icon" alt="" />
+ </div>
+ <div>
+ <p class="title ellipsis" :title="item.name">
+ {{ item.name }}
+ </p>
+ <p class="introduce ellipsis" :title="item.description">
+ {{ item.description }}
+ </p>
+ <div class="author">
+ <span v-if="item.caupress_author">{{
+ item.caupress_author
+ }}</span>
+ <span>{{
+ item.caupress_publishDate
+ ? moment(item.caupress_publishDate).format("YYYY-MM-DD")
+ : moment(item.createDate).format("YYYY-MM-DD")
+ }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 鍒嗛〉 -->
+ <div class="pageinateBox" v-if="list.length > 0 && !reLoading">
+ <el-pagination
+ @size-change="
+ (val) => {
+ paginationData.limit = val;
+ getData();
+ }
+ "
+ @current-change="
+ (val) => {
+ paginationData.page = val;
+ getData();
+ }
+ "
+ background=""
+ :current-page="paginationData.page - 0"
+ :page-size="paginationData.limit"
+ prev-text="涓婁竴椤�"
+ next-text="涓嬩竴椤�"
+ layout="total, prev, pager, next, slot, jumper"
+ :total="paginationData.totalCount"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "home",
+ data() {
+ return {
+ tabsSelected: this.$route.query.tabsSelected
+ ? this.$route.query.tabsSelected
+ : 0,
+ list: [],
+ paginationData: {
+ page: 1,
+ totalCount: 0,
+ limit: 10,
+ totalPage: 0,
+ },
+ bannerLoading: false,
+ reLoading: true,
+ bannerList: [],
+ screenheight: document.documentElement.clientWidth / 2.628,
+ };
+ },
+ created() {
+ window.onresize = () => {
+ let c = 2.628;
+ if (document.documentElement.clientWidth >= 1220) {
+ this.screenheight = document.documentElement.clientWidth / c;
+ }
+ };
+ this.getBanner();
+ this.getData();
+ },
+ methods: {
+ bannerLink(val) {
+ if (val.caupress_link) {
+ window.open(val.caupress_link);
+ }
+ },
+ getBanner() {
+ this.bannerLoading = true;
+ this.MG.resource
+ .getItem({
+ path: "caupress_banner\\caupress_informationCenterBanner",
+ fields: {
+ caupress_link: [],
+ },
+ coverSize: {
+ height: 750,
+ },
+ paging: {
+ start: 0,
+ size: 999,
+ },
+ })
+ .then((res) => {
+ console.log(res);
+ this.bannerLoading = false;
+ this.bannerList = res.datas;
+ });
+ },
+ getData() {
+ this.reLoading = true;
+ let { limit, page } = this.paginationData;
+ let path =
+ this.tabsSelected == 0
+ ? "caupress_informationCenter\\caupress_information"
+ : "caupress_informationCenter\\caupress_notice";
+ let query = {
+ path: path,
+ paging: {
+ start: limit * page - limit,
+ size: limit,
+ },
+ sort: {
+ CreateDate: "Desc",
+ },
+ coverSize: {
+ height: 126,
+ },
+ fields: {
+ caupress_publishDate: [],
+ caupress_author: [],
+ },
+ };
+
+ this.MG.resource.getItem(query).then((res) => {
+ this.list = res.datas;
+ console.log(this.list, "list");
+ this.paginationData.totalCount = res.total;
+ this.reLoading = false;
+ });
+ },
+ gotoDetails(linkInfo) {
+ this.$router.push({
+ name: "informationCenter-detail",
+ query: {
+ tabsSelected: this.tabsSelected,
+ path: linkInfo[0].LinkPath,
+ id: linkInfo[0].ChildrenId,
+ },
+ });
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.minWidth {
+ min-width: 1220px;
+}
+.bannerBox {
+ background: #f3f3f3;
+}
+.imgBox {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+.contentBox {
+ background-color: #ffffff;
+ margin-top: 60px;
+ .tabs {
+ display: flex;
+ justify-content: space-evenly;
+ font-size: 20px;
+ line-height: 106px;
+ align-items: center;
+ font-weight: 700;
+ color: #999999;
+ border-bottom: 2px solid #e6e6e6;
+ text-align: center;
+ height: 104px;
+ .tab {
+ width: 300px;
+ cursor: pointer;
+ }
+ .imgCenter {
+ vertical-align: middle;
+ margin: 0 5px;
+ }
+ .division {
+ width: 1px;
+ height: 18px;
+ border-right: 1px solid #acabac;
+ }
+ .tabSelect {
+ color: #333333;
+ border-bottom: 2px solid #00873c;
+ }
+ }
+ .list {
+ padding: 20px;
+ min-height: 400px;
+ .listItem {
+ margin: 50px 0;
+ display: flex;
+ font-size: 14px;
+ color: #999999;
+ cursor: pointer;
+ position: relative;
+ &:hover {
+ .title {
+ color: #00873c;
+ }
+ }
+ .wrapImg {
+ width: 210px;
+ height: 126px;
+ margin-right: 30px;
+ position: relative;
+ background: #f2f2f2;
+ .date {
+ text-align: center;
+ font-size: 30px;
+ padding-top: 40px;
+ .year {
+ font-size: 17px;
+ margin-top: 5px;
+ }
+ }
+ }
+ .title {
+ font-size: 18px;
+ line-height: 30px;
+ letter-spacing: 0.45px;
+ font-weight: 400;
+ margin-bottom: 20px;
+ color: #555;
+ }
+ .introduce {
+ width: 974px;
+ }
+ .author {
+ position: absolute;
+ bottom: 0;
+ span {
+ margin-right: 30px;
+ }
+ }
+ }
+ }
+ .pageinateBox {
+ text-align: center;
+ background-color: rgb(241, 248, 244);
+ padding: 40px 0;
+ :deep(.el-pagination.is-background .btn-next) {
+ padding: 0 10px;
+ }
+ :deep(.el-pagination.is-background .btn-prev) {
+ padding: 0 10px;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.1