xukou-ticket-wx/pages/index/index.vue

<template>
	<view class="container">
		<image class="logo" mode="widthFix" src="/static/eat-type-bg.png"></image>
		<view class="content">
			<view class="eat-type-list">
				<view class="item" @click="toUrl(1)">
					<view class="title">自助点餐·到店自取</view>
					<view class="tip"> 5折起 </view>
					<image src="/static/eat-type-item-01.png" alt="" class="img">
						<view class="btn">立即点餐(堂食/外带)</view><!---->
				</view>
				<view class="item"  @click="toUrl(2)">
					<view class="title">外卖优惠点餐</view>
					<view class="tip">送到家</view>
					<image src="/static/eat-type-item-03.png" class="img">
						<view class="btn">立即点餐</view>
				</view>
			</view>
			<view class="customer-service-order-list">
				<view class="csrl-item order" @click="toUrl(3)">
					<view class="icon">
						<image src="/static/icon1.png"></image>
					</view>
					<view>
						<view class="title">我的订单</view>
						<view class="text">查看订单进度</view>
					</view>
				</view>
				<view class="csrl-item customer-service">
					<view class="icon">
						<image src="/static/icon3.png"></image>
					</view>
					<view>

						<view class="title">在线客服</view>
						<view class="text">9:00 ~ 23:00</view>
					</view>
				</view>
			</view>
			<view class="my-card"  @click="toUrl(5)">
				<image class="icon" src="/static/icon2.png"></image>
				<view class="title">兑换券兑换入口（我的卡包）</view>
			</view>
			<view class="tip"> 本产品为第三方代点餐/代配送服务！ <br> 即第三方代点餐，一切商业行为与肯德基无关。 </view>
		</view>
		<bindMobile ></bindMobile>
	</view>
</template>

<script>
	import bindMobile from "@/components/bind-mobile.vue"
	export default{
		components:{
			bindMobile
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			toUrl(type){
				if(type===1){
					uni.navigateTo({
						url:'/pages/restaurant/select'
					})
				}else if(type===2){
					uni.navigateTo({
						url:'/pages/address/list'
					})
				}else if(type===3){
					uni.navigateTo({
						url:'/pages/order/list'
					})
				}else if(type===5){
					uni.navigateTo({
						url:'/pages/restaurant/card'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		background: #f0f0f0;
		font-family: Avenir, Helvetica, Arial, sans-serif;
		.logo {
			width: 100%;
		}

		.content {
			position: absolute;
			bottom: 0;
			width: 100%;

			.eat-type-list {
				padding-left: 32rpx;
				padding-right: 32rpx;
				display: flex;
				justify-content: space-between;

				.item {
					width: 48%;
					background: #fff;
					box-shadow: 4rpx 4rpx 10rpx 0 rgba(0, 0, 0, .1);
					border-radius: 40rpx;
					text-align: center;
					box-sizing: border-box;

					.title {
						margin-top: 30rpx;
						width: 100%;
						text-align: center;
						font-size: 32rpx;
						font-weight: 600;
						color: rgba(0, 0, 0, .9) !important;
					}

					.tip {
						margin-top: 20rpx;
						margin-bottom: 0;
						width: 100%;
						text-align: center;
						font-size: 60rpx;
						font-weight: 600;
						color: #d90209;
					}

					.img {
						margin-top: 45rpx;
						width: 240rpx;
						height: 140rpx;
					}

					.btn {
						margin: 0 auto;
						margin-top: 36rpx;
						margin-bottom: 36rpx;
						width: 85%;
						text-align: center;
						height: 60rpx;
						line-height: 60rpx;
						background: #d90209;
						border-radius: 40rpx;
						font-size: 24rpx;
						color: #fff;
					}
				}
			}

			.customer-service-order-list {
				display: flex;
				margin: 32rpx;
				// height: 170rpx;
				background: #fff;
				box-shadow: 4rpx 4rpx 10rpx 0 rgba(0, 0, 0, .1);
				border-radius: 32rpx;

				.csrl-item {
					flex: 1;
					border-right: 1rpx solid rgba(0, 0, 0, .15);
					display: flex;
					justify-content: center;
					padding: 32rpx 0;

					.icon {
						margin-right: 20rpx;

						image {
							width: 44rpx;
							height: 44rpx;
						}
					}

					.title {
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(0, 0, 0, .9) !important;
					}

					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, .5);
						margin-top: 5rpx;
					}
				}

				.customer-service {
					border-right: none;
				}
			}

			.my-card {
				display: flex;
				justify-content: center;
				margin: 0 auto;
				margin: 32rpx;
				padding: 16rpx;
				background: #fff;
				box-shadow: 4rpx 4rpx 10rpx 0 rgba(0, 0, 0, .1);
				border-radius: 32rpx;
				align-items: center;

				.icon {
					margin-right: 20rpx;
					width: 44rpx;
					height: 44rpx;
				}

				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: rgba(0, 0, 0, .9) !important;
				}
			}

			.tip {
				text-align: center;
				line-height: 32rpx;
				font-size: 24rpx;
				margin-bottom: 32rpx;
				color: rgba(0, 0, 0, .3);
				margin-top: 32rpx;
			}
		}
	}
</style>