besiweb/pages/index/chaodu/index.vue

<template class="body">
	<view class="uni-main">
		<cover-view class="uni-header">
			<view class="uni-header-box">
				<img @click="backHome()" class="back" src="../../../static/index/icon/buddha_back.png" width="16">
				<text class="text_title">超度</text>
			</view>
			<img class="right_menu" src="../../../static/index/icon/menu_more_white.png" width="40">
		</cover-view>
		<cover-view v-show="k==curIndex" :class="'uni-desk '+ k" v-for="(v,k) in foList" :key="k">
			<view class="uni-desk-box">
				<view class="fo">
					<img src="" alt="">
				</view>
				<cover-view class="gf">
					<img v-if="xiuxingStatus" class="hua" src="../../../static/index/qifu/xiuxing_huaping.png" alt="">
					<img v-else class="hua" src="../../../static/index/qifu/xiuxing_huaping_2.png" alt="">
					<img v-if="xiuxingStatus" class="guo" src="../../../static/index/qifu/xiuxing_fruit_panzi.png" alt="">
					<img v-else class="guo" src="../../../static/index/qifu/xiuxing_fruit_panzi_1.png" alt="">
					<text class="lz">
						<img class="zhutai" src="../../../static/index/qifu/xiuxing_zhutai_no.png" alt="">
					</text>
					<text class="xiang-box">
						<img class="xiang-icon" src="../../../static/index/chaodu/foxiang_dizang1.png" width="80">
						<img class="paiwei-icon" src="../../../static/index/chaodu/chao_du_pai.png" width="80">
						<img v-if="xiuxingStatus" class="xiang" src="../../../static/index/qifu/xiuxing/xiuxing_xiang_2.png" alt="">
						<img v-else class="xiang" src="../../../static/index/qifu/xiuxing/xiuxing_xiang.png" alt="">
						<img class="cup" src="../../../static/index/qifu/cup_no_tea.png" width="60">
					</text>
					<text class="lz">
						<img class="zhutai" src="../../../static/index/qifu/xiuxing_zhutai_no.png" alt="">
					</text>
					<img v-if="xiuxingStatus" class="guo" src="../../../static/index/qifu/xiuxing_fruit_panzi.png" alt="">
					<img v-else class="guo" src="../../../static/index/qifu/xiuxing_fruit_panzi_1.png" alt="">
					<img v-if="xiuxingStatus" class="hua" src="../../../static/index/qifu/xiuxing_huaping.png" alt="">
					<img v-else class="hua" src="../../../static/index/qifu/xiuxing_huaping_2.png" alt="">
				</cover-view>
			</view>
		</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curIndex: 'xiang_1',
				xiuxingStatus: false,
				foList: {
					xiang_1: {
						fo_url: '',
						pingzi: '',
						guo: '',
						xiuxing: '',
						cup: '',
						xiang: '',
					},
					xiang_2: {
						fo_url: '',
						pingzi: '',
						guo: '',
						xiuxing: '',
						cup: '',
						xiang: '',
					},
				},
			}
		},
		onLoad() {
			let _uni = this;
			
			// 
			
			setInterval(function(){
				_uni.xiuxingStatus = _uni.xiuxingStatus? false : true;
				
			}, 800)
		},
		methods: {
			backHome() {
				uni.navigateBack({
					delta: 1
				});
			},
			switchIndex(){
				console.log(this.curIndex)
				this.curIndex = this.curIndex == 'xiang_1'? 'xiang_2' : 'xiang_1'
			},
			
		}
	}
</script>

<style>
	page {
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.uni-main {
		width: 100%;
		height: 100%;
		min-height: 800rpx;
		display: block;
		/*
		background: url('../../../static/index/qifu/bg1.jpg') no-repeat 100%/100% #f5c163;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		*/
		background: url(../../../static/index/qifu/bg1.jpg) no-repeat center 100%/100% #f5c163;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background-size: cover;

	}

	.uni-header {
		height: 80rpx;
		line-height: 80rpx;
		padding: 10rpx 20rpx;
		position: relative;
		display: flex;
		top: 0;
		align-items: center;
		overflow: visible;
	}

	.uni-header-box {
		width: 100%;
		display: inline-block;
	}

	.uni-header-box .text_title {
		color: #FFFFFF;
		font-size: 40rpx;
		margin-left: 20rpx;
	}

	.uni-header .right_menu {
		float: right;
	}

	.uni-header .music_icon {
		position: absolute;
		bottom: -126rpx;
		right: 20rpx;
	}

	.uni-action-btn {
		margin-top: 70%;
		position: relative;
		overflow: visible;
	}

	.uni-action-btn img {
		width: 44rpx;
	}

	.uni-action-btn .left_btn {
		margin-left: 56rpx;
	}

	.uni-action-btn .right_btn {
		float: right;
		margin-right: 58rpx;
	}

	.uni-action-btn .right_row {
		width: 40rpx;
		position: absolute;
		right: 10rpx;
		bottom: -40rpx;
	}
	
	.uni-action-btn .left_row {
		width: 40rpx;
		position: absolute;
		left: 10rpx;
		bottom: -40rpx;
	}

	.uni-desk {
		overflow: visible;
		position: absolute;
		bottom: 0rpx;
		width: 100%;
	}

	.uni-desk-box {
		margin: 0 auto;
		width: 480rpx;
		height: 320rpx;
		background: url('../../../static/index/chaodu/fo_tang_tribute_bg.png') no-repeat center/103%;
		position: relative;
		overflow: visible;
	}

	.uni-desk-box .gf {
		position: relative;
		top: -62rpx;
		margin-left: -16rpx;
		overflow: visible;
	}

	.uni-desk-box .gf .xiang-box {
		width: 120rpx;
		position: relative;
		overflow: visible;
	}
	.uni-desk-box .gf .xiang-box img {
		position: relative;
		z-index: 2;
	}
	.uni-desk-box .gf img.xiang-icon {
		position: absolute;
		bottom: 72rpx;
		width: 720rpx;
		z-index: 0;
		right: 0;
		left: -300rpx;
		
	}
	.uni-desk-box .gf img.paiwei-icon {
		position: absolute;
		bottom: -4rpx;
		width: 250rpx;
		z-index: 0;
		right: 0;
		left: -62rpx;
		
	}
	.uni-desk-box .gf .xiang {
		width: 120rpx;
		margin: 0 auto;
		position: relative;
		margin-bottom: -20rpx;
		z-index: 2;
		/* width: 100%; */
	}

	.uni-desk-box .gf .hua {
		width: 70rpx;
		position: relative;
		margin-bottom: -10rpx;
		z-index: 2;
	}

	.uni-desk-box .gf .guo {
		width: 80rpx;
		margin-bottom: -20rpx;
		position: relative;
		z-index: 2;
	}

	.uni-desk-box .gf img.cup {
		width: 120rpx;
		position: absolute;
		bottom: -24rpx;
		right: 0;
		left: 0;
		margin: auto;
		z-index: 2;
	}

	.uni-desk-box .gf .zhutai {
		width: 40rpx;
		margin-bottom: -28rpx;
		position: relative;
		z-index: 2;
	}
	

	@media screen and (max-width: 414px) {
		.uni-desk-box .gf {
			top: -62rpx;
		}
	}
</style>