样式

src/assets/styles/portal.scss

@@ -399,6 +399,13 @@ body {margin: 0px;padding: 0px;}
     .list {
       grid-template-columns: repeat(4, 255px);
     }
+    .noticeImg{
+      height: 110px;
+    }
+    .toolImg{
+      width: 80px;
+      height: 80px;
+    }
   }
   .home-page-right{
     width: 330px;
@@ -477,6 +484,9 @@ body {margin: 0px;padding: 0px;}
     .list {
       grid-template-columns: repeat(4, 332px);
     }
+    .noticeImg{
+      height: 120px;
+    }
     .liList{
       margin-top: 10px;
     }
@@ -526,6 +536,9 @@ body {margin: 0px;padding: 0px;}
     .list {
       grid-template-columns: repeat(4, 400px);
     }
+    .noticeImg{
+      height: 150px;
+    }
     .liList{
       margin-top: 24px;
     }
@@ -574,6 +587,9 @@ body {margin: 0px;padding: 0px;}
     .list {
       grid-template-columns: repeat(4, 445px);
     }
+    .noticeImg{
+      height: 169px;
+    }
     .liList{
       margin-top: 32px;
     }

src/views/grateful/GratefulHomePage.vue

@@ -40,10 +40,11 @@
             </div>
             <div class="navNotice">
               <div id="fixd-box" style="height: 100%;">
-                <div class="portal-ranking ranking-bg" style="height: 100%;">
+                <div class="portal-ranking ranking-bg" style="height: 100%;display: flex;flex-direction: column;">
                   <div style="display: flex;justify-content: space-between;">
                     <p class="ranking-title">通知</p>
-                    <router-link v-if="courseList.noticeList.length >= 6" to="/grateful/gratefulNotice" style="font-size: 14px;">查看更多</router-link>
+                    <router-link v-if="courseList.noticeList.length >= 6" to="/grateful/gratefulNotice"
+                      style="font-size: 14px;">查看更多</router-link>
                   </div>
                   <ul>
                     <li v-for="(item, index) in courseList.noticeList" :key="index"
@@ -61,12 +62,16 @@
                       </router-link>
                     </li>
                   </ul>
+                  <div v-if="courseList.noticeList.length <=3" style="flex: 1;display: flex; align-items: flex-end;">
+                    <img src="../../assets/images/grateful/notice.png" class="noticeImg" style="width: 100%;"
+                      alt="">
+                  </div>
                 </div>
               </div>
             </div>
             <div class="navTool">
               <div id="fixd-box" style="height: 100%;">
-                <div class="portal-ranking ranking-bg1" style="height: 100%;">
+                <div class="portal-ranking ranking-bg1" style="height: 100%;display: flex;flex-direction: column;">
                   <div style="display: flex;justify-content: space-between;">
                     <p class="ranking-title">工具下载</p>
                     <router-link v-if="courseList.toolList.length >= 6" to="/grateful/toolDown"
@@ -97,6 +102,15 @@
                       <span class="portal-title-desc" style="font-size: 14px;">{{ item.name.split('.')[0] }}</span>
                     </li>
                   </ul>
+                  <div v-if="courseList.toolList.length <= 4"
+                    style="flex: 1; display: flex;justify-content: space-between; align-items: flex-end;">
+                    <img class="toolImg"  src="../../assets/images/grateful/tool1.png"
+                      alt="">
+                    <img class="toolImg"  src="../../assets/images/grateful/tool2.png"
+                      alt="">
+                    <img class="toolImg"  src="../../assets/images/grateful/tool3.png"
+                      alt="">
+                  </div>
                 </div>
               </div>
             </div>
@@ -815,5 +829,4 @@ export default {
     display: grid;
     justify-content: space-between;
   }
-}
+}</style>
-</style>