<script setup>
	/**
	 * 线下店铺
	 */
	import {
		ref,
		reactive,
		getCurrentInstance,
		defineExpose,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'
	// 商品列表
	import productList from '@/components/shop/productList/productList'

	const {
		proxy
	} = getCurrentInstance()

	// 初始化
	function init() {
		// 
	}

	defineExpose({
		init,
	})
</script>

<template>
	<view class="header oh pt20 plr30 pb30 br20">
		<view class="location df aic">
			<uni-icons class="b" type="location" size="40rpx" />
			<view class="name thd">希岸酒店</view>
			<uni-icons type="right" />
			<view class="f1"></view>
		</view>

		<view class="rows mt20">
			<view class="searchBox rows f1 bfff bar">
				<input class="f1 mlr20" type="text" placeholder="请输入" />
				<view class="btn bar sm button plr20">搜索</view>
			</view>
			<uni-icons type="scan" size="60rpx" class="ml20" />
		</view>
	</view>

	<!-- 频道 -->
	<view class="channel bfff">
		<view class="item fmid fdc ptb30">
			<image class="image wh80 br10" src="/static/logo.png" mode="aspectFill" />
			<view class="name mt10 c333 f28">休闲娱乐</view>
		</view>
		<view class="item fmid fdc ptb30">
			<image class="image wh80 br10" src="/static/logo.png" mode="aspectFill" />
			<view class="name mt10 c333 f28">美食/堂食</view>
		</view>
		<view class="item fmid fdc ptb30">
			<image class="image wh80 br10" src="/static/logo.png" mode="aspectFill" />
			<view class="name mt10 c333 f28">酒店 | 民宿</view>
		</view>
	</view>

	<!-- 精品推荐 -->
	<view class="recommend">
		<view class="title ptb15 plr30 c333 f44 bfff">精品推荐</view>
		<view class="list mt30 mb80 plr30">
			<view class="item bfff" v-for="(item,index) in 10" :key="index">
				<view class="icon">
					<image class="image" src="/static/logo.png" mode="aspectFill" />
				</view>

				<view class="info ptb10 plr10">
					<view class="name f32">项目名称</view>
					<view class="price df aife">
						<view class="now cFF4242">
							<text class="f24">￥</text>
							<text class="f30 b">100.00</text>
						</view>
						<view class="old c999 f24 mlr10">
							<text class="">￥</text>
							<text class="">200</text>
						</view>
						<view class="discount plr10 cFF4242 f24 br4">5.0折</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 顶部
	.header {
		background-color: rgb(255, 155, 25);

		.searchBox {
			padding: 5rpx;

			.button {
				background-color: rgb(255, 155, 25);
			}
		}
	}

	// 频道
	.channel {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	// 推荐
	.recommend {

		// 商品列表
		.list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 15rpx;

			 .item {
				border-radius: 20rpx;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

				// 展示图
				.image {
					width: 100%;
					height: 300rpx;
					border-radius: 20rpx 20rpx 0 0;
				}

				// 原价
				.old {
					text-decoration: line-through;
				}

				// 折扣
				.discount {
					background-color: rgb(255, 241, 240);
				}
			}
		}
	}
</style>