index block - career video & my test

src/assets/styles/common.scss

@@ -693,6 +693,10 @@
   font-size: 20px;
 }
 
+.f22 {
+  font-size: 22px;
+}
+
 .f24 {
   font-size: 24px;
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <index-card title="生涯视频" more-text="更多" @more="handleMore">
+  <index-card simple title="生涯视频" more-text="查看全部" @more="handleMore">
     <index-card-content :list="list" :line-size="lineSize">
       <template #default="{item}">
         <index-image-item v-bind="item"></index-image-item>

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

@@ -0,0 +1,61 @@
+<template>
+  <el-row>
+    <el-col :span="16">
+      <index-card simple title="我的测评">
+        <el-row :gutter="12">
+          <el-col :span="12" class="pointer" @click.native="goCareerTest">
+            <el-image :src="require('@/assets/images/index/login/career-test-bg.png')"/>
+          </el-col>
+          <el-col :span="12" class="pointer" @click.native="goElectiveTest">
+            <el-image :src="require('@/assets/images/index/login/elective-test-bg.png')"/>
+          </el-col>
+          <el-col :span="24" class="mt12 pointer" @click.native="goElectiveQuery">
+            <el-image :src="require('@/assets/images/index/login/elective-query-bg.png')"/>
+          </el-col>
+        </el-row>
+      </index-card>
+    </el-col>
+    <el-col :span="8" class="pl20">
+      <index-card-top v-bind="topOverride" style="height: 411px" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import IndexCard from "@/views/index/components/index-card.vue";
+import IndexCardTop from "@/views/index/components/index-card-top.vue";
+
+export default {
+  name: "index-card-test",
+  components: {IndexCardTop, IndexCard},
+  data() {
+    return {
+      topOverride: {
+        listSpace: 10,
+        newsQuery: {
+          pageSize: 8,
+          tag: '',
+          type: '生涯资讯'
+        },
+        more: '查看全部',
+        morePath: '/new-gaokao/volunteering_syzx'
+      }
+    }
+  },
+  methods: {
+    goElectiveQuery() {
+      this.$router.push('/new-gaokao/careerSubjectIndex')
+    },
+    goElectiveTest() {
+      this.$router.push('/new-gaokao/myTest/testSelectSubject')
+    },
+    goCareerTest() {
+      this.$router.push('/new-gaokao/myTest/myTest/CareerEva')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,7 +1,7 @@
 <template>
-  <index-card title="热门资讯">
+  <index-card title="热门资讯" :more-text="more" @more="handleMore">
     <!-- 空白与左边tabs对齐 -->
-    <div v-if="isSpace" style="height: 55px"></div>
+    <div :style="{height: listSpace+'px'}"></div>
     <div v-for="news in topNews" :key="news.id" class="fx-row fx-sta-cen pf f-333 pr40" style="line-height: 35px">
       <i class="el-icon-alarm-clock"></i>
       <span class="ml3">{{ news.sendDate }}</span>
@@ -24,14 +24,25 @@ export default {
   components: { IndexCard },
   props:{
     // 是否向上空出来一块
-    isSpace:{
-      type:Boolean,
-      default:true
+    listSpace:{
+      type: Number,
+      default: 55
+    },
+    newsQuery: {
+      type: Object,
+      default: () => ({})
+    },
+    more: {
+      type: String,
+      default: ''
+    },
+    morePath: {
+      type: String,
+      default: '/fuzhu/newGaokaoNews'
     }
   },
   data() {
     return {
-      morePath: '/fuzhu/newGaokaoNews',
       topNews: []
     }
   },
@@ -43,7 +54,8 @@ export default {
       career.listNoToken({
         pageNum: 1,
         pageSize: 5,
-        tag: 'hot'
+        tag: 'hot',
+        ...this.newsQuery
       }).then(res => {
         this.topNews = res.rows
       })
@@ -58,6 +70,6 @@ export default {
 
 <style lang="scss" scoped>
 .new-title:hover {
-  color: #47C6A2;
+  color: var(--themeColor);
 }
 </style>

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

@@ -1,14 +1,15 @@
 <template>
-  <el-card shadow="never" class="bg-white">
+  <el-card shadow="never" class="bg-white" :class="{'index-card-simple': simple}">
     <template #header>
-      <div class="fx-row fx-bet-base pf bold">
+      <div class="fx-row fx-bet-base pf">
         <div>
-          <span class="f-333 f24">{{ title }}</span>
+          <span class="f-333 f24 bold">{{ title }}</span>
           <span class="f-999 f18 ml30">{{ subTitle }}</span>
         </div>
         <div v-if="moreText" class="f-333 f16 pointer" @click="$emit('more')">
+          <slot name="more-prefix"></slot>
           <span>{{ moreText }}</span>
-          <i class="el-icon-arrow-right index-card-more ml8"></i>
+          <i class="el-icon-arrow-right index-card-more"></i>
         </div>
       </div>
     </template>
@@ -19,18 +20,37 @@
 <script>
 export default {
   name: 'index-card',
-  props: ['title', 'subTitle', 'moreText']
+  props: {
+    'title':{ type: String, default: null },
+    'subTitle':{ type: String, default: null },
+    'moreText':{ type: String, default: null },
+    'simple':{type: Boolean, default: false}
+  }
 }
 </script>
 
-<style scoped>
-/deep/ .el-card__header {
+<style lang="scss" scoped>
+::v-deep .el-card__header {
   min-height: 60px;
   padding: 30px 12px 5px 12px;
 }
 
 .index-card-more {
-  border: 1px solid #333;
-  border-radius: 50%;
+  //border: 1px solid #333;
+  //border-radius: 50%;
+}
+
+.index-card-simple {
+  border: 0;
+  background-color: transparent;
+
+  ::v-deep .el-card__header {
+    min-height: unset;
+    padding: 20px 0;
+  }
+
+  ::v-deep .el-card__body {
+    padding: 0
+  }
 }
 </style>

src/views/index/components/index-news-single-wrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fx-row">
     <index-card-news-single type="单招志愿" morePath="/fuzhu/volunteering_single" class="mr20" style="width: 65%"/>
-    <index-card-top :is-space="false" class="fx-1"/>
+    <index-card-top :list-space="0" class="fx-1"/>
   </div>
 </template>
 

src/views/index/login.vue

@@ -7,9 +7,10 @@
       <login-top-menus></login-top-menus>
       <login-form-banner ref="loginForm" :login-form="loginForm" :loading="loading"></login-form-banner>
       <div class="fx-column fx-cen-cen">
+        <index-card-career class="mt20 index-block"/>
+        <index-card-test class="mt20 index-block" />
         <index-card-subject-query class="mt20 index-block"/>
         <index-card-elective-test class="mt20 index-block"/>
-        <index-card-career class="mt20 index-block"/>
         <index-preference-simulate class="mt20 index-block"/>
         <index-preference class="mt20 index-block"/>
         <index-news-top-wrapper class="mt20 index-block"/>
@@ -42,10 +43,12 @@ import IndexPreferenceSimulate from '@/views/index/components/index-preference-s
 import IndexPreference from '@/views/index/components/index-preference'
 import IndexCardCareer from '@/views/index/components/index-card-career'
 import IndexNewsTopWrapper from '@/views/index/components/index-news-top-wrapper'
+import IndexCardTest from "@/views/index/components/index-card-test.vue";
 
 export default {
   mixins: [loginCheckMixin],
   components: {
+    IndexCardTest,
     IndexNewsTopWrapper,
     IndexCardCareer,
     IndexPreference,