index blocks - database

src/assets/styles/common.scss

@@ -865,7 +865,7 @@
 }
 
 .app-back{
-  background: #f2f2f2;
+  background: #F9F9F9;
 }
 
 .print-page {

src/views/accurateTeaching/main.vue

@@ -1,103 +1,27 @@
 <template>
   <div class="app-back">
-    <div class="banner">
-      <el-image :src="`${$imgBase}index/banner/personal_database.png`" fit="cover"></el-image>
-    </div>
+    <div class="index-banner" :style="bannerStyle" />
     <div class="fx-column fx-cen-cen pb20">
-      <index-card title="班级任务" class="mt20 index-block" v-if="formatList.length">
-        <el-row :gutter="20">
-          <el-col class="relative fx-cen-cen fx-column"   :span="4" v-for="item in formatList" >
-            <div class="plan_item pointer" @click="$router.push(item.path)">
-              <div class="img-wrap">
-                <img  :src="item.img"/>
-              </div>
-            </div>
-            <p class="bold text-center" >{{ item.title }}</p>
-          </el-col>
-        </el-row>
-      </index-card>
-      <index-card-res-library class="mt20 index-block"></index-card-res-library>
+      <index-card-task class="mt20 index-block" />
+      <index-card-res-library class="mt20 index-block" />
     </div>
   </div>
 </template>
 <script>
-import IndexCard from '@/views/index/components/index-card.vue'
 import IndexCardResLibrary from '@/views/index/components/index-card-res-library.vue'
-import { mapGetters } from 'vuex'
-import store from '@/store'
+import IndexCardTask from "@/views/index/components/index-card-task.vue"
+
 export default {
-  components: { IndexCard, IndexCardResLibrary },
+  components: {IndexCardTask, IndexCardResLibrary },
   data() {
     return {
-      plan: [
-        {
-          title: '微课视频',
-          img:`${this.$imgBase}index/database/micro_video.png`,
-          path: '/personalDatabase/class-task/micro-video'
-        },
-        {
-          title: '作业视频',
-          img:`${this.$imgBase}index/database/homework_video.png`,
-          path: '/personalDatabase/class-task/homework-video'
-        },
-        {
-          title: '作业任务',
-          img:`${this.$imgBase}index/database/paper_work.png`,
-          path: '/personalDatabase/class-task/paper-work'
-        },
-        {
-          title: '学校通知',
-          img:`${this.$imgBase}index/database/school_notice.png`,
-          path: '/personalDatabase/class-task/school-notice'
-        },
-        {
-          title: '班级通知',
-          img:`${this.$imgBase}index/database/class_notice.png`,
-          path: '/personalDatabase/class-task/class-notice'
-        },
-        {
-          title: '系统通知',
-          img:`${this.$imgBase}index/database/system_notice.png`,
-          path: '/personalDatabase/class-task/system-notice'
-        },
-      ],
+      bannerStyle: {
+        backgroundImage: `url(${require('@/assets/images/index/banner/library-banner.png')})`,
+        height: '300px'
+      }
     }
-  },
-  computed:{
-    ...mapGetters(['middlebarRouters']),
-    formatList() {
-      if(!this.middlebarRouters.length) return []
-      if(!this.middlebarRouters.find(item => item.meta.title == '班级任务'))  return  []
-      let formatList = []
-      return this.middlebarRouters.find(item => item.meta.title == '班级任务').children.slice(0,6).map((item,idx) =>{
-        return {
-          title: item.meta.title,
-          img:this.plan[idx].img,
-          path:item.path,
-        }
-      })
-    },
-  },
-  methods: {
   }
 }
 </script>
-<style scoped lang="scss">
-.plan_item{
-  padding: 20px;
-  border: 1px solid #C5C5C5;
-  margin-bottom: 20px;
-  border-radius: 4px;
-  width: 134px;
-  height: 134px;
-  .img-wrap{
-    width: 100%;
-    height: 100%;
-    text-align: center;
-  }
-  &:hover{
-    background: #00CCB4;
-    border: 1px solid #00CCB4;
-  }
-}
+<style scoped>
 </style>

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

@@ -1,6 +1,6 @@
 <template>
-  <index-card title="个人资源库">
-    <index-card-content :list="libraryFormatList" :line-size="3">
+  <index-card v-if="libraryRoutes.length" title="个人资源库">
+    <index-card-content :list="libraryRoutes" :line-size="3">
       <template #default="{item}">
         <index-image-item v-bind="item"/>
       </template>
@@ -12,55 +12,30 @@
 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'
+import {mapGetters} from 'vuex'
+import request from "@/utils/request";
 
 export default {
   name: 'index-card-generating',
-  components: { IndexImageItem, IndexCardContent, IndexCard },
+  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',
-        }
-      ]
+      libraries: ['个人资源库', '校本资源库', '云库']
     }
   },
-  computed:{
+  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'
-          }
-        }
-      })
+    libraryRoutes() {
+      return this.middlebarRouters
+        .filter(r => this.libraries.includes(r.meta.title))
+        .map(r => ({
+          src: require('@/assets/images/index/lib/' + r.meta.imgName + '.png'),
+          imgClasses: 'rd8',
+          path: r.children.first().path // TODO: should copy logic from voluntary-ui `AccessDeepMenu`
+        }))
     }
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
 

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

@@ -0,0 +1,53 @@
+<template>
+  <index-card v-if="taskRoutes.length" title="班级任务">
+    <index-card-content :list="taskRoutes" :line-size="6">
+      <template #default="{item}">
+        <div class="fx-column ai-cen active-pointer" :style="item.style" @click="$router.push(item.path)">
+          <div class="index-banner task-item"/>
+          <div class="mt15 f16 bold">{{ item.title }}</div>
+        </div>
+      </template>
+    </index-card-content>
+  </index-card>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+import IndexCard from "@/views/index/components/index-card.vue";
+import IndexCardContent from "@/views/index/components/index-card-content.vue";
+
+export default {
+  name: "index-card-task",
+  components: {IndexCardContent, IndexCard},
+
+  computed: {
+    ...mapGetters(['middlebarRouters']),
+    taskRoutes() {
+      const parentRoute = this.middlebarRouters.find(item => item.meta.title == '班级任务')
+      if (!parentRoute) return []
+      return parentRoute.children.map((item, idx) => {
+        return {
+          path: item.path,
+          title: item.meta.title,
+          style: {
+            '--bg-img': `url(${require('@/assets/images/index/lib/' + item.meta.imgName + '.png')})`,
+            '--bg-img-selected': `url(${require('@/assets/images/index/lib/' + item.meta.imgName + '-selected.png')})`
+          }
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.active-pointer .task-item {
+  width: 112px;
+  height: 112px;
+  background-image: var(--bg-img);
+}
+
+.active-pointer:hover .task-item {
+  background-image: var(--bg-img-selected);
+}
+</style>

src/views/index/login.vue

@@ -162,7 +162,7 @@ export default {
 
 <style scoped>
 .login-container {
-  background-color: #F2F2F2;
+  background-color: #F9F9F9;
 }
 
 /deep/ .el-dialog {