feiYi/pages/index/startPage.vue

<template>
	<view class="box">
		<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 class="star_btn" @click="starBtn">
			<view class="star_btn2">开始探索</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		starBtn() {
			uni.navigateTo({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	height: 1926rpx;
	background: url('/static/img/stra_bj.png') no-repeat center;
	background-size: 100% 100%;
	padding-top: 200rpx;
	box-sizing: border-box;
}
.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: 600rpx;
	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: #fff9ec;
	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>