clay commit : 新闻中心第一阶段调整完毕

src/views/index/components/news_center.vue

@@ -1,12 +1,12 @@
 <script src="../../../utils/sist.js"></script>
 <template>
   <div class="news_center">
-    <el-row>
-      <el-col :span="5">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col :span="14">
-        <div class="headline">
+<!--    <el-row>-->
+<!--      <el-col :span="4">-->
+<!--        <div class="grid-content"></div>-->
+<!--      </el-col>-->
+<!--      <el-col :span="16">-->
+        <div class="headline"  style="margin: 0 auto; width: 115.4rem;">
           <div class="title">
             <!--        {{ $t("message.news_ceter") }}-->
             新闻中心
@@ -21,87 +21,85 @@
             <img src="../../../assets/index/news_center/gd_icon.png" alt="">
           </div>
         </div>
-      </el-col>
-    </el-row>
+<!--      </el-col>-->
+<!--    </el-row>-->
 
     <!--轮播图下的新闻-->
-    <el-row>
-      <el-col :span="5">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col :span="14" class="news">
-        <el-row>
-          <el-col :span="6">
-            <div class="news_context">
-              <div class="news_context_img">
-                <img src="../../../assets/index/news_center/t4.png" alt="">
-              </div>
-              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
-                <div class="news_context_text-title">信息引领，勇于拼领，勇于拼搏—信息搏…</div>
-                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+<!--    <el-row type="flex" justify="center">-->
+<!--      <el-col :xs="22" :sm="22" :md="18" :lg="16" :xl="16" class="news">-->
+        <div class="news" style="margin: 0 auto; width: 115.4rem;">
+
+          <el-row>
+            <el-col :span="6">
+              <div class="news_context">
+                <div class="news_context_img">
+                  <img src="../../../assets/index/news_center/t4.png" alt="">
                 </div>
-                <div class="news_context_time">
-                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
-                  <span class="time">2022-10-2</span>
+                <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
+                  <div class="news_context_text-title">信息引领，勇于拼领，勇于拼搏—信息搏…</div>
+                  <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                  </div>
+                  <div class="news_context_time">
+                    <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                    <span class="time">2022-10-2</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="news_context">
-              <div class="news_context_img">
-                <img src="../../../assets/index/news_center/t4.png" alt="">
-              </div>
-              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
-                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
-                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+            </el-col>
+            <el-col :span="6">
+              <div class="news_context">
+                <div class="news_context_img">
+                  <img src="../../../assets/index/news_center/t4.png" alt="">
                 </div>
-                <div class="news_context_time">
-                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
-                  <span class="time">2022-10-2</span>
+                <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
+                  <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
+                  <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                  </div>
+                  <div class="news_context_time">
+                    <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                    <span class="time">2022-10-2</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="news_context">
-              <div class="news_context_img">
-                <img src="../../../assets/index/news_center/t4.png" alt="">
-              </div>
-              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
-                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
-                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+            </el-col>
+            <el-col :span="6">
+              <div class="news_context">
+                <div class="news_context_img">
+                  <img src="../../../assets/index/news_center/t4.png" alt="">
                 </div>
-                <div class="news_context_time">
-                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
-                  <span class="time">2022-10-2</span>
+                <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
+                  <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
+                  <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                  </div>
+                  <div class="news_context_time">
+                    <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                    <span class="time">2022-10-2</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <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 class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
-                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+            </el-col>
+            <el-col :span="6">
+              <div class="news_context">
+                <div class="news_context_img">
+                  <img src="../../../assets/index/news_center/t4.png" alt="">
                 </div>
-                <div class="news_context_time">
-                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
-                  <span class="time">2022-10-2</span>
+                <div class="news_context_text">
+                  <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
+                  <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                  </div>
+                  <div class="news_context_time">
+                    <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                    <span class="time">2022-10-2</span>
+                  </div>
+                  <div class="vline"></div>
                 </div>
-                <div class="vline"></div>
               </div>
-            </div>
-          </el-col>
-        </el-row>
-      </el-col>
-      <el-col :span="5">
-        <div class="grid-content"></div>
-      </el-col>
-    </el-row>
+            </el-col>
+          </el-row>
+
+        </div>
+<!--      </el-col>-->
+<!--    </el-row>-->
 
 
   </div>
@@ -341,15 +339,8 @@ export default {
   }
 }
 
-//@media screen and (min-width: 1100px) and (max-width: 1400px) {
-//  .news_context {
-//    width: 20rem !important;
-//    height: 20rem !important;
-//
-//    .news_context_img {
-//      height: 12.5rem !important;
-//    }
-//  }
-//}
+@media screen and (min-width: 1100px) and (max-width: 1400px) {
+
+}
 
 </style>

src/views/index/components/news_center_new.vue

@@ -0,0 +1,349 @@
+<script src="../../../utils/sist.js"></script>
+<template>
+  <div class="news_center">
+    <el-row>
+      <el-col :span="5">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col :span="14">
+        <div class="headline">
+          <div class="title">
+            <!--        {{ $t("message.news_ceter") }}-->
+            新闻中心
+            <span class="vertica_line"></span>
+            <div class="news_center_english">
+              <span class="">NEWS</span>
+              <span class="">CENTER</span>
+            </div>
+          </div>
+          <div class="more">
+            <span class="more_text">更多</span>
+            <img src="../../../assets/index/news_center/gd_icon.png" alt="">
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!--轮播图下的新闻-->
+    <el-row type="flex" justify="center">
+      <el-col :xs="22" :sm="22" :md="18" :lg="14" :xl="14" class="news">
+        <el-row>
+          <el-col :span="6">
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="../../../assets/index/news_center/t4.png" alt="">
+              </div>
+              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
+                <div class="news_context_text-title">信息引领，勇于拼领，勇于拼搏—信息搏…</div>
+                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                </div>
+                <div class="news_context_time">
+                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                  <span class="time">2022-10-2</span>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="../../../assets/index/news_center/t4.png" alt="">
+              </div>
+              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
+                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
+                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                </div>
+                <div class="news_context_time">
+                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                  <span class="time">2022-10-2</span>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="../../../assets/index/news_center/t4.png" alt="">
+              </div>
+              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
+                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
+                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                </div>
+                <div class="news_context_time">
+                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                  <span class="time">2022-10-2</span>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <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 class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
+                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                </div>
+                <div class="news_context_time">
+                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                  <span class="time">2022-10-2</span>
+                </div>
+                <div class="vline"></div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+
+
+  </div>
+</template>
+
+<script>
+import {banner, getArticleList} from "@/api";
+import {toArticle, lookMoreComment} from "@/utils/sist";
+import {lookMoreFixedComment} from "../../../utils/sist";
+
+export default {
+  name: "news_center",
+  data() {
+    return {
+      newsDate: [],
+      bannerDate: [],
+      width: document.documentElement.clientWidth > 992
+    };
+  },
+  created() {
+    this.getList();
+    this.getBanner();
+  },
+  methods: {
+    clickTo(link) {
+      //console.log(link)
+      window.location.href = link;//当前标签页
+    },
+    getArticle(news) {
+      toArticle(news, this.width);
+    },
+    lookMore(news) {
+      lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w", this.width);
+    },
+    getList() {
+      getArticleList({
+        type: "NEd5n92EMIpyyBslaNqsRgE",
+        pageNum: 1,
+        pageSize: 4
+      }).then(res => {
+        this.newsDate = res.rows;
+      });
+    },
+    getBanner() {
+      banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
+        this.bannerDate = res.data;
+      });
+    }
+  }
+};
+</script>
+
+<style>
+.el-carousel__indicators {
+  display: none;
+}
+
+.grid-content {
+  height: 1px !important;
+}
+</style>
+
+<style scoped lang="scss">
+.news_center {
+  background-image: url("../../../assets/index/news_center/sy_bj3.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  //width: 100%;
+  height: 61rem;
+
+  .headline {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    .title {
+      display: flex;
+      width: 24rem;
+      height: 5.9rem;
+      line-height: 5.9rem;
+      border-radius: 1.3rem 0 0 1.3rem;
+      font-size: 3rem;
+      font-weight: 500;
+      letter-spacing: .1rem;
+      color: #FFFFFF;
+      text-align: left;
+      background: linear-gradient(240deg, rgba(0, 75, 177, 0) 0%, rgba(6, 79, 175, 0.64) 44%, #0A51AE 100%);
+      padding-left: 1.9rem;
+      margin-top: 6.3rem;
+
+      .vertica_line {
+        width: .1rem;
+        height: 2.5rem;
+        border: .1rem solid #FFFFFF;
+        margin: 1.7rem 1.4rem;
+      }
+
+      .news_center_english {
+        width: 5.3rem;
+        height: 2.8rem;
+        font-size: 1.3rem;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 1.4rem;
+        margin-top: 1.6rem;
+
+        span {
+          float: left;
+        }
+      }
+    }
+  }
+
+  .more {
+    display: flex;
+    height: 3.7rem;
+    margin-top: 9.8rem;
+    cursor: pointer;
+
+    .more_text {
+      font-size: 1.6rem;
+      font-weight: 500;
+      color: #8B8B8B;
+      line-height: 2.3rem;
+      letter-spacing: .2rem;
+    }
+
+    img {
+      width: 2.9rem;
+      height: 1.4rem;
+      margin-left: 0.8rem;
+      margin-top: .5rem;
+    }
+  }
+}
+
+.news {
+  //width: 106.3rem;
+  height: 60.4%;
+  background-color: #fff;
+  margin-top: 4rem;
+
+
+  .news_context {
+    cursor: pointer;
+    //width: 28rem;
+    width: 100%;
+    height: 36.9rem;
+
+    &:hover {
+      box-shadow: 0 0 0.7rem 0 rgba(18, 69, 155, 0.59);
+    }
+
+    .news_context_img {
+
+      height: 42.8%;
+      width: 100%;
+      overflow: hidden;
+
+      img {
+        &:hover {
+          transform: scale(1.3);
+        }
+
+        width: 100%;
+        transition: all 1s;
+      }
+    }
+
+    //.news_context_text-title:last-child{
+    //  border-right: 1px solid red;
+    //}
+
+    .news_context_text {
+      margin: 4rem 0 4rem 2rem;
+      padding-right: 2rem;
+      //border-right: 1px solid #CCCCCC;
+      .news_context_text-title {
+        &:hover {
+          color: #0040A4;
+        }
+
+        width: 100%;
+        height: 2.1rem;
+        font-size: 1.5rem;
+        font-weight: 500;
+        color: #262626;
+        line-height: 2.1rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 1; //显示的行
+      }
+
+      .news_context_text-content {
+
+        width: 100%;
+        height: 5.3rem;
+        font-size: 1.3rem;
+        font-weight: 500;
+        color: #777777;
+        line-height: 1.8rem;
+        letter-spacing: .1rem;
+        margin-top: 1.6rem;
+        margin-bottom: 2.5rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 3; //显示的行
+      }
+
+      .news_context_time {
+        display: flex;
+
+        .icon {
+          margin-right: .4rem;
+
+          img {
+            width: 1.1rem;
+            height: 1.1rem;
+          }
+        }
+
+        .time {
+          width: 6rem;
+          height: 1.4rem;
+          font-size: 1rem;
+          font-weight: 500;
+          color: #0040A4;
+          line-height: 1.4rem;
+        }
+      }
+
+    }
+  }
+}
+
+//@media screen and (min-width: 1100px) and (max-width: 1400px) {
+//  .news_context {
+//    width: 20rem !important;
+//    height: 20rem !important;
+//
+//    .news_context_img {
+//      height: 12.5rem !important;
+//    }
+//  }
+//}
+
+</style>