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

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

src/views/index/components/academy_and_sciences.vue

@@ -96,7 +96,7 @@
               <el-col :span="11">
                 <div class="academy_content">
                   <div class="academy_content_icontime">
-                    <div class="img"></div>
+                    <div class="img" v-bind:style="{backgroundImage:'url('+bgc+')'}"></div>
                     <span>2022-10-08</span>
                   </div>
                   <div class="academy_content_title">
@@ -108,7 +108,7 @@
                 </div>
                 <div class="academy_content">
                   <div class="academy_content_icontime">
-                    <div class="img"></div>
+                    <div class="img" v-bind:style="{backgroundImage:'url('+bgc+')'}"></div>
                     <span>2022-10-08</span>
                   </div>
                   <div class="academy_content_title">
@@ -125,7 +125,7 @@
               <el-col :span="11">
                 <div class="academy_content">
                   <div class="academy_content_icontime">
-                    <div class="img"></div>
+                    <div class="img" v-bind:style="{backgroundImage:'url('+bgc+')'}"></div>
                     <span>2022-10-08</span>
                   </div>
                   <div class="academy_content_title">

src/views/index/components/announcements.vue

@@ -22,9 +22,9 @@
                 <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_title">信息科学与与技术学院开与技术学院开与技术学院开与技术学院开与技术学院开会</div>
               <div class="announcements_text_content">
-                为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
+                为加强学院学风建设，提升学生英语能力，2021年10月2与技术学院开与技术学院开与技术学院开与技术学院开与技术学院开学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
               </div>
             </div>
           </el-col>
@@ -35,9 +35,9 @@
                 <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_title">信息科学与技术学院开与技术学院开与技术学院开展英语四级备考指导会</div>
               <div class="announcements_text_content">
-                为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
+                为加强学院学风建设，提升学生英语能力，2021年10与技术学院开与技术学院开与技术学院开与技术学院开学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
               </div>
             </div>
           </el-col>
@@ -48,9 +48,9 @@
                 <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_title">信息科学与技与技术学院开与技术学院开与技术学院开级备考指导会</div>
               <div class="announcements_text_content">
-                为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
+                为加强学院学风建设，提升学生英语能力，2021年10月25与技术学院开与技术学院开与技术学院开与技术学院开与技术学院开学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
               </div>
             </div>
           </el-col>
@@ -161,6 +161,11 @@ export default {
       line-height: 1.9rem;
       letter-spacing: .1rem;
       margin-bottom: .6rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 2; //显示的行
     }
 
     &_content {
@@ -171,6 +176,11 @@ export default {
       color: #777777;
       line-height: 1.8rem;
       letter-spacing: .1rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 4; //显示的行
     }
   }
 

src/views/index/components/news_center.vue

@@ -1,12 +1,7 @@
 <script src="../../../utils/sist.js"></script>
 <template>
   <div class="news_center">
-<!--    <el-row>-->
+        <div class="headline">
-<!--      <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,14 +16,9 @@
             <img src="../../../assets/index/news_center/gd_icon.png" alt="">
           </div>
         </div>
-<!--      </el-col>-->
-<!--    </el-row>-->
 
     <!--轮播图下的新闻-->
-<!--    <el-row type="flex" justify="center">-->
+        <div class="news" >
-<!--      <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">
@@ -96,10 +86,7 @@
               </div>
             </el-col>
           </el-row>
-
         </div>
-<!--      </el-col>-->
-<!--    </el-row>-->
 
 
   </div>
@@ -163,6 +150,30 @@ export default {
 </style>
 
 <style scoped lang="scss">
+@media screen and (max-width: 1200px) {
+  .news {
+    width: 100rem!important;
+  }
+  .headline{
+    width: 100rem!important;
+  }
+}
+@media screen and (max-width: 1050px) {
+  .news {
+    width: 90rem!important;
+  }
+  .headline{
+    width: 90rem!important;
+  }
+}
+@media screen and (max-width: 960px) {
+  .news {
+    width: 80rem!important;
+  }
+  .headline{
+    width: 80rem!important;
+  }
+}
 .news_center {
   background-image: url("../../../assets/index/news_center/sy_bj3.png");
   background-size: cover;
@@ -172,9 +183,10 @@ export default {
 
   .headline {
     display: flex;
-    width: 100%;
+    //width: 100%;
     justify-content: space-between;
-
+    width: 115.4rem;
+    margin: 0 auto;
     .title {
       display: flex;
       width: 24rem;
@@ -237,10 +249,11 @@ export default {
 }
 
 .news {
-  //width: 106.3rem;
+  margin: 4rem  auto 0 auto;
+  width: 115.4rem;
   height: 60.4%;
   background-color: #fff;
-  margin-top: 4rem;
+  //margin-top: 4rem;
 
 
   .news_context {
@@ -339,8 +352,6 @@ export default {
   }
 }
 
-@media screen and (min-width: 1100px) and (max-width: 1400px) {
 
-}
 
 </style>

src/views/index/components/party_building_activities.vue

@@ -22,17 +22,11 @@
         <SlideshowCard/>
       </el-col>
     </el-row>
-    <el-row>
+
-      <el-col :span="5">
+    <div class="more">
-        <div class="grid-content"></div>
+      <span class="more_text">更多</span>
-      </el-col>
+      <img src="../../../assets/index/party_building_activities/gangduohh.png" alt="">
-      <el-col :span="14">
+    </div>
-        <div class="more">
-          <span class="more_text">更多</span>
-          <img src="../../../assets/index/party_building_activities/gangduohh.png" alt="">
-        </div>
-      </el-col>
-    </el-row>
 
   </div>
 </template>