dreamland/pages/index/index.vue

<template>
	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8" 
	:footerSets="{height:150, zIndex:100, bg:'none'}">
		<!-- 页面主体 -->
		<view slot="gBody" class="gui-margin">
			<gui-demo-banner title="GraceUI · FLEX 布局"
			img="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/8.png" 
			desc="利用内置 Flex 样式灵活组合, 快速实现"></gui-demo-banner>
			<view class="gui-margin-top">
				<text class="gui-h5 gui-color-gray gui-bold">横向缩放</text>
			</view>
			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-nowrap">
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
			</view>
			<view class="gui-margin-top">
				<text class="gui-h5 gui-color-gray gui-bold">横向换行</text>
			</view>
			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-wrap">
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
			</view>
			<view class="gui-margin-top">
				<text class="gui-h5 gui-color-gray gui-bold">横向两端</text>
			</view>
			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-space-between">
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
			</view>
			<view class="gui-margin-top">
				<text class="gui-h5 gui-color-gray gui-bold">自动宽度</text>
			</view>
			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-nowrap">
				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
				<view class="gui-text-small demo gui-bg-gray gui-color-gray gui-flex1">自动宽度元素</view>
			</view>
			<view class="gui-margin-top">
				<text class="gui-h5 gui-color-gray gui-bold">嵌套布局</text>
			</view>
			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-nowrap">
				<view class="gui-text-small demo gui-bg-gray gui-color-gray" 
				style="height:196rpx; line-height:196rpx;">GraceUI</view>
				<view style="flex:1;">
					<view class="gui-flex gui-columns">
						<view class="demo-auto-width gui-bg-gray gui-color-gray gui-text-small">自动宽度元素</view>
						<view class="demo-auto-width gui-bg-gray gui-color-gray gui-text-small">自动宽度元素</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部插槽实现 -->
		<!-- 边框使用 style 实现，可以根据自己项目实际情况修改 -->
		<view slot="gFooter" class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end" 
		style="height:150rpx;">
			<view class="gui-footer-icon-buttons" @tap="navChang(0)">
				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
				:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe63b;</text>
				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
				:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
			</view>
			<view class="gui-footer-icon-buttons" @tap="navChang(1)">
				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
				:class="[navCurrent == 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="navChang(3)">
				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe626;</text>
				<text class="gui-footer-icon-buttons-text gui-block-text" 
				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">客服</text>
			</view>
			<view class="gui-footer-icon-buttons" @tap="navChang(4)">
				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
				:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
				<text class="gui-footer-icon-buttons-text gui-block-text" 
				:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
			</view>
			<!-- 使用定位方式实现凸出按钮 -->
			<view class="gui-footer-buttons-ab" @tap="navChang(2)">
				<text class="gui-footer-buttons-ab-icon gui-block-text gui-icons gui-bold" 
				:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe60b;</text>
				<text class="gui-footer-icon-buttons-text gui-block-text" 
				:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">合小记</text>
			</view>
		</view>
	</gui-page>
</template>
<script>
export default {
	data() {
		return {
			navCurrent: 0
		}
	},
	onShow() {
		this.navCurrent = 0;
	},
	methods: {
		navChang : function (index) {
			this.navCurrent = index;
			
			if (index == 2) {
				this.Dever.location('index/list');
			}
		}
	}
}
</script>
<style>
.demo{width:210rpx; height:88rpx; line-height:88rpx; text-align:center; margin:10rpx;}
.demo-auto-width{height:88rpx; line-height:88rpx; text-align:center; margin:10rpx;}
.gui-text-small{font-size:20rpx;}
.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>