|
|
@@ -0,0 +1,133 @@
|
|
|
+<template>
|
|
|
+ <view v-show="isShow" class="i-h-p100 i-flex i-al-center i-jst-center i-z-index3">
|
|
|
+ <view class="i-h-p100 i-w-p100">
|
|
|
+ <view class="i-flex i-al-center i-jst-center">
|
|
|
+ <view class="i-w-p80 animate__animated"
|
|
|
+ :class="pageStatus===1?'animate__fadeInUp':pageStatus===3?'animate__fadeOutDown':''">
|
|
|
+ <view class="i-h-110"></view>
|
|
|
+ <view class="i-b-c-fff">
|
|
|
+ <uni-row>
|
|
|
+ <uni-col v-for="(item,index) in list" :key="index" :span="4">
|
|
|
+ <view>
|
|
|
+ <view class="i-h-60 i-flex i-al-center i-jst-center i-ml-10 i-mr-10 i-mt-10"
|
|
|
+ :class="nowRegionIndex == index?'i-b-c-B42346 i-c-fff':'i-b-c-F7F7F7'"
|
|
|
+ @click="RegionClick(item,index)">
|
|
|
+ <span class="">{{item.region_title}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ <view>
|
|
|
+ <view class="i-w-p100 i-b-c-F7F7F7 i-mt-10 i-fs-20">
|
|
|
+ <view class="i-ptb-16">
|
|
|
+ <uni-row>
|
|
|
+ <uni-col :span="5" class="i-flex i-jst-center i-al-center">学校排名</uni-col>
|
|
|
+ <uni-col :span="5">学校中文名称</uni-col>
|
|
|
+ <uni-col :span="8">学校英文名称</uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="i-h-600 i-w-p100" scroll-y="true" :show-scrollbar="false"
|
|
|
+ :scroll-top="scrollTop">
|
|
|
+ <view v-for="(item,index) in schoolList" :key="index">
|
|
|
+ <view v-show="index==nowRegionIndex">
|
|
|
+ <view v-for="(ite,ind) in item" :key="ind">
|
|
|
+ <view class="i-ptb-16" :class="(ind%2)!=1?'i-b-c-fff':'i-b-c-F7F7F7'">
|
|
|
+ <uni-row>
|
|
|
+ <uni-col :span="5"
|
|
|
+ class="i-flex i-jst-center i-al-center i-ptb-16">{{ite.rank_num}}</uni-col>
|
|
|
+ <uni-col :span="5"
|
|
|
+ class=" i-ptb-16">{{ite.school_name}}</uni-col>
|
|
|
+ <uni-col :span="8"
|
|
|
+ class=" i-ptb-16">{{ite.school_name_en}}</uni-col>
|
|
|
+ <uni-col :span="4" :offset="2" class=" i-w-p100 i-t-end">
|
|
|
+ <view class="i-mr-30 i-flex i-c-fff">
|
|
|
+ <view
|
|
|
+ class="i-radius-30 i-b-c-B42346 i-ptb-16 i-plr-20 i-flex"
|
|
|
+ @click="toDetail(ite)">
|
|
|
+ <span>学校简介 >>></span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="i-h-110"></view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: "schoolRank",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scrollTop: 0,
|
|
|
+ // schoolList: [], // 学校列表
|
|
|
+ nowRegionIndex: 0 // 当前地区
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ isShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ([])
|
|
|
+ },
|
|
|
+ schoolList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ([])
|
|
|
+ },
|
|
|
+ // 页面状态 动画效果 1进入 2正常 3退出
|
|
|
+ pageStatus: {
|
|
|
+ type: Number,
|
|
|
+ default: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ list(newVal) {
|
|
|
+ // console.log(newVal)
|
|
|
+ // newVal.forEach((item, index) => {
|
|
|
+ // this.schoolList.push(item.list)
|
|
|
+ // });
|
|
|
+ // console.log(this.schoolList)
|
|
|
+ },
|
|
|
+ isShow(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ // 强制重置滚动位置
|
|
|
+ this.scrollTop = 0; // 先设置为 0
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.scrollTop = 1; // 强制触发滚动
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.scrollTop = 0; // 再次设置为 0
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ RegionClick(item, key) {
|
|
|
+ // this.schoolList = item
|
|
|
+ this.nowRegionIndex = key
|
|
|
+ },
|
|
|
+ toDetail(item) {
|
|
|
+ item.title = item.school_name
|
|
|
+ this.$emit('toDetailEvent', item)
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
+</style>
|
