教师节

src/views/grateful/GratefulHomePage.vue

@@ -1,5 +1,78 @@
 <template>
   <div>
+    <!-- 教师赋能 -->
+    <div class="xindex-content">
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
+          <div class="gratefulNav">
+            <div class="navImg">
+              <img src="../../assets/images/grateful/famousTeacher.png" alt="">
+            </div>
+            <div class="navNotice">
+              <div id="fixd-box">
+                <div class="portal-ranking ranking-bg">
+                  <div style="display: flex;justify-content: space-between;">
+                    <p class="ranking-title">通知</p>
+                    <router-link to="/grateful/gratefulNotice" style="font-size: 14px;">查看更多</router-link>
+                  </div>
+                  <ul class="ranking-data">
+                    <li v-for="(item, index) in 6" :key="index"
+                      style="cursor: pointer;margin-top:10px;line-height: 22px;">
+                      <router-link :to="'/case/detail?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="width: 130px;">哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
+                          <span>2023-09-09</span>
+                        </div>
+                      </router-link>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="navTool">
+              <div id="fixd-box">
+                <div class="portal-ranking ranking-bg1">
+                  <div style="display: flex;justify-content: space-between;">
+                    <p class="ranking-title">工具下载</p>
+                    <router-link to="/grateful/toolDown" style="font-size: 14px;">查看更多</router-link>
+                  </div>
+                  <ul class="ranking-data">
+                    <li v-for="(item, index) in 6" :key="index" style="cursor: pointer;margin-top:10px;line-height: 22px;"
+                      class="title-line-ellipsis">
+                      <router-link :to="'/case/detail?id=' + item.id">
+                        <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;">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
+                      </router-link>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- 教师赋能 -->
     <div class="xindex-content">
       <div class="modules xcontent2">
@@ -8,7 +81,7 @@
           <div class="modules-title xindex-main">
             <span class="modules-text">教师赋能</span>
             <span class="more">
-              <router-link to="/grateful/teacherEmpowerment">查看更多>></router-link>
+              <router-link to="/grateful/teacherEmpowerment">查看更多</router-link>
             </span>
           </div>
           <div class="modules-list">
@@ -272,6 +345,9 @@ export default {
     },
   },
   methods: {
+    getPic(index) {
+      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
+    },
     handleChecked(list) {
       if (list.length > 1) {
         let one = list.splice(1);
@@ -754,6 +830,29 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.title-line-ellipsis {
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  box-sizing: border-box;
+  word-break: break-all;
+  overflow: hidden;
+}
+
+.gratefulNav {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr;
+  grid-gap: 60px;
+
+  .navImg {
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
 .textarea {
   width: 600px;
 
@@ -764,6 +863,7 @@ export default {
 
 .team {
   display: grid;
+
   .teamImg {
     width: 749px;
     height: 478px;
@@ -927,6 +1027,14 @@ export default {
   box-sizing: border-box;
 }
 
+.one-line-ellipsis {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  box-sizing: border-box;
+}
+
 .course-card {
   padding-bottom: 22px;
   box-sizing: border-box;

src/views/grateful/index.vue

@@ -7,55 +7,25 @@
       <div id="container" style="z-index: 99" v-if="resonimg.length == 1">
         <!-- 当轮播图等于一张时 -->
         <swiper :options="swiperOptiontwo">
-          <swiper-slide
+          <swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'a' + idx"
-            style="margin: 0 auto"
+            class="swiper-slide games pointer">
-            v-for="(item, idx) in resonimg"
+            <div class="bannbox" :style="{
-            :key="'a' + idx"
+              background: `url(${fileBaseUrl + item.image
-            class="swiper-slide games pointer"
-          >
-            <div
-              class="bannbox"
-              :style="{
-                background: `url(${
-                  fileBaseUrl + item.image
                 }) no-repeat 100% / 100%`,
-              }"
+            }"></div>
-            ></div>
+            <img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
-            <img
-              class="banner-img"
-              style="margin: 0 auto"
-              :src="fileBaseUrl + item.image"
-              alt=""
-            />
           </swiper-slide>
         </swiper>
       </div>
       <div id="container" style="z-index: 99" v-else>
-        <swiper
+        <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length > 1">
-          :options="swiperOption"
+          <swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'b' + idx"
-          ref="mySwiper"
+            class="swiper-slide games pointer">
-          v-if="resonimg.length > 1"
+            <div class="bannbox" :style="{
-        >
+              background: `url(${fileBaseUrl + item.image
-          <swiper-slide
-            style="margin: 0 auto"
-            v-for="(item, idx) in resonimg"
-            :key="'b' + idx"
-            class="swiper-slide games pointer"
-          >
-            <div
-              class="bannbox"
-              :style="{
-                background: `url(${
-                  fileBaseUrl + item.image
                 }) no-repeat 100% / 100%`,
-              }"
+            }"></div>
-            ></div>
+            <img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
-            <img
-              class="banner-img"
-              style="margin: 0 auto"
-              :src="fileBaseUrl + item.image"
-              alt=""
-            />
           </swiper-slide>
           <div class="swiper-pagination" slot="pagination"></div>
         </swiper>
@@ -727,26 +697,38 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.grateful{
+.grateful {
   width: 100%;
-  img{
+
+  &::before {
+    content: url('../../assets/images/grateful/logo.png');
+    position: absolute;
+    top: 30px;
+    left: 40px;
+  }
+
+  img {
     width: 100%;
   }
 }
-.team{
+
+.team {
   display: grid;
+
   // grid-template-columns: 1.5fr 1fr 1fr;
-  .teamImg{
+  .teamImg {
     width: 749px;
     height: 478px;
   }
 
 }
+
 .float-tools {
   position: fixed;
   right: 0;
   bottom: 50%;
   z-index: 999;
+
   .content {
     width: 152px;
     height: 55px;
@@ -755,11 +737,13 @@ export default {
     background: linear-gradient(86deg, #00C8FF 0%, #167CFF 100%);
     border-radius: 100px 0px 0px 100px;
     padding: 20px;
+
     img {
       width: 20px;
       height: 20px;
     }
-    span{
+
+    span {
       margin-left: 10px;
       color: #fff;
       font-size: 20px;
@@ -803,33 +787,35 @@ export default {
 
 .course-banner {
   height: 520px;
+
   .swiper-button-prev {
     height: 38px;
     padding: 0 16px;
-    background: rgba($color: #000000, $alpha: 0.8)
+    background: rgba($color: #000000, $alpha: 0.8) url("../../assets/images/icon/ban-left.png") no-repeat;
-      url("../../assets/images/icon/ban-left.png") no-repeat;
     background-size: 12px 18px;
     background-position: 16px 10px;
     bottom: 66px;
     border-radius: 19px 0 0 19px;
   }
+
   .swiper-button-next {
     height: 38px;
     // right: 52.65%;
     bottom: 66px;
     top: auto;
     padding: 0 16px;
-    background: rgba($color: #000000, $alpha: 0.1)
+    background: rgba($color: #000000, $alpha: 0.1) url("../../assets/images/icon/ban-right.png") no-repeat;
-      url("../../assets/images/icon/ban-right.png") no-repeat;
     background-size: 12px 18px;
     background-position: 6px 10px;
     border-radius: 0 19px 19px 0;
   }
+
   .swiper-pagination-bullets {
     // background: #000;
     left: 60px;
     bottom: 66px;
   }
+
   ::v-deep .swiper-pagination {
     line-height: 25px;
     height: 32px;
@@ -839,6 +825,7 @@ export default {
     left: 45%;
     padding: 0 20px;
     border-radius: 19px;
+
     .swiper-pagination-bullet {
       position: relative;
       width: 25px;
@@ -849,6 +836,7 @@ export default {
       // background: rgba($color: #fff, $alpha: 0.5);
       border-radius: 2px;
     }
+
     .swiper-pagination-bullet::before {
       content: "";
       position: absolute;
@@ -857,6 +845,7 @@ export default {
       left: -2px;
       right: -2px;
     }
+
     .swiper-pagination-bullet-active {
       height: 5px;
       opacity: 1 !important;
@@ -866,6 +855,7 @@ export default {
       // background: rgba($color: #fff, $alpha: 0.8);
       border-radius: 2px;
     }
+
     .swiper-container {
       // background-color: rgba($color: #000000, $alpha: 0.2);
     }
@@ -898,6 +888,7 @@ export default {
 
   .course-image-box {
     position: relative;
+
     .course-type {
       position: absolute;
       top: 0px;
@@ -980,9 +971,11 @@ export default {
     /*早期浏览器*/
     user-select: none;
   }
+
   .course-title-box {
     display: flex;
   }
+
   .course-author {
     display: flex;
     justify-content: space-between;
@@ -1083,6 +1076,7 @@ export default {
 
   .modules-list {
     margin-top: 30px;
+
     .case-card {
       margin-bottom: 15px;
 
@@ -1162,6 +1156,7 @@ export default {
         .article-card-box {
           .article-info-image-box {
             border-radius: 4px;
+
             .article-info {
               height: 400px;
 
@@ -1282,6 +1277,7 @@ export default {
         position: relative;
         background: rgba($color: #04243c, $alpha: 0.04);
         border-radius: 4px;
+
         .qa-views {
           position: absolute;
           color: #6e7b84;
@@ -1294,5 +1290,4 @@ export default {
     }
   }
 }
-
 </style>