个人导学首页

src/views/questioncenter/bestpaper.vue

@@ -46,16 +46,6 @@ export default {
           code:1
         }
       ],
-      queryParams:{
-        paperSubject:'',
-        paperGrade:'',
-        paperType:'',
-        paperArea:'',
-        paperYear:'',
-      },
-      queryYear:'',
-      requireFields:['paperSubject','paperGrade','paperType','paperArea','paperYear'],
-
     };
   },
   created() {
@@ -66,12 +56,6 @@ export default {
   },
 
   methods: {
-    handleQuery(){
-
-    },
-    handleInvalidQuery(){
-
-    },
     switchTab(index) {
       this.tabActive = index;
     },

src/views/questioncenter/components/main-card/mx-card.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="mx-card">
-    <div class="header">
-      <span class="bold f24">{{title}}</span>
-      <span class="bold f16 pointer" @click="toMore" v-if="morePath">更多<icon class="ml5 iconfont icon-youjiantou-02"></icon></span>
-    </div>
-    <slot></slot>
-  </div>
-</template>
-<script>
-export default {
-  props:{
-    morePath: {
-      type:String,
-      default:''
-    },
-    title:{
-      type:String,
-      default:''
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    toMore(){
-      this.$router.push(this.morePath)
-    }
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.mx-card{
-  background: #fff;
-  border-radius: 4px;
-  padding:20px 16px;
-  width: 100%;
-  .header{
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-}
-</style>

src/views/questioncenter/main.vue

@@ -2,107 +2,216 @@
   <!-- 题库中心首页 -->
   <div class="container">
     <div class="banner">
-      <el-image style="width: 100vw" :src="require('@/assets/images/question-banner.png')" fit="none" > </el-image>
+      <el-image style="width: 100vw" :src="require('@/assets/images/question-banner.png')" fit="none"></el-image>
     </div>
     <div class="content">
-      <mx-card title="智能练习" class="mb20">
+      <index-card title="智能练习" class="mb20">
         <mx-image-wrap :list="zhineng"></mx-image-wrap>
-      </mx-card>
-      <mx-card title="精品试卷" class="mb20" more-path="1">
+      </index-card>
+      <index-card title="精品试卷" class="mb20" more-text="更多">
         <el-tabs type="card">
-          <el-tab-pane label="名校试卷">名校试卷</el-tab-pane>
-          <el-tab-pane label="历年真题">历年真题</el-tab-pane>
+          <el-tab-pane label="名校试卷">
+            <el-row :gutter="20">
+              <el-col :span="8" class="f14 mb15 pointer text-ellipsis" v-for="item in papersList">
+                {{ item.papername }}
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+          <el-tab-pane label="历年真题">
+            <el-row :gutter="20">
+              <el-col :span="8" class="f14 mb15 pointer text-ellipsis" v-for="item in paperYearList">
+                {{ item.papername }}
+              </el-col>
+            </el-row>
+          </el-tab-pane>
         </el-tabs>
-      </mx-card>
-      <mx-card title="组卷中心" class="mb20">
+      </index-card>
+      <index-card title="组卷中心" class="mb20">
         <mx-image-wrap :list="zujuan" titleClass="text-white"></mx-image-wrap>
-      </mx-card>
-      <mx-card title="视频课程" more-path="1">
+      </index-card>
+      <index-card title="视频课程" more-text="更多">
         <el-tabs type="card">
-          <el-tab-pane label="同步课程">同步课程</el-tab-pane>
-          <el-tab-pane label="高考课程">高考课程</el-tab-pane>
+          <el-tab-pane label="同步课程">
+            <el-row :gutter="20">
+              <el-col :span="6" class="video_item" v-for="item in tbvideoList">
+                <img :src="item.img" @click=" toVideoDetail(item.pack_id,item.chapter_id,item.id, item.section_aliId,item.aliIdType)"/>
+                <p class="text-center text-ellipsis f-999">{{ item.section_name }}</p>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+          <el-tab-pane label="高考课程">
+            <el-row :gutter="20">
+              <el-col :span="6" class="video_item" v-for="item in gkVideoList">
+                <img :src="item.img" @click=" toVideoDetail(item.pack_id,item.chapter_id,item.id, item.section_aliId,item.aliIdType)"/>
+                <p class="text-center text-ellipsis f-999">{{ item.section_name }}</p>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
         </el-tabs>
-      </mx-card>
+      </index-card>
     </div>
   </div>
 </template>
 <script>
-import MxCard from '@/views/questioncenter/components/main-card/mx-card.vue'
+import IndexCard from '@/views/index/components/index-card.vue'
 import MxImageWrap from '@/views/questioncenter/components/main-card/mx-image-wrap.vue'
 import { mapGetters } from 'vuex'
 import store from '@/store'
+import { papersList } from '@/api/webApi/webQue'
+import { videoList } from '@/api/webApi/webVideo'
+
 export default {
-  components:{MxCard,MxImageWrap},
+  components: { IndexCard, MxImageWrap },
   data() {
     return {
       // 智能练习
       zhineng: [
         {
-          title:'同步练习',
-          img:require('@/assets/images/tongbuzaixian.png'),
+          title: '同步练习',
+          img: require('@/assets/images/tongbuzaixian.png'),
           titleAlign: 'center',
-          path:'/question-center/smartExercise?tabActive=0',
+          path: '/question-center/smartExercise?tabActive=0'
         },
         {
-          title:'知识点练习',
-          img:require('@/assets/images/zhishidianzaixian.png'),
+          title: '知识点练习',
+          img: require('@/assets/images/zhishidianzaixian.png'),
           titleAlign: 'center',
-          path:'/question-center/smartExercise?tabActive=1',
+          path: '/question-center/smartExercise?tabActive=1'
 
         }
       ],
-      zujuan:[
+      zujuan: [
         {
-          title:'智能组卷',
-          img:require('@/assets/images/smart_volume.png'),
+          title: '智能组卷',
+          img: require('@/assets/images/smart_volume.png'),
           titleAlign: 'left',
-          path:'/question-center/generatingPaperCenter?tabActive=0',
+          path: '/question-center/generatingPaperCenter?tabActive=0'
         },
         {
-          title:'手动组卷',
-          img:require('@/assets/images/manually.png'),
+          title: '手动组卷',
+          img: require('@/assets/images/manually.png'),
           titleAlign: 'left',
-          path:'/question-center/generatingPaperCenter?tabActive=1',
+          path: '/question-center/generatingPaperCenter?tabActive=1'
         },
         {
-          title:'组卷记录',
-          img:require('@/assets/images/smart_record.png'),
+          title: '组卷记录',
+          img: require('@/assets/images/smart_record.png'),
           titleAlign: 'left',
-          path:'/question-center/generatingPaperCenter?tabActive=2',
+          path: '/question-center/generatingPaperCenter?tabActive=2'
         }
-      ]
-      // 组卷中心
-
-    };
+      ],
+      pageForm: {
+        pageNum: 1,
+        pageSize: 30
+      },
+      videoPageForm: {
+        pageNum: 1,
+        pageSize: 8
+      },
+      papersList: [], // 精品试卷
+      paperYearList: [], // 历年真题
+      tbvideoList: [], // 同步微课
+      gkVideoList: [] // 高考课程
+    }
   },
-  computed:{
-    ...mapGetters([ "isWideScreen"]),
-
+  computed: {
+    ...mapGetters(['isWideScreen'])
   },
   created() {
     store.commit('SET_IS_WIDESCREEN', true)
+    this.getPaperList()
+    this.getPaperListByYear()
+    this.getVideoList(0)
+    this.getVideoList(2)
   },
   methods: {
+    getPaperList() {
+      papersList({
+        subjectName: '所有',
+        gradeName: '所有',
+        paperType: '所有',
+        area: '所有',
+        year: '所有',
+        papername: '',
+        ...this.pageForm
+      }).then((res) => {
+        this.papersList = res.rows
+      })
+    },
+    getPaperListByYear() {
+      papersList({
+        year: '',
+        papersType: '历年真题',
+        subjectName: '',
+        papername: '',
+        ...this.pageForm
+      }).then((res) => {
+        this.paperYearList = res.rows
+      })
+    },
+    getVideoList(subject) {
+      videoList({
+        course: 1001, // 科目
+        subject: subject, // 大类
+        grade: subject == 0 ? '1040' : '1042', // 年级
+        version: subject == 0 ? '8023' : '8014', // 版本
+        pack: subject == 0 ? '202140191621922916' : '202112871622628689',
+        ...this.videoPageForm,
+        isMain: true,
+        sectionName: ''
+      }).then((res) => {
+        subject == 0 ? this.tbvideoList = res.rows  : this.gkVideoList = res.rows
+      })
+    },
+    toVideoDetail(id, chapter_id, childrenId, section_aliId, aliIdType) {
+      this.$router.push({
+        path: '/video_course/detail', query: {
+          packId: id,
+          chapter_id: chapter_id,
+          childrenId: childrenId,
+          section_aliId,
+          aliIdType: aliIdType
+        }
+      })
+    },
     toNavgator(path, tabActive) {
-      this.$router.push({ path: path, query: { tabActive: tabActive } });
+      this.$router.push({ path: path, query: { tabActive: tabActive } })
     },
     toBestPaper(year) {
       this.$router.push({
-        path: "/question-center/bestPaper",
-        query: { tabActive: 1, year: year },
-      });
-    },
-  },
-};
+        path: '/question-center/bestPaper',
+        query: { tabActive: 1, year: year }
+      })
+    }
+  }
+}
 </script>
 <style scoped>
-.content{
+.content {
   width: 70%;
   margin: 0 auto;
   padding-bottom: 20px;
   margin-top: 20px;
 }
-.container{
+
+.container {
   background: #f5f4f9;
 }
+
+.video_item > img {
+  cursor: pointer;
+}
+
+.video_item{
+  border-radius: 4px;
+  margin-bottom: 20px;
+  /*padding-right: 22px;*/
+}
+.video_item > img {
+  width: 100%;
+}
+.video_item >p{
+  padding:5px 0;
+  box-shadow: 0px 1px 4px 0px rgba(47,78,154,0.14);
+}
 </style>

src/views/videocourse/video_course.vue

@@ -11,7 +11,7 @@
         <mx-search-group  justify="end" :span="6" v-model="sectionName" placeholder="请输入搜索内容" @search="searchVideo">
         </mx-search-group>
       </div>
-      <el-row :span="24">
+      <el-row :gutter="20">
         <el-col
           :span="6"
           class="video_item"
@@ -130,20 +130,6 @@ export default {
 .video_contianer {
   padding: 20px;
 }
-
-.video_content p {
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  height: 27px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #343434;
-  line-height: 20px;
-  margin-top: 11px;
-}
-
 .video_item > img {
   cursor: pointer;
 }
@@ -152,9 +138,15 @@ export default {
   margin-bottom: 42px;
 }
 .video_item{
-  padding-right: 22px;
+  border-radius: 4px;
 }
 .video_item > img {
   width: 100%;
 }
+
+
+.video_item >p{
+  padding:5px 10px;
+  box-shadow: 0px 1px 4px 0px rgba(47,78,154,0.14);
+}
 </style>