feiYi/pages/index/startPage.vue

<template>
	<view class="box" @click="starBtn">
		<view class="header">
			<image style="width: 100%; height: 100%" src="/static/img/star_lg.png"></image>
		</view>
		<view class="tit_box">
			<image style="width: 100%; height: 100%" src="/static/img/star_tit.png"></image>
			<view class="logo">
				<image style="width: 100%; height: 100%" src="/static/img/img_seal@2x.png"></image>
			</view>
		</view>
		<view class="eng_tit">Huli Cultural Heritage Protection Center</view>
		<view class="introduce_tit">
			<view class="btm">因手艺而经典，因守艺而传承</view>
			<view class="btm">非遗匠艺，是时代文明记忆，也是城市情感记忆</view>

			<view class="btm">触碰历史的温度，感受匠心的力量</view>

			<view class="">一场非遗匠艺手作之旅即将优雅启程</view>
		</view>
		<view @click="starBtn" style="cursor: pointer; margin: auto; width: 2200rpx; height: 660rpx">
			<view class="star_btn">
				<view class="star_btn2">开始探索</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			timeout: 30000, // 30s
			timeoutObj: null
		};
	},
	onLoad() {
		that = this;
	},
	methods: {
		starBtn() {
			uni.navigateTo({
				url: '/pages/index/index'
			});
			// .判断是否已连接
			// this.checkOpenSocket();
		}
		// 判断是否已连接
		// checkOpenSocket() {
		// 	uni.sendSocketMessage({
		// 		data: 'ping',
		// 		success: (res) => {
		// 			this.send();
		// 			return;
		// 		},
		// 		fail: (err) => {
		// 			// 未连接打开websocket连接
		// 			this.openConnection();
		// 		}
		// 	});
		// },
		// openConnection() {
		// 	// 打开连接
		// 	// uni.closeSocket(); // 确保已经关闭后再重新打开
		// 	uni.connectSocket({
		// 		url: 'ws://192.168.10.80:8002',
		// 		success(res) {
		// 			console.log('连接成功 connectSocket=', res);
		// 		},
		// 		fail(err) {
		// 			console.log('连接失败 connectSocket=', err);
		// 		}
		// 	});
		// 	uni.onSocketOpen((res) => {
		// 		console.log('连接成功');
		// 		this.send();
		// 	});
		// 	this.onSocketMessage(); // 打开成功监听服务器返回的消息
		// },
		// send() {
		// 	uni.sendSocketMessage({
		// 		// 发送的指令
		// 		data: '{"command":"control","code":"quanxiplay"}',
		// 		success: (res) => {
		// 			console.log(res, 88888);
		// 			console.log('发送成功....');
		// 		},
		// 		fail: (err) => {
		// 			console.log(res);
		// 			console.log('连接失败重新连接....');
		// 			this.openConnection();
		// 		}
		// 	});
		// },
		// onSocketMessage() {
		// 	// 消息
		// 	this.timeout = 30000;
		// 	this.timeoutObj = null;
		// 	uni.onSocketMessage((res) => {
		// 		console.log(res);
		// 		this.getSocketMsg(res.data); // 监听到有新服务器消息
		// 	});
		// },
		// // 监听到有新服务器消息
		// getSocketMsg(reData) {
		// 	// 监听到服务器消息
		// 	console.log('收到服务器消息', reData);
		// 	this.reset(); // 检测心跳reset,防止长时间连接导致连接关闭
		// },
		// // 检测心跳reset
		// reset() {
		// 	clearInterval(this.timeoutObj);
		// 	this.start(); // 启动心跳
		// },
		// // 启动心跳 start
		// start() {
		// 	this.timeoutObj = setInterval(function () {
		// 		uni.sendSocketMessage({
		// 			data: 'ping',
		// 			success: (res) => {
		// 				console.log('连接中....');
		// 			},
		// 			fail: (err) => {
		// 				console.log('连接失败重新连接....');
		// 				that.openConnection();
		// 			}
		// 		});
		// 	}, this.timeout);
		// }
	}
};
</script>

<style>
.box {
	width: 100%;
	height: 1906rpx;
	background: url('/static/img/stra_bj.png') no-repeat center;
	background-size: 100% 100%;
	padding-top: 200rpx;
	box-sizing: border-box;
	cursor: pointer;
}
.header {
	width: 522rpx;
	height: 100rpx;
	margin: auto;
}
.tit_box {
	display: flex;
	margin: auto;
	margin-top: 60rpx;
	width: 2200rpx;
	height: 160rpx;
}
.logo {
	width: 48rpx;
	height: 180rpx;
	margin-left: 20rpx;
}
.eng_tit {
	width: 1200rpx;
	height: 120rpx;
	margin: auto;
	font-size: 48rpx;

	color: #989694;
	text-align: center;
	margin-top: 60rpx;
}
.introduce_tit {
	width: 1600rpx;
	height: 400rpx;
	margin: auto;
	letter-spacing: 0.1em;
	text-align: center;
	color: #3f3d3a;
	font-size: 48rpx;
}
.btm {
	margin-bottom: 40rpx;
}
.star_btn {
	width: 340rpx;
	padding: 16rpx 0 16rpx 0;
	margin: auto;
	cursor: pointer;
	background-color: #fee9d4;
	box-sizing: border-box;
}
.star_btn2 {
	width: 300rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 50rpx;
	margin: auto;
	letter-spacing: 0.2em;
	border: 1px solid #563530;
	background: linear-gradient(270deg, #bc5f29 0%, #5b3c29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
</style>