diff --git a/public/index.html b/public/index.html
index 235a849..7eac829 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,8 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" type="text/css" href="../src/assets/css/loading.css">
-
 </head>
 <body>
 <div id="app"></div>
diff --git a/src/components/hotNews/HotNews.vue b/src/components/hotNews/HotNews.vue
index 500aafa..5cce3ee 100644
--- a/src/components/hotNews/HotNews.vue
+++ b/src/components/hotNews/HotNews.vue
@@ -1,5 +1,7 @@
 <template>
-  <div>
+  <div class="main">
+   <NewsCard></NewsCard>
+   <NewsCard></NewsCard>
    <NewsCard></NewsCard>
   </div>
 </template>
@@ -30,5 +32,10 @@ export default {
 }
 </script>
 <style scoped>
-
+.main{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/hotNews/NewsCard.vue b/src/components/hotNews/NewsCard.vue
index c638042..4cc1c55 100644
--- a/src/components/hotNews/NewsCard.vue
+++ b/src/components/hotNews/NewsCard.vue
@@ -1,52 +1,48 @@
 <template>
   <div class="wrapper">
-    <!-- <p class="wrapper__title">Sass.Weather</p> -->
     <div class="widget">
-      <div class="widget__section thin-bar">
-        <div class="nav">
-          <div class="nav__button nav__button-red">
-            <svg height="30" width="30">
-              <circle cx="18" cy="18" r="7.5" fill="#ff605c"></circle>
-            </svg>
-          </div>
-          <div class="nav__button nav__button-yellow">
-            <svg height="30" width="30">
-              <circle cx="18" cy="18" r="7.5" fill="#ffbf45"></circle>
-            </svg>
-          </div>
-          <div class="nav__button nav__button-green">
-            <svg height="30" width="30">
-              <circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle>
-            </svg>
-            <p class="nav__title">Weather</p>
+      <div>
+        <div class="thin-bar">
+          <div class="nav">
+            <div class="nav__button nav__button-red">
+              <svg height="30" width="30">
+                <circle cx="18" cy="18" r="7.5" fill="#ff605c"></circle>
+              </svg>
+            </div>
+            <div class="nav__button nav__button-yellow">
+              <svg height="30" width="30">
+                <circle cx="18" cy="18" r="7.5" fill="#ffbf45"></circle>
+              </svg>
+            </div>
+            <div class="nav__button nav__button-green">
+              <svg height="30" width="30">
+                <circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle>
+              </svg>
+              <p class="nav__title">Weather</p>
+            </div>
           </div>
         </div>
-        <p class="section__weather hour1">12:15</p>
-        <br>
-        <p class="section__weather city1">Manchester</p>
-        <p class="temp temp1">07° </p>
-        <img src="https://www.dropbox.com/s/p3an409zxe6f7j8/rain.svg?raw=1" alt="rain" class="wthr1">
+        <div class="widget__section">
+          <span class="hot-rank-1">1</span>
+          <span class="news-content"><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
+        </div>
+        <div class="widget__section">
+          <span class="hot-rank-2">2</span>
+          <span class="news-content" ><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
+        </div>
+        <div class="widget__section">
+          <span class="hot-rank-3">3</span>
+          <span class="news-content" ><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
+
+        </div>
+        <div class="widget__section">
+          <span class="hot-rank-4">4</span>
+          <span class="news-content" ><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
+
+        </div>
       </div>
-      <div class="widget__section">
-        <p class="section__weather hour2">13:15</p>
-        <br>
-        <p class="section__weather city2">Stockholm</p>
-        <p class="temp temp2">01° </p>
-        <img src="https://www.dropbox.com/s/xxa77jagd78m9li/snows.svg?raw=1" alt="snow" class="wthr2">
-      </div>
-      <div class="widget__section">
-        <p class="section__weather hour3">21:15</p>
-        <br>
-        <p class="section__weather city3">Osaka</p>
-        <p class="temp temp3">12° </p>
-        <img src="https://www.dropbox.com/s/ckcsvxjafdixsr3/wind.svg?raw=1" alt="wind" class="wthr3">
-      </div>
-      <div class="widget__section" id="no-bar">
-        <p class="section__weather hour4">07:15</p>
-        <br>
-        <p class="section__weather city4">Florida</p>
-        <p class="temp temp4">22°</p>
-        <img src="https://www.dropbox.com/s/cnypl11sq85f44v/sunny.svg?raw=1" alt="sun" class="wthr4">
+      <div style="text-align: end;margin-right: 10px">
+        <i class="refresh el-icon-refresh"></i>
       </div>
     </div>
   </div>
@@ -79,8 +75,9 @@ export default {
 <style scoped>
 .wrapper {
   margin-top: 20px;
-  margin-left: 20px;
-  width: 400px;
+  margin-left: 25px;
+  width: 300px;
+  background: transparent;
 }
 
 .widget,
@@ -91,31 +88,37 @@ export default {
 
 .widget {
   background-color: #fff;
-  border-radius: 1.5rem;
-  box-shadow: 0 0 25px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 1.0rem;
   flex-direction: column;
-  height: 464px;
+  height: 540px;
   margin: auto;
   position: relative;
-  width: 400px;
+  width: 300px;
+  overflow: scroll;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+
 }
 
 .thin-bar {
-  margin-top: 3rem;
+  margin-top: 15px;
+  height: 30px;
 }
 
 .widget__section {
-  border-bottom: 1.5px solid #ddd;
-  height: 8rem;
-  width: 100%;
+  //border-bottom: 1.5px solid #ddd;
+  height: 30px;
+  //width: 100%;
+  align-items: center;
+
 }
 
-#no-bar {
-  border-bottom: none;
-}
+
 
 .nav {
-  height: 2.8rem;
+  height: 0px;
 }
 
 .nav__button {
@@ -141,107 +144,64 @@ export default {
   top: -0.5em;
 }
 
-.nav__title,
-.section__weather,
-.temp {
+.nav__title
+ {
   color: #444;
   position: absolute;
 }
-
-.hour1,
-.hour2,
-.hour3,
-.hour4 {
-  font-size: 1.25rem;
-  left: 0.9em;
+.refresh{
+  //font-weight: bold;
+  font-size: 18px
 }
-
-.hour1 {
-  top: 3.85em;
+.refresh:hover{
+ font-size: 20px;
+  color: #999ba5;
 }
-
-.hour2 {
-  top: 9.15em;
+.hot-rank-1 {
+  color: #fff;
+  background: #f1404b;
+  border-radius: 4px;
+  display: inline-block;
+  text-align: center;
 }
+.hot-rank-2 {
+  color: #fff;
+  background: #c56831;
 
-.hour3 {
-  top: 14.35em;
+  border-radius: 4px;
+  display: inline-block;
+  text-align: center;
 }
+.hot-rank-3 {
+  color: #fff;
+  background: #b89e2c;
 
-.hour4 {
-  top: 19.5em;
+  border-radius: 4px;
+  display: inline-block;
+  text-align: center;
 }
+.hot-rank-4 {
+  color: #fff;
+  background: rgba(124,124,124,.3);
 
-.city1,
-.city2,
-.city3,
-.city4 {
-  font-size: 1.75rem;
-  left: 0.65em;
+  border-radius: 4px;
+  display: inline-block;
+  text-align: center;
 }
-
-.city1 {
-  top: 1.4em;
+.hot-rank-1 ,.hot-rank-2, .hot-rank-3, .hot-rank-4{
+  margin-left: 15px;
+  width: 30px;
+  height: 20px;
 }
-
-.city2 {
-  top: 5.2em;
+.news-content{
+  margin-left:10px;
+  height: 20px;
+  overflow: scroll;
+  cursor: pointer;
 }
-
-.city3 {
-  top: 8.9em;
-}
-
-.city4 {
-  top: 12.6em;
-}
-
-.wthr1,
-.wthr2,
-.wthr3,
-.wthr4 {
-  position: absolute;
-  right: 2rem;
-}
-
-.wthr1 {
-  top: 4.7rem;
-  width: 3rem;
-}
-
-.wthr2 {
-  top: 11.25rem;
-  width: 2.65rem;
-}
-
-.wthr3 {
-  top: 17.8rem;
-  width: 2.8rem;
-}
-
-.wthr4 {
-  top: 24.2rem;
-  width: 2.8rem;
-}
-
-.temp {
-  font-size: 2.6rem;
-  right: 2.1em;
-}
-
-.temp1 {
-  top: 0.7em;
-}
-
-.temp2 {
-  top: 3.3em;
-}
-
-.temp3 {
-  bottom: 2.2em;
-}
-
-.temp4 {
-  bottom: -0.25em;
+a:hover{
+  color: coral;
+  font-size: 16px;
+  font-weight: bold;
 }
 </style>
\ No newline at end of file
