index voluntary - blocks update

src/assets/styles/common.scss

@@ -829,6 +829,22 @@
   padding: 20px;
 }
 
+.active-pointer {
+  cursor: pointer;
+
+  &:hover {
+    color: $--color-primary;
+  }
+}
+
+.jump-item:hover {
+  transform: translateY(-5px);
+}
+
+.scale-item:hover {
+  @extend .card-shadow;
+  transform: scale(1.02);
+}
 
 // 首页内容宽度
 .app-content{
@@ -849,3 +865,9 @@
 .new-page {
   page-break-before: always;
 }
+
+.index-banner {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+}

src/views/career/index.vue

@@ -1,37 +1,9 @@
 <template>
   <div class="app-back">
-    <div class="banner">
-      <el-image style="width: 100vw" :src="`${$imgBase}index/zhiyuan/zhiyuan_banner.png`" fit="none"></el-image>
-    </div>
+    <div class="index-banner" :style="bannerStyle" />
     <div class="fx-cen-cen fx-column pb20">
-      <index-card title="数据查询" class="mt20 index-block">
-        <el-row :gutter="20">
-          <el-col class="relative fx-cen-cen fx-column"   :span="4" v-for="item in plan" >
-            <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 title="模拟志愿" class="mt20 index-block">
-        <el-steps :active="0" finish-status="success">
-          <el-step title="选择批次"></el-step>
-          <el-step title="填报批次"></el-step>
-          <el-step title="院校专业"></el-step>
-          <el-step title="保存志愿"></el-step>
-        </el-steps>
-        <el-row :gutter="40" class="mt60">
-          <el-col :span="12" class="text-right">
-           <el-button type="primary" @click="$router.push('/zhiyuan/SimulatedVolunteer')">进入填报</el-button>
-          </el-col>
-          <el-col :span="12" class="text-left">
-            <el-button type="primary" @click="$router.push('/zhiyuan/volunteerList')">我的志愿</el-button>
-          </el-col>
-        </el-row>
-      </index-card>
+      <index-card-voluntary-f6 class="mt20 index-block" />
+      <index-card-voluntary-entry class="mt20 index-block" />
       <index-card-news-single class="index-block mt20" type="填报技巧" morePath="/fuzhu/newGaokaoNews"  />
     </div>
   </div>
@@ -39,64 +11,20 @@
 <script>
 import IndexCard from '@/views/index/components/index-card.vue'
 import IndexCardNewsSingle from '@/views/index/components/index-card-news-single'
+import IndexCardVoluntaryF6 from "@/views/career/zhiyuan/cards/index-card-voluntary-f6.vue";
+import IndexCardVoluntaryEntry from "@/views/career/zhiyuan/cards/index-card-voluntary-entry.vue";
 export default {
-  components: { IndexCard,IndexCardNewsSingle },
+  name: 'VoluntaryMain',
+  components: {IndexCardVoluntaryEntry, IndexCardVoluntaryF6, IndexCard, IndexCardNewsSingle },
   data() {
     return {
-      plan: [
-        {
-          title: '批次控制线',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_batch.png`,
-          path: '/zhiyuan/batch'
-        },
-        {
-          title: '投档线',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_tdx.png`,
-          path: '/zhiyuan/ShiftLine'
-        },
-        {
-          title: '一分一段',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_yfyd.png`,
-          path: '/zhiyuan/yfyd'
-        },
-        {
-          title: '招生计划',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_plan.png`,
-          path: '/zhiyuan/enrollPlan'
-        },
-        {
-          title: '高考政策',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_gkzc.png`,
-          path: '/fuzhu/newGaokaoNews'
-        },
-        {
-          title: '院校查询',
-          img:`${this.$imgBase}index/zhiyuan/zhiyuan_yxcx.png`,
-          path: '/new-gaokao/three/UniversitiesColleges'
-        },
-      ]
+      bannerStyle: {
+        backgroundImage: `url(${require('@/assets/images/index/banner/voluntary-banner.png')})`,
+        height: '300px'
+      }
     }
-  },
-  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: #47C6A2;
-    border: 1px solid #47C6A2;
-  }
-}
+<style scoped>
 </style>

src/views/career/zhiyuan/cards/index-card-voluntary-entry.vue

@@ -0,0 +1,26 @@
+<template>
+  <index-card title="模拟志愿">
+    <el-image :src="require('@/assets/images/index/voluntary/voluntary-simulate.png')"/>
+    <div class="fx-row fx-cen-cen">
+      <div class="mt15">
+        <el-button type="primary" size="large" @click="$router.push('/zhiyuan/SimulatedVolunteer')">进入填报</el-button>
+        <el-button type="primary" size="large" @click="$router.push('/zhiyuan/volunteerList')">我的志愿</el-button>
+      </div>
+    </div>
+  </index-card>
+</template>
+
+<script>
+import IndexCard from "@/views/index/components/index-card.vue";
+
+export default {
+  name: "index-card-voluntary-entry",
+  components: {IndexCard}
+}
+</script>
+
+<style scoped>
+.el-button + .el-button {
+  margin-left: 40px;
+}
+</style>

src/views/career/zhiyuan/cards/index-card-voluntary-f6.vue

@@ -0,0 +1,74 @@
+<template>
+  <index-card title="数据查询">
+    <div class="fx-row fx-bet-cen">
+      <index-image-item v-for="i in list" :key="i.title" v-bind="i" class="active-pointer" />
+    </div>
+  </index-card>
+</template>
+
+<script>
+import IndexCard from "@/views/index/components/index-card.vue";
+import IndexCardContent from "@/views/index/components/index-card-content.vue";
+import IndexImageItem from "@/views/index/components/index-image-item.vue";
+
+const commonStyle = {
+  classes: 'fx-column fx-cen-cen',
+  imgStyle: {
+    width: "90px",
+    height: "90px"
+  },
+  imgClasses: 'jump-item',
+  titleClasses: 'fx-row fx-cen-cen bold'
+}
+
+export default {
+  name: "index-card-voluntary-f6",
+  components: {IndexImageItem, IndexCardContent, IndexCard},
+  data() {
+    return {
+      list: [
+        {
+          ...commonStyle,
+          title: '批次控制线',
+          src: require('@/assets/images/index/voluntary/voluntary-batch.png'),
+          path: '/zhiyuan/batch'
+        },
+        {
+          ...commonStyle,
+          title: '投档线',
+          src: require('@/assets/images/index/voluntary/voluntary-shift.png'),
+          path: '/zhiyuan/ShiftLine'
+        },
+        {
+          ...commonStyle,
+          title: '一分一段',
+          src: require('@/assets/images/index/voluntary/voluntary-segment.png'),
+          path: '/zhiyuan/yfyd'
+        },
+        {
+          ...commonStyle,
+          title: '招生计划',
+          src: require('@/assets/images/index/voluntary/voluntary-plan.png'),
+          path: '/zhiyuan/enrollPlan'
+        },
+        {
+          ...commonStyle,
+          title: '高考政策',
+          src: require('@/assets/images/index/voluntary/voluntary-policy.png'),
+          path: '/fuzhu/newGaokaoNews'
+        },
+        {
+          ...commonStyle,
+          title: '院校查询',
+          src: require('@/assets/images/index/voluntary/voluntary-college.png'),
+          path: '/new-gaokao/three/UniversitiesColleges'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/elective/main.vue

@@ -45,10 +45,5 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
-.index-banner {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center center;
-}
+<style scoped>
 </style>

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="width100 relative pointer" :style="wrapStyle" @click="handleItem">
-    <el-image :src="src" fit="contain" :style="imgStyle"/>
+  <div :class="classes" :style="wrapStyle" @click="handleItem">
+    <el-image :src="src" fit="contain" :class="imgClasses" :style="imgStyle"/>
     <div :class="titleClasses" :style="titleStyle">
       {{ title }}
     </div>
@@ -34,8 +34,12 @@ export default {
       type: String,
       default: ''
     },
+    classes: {
+      type: String | Array,
+      default: 'width100 relative pointer'
+    },
     titleClasses: {
-      type: Array,
+      type: String | Array,
       default: () => ['width100', 'absolute', 'fx-row', 'fx-cen-cen', 'f-fff', 'pf', 'f24']
     },
     titleStyle: {
@@ -48,6 +52,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    imgClasses: {
+      type: String | Array,
+      default: ''
+    },
     wrapStyle:{
       type: Object,
       default: () => ({})