首页

src/views/grateful/GratefulHomePage.vue

@@ -41,31 +41,27 @@
             <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 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>
-                  </div>
-                  <ul>
-                    <li v-for="(item, index) in courseList.noticeList" :key="index"
-                      style="cursor: pointer;line-height: 22px;" class="liList">
-                      <router-link :to="'/grateful/noticeDetail?id=' + item.id"
-                        style="display: flex;align-items: center;">
-                        <span class="portal-right-text blue-one">
-                          <img :src="getPic(index)" alt="">
-                        </span>
-                        <div class="portal-title-desc"
-                          style="flex: 1;font-size: 14px;display: flex;justify-content: space-between;">
-                          <span class="title-line-ellipsis " style="flex: 1;">{{ item.content }}</span>
-                          <span>{{ item.createTime.split(' ')[0] }}</span>
-                        </div>
-                      </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 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>
+                    </div>
+                    <ul>
+                      <li v-for="(item, index) in courseList.noticeList" :key="index"
+                        style="cursor: pointer;line-height: 22px;" class="liList">
+                        <router-link :to="'/grateful/noticeDetail?id=' + item.id"
+                          style="display: flex;align-items: center;">
+                          <span class="portal-right-text blue-one">
+                            <img :src="getPic(index)" alt="">
+                          </span>
+                          <div class="portal-title-desc"
+                            style="flex: 1;font-size: 14px;display: flex;justify-content: space-between;">
+                            <span class="title-line-ellipsis " style="flex: 1;">{{ item.content }}</span>
+                            <span>{{ item.createTime.split(' ')[0] }}</span>
+                          </div>
+                        </router-link>
+                      </li>
+                    </ul>
                 </div>
               </div>
             </div>
@@ -102,15 +98,6 @@
                       <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>
@@ -172,11 +159,7 @@
       <div class="dialogContent">
         <div class="dialogTop">
           <div class="words">
-            <div>欢迎留下您的宝贵意见，</div>
-            <div>建议一旦采纳，将有精美小礼品奉上。</div>
-          </div>
-          <div class="imgGift">
-            <img src="../../assets/images/grateful/noticGift.png" alt="">
+            <div>欢迎留下您的宝贵建议</div>
           </div>
         </div>
         <el-form :model="form">
@@ -207,6 +190,8 @@ export default {
   },
   data() {
     return {
+      showNoticeImg: false,
+      showToolImg: false,
       form: {
         textarea: "",
       },
@@ -360,27 +345,37 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@media screen and (max-width: 1366px){
-  .swiper-pagination{
+// .noticeBgc {
+//   height: 100%;
+//   width: 100%;
+//   background: url('../../assets/images/grateful/noticeBgc.png') no-repeat;
+//   background-size: 100% 100px;
+// }
+
+@media screen and (max-width: 1366px) {
+  .swiper-pagination {
     top: 310px;
   }
 }
-@media screen and (max-width: 1680px) and (min-width:1367px){
-  .swiper-pagination{
+
+@media screen and (max-width: 1680px) and (min-width:1367px) {
+  .swiper-pagination {
     top: 360px;
   }
 }
 
-@media screen and (max-width: 1920px) and (min-width: 1681px){
-  .swiper-pagination{
+@media screen and (max-width: 1920px) and (min-width: 1681px) {
+  .swiper-pagination {
     top: 360px;
   }
 }
-@media screen and (min-width: 1921px){
-  .swiper-pagination{
+
+@media screen and (min-width: 1921px) {
+  .swiper-pagination {
     top: 360px;
   }
 }
+
 .bannbox {
   width: 100%;
   height: 420px;
@@ -412,6 +407,14 @@ export default {
 
 .course-banner {
   height: 420px;
+  position: relative;
+
+  &::before {
+    content: url(../../assets/images//grateful/logo.png);
+    position: absolute;
+    top: 20px;
+    left: 40px;
+  }
 
   .swiper-button-prev {
     height: 38px;
@@ -851,4 +854,5 @@ export default {
     display: grid;
     justify-content: space-between;
   }
-}</style>
+}
+</style>