yichael_zhongchuang_front_2/pages/home.vue

<template>
	<view class="mybody bgclF8 df fdc">
		<TopMenu ref="TopMenu" v-on:onTopSYClick="onTopSYClick" v-on:onTopQXZBClick="onTopQXZBClick"
			v-on:onLoginClick="onLoginClick" v-on:onTopXXYSYClick="onTopXXYSYClick"
			v-on:onTopMenuIconClick="onTopMenuIconClick" v-on:onClick_return="onClick_return"
			v-on:onClick_avatar="onClick_avatar" v-on:onClick_topMenu_sy="onClick_topMenu_sy"
			v-on:onClick_exit="onClick_userExit"></TopMenu>
		<view class="content homeContent">
			<Login ref="Login" v-show="bShow[0]" v-on:onLogin="onLogin"></Login>
			<SYJJ ref="SYJJ" v-show="bShow[1]" v-on:onClick_Btn1="onClick_SYJJ_btn1"></SYJJ>
			<!-- <XXLC ref="XXLC" v-show="bShow[2]" v-on:onClick_ksxx="onClick_ksxx"></XXLC> -->
			<XQDL ref="XQDL" v-show="bShow[2]" v-on:onClick_Btn1="onClick_XQDL_btn1"></XQDL>
			<KSXX ref="KSXX" v-show="bShow[3]" v-on:on2thTitleClick="on2thKSXXClick"></KSXX>
			<!-- <image v-show="bShow[4]" class="homeBG" mode="aspectFill" src="../assets/home/homeBG.jpg"></image> -->
			<SY ref="SY" v-show="bShow[4]" v-on:onClick_menu_btn="onClick_sy_btn" v-on:onTheoryLearnu_btn="onTheoryLearnu_btn" v-on:onStartExperiment_btn="onStartExperiment_btn"></SY>
			<QXZB ref="QXZB" v-show="bShow[5]"></QXZB>
			<XXYSY ref="XXYSY" v-show="bShow[6]" v-on:onClick_KSRZ="onClick_KSRZ" v-on:onClick_KSKC="onClick_KSKC"
				v-on:onShowWebview720="onShowWebview720"></XXYSY>
			<YLRZ ref="YLRZ" v-show="bShow[7]"></YLRZ>
			<SYJJ2 ref="SYJJ2" v-show="bShow[8]"></SYJJ2>
			<simulation ref="simulation" v-show="bShow[9]"></simulation>
			<simulationLibrary ref="simulationLibrary" v-show="bShow[10]"></simulationLibrary>
			<simulationcore ref="simulationcore" v-show="bShow[11]" v-on:goToTeachCreation="goToTeachCreation"
				v-on:goToStudentPlatform="goToStudentPlatform"></simulationcore>
			<simulationBase ref="simulationBase" v-show="bShow[12]"></simulationBase>
			<teacherCreation ref="teacherCreation" v-show="bShow[13]"></teacherCreation>
			<User ref="User" v-show="bShow[14]" v-on:onClick_proManage="onClick_proManage"></User>
			<XXGY ref="XXGY" v-show="bShow[15]"></XXGY>
			<SYBZ ref="SYBZ" v-show="bShow[16]" v-on:onClick_ksxx="onClick_ksxx"></SYBZ>
			<SYYDSP ref="SYYDSP" v-show="bShow[17]"></SYYDSP>
			<student ref="student" v-show="bShow[18]"></student>
			<vstudentPlatform ref="vstudentPlatform" v-show="bShow[19]"></vstudentPlatform>
			<survey ref="survey" v-show="bShow[20]"></survey>
			<SJKC ref="SJKC" v-show="bShow[21]"></SJKC>
			<XXZLXZ ref="XXZLXZ" v-show="bShow[22]"></XXZLXZ>
		</view>
		<!-- 左侧导航栏永远保持在最上层 -->
		<LeftMenu ref="LeftMenu" v-on:onLeftMenuClick="onLeftMenuClick"></LeftMenu>
		<webview720 ref="webview720"></webview720>
		<shutDownWebview ref="shutDownWebview" v-on:onHideWebview="onHideWebview" v-on:onClick_KSKC="onClick_KSKC"></shutDownWebview>
		<!-- 联系方式 -->
		<!-- <view class='contact'> -->
			<!-- 弹出框 -->
			<!-- <view class='contactPopView'>
				<view class='qrcode' v-show="bShowQrCode">
					<img class="contactPopViewContent" src="../assets/contact/QRCode.png"></img>							
				</view>
				
				<view class='mail' v-show="bShowMail">
					<img class="contactPopViewBg"  src="../assets/contact/bubble_02.png"></img>
					<text selectable="true" class="contactPopViewContent"  src="../assets/contact/QRCode.png">2812319400@qq.com</text>
				</view>
				
				<view class='tel' v-show="bShowTel">
					<img class="contactPopViewBg" src="../assets/contact/bubble_02.png"></img>
					<text selectable="true" class="contactPopViewContent" src="../assets/contact/QRCode.png">15017534446</text>
				</view>
				
			</view>	 -->
			<!-- 背景 -->
			<!-- <view class='contactBg'></view> -->
			<!-- icon -->
			<!-- <view class="imageBg">
				<img src="../assets/contact/qrcode_icon.png" @mousemove="showContact(0)" @mouseout="showContact(4)"></img>
				<img src="../assets/contact/mail_icon.png" @mousemove="showContact(1)" @mouseout="showContact(4)"></img>
				<img src="../assets/contact/tel_icon.png" @mousemove="showContact(2)" @mouseout="showContact(4)"></img>
			</view> -->
		</view>
	</view>
</template>

<script>
	import SY from '../components/home/sy.vue'
	import LeftMenu from '../components/leftMenu.vue'
	import TopMenu from '../components/topMenu.vue'
	import Login from '../components/login/login.vue'
	import simulation from "../components/home/simulation.vue"
	import simulationLibrary from "../components/home/simulationLibrary.vue"
	import simulationcore from "../components/home/simulationCore.vue"
	import simulationBase from "../components/home/simulationBase.vue"
	import teacherCreation from "../components/home/teacherCreation.vue"
	import vstudentPlatform from "../components/student/Index.vue"
	import student from "../components/student/commoand.vue"
	import survey from "../components/student/survey.vue"
	//一级页面
	import KSXX from '../components/startLearning/startLearning.vue' //开始学习
	import SYJJ from '../components/introductionToTheExperiment/introductionToTheExperiment.vue' //实验简介
	// import XXLC from '../components/learningProcess/learningProcess.vue' //学习流程

	//二级页面
	//开始学习
	import QXZB from '../components/startLearning/preludePreparation/preludePreparation.vue' //前序准备
	import XXYSY from '../components/startLearning/learningAndExperiment/learningAndExperiment.vue' //学习与实验
	import YLRZ from '../components/startLearning/learningAndExperiment/ksxx_xxysy_ylrz/ksxx_xxysy_ylrz.vue' //原理认知
	//实验简介的详情页
	import SYJJ2 from '../components/introductionToTheExperiment/syjj_second.vue' //实验简介的详情页

	import User from '../components/user/user.vue' //用户信息等
	import XQDL from '../components/learningProcess/xqdl.vue' //学前导览
	import XXGY from '../components/learningProcess/xxgy.vue' //学习概要
	import SYBZ from '../components/learningProcess/learningProcess.vue' //实验步骤
	import SYYDSP from '../components/learningProcess/syydsp.vue' //实验引导视频
	import XXZLXZ from '../components/learningProcess/xxzlxz.vue' //学习资料下载
	import SJKC from '../components/startLearning/learningAndExperiment/ksxx_xxysy_sjkc/ksxx_xxysy_sjkc.vue' //实景勘察

	import shutDownWebview from '../components/home/shutDownWebview.vue' //实景勘察720
	import webview720 from '../components/home/webview720.vue' //实景勘察720
	export default {
		components: {
			LeftMenu,
			TopMenu,
			Login,
			SYJJ,
			XQDL,
			KSXX,
			QXZB,
			XXYSY,
			YLRZ,
			SYJJ2,
			simulation,
			simulationLibrary,
			simulationcore,
			simulationBase,
			teacherCreation,
			User,
			XXGY,
			SYBZ,
			SYYDSP,
			SY,
			student,
			vstudentPlatform,
			survey,
			SJKC,
			XXZLXZ,

			shutDownWebview,
			webview720
		},
		data() {
			return {
				curShowPage: 4,
				//这里记录当前需要显示哪个页面。每新添加一个页面，都需要在这里注册。
				bShow: [
					false, //0登录
					false, //1实验简介一级页面
					false, //2学习流程一级页面----改为学前导览
					false, //3开始学习一级页面
					true, //4首页
					false, //5开始学习-前序准备
					false, //6开始学习-学习与实验
					false, //7开始学习-学习与实验-原理认知
					false, //8实验简介的详情页
					false, //9虚拟仿真1号摄影棚
					false, //10虚拟仿真资产库
					false, //11虚拟影视项目开发管理中心
					false, //12虚拟仿真真题拍摄基地
					false, //13老师创作管理平台
					false, //14用户(个人信息等)
					false, //15学习概要
					false, //16实验步骤
					false, //17实验引导视频
					false, //18 学生信息
					false, //19 学生创作项目管理平台
					false, //20开始勘测
					false, //21实景勘察
					false, //22学习资料下载
				],
				checkedIndex_SYJJ: 0, //实F验简介选中标题索引值
				bShowQrCode:false,
				bShowMail:false,
				bShowTel:false,
			}
		},
		onLoad() {
			let account = localStorage.getItem("account");
			let password = localStorage.getItem("password");

			if (account != null && password != null) {
				let url = mydata_api + "/user/loginin";
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: url,
					method: 'POST',
					data: {
						"IlabAccount": account,
						"Password": password
					},
					dataType: 'json',
					success: (res) => {
						let data = res.data;
						//登录成功
						if (data.Code == 100) {
							// console.log("登陆成功");
							if (data.Image != '') {
								mydata_userInfo.avatarSrc = data.Image;
							}
							console.log("home登陆成功data=", data);
							mydata_userInfo.Name = data.Name;
							mydata_userInfo.UserID = data.UserID;
							mydata_userInfo.Position = data.Position;
							mydata_userInfo.role = data.Type;
							
							if (mydata_userInfo.role == '老师') {
								userController.updateStudentList(null, null);
							}
							else{
								mydata_userInfo.role = '学生';
							}
							userController.updateUserInfo();
							userController.updateScore();

							// MyRequest.SetUserType(mydata_userInfo.role,null,null);

							getApp().globalData.bLogin = true;
							this.onLogin();
						}
					},
					fail: (res) => {
						console.log("fail+**+*", res)
					}
				});
			}
		},
		methods: {
			onTopSYClick(index) {
				if (!getApp().globalData.bLogin) {
					alert('请先登录')
					return
				};
				// console.log("点击了首页标题", index, myData_QXZB_SYQY.length);
				let pageIndex = -1;
				switch (index) {
					case 0: //实验简介
						pageIndex = 1;
						// this.$refs.SYJJ.initData();
						break;
					case 1: //学习流程
						pageIndex = 2;
						// this.$refs.XXLC.initData();
						break;
					case 2: //开始学习
						pageIndex = 3;
						this.$refs.KSXX.initData();
						break;
					default:
						console.log("选中状态为home：", state);
				}
				this.showPage(pageIndex);
			},
			onLogin: function() {
				// console.log("登陆成功home");
				this.$refs.TopMenu.switchLoginState(true);
				this.showPage(4);
			},
			showPage(index) {
				this.curShowPage = index;
				for (let i = 0; i < this.bShow.length; i++) {
					if (i == index) {
						this.bShow[i] = true;
					} else {
						this.bShow[i] = false;
					}
				}
				// console.log("显示页面", index, this.bShow, this.bShow.length);
				this.$forceUpdate();
			},
			//2级开始学习标题点击事件
			on2thKSXXClick(data) {
				// console.log("2级点击", data);
				let lineIndex = data.indexOf("-");
				let type = data.substr(0, lineIndex)
				let index = data.substr(lineIndex + 1, data.length - 1)
				// console.log("2级点击home---", type, index);
				//前序准备
				if (type == "QXZB") {
					this.showPage(5)
					this.$refs.TopMenu.switchMiddleState(topMenuS.QXZB, index);
					this.$refs.QXZB.onTopQXZBClick(index);
				}
				//学习与实验
				else if (type == "XXYSY") {
					this.showPage(6)
					this.$refs.TopMenu.switchMiddleState(topMenuS.XXYSY, index);
					this.$refs.XXYSY.onTopXXYSYClick(index);
				} else {
					console.log("2级点击---", lineIndex, type, index);
				}
			},
			//顶部前序准备小标题点击事件
			onTopQXZBClick(index) {
				// console.log("顶部点击home",index);
				this.$refs.QXZB.onTopQXZBClick(index);
			},
			//顶部学习与实验小标题点击事件
			onTopXXYSYClick(index) {
				// console.log("顶部点击home",index);
				this.$refs.XXYSY.onTopXXYSYClick(index);
			},
			//左侧导航点击事件
			onLeftMenuClick(indexArr) {
				let targetPage = -1;
				let topMiddleState = '';
				let target2thIndex = indexArr[1];
				switch (indexArr[0]) {
					case 0: //首页
						if (indexArr[1] == 0) {
							targetPage = 9;
							topMiddleState = topMenuS.home1;
						} else if (indexArr[1] == 1) {
							targetPage = 10;
							topMiddleState = topMenuS.home2;
						} else if (indexArr[1] == 2) {
							targetPage = 11;
							topMiddleState = topMenuS.home3;
						} else if (indexArr[1] == 3) {
							targetPage = 12;
							topMiddleState = topMenuS.home4;
						} else if (indexArr[1] == 4) {
							targetPage = 13;
							topMiddleState = topMenuS.home5;
						} else {
							targetPage = 4;
							topMiddleState = topMenuS.SY;
						}
						break;
					case 1: //实验简介
						if (indexArr[1] == 1) {
							//点击快速进入实验后跳转到原理认知页
							targetPage = 6;
							topMiddleState = topMenuS.XXYSY;
							this.$refs.XXYSY.onTopXXYSYClick(0);
							target2thIndex = 0;
						} else {
							targetPage = 8;
							topMiddleState = topMenuS.SYJJ;
							this.$refs.SYJJ2.showPage(indexArr[1]);
							this.$refs.TopMenu.switchState_syjj(indexArr[1]);
						}
						break;
					case 2: //学习流程
						switch (indexArr[1]) {
							case 0: //学习概要
								targetPage = indexArr[1] + 15;
								topMiddleState = topMenuS.XXGY;
								break;
							case 1: //实验步骤
								targetPage = indexArr[1] + 15;
								topMiddleState = topMenuS.SYBZ;
								break;
							case 2: //实验引导视频
								targetPage = indexArr[1] + 15;
								topMiddleState = topMenuS.SYYDSP;
								break;
							case 3: //学习资料下载
								targetPage = 22;
								topMiddleState = topMenuS.XXZLXZ;
								break;
							default:
						}
						break;
					case 3: //开始学习
						targetPage = 6;
						topMiddleState = topMenuS.XXYSY;
						this.$refs.XXYSY.checkedIndex_topTitle = indexArr[1];
						break;
					case 4:
						targetPage = 18;
						topMiddleState = topMenuS.info;
						break;
					case 5:
						targetPage = 19;
						topMiddleState = topMenuS.info;
						break;
					case 6:
						targetPage = 20;
						topMiddleState = '开始勘测'
						break;
					default:
						console.log("展示页面home：", this.curShowPage);
				}
				this.showPage(targetPage);
				this.$refs.TopMenu.switchMiddleState(topMiddleState, target2thIndex);
				// console.log("左侧导航点击home", indexArr);
				this.$forceUpdate();
			},
			goToTeachCreation() {
				this.showPage(13);
			},
			goToStudentPlatform() {
				this.showPage(19);
				this.$refs.vstudentPlatform.updateInfo();
			},
			//顶部导航左上角icon点击事件
			onTopMenuIconClick() {
				if (!getApp().globalData.bLogin) {
					alert('请先登录')
					return
				};
				let indexArr = [];
				switch (this.curShowPage) {
					case 0: //登录
						indexArr = [-1, -1];
						break;
					case 1: //实验简介1级
						indexArr = [1, -1];
						break;
					case 2: //学习流程1级
						indexArr = [2, -1];
						break;
					case 3: //开始学习1级
						indexArr = [3, -1];
						break;
					case 4: //首页
						indexArr = [0, -1];
						break;
					case 5: //开始学习-前序准备
						indexArr = [3, 0];
						break;
					case 6: //开始学习-学习与实验
						indexArr = [3, 1];
						break;
					case 7: //开始学习-学习与实验-原理认知
						indexArr = [3, 1];
						break;
					case 8: //实验简介2级
						indexArr = [1, this.checkedIndex_SYJJ];
						break;
					default:
						console.log("展示页面home：", this.curShowPage);
				}
				this.$refs.LeftMenu.show(indexArr);
			},
			//开始学习-学习与实验-开始认知按钮
			onClick_KSRZ() {
				this.showPage(7);
				this.$refs.TopMenu.switchMiddleState(topMenuS.YLRZ, -1);
			},
			//开始学习-实景勘察-开始勘察按钮
			onClick_KSKC() {
				this.showPage(21);
				this.$refs.TopMenu.switchMiddleState(topMenuS.SJKC, -1);
			},
			onClick_return(type) {
				//从首页建筑页返回到首页
				if (type == 9 || type == 10 || type == 11 || type == 12) {
					this.showPage(4);
					this.$refs.SY.initData();
				}
				//学前导览三级级返回到学前导览
				else if (type == 5 || type == 6 || type == 7 || type == 8) {
					this.showPage(2);
				} else {
					switch (type) {
						case 1: //前序准备-返回上一层:返回到开始学习-前序准备的展开页 type-1
							this.showPage(3);
							this.$refs.KSXX.switchSecondTitle(0);
							break;
						case 2: //学习与实验-返回上一层:返回到开始学习-学习与实验的展开页 type-2
							this.showPage(3);
							this.$refs.KSXX.switchSecondTitle(1);
							break;
						case 3: //原理认知-返回上一层:返回到开始学习-学习与实验-原理认知页 type-3
							this.showPage(6);
							this.$refs.XXYSY.checkedIndex_topTitle = 0;
							break;
						case 4: //实验简介-返回上一层：返回到实验简介的展开页 type-4
							this.showPage(1);
							break;
						case 14: //开始勘察-返回上一层:返回到开始学习-实景勘察页
							this.showPage(6);
							this.$refs.XXYSY.checkedIndex_topTitle = 1;
							break;
						default:
							console.log("返回上一层", type);
					}
				}
			},
			//实验简介按钮点击
			onClick_SYJJ_btn1(index) {
				if (index == 1) { //点击快速进入实验后跳转到原理认知页
					this.showPage(6)
					this.$refs.TopMenu.switchMiddleState(topMenuS.XXYSY, 0);
					this.$refs.XXYSY.onTopXXYSYClick(0);
				} else {
					this.showPage(8);
					this.checkedIndex_SYJJ = index;
					this.$refs.SYJJ2.showPage(index);
					this.$refs.TopMenu.switchMiddleState(topMenuS.SYJJ, -1);
					this.$refs.TopMenu.switchState_syjj(index);
					this.$forceUpdate();
				}
			},
			onClick_ksxx() {
				this.showPage(3);
				this.$refs.KSXX.initData();
				this.$refs.TopMenu.switchMiddleState(topMenuS.SY, 2);
			},
			//顶部导航栏-头像点击事件
			onClick_avatar() {
				this.showPage(14);
				this.$refs.User.initData();
			},
			//学前导览
			onClick_XQDL_btn1(index) {
				let targetPage = 0;
				switch (index) {
					case 0: //学习概要
						this.$refs.TopMenu.switchMiddleState(topMenuS.XXGY, -1);
						targetPage = index + 15;
						break;
					case 1: //实验步骤
						this.$refs.TopMenu.switchMiddleState(topMenuS.SYBZ, -1);
						targetPage = index + 15;
						break;
					case 2: //实验引导视频
						this.$refs.TopMenu.switchMiddleState(topMenuS.SYYDSP, -1);
						targetPage = index + 15;
						break;
					case 3: //学习资料下载
						this.$refs.TopMenu.switchMiddleState(topMenuS.XXZLXZ, -1);
						targetPage = 22;
						break;
					default:
						console.log("onClick_XQDL_btn1", type);
				}
				this.showPage(targetPage);
			},
			//顶部导航点击"影视现场实时特效虚拟仿真实验"
			onClick_topMenu_sy() {
				this.showPage(4);
				this.$refs.SY.initData();
			},
			//首页建筑按钮点击事件
			onClick_sy_btn(index) {
				let targetPage = -1;
				let topMiddleState = '';
				switch (index) {
					case 0: //资产库
						targetPage = 10;
						topMiddleState = topMenuS.home2;
						this.$refs.simulationLibrary.init();
						break;
					case 1: //摄影棚
						targetPage = 9;
						topMiddleState = topMenuS.home1;
						break;
					case 2: //管理中心
						targetPage = 11;
						topMiddleState = topMenuS.home3;
						this.$refs.simulationcore.init();
						break;
					case 3: //拍摄基地
						targetPage = 12;
						topMiddleState = topMenuS.home4;
						break;
					default:
						console.log("展示页面home：", this.curShowPage);
				}
				this.showPage(targetPage);
				this.$refs.TopMenu.switchMiddleState(topMiddleState, index);
				this.$forceUpdate();
			},
			//项目管理平台
			onClick_proManage() {
				let targetPage = -1;
				let topMiddleState = '';
				if (mydata_userInfo.role == '老师') {
					targetPage = 13;
				} else {
					targetPage = 19;
					this.$refs.vstudentPlatform.updateInfo();
				}

				topMiddleState = topMenuS.SY;
				this.showPage(targetPage);
				this.$refs.TopMenu.switchMiddleState(topMiddleState, -1);
				this.$forceUpdate();
			},
			//用户退出
			onClick_userExit() {
				this.showPage(4);
				this.$refs.TopMenu.switchMiddleState(topMenuS.SY, -1);
			},
			onLoginClick() {
				this.showPage(0);
				this.$refs.Login.initData();
				this.$refs.TopMenu.switchMiddleState(topMenuS.SY, -1);
			},
			onHideWebview() {
				this.$refs.TopMenu.hideTopMenu(true);
				this.$refs.webview720.onClickShutWebview();
			},
			onShowWebview720() {
				this.$refs.TopMenu.hideTopMenu(false);
				this.$refs.shutDownWebview.onClickShow();
				this.$refs.webview720.onClickShow();
			},
			showContact(idx){
				// console.log('idx=',idx)
				if(0==idx)
				{
					this.bShowQrCode = true;
					this.bShowMail = false;
					this.bShowTel = false;
				}
				else if(1==idx)
				{
					this.bShowQrCode = false;
					this.bShowMail = true;
					this.bShowTel = false;
				}
				else if(2==idx)
				{
					this.bShowQrCode = false;
					this.bShowMail = false;
					this.bShowTel = true;
				}
				else{
					this.bShowQrCode = false;
					this.bShowMail = false;
					this.bShowTel = false;
				}	
			},
			onTheoryLearnu_btn(){
				this.showPage(6);
				this.$refs.XXYSY.checkedIndex_topTitle = 0;
			},
			onStartExperiment_btn(){
				this.showPage(6)
				this.$refs.TopMenu.switchMiddleState(topMenuS.XXYSY, 3);
				this.$refs.XXYSY.onTopXXYSYClick(3);
			}
		}
	}
</script>

<style lang="scss">
	.homeBG {
		width: 100%;
		height: 100%;
	}

	.homeContent {
		margin-top: px2vw(120);
	}
	//联系方式
	.contact{
		width: 20%;
		height: 30%;
			
		position: fixed;
		bottom: 1%;
		right: 1%;
		
		// border: 1px solid #ff0000;
	}
	//联系方式图标
	.contactBg{		
		width: 15%;
		height: 60%;
		
		position: absolute;
		right: 0;
		bottom: 0;
		
		background-color: #000000;
		opacity: 0.5;
	}
	.imageBg{
		width: 15%;
		height: 60%;
		
		position: absolute;
		right: 0;
		bottom: 0;
		
		display: flex;
		justify-content: space-around;
		align-items:center;
		flex-direction:column;
	}
	.contact img{
		width: 50%;
		// border: 5px solid #0000ff;
	}
	// 联系方式弹出框
	.contactPopView {
		width: 85%;
		height: 100%;
		// border: 5px solid #0000ff;
	}

	.qrcode{
		position: absolute;
		width: 100%;
		height: 100%;
		// border: 5px solid #00aa00;
		
		display: flex;
		justify-content: center;
		align-items:center;
	}
	.mail{
		position: absolute;
		width: 100%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;
	}
	.tel{
		position: absolute;
		width: 100%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;
	}
	
	.contactPopViewBg{
		position: absolute;
		width: 100%;
		// border: 5px solid #00aa00;
	}
	
	.contactPopViewContent{
		position: absolute;
		width: 100%;
		
		font-size: px2vw(12);
		display: flex;
		justify-content: center;
		align-items:center;
		
		// border: 5px solid #00aa00;
	}
</style>