fix:[bug]:新闻列表动态展示

pages/News/index.vue

 <template>
   <div class="news cfkqbg">
     <BackToTopButton />
-    <Header :activeIndex="6"/>
+    <Header :activeIndex="6" />
 
     <div class="m2zrCon m2pubCon background-attachment">
       <div class="container">
         <div class="inner">
           <div class="news-list">
             <ul>
-              <li v-for="(type,index) in newsType" :key="type.id" @click="newsTabsChange(type.id)">
-                <span
-                  :class="
-                    nowType === type.id
-                      ? 'por news-type-active'
-                      : 'por news-type-normal'
-                  "
-                  >{{ type.label }}</span>
+              <li v-for="(type, index) in newsType" :key="type.id" @click="newsTabsChange(type.id)">
+                <span :class="nowType == type.id
+                  ? 'por news-type-active'
+                  : 'por news-type-normal'
+                  ">{{ type.label }}</span>
               </li>
             </ul>
           </div>
           <div class="inner por marquee-out" v-if="marqueeData">
             <img src="@/static/images/tout.png" alt="">
-            <el-carousel height="40px" direction="vertical"  arrow="never" indicator-position="none" :interval="5000">
+            <el-carousel height="40px" direction="vertical" arrow="never" indicator-position="none" :interval="5000">
               <el-carousel-item v-for="item in marqueeData" :key="item.id">
                 <p class="pmd-con" :title="item.pmdTitle">{{ item.pmdTitle }}</p>
               </el-carousel-item>
@@ -30,18 +27,14 @@
           <div class="mt30" v-if="!marqueeData"></div>
           <div class="news-content">
             <ul>
-              <li
-                v-for="item in newsContentList"
-                :key="item.newsId"
-                class="por"
-              >
+              <li v-for="item in newsContentList" :key="item.newsId" class="por">
                 <div @click="gotoNew(item.newsId)">
                   <div class="mt10"></div>
                   <div class="left-time poa">
-                    
+
                     <p>{{ formatDate(item.releaseTime, "y.m") }}</p>
                     <p>{{ formatDate(item.releaseTime, "d") }}日</p>
-                    
+
                   </div>
                   <div class="news-list-con">
                     <h2 :title="item.newsTitle">{{ item.newsTitle }}</h2>
@@ -57,14 +50,8 @@
             </ul>
             <div class="mt20"></div>
             <div class="block">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :page-size="10"
-                layout="prev, pager, next, jumper"
-                :total="total"
-                v-if="total > 10"
-              >
+              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10"
+                layout="prev, pager, next, jumper" :total="total" v-if="total > 10">
               </el-pagination>
             </div>
           </div>
@@ -90,12 +77,7 @@ export default {
       pageTitle: "赤峰矿权-新闻资讯", // 静态页面标题
       pageDescription: "赤峰矿权-新闻资讯", // 静态页面描述
       pageKeywords: "赤峰矿权、赤峰矿业、新闻动态",
-      newsType: [
-        { id: 1, label: "国家政策" },
-        { id: 2, label: "法律法规" },
-        { id: 3, label: "市场行情" },
-        { id: 4, label: "行业动态" },
-      ],
+      newsType: [],
       nowType: 1,
       query: {
         pageNum: 1,
@@ -106,7 +88,7 @@ export default {
       newsContentList: [],
       total: 0,
       isChangingTab: false,
-      marqueeData:undefined,
+      marqueeData: undefined,
     };
   },
   head() {
@@ -126,25 +108,25 @@ export default {
     HorizontalMenu,
     Header,
   },
-  created() {},
+  created() { },
   mounted() {
     this.getType();
-    this.fetchData();
     this.marqueeFun();
+
   },
   methods: {
     removeTagsAndSpaces(input) {
-        // 使用正则表达式替换
-        var output = input.replace(/<\/?[^>]+(>|$)/g, ''); // 去除所有的<>标签
-        output = output.replace(/[\t\n\r]/g, ''); // 去除制表符、换行符、回车符
-        output = output.replace(/&nbsp;/g, ''); // 去除&nbsp;
-        output = output.replace(/\s+/g, ''); // 去除空白字符
+      // 使用正则表达式替换
+      var output = input.replace(/<\/?[^>]+(>|$)/g, ''); // 去除所有的<>标签
+      output = output.replace(/[\t\n\r]/g, ''); // 去除制表符、换行符、回车符
+      output = output.replace(/&nbsp;/g, ''); // 去除&nbsp;
+      output = output.replace(/\s+/g, ''); // 去除空白字符
 
-        return output;
+      return output;
     },
     extractContent,
     formatDate,
-    gotoNew(id){
+    gotoNew(id) {
       this.$router.push({ path: `/News/det?id=${id}` });
     },
     scrollToTop() {
@@ -173,14 +155,24 @@ export default {
     async getType() {
       try {
         const type = await sendRequest(
-          "business/companyInformation/list",
+          // "business/companyInformation/list",
+          "system/dict/data/list",
           "get",
           {
             pageNum: 1,
             pageSize: 10,
+            dictType: 'cfkq_news_type',
           }
         );
-        console.log(type, "type");
+        this.newsType = type.rows && type.rows.length > 0 && type.rows.filter((item) => {
+          return item.status != '1'
+        }).map((item) => {
+          return {
+            id: item.dictValue,
+            label: item.dictLabel,
+          };
+        });
+        this.newsTabsChange(this.newsType[0].id)
       } catch (error) {
         console.error("Error fetching data:", error);
       }
@@ -206,13 +198,13 @@ export default {
         console.error("Error fetching data:", error);
       }
     },
-    async marqueeFun(){
+    async marqueeFun() {
       const marquee = await sendRequest(
         "/system/paomadeng/listAll",
         "get",
         {
-          pmdType:'2',
-          isDisplay:'Y'
+          pmdType: '2',
+          isDisplay: 'Y'
         }
       );
       this.marqueeData = marquee.rows;
@@ -224,17 +216,21 @@ export default {
 .news-bg {
   width: 100%;
 }
+
 .news-bg img {
   width: 100%;
   height: auto;
   object-fit: contain;
 }
+
 .news-type-normal {
   color: #666;
 }
+
 .news-type-active {
   color: #0457c7;
 }
+
 .news-list ul {
   display: flex;
   justify-content: space-evenly;
@@ -244,14 +240,17 @@ export default {
   font-size: 0.3rem;
   line-height: 0.6rem;
 }
+
 .news-list ul li span {
   cursor: pointer;
   display: block;
   transition: all 0.5s ease;
 }
+
 .news-list ul li:hover span {
   color: rgba(4, 87, 199, 0.5);
 }
+
 .news-list ul li span::after {
   content: "";
   display: none;
@@ -262,12 +261,15 @@ export default {
   height: 34px;
   background: #0457c7;
 }
+
 .news-list ul li:last-child span::after {
   display: none;
 }
+
 .news-content ul {
   width: 100%;
 }
+
 .news-content ul li {
   width: 100%;
   background: #ffffff;
@@ -278,12 +280,15 @@ export default {
   color: #666;
   cursor: pointer;
 }
+
 .news-content ul li:hover {
   box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4);
 }
+
 .left-time {
   display: none;
 }
+
 .news-list-con h2 {
   color: #333333;
   overflow: hidden;
@@ -295,6 +300,7 @@ export default {
   font-size: 0.22rem;
   margin: 0 0.2rem;
 }
+
 .news-list-con h2::before {
   content: "";
   position: absolute;
@@ -306,11 +312,13 @@ export default {
   border-radius: 50%;
   display: none;
 }
+
 .news-list-con .news-time {
   font-size: 0.18rem;
   color: #666666;
   margin: 0 0.2rem;
 }
+
 .news-list-con .news-disc {
   color: #666666;
   line-height: 1.5em;
@@ -330,32 +338,37 @@ export default {
     font-size: 20px;
     line-height: 57px;
   }
+
   .news-list ul li span::after {
     display: block;
     height: 22px;
     top: 34%;
     right: -90px;
   }
+
   .news-content ul li {
     min-height: 100px;
     overflow: hidden;
     margin-top: 30px;
   }
-  .news-content ul li:first-child{
+
+  .news-content ul li:first-child {
     margin-top: 0;
   }
+
   .left-time {
     display: block;
     left: 0;
     top: 0;
     width: 130px;
     height: 91px;
-    
+
     box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
-    
+
     text-align: center;
-    border:1px solid #1961c5;
+    border: 1px solid #1961c5;
   }
+
   .left-time p:first-child {
     font-size: 20px;
     background: #1961c5;
@@ -363,12 +376,15 @@ export default {
     height: 45px;
     line-height: 45px;
   }
+
   .left-time p:last-child {
     font-size: 30px;
   }
+
   .news-list-con {
     margin-left: 120px;
   }
+
   .news-list-con h2 {
     width: 45%;
     font-size: 18px;
@@ -376,6 +392,7 @@ export default {
     text-indent: 1em;
     float: left;
   }
+
   .news-list-con h2::before {
     left: 0;
     top: 12px;
@@ -383,6 +400,7 @@ export default {
     height: 11px;
     display: block;
   }
+
   .news-list-con .news-time {
     width: 30%;
     font-size: 18px;
@@ -390,11 +408,13 @@ export default {
     text-align: right;
     float: right;
   }
+
   .news-list-con .news-disc {
     font-size: 20px;
     -webkit-line-clamp: 2;
     text-indent: 2em;
   }
+
   // .block ::v-deep .el-pager li {
   //   padding: 0 15px;
   //   background: #fff;
@@ -411,19 +431,23 @@ export default {
   .inner {
     width: 1250px;
   }
+
   .news-list ul li span::after {
     height: 22px;
     top: 34%;
     right: -100%;
   }
+
   .news-content ul li {
     margin-top: 30px;
   }
 }
+
 @keyframes marquee {
   0% {
     left: 100%;
   }
+
   100% {
     left: -100%;
   }
@@ -431,17 +455,16 @@ export default {
 
 
 @keyframes blink {
-    0% {
-        opacity: 1; 
-    }
-    50% {
-        opacity: 0; 
-    }
-    100% {
-        opacity: 1; 
-    }
-}
-
+  0% {
+    opacity: 1;
+  }
 
+  50% {
+    opacity: 0;
+  }
 
+  100% {
+    opacity: 1;
+  }
+}
 </style>
\ No newline at end of file