dreamland/pages/index/foot.vue

<template>
	<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end" style="height:150rpx;">
		<view class="gui-footer-icon-buttons" @tap="menu(0)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
			:class="[cur == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe608;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
			:class="[cur == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
		</view>
		<view class="gui-footer-icon-buttons" @tap="menu(1)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
			:class="[cur == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe624;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
			:class="[cur == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">头条</text>
		</view>
		<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->
		<view class="gui-footer-icon-buttons"></view>
		<view class="gui-footer-icon-buttons" @tap="menu(3)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
			:class="[cur == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text" 
			:class="[cur == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">消息</text>
		</view>
		<view class="gui-footer-icon-buttons" @tap="menu(4)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
			:class="[cur == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text" 
			:class="[cur == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
		</view>
		<!-- 使用定位方式实现凸出按钮 -->
		<view class="gui-footer-buttons-ab" @tap="menu(2)">
			<text class="gui-footer-buttons-ab-icon gui-block-text gui-icons" 
			:class="[cur == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe612;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text" 
			:class="[cur == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">合小记</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value : {
			type : Number,
			value : 0
		},
	},
	data() {
		return {
			cur : 0,
		}
	},
	mounted() {
		this.cur = this.value;
	},
	methods: {
		menu : function (index) {
			this.cur = index;
			if (index == 0) {
				this.Dever.location('index/index');
			} else if (index == 1) {
				this.Dever.location('index/news');
			} else if (index == 2) {
				this.Dever.location('index/list');
			} else if (index == 3) {
				this.Dever.location('index/msg');
			} else if (index == 4) {
				this.Dever.location('index/my');
			}
		}
	}
}
</script>
<style>
view {
	box-sizing: unset;
}
.gui-footer-icon-buttons{width:130rpx; height:80rpx; padding:10rpx; flex:1; position:relative; margin:0; background-color:#F8F8F8;}
.gui-footer-buttons-ab{position:absolute; z-index:101; left:325rpx; top:0rpx; width:110rpx; height:150rpx;}
.gui-footer-buttons-ab-icon{width:110rpx; height:110rpx; line-height:120rpx; text-align:center; font-size:68rpx; background-color:#F7F8FA; border-radius:100rpx;}
</style>