diff --git a/src/assets/images/grateful/gratefulFooter.png b/src/assets/images/grateful/gratefulFooter.png
new file mode 100644
index 00000000..67178870
Binary files /dev/null and b/src/assets/images/grateful/gratefulFooter.png differ
diff --git a/src/assets/images/grateful/suggestion.png b/src/assets/images/grateful/suggestion.png
new file mode 100644
index 00000000..321ca916
Binary files /dev/null and b/src/assets/images/grateful/suggestion.png differ
diff --git a/src/assets/images/grateful/team.png b/src/assets/images/grateful/team.png
new file mode 100644
index 00000000..9268ddf9
Binary files /dev/null and b/src/assets/images/grateful/team.png differ
diff --git a/src/components/PortalHeader.vue b/src/components/PortalHeader.vue
index e1dda6e9..47ea53d4 100644
--- a/src/components/PortalHeader.vue
+++ b/src/components/PortalHeader.vue
@@ -42,6 +42,7 @@
                   <el-dropdown-item command="four" divided>U选小课堂</el-dropdown-item>
                   <el-dropdown-item command="five" divided>社招新员工</el-dropdown-item>
                   <el-dropdown-item command="six" divided>贡献者专区</el-dropdown-item>
+                  <el-dropdown-item command="seven" divided>感恩教师节</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </div>
@@ -232,6 +233,10 @@ export default {
     handleCommand(val) {
       if (val === "four") {
           this.$emit('showClass',true)
+      } else if(val === "seven"){
+        this.$router.push({
+          path:'/grateful'
+        })
       } else {
         let urlPre = window.location.protocol + "//" + window.location.host;
         // process.env.VUE_APP_BOE_WEB_URL
diff --git a/src/router/index.js b/src/router/index.js
index bbe5ef44..e24a5b73 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,279 +3,315 @@ import VueRouter from 'vue-router'
 /* Layout */
 import Layout from '@/layout/index'
 import LayoutPortal from '@/layout/portal'
+import Grateful from '@/views/grateful'
 
 Vue.use(VueRouter)
 
 export const constantRoutes = [{
-    path: '/redirect',
-    component: Layout,
-    hidden: true,
-    children: [{
-        path: '/redirect/:path(.*)',
-        component: (resolve) => require(['@/views/Redirect'], resolve)
-    }]
+  path: '/redirect',
+  component: Layout,
+  hidden: true,
+  children: [{
+    path: '/redirect/:path(.*)',
+    component: (resolve) => require(['@/views/Redirect'], resolve)
+  }]
 }, {
-    path: '',
-    redirect: '/study'
+  path: '',
+  redirect: '/study'
 },
 {
-    path: '/loading',
-    hidden: true,
-    component: (resolve) => require(['@/views/Loading'], resolve),
-    name: 'loading',
-    meta: { title: '正在进入学习中心', icon: 'dashboard', noCache: true, affix: false },
+  path: '/loading',
+  hidden: true,
+  component: (resolve) => require(['@/views/Loading'], resolve),
+  name: 'loading',
+  meta: { title: '正在进入学习中心', icon: 'dashboard', noCache: true, affix: false },
 },
 {
-    path: '/login',
-    hidden: true,
-    component: (resolve) => require(['@/views/Login'], resolve),
-    name: 'login',
-    meta: { title: '京东方大学堂登录', icon: 'dashboard', noCache: true, affix: false },
+  path: '/login',
+  hidden: true,
+  component: (resolve) => require(['@/views/Login'], resolve),
+  name: 'login',
+  meta: { title: '京东方大学堂登录', icon: 'dashboard', noCache: true, affix: false },
 },
 {
-    path: '/index',
-    hidden: true,
-    component: (resolve) => require(['@/views/Index'], resolve),
-    name: 'index',
-    meta: { title: '首页', icon: 'dashboard', noCache: true, affix: false },
+  path: '/index',
+  hidden: true,
+  component: (resolve) => require(['@/views/Index'], resolve),
+  name: 'index',
+  meta: { title: '首页', icon: 'dashboard', noCache: true, affix: false },
+},
+// {
+//   path: '/grateful/index',
+//   hidden: true,
+//   component: (resolve) => require(['@/views/grateful'], resolve),
+//   name: 'gratefulIndex',
+//   meta: { title: '感恩教师首页', icon: 'dashboard', noCache: true, affix: false },
+// },
+{
+  path: '/grateful',
+  component: Grateful,
+  redirect: '/grateful/index',
+  children: [
+    {
+      path: 'index',
+      hidden: true,
+      component: (resolve) => require(['@/views/grateful/GratefulHomePage'], resolve),
+      name: 'GratefulHomePage',
+      meta: { title: '感恩教师首页', icon: 'dashboard', noCache: true, affix: true }
+    },
+    {
+      path: 'teacherEmpowerment',
+      hidden: true,
+      component: (resolve) => require(['@/views/grateful/TeacherEmpowerment'], resolve),
+      name: 'TeacherEmpowerment',
+      meta: { title: '教师赋能', icon: 'dashboard', noCache: true, affix: true }
+    },
+    {
+      path: 'toolDown',
+      hidden: true,
+      component: (resolve) => require(['@/views/grateful/ToolDown'], resolve),
+      name: 'ToolDown',
+      meta: { title: '工具下载', icon: 'dashboard', noCache: true, affix: true }
+    },
+  ]
 },
 {
-    path: '/forward',
-    hidden: true,
-    component: (resolve) => require(['@/views/Forward'], resolve),
-    name: 'forward',
-    meta: { title: '详细信息', icon: 'dashboard', noCache: true, affix: false },
+  path: '/forward',
+  hidden: true,
+  component: (resolve) => require(['@/views/Forward'], resolve),
+  name: 'forward',
+  meta: { title: '详细信息', icon: 'dashboard', noCache: true, affix: false },
 },
 {
-    path: '/course',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/course/Index'], resolve),
-    name: 'course',
-    meta: { title: '课程',keepAlive:true, icon: 'dashboard', noCache: true, affix: false },
+  path: '/course',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/course/Index'], resolve),
+  name: 'course',
+  meta: { title: '课程', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
 },
 {
-    path: '/course/micro',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/course/Micro'], resolve),
-    name: 'courseDetailMicro',
-    meta: { title: '课程详情', icon: 'dashboard', noCache: true, affix: false },
+  path: '/course/micro',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/course/Micro'], resolve),
+  name: 'courseDetailMicro',
+  meta: { title: '课程详情', icon: 'dashboard', noCache: true, affix: false },
 },
 {
-    path: '/course/detail',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/course/Detail'], resolve),
-    name: 'courseDetail',
-    meta: { title: '课程详情',keepAlive:true, icon: 'dashboard', noCache: true, affix: false },
+  path: '/course/detail',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/course/Detail'], resolve),
+  name: 'courseDetail',
+  meta: { title: '课程详情', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
 },
 // 课程预览
 {
-    path: '/course/microPreview',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/course/microPreview'], resolve),
-    name: 'microPreview',
-    meta: { title: '课程预览', icon: 'dashboard', noCache: true, affix: false },
+  path: '/course/microPreview',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/course/microPreview'], resolve),
+  name: 'microPreview',
+  meta: { title: '课程预览', icon: 'dashboard', noCache: true, affix: false },
 },
 {
-    path: '/course/rePreview',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/course/rePreview'], resolve),
-    name: 'courseRePreview',
-    meta: { title: '课程预览', icon: 'dashboard', noCache: true, affix: false },
+  path: '/course/rePreview',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/course/rePreview'], resolve),
+  name: 'courseRePreview',
+  meta: { title: '课程预览', icon: 'dashboard', noCache: true, affix: false },
 },
 //
 // 外来链接
 {
-    path: '/course/boeframe',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/boeframe'], resolve),
-    name: 'courseBoeframe',
-    meta: { title: '课程预览', icon: 'dashboard', noCache: true, affix: false },
+  path: '/course/boeframe',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/boeframe'], resolve),
+  name: 'courseBoeframe',
+  meta: { title: '课程预览', icon: 'dashboard', noCache: true, affix: false },
 },
 //外来链接
 {
-    path: '/course/recorded',
+  path: '/course/recorded',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/course/Recorded'], resolve),
+  name: 'courseDetailRecorded',
+  meta: { title: '课程详情', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  //此页面需要指定课程的参数
+  path: '/course/studyindex',
+  hidden: true,
+  component: (resolve) => require(['@/views/study/coursenew'], resolve),
+  name: 'courseStudyIndex',
+  meta: { title: '课程学习', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/case',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/case/Index'], resolve),
+  name: 'case',
+  meta: { title: '案例', keepAlive: true, icon: 'dashboard', noCache: false, affix: true },
+},
+{
+  path: '/case/detail',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/case/Detail'], resolve),
+  name: 'caseDetail',
+  meta: { title: '案例详情', keepAlive: true, icon: 'dashboard', noCache: false, affix: true },
+},
+{
+  path: '/article',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/article/Index'], resolve),
+  name: 'article',
+  meta: { title: '文章', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/article/detail',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/article/Detail'], resolve),
+  name: 'articleDetail',
+  meta: { title: '文章详情', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/article/add',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/article/Add'], resolve),
+  name: 'articleAdd',
+  meta: { title: '发布文章', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/qa',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/qa/Index'], resolve),
+  name: 'qa',
+  meta: { title: '问答', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/message',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/user/Message'], resolve),
+  name: 'userMsg',
+  meta: { title: '我的消息', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/home',
+  hidden: true,
+  component: (resolve) => require(['@/views/homepage/Index'], resolve),
+  name: 'homePage',
+  redirect: '/home/:id',
+  meta: { title: '个人主页', icon: 'dashboard', noCache: true, affix: false },
+  children: [{
+    path: ':id',
     hidden: true,
-    component: (resolve) => require(['@/views/portal/course/Recorded'], resolve),
-    name: 'courseDetailRecorded',
-    meta: { title: '课程详情', icon: 'dashboard', noCache: true, affix: false },
-},
-{
-    //此页面需要指定课程的参数
-    path: '/course/studyindex',
+    component: (resolve) => require(['@/views/homepage/page'], resolve),
+    name: 'page',
+    meta: { title: '个人主页', icon: 'dashboard', noCache: true, affix: true }
+  },
+  {
+    path: ':id/leaving',
     hidden: true,
-    component: (resolve) => require(['@/views/study/coursenew'], resolve),
-    name: 'courseStudyIndex',
-    meta: { title: '课程学习',keepAlive:true, icon: 'dashboard', noCache: true, affix: false },
+    component: (resolve) => require(['@/views/homepage/leavingMessage'], resolve),
+    name: 'leavingMessage',
+    meta: { title: '留言', icon: 'dashboard', noCache: true, affix: true }
+  }
+  ]
 },
 {
-    path: '/case',
+  path: '/comments',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/Comments'], resolve),
+  name: 'commentReply',
+  meta: { title: '评论回复', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/qa/answer',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/qa/Answer'], resolve),
+  name: 'qaAnswer',
+  meta: { title: '写回答', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/follow',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/follow'], resolve),
+  name: 'follow',
+  meta: { title: '我的关注', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/study',
+  component: Layout,
+  redirect: '/study/index',
+  children: [{
+    path: 'index',
     hidden: true,
-    component: (resolve) => require(['@/views/portal/case/Index'], resolve),
-    name: 'case',
-    meta: { title: '案例',keepAlive:true, icon: 'dashboard', noCache: false, affix: true },
+    component: (resolve) => require(['@/views/StudyIndex'], resolve),
+    name: 'studyIndex',
+    meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  }]
 },
 {
-    path: '/case/detail',
+  path: '/teacher',
+  component: Layout,
+  children: [{
+    path: 'index',
     hidden: true,
-    component: (resolve) => require(['@/views/portal/case/Detail'], resolve),
-    name: 'caseDetail',
-    meta: { title: '案例详情',keepAlive:true, icon: 'dashboard', noCache: false, affix: true },
+    component: (resolve) => require(['@/views/TeacherIndex'], resolve),
+    name: 'teacherIndex',
+    meta: { title: '教师个人中心', icon: 'dashboard', noCache: true, affix: true }
+  }]
 },
 {
-    path: '/article',
+  path: '/manager',
+  component: Layout,
+  children: [{
+    path: 'index',
     hidden: true,
-    component: (resolve) => require(['@/views/portal/article/Index'], resolve),
-    name: 'article',
-    meta: { title: '文章', icon: 'dashboard', noCache: true, affix: false },
+    component: (resolve) => require(['@/views/ManageIndex'], resolve),
+    name: 'managerIndex',
+    meta: { title: '管理员个人中心', icon: 'dashboard', noCache: true, affix: true }
+  }]
 },
 {
-    path: '/article/detail',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/article/Detail'], resolve),
-    name: 'articleDetail',
-    meta: { title: '文章详情', icon: 'dashboard', noCache: true, affix: false },
+  path: '/exam/test',
+  hidden: true,
+  component: (resolve) => require(['@/views/exam/Test'], resolve),
+  name: 'test',
+  meta: { title: '京东方大学堂考试', icon: 'dashboard', noCache: true, affix: true },
 },
 {
-    path: '/article/add',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/article/Add'], resolve),
-    name: 'articleAdd',
-    meta: { title: '发布文章', icon: 'dashboard', noCache: true, affix: false },
+  path: '/video/test',
+  hidden: true,
+  component: (resolve) => require(['@/views/portal/course/video'], resolve),
+  name: 'videotest',
+  meta: { title: '课程视频测试', icon: 'dashboard', noCache: true, affix: true },
 },
 {
-    path: '/qa',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/qa/Index'], resolve),
-    name: 'qa',
-    meta: { title: '问答', icon: 'dashboard', noCache: true, affix: false },
+  path: '/404',
+  component: (resolve) => require(['@/views/error/404'], resolve),
+  hidden: true
 },
 {
-    path: '/message',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/user/Message'], resolve),
-    name: 'userMsg',
-    meta: { title: '我的消息', icon: 'dashboard', noCache: true, affix: false },
+  path: '/401',
+  component: (resolve) => require(['@/views/error/401'], resolve),
+  hidden: true
 },
 {
-    path: '/home',
-    hidden: true,
-    component: (resolve) => require(['@/views/homepage/Index'], resolve),
-    name: 'homePage',
-    redirect: '/home/:id',
-    meta: { title: '个人主页', icon: 'dashboard', noCache: true, affix: false },
-    children: [{
-        path: ':id',
-        hidden: true,
-        component: (resolve) => require(['@/views/homepage/page'], resolve),
-        name: 'page',
-        meta: { title: '个人主页', icon: 'dashboard', noCache: true, affix: true }
-    },
-    {
-        path: ':id/leaving',
-        hidden: true,
-        component: (resolve) => require(['@/views/homepage/leavingMessage'], resolve),
-        name: 'leavingMessage',
-        meta: { title: '留言', icon: 'dashboard', noCache: true, affix: true }
-    }
-]
-},
-{
-    path: '/comments',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/Comments'], resolve),
-    name: 'commentReply',
-    meta: { title: '评论回复', icon: 'dashboard', noCache: true, affix: false },
-},
-{
-    path: '/qa/answer',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/qa/Answer'], resolve),
-    name: 'qaAnswer',
-    meta: { title: '写回答', icon: 'dashboard', noCache: true, affix: false },
-},
-{
-    path: '/follow',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/follow'], resolve),
-    name: 'follow',
-    meta: { title: '我的关注', icon: 'dashboard', noCache: true, affix: false },
-},
-{
-    path: '/study',
-    component: Layout,
-    redirect: '/study/index',
-    children: [{
-        path: 'index',
-        hidden: true,
-        component: (resolve) => require(['@/views/StudyIndex'], resolve),
-        name: 'studyIndex',
-        meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-},
-{
-    path: '/teacher',
-    component: Layout,
-    children: [{
-        path: 'index',
-        hidden: true,
-        component: (resolve) => require(['@/views/TeacherIndex'], resolve),
-        name: 'teacherIndex',
-        meta: { title: '教师个人中心', icon: 'dashboard', noCache: true, affix: true }
-    }]
-},
-{
-    path: '/manager',
-    component: Layout,
-    children: [{
-        path: 'index',
-        hidden: true,
-        component: (resolve) => require(['@/views/ManageIndex'], resolve),
-        name: 'managerIndex',
-        meta: { title: '管理员个人中心', icon: 'dashboard', noCache: true, affix: true }
-    }]
-},
-{
-    path: '/exam/test',
-    hidden: true,
-    component: (resolve) => require(['@/views/exam/Test'], resolve),
-    name: 'test',
-    meta: { title: '京东方大学堂考试', icon: 'dashboard', noCache: true, affix: true },
-},
-{
-    path: '/video/test',
-    hidden: true,
-    component: (resolve) => require(['@/views/portal/course/video'], resolve),
-    name: 'videotest',
-    meta: { title: '课程视频测试', icon: 'dashboard', noCache: true, affix: true },
-},
-{
-    path: '/404',
-    component: (resolve) => require(['@/views/error/404'], resolve),
-    hidden: true
-},
-{
-    path: '/401',
-    component: (resolve) => require(['@/views/error/401'], resolve),
-    hidden: true
-},
-{
-    path: '/500',
-    component: (resolve) => require(['@/views/error/500'], resolve),
-    hidden: true
+  path: '/500',
+  component: (resolve) => require(['@/views/error/500'], resolve),
+  hidden: true
 }
 ]
 
 const router = new VueRouter({
-    mode: 'history',
-    base: process.env.BASE_URL,
-    routes: constantRoutes,
-    scrollBehavior(to, from, saveTop) {
-        if (saveTop) {
-            return saveTop;
-        } else {
-            return { x: 0, y: 0 }
-        }
-    },
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: constantRoutes,
+  scrollBehavior(to, from, saveTop) {
+    if (saveTop) {
+      return saveTop;
+    } else {
+      return { x: 0, y: 0 }
+    }
+  },
 })
 
 export default router
diff --git a/src/views/grateful/GratefulHomePage.vue b/src/views/grateful/GratefulHomePage.vue
new file mode 100644
index 00000000..d0cb2f8d
--- /dev/null
+++ b/src/views/grateful/GratefulHomePage.vue
@@ -0,0 +1,1299 @@
+<template>
+  <div>
+    <!-- 教师赋能 -->
+    <div class="xindex-content">
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
+          <!--内容块-->
+          <div class="modules-title xindex-main">
+            <span class="modules-text">教师赋能</span>
+            <span class="more">
+              <router-link to="/grateful/teacherEmpowerment">查看更多>></router-link>
+            </span>
+          </div>
+          <div class="modules-list">
+            <!--内容列表内容-->
+            <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>
+              </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
+                  >
+                </div>
+                <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
+                    >
+                  </div>
+                  <div style="display: flex">
+                    <div v-if="course.score">
+                      <span class="course-score-value" style="margin-left: 10px"
+                        >{{ toScore(course.score) }}分</span
+                      >
+                    </div>
+                    <div v-else class="course-score-no">未评分</div>
+                  </div>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="float-tools">
+      <div class="content">
+        <img src="../../assets/images/grateful/suggestion.png" alt="" />
+        <span>给点意见</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import apiCourseStudy from "@/api/modules/courseStudy.js";
+import portalFloatTools from "@/components/PortalFloatTools.vue";
+import apiCourse from "@/api/modules/coursePortal.js";
+import apiCase from "@/api/modules/cases.js";
+import apiQa from "@/api/modules/qa.js";
+import apiGuide from "@/api/phase2/guide.js";
+import apiUser from "@/api/system/user.js";
+import interactBar from "@/components/Portal/interactBar.vue";
+import courseImage from "@/components/Course/courseImage.vue";
+import { toScore, formatUserNumber, cutOrgNamePath } from "@/utils/tools.js";
+import apiPlace from "@/api/phase2/place.js";
+import apiStat from "@/api/phase2/stat.js";
+import apiIndex from "@/api/phase2/index.js";
+import apiUserhobby from "@/api/phase2/userhobby.js";
+export default {
+  name: "Grateful",
+  components: {
+    portalFloatTools,
+    interactBar,
+    courseImage,
+  },
+  created() {
+    this.$store.dispatch("refrashStudyTaskCount");
+    let $this = this;
+    //判断是否弹出登录勋章，设置截止日期
+    var nowDate = new Date();
+    var endDate = new Date("2022-11-18"); //先设置时间是11月18日
+    if (nowDate < endDate) {
+      apiStat.getUserLoginMedal().then((rs) => {
+        if (rs.status == 200) {
+          if (rs.result.show) {
+            //设置是否需要显示纪念勋章
+            $this.needLoginMedal = true;
+          }
+        }
+      });
+    }
+    //提取需要提示勋章
+    // apiStat.getUserMedalTips().then(res=>{
+    //    if(res.status==200){
+    //       $this.medalTips=res.result;
+    //    }
+    // })
+  },
+  data() {
+    return {
+      showUClass: false,
+      showLoginMedal: false, //是否显示登录勋章
+      needLoginMedal: false, //是否需要显示纪念勋章
+      medalTips: [
+        { medalId: 1, medalLevel: 5, isShow: false },
+        { medalId: 3, medalLevel: 4, isShow: false },
+      ],
+      lastStudy: {},
+      overlayShow: false,
+      userData: { level: 1, uvalue: 0, totalStudyHour: 0 },
+      userHobby: {
+        needShow: false,
+        localKeyPre: "user-hobby-", //本地存储的key
+      },
+      needHobbyShow: false, //是否显示兴趣爱好
+      formatNum: formatUserNumber,
+      cutOrgNamePath: cutOrgNamePath,
+      // userInfo: {},
+      ankingList: [],
+      answersList: [],
+      Popularity: [],
+      scorelist: [],
+      resonimg: [],
+      swiperOptiontwo: {
+        autoplay: false,
+        // noSwiping: true,
+      },
+      swiperOption: {
+        autoplay: {
+          delay: 2000,
+          disableOnInteraction: false, //解决滑动后不能轮播的问题
+        },
+        speed: 3000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
+        loop: true, //循环切换
+        peed: 300, //循环速度
+        scrollbar: ".swiper-scrollbar",
+        pagination: {
+          el: ".swiper-pagination",
+          // type : 'progressbar', //分页器形状
+          clickable: true, //点击分页器的指示点分页器会控制Swiper切换
+        },
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+
+      couname: "",
+      isNext: true,
+      pageIndex: 1,
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+      toScore,
+      courseList: {
+        num: 12,
+        orderType: 2,
+        list: [],
+      },
+      caseList: {
+        num: 3,
+        orderType: 2,
+        list: [],
+      },
+      articleList: {
+        num: 4,
+        orderType: 2,
+        first: {
+          id: "",
+          authorInfo: {},
+        },
+        list: [],
+      },
+      qaList: {
+        num: 4,
+        orderType: "views",
+        list: [],
+      },
+    };
+  },
+  mounted() {
+    this.getCourseData(1);
+    this.getCaseData();
+    this.getArticleData();
+    this.getQaData();
+    this.couresreso();
+    this.getScoreList();
+    this.getPopularity();
+    this.getAnkingData();
+    this.getLevel();
+    this.getQaAnswers();
+    this.getLastStudy();
+
+    //检查兴趣爱好是否已填报,
+    //先检查本地session和 local 15天, 这两个值是在组件中设置的
+    let sessionHobby = sessionStorage.getItem(
+      "user-hobby-" + this.userInfo.aid
+    );
+    let localHobbyTime = localStorage.getItem("notYet" + this.userInfo.aid);
+    if (!sessionHobby) {
+      //只有session中不存在，才会验证
+      //本地15天验证,localHobby,后续完善
+      let flag = true; //请求检查
+      if (localHobbyTime) {
+        let day =
+          (new Date() - new Date(localHobbyTime)) / (1000 * 60 * 60 * 24);
+        if (day < 15) {
+          flag = false;
+        }
+      }
+      if (flag) {
+        apiUserhobby.has().then((res) => {
+          if (res.status == 200) {
+            if (!res.result) {
+              //设置需要显示兴趣爱好收集窗口
+              this.userHobby.needShow = true;
+            }
+          } else {
+            console.log("兴趣爱好检查失败" + res.message);
+          }
+          //检查引导页
+          this.checkAndShowGuide();
+        });
+      } else {
+        this.checkAndShowGuide();
+      }
+    } else {
+      //检查引导页
+      this.checkAndShowGuide();
+    }
+    //this.$refs.userCollection.show();
+  },
+  computed: {
+    ...mapGetters(["userInfo", "studyTaskCount"]),
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    },
+  },
+  methods: {
+    tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
+    uOnClick() {
+      this.showUClass = true;
+    },
+    setCurIdentity(iden) {
+      this.$store.dispatch("SetCurIdentity", iden);
+    },
+    closeJinian() {
+      this.showLoginMedal = false;
+    },
+    banJump(item) {
+      if (item.JumpUrl) {
+        window.open(item.JumpUrl);
+      }
+    },
+    //上次学习记录
+    getLastStudy() {
+      apiCourseStudy.lastStudy().then((res) => {
+        if (res.status === 200) {
+          this.lastStudy = res.result;
+          if (res.result != "" && res.result.courseId) {
+            this.overlayShow = true;
+          }
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    //检查并弹出引导页
+    checkAndShowGuide() {
+      //引导页弹框是否显示
+      //检查本地,减少服务器请求的次数
+      let localGuide = localStorage.getItem("user-guide-" + this.userInfo.aid);
+      if (!localGuide) {
+        apiGuide.hasUser().then((res) => {
+          if (res.status == 200) {
+            if (!res.result) {
+              this.$refs.guide.show();
+            } else {
+              if (this.userHobby.needShow) {
+                this.$refs.userCollection.show();
+              } else {
+                if (this.needLoginMedal) {
+                  this.showLoginMedal = true;
+                }
+              }
+            }
+            localStorage.setItem("user-guide-" + this.userInfo.aid, 1);
+          } else {
+            console.log("获取引导页检查失败" + res.message);
+            //this.$message.error('')
+            if (this.userHobby.needShow) {
+              this.$refs.userCollection.show();
+            }
+          }
+        });
+      } else {
+        if (this.userHobby.needShow) {
+          this.$refs.userCollection.show();
+        } else {
+          if (this.needLoginMedal) {
+            this.showLoginMedal = true;
+          }
+        }
+      }
+
+      //测试情况下
+      // this.$refs.guide.show();
+    },
+    closeGuide() {
+      //关闭引导页
+      if (this.userHobby.needShow) {
+        //需要弹出兴趣收集页，弹出兴趣收集页
+        this.$refs.userCollection.show();
+      }
+    },
+    closeCollection() {
+      if (this.needLoginMedal) {
+        this.showLoginMedal = true;
+      }
+    },
+    jumstudy() {
+      this.$router.push({ path: "../views/study/TaskList.vue" });
+    },
+    jumcasedet(item) {
+      this.$router.push({ path: "/case/detail", query: { id: item.id } });
+    },
+    getPic(index) {
+      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
+    },
+    getLevel() {
+      //获取经验值和等级
+      apiStat.getUserStatTotalInfo(this.userInfo.aid).then((res) => {
+        if (res.status == 200) {
+          this.userData = res.result;
+          //console.log(this.userData,'this.userData')
+        }
+      });
+    },
+    getQaAnswers() {
+      apiIndex.qaAnswers(10).then((res) => {
+        if (res.status == 200) {
+          this.answersList = res.result;
+        }
+      });
+    },
+    getAnkingData() {
+      //  文章排行榜
+      apiIndex.articleViews(10).then((res) => {
+        if (res.status == 200) {
+          this.ankingList = res.result;
+        }
+      });
+    },
+    getPopularity() {
+      //案例排行榜
+      apiCase.queryPraises(10).then((res) => {
+        if (res.status == 200) {
+          this.Popularity = res.result;
+          // console.log(this.Popularity)
+        }
+      });
+    },
+    getScoreList() {
+      //课程排行榜
+      apiCourse.scorelist(10, 1).then((res) => {
+        if (res.status == 200) {
+          res.result.forEach((item) => {
+            if (item.publishTime != "") {
+              item.coverImg = item.images;
+              let time = item.publishTime.split("-");
+              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`;
+            }
+          });
+          this.scorelist = res.result;
+          //console.log(this.scorelist,'this.scorelist');
+        }
+      });
+    },
+    // bgfun(){
+    //  console.log(this.$refs.bannimg[0]);
+    //  this.$nextTick(() => {
+    // 		console.log(this.$refs.bannimg[0])
+    // 	})
+    // },
+    couresreso() {
+      let key = "index";
+      apiPlace.detail(key).then((res) => {
+        let lmj = JSON.parse(res.result.content);
+        this.resonimg = lmj;
+      });
+    },
+    jumUX() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
+    },
+    toCourseDetail(item) {
+      //二期调整，直接改成一个地址
+      //return this.webBaseUrl + '/course/detail?id=' + item.id;
+      let $this = this;
+      if (item.type == 10) {
+        //return this.webBaseUrl + "/course/studyindex?id=" + item.id;
+        //console.log("直接进入学习页面");
+        this.$router.push("/course/studyindex?id=" + item.id);
+      } else if (item.type == 20) {
+        apiCourseStudy.hasSignup(item.id).then((rs) => {
+          if (rs.status == 200) {
+            //return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
+            this.$router.push("/course/studyindex?id=" + item.id);
+          } else {
+            //return $this.webBaseUrl + "/course/detail?id=" + item.id;
+            this.$router.push("/course/detail?id=" + item.id);
+          }
+        });
+        //return $this.webBaseUrl + "/course/detail?id=" + item.id;
+      }
+    },
+    orderTypeFilter(val) {
+      this.courseList.orderType = val;
+      this.pageIndex = 1;
+      this.getCourseData();
+    },
+    nextPage() {
+      this.pageIndex += 1;
+      if (this.isNext) {
+        this.getCourseData(this.pageIndex);
+      }
+    },
+    getCourseData(pageIndex) {
+      this.isNext = false;
+      let { orderType, num } = this.courseList;
+      let course = {
+        pageSize: 6,
+        device: 1,
+        orderField: orderType == 1 ? "" : "studys",
+        orderAsc: false,
+        topOrder: true,
+        pageIndex: pageIndex,
+      };
+
+      apiIndex.courselist(course).then((res) => {
+        if (res.status == 200 && res.result.length > 0) {
+          let courseIds = [];
+          res.result.forEach((item) => {
+            item.authorInfo = {
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              code: "",
+              sex: null,
+            };
+            courseIds.push(item.id);
+          });
+          this.loadCouserTeacher(res.result, courseIds);
+          this.courseList.list = res.result;
+          //this.couname = res.result.list.name;
+          // if (res.result.count - pageIndex * num < 8) {
+          //   this.pageIndex = 0;
+          // }
+          // this.isNext = true;
+
+          // }
+        } else {
+          console.log("加载课程信息失败:" + res.error);
+        }
+      });
+
+      // apiCourse.list({orderType,num,device:1}).then(res => {
+      //     if(res.status==200){
+      //       if(res.result.length>0){
+      //         let courseIds=[];
+      //         res.result.forEach(item=>{
+      //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
+      //           courseIds.push(item.id);
+      //         })
+      //         this.loadCouserTeacher(res.result,courseIds);
+      //         this.courseList.list=res.result;
+      //       }
+      //     }else{
+      //       console.log('加载课程信息失败:'+res.error);
+      //     }
+      //   })
+    },
+    // 去掉案例的推荐课程
+    // changeCaseOrder(val) {
+    //   this.caseList.orderType = val;
+    //   this.getCaseData();
+    // },
+
+    //案例的参数等着需要改
+    getCaseData() {
+      apiIndex.newCases().then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+
+              if (item.authorId && item.authorId != "") {
+                userIds.push(item.authorId);
+              }
+            });
+            this.caseList.list = res.result;
+            this.loadCaseAuthorInfo(res.result, userIds);
+          }
+          // this.caseList.list = res.result;
+        } else {
+          console.log("加载案例错误：" + res.error);
+        }
+      });
+    },
+    loadCaseAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.authorId) {
+                author.orgInfo = cutOrgNamePath(author.orgInfo, 1);
+                item.authorInfo = author;
+
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+          //this.$message.error(res.message);
+        }
+      });
+    },
+    getArticleData() {
+      let $this = this;
+      this.articleList.list = [];
+      apiIndex.articlelist(this.articleList.orderType).then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item, idx) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+              userIds.push(item.sysCreateAid);
+              if (idx == 0) {
+                $this.articleList.first = item;
+              } else {
+                $this.articleList.list.push(item);
+              }
+            });
+            // console.log(res.result, 'res.result');
+            this.loadAuthorInfo(res.result, userIds);
+          }
+        } else {
+          console.log("加载文章错误：" + res.error);
+        }
+      });
+    },
+    changeArticleOrder(val) {
+      this.articleList.orderType = val;
+      this.getArticleData();
+    },
+    getQaData() {
+      let params = {
+        pageSize: this.qaList.num,
+        orderAsc: false,
+        orderField: this.qaList.orderType,
+      };
+      // if (this.qaList.orderType == 2) {
+      //   params.orderField = 'praises';
+      // }
+      apiQa.indexList(params).then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+              userIds.push(item.sysCreateAid);
+            });
+            this.qaList.list = res.result;
+            this.loadAuthorInfo(res.result, userIds);
+          }
+        } else {
+          console.log("加载问答错误：" + res.error);
+        }
+        //console.log(res)
+      });
+    },
+    changeQaOrder(val) {
+      this.qaList.orderType = val;
+      this.getQaData();
+    },
+    loadCouserTeacher(list, ids) {
+      let that = this;
+      // 先查课程关联教师iD
+      apiCourse.getTeacherByCourseIDs(ids).then((cres) => {
+        if (cres.status == 200) {
+          let userIds = [];
+          list.forEach((item, index) => {
+            cres.result.some((courseTeahcer) => {
+              if (courseTeahcer.courseId == item.id) {
+                if (courseTeahcer.teacherIds) {
+                  userIds.push(courseTeahcer.teacherIds[0]);
+                  item.authorInfo.aid = courseTeahcer.teacherIds[0];
+                  item.authorInfo.name = courseTeahcer.names[0];
+                  if (item.authorInfo.name == "BOE教师") {
+                    item.authorInfo.name = "";
+                  }
+                }
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+          //that.loadCourseAuthorInfo(list, userIds);
+        }
+      });
+    },
+    loadCourseAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.authorInfo.aid) {
+                item.authorInfo = author;
+
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+        }
+      });
+    },
+    loadAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.sysCreateAid) {
+                item.authorInfo = author;
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+        }
+      });
+    },
+    jumpRouter(item) {
+      this.$router.push({
+        path: "/qa/answer",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.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;
+    display: flex;
+    align-items: center;
+    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;
+      font-size: 20px;
+    }
+  }
+}
+
+.xindex-course-image:hover {
+  transform: scale(1.3) translateY(-15px);
+  transition: all 0.6s;
+}
+
+.bannbox {
+  width: 100%;
+  height: 520px;
+  text-align: center;
+  filter: blur(5px);
+  z-index: -1;
+  background-size: 100% 100%;
+}
+
+::v-deep.swiper-slide .games .swiper-slide-active {
+  text-align: center !important;
+}
+
+#container {
+  position: absolute;
+  height: 520px;
+  top: 0;
+  width: 100%;
+}
+
+.banner-img {
+  height: 520px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: (-50%, -50%);
+}
+
+.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-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-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;
+    border-radius: 19px;
+    //  background: rgba($color: #000000, $alpha: 0.1);
+    width: auto;
+    left: 45%;
+    padding: 0 20px;
+    border-radius: 19px;
+    .swiper-pagination-bullet {
+      position: relative;
+      width: 25px;
+      height: 5px;
+      margin-top: 10px;
+      background: #fff;
+      opacity: 1 !important;
+      // background: rgba($color: #fff, $alpha: 0.5);
+      border-radius: 2px;
+    }
+    .swiper-pagination-bullet::before {
+      content: "";
+      position: absolute;
+      top: -20px;
+      bottom: -20px;
+      left: -2px;
+      right: -2px;
+    }
+    .swiper-pagination-bullet-active {
+      height: 5px;
+      opacity: 1 !important;
+      margin-top: 10px;
+      width: 25px;
+      background: #387df7;
+      // background: rgba($color: #fff, $alpha: 0.8);
+      border-radius: 2px;
+    }
+    .swiper-container {
+      // background-color: rgba($color: #000000, $alpha: 0.2);
+    }
+  }
+}
+
+.three-line-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  -webkit-line-clamp: 3;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.two-line-ellipsis {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  box-sizing: border-box;
+}
+
+.course-card {
+  padding-bottom: 22px;
+  box-sizing: border-box;
+  position: relative;
+  background-color: #ffffff;
+
+  .course-image-box {
+    position: relative;
+    .course-type {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      width: 60px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background-color: #f99000;
+      border-radius: 2px 4px 2px 14px;
+      font-size: 12px;
+      color: #ffffff;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-type-title {
+      position: absolute;
+      top: 5px;
+      right: 0px;
+      width: 90px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #ffffff;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-flag {
+      height: 26px;
+      position: absolute;
+      top: 15px;
+      right: 0;
+    }
+
+    .course-tip {
+      width: 100%;
+      height: 26px;
+      position: absolute;
+      bottom: 0;
+      padding: 0 10px;
+      color: #fff;
+      font-size: 14px;
+
+      .course-study-count {
+        float: left;
+      }
+
+      .course-time {
+        float: right;
+      }
+    }
+  }
+
+  .course-title {
+    margin: 16px 0 16px 0;
+    height: 44px;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+  }
+  .course-title-box {
+    display: flex;
+  }
+  .course-author {
+    display: flex;
+    justify-content: space-between;
+
+    .course-author-left {
+      font-size: 14px;
+      color: #6e7b84;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+  }
+
+  .study-num {
+    font-size: 14px;
+    color: #6e7b84;
+    // margin-left: 12px;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+  }
+
+  .course-score {
+    padding: 10px 15px;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .course-score-star {
+      flex: 1;
+    }
+  }
+}
+
+// 内容部分
+.modules {
+  margin-top: 20px;
+  display: flex;
+
+  .modules-title {
+    .modules-text {
+      height: 28px;
+      font-size: 20px;
+      font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
+      font-weight: 700;
+      color: #333333;
+    }
+
+    .recommend {
+      vertical-align: text-bottom;
+      height: 26px;
+    }
+
+    .quyer-tag {
+      margin-left: 15px;
+
+      a {
+        color: #333333;
+        font-size: 14px;
+        margin: 0 15px;
+        display: inline-block;
+        text-decoration: none;
+        outline: none;
+      }
+
+      .current {
+        width: 44px;
+        height: 26px;
+        background: #387df7;
+        border-radius: 4px;
+        color: #fff;
+        line-height: 26px;
+        text-align: center;
+      }
+    }
+
+    .more {
+      float: right;
+      margin-top: 7px;
+      margin-right: 30px;
+      color: #333333;
+      font-size: 14px;
+    }
+  }
+
+  .modules-list {
+    margin-top: 30px;
+    .case-card {
+      margin-bottom: 15px;
+
+      .case-info-image-box {
+        position: relative;
+
+        .case-info {
+          width: 385px;
+
+          .case-info-title {
+            font-size: 18px;
+            color: #343434;
+            margin-bottom: 5px;
+
+            .case-info-time {
+              font-size: 12px;
+              color: #999999;
+              float: right;
+              margin-top: 8px;
+            }
+          }
+
+          .case-info-summary {
+            font-size: 12px;
+            color: #666666;
+            height: 82px;
+            line-height: 18px;
+          }
+        }
+
+        img {
+          width: 160px;
+          height: 105px;
+          position: absolute;
+          top: 5px;
+          right: 0;
+        }
+      }
+
+      .case-info-box {
+        .case-info {
+          .case-info-title {
+            font-size: 18px;
+            color: #343434;
+            margin-bottom: 5px;
+
+            .case-info-time {
+              font-size: 12px;
+              color: #999999;
+              float: right;
+              margin-top: 8px;
+            }
+          }
+
+          .case-info-summary {
+            font-size: 12px;
+            color: #666666;
+            height: 82px;
+            line-height: 18px;
+          }
+        }
+      }
+
+      .case-other-info {
+        height: 40px;
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+    .article-card {
+      background: #fff;
+      border-radius: 8px;
+
+      .article-card-left {
+        .article-card-box {
+          .article-info-image-box {
+            border-radius: 4px;
+            .article-info {
+              height: 400px;
+
+              .article-info-title {
+                font-size: 16px;
+                color: #00253e;
+                font-weight: 500;
+                margin-bottom: 5px;
+                margin-top: 5px;
+              }
+
+              .article-info-summary {
+                font-size: 14px;
+                color: #6e7b84;
+                height: 160px;
+                line-height: 22px;
+              }
+            }
+
+            img {
+              width: 470px;
+              height: 330px;
+            }
+          }
+        }
+      }
+
+      .article-card-right {
+        flex: 1;
+        margin-left: 28px;
+
+        .article-card-box {
+          margin-bottom: 16px;
+          padding-bottom: 16px;
+
+          &:last-child {
+            margin-bottom: 0px;
+            padding-bottom: 0px;
+          }
+
+          .article-info-box {
+            .article-info {
+              display: flex;
+
+              .article-image {
+                width: 140px;
+                height: 105px;
+                margin-top: 10px;
+                margin-left: 20px;
+              }
+
+              .article-body {
+                flex: 1;
+
+                .article-info-title {
+                  font-size: 18px;
+                  color: #343434;
+                  margin-bottom: 5px;
+
+                  .article-info-time {
+                    font-size: 12px;
+                    color: #999999;
+                    float: right;
+                    margin-top: 8px;
+                    font-weight: 500;
+                  }
+                }
+
+                .article-info-summary {
+                  padding-top: 9px;
+                  font-size: 14px;
+                  color: #666666;
+                  height: 43px;
+                  line-height: 18px;
+                  font-weight: 500;
+                  margin-bottom: 20px;
+                }
+              }
+            }
+          }
+        }
+
+        .article-card-box:not(:last-child) {
+          border-bottom: 1px solid #ededed;
+        }
+      }
+
+      .article-other-info {
+        display: flex;
+      }
+    }
+
+    .qa-card {
+      box-sizing: border-box;
+      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+      border-radius: 8px;
+      background: #fff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .qa-top {
+        & span:first-child {
+          height: 24px;
+          background: rgba($color: #387df7, $alpha: 0.05);
+          border-radius: 4px;
+          font-size: 12px;
+          color: #387df7;
+        }
+
+        span {
+          color: #6e7b84;
+        }
+      }
+
+      .qa-center {
+        position: relative;
+        background: rgba($color: #04243c, $alpha: 0.04);
+        border-radius: 4px;
+        .qa-views {
+          position: absolute;
+          color: #6e7b84;
+        }
+      }
+
+      .qa-char {
+        display: flex;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/grateful/TeacherEmpowerment.vue b/src/views/grateful/TeacherEmpowerment.vue
new file mode 100644
index 00000000..03b9afc0
--- /dev/null
+++ b/src/views/grateful/TeacherEmpowerment.vue
@@ -0,0 +1,1273 @@
+<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
+              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>
+              </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
+                  >
+                </div>
+                <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
+                    >
+                  </div>
+                  <div style="display: flex">
+                    <div v-if="course.score">
+                      <span class="course-score-value" style="margin-left: 10px"
+                        >{{ toScore(course.score) }}分</span
+                      >
+                    </div>
+                    <div v-else class="course-score-no">未评分</div>
+                  </div>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import apiCourseStudy from "@/api/modules/courseStudy.js";
+import portalFloatTools from "@/components/PortalFloatTools.vue";
+import apiCourse from "@/api/modules/coursePortal.js";
+import apiCase from "@/api/modules/cases.js";
+import apiQa from "@/api/modules/qa.js";
+import apiGuide from "@/api/phase2/guide.js";
+import apiUser from "@/api/system/user.js";
+import interactBar from "@/components/Portal/interactBar.vue";
+import courseImage from "@/components/Course/courseImage.vue";
+import { toScore, formatUserNumber, cutOrgNamePath } from "@/utils/tools.js";
+import apiPlace from "@/api/phase2/place.js";
+import apiStat from "@/api/phase2/stat.js";
+import apiIndex from "@/api/phase2/index.js";
+import apiUserhobby from "@/api/phase2/userhobby.js";
+export default {
+  name: "Grateful",
+  components: {
+    portalFloatTools,
+    interactBar,
+    courseImage,
+  },
+  created() {
+    this.$store.dispatch("refrashStudyTaskCount");
+    let $this = this;
+    //判断是否弹出登录勋章，设置截止日期
+    var nowDate = new Date();
+    var endDate = new Date("2022-11-18"); //先设置时间是11月18日
+    if (nowDate < endDate) {
+      apiStat.getUserLoginMedal().then((rs) => {
+        if (rs.status == 200) {
+          if (rs.result.show) {
+            //设置是否需要显示纪念勋章
+            $this.needLoginMedal = true;
+          }
+        }
+      });
+    }
+    //提取需要提示勋章
+    // apiStat.getUserMedalTips().then(res=>{
+    //    if(res.status==200){
+    //       $this.medalTips=res.result;
+    //    }
+    // })
+  },
+  data() {
+    return {
+      showUClass: false,
+      showLoginMedal: false, //是否显示登录勋章
+      needLoginMedal: false, //是否需要显示纪念勋章
+      medalTips: [
+        { medalId: 1, medalLevel: 5, isShow: false },
+        { medalId: 3, medalLevel: 4, isShow: false },
+      ],
+      lastStudy: {},
+      overlayShow: false,
+      userData: { level: 1, uvalue: 0, totalStudyHour: 0 },
+      userHobby: {
+        needShow: false,
+        localKeyPre: "user-hobby-", //本地存储的key
+      },
+      needHobbyShow: false, //是否显示兴趣爱好
+      formatNum: formatUserNumber,
+      cutOrgNamePath: cutOrgNamePath,
+      // userInfo: {},
+      ankingList: [],
+      answersList: [],
+      Popularity: [],
+      scorelist: [],
+      resonimg: [],
+      swiperOptiontwo: {
+        autoplay: false,
+        // noSwiping: true,
+      },
+      swiperOption: {
+        autoplay: {
+          delay: 2000,
+          disableOnInteraction: false, //解决滑动后不能轮播的问题
+        },
+        speed: 3000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
+        loop: true, //循环切换
+        peed: 300, //循环速度
+        scrollbar: ".swiper-scrollbar",
+        pagination: {
+          el: ".swiper-pagination",
+          // type : 'progressbar', //分页器形状
+          clickable: true, //点击分页器的指示点分页器会控制Swiper切换
+        },
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+
+      couname: "",
+      isNext: true,
+      pageIndex: 1,
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+      toScore,
+      courseList: {
+        num: 12,
+        orderType: 2,
+        list: [],
+        count: 0,
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      caseList: {
+        num: 3,
+        orderType: 2,
+        list: [],
+      },
+      articleList: {
+        num: 4,
+        orderType: 2,
+        first: {
+          id: "",
+          authorInfo: {},
+        },
+        list: [],
+      },
+      qaList: {
+        num: 4,
+        orderType: "views",
+        list: [],
+      },
+    };
+  },
+  mounted() {
+    this.getCourseData(1);
+    this.getCaseData();
+    this.getArticleData();
+    this.getQaData();
+    this.couresreso();
+    this.getScoreList();
+    this.getPopularity();
+    this.getAnkingData();
+    this.getLevel();
+    this.getQaAnswers();
+    this.getLastStudy();
+
+    //检查兴趣爱好是否已填报,
+    //先检查本地session和 local 15天, 这两个值是在组件中设置的
+    let sessionHobby = sessionStorage.getItem(
+      "user-hobby-" + this.userInfo.aid
+    );
+    let localHobbyTime = localStorage.getItem("notYet" + this.userInfo.aid);
+    if (!sessionHobby) {
+      //只有session中不存在，才会验证
+      //本地15天验证,localHobby,后续完善
+      let flag = true; //请求检查
+      if (localHobbyTime) {
+        let day =
+          (new Date() - new Date(localHobbyTime)) / (1000 * 60 * 60 * 24);
+        if (day < 15) {
+          flag = false;
+        }
+      }
+      if (flag) {
+        apiUserhobby.has().then((res) => {
+          if (res.status == 200) {
+            if (!res.result) {
+              //设置需要显示兴趣爱好收集窗口
+              this.userHobby.needShow = true;
+            }
+          } else {
+            console.log("兴趣爱好检查失败" + res.message);
+          }
+          //检查引导页
+          this.checkAndShowGuide();
+        });
+      } else {
+        this.checkAndShowGuide();
+      }
+    } else {
+      //检查引导页
+      this.checkAndShowGuide();
+    }
+    //this.$refs.userCollection.show();
+  },
+  computed: {
+    ...mapGetters(["userInfo", "studyTaskCount"]),
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    },
+  },
+  methods: {
+    changePageSize(pageSize) {
+      this.courseList.pageSize = pageSize;
+    },
+    loadData(pindex) {
+      console.log(pindex);
+
+    },
+    tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
+    uOnClick() {
+      this.showUClass = true;
+    },
+    setCurIdentity(iden) {
+      this.$store.dispatch("SetCurIdentity", iden);
+    },
+    closeJinian() {
+      this.showLoginMedal = false;
+    },
+    banJump(item) {
+      if (item.JumpUrl) {
+        window.open(item.JumpUrl);
+      }
+    },
+    //上次学习记录
+    getLastStudy() {
+      apiCourseStudy.lastStudy().then((res) => {
+        if (res.status === 200) {
+          this.lastStudy = res.result;
+          if (res.result != "" && res.result.courseId) {
+            this.overlayShow = true;
+          }
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    //检查并弹出引导页
+    checkAndShowGuide() {
+      //引导页弹框是否显示
+      //检查本地,减少服务器请求的次数
+      let localGuide = localStorage.getItem("user-guide-" + this.userInfo.aid);
+      if (!localGuide) {
+        apiGuide.hasUser().then((res) => {
+          if (res.status == 200) {
+            if (!res.result) {
+              this.$refs.guide.show();
+            } else {
+              if (this.userHobby.needShow) {
+                this.$refs.userCollection.show();
+              } else {
+                if (this.needLoginMedal) {
+                  this.showLoginMedal = true;
+                }
+              }
+            }
+            localStorage.setItem("user-guide-" + this.userInfo.aid, 1);
+          } else {
+            console.log("获取引导页检查失败" + res.message);
+            //this.$message.error('')
+            if (this.userHobby.needShow) {
+              this.$refs.userCollection.show();
+            }
+          }
+        });
+      } else {
+        if (this.userHobby.needShow) {
+          this.$refs.userCollection.show();
+        } else {
+          if (this.needLoginMedal) {
+            this.showLoginMedal = true;
+          }
+        }
+      }
+
+      //测试情况下
+      // this.$refs.guide.show();
+    },
+    closeGuide() {
+      //关闭引导页
+      if (this.userHobby.needShow) {
+        //需要弹出兴趣收集页，弹出兴趣收集页
+        this.$refs.userCollection.show();
+      }
+    },
+    closeCollection() {
+      if (this.needLoginMedal) {
+        this.showLoginMedal = true;
+      }
+    },
+    jumstudy() {
+      this.$router.push({ path: "../views/study/TaskList.vue" });
+    },
+    jumcasedet(item) {
+      this.$router.push({ path: "/case/detail", query: { id: item.id } });
+    },
+    getPic(index) {
+      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
+    },
+    getLevel() {
+      //获取经验值和等级
+      apiStat.getUserStatTotalInfo(this.userInfo.aid).then((res) => {
+        if (res.status == 200) {
+          this.userData = res.result;
+          //console.log(this.userData,'this.userData')
+        }
+      });
+    },
+    getQaAnswers() {
+      apiIndex.qaAnswers(10).then((res) => {
+        if (res.status == 200) {
+          this.answersList = res.result;
+        }
+      });
+    },
+    getAnkingData() {
+      //  文章排行榜
+      apiIndex.articleViews(10).then((res) => {
+        if (res.status == 200) {
+          this.ankingList = res.result;
+        }
+      });
+    },
+    getPopularity() {
+      //案例排行榜
+      apiCase.queryPraises(10).then((res) => {
+        if (res.status == 200) {
+          this.Popularity = res.result;
+          // console.log(this.Popularity)
+        }
+      });
+    },
+    getScoreList() {
+      //课程排行榜
+      apiCourse.scorelist(10, 1).then((res) => {
+        if (res.status == 200) {
+          res.result.forEach((item) => {
+            if (item.publishTime != "") {
+              item.coverImg = item.images;
+              let time = item.publishTime.split("-");
+              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`;
+            }
+          });
+          this.scorelist = res.result;
+          //console.log(this.scorelist,'this.scorelist');
+        }
+      });
+    },
+    // bgfun(){
+    //  console.log(this.$refs.bannimg[0]);
+    //  this.$nextTick(() => {
+    // 		console.log(this.$refs.bannimg[0])
+    // 	})
+    // },
+    couresreso() {
+      let key = "index";
+      apiPlace.detail(key).then((res) => {
+        let lmj = JSON.parse(res.result.content);
+        this.resonimg = lmj;
+      });
+    },
+    jumUX() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
+    },
+    toCourseDetail(item) {
+      //二期调整，直接改成一个地址
+      //return this.webBaseUrl + '/course/detail?id=' + item.id;
+      let $this = this;
+      if (item.type == 10) {
+        //return this.webBaseUrl + "/course/studyindex?id=" + item.id;
+        //console.log("直接进入学习页面");
+        this.$router.push("/course/studyindex?id=" + item.id);
+      } else if (item.type == 20) {
+        apiCourseStudy.hasSignup(item.id).then((rs) => {
+          if (rs.status == 200) {
+            //return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
+            this.$router.push("/course/studyindex?id=" + item.id);
+          } else {
+            //return $this.webBaseUrl + "/course/detail?id=" + item.id;
+            this.$router.push("/course/detail?id=" + item.id);
+          }
+        });
+        //return $this.webBaseUrl + "/course/detail?id=" + item.id;
+      }
+    },
+    orderTypeFilter(val) {
+      this.courseList.orderType = val;
+      this.pageIndex = 1;
+      this.getCourseData();
+    },
+    nextPage() {
+      this.pageIndex += 1;
+      if (this.isNext) {
+        this.getCourseData(this.pageIndex);
+      }
+    },
+    getCourseData(pageIndex) {
+      this.isNext = false;
+      let { orderType, num } = this.courseList;
+      let course = {
+        pageSize: 6,
+        device: 1,
+        orderField: orderType == 1 ? "" : "studys",
+        orderAsc: false,
+        topOrder: true,
+        pageIndex: pageIndex,
+      };
+
+      apiIndex.courselist(course).then((res) => {
+        if (res.status == 200 && res.result.length > 0) {
+          let courseIds = [];
+          res.result.forEach((item) => {
+            item.authorInfo = {
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              code: "",
+              sex: null,
+            };
+            courseIds.push(item.id);
+          });
+          this.loadCouserTeacher(res.result, courseIds);
+          this.courseList.list = res.result;
+          //this.couname = res.result.list.name;
+          // if (res.result.count - pageIndex * num < 8) {
+          //   this.pageIndex = 0;
+          // }
+          // this.isNext = true;
+
+          // }
+        } else {
+          console.log("加载课程信息失败:" + res.error);
+        }
+      });
+
+      // apiCourse.list({orderType,num,device:1}).then(res => {
+      //     if(res.status==200){
+      //       if(res.result.length>0){
+      //         let courseIds=[];
+      //         res.result.forEach(item=>{
+      //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
+      //           courseIds.push(item.id);
+      //         })
+      //         this.loadCouserTeacher(res.result,courseIds);
+      //         this.courseList.list=res.result;
+      //       }
+      //     }else{
+      //       console.log('加载课程信息失败:'+res.error);
+      //     }
+      //   })
+    },
+    // 去掉案例的推荐课程
+    // changeCaseOrder(val) {
+    //   this.caseList.orderType = val;
+    //   this.getCaseData();
+    // },
+
+    //案例的参数等着需要改
+    getCaseData() {
+      apiIndex.newCases().then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+
+              if (item.authorId && item.authorId != "") {
+                userIds.push(item.authorId);
+              }
+            });
+            this.caseList.list = res.result;
+            this.loadCaseAuthorInfo(res.result, userIds);
+          }
+          // this.caseList.list = res.result;
+        } else {
+          console.log("加载案例错误：" + res.error);
+        }
+      });
+    },
+    loadCaseAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.authorId) {
+                author.orgInfo = cutOrgNamePath(author.orgInfo, 1);
+                item.authorInfo = author;
+
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+          //this.$message.error(res.message);
+        }
+      });
+    },
+    getArticleData() {
+      let $this = this;
+      this.articleList.list = [];
+      apiIndex.articlelist(this.articleList.orderType).then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item, idx) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+              userIds.push(item.sysCreateAid);
+              if (idx == 0) {
+                $this.articleList.first = item;
+              } else {
+                $this.articleList.list.push(item);
+              }
+            });
+            // console.log(res.result, 'res.result');
+            this.loadAuthorInfo(res.result, userIds);
+          }
+        } else {
+          console.log("加载文章错误：" + res.error);
+        }
+      });
+    },
+    changeArticleOrder(val) {
+      this.articleList.orderType = val;
+      this.getArticleData();
+    },
+    getQaData() {
+      let params = {
+        pageSize: this.qaList.num,
+        orderAsc: false,
+        orderField: this.qaList.orderType,
+      };
+      // if (this.qaList.orderType == 2) {
+      //   params.orderField = 'praises';
+      // }
+      apiQa.indexList(params).then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+              userIds.push(item.sysCreateAid);
+            });
+            this.qaList.list = res.result;
+            this.loadAuthorInfo(res.result, userIds);
+          }
+        } else {
+          console.log("加载问答错误：" + res.error);
+        }
+        //console.log(res)
+      });
+    },
+    changeQaOrder(val) {
+      this.qaList.orderType = val;
+      this.getQaData();
+    },
+    loadCouserTeacher(list, ids) {
+      let that = this;
+      // 先查课程关联教师iD
+      apiCourse.getTeacherByCourseIDs(ids).then((cres) => {
+        if (cres.status == 200) {
+          let userIds = [];
+          list.forEach((item, index) => {
+            cres.result.some((courseTeahcer) => {
+              if (courseTeahcer.courseId == item.id) {
+                if (courseTeahcer.teacherIds) {
+                  userIds.push(courseTeahcer.teacherIds[0]);
+                  item.authorInfo.aid = courseTeahcer.teacherIds[0];
+                  item.authorInfo.name = courseTeahcer.names[0];
+                  if (item.authorInfo.name == "BOE教师") {
+                    item.authorInfo.name = "";
+                  }
+                }
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+          //that.loadCourseAuthorInfo(list, userIds);
+        }
+      });
+    },
+    loadCourseAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.authorInfo.aid) {
+                item.authorInfo = author;
+
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+        }
+      });
+    },
+    loadAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.sysCreateAid) {
+                item.authorInfo = author;
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+        }
+      });
+    },
+    jumpRouter(item) {
+      this.$router.push({
+        path: "/qa/answer",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.xindex-course-image:hover {
+  transform: scale(1.3) translateY(-15px);
+  transition: all 0.6s;
+}
+
+.bannbox {
+  width: 100%;
+  height: 520px;
+  text-align: center;
+  filter: blur(5px);
+  z-index: -1;
+  background-size: 100% 100%;
+}
+
+::v-deep.swiper-slide .games .swiper-slide-active {
+  text-align: center !important;
+}
+
+#container {
+  position: absolute;
+  height: 520px;
+  top: 0;
+  width: 100%;
+}
+
+.banner-img {
+  height: 520px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: (-50%, -50%);
+}
+
+.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-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-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;
+    border-radius: 19px;
+    //  background: rgba($color: #000000, $alpha: 0.1);
+    width: auto;
+    left: 45%;
+    padding: 0 20px;
+    border-radius: 19px;
+    .swiper-pagination-bullet {
+      position: relative;
+      width: 25px;
+      height: 5px;
+      margin-top: 10px;
+      background: #fff;
+      opacity: 1 !important;
+      // background: rgba($color: #fff, $alpha: 0.5);
+      border-radius: 2px;
+    }
+    .swiper-pagination-bullet::before {
+      content: "";
+      position: absolute;
+      top: -20px;
+      bottom: -20px;
+      left: -2px;
+      right: -2px;
+    }
+    .swiper-pagination-bullet-active {
+      height: 5px;
+      opacity: 1 !important;
+      margin-top: 10px;
+      width: 25px;
+      background: #387df7;
+      // background: rgba($color: #fff, $alpha: 0.8);
+      border-radius: 2px;
+    }
+    .swiper-container {
+      // background-color: rgba($color: #000000, $alpha: 0.2);
+    }
+  }
+}
+
+.three-line-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  -webkit-line-clamp: 3;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.two-line-ellipsis {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  box-sizing: border-box;
+}
+
+.course-card {
+  padding-bottom: 22px;
+  box-sizing: border-box;
+  position: relative;
+  background-color: #ffffff;
+
+  .course-image-box {
+    position: relative;
+    .course-type {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      width: 60px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background-color: #f99000;
+      border-radius: 2px 4px 2px 14px;
+      font-size: 12px;
+      color: #ffffff;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-type-title {
+      position: absolute;
+      top: 5px;
+      right: 0px;
+      width: 90px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #ffffff;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-flag {
+      height: 26px;
+      position: absolute;
+      top: 15px;
+      right: 0;
+    }
+
+    .course-tip {
+      width: 100%;
+      height: 26px;
+      position: absolute;
+      bottom: 0;
+      padding: 0 10px;
+      color: #fff;
+      font-size: 14px;
+
+      .course-study-count {
+        float: left;
+      }
+
+      .course-time {
+        float: right;
+      }
+    }
+  }
+
+  .course-title {
+    margin: 16px 0 16px 0;
+    height: 44px;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+  }
+  .course-title-box {
+    display: flex;
+  }
+  .course-author {
+    display: flex;
+    justify-content: space-between;
+
+    .course-author-left {
+      font-size: 14px;
+      color: #6e7b84;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+  }
+
+  .study-num {
+    font-size: 14px;
+    color: #6e7b84;
+    // margin-left: 12px;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+  }
+
+  .course-score {
+    padding: 10px 15px;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .course-score-star {
+      flex: 1;
+    }
+  }
+}
+
+// 内容部分
+.modules {
+  margin-top: 20px;
+  display: flex;
+
+  .modules-title {
+    .modules-text {
+      height: 28px;
+      font-size: 20px;
+      font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
+      font-weight: 700;
+      color: #333333;
+    }
+
+    .recommend {
+      vertical-align: text-bottom;
+      height: 26px;
+    }
+
+    .quyer-tag {
+      margin-left: 15px;
+
+      a {
+        color: #333333;
+        font-size: 14px;
+        margin: 0 15px;
+        display: inline-block;
+        text-decoration: none;
+        outline: none;
+      }
+
+      .current {
+        width: 44px;
+        height: 26px;
+        background: #387df7;
+        border-radius: 4px;
+        color: #fff;
+        line-height: 26px;
+        text-align: center;
+      }
+    }
+
+    .more {
+      float: right;
+      margin-top: 7px;
+      margin-right: 30px;
+      color: #333333;
+      font-size: 14px;
+    }
+  }
+
+  .modules-list {
+    margin-top: 30px;
+    .case-card {
+      margin-bottom: 15px;
+
+      .case-info-image-box {
+        position: relative;
+
+        .case-info {
+          width: 385px;
+
+          .case-info-title {
+            font-size: 18px;
+            color: #343434;
+            margin-bottom: 5px;
+
+            .case-info-time {
+              font-size: 12px;
+              color: #999999;
+              float: right;
+              margin-top: 8px;
+            }
+          }
+
+          .case-info-summary {
+            font-size: 12px;
+            color: #666666;
+            height: 82px;
+            line-height: 18px;
+          }
+        }
+
+        img {
+          width: 160px;
+          height: 105px;
+          position: absolute;
+          top: 5px;
+          right: 0;
+        }
+      }
+
+      .case-info-box {
+        .case-info {
+          .case-info-title {
+            font-size: 18px;
+            color: #343434;
+            margin-bottom: 5px;
+
+            .case-info-time {
+              font-size: 12px;
+              color: #999999;
+              float: right;
+              margin-top: 8px;
+            }
+          }
+
+          .case-info-summary {
+            font-size: 12px;
+            color: #666666;
+            height: 82px;
+            line-height: 18px;
+          }
+        }
+      }
+
+      .case-other-info {
+        height: 40px;
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+    .article-card {
+      background: #fff;
+      border-radius: 8px;
+
+      .article-card-left {
+        .article-card-box {
+          .article-info-image-box {
+            border-radius: 4px;
+            .article-info {
+              height: 400px;
+
+              .article-info-title {
+                font-size: 16px;
+                color: #00253e;
+                font-weight: 500;
+                margin-bottom: 5px;
+                margin-top: 5px;
+              }
+
+              .article-info-summary {
+                font-size: 14px;
+                color: #6e7b84;
+                height: 160px;
+                line-height: 22px;
+              }
+            }
+
+            img {
+              width: 470px;
+              height: 330px;
+            }
+          }
+        }
+      }
+
+      .article-card-right {
+        flex: 1;
+        margin-left: 28px;
+
+        .article-card-box {
+          margin-bottom: 16px;
+          padding-bottom: 16px;
+
+          &:last-child {
+            margin-bottom: 0px;
+            padding-bottom: 0px;
+          }
+
+          .article-info-box {
+            .article-info {
+              display: flex;
+
+              .article-image {
+                width: 140px;
+                height: 105px;
+                margin-top: 10px;
+                margin-left: 20px;
+              }
+
+              .article-body {
+                flex: 1;
+
+                .article-info-title {
+                  font-size: 18px;
+                  color: #343434;
+                  margin-bottom: 5px;
+
+                  .article-info-time {
+                    font-size: 12px;
+                    color: #999999;
+                    float: right;
+                    margin-top: 8px;
+                    font-weight: 500;
+                  }
+                }
+
+                .article-info-summary {
+                  padding-top: 9px;
+                  font-size: 14px;
+                  color: #666666;
+                  height: 43px;
+                  line-height: 18px;
+                  font-weight: 500;
+                  margin-bottom: 20px;
+                }
+              }
+            }
+          }
+        }
+
+        .article-card-box:not(:last-child) {
+          border-bottom: 1px solid #ededed;
+        }
+      }
+
+      .article-other-info {
+        display: flex;
+      }
+    }
+
+    .qa-card {
+      box-sizing: border-box;
+      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+      border-radius: 8px;
+      background: #fff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .qa-top {
+        & span:first-child {
+          height: 24px;
+          background: rgba($color: #387df7, $alpha: 0.05);
+          border-radius: 4px;
+          font-size: 12px;
+          color: #387df7;
+        }
+
+        span {
+          color: #6e7b84;
+        }
+      }
+
+      .qa-center {
+        position: relative;
+        background: rgba($color: #04243c, $alpha: 0.04);
+        border-radius: 4px;
+        .qa-views {
+          position: absolute;
+          color: #6e7b84;
+        }
+      }
+
+      .qa-char {
+        display: flex;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/grateful/ToolDown.vue b/src/views/grateful/ToolDown.vue
new file mode 100644
index 00000000..f61aa6d4
--- /dev/null
+++ b/src/views/grateful/ToolDown.vue
@@ -0,0 +1,70 @@
+<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; padding: 48px">
+            <!--内容列表内容-->
+            <div
+              v-for="(course, ccidx) in 5"
+              :key="'cc' + ccidx"
+              class="toolEvery"
+              style="position: relative"
+            >
+              HHh
+            </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>
+export default {
+  data: () => {
+    return {};
+  },
+  methods: {
+    getPic(index) {
+      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
+    },
+  },
+};
+</script>
+<style scoped lang='scss'>
+.modules-list {
+  height: 555px;
+  background: #ffffff;
+  border-radius: 8px;
+  .toolEvery {
+    height: 80px;
+    line-height: 80px;
+    opacity: 0.2;
+    border-bottom: 1px solid #999999;
+  }
+}
+</style>
diff --git a/src/views/grateful/index.vue b/src/views/grateful/index.vue
new file mode 100644
index 00000000..93d49218
--- /dev/null
+++ b/src/views/grateful/index.vue
@@ -0,0 +1,1289 @@
+<template>
+  <div>
+    <div class="course-banner" style="background-color: red">
+      <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
+                }) no-repeat 100% / 100%`,
+              }"
+            ></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
+                }) no-repeat 100% / 100%`,
+              }"
+            ></div>
+            <img
+              class="banner-img"
+              style="margin: 0 auto"
+              :src="fileBaseUrl + item.image"
+              alt=""
+            />
+          </swiper-slide>
+          <div class="swiper-pagination" slot="pagination"></div>
+        </swiper>
+      </div>
+    </div>
+    <router-view></router-view>
+    <!-- 底部 -->
+    <div class="gratefulfooter">
+      <img src="../../assets/images/grateful/gratefulFooter.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import apiCourseStudy from "@/api/modules/courseStudy.js";
+import portalFloatTools from "@/components/PortalFloatTools.vue";
+import apiCourse from "@/api/modules/coursePortal.js";
+import apiCase from "@/api/modules/cases.js";
+import apiQa from "@/api/modules/qa.js";
+import apiGuide from "@/api/phase2/guide.js";
+import apiUser from "@/api/system/user.js";
+import interactBar from "@/components/Portal/interactBar.vue";
+import courseImage from "@/components/Course/courseImage.vue";
+import { toScore, formatUserNumber, cutOrgNamePath } from "@/utils/tools.js";
+import apiPlace from "@/api/phase2/place.js";
+import apiStat from "@/api/phase2/stat.js";
+import apiIndex from "@/api/phase2/index.js";
+import apiUserhobby from "@/api/phase2/userhobby.js";
+export default {
+  name: "Grateful",
+  components: {
+    portalFloatTools,
+    interactBar,
+    courseImage,
+  },
+  created() {
+    this.$store.dispatch("refrashStudyTaskCount");
+    let $this = this;
+    //判断是否弹出登录勋章，设置截止日期
+    var nowDate = new Date();
+    var endDate = new Date("2022-11-18"); //先设置时间是11月18日
+    if (nowDate < endDate) {
+      apiStat.getUserLoginMedal().then((rs) => {
+        if (rs.status == 200) {
+          if (rs.result.show) {
+            //设置是否需要显示纪念勋章
+            $this.needLoginMedal = true;
+          }
+        }
+      });
+    }
+    //提取需要提示勋章
+    // apiStat.getUserMedalTips().then(res=>{
+    //    if(res.status==200){
+    //       $this.medalTips=res.result;
+    //    }
+    // })
+  },
+  data() {
+    return {
+      showUClass: false,
+      showLoginMedal: false, //是否显示登录勋章
+      needLoginMedal: false, //是否需要显示纪念勋章
+      medalTips: [
+        { medalId: 1, medalLevel: 5, isShow: false },
+        { medalId: 3, medalLevel: 4, isShow: false },
+      ],
+      lastStudy: {},
+      overlayShow: false,
+      userData: { level: 1, uvalue: 0, totalStudyHour: 0 },
+      userHobby: {
+        needShow: false,
+        localKeyPre: "user-hobby-", //本地存储的key
+      },
+      needHobbyShow: false, //是否显示兴趣爱好
+      formatNum: formatUserNumber,
+      cutOrgNamePath: cutOrgNamePath,
+      // userInfo: {},
+      ankingList: [],
+      answersList: [],
+      Popularity: [],
+      scorelist: [],
+      resonimg: [],
+      swiperOptiontwo: {
+        autoplay: false,
+        // noSwiping: true,
+      },
+      swiperOption: {
+        autoplay: {
+          delay: 2000,
+          disableOnInteraction: false, //解决滑动后不能轮播的问题
+        },
+        speed: 3000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
+        loop: true, //循环切换
+        peed: 300, //循环速度
+        scrollbar: ".swiper-scrollbar",
+        pagination: {
+          el: ".swiper-pagination",
+          // type : 'progressbar', //分页器形状
+          clickable: true, //点击分页器的指示点分页器会控制Swiper切换
+        },
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+
+      couname: "",
+      isNext: true,
+      pageIndex: 1,
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+      toScore,
+      courseList: {
+        num: 12,
+        orderType: 2,
+        list: [],
+      },
+      caseList: {
+        num: 3,
+        orderType: 2,
+        list: [],
+      },
+      articleList: {
+        num: 4,
+        orderType: 2,
+        first: {
+          id: "",
+          authorInfo: {},
+        },
+        list: [],
+      },
+      qaList: {
+        num: 4,
+        orderType: "views",
+        list: [],
+      },
+    };
+  },
+  mounted() {
+    this.getCourseData(1);
+    this.getCaseData();
+    this.getArticleData();
+    this.getQaData();
+    this.couresreso();
+    this.getScoreList();
+    this.getPopularity();
+    this.getAnkingData();
+    this.getLevel();
+    this.getQaAnswers();
+    this.getLastStudy();
+
+    //检查兴趣爱好是否已填报,
+    //先检查本地session和 local 15天, 这两个值是在组件中设置的
+    let sessionHobby = sessionStorage.getItem(
+      "user-hobby-" + this.userInfo.aid
+    );
+    let localHobbyTime = localStorage.getItem("notYet" + this.userInfo.aid);
+    if (!sessionHobby) {
+      //只有session中不存在，才会验证
+      //本地15天验证,localHobby,后续完善
+      let flag = true; //请求检查
+      if (localHobbyTime) {
+        let day =
+          (new Date() - new Date(localHobbyTime)) / (1000 * 60 * 60 * 24);
+        if (day < 15) {
+          flag = false;
+        }
+      }
+      if (flag) {
+        apiUserhobby.has().then((res) => {
+          if (res.status == 200) {
+            if (!res.result) {
+              //设置需要显示兴趣爱好收集窗口
+              this.userHobby.needShow = true;
+            }
+          } else {
+            console.log("兴趣爱好检查失败" + res.message);
+          }
+          //检查引导页
+          this.checkAndShowGuide();
+        });
+      } else {
+        this.checkAndShowGuide();
+      }
+    } else {
+      //检查引导页
+      this.checkAndShowGuide();
+    }
+    //this.$refs.userCollection.show();
+  },
+  computed: {
+    ...mapGetters(["userInfo", "studyTaskCount"]),
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    },
+  },
+  methods: {
+    tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
+    uOnClick() {
+      this.showUClass = true;
+    },
+    setCurIdentity(iden) {
+      this.$store.dispatch("SetCurIdentity", iden);
+    },
+    closeJinian() {
+      this.showLoginMedal = false;
+    },
+    banJump(item) {
+      if (item.JumpUrl) {
+        window.open(item.JumpUrl);
+      }
+    },
+    //上次学习记录
+    getLastStudy() {
+      apiCourseStudy.lastStudy().then((res) => {
+        if (res.status === 200) {
+          this.lastStudy = res.result;
+          if (res.result != "" && res.result.courseId) {
+            this.overlayShow = true;
+          }
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    //检查并弹出引导页
+    checkAndShowGuide() {
+      //引导页弹框是否显示
+      //检查本地,减少服务器请求的次数
+      let localGuide = localStorage.getItem("user-guide-" + this.userInfo.aid);
+      if (!localGuide) {
+        apiGuide.hasUser().then((res) => {
+          if (res.status == 200) {
+            if (!res.result) {
+              this.$refs.guide.show();
+            } else {
+              if (this.userHobby.needShow) {
+                this.$refs.userCollection.show();
+              } else {
+                if (this.needLoginMedal) {
+                  this.showLoginMedal = true;
+                }
+              }
+            }
+            localStorage.setItem("user-guide-" + this.userInfo.aid, 1);
+          } else {
+            console.log("获取引导页检查失败" + res.message);
+            //this.$message.error('')
+            if (this.userHobby.needShow) {
+              this.$refs.userCollection.show();
+            }
+          }
+        });
+      } else {
+        if (this.userHobby.needShow) {
+          this.$refs.userCollection.show();
+        } else {
+          if (this.needLoginMedal) {
+            this.showLoginMedal = true;
+          }
+        }
+      }
+
+      //测试情况下
+      // this.$refs.guide.show();
+    },
+    closeGuide() {
+      //关闭引导页
+      if (this.userHobby.needShow) {
+        //需要弹出兴趣收集页，弹出兴趣收集页
+        this.$refs.userCollection.show();
+      }
+    },
+    closeCollection() {
+      if (this.needLoginMedal) {
+        this.showLoginMedal = true;
+      }
+    },
+    jumstudy() {
+      this.$router.push({ path: "../views/study/TaskList.vue" });
+    },
+    jumcasedet(item) {
+      this.$router.push({ path: "/case/detail", query: { id: item.id } });
+    },
+    getPic(index) {
+      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
+    },
+    getLevel() {
+      //获取经验值和等级
+      apiStat.getUserStatTotalInfo(this.userInfo.aid).then((res) => {
+        if (res.status == 200) {
+          this.userData = res.result;
+          //console.log(this.userData,'this.userData')
+        }
+      });
+    },
+    getQaAnswers() {
+      apiIndex.qaAnswers(10).then((res) => {
+        if (res.status == 200) {
+          this.answersList = res.result;
+        }
+      });
+    },
+    getAnkingData() {
+      //  文章排行榜
+      apiIndex.articleViews(10).then((res) => {
+        if (res.status == 200) {
+          this.ankingList = res.result;
+        }
+      });
+    },
+    getPopularity() {
+      //案例排行榜
+      apiCase.queryPraises(10).then((res) => {
+        if (res.status == 200) {
+          this.Popularity = res.result;
+          // console.log(this.Popularity)
+        }
+      });
+    },
+    getScoreList() {
+      //课程排行榜
+      apiCourse.scorelist(10, 1).then((res) => {
+        if (res.status == 200) {
+          res.result.forEach((item) => {
+            if (item.publishTime != "") {
+              item.coverImg = item.images;
+              let time = item.publishTime.split("-");
+              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`;
+            }
+          });
+          this.scorelist = res.result;
+          //console.log(this.scorelist,'this.scorelist');
+        }
+      });
+    },
+    // bgfun(){
+    //  console.log(this.$refs.bannimg[0]);
+    //  this.$nextTick(() => {
+    // 		console.log(this.$refs.bannimg[0])
+    // 	})
+    // },
+    couresreso() {
+      let key = "index";
+      apiPlace.detail(key).then((res) => {
+        let lmj = JSON.parse(res.result.content);
+        this.resonimg = lmj;
+      });
+    },
+    jumUX() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
+    },
+    toCourseDetail(item) {
+      //二期调整，直接改成一个地址
+      //return this.webBaseUrl + '/course/detail?id=' + item.id;
+      let $this = this;
+      if (item.type == 10) {
+        //return this.webBaseUrl + "/course/studyindex?id=" + item.id;
+        //console.log("直接进入学习页面");
+        this.$router.push("/course/studyindex?id=" + item.id);
+      } else if (item.type == 20) {
+        apiCourseStudy.hasSignup(item.id).then((rs) => {
+          if (rs.status == 200) {
+            //return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
+            this.$router.push("/course/studyindex?id=" + item.id);
+          } else {
+            //return $this.webBaseUrl + "/course/detail?id=" + item.id;
+            this.$router.push("/course/detail?id=" + item.id);
+          }
+        });
+        //return $this.webBaseUrl + "/course/detail?id=" + item.id;
+      }
+    },
+    orderTypeFilter(val) {
+      this.courseList.orderType = val;
+      this.pageIndex = 1;
+      this.getCourseData();
+    },
+    nextPage() {
+      this.pageIndex += 1;
+      if (this.isNext) {
+        this.getCourseData(this.pageIndex);
+      }
+    },
+    getCourseData(pageIndex) {
+      this.isNext = false;
+      let { orderType, num } = this.courseList;
+      let course = {
+        pageSize: 6,
+        device: 1,
+        orderField: orderType == 1 ? "" : "studys",
+        orderAsc: false,
+        topOrder: true,
+        pageIndex: pageIndex,
+      };
+
+      apiIndex.courselist(course).then((res) => {
+        if (res.status == 200 && res.result.length > 0) {
+          let courseIds = [];
+          res.result.forEach((item) => {
+            item.authorInfo = {
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              code: "",
+              sex: null,
+            };
+            courseIds.push(item.id);
+          });
+          this.loadCouserTeacher(res.result, courseIds);
+          this.courseList.list = res.result;
+          //this.couname = res.result.list.name;
+          // if (res.result.count - pageIndex * num < 8) {
+          //   this.pageIndex = 0;
+          // }
+          // this.isNext = true;
+
+          // }
+        } else {
+          console.log("加载课程信息失败:" + res.error);
+        }
+      });
+
+      // apiCourse.list({orderType,num,device:1}).then(res => {
+      //     if(res.status==200){
+      //       if(res.result.length>0){
+      //         let courseIds=[];
+      //         res.result.forEach(item=>{
+      //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
+      //           courseIds.push(item.id);
+      //         })
+      //         this.loadCouserTeacher(res.result,courseIds);
+      //         this.courseList.list=res.result;
+      //       }
+      //     }else{
+      //       console.log('加载课程信息失败:'+res.error);
+      //     }
+      //   })
+    },
+    // 去掉案例的推荐课程
+    // changeCaseOrder(val) {
+    //   this.caseList.orderType = val;
+    //   this.getCaseData();
+    // },
+
+    //案例的参数等着需要改
+    getCaseData() {
+      apiIndex.newCases().then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+
+              if (item.authorId && item.authorId != "") {
+                userIds.push(item.authorId);
+              }
+            });
+            this.caseList.list = res.result;
+            this.loadCaseAuthorInfo(res.result, userIds);
+          }
+          // this.caseList.list = res.result;
+        } else {
+          console.log("加载案例错误：" + res.error);
+        }
+      });
+    },
+    loadCaseAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.authorId) {
+                author.orgInfo = cutOrgNamePath(author.orgInfo, 1);
+                item.authorInfo = author;
+
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+          //this.$message.error(res.message);
+        }
+      });
+    },
+    getArticleData() {
+      let $this = this;
+      this.articleList.list = [];
+      apiIndex.articlelist(this.articleList.orderType).then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item, idx) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+              userIds.push(item.sysCreateAid);
+              if (idx == 0) {
+                $this.articleList.first = item;
+              } else {
+                $this.articleList.list.push(item);
+              }
+            });
+            // console.log(res.result, 'res.result');
+            this.loadAuthorInfo(res.result, userIds);
+          }
+        } else {
+          console.log("加载文章错误：" + res.error);
+        }
+      });
+    },
+    changeArticleOrder(val) {
+      this.articleList.orderType = val;
+      this.getArticleData();
+    },
+    getQaData() {
+      let params = {
+        pageSize: this.qaList.num,
+        orderAsc: false,
+        orderField: this.qaList.orderType,
+      };
+      // if (this.qaList.orderType == 2) {
+      //   params.orderField = 'praises';
+      // }
+      apiQa.indexList(params).then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+              userIds.push(item.sysCreateAid);
+            });
+            this.qaList.list = res.result;
+            this.loadAuthorInfo(res.result, userIds);
+          }
+        } else {
+          console.log("加载问答错误：" + res.error);
+        }
+        //console.log(res)
+      });
+    },
+    changeQaOrder(val) {
+      this.qaList.orderType = val;
+      this.getQaData();
+    },
+    loadCouserTeacher(list, ids) {
+      let that = this;
+      // 先查课程关联教师iD
+      apiCourse.getTeacherByCourseIDs(ids).then((cres) => {
+        if (cres.status == 200) {
+          let userIds = [];
+          list.forEach((item, index) => {
+            cres.result.some((courseTeahcer) => {
+              if (courseTeahcer.courseId == item.id) {
+                if (courseTeahcer.teacherIds) {
+                  userIds.push(courseTeahcer.teacherIds[0]);
+                  item.authorInfo.aid = courseTeahcer.teacherIds[0];
+                  item.authorInfo.name = courseTeahcer.names[0];
+                  if (item.authorInfo.name == "BOE教师") {
+                    item.authorInfo.name = "";
+                  }
+                }
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+          //that.loadCourseAuthorInfo(list, userIds);
+        }
+      });
+    },
+    loadCourseAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.authorInfo.aid) {
+                item.authorInfo = author;
+
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+        }
+      });
+    },
+    loadAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.sysCreateAid) {
+                item.authorInfo = author;
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+        }
+      });
+    },
+    jumpRouter(item) {
+      this.$router.push({
+        path: "/qa/answer",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.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;
+    display: flex;
+    align-items: center;
+    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;
+      font-size: 20px;
+    }
+  }
+}
+
+.xindex-course-image:hover {
+  transform: scale(1.3) translateY(-15px);
+  transition: all 0.6s;
+}
+
+.bannbox {
+  width: 100%;
+  height: 520px;
+  text-align: center;
+  filter: blur(5px);
+  z-index: -1;
+  background-size: 100% 100%;
+}
+
+::v-deep.swiper-slide .games .swiper-slide-active {
+  text-align: center !important;
+}
+
+#container {
+  position: absolute;
+  height: 520px;
+  top: 0;
+  width: 100%;
+}
+
+.banner-img {
+  height: 520px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: (-50%, -50%);
+}
+
+.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-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-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;
+    border-radius: 19px;
+    //  background: rgba($color: #000000, $alpha: 0.1);
+    width: auto;
+    left: 45%;
+    padding: 0 20px;
+    border-radius: 19px;
+    .swiper-pagination-bullet {
+      position: relative;
+      width: 25px;
+      height: 5px;
+      margin-top: 10px;
+      background: #fff;
+      opacity: 1 !important;
+      // background: rgba($color: #fff, $alpha: 0.5);
+      border-radius: 2px;
+    }
+    .swiper-pagination-bullet::before {
+      content: "";
+      position: absolute;
+      top: -20px;
+      bottom: -20px;
+      left: -2px;
+      right: -2px;
+    }
+    .swiper-pagination-bullet-active {
+      height: 5px;
+      opacity: 1 !important;
+      margin-top: 10px;
+      width: 25px;
+      background: #387df7;
+      // background: rgba($color: #fff, $alpha: 0.8);
+      border-radius: 2px;
+    }
+    .swiper-container {
+      // background-color: rgba($color: #000000, $alpha: 0.2);
+    }
+  }
+}
+
+.three-line-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  -webkit-line-clamp: 3;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.two-line-ellipsis {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  box-sizing: border-box;
+}
+
+.course-card {
+  padding-bottom: 22px;
+  box-sizing: border-box;
+  position: relative;
+  background-color: #ffffff;
+
+  .course-image-box {
+    position: relative;
+    .course-type {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      width: 60px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background-color: #f99000;
+      border-radius: 2px 4px 2px 14px;
+      font-size: 12px;
+      color: #ffffff;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-type-title {
+      position: absolute;
+      top: 5px;
+      right: 0px;
+      width: 90px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #ffffff;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-flag {
+      height: 26px;
+      position: absolute;
+      top: 15px;
+      right: 0;
+    }
+
+    .course-tip {
+      width: 100%;
+      height: 26px;
+      position: absolute;
+      bottom: 0;
+      padding: 0 10px;
+      color: #fff;
+      font-size: 14px;
+
+      .course-study-count {
+        float: left;
+      }
+
+      .course-time {
+        float: right;
+      }
+    }
+  }
+
+  .course-title {
+    margin: 16px 0 16px 0;
+    height: 44px;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+  }
+  .course-title-box {
+    display: flex;
+  }
+  .course-author {
+    display: flex;
+    justify-content: space-between;
+
+    .course-author-left {
+      font-size: 14px;
+      color: #6e7b84;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+  }
+
+  .study-num {
+    font-size: 14px;
+    color: #6e7b84;
+    // margin-left: 12px;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+  }
+
+  .course-score {
+    padding: 10px 15px;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .course-score-star {
+      flex: 1;
+    }
+  }
+}
+
+// 内容部分
+.modules {
+  margin-top: 20px;
+  display: flex;
+
+  .modules-title {
+    .modules-text {
+      height: 28px;
+      font-size: 20px;
+      font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
+      font-weight: 700;
+      color: #333333;
+    }
+
+    .recommend {
+      vertical-align: text-bottom;
+      height: 26px;
+    }
+
+    .quyer-tag {
+      margin-left: 15px;
+
+      a {
+        color: #333333;
+        font-size: 14px;
+        margin: 0 15px;
+        display: inline-block;
+        text-decoration: none;
+        outline: none;
+      }
+
+      .current {
+        width: 44px;
+        height: 26px;
+        background: #387df7;
+        border-radius: 4px;
+        color: #fff;
+        line-height: 26px;
+        text-align: center;
+      }
+    }
+
+    .more {
+      float: right;
+      margin-top: 7px;
+      margin-right: 30px;
+      color: #333333;
+      font-size: 14px;
+    }
+  }
+
+  .modules-list {
+    margin-top: 30px;
+    .case-card {
+      margin-bottom: 15px;
+
+      .case-info-image-box {
+        position: relative;
+
+        .case-info {
+          width: 385px;
+
+          .case-info-title {
+            font-size: 18px;
+            color: #343434;
+            margin-bottom: 5px;
+
+            .case-info-time {
+              font-size: 12px;
+              color: #999999;
+              float: right;
+              margin-top: 8px;
+            }
+          }
+
+          .case-info-summary {
+            font-size: 12px;
+            color: #666666;
+            height: 82px;
+            line-height: 18px;
+          }
+        }
+
+        img {
+          width: 160px;
+          height: 105px;
+          position: absolute;
+          top: 5px;
+          right: 0;
+        }
+      }
+
+      .case-info-box {
+        .case-info {
+          .case-info-title {
+            font-size: 18px;
+            color: #343434;
+            margin-bottom: 5px;
+
+            .case-info-time {
+              font-size: 12px;
+              color: #999999;
+              float: right;
+              margin-top: 8px;
+            }
+          }
+
+          .case-info-summary {
+            font-size: 12px;
+            color: #666666;
+            height: 82px;
+            line-height: 18px;
+          }
+        }
+      }
+
+      .case-other-info {
+        height: 40px;
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+    .article-card {
+      background: #fff;
+      border-radius: 8px;
+
+      .article-card-left {
+        .article-card-box {
+          .article-info-image-box {
+            border-radius: 4px;
+            .article-info {
+              height: 400px;
+
+              .article-info-title {
+                font-size: 16px;
+                color: #00253e;
+                font-weight: 500;
+                margin-bottom: 5px;
+                margin-top: 5px;
+              }
+
+              .article-info-summary {
+                font-size: 14px;
+                color: #6e7b84;
+                height: 160px;
+                line-height: 22px;
+              }
+            }
+
+            img {
+              width: 470px;
+              height: 330px;
+            }
+          }
+        }
+      }
+
+      .article-card-right {
+        flex: 1;
+        margin-left: 28px;
+
+        .article-card-box {
+          margin-bottom: 16px;
+          padding-bottom: 16px;
+
+          &:last-child {
+            margin-bottom: 0px;
+            padding-bottom: 0px;
+          }
+
+          .article-info-box {
+            .article-info {
+              display: flex;
+
+              .article-image {
+                width: 140px;
+                height: 105px;
+                margin-top: 10px;
+                margin-left: 20px;
+              }
+
+              .article-body {
+                flex: 1;
+
+                .article-info-title {
+                  font-size: 18px;
+                  color: #343434;
+                  margin-bottom: 5px;
+
+                  .article-info-time {
+                    font-size: 12px;
+                    color: #999999;
+                    float: right;
+                    margin-top: 8px;
+                    font-weight: 500;
+                  }
+                }
+
+                .article-info-summary {
+                  padding-top: 9px;
+                  font-size: 14px;
+                  color: #666666;
+                  height: 43px;
+                  line-height: 18px;
+                  font-weight: 500;
+                  margin-bottom: 20px;
+                }
+              }
+            }
+          }
+        }
+
+        .article-card-box:not(:last-child) {
+          border-bottom: 1px solid #ededed;
+        }
+      }
+
+      .article-other-info {
+        display: flex;
+      }
+    }
+
+    .qa-card {
+      box-sizing: border-box;
+      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+      border-radius: 8px;
+      background: #fff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .qa-top {
+        & span:first-child {
+          height: 24px;
+          background: rgba($color: #387df7, $alpha: 0.05);
+          border-radius: 4px;
+          font-size: 12px;
+          color: #387df7;
+        }
+
+        span {
+          color: #6e7b84;
+        }
+      }
+
+      .qa-center {
+        position: relative;
+        background: rgba($color: #04243c, $alpha: 0.04);
+        border-radius: 4px;
+        .qa-views {
+          position: absolute;
+          color: #6e7b84;
+        }
+      }
+
+      .qa-char {
+        display: flex;
+      }
+    }
+  }
+}
+
+</style>