新增名校排名页面

components/pageButton/pageButton.vue

@@ -1,7 +1,8 @@
 <template>
 	<view class="i-z-index3" v-show="isShow">
 		<!-- 头部 -->
-		<view class="i-pst-f i-l-p11 i-t-p5 i-z-index3 animate__animated" :class="pageStatus===1?'animate__fadeInLeft':pageStatus===3?'animate__fadeOutLeft':''">
+		<view class="i-pst-f i-l-p11 i-t-p5 i-z-index3 animate__animated"
+			:class="pageStatus===1?'animate__fadeInLeft':pageStatus===3?'animate__fadeOutLeft':''">
 			<view class=" i-flex i-al-center" @click="gotoLast()">
 				<view class="i-radius-p50 i-bd-1 i-flex i-al-center i-jst-center">
 					<uni-icons type="back" size="1.6rem" color="#FFF"></uni-icons>
@@ -11,20 +12,23 @@
 		</view>
 		<!-- 底部按钮 -->
 		<view class="i-pst-f i-r-p10 i-b-p15 i-flex i-z-index3">
-			<view class=" animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
+			<view class=" animate__animated"
+				:class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
 				<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
 					@click="gotoLast()">
-					<view class="i-radius-p50 i-bd-3 i-flex i-al-center i-jst-center">
-						<uni-icons type="back" size="1.7rem" color="#000"></uni-icons>
+					<view class="i-radius-p50 i-bd-3 i-flex i-al-center i-jst-center" tabindex="-1">
+						<uni-icons type="back" size="1.7rem" color="#000" tabindex="-1"></uni-icons>
+						<!-- <span class="i-fs-20"><</span> -->
 					</view>
 					<span class="i-c-000 i-ml-10 i-fs-26">返回上一级</span>
 				</view>
 			</view>
-			<view class="i-ml-10 animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
+			<view class="i-ml-10 animate__animated"
+				:class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
 				<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
 					@click="gotoBack()">
 					<!-- <view class="i-radius-p50 i-bd-3 i-p-2"> -->
-						<uni-icons type="home" size="1.9rem" color="#000"></uni-icons>
+					<uni-icons type="home" size="1.9rem" color="#000"></uni-icons>
 					<!-- </view> -->
 					<span class="i-c-000 i-ml-10 i-fs-26">回到首页</span>
 				</view>
@@ -78,5 +82,8 @@
 </script>
 
 <style>
-
+	uni-icons: {
+		pointer-events: none;
+		outline: none;
+	}
 </style>

components/schoolRank/schoolRank.vue

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

custom/custom.scss

@@ -21,6 +21,8 @@
 .i-w-p100{width: 100%;}
 .i-w-v100{width: 100vw;}
 
+.i-h-60{height: 3.75rem;}
+.i-h-80{height: 5.00rem;}
 .i-h-100{height: 6.25rem;}
 .i-h-110{height: 6.88rem;}
 .i-h-200{height: 12.50rem;}
@@ -54,6 +56,7 @@
 
 /** 外边距 */
 .i-m-0auto{margin: 0 auto;}
+.i-m-10{margin: 0.625rem;}
 
 .i-mt-10{margin-top: 0.625rem;}
 .i-mt-16{margin-top: 1rem;}
@@ -69,10 +72,13 @@
 .i-mr-10{margin-right: 0.625rem;}
 .i-mr-18{margin-right: 1.125rem;}
 .i-mr-20{margin-right: 1.25rem;}
+.i-mr-30{margin-right: 1.875rem;}
+.i-mr-60{margin-right: 3.75rem;}
 /** 外边距 */
 
 /** 内边距 */
 .i-p-2{padding: 0.13rem;}
+.i-ptb-5{padding-top: 0.31rem;padding-bottom: 0.31rem;}
 .i-ptb-10{padding-top: 0.625rem;padding-bottom: 0.625rem;}
 .i-ptb-14{padding-top: 0.875rem;padding-bottom: 0.875rem;}
 .i-ptb-16{padding-top: 1rem; padding-bottom: 1rem;}
@@ -83,6 +89,8 @@
 .i-plr-10{padding-left: 0.625rem; padding-right: 0.625rem;}
 .i-plr-14{padding-left: 0.875rem; padding-right: 0.875rem;}
 .i-plr-20{padding-left: 1.25rem; padding-right: 1.25rem;}
+.i-plr-25{padding-left: 1.56rem; padding-right: 1.56rem;}
+.i-plr-30{padding-left: 1.88rem; padding-right: 1.88rem;}
 .i-plr-60{padding-left: 3.75rem; padding-right: 3.75rem;}
 .i-plr-80{padding-left: 5rem; padding-right: 5rem;}
 .i-plr-160{padding-left: 10rem; padding-right: 10rem;}
@@ -91,8 +99,10 @@
 /** 背景颜色 */
 .i-b-c-fff{background-color: #fff;}
 .i-b-c-000{background-color: #000;}
+.i-b-c-F7F7F7{background-color: #F7F7F7;}
 .i-b-c-D7E6FB{background-color: #D7E6FB;}
 .i-b-c-037B7D{background-color: #037B7D;}
+.i-b-c-B42346{background-color: #B42346;}
 /** 背景颜色 */
 
 /** 渐变背景色 */

custom/data.js

@@ -10,6 +10,7 @@ export default {
 			http.Post(config.homeData, data, isLoading).then((res) => {
 				// 数据
 				let list = res['data']['data']
+				// console.log(list)
 				_this['list'] = list
 				// 系统设置中的标题
 				let titles = res['data']['config']

index.html

@@ -9,6 +9,8 @@
         '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
         (coverSupport ? ', viewport-fit=cover' : '') + '" />')
     </script>
+	<link rel="shortcut icon" type="image/x-icon" href="/static/logo.ico">
+	<link rel="icon" type="image/x-icon" href="/static/logo.ico">
     <title></title>
     <!--preload-links-->
     <!--app-context-->

manifest.json

@@ -1,8 +1,8 @@
 {
-    "name" : "JDF_ElectronicPublicity",
+    "name" : "金东方电子宣传册",
     "appid" : "__UNI__8E1FB9F",
     "description" : "金东方电子宣传",
-    "versionName" : "1.0.0",
+    "versionName" : "1.1.0",
     "versionCode" : "100",
     "transformPx" : false,
     /* 5+App特有相关 */

pages/index/index.vue

@@ -17,6 +17,9 @@
 		<!-- 列表 -->
 		<listModel :list="detail_list" :isShow="showModel === 'model_list'" :pageStatus="pageStatus"
 			:styleType="style_type" @toDetailEvent="toDetailEvent"></listModel>
+		<!-- 名校列表 -->
+		<schoolRank :list="rank_list" :schoolList="schoolList" :isShow="showModel === 'model_rank'" :pageStatus="pageStatus"
+			@toDetailEvent="toDetailEvent"></schoolRank>
 	</view>
 </template>
 
@@ -37,9 +40,11 @@
 				pageStatus: 1, //页面状态 1=进入，2=常态，3=退出
 				homeAnimation: {},
 				list: [], // 导航信息
+				rank_list:[], // 名校排名列表
+				schoolList:[],
 				detail_list: [], // 列表信息
 				detail_info: {
-					img: '/static/image/homeBg.jpg', // 详情信息
+					img: '', // 详情信息
 				},
 				style_type: 1,
 				timeStr:''
@@ -66,6 +71,16 @@
 					// 进入内页
 					this.buttonData.lastpage.push(newVal)
 				}
+			},
+			list(newVal){
+				if(uni.getStorageSync('school')){
+					this.schoolList = uni.getStorageSync('school')
+				}else{
+					newVal[5].list.forEach((item, index) => {
+						this.schoolList.push(item.list)
+					});
+					uni.getStorageSync('school',this.schoolList)
+				}
 			}
 		},
 		methods: {
@@ -112,14 +127,12 @@
 					// 当前显示组件
 					this.detail_list = e.list
 					this.style_type = e.style_type
-					if (e.list[0].have_detail === 1) {
+					this.rank_list = e.list
+					if (e.model_type === 'model_detail') {
 						this.detail_info.img = e.list[0].inner_img
-						// this.showModel = e.model_type
-						this.Animation_Controls(e.model_type) // 执行动画
-					} else {
-						// this.showModel = 'model_list'
-						this.Animation_Controls('model_list') // 执行动画
 					}
+					this.Animation_Controls(e.model_type) // 执行动画
+					
 				}
 			},
 			// 按钮组件回到首页传递
@@ -144,6 +157,7 @@
 			},
 			// 内页传递（到3级页面）
 			toDetailEvent(item) {
+				// console.log(item)
 				// this.pageStatus = 5
 				this.buttonData.lastpageIndex += 1
 				setTimeout(()=>{
@@ -151,6 +165,7 @@
 				},400)
 				this.Animation_Controls('model_detail')
 				this.detail_info.img = item.inner_img
+				console.log(item.inner_img)
 			}
 		},
 	}