new index - + login

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

@@ -0,0 +1,28 @@
+<template>
+  <index-card title="生涯视频" more-text="更多" @more="handleMore"></index-card>
+</template>
+
+<script>
+import IndexCard from '@/views/index/components/index-card'
+
+export default {
+  name: 'index-card-career',
+  components: { IndexCard },
+  data() {
+    return {
+      morePath: '',
+      list: []
+    }
+  },
+  methods: {
+    async handleMore() {
+      await this.loginCheck()
+      this.transferTo(this.morePath)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+  <el-row :gutter="gutter">
+    <el-col v-for="(item,idx) in list" :key="idx" :span="span(item)">
+      <slot v-bind="{item, index:idx}"></slot>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'index-card-content',
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    lineSize: {
+      type: Number,
+      default: 1
+    },
+    gutter: {
+      type: Number,
+      default: 20
+    }
+  },
+  methods: {
+    span(item) {
+      return item.span || (24 / this.lineSize)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,43 @@
+<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-elective-test',
+  components: { IndexCard, IndexImageItem, IndexCardContent },
+  data() {
+    return {
+      list: [
+        {
+          src: require('@/assets/images/index/login/banner_test_philosophy@2x.png'),
+          path: '/new-gaokao/myTest/testSelectSubject',
+          title: '人生价值观探索'
+        }, {
+          src: require('@/assets/images/index/login/banner_test_occupation@2x.png'),
+          path: '/new-gaokao/myTest/testSelectSubject',
+          title: '职业兴趣探索'
+        }, {
+          src: require('@/assets/images/index/login/banner_test_knowledge@2x.png'),
+          path: '/new-gaokao/myTest/testSelectSubject',
+          title: '知识点兴趣探索'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <index-card title="选科查询" more-text="我的选科方案" @more="handleElectiveHistory">
+  <index-card>
     <div>内容</div>
   </index-card>
 </template>
@@ -12,12 +12,7 @@ export default {
   mixins: [loginCheckMixin],
   name: 'index-card-elective',
   components: { IndexCard },
-  methods: {
-    async handleElectiveHistory() {
-      await this.loginCheck()
-      // TODO: 跳转我的选科方案
-    }
-  }
+  methods: {}
 }
 </script>
 

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

@@ -0,0 +1,47 @@
+<template>
+  <index-card title="选科查询" more-text="我的选科方案" @more="handleMore">
+    <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 loginCheckMixin from '@/views/components/blocks/index-login-interceptor-mixin'
+import transferMixin from '@/components/mx-transfer-mixin'
+import IndexCardContent from '@/views/index/components/index-card-content'
+import IndexImageItem from '@/views/index/components/index-image-item'
+
+export default {
+  mixins: [loginCheckMixin, transferMixin],
+  name: 'index-card-subject-query',
+  components: { IndexImageItem, IndexCardContent, IndexCard },
+  data() {
+    return {
+      morePath: '/career/subject/myChoice',
+      list: [{
+        src: require('@/assets/images/index/login/banner_query_major@2x.png'),
+        path: '/career/subject/subjectChoice',
+        title: '由科目选专业'
+      }, {
+        src: require('@/assets/images/index/login/banner_query_group@2x.png'),
+        path: '/career/subject/majorChoice',
+        title: '由专业选科目'
+      }]
+    }
+  },
+  methods: {
+    async handleMore() {
+      await this.loginCheck()
+      this.transferTo(this.morePath)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index/components/index-image-item.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="width100 relative">
+    <el-image :src="src" fit="contain" @click="handleItem"/>
+    <div :class="titleClasses" :style="titleStyle">
+      {{ title }}
+    </div>
+    <div :class="descClasses" :style="descStyle">
+      {{ desc }}
+    </div>
+  </div>
+</template>
+
+<script>
+import loginCheckMixin from '@/views/components/blocks/index-login-interceptor-mixin'
+import transferMixin from '@/components/mx-transfer-mixin'
+
+export default {
+  mixins: [loginCheckMixin, transferMixin],
+  name: 'index-image-item',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    desc: {
+      type: String,
+      default: ''
+    },
+    src: {
+      type: String,
+      default: ''
+    },
+    path: {
+      type: String,
+      default: ''
+    },
+    titleClasses: {
+      type: Array,
+      default: () => ['width100', 'absolute', 'fx-row', 'fx-cen-cen', 'f-fff', 'pf', 'f24']
+    },
+    titleStyle: {
+      type: Object,
+      default: () => ({
+        bottom: '30px'
+      })
+    },
+    descClasses: {
+      type: Array,
+      default: () => ['absolute', 'fx-row', 'fx-cen-cen', 'f-fff', 'pf', 'f24']
+    },
+    descStyle: {
+      type: Object,
+      default: () => ({
+        top: '25px',
+        left: '17px',
+        opacity: 0.6
+      })
+    }
+  },
+  methods: {
+    async handleItem() {
+      await this.loginCheck()
+      if (!this.path) return
+      this.transferTo(this.path)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index/components/index-preference-simulate.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="mt20 index-block" @click="handleClick">
+    <el-image :src="require('@/assets/images/index/login/banner_preference_simulate@2x.png')" fit="contain"/>
+  </div>
+</template>
+
+<script>
+import loginCheckMixin from '@/views/components/blocks/index-login-interceptor-mixin'
+import transferMixin from '@/components/mx-transfer-mixin'
+
+export default {
+  mixins: [loginCheckMixin, transferMixin],
+  name: 'index-preference-simulate',
+  data() {
+    return {
+      path: '/zhiyuan/SimulatedVolunteer'
+    }
+  },
+  methods: {
+    async handleClick() {
+      await this.loginCheck()
+      this.transferTo(this.path)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,99 @@
+<template>
+  <index-card title="高考志愿">
+    <index-card-content :list="list">
+      <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'
+
+const titleClasses = ['absolute', 'fx-row', 'fx-cen-cen', 'f-fff', 'pf', 'f16', 'bold']
+const titleStyle = { left: '17px', bottom: '25px' }
+
+export default {
+  name: 'index-preference',
+  components: { IndexImageItem, IndexCardContent, IndexCard },
+  data() {
+    return {
+      list: [
+        {
+          span: 6,
+          src: require('@/assets/images/index/login/img_batch@2x.png'),
+          title: '批次控制线',
+          desc: 'Control Line',
+          path: '/zhiyuan/batch',
+          titleClasses: titleClasses,
+          titleStyle: titleStyle
+        },
+        {
+          span: 6,
+          src: require('@/assets/images/index/login/img_cast_off@2x.png'),
+          title: '投档线',
+          desc: 'Pitch Line',
+          path: '/zhiyuan/ShiftLine',
+          titleClasses: titleClasses,
+          titleStyle: titleStyle
+        },
+        {
+          span: 6,
+          src: require('@/assets/images/index/login/img_segment@2x.png'),
+          title: '一分一段',
+          desc: 'Piece by Piece',
+          path: '/zhiyuan/yfyd',
+          titleClasses: titleClasses,
+          titleStyle: titleStyle
+        },
+        {
+          span: 6,
+          src: require('@/assets/images/index/login/img_plan@2x.png'),
+          title: '招生计划',
+          desc: 'Enrollment Plan',
+          path: '/zhiyuan/enrollPlan',
+          titleClasses: titleClasses,
+          titleStyle: titleStyle
+        },
+        {
+          span: 8,
+          src: require('@/assets/images/index/login/img_library_college@2x.png'),
+          title: '院校库',
+          desc: 'College Library',
+          path: '/new-gaokao/three/UniversitiesColleges',
+          class: ['mt10'],
+          titleClasses: titleClasses,
+          titleStyle: titleStyle
+        },
+        {
+          span: 8,
+          src: require('@/assets/images/index/login/img_library_major@2x.png'),
+          title: '专业库',
+          desc: 'Professional library',
+          path: '/new-gaokao/three/ProfessLib',
+          class: ['mt10'],
+          titleClasses: titleClasses,
+          titleStyle: titleStyle
+        },
+        {
+          span: 8,
+          src: require('@/assets/images/index/login/img_library_job@2x.png'),
+          title: '职业库',
+          desc: 'Career Library',
+          path: '/new-gaokao/three/Vocation',
+          class: ['mt10'],
+          titleClasses: titleClasses,
+          titleStyle: titleStyle
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index/login.vue

@@ -8,7 +8,10 @@
       <login-form-banner ref="loginForm" :is-login="isLogin" :login-form="loginForm" :login-rules="loginRules"
                          :loading="loading"></login-form-banner>
       <div class="fx-column fx-cen-cen">
-        <index-card-elective class="mt20" style="width: 1350px; overflow: hidden;"/>
+        <index-card-subject-query class="mt20 index-block"/>
+        <index-card-elective-test class="mt20 index-block"/>
+        <index-preference-simulate class="mt20 index-block"/>
+        <index-preference class="mt20 index-block"/>
       </div>
       <bottom-p class="mt20"></bottom-p>
       <el-dialog v-if="dialogVisible" title :visible.sync="dialogVisible" width="850px">
@@ -37,10 +40,18 @@ import LoginFormBanner from '@/views/index/components/login-form-banner'
 import LoginTopMenus from '@/views/index/components/login-top-menus'
 import loginCheckMixin from '@/views/components/blocks/index-login-check-mixin'
 import IndexCardElective from '@/views/index/components/index-card-elective'
+import IndexCardSubjectQuery from '@/views/index/components/index-card-subject-query'
+import IndexCardElectiveTest from '@/views/index/components/index-card-elective-test'
+import IndexPreferenceSimulate from '@/views/index/components/index-preference-simulate'
+import IndexPreference from '@/views/index/components/index-preference'
 
 export default {
   mixins: [RouterHelpMixin, loginCheckMixin],
   components: {
+    IndexPreference,
+    IndexPreferenceSimulate,
+    IndexCardElectiveTest,
+    IndexCardSubjectQuery,
     IndexCardElective,
     LoginTopMenus,
     LoginFormBanner,
@@ -416,4 +427,9 @@ export default {
   max-height: 520px;
   width: 800px;
 }
+
+.index-block {
+  width: 1350px;
+  overflow: hidden;
+}
 </style>