样式调整

src/layout/components/Navbar.vue

 <template>
-<!--  <div class="navbar">-->
+  <div class="navbar">
 
-<!--    <breadcrumb class="breadcrumb-container" />-->
+    <breadcrumb class="breadcrumb-container" />
 
-<!--  </div>-->
+  </div>
 </template>
 
 <script>
@@ -46,7 +46,7 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  //background: #fff;
   //box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   margin: 0 14px;
 

src/views/homePage/components/searchHome/index.vue

@@ -35,6 +35,7 @@ export default {
 
 <style lang="scss" scoped>
 .HomeSearch {
+  padding-top: 72px;
   width: 100%;
   height: 881px;
   ::v-deep .el-carousel__container{

src/views/news/details.vue

@@ -54,6 +54,7 @@ export default {
 
 <style lang="scss" scoped>
 .newsDetails_module{
+  padding-top: 72px;
   width: 1920px;
   height: 2390px;
   background: #f5f9fd;

src/views/news/index.vue

@@ -2,30 +2,37 @@
   <div>
     <nav-list :list="navList" />
     <div class="news_module">
-      <div class="newsList">
-        <div
-          v-for="(item,index) in newsList"
-          :key="index"
-        >
-          <div class="dataList" @click="handleJumpDetails">
-            <div>
-              <img class="newsImg" :src="item.img">
-            </div>
-            <div class="news_content">
-              <div :title="item.title" class="newsTitle">{{ item.title }}</div>
-              <div :title="item.info" class="newsInfo">{{ item.info }}</div>
-              <div class="newsDate">{{ item.date }}</div>
+      <div class="news_navbar">
+        <div class="navbar_title">首页</div>
+        <div class="navbar_icon">></div>
+        <div class="navbar_activeTitle">新闻资讯</div>
+      </div>
+      <div class="newsList_content">
+        <div class="newsList">
+          <div
+            v-for="(item,index) in newsList"
+            :key="index"
+          >
+            <div class="dataList" @click="handleJumpDetails">
+              <div>
+                <img class="newsImg" :src="item.img">
+              </div>
+              <div class="news_content">
+                <div :title="item.title" class="newsTitle">{{ item.title }}</div>
+                <div :title="item.info" class="newsInfo">{{ item.info }}</div>
+                <div class="newsDate">{{ item.date }}</div>
+              </div>
             </div>
+            <div class="newsRow_divider"><el-divider /></div>
           </div>
-          <div class="newsRow_divider"><el-divider /></div>
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.page"
+            :limit.sync="queryParams.rows"
+            @pagination="getList"
+          />
         </div>
-        <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.page"
-          :limit.sync="queryParams.rows"
-          @pagination="getList"
-        />
       </div>
     </div>
   </div>
@@ -36,7 +43,7 @@ import NavList from '@/views/homePage/components/NavList/index'
 export default {
   name: 'Index',
   components: {
-    NavList
+    NavList,
   },
   data() {
     return {
@@ -105,11 +112,10 @@ export default {
 
 <style scoped lang="scss">
 .news_module{
+  margin: 72px 0 0 0;
   width: 1920px;
   height: 3014px;
   background: #f5f9fd;
-  display: flex;
-  justify-content: center;
   ::v-deep .el-pagination{
     display: flex;
     justify-content: center;
@@ -117,70 +123,97 @@ export default {
   .pagination-container{
     padding: 38px 0 76px 0;
   }
-  .newsList{
-    padding: 64px 0 0 48px;
-    margin: 69px 0 0 0;
-    width: 1200px;
-    height: 2805px;
-    background: #ffffff;
-    border-radius: 2px;
-    box-shadow: -2px 0px 10px 2px rgba(0,0,0,0.04);
-    .dataList{
-      cursor: pointer;
-      display: flex;
-      .newsImg{
-        width: 274px;
-        height: 154px;
-      }
-      .news_content{
-        padding-left: 46px;
-        .newsTitle{
-          overflow: hidden;
-          text-overflow: ellipsis;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          word-break: break-all;//数字和字母换行隐藏不生效时加上这行
-          white-space: nowrap;// div不换行属性
-          margin-bottom: 15px;
-          width: 606px;
-          font-size: 20px;
-          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
-          font-weight: 700;
-          text-align: left;
-          color: #232323;
+  .news_navbar{
+    padding: 24px 0 24px 385px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-family: Source Han Sans CN, Source Han Sans CN-400;
+    font-weight: 400;
+    color: #292929;
+    .navbar_icon{
+      position: relative;
+      bottom: 2px;
+      padding: 0 15px;
+    }
+    .navbar_activeTitle{
+      color: #3888FC;
+    }
+  }
+  .newsList_content{
+    display: flex;
+    justify-content: center;
+    .newsList{
+      padding: 64px 0 0 48px;
+      width: 1200px;
+      height: 2805px;
+      background: #ffffff;
+      border-radius: 2px;
+      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
+      .dataList{
+        cursor: pointer;
+        display: flex;
+        .newsImg{
+          width: 274px;
+          height: 154px;
         }
-        .newsInfo{
-          display: -webkit-box;
-          -webkit-line-clamp: 3; /* 限制在三行 */
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          height: 84px; /* 行高（line-height）乘以行数 */
-          line-height: 28px;
-          word-break: break-all;//数字和字母换行隐藏不生效时加上这行
-          margin-bottom: 19px;
-          width: 778px;
-          font-size: 16px;
-          font-family: SourceHanSansCN, SourceHanSansCN-Regular;
-          font-weight: 400;
-          text-align: left;
-          color: #232323;
+        .news_content{
+          padding-left: 46px;
+          .newsTitle{
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            word-break: break-all;//数字和字母换行隐藏不生效时加上这行
+            white-space: nowrap;// div不换行属性
+            margin-bottom: 15px;
+            width: 606px;
+            font-size: 20px;
+            font-family: Source Han Sans CN, Source Han Sans CN-Bold;
+            font-weight: 700;
+            text-align: left;
+            color: #232323;
+          }
+          .newsTitle:hover{
+            color: #3888fc;
+            cursor: pointer;
+          }
+          .newsInfo{
+            display: -webkit-box;
+            -webkit-line-clamp: 3; /* 限制在三行 */
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            height: 84px; /* 行高（line-height）乘以行数 */
+            line-height: 28px;
+            word-break: break-all;//数字和字母换行隐藏不生效时加上这行
+            margin-bottom: 19px;
+            width: 778px;
+            font-size: 16px;
+            font-family: SourceHanSansCN, SourceHanSansCN-Regular;
+            font-weight: 400;
+            text-align: left;
+            color: #232323;
+          }
+          .newsDate{
+            font-size: 14px;
+            font-family: SourceHanSansCN, SourceHanSansCN-Regular;
+            font-weight: 400;
+            text-align: left;
+            color: #6f6f6f;
+          }
         }
-        .newsDate{
-          font-size: 14px;
-          font-family: SourceHanSansCN, SourceHanSansCN-Regular;
-          font-weight: 400;
-          text-align: left;
-          color: #6f6f6f;
+      }
+      .newsRow_divider{
+        .el-divider--horizontal{
+          width: 1100px;
+          height: 2px;
+          background: #f5f9fd;
+          margin: 50px 0;
         }
       }
-    }
-    .newsRow_divider{
-      .el-divider--horizontal{
-        width: 1100px;
-        height: 2px;
-        background: #f5f9fd;
-        margin: 50px 0;
+      .news_pagination{
+
       }
     }
   }