index block - ranking of college

src/assets/styles/common.scss

@@ -552,6 +552,20 @@
   align-items: baseline;
 }
 
+.self-start,
+.self-sta {
+  align-self: flex-start;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-center,
+.self-cen {
+  align-self: center;
+}
+
 .fx-1 {
   flex: 1;
 }
@@ -652,6 +666,16 @@
   height: 44px;
 }
 
+.icon52 {
+  width: 52px;
+  height: 52px;
+}
+
+.icon60 {
+  width: 60px;
+  height: 60px;
+}
+
 .icon80 {
   width: 80px;
   height: 80px;

src/common/MxConst.js

@@ -1,5 +1,5 @@
 export default {
-  currentYear: 2022,
+  currentYear: 2023,
   mobilePattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
   keys: {
     sysToken: 'Admin-Token',

src/views/elective/main.vue

@@ -8,7 +8,7 @@
       <index-card-elective-test class="mt20 index-block"/>
       <index-card-career class="mt20 index-block"/>
       <!--  三库 -->
-      <index-card-colleage class="mt20 index-block"></index-card-colleage>
+      <index-card-college class="mt20 index-block"></index-card-college>
       <!--  资讯 -->
       <index-card-news-single class="mt20 index-block" type="高考政策" morePath="/fuzhu/newGaokaoNews"  />
       <!--  大数据选科, 老师没有选科权限   -->
@@ -23,7 +23,7 @@ import IndexCardElectiveTest from '@/views/index/components/index-card-elective-
 import IndexCardSubjectQuery from '@/views/index/components/index-card-subject-query'
 import IndexCardNewsSingle from '@/views/index/components/index-card-news-single'
 import IndexCard from '@/views/index/components/index-card'
-import IndexCardColleage from '@/views/index/components/index-card-colleage'
+import IndexCardCollege from '@/views/index/components/index-card-college.vue'
 import IndexCardElective from '@/views/index/components/index-card-elective'
 
 export default {
@@ -34,7 +34,7 @@ export default {
     IndexCardCareer,
     IndexCard,
     IndexCardElective,
-    IndexCardColleage
+    IndexCardCollege
   },
   data() {
     return {

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

@@ -1,83 +0,0 @@
-<template>
-  <index-card 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>
-      </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'
-import transferMixin from '@/components/mx-transfer-mixin'
-import loginCheckMixin from '@/views/index/blocks/index-login-interceptor-mixin'
-import { selectUniversityList } from '@/api/webApi/career-course'
-
-export default {
-  mixins: [transferMixin, loginCheckMixin],
-  name: 'index-card-career',
-  components: { IndexImageItem, IndexCardContent, IndexCard },
-  data() {
-    return {
-      morePath: '/new-gaokao/three/UniversitiesColleges',
-      list: [],
-      lineSize: 6,
-      queryParams: {
-        location:'',
-        natureTypeCN:'',
-        type:'',
-        level:'',
-        features:'',
-        name:'',
-        pageNum: 1,
-        pageSize: 12,
-      }
-    }
-  },
-  mounted() {
-    this.getList()
-  },
-  methods: {
-    getList() {
-      selectUniversityList({
-        ...this.queryParams
-      }).then(res=>{
-        this.list =res.rows.map((item, idx)  => {
-          const path = '/career/plan/UniversityDetail'
-          const nextParams = {
-            code: item.code,
-          }
-          return {
-            title: item.name,
-            src: item.logo,
-            imgStyle:{
-              width:'130px',
-              height:'130px',
-            },
-            wrapStyle:{
-              display:'flex',
-              alignItems:'center',
-              flexDirection: 'column'
-            },
-            path: path,
-            nextData: nextParams,
-            class: idx >= this.lineSize ? ['mt15'] : [],
-            titleClasses: ['width100','text-center','mt5','f-666', 'pf', 'f14', 'text-ellipsis']
-          }
-        })
-      })
-    },
-    async handleMore() {
-      await this.loginCheck()
-      this.transferTo(this.morePath)
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

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

@@ -0,0 +1,118 @@
+<template>
+  <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>
+          <index-card-content :list="listA" :gutter="0" :line-size="1">
+            <template #default="{item, index}">
+              <index-college-item :rank="index+1" :university="item" />
+            </template>
+          </index-card-content>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="width100 college-rank-b rd4 pd20">
+          <div class="f-red f16 bold">软科排行榜</div>
+          <index-card-content :list="listB" :gutter="0" :line-size="1">
+            <template #default="{item, index}">
+              <index-college-item :rank="index+1" :university="item" />
+            </template>
+          </index-card-content>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="width100 college-rank-c rd4 pd20">
+          <div class="f-red f16 bold">QS排行榜</div>
+          <index-card-content :list="listC" :gutter="0" :line-size="1">
+            <template #default="{item, index}">
+              <index-college-item :rank="index+1" :university="item" />
+            </template>
+          </index-card-content>
+        </div>
+      </el-col>
+    </el-row>
+  </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'
+import transferMixin from '@/components/mx-transfer-mixin'
+import loginCheckMixin from '@/views/index/blocks/index-login-interceptor-mixin'
+import {universitiesRanking} from '@/api/webApi/career-course'
+import MxConst from "@/common/MxConst";
+import IndexCollegeItem from "@/views/index/components/index-college-item.vue";
+
+export default {
+  mixins: [transferMixin, loginCheckMixin],
+  name: 'index-card-college',
+  components: {IndexCollegeItem, IndexImageItem, IndexCardContent, IndexCard},
+  data() {
+    return {
+      morePath: '/new-gaokao/three/UniversitiesColleges',
+      listA: [],
+      listB: [],
+      listC: [],
+      lineSize: 1,
+      queryParams: {
+        year: MxConst.currentYear,
+        pageNum: 1,
+        pageSize: 5,
+      }
+    }
+  },
+  mounted() {
+    this.getList({type: '校友会'}, 'listA')
+    this.getList({type: '软科'}, 'listB')
+    this.getList({type: 'QS'}, 'listC')
+  },
+  methods: {
+    getList(param, target) {
+      universitiesRanking({
+        ...this.queryParams,
+        ...param
+      }).then(res => {
+        this[target] = res.rows.map((item, idx) => {
+          const path = '/career/plan/UniversityDetail'
+          const u = item["universities"] || {}
+          const nextParams = {
+            code: u.code,
+          }
+          return {
+            title: u.name,
+            src: u.logo,
+            hits: u.hits,
+            desc: u.location + ' ' + u.type,
+            path: path,
+            nextData: nextParams,
+            rowClass: 'mt12'
+          }
+        })
+      })
+    },
+    async handleMore() {
+      await this.loginCheck()
+      this.transferTo(this.morePath)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.college-rank-a {
+  background: url('~@/assets/images/index/login/college-rank-a.png') no-repeat;
+  background-size: contain;
+}
+
+.college-rank-b {
+  background: url('~@/assets/images/index/login/college-rank-b.png') no-repeat;
+  background-size: contain;
+}
+
+.college-rank-c {
+  background: url('~@/assets/images/index/login/college-rank-c.png') no-repeat;
+  background-size: contain;
+}
+</style>

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

@@ -2,21 +2,21 @@
   <el-row>
     <el-col :span="16">
       <index-card simple title="我的测评">
-        <el-row :gutter="12">
-          <el-col :span="12" class="pointer" @click.native="goCareerTest">
+        <el-row :gutter="20">
+          <el-col :span="12" class="pointer rd4" @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-col :span="12" class="pointer rd4" @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-col :span="24" class="mt20 pointer rd4" @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" />
+      <index-card-top v-bind="topOverride" style="height: 418px" />
     </el-col>
   </el-row>
 </template>

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="fx-row ai-cen f16 f-333" :class="university.rowClass" @click="goUniversity">
+    <span style="width: 30px">{{rank}}</span>
+    <el-image :src="university.src" class="icon52" />
+    <div class="fx-column bold ml12">
+      <span>{{university.title}}</span>
+      <span class="mt3 f-999">{{university.desc}}</span>
+    </div>
+    <div class="fx-1 fx-row jc-end ai-cen f14 pr20">
+      <span class="mr10">热度</span>
+      <span>{{ (university.hits/10000).toFixed(1) }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index-college-item",
+  props: {
+    rank: {
+      type: Number,
+      default: 0
+    },
+    university: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    goUniversity() {
+      this.transferTo(this.university.path, this.university.nextData)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index/login.vue

@@ -9,6 +9,7 @@
       <div class="fx-column fx-cen-cen">
         <index-card-career class="mt20 index-block"/>
         <index-card-test 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"/>
@@ -44,10 +45,12 @@ 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 IndexCardCollege from "@/views/index/components/index-card-college.vue";
 
 export default {
   mixins: [loginCheckMixin],
   components: {
+    IndexCardCollege,
     IndexCardTest,
     IndexNewsTopWrapper,
     IndexCardCareer,