From 86fdaef2168d2bde1f86af3fc8789fd6d42cec7a Mon Sep 17 00:00:00 2001
From: nisen <laonisen@icloud.com>
Date: Tue, 5 Sep 2023 18:14:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/portal.scss           |  12 ---
 src/views/grateful/GratefulHomePage.vue | 120 ++++++++++++++++--------
 2 files changed, 83 insertions(+), 49 deletions(-)

diff --git a/src/assets/styles/portal.scss b/src/assets/styles/portal.scss
index 40e7c89e..590fc3dd 100644
--- a/src/assets/styles/portal.scss
+++ b/src/assets/styles/portal.scss
@@ -399,9 +399,6 @@ body {margin: 0px;padding: 0px;}
     .list {
       grid-template-columns: repeat(4, 255px);
     }
-    .noticeImg{
-      height: 110px;
-    }
     .toolImg{
       width: 80px;
       height: 80px;
@@ -484,9 +481,6 @@ body {margin: 0px;padding: 0px;}
     .list {
       grid-template-columns: repeat(4, 332px);
     }
-    .noticeImg{
-      height: 120px;
-    }
     .liList{
       margin-top: 10px;
     }
@@ -536,9 +530,6 @@ body {margin: 0px;padding: 0px;}
     .list {
       grid-template-columns: repeat(4, 400px);
     }
-    .noticeImg{
-      height: 150px;
-    }
     .liList{
       margin-top: 24px;
     }
@@ -587,9 +578,6 @@ body {margin: 0px;padding: 0px;}
     .list {
       grid-template-columns: repeat(4, 445px);
     }
-    .noticeImg{
-      height: 169px;
-    }
     .liList{
       margin-top: 32px;
     }
diff --git a/src/views/grateful/GratefulHomePage.vue b/src/views/grateful/GratefulHomePage.vue
index 28ced403..3befe95b 100644
--- a/src/views/grateful/GratefulHomePage.vue
+++ b/src/views/grateful/GratefulHomePage.vue
@@ -40,7 +40,9 @@
             </div>
             <div class="navNotice">
               <div id="fixd-box" style="height: 100%;">
-                <div class="portal-ranking ranking-bg" style="height: 100%;display: flex;flex-direction: column;">
+                <div class="portal-ranking ranking-bg" style="height: 100%;display: flex;flex-direction: column;"
+                  :class="showNoticeImg ? 'allPadding' : ''">
+                  <div :class="showNoticeImg ? 'noticeBgc' : ''">
                     <div style="display: flex;justify-content: space-between;">
                       <p class="ranking-title">通知</p>
                       <router-link v-if="courseList.noticeList.length >= 6" to="/grateful/gratefulNotice"
@@ -62,42 +64,46 @@
                         </router-link>
                       </li>
                     </ul>
+                  </div>
                 </div>
               </div>
             </div>
             <div class="navTool">
               <div id="fixd-box" 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"
-                      style="font-size: 14px;">查看更多</router-link>
+                <div class="portal-ranking ranking-bg1" style="height: 100%;display: flex;flex-direction: column;"
+                  :class="showToolImg ? 'allPadding' : ''">
+                  <div :class="showToolImg ? 'toolBgc' : ''">
+                    <div style="display: flex;justify-content: space-between;">
+                      <p class="ranking-title">工具下载</p>
+                      <router-link v-if="courseList.toolList.length >= 6" to="/grateful/toolDown"
+                        style="font-size: 14px;">查看更多</router-link>
+                    </div>
+                    <ul>
+                      <li v-for="(item, index) in courseList.toolList" :key="index"
+                        style="cursor: pointer;line-height: 22px;" class="title-line-ellipsis liList"
+                        @click="downTool(item)">
+                        <span class="portal-right-text orange-one" v-if="index == 0">
+                          <img :src="`${webBaseUrl}/images/list-01.png`" alt="">
+                        </span>
+                        <span class="portal-right-text orange-tow" v-if="index == 1">
+                          <img :src="`${webBaseUrl}/images/list02.png`" alt="">
+                        </span>
+                        <span class="portal-right-text orange-three" v-if="index == 2">
+                          <img :src="`${webBaseUrl}/images/list03.png`" alt="">
+                        </span>
+                        <span class="portal-right-text" v-if="index == 3">
+                          <img :src="`${webBaseUrl}/images/list04.png`" alt="">
+                        </span>
+                        <span class="portal-right-text" v-if="index == 4">
+                          <img :src="`${webBaseUrl}/images/list05.png`" alt="">
+                        </span>
+                        <span class="portal-right-text" v-if="index == 5">
+                          <img :src="`${webBaseUrl}/images/listblue06.png`" alt="">
+                        </span>
+                        <span class="portal-title-desc" style="font-size: 14px;">{{ item.name.split('.')[0] }}</span>
+                      </li>
+                    </ul>
                   </div>
-                  <ul>
-                    <li v-for="(item, index) in courseList.toolList" :key="index"
-                      style="cursor: pointer;line-height: 22px;" class="title-line-ellipsis liList"
-                      @click="downTool(item)">
-                      <span class="portal-right-text orange-one" v-if="index == 0">
-                        <img :src="`${webBaseUrl}/images/list-01.png`" alt="">
-                      </span>
-                      <span class="portal-right-text orange-tow" v-if="index == 1">
-                        <img :src="`${webBaseUrl}/images/list02.png`" alt="">
-                      </span>
-                      <span class="portal-right-text orange-three" v-if="index == 2">
-                        <img :src="`${webBaseUrl}/images/list03.png`" alt="">
-                      </span>
-                      <span class="portal-right-text" v-if="index == 3">
-                        <img :src="`${webBaseUrl}/images/list04.png`" alt="">
-                      </span>
-                      <span class="portal-right-text" v-if="index == 4">
-                        <img :src="`${webBaseUrl}/images/list05.png`" alt="">
-                      </span>
-                      <span class="portal-right-text" v-if="index == 5">
-                        <img :src="`${webBaseUrl}/images/listblue06.png`" alt="">
-                      </span>
-                      <span class="portal-title-desc" style="font-size: 14px;">{{ item.name.split('.')[0] }}</span>
-                    </li>
-                  </ul>
                 </div>
               </div>
             </div>
@@ -328,6 +334,10 @@ export default {
         pageSize: 6,
         isTop: ''
       }).then((res) => {
+        console.log(res, '通知');
+        if (res.data.records.length <= 3) {
+          this.showNoticeImg = true
+        }
         this.courseList.noticeList = res.data.records || []
       })
     },
@@ -336,6 +346,9 @@ export default {
         pageNo: 1,
         pageSize: 6
       }).then((result) => {
+        if (result.data.records.length <= 3) {
+          this.showToolImg = true
+        }
         console.log(result.data.records, '哈哈哈哈');
         this.courseList.toolList = result.data.records || []
       })
@@ -345,35 +358,68 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// .noticeBgc {
-//   height: 100%;
-//   width: 100%;
-//   background: url('../../assets/images/grateful/noticeBgc.png') no-repeat;
-//   background-size: 100% 100px;
-// }
+.allPadding {
+  padding: 0px;
+}
+
+.noticeBgc {
+  height: 100%;
+  width: 100%;
+  background: url('../../assets/images/grateful/noticeBgc.png') no-repeat;
+  background-size: 100%;
+  background-position: left bottom;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.toolBgc {
+  height: 100%;
+  width: 100%;
+  background: url('../../assets/images/grateful/toolBgc.png') no-repeat;
+  background-size: 100%;
+  background-position: left bottom;
+  padding: 20px;
+  border-radius: 8px;
+}
 
 @media screen and (max-width: 1366px) {
   .swiper-pagination {
     top: 310px;
   }
+
+  // .noticeBgc {
+  //   background-size: 100% 110px;
+  // }
 }
 
 @media screen and (max-width: 1680px) and (min-width:1367px) {
   .swiper-pagination {
     top: 360px;
   }
+
+  // .noticeBgc {
+  //   background-size: 100% 120px;
+  // }
 }
 
 @media screen and (max-width: 1920px) and (min-width: 1681px) {
   .swiper-pagination {
     top: 360px;
   }
+
+  // .noticeBgc {
+  //   background-size: 100% 150px;
+  // }
 }
 
 @media screen and (min-width: 1921px) {
   .swiper-pagination {
     top: 360px;
   }
+
+  .noticeBgc {
+    // background-size: 100% 169px;
+  }
 }
 
 .bannbox {