<template>
	<view>
		<view class="width100 height120 headsbg backcorfff" @click="jumpupadess('add')">
			<view class="height20"></view>
			<view class="width100 fotct font18 fcor666">自助餐厅,不支持外卖</view>
			<image src="../static/imgs/buffstu.png" mode="widthFix" class="width100"></image>
		</view>

		<view class="input-box mart20 width90">
			<input placeholder="请输入关键字搜索" placeholder-style="color:#c0c0c0;" />
			<view class="icon search"></view>
		</view>

		<view class="mart20 width80 alijusstart fotct marb20">
			<view class="width50 fcor333 font16" :class="collection == 1?'colorc8':'fcor333'" @click="changestu(1)">附近餐厅
				<text class="bufbtn" :class="collection == 1?'backgrdc8':'backcor33'">97</text>
			</view>
			<view class="width50 fcor333 font16" :class="collection == 2?'colorc8':'fcor333'" @click="changestu(2)">
				收藏的餐厅
				<text class="bufbtn" :class="collection == 2?'backgrdc8':'backcor33'">0</text>
			</view>
		</view>

		<view class="mart10 width90 height90 borderrs backcorfff" v-for="(item,index) in kcfShopList" :key="index"
			@click="jumpmenulist()">
			<view class="paddtop10 width90 alijusstart">
				<view class="width80p font16 fcor333 fontwig6">时代天街</view>
				<view class="width20 fotrt">
					<!-- <image mode="widthFix" class="icon20" src="../static/imgs/nocollection.png"></image> -->
					<image mode="widthFix" class="icon20" src="../static/imgs/collection.png"></image>
				</view>
			</view>
			<view class="width90 mart5 font12 fcor999">前门西大街正阳市场1号楼中部</view>
			<view class="width90 mart5 alijusstart">
				<image class="icon15" src="../static/imgs/location.png" mode="widthFix"></image>
				<text class="margle font14 fcor666">0.2km</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collection: 1, //是否收藏
				kcfShopList: [1, 2, 3, 4, 5, 6, 7, 8, 9] //肯德基列表
			}
		},
		methods: {
			//更换状态
			changestu(item) {
				this.collection = item;
			},
			//跳转菜单
			jumpmenulist() {
				uni.navigateTo({
					url: '../menu-list/menu-list'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.headsbg {
		border-radius: 0 0 30px 30px;
	}

	.colorc8 {
		color: #c82b1f;
	}

	.backgrdc8 {
		background-color: #c82b1f;
	}

	.borderrs {
		border-radius: 10px;
	}


	.bufbtn {
		padding-left: 7px;
		padding-right: 7px;
		padding-top: 1px;
		padding-bottom: 1px;
		font-size: 12px;
		color: #ffffff;
		border-radius: 15px;
	}

	.input-box {
		height: 70rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		position: relative;
		display: flex;
		align-items: center;

		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			width: 60upx;
			height: 60upx;
			font-size: 34upx;
			color: #c0c0c0;
		}

		input {
			padding-left: 28upx;
			height: 28upx;
			font-size: 28upx;
			width: 100%;
		}
	}
</style>
