Merge pull request 'dengjie commit : 通知公告区修改样式' (#8) from dengjie into master

Reviewed-on: http://git.hchyun.com/feashow/sist_web/pulls/8

src/views/index/components/announcements.vue

@@ -1,15 +1,215 @@
 <template>
-<div>
+  <div class="announcements">
-  通知公告
+    <el-row>
-</div>
+      <el-col :span="5">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col :span="14">
+        <div class="headline">
+          <div class="line_left">
+            <img src="../../../assets/index/announcements/gang1.png" alt="">
+          </div>
+          <div class="title">
+            通知公告
+          </div>
+          <div class="line_right">
+            <img src="../../../assets/index/announcements/gang2.png" alt="">
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="5">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col :span="14">
+        <el-row justify="space-between">
+          <el-col :span="7">
+            <div class="announcements_text">
+              <div class="announcements_text_line_time">
+                <div class="announcements_text_line_time_btime">27</div>
+                <div class="announcements_text_line_time_stime">2022-09</div>
+              </div>
+              <div class="announcements_text_line"></div>
+              <div class="announcements_text_title">信息科学与技术学院开展英语四级备考指导会</div>
+              <div class="announcements_text_content">
+                为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="1">
+            <div class="grid-content"></div>
+          </el-col>
+          <el-col :span="7">
+            <div class="announcements_text">
+              <div class="announcements_text_line_time">
+                <div class="announcements_text_line_time_btime">27</div>
+                <div class="announcements_text_line_time_stime">2022-09</div>
+              </div>
+              <div class="announcements_text_line"></div>
+              <div class="announcements_text_title">信息科学与技术学院开展英语四级备考指导会</div>
+              <div class="announcements_text_content">
+                为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="1">
+            <div class="grid-content"></div>
+          </el-col>
+          <el-col :span="7">
+            <div class="announcements_text">
+              <div class="announcements_text_line_time">
+                <div class="announcements_text_line_time_btime">27</div>
+                <div class="announcements_text_line_time_stime">2022-09</div>
+              </div>
+              <div class="announcements_text_line"></div>
+              <div class="announcements_text_title">信息科学与技术学院开展英语四级备考指导会</div>
+              <div class="announcements_text_content">
+                为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
+              </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">
+        <div class="more">
+          <span class="more_text">更多</span>
+          <img src="../../../assets/index/news_center/gd_icon.png" alt="">
+        </div>
+      </el-col>
+    </el-row>
+
+  </div>
 </template>
 
 <script>
 export default {
   name: "announcements"
-}
+};
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+/deep/ .el-col-1 {
+  width: 6.25%;
+}
+
+.announcements {
+  background-image: url("../../../assets/index/announcements/sy_bj3.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 54.2rem;
+
+  .headline {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 6.3rem;
+    padding-bottom: 5.6rem;
+
+    .line_left {
+      line-height: 4.4rem;
+    }
+
+    .title {
+      width: 12.9rem;
+      height: 4.4rem;
+      font-size: 3.1rem;
+      font-weight: 500;
+      color: #0049AE;
+      letter-spacing: .1rem;
+      margin: 0 1.3rem;
+    }
+
+    .line_right {
+      line-height: 4.4rem;
+    }
+  }
+
+  .announcements_text {
+    &:hover {
+      box-shadow: 0px 8px 11px 0px rgba(0, 73, 174, 0.5);
+    }
+
+    //width: 30.4%;
+    //height: 26.3rem;
+    background: #FFFFFF;
+    border-radius: 1.3rem;
+    padding: 3.9rem 3.3rem;
+
+    &_line_time {
+      display: flex;
+
+      &_btime {
+        height: 4.1rem;
+        font-size: 3.1rem;
+        font-weight: bold;
+        color: #0049AE;
+        letter-spacing: .1rem;
+      }
+
+      &_stime {
+        font-size: 1.3rem;
+        font-weight: 500;
+        color: #0049AE;
+        margin-top: 1.5em;
+        line-height: 1.8rem;
+      }
+    }
+
+    &_line{
+      //width: 216px;
+      width: 100%;
+      height: .2rem;
+      background: linear-gradient(240deg, rgba(0,77,175,0) 0%, rgba(0,77,174,0.67) 47%, #004DAE 100%);
+      margin-bottom: 2.3rem;
+    }
+    &_title{
+      width: 100%;
+      height: 3.8rem;
+      font-size: 1.4rem;
+      font-weight: 500;
+      color: #0049AF;
+      line-height: 1.9rem;
+      letter-spacing: .1rem;
+      margin-bottom: .6rem;
+    }
+    &_content{
+      width: 100%;
+      height: 7rem;
+      font-size: 1rem;
+      font-weight: 500;
+      color: #777777;
+      line-height: 1.8rem;
+      letter-spacing: .1rem;
+    }
+  }
+  .more {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    height: 2.3rem;
+    margin-top: 3.1rem;
+    .more_text {
+      font-size: 1.6rem;
+      font-weight: 500;
+      color: #8B8B8B;
+      letter-spacing: .2rem;
+    }
+
+    img {
+      width: 2.9rem;
+      height: 1.4rem;
+      margin-left: 0.8rem;
+      margin-top: .5rem;
+    }
+  }
+}
 
 </style>

src/views/index/components/news_center.vue

@@ -171,9 +171,11 @@ export default {
 </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 {
@@ -241,37 +243,28 @@ export default {
   }
 }
 
-.vline:last-child {
-  border: none;
-}
-
 .news {
   //width: 106.3rem;
-  height: 36.9rem;
+  height: 60.4%;
   background-color: #fff;
   margin-top: 4rem;
 
-  .news_context:hover {
+  //.news_context:last-child {
-    box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
+  //  .news_context_text {
-  }
+  //    .vline {
-
+  //      //border-right: none;
-
+  //    }
-  .news_context:last-child {
+  //  }
-
+  //}
-    .news_context_text {
-
-      .vline {
-        border: none !important;
-      }
-    }
-  }
 
   .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%;
@@ -289,6 +282,7 @@ export default {
         height: 14rem;
         border-right: 1px solid #CCCCCC;
         //padding-right: 1rem;
+
         .news_context_text-title {
           width: 23.8rem;
           height: 2.1rem;

src/views/index/index.vue

@@ -10,32 +10,38 @@
         <NewsCenter/>
       </el-col>
     </el-row>
-    <el-row>
+<el-row>
-      <el-col>
+  <el-col>
-        <ResearchTrends/>
+    <Announcements/>
-      </el-col>
+  </el-col>
-    </el-row>
+</el-row>
-    <el-row v-if="$i18n.locale  === 'cn'">
+<!--    <el-row>-->
-      <el-col>
+<!--      <el-col>-->
-        <PartyBuildingActivities/>
+<!--        <ResearchTrends/>-->
-      </el-col>
+<!--      </el-col>-->
-    </el-row>
+<!--    </el-row>-->
-    <el-row>
+<!--    <el-row v-if="$i18n.locale  === 'cn'">-->
-      <el-col>
+<!--      <el-col>-->
-        <TeachingStudent/>
+<!--        <PartyBuildingActivities/>-->
-      </el-col>
+<!--      </el-col>-->
-    </el-row>
+<!--    </el-row>-->
-    <el-row v-show="width>=1100">
+<!--    <el-row>-->
-      <el-col>
+<!--      <el-col>-->
-        <Bottom/>
+<!--        <TeachingStudent/>-->
-      </el-col>
+<!--      </el-col>-->
-    </el-row>
+<!--    </el-row>-->
+<!--    <el-row v-show="width>=1100">-->
+<!--      <el-col>-->
+<!--        <Bottom/>-->
+<!--      </el-col>-->
+<!--    </el-row>-->
   </div>
 </template>
 
 <script>
 import NewsCenter from './components/news_center'
 import Carousel from './components/carousel'
+import Announcements from "./components/announcements";
 import PartyBuildingActivities from './components/party_building_activities.vue'
 import ResearchTrends from './components/scientific_research_trends.vue'
 import SlideshowCard from './components/slideshow_card.vue'
@@ -44,9 +50,11 @@ import Bottom from './components/bottom.vue'
 import {getConfig} from "@/api";
 import {setAppLanguage, setLanguage} from "@/utils/sist";
 
+
 export default {
   name: "index",
   components: {
+    Announcements,
     NewsCenter,
     PartyBuildingActivities,
     ResearchTrends,