Merge pull request 'dengjie commit : 新闻中心部分样式' (#2) from dengjie into master

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

src/views/index/components/news_center.vue

@@ -2,21 +2,28 @@
 <template>
   <div class="news_center">
     <div class="headline">
-      <div class="hr_div">
+      <!--      <div class="hr_div">-->
-        <div class="hr_line_left">
+      <!--        <div class="hr_line_left">-->
-        </div>
+      <!--        </div>-->
-        <div class="hr_dot_left">
+      <!--        <div class="hr_dot_left">-->
-        </div>
+      <!--        </div>-->
-      </div>
+      <!--      </div>-->
       <div class="title">
-        {{ $t('message.news_ceter') }}
+        {{ $t("message.news_ceter") }}
-      </div>
+        <span class="vertica_line"></span>
-      <div class="hr_div">
+        <div class="news_center_english">
-        <div class="hr_line_right">
+          <span class="">NEWS</span>
-        </div>
+          <span class="">CENTER</span>
-        <div class="hr_dot_right">
         </div>
+
       </div>
+
+      <!--      <div class="hr_div">-->
+      <!--        <div class="hr_line_right">-->
+      <!--        </div>-->
+      <!--        <div class="hr_dot_right">-->
+      <!--        </div>-->
+      <!--      </div>-->
     </div>
 
     <!--录播图-->
@@ -53,8 +60,8 @@
     <!--        </div>-->
     <!--      </el-col>-->
     <!--    </el-row>-->
-    <!--轮播图下的新闻-->
 
+    <!--轮播图下的新闻-->
     <el-row>
       <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
         <div class="grid-content"></div>
@@ -82,7 +89,7 @@
       </el-col>
       <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
         <div class="more" @click="lookMore(newsDate[0])">
-          {{ $t('message.more') }}
+          {{ $t("message.more") }}
         </div>
         <!--        <div class="more_img">-->
         <!--          <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
@@ -103,12 +110,12 @@ export default {
     return {
       newsDate: [],
       bannerDate: [],
-      width: document.documentElement.clientWidth > 992,
+      width: document.documentElement.clientWidth > 992
-    }
+    };
   },
   created() {
-    this.getList()
+    this.getList();
-    this.getBanner()
+    this.getBanner();
   },
   methods: {
     clickTo(link) {
@@ -116,10 +123,10 @@ export default {
       window.location.href = link;//当前标签页
     },
     getArticle(news) {
-      toArticle(news,this.width)
+      toArticle(news, this.width);
     },
     lookMore(news) {
-      lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w",this.width)
+      lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w", this.width);
     },
     getList() {
       getArticleList({
@@ -127,17 +134,18 @@ export default {
         pageNum: 1,
         pageSize: 4
       }).then(res => {
-        this.newsDate = res.rows
+        this.newsDate = res.rows;
-      })
+      });
     },
     getBanner() {
       banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
-        this.bannerDate = res.data
+        this.bannerDate = res.data;
-      })
+      });
     }
-  },
   }
+};
 </script>
+
 <style>
 .el-carousel__indicators {
   display: none;
@@ -148,7 +156,51 @@ export default {
 @import '../css/comment.css';
 
 .news_center {
-  padding-bottom: 2rem;
+  //padding-bottom: 2rem;
+  background-image: url("../../../assets/news_center/sy_bj3.png");
+  height: 97.6rem;
+  padding-top: 10rem;
+  padding-left: 10.9rem;
+
+  .headline {
+    width: 41.5rem;
+    height: 9.4rem;
+    border-radius: 20px;
+    background: linear-gradient(240deg, rgba(0, 75, 177, 0) 0%, rgba(6, 79, 175, 0.64) 44%, #0A51AE 100%);
+    padding-top: 1.2rem;
+    padding-left: 3rem;
+
+    .title {
+      display: flex;
+      height: 7rem;
+      line-height: 7rem;
+      font-size: 5rem;
+      font-weight: 500;
+      letter-spacing: .1rem;
+      color: #FFFFFF;
+      text-align: left;
+
+      .vertica_line {
+        width: .1rem;
+        height: 4rem;
+        border: .1rem solid #FFFFFF;
+        margin: 1.5rem 1.4rem;
+      }
+
+      .news_center_english {
+        width: 8.5rem;
+        height: 4.4rem;
+        font-size: 2rem;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 2.2rem;
+
+        span {
+          float: left;
+        }
+      }
+    }
+  }
 }
 
 .slideshow {

src/views/index/css/comment.css

@@ -4,10 +4,10 @@
 * @description：comment
 * @email: clay@hchyun.com
 */
-.headline{
+/*.headline{*/
-  text-align:center;
+/*  text-align:center;*/
-  margin-bottom: 3rem;
+/*  margin-bottom: 3rem;*/
-}
+/*}*/
 
 .hr_line_left{
   float: left;
@@ -56,15 +56,15 @@
   display: inline-block;
   width: 25rem;
 }
-.headline  .title {
+/*.headline  .title {*/
-  display: inline-block;
+/*  display: inline-block;*/
-  padding: 1rem 3.3rem;
+/*  padding: 1rem 3.3rem;*/
-  background: #1956BC;
+/*  background: #1956BC;*/
-  border-radius: 2.95rem;
+/*  border-radius: 2.95rem;*/
-  font-size: 2.6rem;
+/*  font-size: 2.6rem;*/
-  font-weight: 500;
+/*  font-weight: 500;*/
-  color: #FFFFFF;
+/*  color: #FFFFFF;*/
-}
+/*}*/
 
 .divider div {
   float: left;

src/views/index/index.vue

@@ -6,7 +6,7 @@
       </el-col>
     </el-row>
     <el-row>
-      <el-col class="interval">
+      <el-col >
         <NewsCenter/>
       </el-col>
     </el-row>