教师节

src/router/index.js

@@ -57,21 +57,42 @@ export const constantRoutes = [{
       hidden: true,
       component: (resolve) => require(['@/views/grateful/GratefulHomePage'], resolve),
       name: 'GratefulHomePage',
-      meta: { title: '感恩教师首页', icon: 'dashboard', noCache: true, affix: true }
+      meta: { title: '感恩教师首页', icon: 'dashboard', noCache: true, affix: true, hidden:false }
     },
     {
       path: 'teacherEmpowerment',
       hidden: true,
       component: (resolve) => require(['@/views/grateful/TeacherEmpowerment'], resolve),
       name: 'TeacherEmpowerment',
-      meta: { title: '教师赋能', icon: 'dashboard', noCache: true, affix: true }
+      meta: { title: '教师赋能', icon: 'dashboard', noCache: true, affix: true, hidden:true }
     },
     {
       path: 'toolDown',
       hidden: true,
       component: (resolve) => require(['@/views/grateful/ToolDown'], resolve),
       name: 'ToolDown',
-      meta: { title: '工具下载', icon: 'dashboard', noCache: true, affix: true }
+      meta: { title: '工具下载', icon: 'dashboard', noCache: true, affix: true, hidden:true }
+    },
+    {
+      path: 'gratefulNotice',
+      hidden: true,
+      component: (resolve) => require(['@/views/grateful/GratefulNotice'], resolve),
+      name: 'GratefulNotice',
+      meta: { title: '通知列表', icon: 'dashboard', noCache: true, affix: true, hidden:true }
+    },
+    {
+      path: 'noticeDetail',
+      hidden: true,
+      component: (resolve) => require(['@/views/grateful/NoticeDetail'], resolve),
+      name: 'NoticeDetail',
+      meta: { title: '通知详情', icon: 'dashboard', noCache: true, affix: true, hidden:true }
+    },
+    {
+      path: 'teacherOpinion',
+      hidden: true,
+      component: (resolve) => require(['@/views/grateful/TeacherOpinion'], resolve),
+      name: 'TeacherOpinion',
+      meta: { title: '师资大全', icon: 'dashboard', noCache: true, affix: true, hidden:true }
     },
   ]
 },

src/views/grateful/GratefulHomePage.vue

@@ -13,52 +13,30 @@
           </div>
           <div class="modules-list">
             <!--内容列表内容-->
-            <div
-              v-for="(course, ccidx) in courseList.list"
-              :key="'cc' + ccidx"
-              class="xindex-course"
-              style="position: relative"
-            >
+            <div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
+              style="position: relative">
               <div style="position: absolute; right: 25px; bottom: 72px">
-                <interactBar
-                  nodeWidth="20px"
-                  :courseExclusive="true"
-                  :type="1"
-                  :data="course"
-                  :comments="false"
-                  :praises="false"
-                  :shares="false"
-                  :views="false"
-                >
+                <interactBar nodeWidth="20px" :courseExclusive="true" :type="1" :data="course" :comments="false"
+                  :praises="false" :shares="false" :views="false">
                 </interactBar>
               </div>
               <a @click="toCourseDetail(course)">
                 <div class="xindex-course-image">
                   <course-image :course="course"></course-image>
-                  <span v-if="course.type == 20 || 10" class="course-type"
-                    >录播课</span
-                  >
+                  <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
                 </div>
-                <div
-                  style="width: 80%"
-                  :title="course.name"
-                  class="course-title portal-title-tow two-line-ellipsis"
-                >
+                <div style="width: 80%" :title="course.name" class="course-title portal-title-tow two-line-ellipsis">
                   {{ course.name }}
                 </div>
                 <div class="course-author">
                   <div class="course-author-left">
                     {{ course.authorInfo.name }}
 
-                    <span class="study-num"
-                      >{{ formatNum(course.studys) }}人学习</span
-                    >
+                    <span class="study-num">{{ formatNum(course.studys) }}人学习</span>
                   </div>
                   <div style="display: flex">
                     <div v-if="course.score">
-                      <span class="course-score-value" style="margin-left: 10px"
-                        >{{ toScore(course.score) }}分</span
-                      >
+                      <span class="course-score-value" style="margin-left: 10px">{{ toScore(course.score) }}分</span>
                     </div>
                     <div v-else class="course-score-no">未评分</div>
                   </div>
@@ -69,12 +47,35 @@
         </div>
       </div>
     </div>
-    <div class="float-tools">
+    <div class="float-tools" @click="() => (gratefulVisible = !gratefulVisible)">
       <div class="content">
         <img src="../../assets/images/grateful/suggestion.png" alt="" />
         <span>给点意见</span>
       </div>
     </div>
+    <!-- 意见 -->
+    <el-dialog :close-on-click-modal="false" :visible.sync="gratefulVisible" :append-to-body="true" @closed="closeDlg"
+      :width="dlgWidth" title="感谢您百忙之中给我们提交您宝贵的意见~">
+      <div class="dialogContent" :style="{ 'min-height': dlgHeight }">
+        <el-form :model="form">
+          <el-form-item label="类型">
+            <el-checkbox-group v-model="form.type">
+              <el-checkbox v-for="(item, index) in roleList" :label="item" :key="index"
+                @change="handleChecked(form.type)"></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="内容">
+            <el-input type="textarea" placeholder="请输入内容......" v-model="form.desc" class="textarea"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <div style="display: flex; justify-content: center">
+              <el-button style="width: 100px;" @click="closeDlg">取消</el-button>
+              <el-button style="width: 100px;" type="primary">确认</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -126,6 +127,14 @@ export default {
   },
   data() {
     return {
+      roleList: ["功能", "界面设计", "其他"],
+      form: {
+        type: [],
+        desc: "",
+      },
+      dlgHeight: "400px",
+      dlgWidth: "688px",
+      gratefulVisible: false,
       showUClass: false,
       showLoginMedal: false, //是否显示登录勋章
       needLoginMedal: false, //是否需要显示纪念勋章
@@ -263,6 +272,15 @@ export default {
     },
   },
   methods: {
+    handleChecked(list) {
+      if (list.length > 1) {
+        let one = list.splice(1);
+        this.form.type = one;
+      }
+    },
+    closeDlg() {
+      this.gratefulVisible = false
+    },
     tylClick() {
       window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
     },
@@ -736,19 +754,28 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.textarea {
+  width: 600px;
+
+  ::v-deep .el-textarea__inner {
+    min-height: 300px !important;
+  }
+}
+
 .team {
   display: grid;
-  // grid-template-columns: 1.5fr 1fr 1fr;
   .teamImg {
     width: 749px;
     height: 478px;
   }
 }
+
 .float-tools {
   position: fixed;
   right: 0;
   bottom: 50%;
   z-index: 999;
+
   .content {
     width: 152px;
     height: 55px;
@@ -757,10 +784,12 @@ export default {
     background: linear-gradient(86deg, #00c8ff 0%, #167cff 100%);
     border-radius: 100px 0px 0px 100px;
     padding: 20px;
+
     img {
       width: 20px;
       height: 20px;
     }
+
     span {
       margin-left: 10px;
       color: #fff;
@@ -805,33 +834,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;
@@ -841,6 +872,7 @@ export default {
     left: 45%;
     padding: 0 20px;
     border-radius: 19px;
+
     .swiper-pagination-bullet {
       position: relative;
       width: 25px;
@@ -851,6 +883,7 @@ export default {
       // background: rgba($color: #fff, $alpha: 0.5);
       border-radius: 2px;
     }
+
     .swiper-pagination-bullet::before {
       content: "";
       position: absolute;
@@ -859,6 +892,7 @@ export default {
       left: -2px;
       right: -2px;
     }
+
     .swiper-pagination-bullet-active {
       height: 5px;
       opacity: 1 !important;
@@ -868,6 +902,7 @@ export default {
       // background: rgba($color: #fff, $alpha: 0.8);
       border-radius: 2px;
     }
+
     .swiper-container {
       // background-color: rgba($color: #000000, $alpha: 0.2);
     }
@@ -900,6 +935,7 @@ export default {
 
   .course-image-box {
     position: relative;
+
     .course-type {
       position: absolute;
       top: 0px;
@@ -982,9 +1018,11 @@ export default {
     /*早期浏览器*/
     user-select: none;
   }
+
   .course-title-box {
     display: flex;
   }
+
   .course-author {
     display: flex;
     justify-content: space-between;
@@ -1085,6 +1123,7 @@ export default {
 
   .modules-list {
     margin-top: 30px;
+
     .case-card {
       margin-bottom: 15px;
 
@@ -1164,6 +1203,7 @@ export default {
         .article-card-box {
           .article-info-image-box {
             border-radius: 4px;
+
             .article-info {
               height: 400px;
 
@@ -1284,6 +1324,7 @@ export default {
         position: relative;
         background: rgba($color: #04243c, $alpha: 0.04);
         border-radius: 4px;
+
         .qa-views {
           position: absolute;
           color: #6e7b84;

src/views/grateful/GratefulNotice.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <!-- 教师赋能 -->
+    <div class="xindex-content" style="padding: 0">
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
+          <div class="modules-list" style="margin-top: 0;">
+            <div class="bgc">
+              <div class="title">重要通知</div>
+            </div>
+            <div style="padding:0 20px;">
+              <!--内容列表内容-->
+              <div v-for="(item, ccidx) in 5" :key="'cc' + ccidx" class="toolEvery" @click="noticeDetail(item)">
+                <div class="contnet">教师节活动通知</div>
+                <div class="case-info-date portal-time">
+                  <i class="el-icon-time"></i>
+                  <time-show time="2023-08-04"></time-show>
+                </div>
+              </div>
+              <pagination :size="courseList.pageSize" :total="courseList.count" :page="courseList.pageIndex"
+                layout="total, prev, pager, next, jumper" @change-size="changePageSize" @change-page="loadData">
+              </pagination>
+            </div>
+
+          </div>
+        </div>
+        <div class="xcontent2-minor" style="margin-left: 25px;">
+          <div class="portal-ranking ranking-bg">
+            <p class="ranking-title">教师赋能排行榜</p>
+            <ul class="xindex-ranking-course">
+              <li class="xindex-ranking-li" v-for="(item, cindex) in 10" :key="'cc' + cindex">
+                <a style="display: inherit">
+                  <span class="portal-right-text blue-one">
+                    <img :src="getPic(cindex)" alt="" />
+                  </span>
+                  <span class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
+                    style="font-size: 14px; color: #04243c">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import timeShow from "@/components/Portal/datetimeShow.vue";
+export default {
+  data: () => {
+    return {
+      courseList: {
+        list: [],
+        count: 0,
+        pageIndex: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  components: { timeShow },
+  methods: {
+    noticeDetail(detailInfo) {
+      console.log(detailInfo);
+      this.$router.push({
+        path: '/grateful/noticeDetail',
+      })
+
+    },
+    getPic(index) {
+      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
+    },
+    changePageSize(pageSize) {
+      this.courseList.pageSize = pageSize;
+    },
+    loadData(pindex) {
+      console.log(pindex);
+    },
+  },
+};
+</script>
+<style scoped lang='scss'>
+.modules-list {
+  min-height: 555px;
+  background: #ffffff;
+  border-radius: 8px;
+
+  .bgc {
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+    height: 80px;
+    background: linear-gradient(180deg,
+        rgba(56, 125, 247, 0.2) 0%,
+        rgba(166, 168, 255, 0) 100%);
+    border-radius: 8px 8px 0 0;
+
+    .title {
+      padding: 20px 20px 0 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .toolEvery {
+    height: 80px;
+    line-height: 80px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #333333;
+    border-bottom: 1px solid rgba($color: #999, $alpha: 0.2);
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+
+    .contnet {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+}
+</style>

src/views/grateful/NoticeDetail.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <!-- 教师赋能 -->
+    <div class="xindex-content" style="padding: 0">
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
+          <div class="modules-list" style="margin-top: 0;">
+            <div class="bgc">
+              <div class="title">教师节活动通知</div>
+              <!--内容列表内容-->
+              <div class="timeAndAuthor">
+                <div class="author">发布人：李玉冰</div>
+                <div class="case-info-date portal-time">
+                  <i class="el-icon-time"></i>
+                  <time-show time="2023-08-04"></time-show>
+                </div>
+              </div>
+            </div>
+            <div class="topTitle">通知内容</div>
+            <div class="noticeContent">--内容列表内容--</div>
+          </div>
+        </div>
+        <div class="xcontent2-minor" style="margin-left: 25px">
+          <div class="portal-ranking ranking-bg">
+            <p class="ranking-title">重要通知</p>
+            <ul class="xindex-ranking-course">
+              <li class="xindex-ranking-li" v-for="(item, cindex) in 10" :key="'cc' + cindex" @click="noticeDetail(item)">
+                <a style="display: inherit">
+                  <span class="portal-right-text blue-one">
+                    <img :src="getPic(cindex)" alt="" />
+                  </span>
+                  <span class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
+                    style="font-size: 14px; color: #04243c">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import timeShow from "@/components/Portal/datetimeShow.vue";
+export default {
+  data: () => {
+    return {
+      courseList: {
+        list: [],
+        count: 0,
+        pageIndex: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  components: { timeShow },
+  methods: {
+    noticeDetail(item) {
+    },
+    getPic(index) {
+      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
+    },
+    changePageSize(pageSize) {
+      this.courseList.pageSize = pageSize;
+    },
+    loadData(pindex) {
+      console.log(pindex);
+    },
+  },
+};
+</script>
+<style scoped lang='scss'>
+.modules-list {
+  min-height: 555px;
+  background: #ffffff;
+  border-radius: 8px;
+
+  .bgc {
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+    background: linear-gradient(180deg,
+        rgba(56, 125, 247, 0.2) 0%,
+        rgba(166, 168, 255, 0) 100%);
+    border-radius: 8px 8px 0 0;
+
+    .title {
+      padding: 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .timeAndAuthor {
+    padding: 0 20px;
+    .author {
+      font-size: 14px;
+      font-weight: 400;
+      color: #333333;
+      margin-bottom: 5px;
+    }
+  }
+
+  .topTitle {
+    display: flex;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 30px;
+  }
+
+  .noticeContent {
+    padding: 0 80px;
+  }
+}
+</style>

src/views/grateful/TeacherEmpowerment.vue

@@ -6,52 +6,30 @@
         <div class="xcontent2-main">
           <div class="modules-list" style="margin-top: 0">
             <!--内容列表内容-->
-            <div
-              v-for="(course, ccidx) in courseList.list"
-              :key="'cc' + ccidx"
-              class="xindex-course"
-              style="position: relative"
-            >
+            <div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
+              style="position: relative">
               <div style="position: absolute; right: 25px; bottom: 72px">
-                <interactBar
-                  nodeWidth="20px"
-                  :courseExclusive="true"
-                  :type="1"
-                  :data="course"
-                  :comments="false"
-                  :praises="false"
-                  :shares="false"
-                  :views="false"
-                >
+                <interactBar nodeWidth="20px" :courseExclusive="true" :type="1" :data="course" :comments="false"
+                  :praises="false" :shares="false" :views="false">
                 </interactBar>
               </div>
               <a @click="toCourseDetail(course)">
                 <div class="xindex-course-image">
                   <course-image :course="course"></course-image>
-                  <span v-if="course.type == 20 || 10" class="course-type"
-                    >录播课</span
-                  >
+                  <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
                 </div>
-                <div
-                  style="width: 80%"
-                  :title="course.name"
-                  class="course-title portal-title-tow two-line-ellipsis"
-                >
+                <div style="width: 80%" :title="course.name" class="course-title portal-title-tow two-line-ellipsis">
                   {{ course.name }}
                 </div>
                 <div class="course-author">
                   <div class="course-author-left">
                     {{ course.authorInfo.name }}
 
-                    <span class="study-num"
-                      >{{ formatNum(course.studys) }}人学习</span
-                    >
+                    <span class="study-num">{{ formatNum(course.studys) }}人学习</span>
                   </div>
                   <div style="display: flex">
                     <div v-if="course.score">
-                      <span class="course-score-value" style="margin-left: 10px"
-                        >{{ toScore(course.score) }}分</span
-                      >
+                      <span class="course-score-value" style="margin-left: 10px">{{ toScore(course.score) }}分</span>
                     </div>
                     <div v-else class="course-score-no">未评分</div>
                   </div>
@@ -64,13 +42,8 @@
     </div>
     <!-- <div v-if="courseList.count > courseList.pageSize"> -->
     <div>
-      <pagination
-        :size="courseList.pageSize"
-        :total="courseList.count"
-        :page="courseList.pageIndex"
-        @change-size="changePageSize"
-        @change-page="loadData"
-      ></pagination>
+      <pagination :size="courseList.pageSize" :total="courseList.count" :page="courseList.pageIndex"
+        @change-size="changePageSize" @change-page="loadData" style="background-color: rgba(0, 0, 0, 0);"></pagination>
     </div>
   </div>
 </template>
@@ -743,6 +716,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.gratefulBanner {
+  width: 100vw;
+
+  img {
+    width: 100%;
+  }
+}
+
 .xindex-course-image:hover {
   transform: scale(1.3) translateY(-15px);
   transition: all 0.6s;
@@ -779,33 +760,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;
@@ -815,6 +798,7 @@ export default {
     left: 45%;
     padding: 0 20px;
     border-radius: 19px;
+
     .swiper-pagination-bullet {
       position: relative;
       width: 25px;
@@ -825,6 +809,7 @@ export default {
       // background: rgba($color: #fff, $alpha: 0.5);
       border-radius: 2px;
     }
+
     .swiper-pagination-bullet::before {
       content: "";
       position: absolute;
@@ -833,6 +818,7 @@ export default {
       left: -2px;
       right: -2px;
     }
+
     .swiper-pagination-bullet-active {
       height: 5px;
       opacity: 1 !important;
@@ -842,6 +828,7 @@ export default {
       // background: rgba($color: #fff, $alpha: 0.8);
       border-radius: 2px;
     }
+
     .swiper-container {
       // background-color: rgba($color: #000000, $alpha: 0.2);
     }
@@ -874,6 +861,7 @@ export default {
 
   .course-image-box {
     position: relative;
+
     .course-type {
       position: absolute;
       top: 0px;
@@ -956,9 +944,11 @@ export default {
     /*早期浏览器*/
     user-select: none;
   }
+
   .course-title-box {
     display: flex;
   }
+
   .course-author {
     display: flex;
     justify-content: space-between;
@@ -1059,6 +1049,7 @@ export default {
 
   .modules-list {
     margin-top: 30px;
+
     .case-card {
       margin-bottom: 15px;
 
@@ -1138,6 +1129,7 @@ export default {
         .article-card-box {
           .article-info-image-box {
             border-radius: 4px;
+
             .article-info {
               height: 400px;
 
@@ -1258,6 +1250,7 @@ export default {
         position: relative;
         background: rgba($color: #04243c, $alpha: 0.04);
         border-radius: 4px;
+
         .qa-views {
           position: absolute;
           color: #6e7b84;

src/views/grateful/TeacherOpinion.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <!-- 教师赋能 -->
+    <div class="xindex-content" style="padding: 0">
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
+          <div class="modules-list" style="margin-top: 0;">
+            <div class="bgc">
+              <div class="title">
+                <div>师资大全</div>
+                <div style="position: relative;">
+                  <el-input class="portal-input" placeholder="请输入课程名称或教师姓名工号"
+                    style="border-radius: 20px !important;width: 300px; " @keyup.enter.native="searchJump()" clearable
+                    maxlength="50" v-model="keyword">
+                  </el-input>
+                  <el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
+                </div>
+              </div>
+
+            </div>
+            <div class="content">
+              <el-table :data="pageData" stripe border>
+                <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
+                <el-table-column label="课程名称" prop="courseUser" align="center"></el-table-column>
+                <el-table-column label="课程价值" prop="auditTime" align="center" show-overflow-tooltip></el-table-column>
+                <el-table-column label="教师名称" prop="auditRemark" align="center" width="200px"
+                  show-overflow-tooltip></el-table-column>
+                <el-table-column label="教师工号" prop="auditRemark" align="center" width="200px"
+                  show-overflow-tooltip></el-table-column>
+              </el-table>
+              <div v-if="pageData.length > 0" style="text-align: center;margin-top: 50px;">
+                <pagination :size="courseList.pageSize" :total="courseList.count" :page="courseList.pageIndex"
+                  @change-size="changePageSize" @change-page="loadData"></pagination>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import timeShow from "@/components/Portal/datetimeShow.vue";
+export default {
+  data: () => {
+    return {
+      keyword: '',
+      pageData: [
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          courseUser: '2016-05-02',
+          auditTime: '王小虎',
+          auditRemark: '上海市普陀区金沙江路 1518 弄'
+        },
+      ],
+      courseList: {
+        list: [],
+        count: 0,
+        pageIndex: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  components: { timeShow },
+  methods: {
+    searchJump() {
+
+    },
+    changePageSize(pageSize) {
+      this.courseList.pageSize = pageSize
+    },
+    loadData(pageIndex) {
+      this.pageIndex = pageIndex
+    },
+    noticeDetail(item) { },
+    getPic(index) {
+      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
+    },
+    changePageSize(pageSize) {
+      this.courseList.pageSize = pageSize;
+    },
+    loadData(pindex) {
+      console.log(pindex);
+    },
+  },
+};
+</script>
+<style scoped lang='scss'>
+.modules-list {
+  min-height: 555px;
+  background: #ffffff;
+  border-radius: 8px;
+
+  .bgc {
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+    height: 100px;
+    background: linear-gradient(180deg,
+        rgba(56, 125, 247, 0.2) 0%,
+        rgba(166, 168, 255, 0) 100%);
+
+    .title {
+      padding: 20px 20px 0 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .content{
+    padding: 0 40px 40px;
+  }
+  .sear-but {
+    position: absolute;
+    bottom: 10%;
+    right: 5px;
+  }
+}
+</style>

src/views/grateful/ToolDown.vue

@@ -4,36 +4,38 @@
     <div class="xindex-content" style="padding: 0">
       <div class="modules xcontent2">
         <div class="xcontent2-main">
-          <div class="modules-list" style="margin-top: 0; padding: 48px">
-            <!--内容列表内容-->
-            <div
-              v-for="(course, ccidx) in 5"
-              :key="'cc' + ccidx"
-              class="toolEvery"
-              style="position: relative"
-            >
-              HHh
+          <div class="modules-list" style="margin-top: 0;">
+            <div class="bgc">
+              <div class="title">工具下载</div>
             </div>
+            <div style="padding: 0 20px;border-radius: 8px 8px 0 0;">
+              <!--内容列表内容-->
+              <div v-for="(course, ccidx) in 5" :key="'cc' + ccidx" class="toolEvery">
+                <div class="contnet">
+                  MNT销量突破促经营哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
+                </div>
+                <div class="btn">
+                  <button>立即下载</button>
+                </div>
+              </div>
+            </div>
+
+            <pagination :size="courseList.pageSize" :total="courseList.count" :page="courseList.pageIndex"
+              layout="total, prev, pager, next, jumper" @change-size="changePageSize" @change-page="loadData">
+            </pagination>
           </div>
         </div>
         <div class="xcontent2-minor" style="margin-left: 25px">
           <div class="portal-ranking ranking-bg">
             <p class="ranking-title">教师赋能排行榜</p>
             <ul class="xindex-ranking-course">
-              <li
-                class="xindex-ranking-li"
-                v-for="(item, cindex) in 10"
-                :key="'cc' + cindex"
-              >
+              <li class="xindex-ranking-li" v-for="(item, cindex) in 10" :key="'cc' + cindex">
                 <a style="display: inherit">
                   <span class="portal-right-text blue-one">
                     <img :src="getPic(cindex)" alt="" />
                   </span>
-                  <span
-                    class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
-                    style="font-size: 14px; color: #04243c"
-                    >哈哈哈哈</span
-                  >
+                  <span class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
+                    style="font-size: 14px; color: #04243c">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                 </a>
               </li>
             </ul>
@@ -46,25 +48,73 @@
 <script>
 export default {
   data: () => {
-    return {};
+    return {
+      courseList: {
+        list: [],
+        count: 0,
+        pageIndex: 1,
+        pageSize: 10,
+      },
+    };
   },
   methods: {
     getPic(index) {
       return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
     },
+    changePageSize(pageSize) {
+      this.courseList.pageSize = pageSize;
+    },
+    loadData(pindex) {
+      console.log(pindex);
+    },
   },
 };
 </script>
 <style scoped lang='scss'>
 .modules-list {
-  height: 555px;
+  min-height: 555px;
   background: #ffffff;
   border-radius: 8px;
+
+  .bgc {
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+    height: 80px;
+    background: linear-gradient(180deg,
+        rgba(56, 125, 247, 0.2) 0%,
+        rgba(166, 168, 255, 0) 100%);
+    border-radius: 8px 8px 0 0;
+
+    .title {
+      padding: 20px 20px 0 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
   .toolEvery {
     height: 80px;
     line-height: 80px;
-    opacity: 0.2;
-    border-bottom: 1px solid #999999;
+    font-size: 18px;
+    font-weight: 500;
+    color: #333333;
+    border-bottom: 1px solid rgba($color: #999, $alpha: 0.2);
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      button {
+        width: 140px;
+        height: 40px;
+        background: #387df7;
+        border: 0;
+        box-shadow: 1px 2px 8px 1px rgba(56, 125, 247, 0.3);
+        border-radius: 4px;
+        color: #ffffff;
+        line-height: 22px;
+      }
+    }
   }
 }
 </style>

src/views/grateful/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="course-banner" style="background-color: red">
+    <div class="grateful" v-if="$route.meta.hidden">
+      <img src="../../assets/images/grateful/gratefulbanner.png" alt="" />
+    </div>
+    <div class="course-banner" v-if="!$route.meta.hidden">
       <div id="container" style="z-index: 99" v-if="resonimg.length == 1">
         <!-- 当轮播图等于一张时 -->
         <swiper :options="swiperOptiontwo">
@@ -60,7 +63,7 @@
     </div>
     <router-view></router-view>
     <!-- 底部 -->
-    <div class="gratefulfooter">
+    <div class="grateful">
       <img src="../../assets/images/grateful/gratefulFooter.png" alt="" />
     </div>
   </div>
@@ -724,6 +727,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.grateful{
+  width: 100%;
+  img{
+    width: 100%;
+  }
+}
 .team{
   display: grid;
   // grid-template-columns: 1.5fr 1fr 1fr;