科学研究

src/views/index/index.vue

@@ -976,7 +976,7 @@ export default {
     padding-top: 4rem;
     padding-bottom: 1rem;
     width: 100%;
-    background-image: url("../../assets/index/sy_bj2.png");
+    background-image: url("../../assets/index/scientific_research_trends/sy_bj2.png");
 
     .first {
       padding-top: 1rem;

src/views/shouye/components/news_center.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="news_center">
+    <!--title-->
     <el-row>
-      <el-col class="headline" :offset="6" :span="12">
+      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
         <div class="title">
           {{ $t('message.news_center') }}
         </div>
@@ -64,17 +68,53 @@
             </div>
           </el-col>
           <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
-            <div class="news_context"></div>
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="@/assets/index/news_center/t3.png" alt="">
+              </div>
+              <div class="news_context_text">
+                “学党史 担使命”一班一品牌，班班展风采——信息科学与技术学院2020-2021…
+              </div>
+            </div>
           </el-col>
           <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
-            <div class="news_context"></div>
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="@/assets/index/news_center/t4.png" alt="">
+              </div>
+              <div class="news_context_text">
+                西南交大第十届青年教师教学竞赛信息学院初赛顺利举行
+              </div>
+            </div>
           </el-col>
           <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
-            <div class="news_context"></div>
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="@/assets/index/news_center/t5.png" alt="">
+              </div>
+              <div class="news_context_text">
+                “奋斗青春 梦想起航” 西南交通大学信息科学与技术学院2021级新生开学典礼
+              </div>
+            </div>
           </el-col>
         </el-row>
       </el-col>
     </el-row>
+
+    <!--更多-->
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
+        <div class="more">
+          {{ $t('message.more') }}
+        </div>
+        <div class="more_img">
+          <img src="@/assets/index/sy_icon_zhdl.png" alt="">
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -86,6 +126,9 @@ export default {
 
 <style scoped lang="scss">
 @import '../css/comment.css';
+.news_center{
+  padding-bottom: 2rem;
+}
 
 .slideshow {
   width: 100%;
@@ -117,22 +160,26 @@ export default {
 
 .news {
 
-  .news_context:hover{
+  .news_context:hover {
     box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
   }
+
   .news_context {
     width: 23rem;
     height: 23rem;
     margin: 3rem auto;
     border-radius: 1.4rem;
     border: 0.1rem solid #CAD9F3;
-    .news_context_img{
+
+    .news_context_img {
       height: 14rem;
-      img{
+
+      img {
         width: 100%;
       }
     }
-    .news_context_text{
+
+    .news_context_text {
       font-size: 1.6rem;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;

src/views/shouye/components/scientific_research_trends.vue

@@ -1,5 +1,299 @@
 <template>
+  <div class="scientific_research_trends">
+    <!--title-->
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
+        <div class="title">
+          <!--          {{ $t('message.news_center') }}-->
+          科学研究
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-divider></el-divider>
+          </el-col>
+          <el-col :span="8">
+            <div class="divider_text">Scientific research trends</div>
+          </el-col>
+          <el-col :span="8">
+            <el-divider></el-divider>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <!--科学研究新闻内容-->
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col class="scientific_context" :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
+        <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_bh1.png" alt="">
+              </el-col>
+              <el-col :span="16" class="text">科研院关于组织申报国家重点研发计划</el-col>
+              <el-col :span="4">
+                <div class="time">2021.10.10</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_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>
+          </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>
 
+    <!--更多-->
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
+        <div style="background: #FFFFFF;color: #1956BC;" class="more">
+          {{ $t('message.more') }}
+        </div>
+        <el-row>
+          <el-col :span="9">
+            <el-divider></el-divider>
+          </el-col>
+          <el-col :span="6">
+            <div class="divider_text">学术交流</div>
+          </el-col>
+          <el-col :span="9">
+            <el-divider></el-divider>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <!--学术交流-->
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col class="academia_context" :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
+        <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 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 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="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>
+    <!--更多-->
+
+    <!--更多-->
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
+        <div style="background: #FFFFFF;color: #1956BC;"  class="more">
+          {{ $t('message.more') }}
+        </div>
+        <div class="more_img">
+          <img src="@/assets/index/scientific_research_trends/sy_icon_zhdb.png" alt="">
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
@@ -8,6 +302,103 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '../css/comment.css';
+
+.scientific_research_trends {
+  background-image: url("../../../assets/index/scientific_research_trends/sy_bj2.png");
+  padding-top: 4rem;
+}
+
+.headline {
+  .title {
+    background: #FFFFFF;
+    color: #1956BC;
+  }
+
+  .divider_text {
+    font-size: 2rem;
+    font-weight: 500;
+    color: #FFFFFF;
+  }
+
+}
+
+.scientific_context {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 2.4rem;
+  padding: 2rem 0;
+
+  .scientific_context_text {
+    margin-top: 2rem;
+    color: #1956BC;
+    padding-left: 4rem;
+
+    .img {
+      width: 8.33333%;
+    }
+
+    .text {
+      margin-left: 1rem;
+      font-size: 1.8rem;
+      font-weight: 500;
+    }
+
+    .time {
+      text-align: center;
+      font-size: 1.2rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      width: 7.2rem;
+      height: 2.2rem;
+      line-height: 2.2rem;
+      border-radius: 1.1rem;
+      border: 0.1rem solid #1956BC;
+      margin-left: 3rem;
+    }
+  }
+
+  .scientific_context_divider {
+    padding-left: 4rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+}
+
+.academia_context {
+  background: rgba(255, 255, 255, 0.9);
+  padding: 2rem 0;
+
+  .academia_context_divider {
+    padding-left: 4rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .academia_context_text {
+    margin-top: 2rem;
+    color: #1956BC;
+    padding-left: 4rem;
+
+
+    .img {
+      width: 8.33333%;
+    }
+
+    .text {
+      margin-left: 1rem;
+      font-size: 1.8rem;
+      font-weight: 500;
+    }
+
+    .time {
+      font-size: 1.2rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1956BC;
+      line-height: 2.4rem;
+    }
+  }
+}
 
 </style>

src/views/shouye/css/comment.css

@@ -27,3 +27,25 @@
   line-height: 5rem;
 }
 
+.more{
+  width: 12.8rem;
+  height: 3.6rem;
+  background: #1956BC;
+  border-radius: 1.8rem;
+  font-size: 1.4rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  text-align: center;
+  margin: 2rem auto;
+  line-height: 3.6rem;
+  color: #FFFFFF;
+}
+.more_img {
+  text-align: center;
+  margin-top: 2rem;
+  font-size: 2rem;
+}
+.more_img img{
+  font-size: small;
+}
+

src/views/shouye/index.vue

@@ -15,7 +15,7 @@
     </el-row>
     <el-row>
       <el-col>
-
+        <ResearchTrends/>
       </el-col>
     </el-row>
   </div>