HDhotel/pages/index/index.vue

<template>
	<view class="pages">
		<view class="index">
			<image src="/static/img/index-banner.png" class="full-img" mode="widthFix"></image>
			<view class="operating wrap">
				
				<view class="operating-item">
					<view class="operating-item-text">
						<view class="operating-item-text-til">订单核销</view>
						<view class="operating-item-text-subtil">客户入住核销蝴蝶券</view>
						<view class="f-tac">
							<navigator class="operating-item-link" url="/pages/writeoff/writeoff" open-type="navigate">进入</navigator>							
						</view>						
					</view>
					<view class="operating-item-icon">
						<i class="iconfont iconhexiao"></i>						
					</view>																			
				</view>
				<view class="operating-item">
					<view class="operating-item-text">
						<view class="operating-item-text-til">房间确认</view>
						<view class="operating-item-text-subtil">确认是否有房间</view>
						<view class="f-tac">
							<navigator class="operating-item-link" url="/pages/roomconfirm/roomconfirm" open-type="navigate">进入</navigator>							
						</view>						
					</view>
					<view class="operating-item-icon">
						<i class="iconfont iconqueren"></i>						
					</view>																			
				</view>
				<!-- <view class="operating-item">
					<view class="operating-item-text">
						<view class="operating-item-text-til">销售统计</view>
						<view class="operating-item-text-subtil">查询销售数据</view>
						<view class="f-tac">
							<navigator class="operating-item-link" url="/" open-type="navigate">进入</navigator>							
						</view>						
					</view>
					<view class="operating-item-icon">
						<i class="iconfont icontongji"></i>						
					</view>																			
				</view> -->
				<!-- <view class="operating-item">
					<view class="operating-item-text">
						<view class="operating-item-text-til">核销记录</view>
						<view class="operating-item-text-subtil">核销蝴蝶券记录</view>
						<view class="f-tac">
							<navigator class="operating-item-link" url="/" open-type="navigate">进入</navigator>							
						</view>						
					</view>
					<view class="operating-item-icon">
						<i class="iconfont iconlianluojilu"></i>						
					</view>																			
				</view> -->
				
			</view>
			<!-- operating end -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style  lang="scss" scoped>

.operating{margin-top: $uni-spacing-col-lg;}
.operating-item{display: flex;margin-bottom: 24rpx;align-items: center;border-radius: $uni-border-radius-lg;background-color: #6e55da;padding: 30rpx 40rpx 25rpx;color: #fff;justify-content: space-between;}
.operating-item:nth-of-type(2){background-color: #f96e0e;}
.operating-item:nth-of-type(2) .operating-item-link{color: #f96e0e;}
.operating-item:nth-of-type(3){background-color: #0e95f9;}
.operating-item:nth-of-type(3) .operating-item-link{color: #0e95f9;}
.operating-item:nth-of-type(4){background-color: #fd1d79;}
.operating-item:nth-of-type(4) .operating-item-link{color: #fd1d79;}
.operating-item-text-til{font-size: $uni-font-size-lg;margin-bottom: $uni-spacing-col-sm;}
.operating-item-link{display: inline-block;margin-top:25rpx;padding: 10rpx 65rpx;border-radius: 25rpx;line-height: 1;background-color: $uni-bg-color;color: #6e55da;text-align: center;}
.operating-item-icon{margin-right: 20rpx;}
.operating-item-icon .iconfont{font-size: 80rpx;opacity: 0.6;}
</style>