00

src/views/index/components/scientific_research_trends.vue

@@ -30,141 +30,31 @@
       </el-col>
       <el-col class="scientific_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
         <el-row>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+          <el-col v-for="(item,index) in scientificData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
             <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh1.png" alt="">
+              <el-col :span="2" class="img">
+                <img v-if="index == 0" src="@/assets/index/scientific_research_trends/sy_icon_bh1.png" alt="">
+                <img v-if="index == 1" src="@/assets/index/scientific_research_trends/sy_icon_bh2.png" alt="">
+                <img v-if="index == 2" src="@/assets/index/scientific_research_trends/sy_icon_bh3.png" alt="">
+                <img v-if="index == 3" src="@/assets/index/scientific_research_trends/sy_icon_bh4.png" alt="">
+                <img v-if="index == 4" src="@/assets/index/scientific_research_trends/sy_icon_bh5.png" alt="">
+                <img v-if="index == 5" src="@/assets/index/scientific_research_trends/sy_icon_bh6.png" alt="">
+                <img v-if="index == 6" src="@/assets/index/scientific_research_trends/sy_icon_bh7.png" alt="">
+                <img v-if="index == 7" src="@/assets/index/scientific_research_trends/sy_icon_bh8.png" alt="">
+                <img v-if="index == 8" src="@/assets/index/scientific_research_trends/sy_icon_bh9.png" alt="">
+                <img v-if="index == 9" src="@/assets/index/scientific_research_trends/sy_icon_bh10.png" alt="">
               </el-col>
-              <el-col :span="16" class="text">科研院关于组织申报国家重点研发计划</el-col>
+              <el-col :span="16" class="text">{{ item.title }}</el-col>
               <el-col :span="4">
-                <div class="time">2021.10.10</div>
+                <div class="time">{{ parseTime(item.publishTime) }}</div>
+                <!--                <div class="time">{{ item.publishTime }}</div>-->
               </el-col>
             </el-row>
             <div class="scientific_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
+              <hr v-if="index < 8" style="border: 0.1rem solid #E6E6E6;">
+              <hr v-if="!width && index == 8" style="border: 0.1rem solid #E6E6E6;">
             </div>
           </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh2.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">科技部关于发布国家重点研发计划“科</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.22</div>
-              </el-col>
-            </el-row>
-            <div class="scientific_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh3.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">关于征集适宜向“一带一路”国家转移的…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.21</div>
-              </el-col>
-            </el-row>
-            <div class="scientific_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh4.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">西南交通大学关于2021年度国家自然</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.07</div>
-              </el-col>
-            </el-row>
-            <div class="scientific_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh5.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">关于召开2021年度国家自然科学基金项…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.11</div>
-              </el-col>
-            </el-row>
-            <div class="scientific_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh6.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">关于2021年度四川省科技奖励提名工作…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.30</div>
-              </el-col>
-            </el-row>
-            <div class="scientific_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh7.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">《成都市经济和信息化局关于更新完善…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.01</div>
-              </el-col>
-            </el-row>
-            <div class="scientific_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh8.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">国家自然科学基金委员会中德科学中心…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.26</div>
-              </el-col>
-            </el-row>
-            <div class="scientific_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh9.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">关于征集适宜向“一带一路”国家转移的…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.23</div>
-              </el-col>
-            </el-row>
-            <div v-show="width<992" class="scientific_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="scientific_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_bh10.png"
-                                                 alt=""></el-col>
-              <el-col :span="16" class="text">科研院关于组织申报国家重点研发计划</el-col>
-              <el-col :span="4">
-                <div class="time">2021.08.06</div>
-              </el-col>
-            </el-row>
-          </el-col>
         </el-row>
       </el-col>
     </el-row>
@@ -198,85 +88,20 @@
       </el-col>
       <el-col class="academia_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
         <el-row>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+          <el-col v-for="(item,index) in academiaData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
             <el-row class="academia_context_text">
               <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
               </el-col>
-              <el-col :span="16" class="text">《成都市经济和信息化局关于更新完善…</el-col>
+              <el-col :span="16" class="text">{{item.title}}</el-col>
               <el-col :span="4">
-                <div class="time">2021.10.01</div>
+                <div class="time">{{ parseTime(item.publishTime) }}</div>
               </el-col>
             </el-row>
             <div class="academia_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
+              <hr v-if="index < 4" style="border: 0.1rem solid #E6E6E6;">
+              <hr v-if="!width && index == 4" style="border: 0.1rem solid #E6E6E6;">
             </div>
           </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="academia_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">《成都市经济和信息化局关于更新完善…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.01</div>
-              </el-col>
-            </el-row>
-            <div class="academia_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="academia_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">《成都市经济和信息化局关于更新完善…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.01</div>
-              </el-col>
-            </el-row>
-            <div class="academia_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="academia_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">《成都市经济和信息化局关于更新完善…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.01</div>
-              </el-col>
-            </el-row>
-            <div class="academia_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="academia_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">《成都市经济和信息化局关于更新完善…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.01</div>
-              </el-col>
-            </el-row>
-            <div v-show="width<992" class="academia_context_divider">
-              <hr style="border: 0.1rem solid #E6E6E6;">
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-row class="academia_context_text">
-              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
-              </el-col>
-              <el-col :span="16" class="text">《成都市经济和信息化局关于更新完善…</el-col>
-              <el-col :span="4">
-                <div class="time">2021.10.01</div>
-              </el-col>
-            </el-row>
-          </el-col>
         </el-row>
       </el-col>
     </el-row>
@@ -299,13 +124,45 @@
 </template>
 
 <script>
+import {getArticleList} from "@/api";
+import {parseTime} from '@/utils/ebts'
+
 export default {
   name: "scientific_research_trends",
   data() {
     return {
-      width: document.documentElement.clientWidth
+      width: document.documentElement.clientWidth>=992,
+      scientificData: [],
+      academiaData: [],
     }
   },
+  created() {
+    this.getScientificList()
+    this.getAcademiaList()
+  },
+  methods: {
+    getScientificList() {
+      getArticleList({
+        type: "VPteru0OeW6GgYObAewMupY",
+        pageNum: 1,
+        pageSize: 10
+      }).then(res => {
+        this.scientificData = res.rows
+      })
+    },
+    getAcademiaList() {
+      getArticleList({
+        type: "KBwgShsEiDolV91qmaWdWJc",
+        pageNum: 1,
+        pageSize: 6
+      }).then(res => {
+        this.academiaData = res.rows
+      })
+    },
+    parseTime(time) {
+      return parseTime(time, '{y}-{m}-{d}')
+    }
+  }
 }
 </script>
 
@@ -419,7 +276,7 @@ export default {
   }
 }
 
-@media screen and  (min-width: 1100px) and (max-width: 1400px) {
+@media screen and (min-width: 1100px) and (max-width: 1400px) {
   .scientific_context_text {
     padding-left: 2rem !important;
 
@@ -430,7 +287,7 @@ export default {
   .academia_context_text {
     padding-left: 2rem !important;
 
-    .time{
+    .time {
       margin-left: 2rem !important;
     }
   }