123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- <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>
|