index block - all style adjustment

src/assets/styles/common.scss

@@ -590,6 +590,10 @@
   padding: 10px;
 }
 
+.pd15 {
+  padding: 15px;
+}
+
 .fx-wrap {
   flex-wrap: wrap;
 }

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

@@ -2,8 +2,8 @@
   <index-card simple title="院校排名" more-text="查看全部" @more="handleMore">
     <el-row :gutter="20">
       <el-col :span="8">
-        <div class="width100 college-rank-a rd4 pd20">
-          <div class="f-red f16 bold">校友会排行榜</div>
+        <div class="width100 college-rank-a rd4">
+          <div class="f-red f18 bold" style="letter-spacing: 3px">校友会排行榜</div>
           <index-card-content :list="listA" :gutter="0" :line-size="1">
             <template #default="{item, index}">
               <index-college-item :rank="index+1" :university="item" />
@@ -12,8 +12,8 @@
         </div>
       </el-col>
       <el-col :span="8">
-        <div class="width100 college-rank-b rd4 pd20">
-          <div class="f-red f16 bold">软科排行榜</div>
+        <div class="width100 college-rank-b rd4">
+          <div class="f-red f18 bold" style="letter-spacing: 3px">软科排行榜</div>
           <index-card-content :list="listB" :gutter="0" :line-size="1">
             <template #default="{item, index}">
               <index-college-item :rank="index+1" :university="item" />
@@ -22,8 +22,8 @@
         </div>
       </el-col>
       <el-col :span="8">
-        <div class="width100 college-rank-c rd4 pd20">
-          <div class="f-red f16 bold">QS排行榜</div>
+        <div class="width100 college-rank-c rd4">
+          <div class="f-red f18 bold" style="letter-spacing: 3px">QS排行榜</div>
           <index-card-content :list="listC" :gutter="0" :line-size="1">
             <template #default="{item, index}">
               <index-college-item :rank="index+1" :university="item" />
@@ -103,16 +103,19 @@ export default {
 <style scoped>
 .college-rank-a {
   background: url('~@/assets/images/index/login/college-rank-a.png') no-repeat;
-  background-size: contain;
+  background-size: cover;
+  padding: 12px 20px;
 }
 
 .college-rank-b {
   background: url('~@/assets/images/index/login/college-rank-b.png') no-repeat;
-  background-size: contain;
+  background-size: cover;
+  padding: 12px 20px;
 }
 
 .college-rank-c {
   background: url('~@/assets/images/index/login/college-rank-c.png') no-repeat;
-  background-size: contain;
+  background-size: cover;
+  padding: 12px 20px;
 }
 </style>

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

@@ -1,20 +1,22 @@
 <template>
-  <index-card title="高考资讯" sub-title="最新、最全的高考资讯" more-text="更多" @more="handleMore">
-    <el-tabs v-model="activeName" type="card" @tab-click="handleTabChanged">
-      <el-tab-pane v-for="type in newsTypes" :key="type" :name="type" :label="type">
-        <el-row>
-          <el-col v-for="news in getSafeNews(type)" :key="news.id" :span="12">
-            <div 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>
-              <span class="ml10 fx-1 text-ellipsis new-title pointer"
-                    :title="news.title" @click="goNewsWithType(type,news)">
+  <index-card simple title="高考资讯" sub-title="最新、最全的高考资讯" more-text="查看全部" @more="handleMore">
+    <div class="bg-white pd20 rd4" style="height: 270px">
+      <el-tabs v-model="activeName" type="card" @tab-click="handleTabChanged">
+        <el-tab-pane v-for="type in newsTypes" :key="type" :name="type" :label="type">
+          <el-row>
+            <el-col v-for="news in getSafeNews(type)" :key="news.id" :span="12">
+              <div 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>
+                <span class="ml10 fx-1 text-ellipsis new-title pointer"
+                      :title="news.title" @click="goNewsWithType(type,news)">
                 {{ news.title }}</span>
-            </div>
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-    </el-tabs>
+              </div>
+            </el-col>
+          </el-row>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
   </index-card>
 </template>
 
@@ -27,7 +29,7 @@ import * as career from '@/api/webApi/career-news'
 export default {
   mixins: [transferMixin, loginCheckMixin],
   name: 'index-card-news',
-  components: { IndexCard },
+  components: {IndexCard},
   data() {
     return {
       morePath: '/fuzhu/newGaokaoNews',
@@ -68,9 +70,9 @@ export default {
       await this.loginCheck()
       this.transferTo(this.morePath)
     },
-    async goNewsWithType(type,news) {
+    async goNewsWithType(type, news) {
       await this.loginCheck()
-      this.transferTo(this.morePath, { type,news })
+      this.transferTo(this.morePath, {type, news})
     }
   }
 }

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

@@ -0,0 +1,54 @@
+<template>
+ <index-card simple title="高考志愿">
+   <el-row :gutter="20">
+     <el-col :span="14" class="pointer" @click.native="goSimulate">
+       <el-image :src="require('@/assets/images/index/login/pref-simulate.png')" class="rd4 simulate-full" />
+     </el-col>
+     <el-col :span="5">
+       <el-image :src="require('@/assets/images/index/login/pref-batch-line.png')"
+                 class="rd4 pointer" @click="goBatchLine" />
+       <el-image :src="require('@/assets/images/index/login/pref-shift-line.png')"
+                 class="rd4 pointer mt20" @click="goShiftLine" />
+     </el-col>
+     <el-col :span="5">
+       <el-image :src="require('@/assets/images/index/login/pref-score-segment.png')"
+                 class="rd4 pointer" @click="goScoreSegment" />
+       <el-image :src="require('@/assets/images/index/login/pref-plan.png')"
+                 class="rd4 pointer mt20" @click="goPlan" />
+     </el-col>
+   </el-row>
+ </index-card>
+</template>
+
+<script>
+import IndexCard from "@/views/index/components/index-card.vue";
+
+export default {
+  name: "index-card-simulate-f4",
+  components: {IndexCard},
+  methods: {
+    goSimulate() {
+      this.$router.push('/zhiyuan/SimulatedVolunteer')
+    },
+    goBatchLine() {
+      this.$router.push('/zhiyuan/batch')
+    },
+    goShiftLine() {
+      this.$router.push('/zhiyuan/ShiftLine')
+    },
+    goScoreSegment() {
+      this.$router.push('/zhiyuan/yfyd')
+    },
+    goPlan() {
+      this.$router.push('/zhiyuan/enrollPlan')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.simulate-full {
+  width: 100%;
+  height: 367px;
+}
+</style>

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

@@ -26,11 +26,12 @@ 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",
+  name: "index-card-test-news",
   components: {IndexCardTop, IndexCard},
   data() {
     return {
       topOverride: {
+        title: '生涯资讯',
         listSpace: 10,
         newsQuery: {
           pageSize: 8,

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

@@ -1,13 +1,14 @@
 <template>
-  <index-card title="热门资讯" :more-text="more" @more="handleMore">
-    <!-- 空白与左边tabs对齐 -->
-    <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>
-      <span class="ml10 fx-1 text-ellipsis new-title pointer"
-            :title="news.title" @click="handleMore(news)">
+  <index-card :title="title" :more-text="more" :simple="simple" @more="handleMore">
+    <div :class="contentWrapClass">
+      <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>
+        <span class="ml10 fx-1 text-ellipsis new-title pointer"
+              :title="news.title" @click="handleMore(news)">
                 {{ news.title }}</span>
+      </div>
     </div>
   </index-card>
 </template>
@@ -21,10 +22,13 @@ import * as career from '@/api/webApi/career-news'
 export default {
   mixins: [loginCheckMixin, transferMixin],
   name: 'index-card-top',
-  components: { IndexCard },
-  props:{
-    // 是否向上空出来一块
-    listSpace:{
+  components: {IndexCard},
+  props: {
+    title: {
+      type: String,
+      default: '热门资讯'
+    },
+    listSpace: {
       type: Number,
       default: 55
     },
@@ -39,6 +43,14 @@ export default {
     morePath: {
       type: String,
       default: '/fuzhu/newGaokaoNews'
+    },
+    simple: {
+      type: Boolean,
+      default: false
+    },
+    contentWrapClass: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -62,7 +74,7 @@ export default {
     },
     async handleMore(news) {
       await this.loginCheck()
-      this.transferTo(this.morePath,{ news })
+      this.transferTo(this.morePath, {news})
     }
   }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="fx-row ai-cen f16 f-333" :class="university.rowClass" @click="goUniversity">
+  <div class="fx-row ai-cen f16 f-333 pointer" :class="university.rowClass" @click="goUniversity">
     <span style="width: 30px">{{rank}}</span>
     <el-image :src="university.src" class="icon52" />
     <div class="fx-column bold ml12">
@@ -14,8 +14,11 @@
 </template>
 
 <script>
+import MxTransferMixin from "@/components/mx-transfer-mixin";
+
 export default {
   name: "index-college-item",
+  mixins: [MxTransferMixin],
   props: {
     rank: {
       type: Number,

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

@@ -1,7 +1,7 @@
 <template>
   <div class="fx-row">
     <index-card-news class="mr20" style="width: 65%"/>
-    <index-card-top class="fx-1"/>
+    <index-card-top v-bind="newsOverride" class="fx-1"/>
   </div>
 </template>
 
@@ -11,7 +11,15 @@ import IndexCardTop from '@/views/index/components/index-card-top'
 
 export default {
   name: 'index-news-top-wrapper',
-  components: { IndexCardTop, IndexCardNews }
+  components: { IndexCardTop, IndexCardNews },
+  data() {
+    return {
+      newsOverride: {
+        contentWrapClass: 'bg-white pd20 rd4',
+        simple: true
+      }
+    }
+  }
 }
 </script>
 

src/views/index/components/login-form-banner.vue

@@ -2,8 +2,8 @@
   <div class="fx-row fx-end-cen login-form-container" style="padding: 40px 0;"
        :style="{backgroundImage: `url(${require('@/assets/images/index/login/banner.png')})`} ">
     <div class="bg-white rd4 login-form-block">
-      <img style="width: 60%;margin-left:20%;" src="@/assets/images/login_logo.png"/>
-      <div class="f-primary text-center mt20 mb40 bold f18" style="letter-spacing: 10px;">
+      <img style="width: 56%;margin-left:19.5%;" src="@/assets/images/login_logo.png"/>
+      <div class="f-primary text-center mt15 mb20 bold f18" style="letter-spacing: 10px;">
         WELCOME
       </div>
       <el-form v-if="!isLogin" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"
@@ -42,7 +42,7 @@
                  style="border-radius:50%;width:80px;"/>
           </div>
         </div>
-        <div style="padding-bottom:10px;">
+        <div>
           <div class="text-center mt20 mb10">
             {{ currentUser.userName }}
           </div>
@@ -50,7 +50,7 @@
             <span>{{ currentUser.nickName }} {{ schoolName }}</span>
           </p>
         </div>
-        <div class="list-group-item" style="margin-top:10px;border:none">
+        <div class="list-group-item" style="border: none">
                                         <span style="display:inline-block;width:33%;text-align:center;cursor:pointer">
                                             <img style="width: 16px;position: relative;top: 2px;margin-right: 5px;"
                                                  src="@/assets/images/icon_jifen.png" alt/>
@@ -74,7 +74,7 @@
 
 <script>
 /* TODO: 22.8.23 hht 这里为节省时间，全部由依赖注入主导，没有做逻辑分割 */
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import loginCheckMixin from '@/views/index/blocks/index-login-interceptor-mixin'
 
 export default {
@@ -127,7 +127,7 @@ export default {
     ...mapGetters(['currentUser', 'schoolName', 'isLogin'])
   },
   methods: {
-    validate: function(cb) {
+    validate: function (cb) {
       return this.$refs.loginForm.validate(cb)
     },
     async handleGoUserCenter() {
@@ -145,9 +145,9 @@ export default {
 }
 
 .login-form-block {
-  width:350px;
-  height: 400px;
-  padding:15px 40px;
+  width: 350px;
+  height: 360px;
+  padding: 15px 40px;
   margin-right: calc(50vw - 600px);
 }
 </style>

src/views/index/login.vue

@@ -8,12 +8,13 @@
       <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-test-news class="mt20 index-block" />
         <index-card-college class="mt20 index-block" />
-        <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"/>
+        <index-card-simulate-f4 class="mt20 index-block" />
+        <index-card-subject-query v-if="false" class="mt20 index-block"/>
+        <index-card-elective-test v-if="false" class="mt20 index-block"/>
+        <index-preference-simulate v-if="false" class="mt20 index-block"/>
+        <index-preference v-if="false" class="mt20 index-block"/>
         <index-news-top-wrapper class="mt20 index-block"/>
       </div>
       <bottom-p class="mt20"></bottom-p>
@@ -44,14 +45,16 @@ 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";
+import IndexCardTestNews from "@/views/index/components/index-card-test-news.vue";
 import IndexCardCollege from "@/views/index/components/index-card-college.vue";
+import IndexCardSimulateF4 from "@/views/index/components/index-card-simulate-f4.vue";
 
 export default {
   mixins: [loginCheckMixin],
   components: {
+    IndexCardSimulateF4,
     IndexCardCollege,
-    IndexCardTest,
+    IndexCardTestNews,
     IndexNewsTopWrapper,
     IndexCardCareer,
     IndexPreference,