教师节

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
-            style="margin: 0 auto"
-            v-for="(item, idx) in resonimg"
-            :key="'a' + idx"
-            class="swiper-slide games pointer"
-          >
-            <div
-              class="bannbox"
-              :style="{
-                background: `url(${
-                  fileBaseUrl + item.image
+          <swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'a' + idx"
+            class="swiper-slide games pointer">
+            <div class="bannbox" :style="{
+              background: `url(${fileBaseUrl + item.image
                 }) no-repeat 100% / 100%`,
-              }"
-            ></div>
-            <img
-              class="banner-img"
-              style="margin: 0 auto"
-              :src="fileBaseUrl + item.image"
-              alt=""
-            />
+            }"></div>
+            <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
-          :options="swiperOption"
-          ref="mySwiper"
-          v-if="resonimg.length > 1"
-        >
-          <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
+        <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length > 1">
+          <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>
-            <img
-              class="banner-img"
-              style="margin: 0 auto"
-              :src="fileBaseUrl + item.image"
-              alt=""
-            />
+            }"></div>
+            <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)
-      url("../../assets/images/icon/ban-left.png") no-repeat;
+    background: rgba($color: #000000, $alpha: 0.8) 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)
-      url("../../assets/images/icon/ban-right.png") no-repeat;
+    background: rgba($color: #000000, $alpha: 0.1) 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>