WenWuGuanJia/shouhu_fenbao/chuangGuan/daTi.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="答题闯关" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<!-- 菜单 -->
		<!-- 		<view class="menu_box">
			<view @click="menuBtn(index)" class="item" :class="{ active: index == menuIndex }" v-for="(item, index) in menuList" :key="item.index">{{ item.title }}</view>
		</view> -->
		<view class="ban_box">
			<view class="ban_item2">
				<image class="img" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/dt_ban1.png"></image>
			</view>
			<view class="ban_item1">
				<image class="img" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/dt_ban2.png"></image>
			</view>
		</view>
		<view class="map_tit">
			<image style="width: 130rpx; height: 30rpx" src="/static/img/left_img.png"></image>

			<view class="">点击图案 切换关卡</view>
			<image style="width: 130rpx; height: 30rpx" src="/static/img/right_img.png"></image>
		</view>
		<view class="tab_box">
			<view @click="tabBtn(index)" class="tab_item" v-for="(item, index) in 3" :key="item.index" :class="{ active2: index == tabIndex }"></view>
		</view>
		<view style="width: 333rpx; height: 20rpx; margin-left: 190rpx">
			<image src="/static/img/fenge.png" class="img"></image>
		</view>
		<view class="tit" style="font-size: 42rpx">知识风暴</view>
		<view @click="star" class="star"><view class="tit">开始闯关</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuIndex: 0,
			tabIndex: 0,
			menuList: [
				{
					title: '全部'
				},
				{
					title: '闯关'
				},
				{
					title: '练习'
				}
			]
		};
	},
	methods: {
		// menuBtn(i) {
		// 	this.menuIndex = i;
		// },
		tabBtn(i) {
			this.tabIndex = i;
		},
		star() {
			uni.navigateTo({
				url: '/answer_pages/home/dashboard'
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-repeat: repeat-y;
	background-size: cover;
	background-size: 100% 100%;
}
.menu_box {
	display: flex;
	margin: auto;
	margin-top: 50rpx;
	width: 80%;
	justify-content: space-around;
}
.item {
	width: 160rpx;
	height: 60rpx;
	font-size: 30rpx;
	text-align: center;
	color: #313131;
	line-height: 60rpx;
	background: url('/static/img/dt_bg2.png') no-repeat;
	background-size: 100% 100%;
}
.active {
	background: url('/static/img/dt_bg1.png') no-repeat !important;
	background-size: 100% 100% !important;
}
.active2 {
	background: url('/static/img/dt_tab2.png') no-repeat !important;
	background-size: 100% 100% !important;
}
.ban_box {
	position: relative;
	margin-top: 100rpx;
}
.img {
	width: 100%;
	height: 100%;
}
.ban_item1 {
	position: absolute;
	top: -40rpx;
	left: 62rpx;
	width: 619rpx;
	height: 619rpx;
	margin: auto;
}
.ban_item2 {
	width: 537rpx;
	height: 537rpx;
	margin: auto;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 110rpx;
	margin-top: 80rpx;
	font-size: 32rpx;
	line-height: 52rpx;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.tab_box {
	margin: auto;
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
	margin-bottom: 30rpx;
	width: 45%;
}
.tab_item {
	width: 60rpx;
	height: 60rpx;
	background: url('/static/img/dt_tab1.png') no-repeat;
	background-size: 100% 100%;
}
.tit {
	width: 90%;
	margin: auto;
	margin-top: 30rpx;
	font-size: 32rpx;
	letter-spacing: 6rpx;
	text-align: center;
	font-weight: 700;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.star {
	width: 300rpx;
	height: 76rpx;
	margin: auto;
	margin-top: 80rpx;
	text-align: center;
	line-height: 76rpx;
	background: url('/static/img/dt_bg2.png') no-repeat;
	background-size: 100% 100%;
}
</style>