首页复用卡片

src/views/accurateTeaching/main.vue

@@ -16,19 +16,17 @@
           </el-col>
         </el-row>
       </index-card>
-      <index-card title="资源库" class="mt20 index-block">
-        <mx-image-wrap :list="libraryFormatList" titleClass="text-white" titlePostion="left"></mx-image-wrap>
-      </index-card>
+      <index-card-res-library class="mt20 index-block"></index-card-res-library>
     </div>
   </div>
 </template>
 <script>
 import IndexCard from '@/views/index/components/index-card.vue'
-import MxImageWrap from '@/views/questioncenter/components/main-card/mx-image-wrap.vue'
+import IndexCardResLibrary from '@/views/index/components/index-card-res-library.vue'
 import { mapGetters } from 'vuex'
 import store from '@/store'
 export default {
-  components: { IndexCard, MxImageWrap },
+  components: { IndexCard, IndexCardResLibrary },
   data() {
     return {
       plan: [
@@ -63,38 +61,13 @@ export default {
           path: '/personalDatabase/class-task/system-notice'
         },
       ],
-      library: [
-        {
-          title: '个人资源库',
-          img:`${this.$imgBase}index/database/personal_library.png`,
-          path: '/personalDatabase/personalResources/index'
-        },
-        {
-          title: '校本资源库',
-          img:`${this.$imgBase}index/database/school_library.png`,
-          path: '/personalDatabase/schoolResources/index'
-        },
-        {
-          title: '云库',
-          img:`${this.$imgBase}index/database/cloud_library.png`,
-          path: '/personalDatabase/cloudTank/index'
-        },
-      ],
     }
   },
   computed:{
     ...mapGetters(['middlebarRouters']),
-    listOpt() {
-      const obj = {}
-      this.plan.map(item => {
-        obj[`${item.title}${item.path}`] = item
-      })
-      return obj
-    },
     formatList() {
       if(!this.middlebarRouters.length) return []
       if(!this.middlebarRouters.find(item => item.meta.title == '班级任务'))  return  []
-      const listOptKey = Object.keys(this.listOpt)
       let formatList = []
       return this.middlebarRouters.find(item => item.meta.title == '班级任务').children.slice(0,6).map((item,idx) =>{
         return {
@@ -104,20 +77,6 @@ export default {
         }
       })
     },
-    libraryFormatList(){
-      if(!this.middlebarRouters.length) return []
-      const listOptKey = Object.keys(this.listOpt)
-      let formatList = []
-      return this.middlebarRouters.filter((item) =>{
-        return this.library.findIndex(lib => lib.title == item.meta.title) != -1
-      }).map((item,idx) => {
-        return {
-          title: item.meta.title,
-          img:this.library[idx].img,
-          path:this.library.find(lib => lib.title == item.meta.title ).path,
-        }
-      })
-    }
   },
   methods: {
   }

src/views/career/index.vue

@@ -38,10 +38,9 @@
 </template>
 <script>
 import IndexCard from '@/views/index/components/index-card.vue'
-import MxImageWrap from '@/views/questioncenter/components/main-card/mx-image-wrap.vue'
 import IndexCardNewsSingle from '@/views/index/components/index-card-news-single'
 export default {
-  components: { IndexCard, MxImageWrap,IndexCardNewsSingle },
+  components: { IndexCard,IndexCardNewsSingle },
   data() {
     return {
       plan: [

src/views/career/main.vue

@@ -23,16 +23,14 @@
 </template>
 <script>
 import IndexCard from '@/views/index/components/index-card.vue'
-import MxImageWrap from '@/views/questioncenter/components/main-card/mx-image-wrap.vue'
 import IndexNewsTopWrapper from '@/views/index/components/index-news-top-wrapper'
-import IndexNewsSingleWrapper from '@/views/index/components/index-news-single-wrapper'
 import IndexCardGksp from '@/views/index/components/index-card-gksp'
 import IndexCardGktf from '@/views/index/components/index-card-gktf'
 import { list } from '@/api/webApi/career-other'
 import IndexCardNewsSingle from '@/views/index/components/index-card-news-single'
 
 export default {
-  components: { IndexCard, MxImageWrap, IndexNewsTopWrapper, IndexCardGksp, IndexCardGktf,IndexCardNewsSingle },
+  components: { IndexCard, IndexNewsTopWrapper, IndexCardGksp, IndexCardGktf,IndexCardNewsSingle },
   created() {
     list().then(res => {
         this.nounList.map(item => {

src/views/evaluating/main.vue

@@ -54,13 +54,12 @@
 </template>
 <script>
 import IndexCard from '@/views/index/components/index-card.vue'
-import MxImageWrap from '@/views/questioncenter/components/main-card/mx-image-wrap.vue'
 import loginCheckMixin from '@/views/components/blocks/index-login-check-mixin'
 import { checkRole } from '@/utils/permission'
 import { mapGetters } from 'vuex'
 
 export default {
-  components: { IndexCard, MxImageWrap },
+  components: { IndexCard },
   mixins: [loginCheckMixin],
   computed:{
     ...mapGetters(['middlebarRouters']),

src/views/index/components/index-card-generating.vue

@@ -0,0 +1,62 @@
+<template>
+  <index-card title="组卷中心">
+    <index-card-content :list="list" :line-size="3">
+      <template #default="{item}">
+        <index-image-item v-bind="item"/>
+      </template>
+    </index-card-content>
+  </index-card>
+</template>
+
+<script>
+import IndexCard from '@/views/index/components/index-card'
+import IndexCardContent from '@/views/index/components/index-card-content'
+import IndexImageItem from '@/views/index/components/index-image-item'
+
+export default {
+  name: 'index-card-generating',
+  components: { IndexImageItem, IndexCardContent, IndexCard },
+  data() {
+    return {
+      list: [
+        {
+          title: '智能组卷',
+          src: `${this.$imgBase}index/question-center/smart_volume.png`,
+          path: '/question-center/generatingPaperCenter?tabActive=0',
+          titleStyle:{
+            left: '20px',
+            bottom: '20px',
+            width:'auto'
+          }
+        },
+        {
+          title: '手动组卷',
+          src: `${this.$imgBase}index/question-center/manually.png`,
+          path: '/question-center/generatingPaperCenter?tabActive=1',
+          titleStyle:{
+            left: '20px',
+            bottom: '20px',
+            width:'auto'
+          }
+        },
+        {
+          title: '组卷记录',
+          src: `${this.$imgBase}index/question-center/smart_record.png`,
+          path: '/question-center/generatingPaperCenter?tabActive=2',
+          titleStyle:{
+            left: '20px',
+            bottom: '20px',
+            width:'auto'
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index/components/index-card-res-library.vue

@@ -0,0 +1,69 @@
+<template>
+  <index-card title="个人资源库">
+    <index-card-content :list="libraryFormatList" :line-size="3">
+      <template #default="{item}">
+        <index-image-item v-bind="item"/>
+      </template>
+    </index-card-content>
+  </index-card>
+</template>
+
+<script>
+import IndexCard from '@/views/index/components/index-card'
+import IndexCardContent from '@/views/index/components/index-card-content'
+import IndexImageItem from '@/views/index/components/index-image-item'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'index-card-generating',
+  components: { IndexImageItem, IndexCardContent, IndexCard },
+  data() {
+    return {
+      library: [
+        {
+          title: '个人资源库',
+          src:`${this.$imgBase}index/database/personal_library.png`,
+          path: '/personalDatabase/personalResources/index',
+        },
+        {
+          title: '校本资源库',
+          src:`${this.$imgBase}index/database/school_library.png`,
+          path: '/personalDatabase/schoolResources/index',
+        },
+        {
+          title: '云库',
+          src:`${this.$imgBase}index/database/cloud_library.png`,
+          path: '/personalDatabase/cloudTank/index',
+        }
+      ]
+    }
+  },
+  computed:{
+    ...mapGetters(['middlebarRouters']),
+    libraryFormatList(){
+      if(!this.middlebarRouters.length) return []
+      let formatList = []
+      return this.middlebarRouters.filter((item) =>{
+        return this.library.findIndex(lib => lib.title == item.meta.title) != -1
+      }).map((item,idx) => {
+        return {
+          title: item.meta.title,
+          src:this.library[idx].src,
+          path:this.library.find(lib => lib.title == item.meta.title ).path,
+          titleStyle:{
+            left: '20px',
+            bottom: '20px',
+            width:'auto'
+          }
+        }
+      })
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index/components/index-card-smart.vue

@@ -0,0 +1,41 @@
+<template>
+  <index-card title="智能练习">
+    <index-card-content :list="list" :line-size="2">
+      <template #default="{item}">
+        <index-image-item v-bind="item"/>
+      </template>
+    </index-card-content>
+  </index-card>
+</template>
+
+<script>
+import IndexCard from '@/views/index/components/index-card'
+import IndexCardContent from '@/views/index/components/index-card-content'
+import IndexImageItem from '@/views/index/components/index-image-item'
+
+export default {
+  name: 'index-card-smart',
+  components: { IndexImageItem, IndexCardContent, IndexCard },
+  data() {
+    return {
+      list: [{
+        title: '同步练习',
+        src: `${this.$imgBase}index/question-center/tongbuzaixian.png`,
+        path: '/question-center/smartExercise?tabActive=0'
+      },
+        {
+          title: '知识点练习',
+          src: `${this.$imgBase}index/question-center/zhishidianzaixian.png`,
+          path: '/question-center/smartExercise?tabActive=1'
+
+        }]
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,52 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col class="relative" :class="item.path ? 'pointer' : ''" :span="8" v-for="item in list" @click.native="navigator(item.path)">
-      <img  style="width:100%" :src="item.img"/>
-      <p class="bold" v-if="titlePostion == 'other'" :class="[titlePostion]">{{ item.title }}</p>
-      <p class="absolute bold" v-else :class="[titlePostion,titleClass]">{{ item.title }}</p>
-    </el-col>
-  </el-row>
-</template>
-<script>
-export default {
-  props:{
-    list:{
-      type:Array,
-      default:[]
-    },
-    titlePostion:{
-      type:String,
-      default: 'other' // 可选值 left center other
-    },
-    titleClass:{
-      type:String,
-      default: ''
-    }
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    navigator(path) {
-      if(!path) return
-      this.$router.push({ path: path });
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.center{
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.left{
-  left: 25px;
-  bottom: 20px;
-}
-.other{
-  margin-top: 10px;
-  text-align: center;
-}
-</style>

src/views/questioncenter/main.vue

@@ -5,9 +5,7 @@
       <el-image style="width: 100vw" :src="`${$imgBase}index/banner/question-banner.png`" fit="cover"></el-image>
     </div>
     <div class="fx-column fx-cen-cen pb20">
-      <index-card title="智能练习" class="mt20 index-block">
-        <mx-image-wrap titlePostion="center" style="color:white" :list="zhineng"></mx-image-wrap>
-      </index-card>
+      <index-card-smart class="mt20 index-block"></index-card-smart>
       <index-card title="精品试卷" class="mt20 index-block" more-text="更多" @more="more('/question-center/bestPaper')">
         <el-tabs type="card">
           <el-tab-pane label="名校试卷">
@@ -26,9 +24,7 @@
           </el-tab-pane>
         </el-tabs>
       </index-card>
-      <index-card title="组卷中心" class="mt20 index-block">
-        <mx-image-wrap titlePostion="left" :list="zujuan" titleClass="text-white"></mx-image-wrap>
-      </index-card>
+      <index-card-generating class="mt20 index-block"></index-card-generating>
       <index-card title="视频课程" class="mt20 index-block" more-text="更多" @more="more('/question-center/video_course')">
         <el-tabs type="card">
           <el-tab-pane label="同步课程">
@@ -54,30 +50,16 @@
 </template>
 <script>
 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 IndexCardSmart from '@/views/index/components/index-card-smart.vue'
+import IndexCardGenerating from '@/views/index/components/index-card-generating.vue'
 import { papersList } from '@/api/webApi/webQue'
 import { videoList } from '@/api/webApi/webVideo'
 
 export default {
-  components: { IndexCard, MxImageWrap },
+  components: { IndexCard, IndexCardGenerating,IndexCardSmart },
   data() {
     return {
       // 智能练习
-      zhineng: [
-        {
-          title: '同步练习',
-          img: `${this.$imgBase}index/question-center/tongbuzaixian.png`,
-          path: '/question-center/smartExercise?tabActive=0'
-        },
-        {
-          title: '知识点练习',
-          img: `${this.$imgBase}index/question-center/zhishidianzaixian.png`,
-          path: '/question-center/smartExercise?tabActive=1'
-
-        }
-      ],
       zujuan: [
         {
           title: '智能组卷',