index.html 6.5 KB
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>星探推荐</title>
	<link rel="stylesheet" href="__TMPL__/public/assets/css/enjoyment.css">
	<link rel="stylesheet" href="__TMPL__/public/assets/css/Scout_index.css">
	<link rel="stylesheet" href="__TMPL__/public/assets/js/swiper4/swiper.min.css">
</head>

<body>
	<include file="public@header"/>
	<div class="banner">
		<volist name="coverImg" id="vo">
			<img src="{:cmf_get_image_url($vo.image)}" alt="">
		</volist>
	</div>
	<main>
		<div class="container">
			<!--旅行路线-->
			<div class="Product" id="travel">
				<div class="Spot_title clearfix">
					<div class="Spot_icon fl">
						<img src="__TMPL__/public/assets/starImg/aicon_74.png" alt="">
					</div>
					<div class="Spot_name fl">
						<div class="Spot_name_left fl">
							旅行
						</div>
						<div class="Spot_name_right fl">
							路线
						</div>
					</div>
					<div class="Spot_English_name fl">
						<p>Travel Product</p>
					</div>
				</div>
				<div class="Product_main">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<volist name="res_lylx" id="vo">
								<div class="swiper-slide">
									<div class="Product_item">
										<a href="/portal/scout/getTravelDetail?id={$vo.id}">
											<div class="Product_item_img">
												<img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
											</div>
											<div class="Product_item_Route">
												{$vo.post_title}
											</div>
										</a>
									</div>
								</div>
							</volist>
						</div>
					</div>
				</div>

				<div class="swiper-button-next swiper-button-white"></div>
				<div class="swiper-button-prev swiper-button-white"></div>
			</div>
			<!--地道风物-->
			<div class="Specialty" id="scenery">
				<div class="Spot_title clearfix">
					<div class="Spot_icon fl">
						<img src="__TMPL__/public/assets/starImg/aicon_75.png" alt="">
					</div>
					<div class="Spot_name fl">
						<div class="Spot_name_left fl">
							地道
						</div>
						<div class="Spot_name_right fl">
							风物
						</div>
					</div>
					<div class="Spot_English_name fl">
						<p>Local Specialty</p>
					</div>
				</div>
				<div class="Specialty_main">
					<div class="swiper-container swiper-no-swiping">
						<div class="swiper-wrapper">
							<volist name="res_ddfw" id="vo">
								<div class="swiper-slide">
									<div class="Specialty_item">
										<a href="/portal/scout/getSceneryDetail?id={$vo.id}">
											<div class="Specialty_item_img">
												<img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
											</div>
											<div class="Specialty_item_name">
												{$vo.post_title}
											</div>
											<div class="Specialty_item_price">¥{$vo.price}</div>
										</a>
									</div>
								</div>
							</volist>
						</div>
					</div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
			<!--创意设计-->
			<div class="Innovation" id="design">
				<div class="Spot_title clearfix">
					<div class="Spot_icon fl">
						<img src="__TMPL__/public/assets/starImg/aicon_76.png" alt="">
					</div>
					<div class="Spot_name fl">
						<div class="Spot_name_left fl">
							创意
						</div>
						<div class="Spot_name_right fl">
							设计
						</div>
					</div>
					<div class="Spot_English_name fl">
						<p>Innovation</p>
					</div>
				</div>

				<div class="Innovation_main">
					<div class="swiper-container swiper-no-swiping">
						<div class="swiper-wrapper">
							<volist name="res_cysj" id="vo">
								<div class="swiper-slide">
									<div class="Specialty_item">
										<a href="/portal/scout/getSceneryDetail?id={$vo.id}">
											<div class="Specialty_item_img">
												<img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
											</div>
											<div class="Specialty_item_name">
												{$vo.post_title}
											</div>
											<div class="Specialty_item_price">¥{$vo.price}</div>
										</a>
									</div>
								</div>
							</volist>
						</div>
					</div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
			<!--悦己悦人-->
			<div class="Lifestyle" id="like">
				<div class="Spot_title clearfix">
					<div class="Spot_icon fl">
						<img src="__TMPL__/public/assets/starImg/aicon_77.png" alt="">
					</div>
					<div class="Spot_name fl">
						<div class="Spot_name_left fl">
							悦己
						</div>
						<div class="Spot_name_right fl">
							悦人
						</div>
					</div>
					<div class="Spot_English_name fl">
						<p>Lifestyle</p>
					</div>
				</div>
				<div class="Lifestyle_main">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<volist name="res_yjyr" id="vo">
								<div class="swiper-slide">
									<div class="Lifestyle_item">
										<a href="/portal/scout/getSceneryDetail?id={$vo.id}">
											<div class="Lifestyle_item_img">
												<img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
											</div>
											<div class="Lifestyle_item_name">
												{$vo.post_title}
											</div>
											<div class="Lifestyle_item_price">¥{$vo.price}</div>
										</a>
									</div>
								</div>
							</volist>
						</div>
					</div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</div>
	</main>
	<include file="public@footer"/>
	<script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
	<script src="__TMPL__/public/assets/js/swiper4/swiper.min.js"></script>
	<script src="__TMPL__/public/assets/js/public.js"></script>
	<script>
		var swiper = new Swiper('.Product .swiper-container', {
			slidesPerView: 3,
			spaceBetween: 4,

			navigation: {
				nextEl: '.Product .swiper-button-next',
				prevEl: '.Product .swiper-button-prev',
			},
		});
		var swiper = new Swiper('.Specialty .swiper-container', {
			slidesPerView: 'auto',
			spaceBetween: 13,

			navigation: {
				nextEl: '.Specialty .swiper-button-next',
				prevEl: '.Specialty .swiper-button-prev',
			}
		});
		var swiper = new Swiper('.Innovation .swiper-container', {
			slidesPerView: 'auto',
			spaceBetween: 13,
			navigation: {
				nextEl: '.Innovation .swiper-button-next',
				prevEl: '.Innovation .swiper-button-prev',
			}
		});
		var swiper = new Swiper('.Lifestyle .swiper-container', {
			slidesPerView: 2,
			spaceBetween: 16,
			navigation: {
				nextEl: '.Lifestyle .swiper-button-next',
				prevEl: '.Lifestyle .swiper-button-prev',
			}
		});

	</script>
</body>

</html>