gaobaoUniApp/pages/index/index.vue

<template>
	<view class="content" style="overflow: hidden;">
		<view style="width:750upx; height:118upx; background:rgba(255,255,255,1);display: flex;justify-content: center;">
			<search-input-box style="margin-top: 24upx;"></search-input-box>
		</view>
		
		<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" circular="true" style="background: #ffffff;">
			<swiper-item>
				<image src="../../static/76_avatar_middle.jpg" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/76_avatar_middle.jpg" mode="widthFix"></image>
			</swiper-item>
		</swiper>

		<view class="view-content">
			<view @tap="jumpschool" id="school" hover-class="none">
				<image src="../../static/home_ic_college@2x.png" mode="widthFix"></image>
				<p>院校库</p>
			</view>
			<view @tap="jumpmajor" id="major" hover-class="none">
				<image src="../../static/home_ic_major@2x.png" mode="widthFix"></image>
				<p>专业库</p>
			</view>
			<view @tap="jumpinterest" id="school" hover-class="none">
				<image src="../../static/home_ic_test@2x.png" mode="widthFix"></image>
				<p>兴趣测评</p>
			</view>
		</view>

		<view class="school">
			<image src="../../static/home_word_university@2x.png" mode="widthFix" style="margin-top: 30upx;"></image>
			<view class="titleRed">
				<image src="../../static/btn_bg_big.png" mode=""></image>
			</view>
			<view class="school-content">
				<view class="schol-icon" @tap="detail">
					<image src="../../static/清华@2x.png" mode="widthFix"></image>
					<span>清华大学</span>
				</view>
				<view class="schol-icon">
					<image src="../../static/清华@2x.png" mode="widthFix"></image>
					<span>清华大学</span>
				</view>
			</view>
			<view class="school-content">
				<view class="schol-icon">
					<image src="../../static/清华@2x.png" mode="widthFix"></image>
					<span>清华大学</span>
				</view>
				<view class="schol-icon">
					<image src="../../static/清华@2x.png" mode="widthFix"></image>
					<span>清华大学</span>
				</view>
			</view>
			<view class="school-content">
				<view class="schol-icon">
					<image src="../../static/清华@2x.png" mode="widthFix"></image>
					<span>清华大学</span>
				</view>
				<view class="schol-icon">
					<image src="../../static/清华@2x.png" mode="widthFix"></image>
					<span>清华大学</span>
				</view>
			</view>
		</view>

		<view class="major">
			<image src="../../static/home_word_profession@2x.png" mode="widthFix" style="margin-top: 30upx;"></image>
			<view class="titleRed">
				<image src="../../static/btn_bg_big.png" mode=""></image>
			</view>
			<view class="major-content">
				<view class="tui-container">
					<view class="tui-extend-box">
						<scroll-view scroll-y>
							<view style="display: flex;">
								<image src="../../static/btn_bg_big.png" mode=""></image>
								<view class="box-distance">经济学</view>
							</view>
							<view style="display: flex;">
								<image src="../../static/btn_bg_big.png" mode=""></image>
								<view class="box-distance">公共关系学</view>
							</view>
							<view style="display: flex;">
								<image src="../../static/btn_bg_big.png" mode=""></image>
								<view class="box-distance">国际事务管理</view>
							</view>
						</scroll-view>
					</view>
					<view class="tui-extend-box">
						<scroll-view scroll-y>
							<view style="display: flex;">
								<image src="../../static/btn_bg_big.png" mode=""></image>
								<view class="box-distance">软件工程</view>
							</view>
							<view style="display: flex;">
								<image src="../../static/btn_bg_big.png" mode=""></image>
								<view class="box-distance">广告学</view>
							</view>
							<view style="display: flex;">
								<image src="../../static/btn_bg_big.png" mode=""></image>
								<view class="box-distance">智能科学与技术</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>

	<!-- 	<div class="footer">
			<div>
				<image src="../../static/icon/home_icon_default_sel@2x.png" mode="widthFix"></image>
				<p>首页</p>
			</div>
			<div>
				<image src="../../static/icon/home_icon_volunteer_nor@2x.png" mode="widthFix"></image>
				<p>志愿预测</p>
			</div>
			<div>
				<image src="../../static/icon/home_icon_my_nor@2x.png" mode="widthFix"></image>
				<p>我的</p>
			</div>
		</div>
 -->
		<uni-popup :show="welcome" :type="type" :custom="true" :mask-click="false" @change="change">
			<view class="uni-tip-wel">
				<image src="../../static/home_ic_college@2x.png" mode="widthFix" style="width: 300upx;height: 300upx;margin: 40upx auto 0;"></image>
				<view class="uni-tip-wel-content"> 欢迎来到山东志愿帮~</view>
				<view class="uni-tip--wel-button">
					<view class="uni-tip-wel-button-text" @tap="opennext()">微信授权</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
			<view class="uni-tip">
				<view class="uni-tip-title">微信授权</view>
				<view class="uni-tip-image">
					<image src="../../static/芝麻高报-logo.png" mode=""></image>
				</view>
				<view class="uni-tip-content">芝麻高报系统申请获取以下权限：</view>
				<hr style="width:452upx;height:2upx;background:rgba(229,229,229,1);margin: 24upx auto;">
				<view class="uni-tip-content-son">
					<ul>
						<li> • 获得你的信息（昵称、头像、地区 等）</li>
					</ul>
				</view>
				<view class="uni-tip-group-button">
					<view class="uni-tip-button" @tap="cancel('tip')">拒绝</view>
					<view class="jiangexian">
					</view>
					<view class="uni-tip-button" @tap="cancel('tip'),changeGrade()">允许</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup :show="grade" ref="get-grade" :type="type" :custom="true" :mask-click="false" @change="change">
			<view class="get-grade">
				<view class="get-grade-title">输入分数，获取适合你的学校、专业和志愿预测</view>
				<view class="get-grade-content1">
					<view class="i-picker-two">
						<picker @change="change" :index="value" :range="wenliArr">
							<view>{{ wenliArr[index] }}</view>
						</picker>
						<image src="../../static/pop_arrow_nor(4).png" mode="widthFix"></image>
					</view>
					
					<picker class='i-picker-two' mode="" @tap="Choosecity()">
						<view>{{regionTxt}}</view>
						<image src="../../static/pop_arrow_nor(4).png" mode="widthFix"></image>
					</picker>
				</view>
				<view class="get-grade-content2">
					<input type="number"  :value="pwdd" placeholder="输入预估分数"   @click='switchKeyboard(3)' />
					<input type="number"  :value="pwddd" placeholder="输入位次（选填" @click='switchKeyboard(6)' />
					
					<tui-keyboard :show="show" @close="closeKeyboard" @click="keyboardClick">
						<view class="tui-digital-box">
						</view>
					</tui-keyboard>
				</view>
				<view class="uni-get-grade-button" @tap="changeGrade()">
					<view class="get-grade-button">立即获取</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup :show="wenli" :type="type" :custom="true" :mask-click="false">
			<view class="getwenli">
				<view class="wenlitext">
					<scroll-view scroll-y @tap="fenwenli(),Choosewenli()" v-for="(item,index) in wenliArr" :data-index="index" :key="index">
						<view>{{item}}</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

		<uni-popup :show="citychoose" ref="city" :type="type" :custom="true" :mask-click="false" @change="change">
			<view class="region-box">
				<view class="region-txt" :class="[index == regionArr.length - 3 || index 
						== regionArr.length - 2 || index 
						== regionArr.length - 1 ? 'grow' : '', 
						tabIndex == index ? 'active' : '']"
				 v-for="(item, index) in regionArr" :data-index="index" @tap.stop="getRegion" :key="index">
					<text @tap="Choosecity()"> {{ item }}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import searchInputBox from '@/components/search-input-box/search-input-box.vue';
	import tuiKeyboard from "@/components/keyboard/keyboard";
	import tuiKeyboardInput from "@/components/keyboard-input/keyboard-input";

	export default {
		components: {
			uniPopup,
			uniIcon,
			searchInputBox,
			tuiKeyboard,
			tuiKeyboardInput
		},
		watch: {
				value: {
					handler(newVal) {
						this.index = this.valueArr.findIndex(val => val === newVal)
					}
				}
			},
		data() {
			return {
				index: 0,
				labelArray: [],
				valueArr: [],
				pwdd:"",
				pwddd:"",
				welcome:false,
				show: false,
				grade: false,
				citychoose: false,
				wenli: false,
				wenliContent: '文科',
				type: '',
				content: '顶部弹 popup',
				showModalStatus: false,
				animationData: '',
				pwdArr: ["", "", "", "", "", ""],
				regionArr: [
					'北京',
					'河北',
					'山东',
					'山西',
					'陕西',
					'内蒙古',
					'辽宁',
					'吉林',
					'黑龙江',
					'上海',
					'江苏',
					'安徽',
					'江西',
					'湖北',
					'重庆',
					'四川'
				],
				regionTxt: '内蒙古',
				tabIndex: 6,
				leftDrawer: false,
				rightDrawer: false,
				mode: 'right',
				wenliArr: ['文科','理科']
			};
		},
		onLoad() {
			console.log('onload');
			this.welcome = true;
		},
		mounted() {
			console.log('mounted');
			this.options.forEach(v => {
						this.labelArray.push(v['label'])
						this.valueArr.push(v['value'])
					})
			this.index = this.valueArr.findIndex(val => val === this.value)
		},
		methods: {
			switchKeyboard(index) {
				let length = index; //e.currentTarget.dataset.length;
				let arr = ["", "", "", "", "", ""]
				if (length == 3) {
					arr = ["", "", ""]
				}
				this.pwdArr = arr;
				this.temp = arr;
				this.numberArr = [];
				this.show = true
			},
			closeKeyboard: function() {
				this.show = false;
				this.numberArr = [];
				this.pwdArr = this.temp;
			},
			getPwd: function() {
				//判断并取出密码
				if (this.numberArr.length === this.pwdArr.length) {
					// uni.showLoading({
					// 	title: '模拟提交...',
					// 	mask: true
					// })
					setTimeout(() => {
						let pwd = this.numberArr.join('')
						this.closeKeyboard();
						this.tui.toast("您输入的密码为：" + pwd);
					}, 800);
				}
			},
			keyboardClick: function(e) {
				let numberArr = this.numberArr;
				console.log(numberArr);
				let pwdArr = this.pwdArr;
				let index = e.index;
				if (numberArr.length === pwdArr.length || index == undefined) {
					return;
				}
				if (index == 9) { //取消键
					this.closeKeyboard();
					return;
				} else if (index == 11) {
					//退格键
					let len = numberArr.length;
					if (len) {
						pwdArr.splice(len - 1, 1, "");
					} else {
						pwdArr = ["", "", "", ""];
					}
					numberArr.pop()
				} else if (index == 10) {
					numberArr.push(0);
					pwdArr.splice(numberArr.length - 1, 1, "●");
				} else {
					numberArr.push(index + 1);
					pwdArr.splice(numberArr.length - 1, 1, "●");
				}
				this.numberArr = numberArr;
				this.pwdArr = pwdArr;
				this.pwdd = this.numberArr.join('');
				this.pwddd = this.numberArr.join('');
				this.getPwd()
			},
			showModal: function() {
				// 显示遮罩层
				// 创建动画实例
				let animation = uni.createAnimation({
					duration: 200,
					timingFunction: 'linear',
					delay: 0
				});
				animation.translateY(uni.upx2px(712)).step();
				this.animationData = animation.export();
				this.showModalStatus = true;
				setTimeout(
					function() {
						animation.translateY(0).step();
						this.animationData = animation.export();
					}.bind(this),
					200
				);

				console.log('showModal');
			},
			hideModal: function() {
				this.showModalStatus = false;
			},
			getRegion: function(e) {
				const index = e.currentTarget.dataset.index;
				this.regionTxt = this.regionArr[index];
				this.tabIndex = index;
				this.showModalStatus = false;
				// this.tui.toast('您选择了：' + this.regionArr[index]);

			},
			fenwenli: function(event) {
				console.log(event);
				// const index = e.currentTarget.dataset.index;

				this.wenliContent = this.wenliArr[index];
				// console.log(this.wenliArr[index])
			},
			togglePopup(type, open) {
				this.type = type;
				if (open === 'tip') {
					this.show = true;
				} else {
					this.$refs[open].open();
				}
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false;
					return;
				}
				this.$refs[type].close();
			},
			change(e) {
				console.log(e);
				this.index=e.detail.value;
				// this.$emit('input', this.valueArr[e.target.value]);
				
			},
			changeGrade() {
				this.grade = !this.grade;
			},
			opennext(){
				this.show = !this.show;
				this.welcome = !this.welcome;
			},
			Choosecity() {
				this.citychoose = !this.citychoose;
			},
			Choosewenli() {
				console.log(1);
				this.wenli = !this.wenli;
			},
			jumpschool(ev) {
				console.log(ev);
				uni.navigateTo({
					url: '../myinfo2/myinfo2'
				});
			},
			detail: function(e) {
				// const page = e.currentTarget.id;
				console.log(e);
				uni.navigateTo({
					url: '../myinfo2/myinfo2',
					// url: `../${page}/${page}`
				})
			},
			jumpmajor(ev) {
				console.log(ev);
				uni.navigateTo({
					url: '../myinfo2/myinfo2'
				});
			},
			jumpinterest(ev) {
				console.log(ev);
				uni.navigateTo({
					url: '../myinfo2/myinfo2'
				});
			}
		}
	};
</script>

<style>
	.tui-container {
		width: 100%;
		padding-top: 60upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.titleRed image{
		width:86upx !important;
		height:8upx !important;
		background:rgba(239,58,58,1);
		opacity:0.9;
		margin: 0 auto;
	}
	.tui-extend-box {
		flex: 1;
		font-size: 32upx;
		font-family: PingFangSC;
		font-weight: 500;
		color: rgba(44, 44, 44, 1);
		line-height: 45upx;
	}
	.box-distance {
		padding-bottom: 60upx;
	}
	
	.tui-extend-box image {
		width: 6upx !important;
		height: 30upx !important;
		background: rgba(239, 58, 58, 1);
		display: inline-block !important;
		margin-right: 20upx !important;
		margin-left: 40upx !important;
		margin-top: 6upx !important;
	}

	/*底部抽屉样式 start*/
	.mask-screen {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		z-index: 9;
	}

	.region-box {
		width: 100%;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		background: #fff;
		padding-top: 20upx;
		height: 712upx;
		padding: 40upx 30upx 48upx 30upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}

	.region-txt {
		width: 96upx;
		height: 82upx;
		background: #e9edfc;
		line-height: 82upx;
		border-radius: 6upx;
		font-size: 30upx;
		color: #333;
		text-align: center;
		margin-right: 23upx;
		margin-bottom: 26upx;
		flex-grow: 1;
	}

	.region-txt:nth-of-type(6n) {
		margin-right: 0;
	}

	.grow {
		flex-grow: 0;
	}
	.active {
		background: #5677fc;
		color: #fff;
	}
	.uni-tip-wel{
		width: 560upx;
		height: 608upx;
		background:rgba(255,255,255,1);
		border-radius:8upx;
		margin-top: 235upx;
		margin-left: 95upx;
		display: flex;
		flex-direction: column;
	}
	
	.uni-tip-wel-content{
		font-size:34upx;
		font-family:PingFangSC-Medium,PingFangSC;
		font-weight:500;
		color:rgba(44,44,44,1);
		line-height:48upx;
		text-align: center;
		margin: 40upx auto 54upx auto;
	}
	.uni-tip--wel-button{
		width:480upx;
		height:80upx;
		background:rgba(26,173,23,1);
		box-shadow:0upx 6upx 12upx 0upx rgba(26,173,23,0.2);
		border-radius:40upx;
		margin: 0 auto;
	}
	.uni-tip-wel-button-text{
		font-size:30upx;
		font-family:PingFangSC-Medium,PingFangSC;
		font-weight:500;
		color:rgba(255,255,255,1);
		line-height:80upx;
		text-align: center;

	}
	/* 授权窗口 */
	.uni-tip {
		position: relative;
		left: 95upx;
		top: 410upx;
		padding: 0upx;
		box-sizing: border-box;
		width: 560upx;
		height: 515upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8upx;
	}

	.uni-tip-title {
		text-align: center;
		padding: 21upx 100upx;
		height: 48upx;
		font-size: 34upx;
		font-family: PingFangSC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		line-height: 48upx;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
	}

	.uni-tip-image {
		border: 0upx;
		text-align: center;
	}

	.uni-tip-image image {
		width: 64upx;
		height: 64upx;
		border: 0upx;
		margin-top: 36upx;
		margin-bottom: 24upx;
	}

	.uni-tip-content {
		margin-left: 54upx;
		width: 420upx;
		height: 40upx;
		font-size: 28upx;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 40upx;
	}

	.uni-tip-content-son {
		width: 452upx;
		height: 74upx;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(136, 136, 136, 1);
		line-height: 37upx;
		margin: 0 auto;
		margin-bottom: 36upx;
	}
/* .uni-tip-content-son ul{
		list-style: upper-alpha;
	} */
	.uni-tip-group-button {
		height: 99upx;
		display: flex;
		justify-content: space-around;
		border-top: 1upx solid rgba(229, 229, 229, 1);
		font-size: 32upx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #000000;
		line-height: 99upx;
	}

	.uni-tip-button {
		width: 100%;
		text-align: center;
	}
	.jiangexian{
		border-right: 1upx solid rgba(229,229,229,1);
	}

	.getwenli {
		position: fixed;
		bottom: 0;

		width: 100%;
		height: 100upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8upx;
		text-align: center;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
	}

	.get-grade {
		position: relative;
		left: 95upx;
		top: 359upx;
		width: 560upx;
		height: 616upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8upx;
		text-align: center;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
	}

	.get-grade-title {
		padding: 40upx;
		font-size: 34upx;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(44, 44, 44, 1);
		line-height: 48upx;
	}

	.get-grade-content2 input {
		width: 480upx;
		height: 80upx;
		background: rgba(248, 248, 248, 1);
		border-radius: 40upx;
		border: 1upx solid rgba(242, 242, 242, 1);
		margin: 20upx 40upx;
	}
	.get-grade-content1 {
		display: flex;
		flex-direction: row;
		margin: auto 40upx;
	}
	.get-grade-content1 view:nth-child(1){
		margin-right: 20upx;
	}
	.i-picker-two{
		width:230upx;
		height:80upx;
		background:rgba(248,248,248,1);
		border-radius:40upx;
		border:1upx solid rgba(242,242,242,1);
		line-height: 80upx;
	}
	.i-picker-two view{
		float: left;
		margin-left: 40upx;
		font-size:28upx;
		font-family:PingFangSC-Regular,PingFangSC;
		font-weight:400;
		color:rgba(47,49,51,1);
		line-height:80upx;

	}
	.i-picker-two image{
		float: right;
		line-height: 80upx;
		width:40upx;
		height:40upx !important;
		margin-right: 20upx;
		margin-top: 20upx;
		display: block;
	}

	.uni-get-grade-button {
		width: 480upx;
		height: 80upx;
		background: rgba(239, 58, 58, 1);
		box-shadow: 0upx 6upx 12upx 0upx rgba(239, 58, 58, 0.2);
		border-radius: 40upx;
		text-align: center;
		margin: 22upx 40upx;
	}

	select {
		width: auto;
		padding: 0 0 0 55upx;
		margin: 0;
	}

	.get-grade-button {
		width: 120upx;
		height: 42upx;
		font-size: 30upx;
		font-family: PingFangSC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 80upx;
		margin: 0 auto;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color:  #F2F2F2 ;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}

	swiper {
		width: 750upx;
		height: 308upx;

		padding: 0;
		margin: 0;
	}

	swiper-item {
		border-radius: 20upx;
	}

	swiper-item image {
		position: relative;
		left: 30upx;
		width: 690upx;
		height: 500upx;
		margin: 8upx 0upx 8upx 0upx;
		border-radius: 20upx;
	}

	.banner {
		width: 690upx;
		height: 308upx;
		border-radius: 20upx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.view-content {
		display: flex;
		flex-direction: row no-wrap;
		justify-content: space-around;
		padding-right: 61upx;
		padding-left: 61upx;
		height: 210upx;
		width: 750upx;
		background: rgba(255, 255, 255, 1);
	}

	.view-content image {
		width: 128upx;
		height: 128upx;
		overflow: visible;
		vertical-align: middle;
		margin-top: 8upx;
	}

	.view-content p {
		text-align: center;
		width: 96upx;
		height: 33upx;
		font-size: 24upx;
		font-family: PingFangSC;
		font-weight: 500;
		color: rgba(117, 119, 128, 1);
		line-height: 33upx;
	}

	.view-content view {
		display: flex;
		flex-direction: column;
		width: 80upx;
		height: 28upx;
	}

	.view-content view:first-child {
		margin-left: 61upx;
		margin-right: 0upx;
	}

	.view-content view:nth-child(2) {
		margin-left: 122upx;
		margin-right: 122upx;
	}

	.view-content view:nth-child(3) {
		margin-right: 61upx;
	}

	.view-content p {
		align-self: center;
	}

	.view-content image {
		align-self: center;
	}

	.school {
		align-items: flex-start;
		width: 750upx;
		background: rgba(255, 255, 255, 1);
		margin-top: 20upx;
	}
	.school image {
		width: 170upx;
		height: 54upx;
		margin: 0 auto;
		display: block;
	}

	.school-content {
		display: flex;
		flex-wrap: wrap;
	}

	.school-content view:first-child {
		margin-left: 98upx;
		margin-right: 195upx;
	}

	.schol-icon image {
		width: 180upx;
		height: 180upx;
	}

	.schol-icon span {
		width: 112upx;
		height: 40upx;
		font-size: 28upx;
		font-family: PingFangSC;
		font-weight: 500;
		color: rgba(44, 44, 44, 1);
		line-height: 40upx;
		margin-top: 24upx;
		margin-bottom: 40upx;
	}

	.schol-icon {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-align: -webkit-center;
	}

	.major {
		width: 750upx;
		height: 470upx;
		background: rgba(255, 255, 255, 1);
		margin-top: 20upx;
		margin-bottom: 20upx;
	}

	.major image:nth-child(1) {
		width: 170upx;
		height: 54upx;
		margin: 0 auto;
		display: block;
	}

	.footer {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 99rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 20rpx;
	}

	.footer div:first-child {
		margin-left: 92rpx;
		margin-right: 184rpx;
	}

	.footer div:nth-child(2) {
		margin-right: 183rpx;
	}
	.footer div:nth-child(3) {
		margin-right: 93rpx;
	}
	.footer image {
		width: 66rpx;
		height: 67rpx;
		overflow: visible;
	}
	.footer div:first-child p {
		margin-left: 15rpx;
	}
	.footer div:nth-child(3) p {
		margin-left: 15rpx;
	}
	.footer div {
		display: flex;
		flex-direction: column;
		width: 80rpx;
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: rgba(175, 178, 191, 1);
		line-height: 28rpx;
	}
</style>