{%#frame(frame.htm)%}
{%&title:首页%}
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/particulars.css">
<!--<script>
	$(function () {
		countTime();
	})

    function countTime() {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var endDate = new Date("2023-02-02 0:0:0");
        var end = endDate.getTime();
        //获取截止时间和当前时间的时间差
        var leftTime = end - now;
        //定义变量 d,h,m,s分别保存天数，小时，分钟，秒
        var d, h, m, s;
        //判断剩余天数，时，分，秒
        if (leftTime >= 0) {
            d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
            h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
            m = Math.floor(leftTime / 1000 / 60 % 60);
            s = Math.floor(leftTime / 1000 % 60);
        }
        //将时间赋值到div中
        document.getElementById("day").innerHTML = d + "天";
        document.getElementById("hour").innerHTML = h + "时";
        document.getElementById("minute").innerHTML = m + "分";
        document.getElementById("second").innerHTML = s + "秒";
        //递归每秒调用countTime方法，显示动态时间效果
        setTimeout(countTime, 1000);

    }

</script>-->
<div>
	<span id="day"></span>
	<span id="hour"></span>
	<span id="minute"></span>
	<span id="second"></span>
</div>
<!-- 轮播图 -->
<div class="product">
	<div class="swiper-container container_dd">
		<div class="swiper-wrapper">
			{%#bind(bannerlist,@bannerlist)%}
			{%&bannerlist:
			<div class="swiper-slide"><img src="{*Pic}" alt=""></div>
			%}
			<!--<div class="swiper-slide"><img src="images/pic06.png" alt=""></div>
			<div class="swiper-slide"><img src="images/pic06.png" alt=""></div>
			<div class="swiper-slide"><img src="images/pic06.png" alt=""></div>-->
		</div>
		<!-- 分页器 -->
		<div class="swiper-pagination"></div>
	</div>
</div>
<!-- 推荐商品 -->
<div class="row-a1">
	<div class="a1_wrap wrap">
		<div class="a1_box">
			<div class="a1_tit">
				<div class="" style="text-align: center;">
					精品推荐
				</div>
				<div class="">
					<!--为你推荐最好最新的商品-->
				</div>
			</div>
			
		</div>

		<div class="a1_main" style=" padding-bottom: 12px;">



			<div class="swiper mySwiper">
				<ul class="swiper-wrapper">
					{%#bind(goodsList,@goodsList)%}
					{%&goodsList:
					<li class="swiper-slide">
						<a href="../cn/goods/goods-view?GoodsId={*GoodsId}">
							<div class="a1_on">
								<div class="a1_img" style="position:relative">
									<img src="{*Pic}" alt=""  onerror="javascript:this.src='../../cn/images/error.png';">>
									<div style="width: 26px; height: 26px; border: 1px solid #bb1c20; color: #bb1c20; line-height: 26px; text-align: center; position: absolute; top: 6px; right: 32px; border-radius: 3px; ">{*TagName}</div>
								</div>
								<div class="">
									<p style="display: inline-block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis;">{*GoodsName}</p>
									<p>{*CAS}</p>
									<p style="display: inline-block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis;">{*MetaKeywords}</p>
								</div>
							</div>
						</a>
					</li>
					%}
				</ul>
			</div>
			<p style=" text-align: center;"><a href="goods/new-goodslist"><span style="border: 1px solid #ececec; padding: 8px 5px; ">查看更多</span></a></p>
		</div>
	</div>
</div>


<!-- 我们的服务 -->

<div class="row-a1">
	<div class="a1_wrap wrap">
		<div class="a1_box">
			<div class="a1_tit">
				<div class="" style="text-align: center;">
					团购专区
				</div>
				<div class="">
					<!--为你推荐最好最新的商品-->
				</div>
			</div>

		</div>

		<div class="a1_main" style=" padding-bottom: 12px;">
			<ul>
				{%#bind(grouplist,@grouplist)%}
				{%&grouplist:
				<li>
					<a href="javasrcipt:;" onclick="linkstst({*GoodsId})" style="cursor:pointer">
					
							<div class="a1_on">
								<div class="a1_img" style="position:relative">
									<img src="{*Pic}" alt="" >
									<div style="width: 26px; height: 26px; border: 1px solid #bb1c20; color: #bb1c20; line-height: 26px; text-align: center; position: absolute; top: 6px; right: 32px; border-radius: 3px; ">{*TagName}</div>
								</div>
								<div class="">
									<p style="display: inline-block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis;">{*GoodsName}</p>
									<p>{*CAS}</p>
									<p style="display: inline-block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis;">{*MetaKeywords}</p>
								</div>
							</div>
						</a>
				</li>
				%}
			</ul>
			<p style=" text-align: center;"><a href="goods/new-goodslist"><span style="border: 1px solid #ececec; padding: 8px 5px; ">查看更多</span></a></p>
		</div>
	</div>
</div>


<div class="row-a2" style="display:none">
	<div class="a2_wrap wrap">
		<div class="a1_box">
			<div class="a1_tit">
				<div class="">
					团购专区
				</div>
				<!-- <div class="">
						为你提供便捷优质的服务
					</div> -->
			</div>
		</div>
		<div class="a2_main">
			<div class="mainul">
				<div class="maintit">
					<h1 style="margin-right: 52%; ">末班车</h1>
					<p>
						<!--<img src="./images/indexri1.png" alt="">-->
					<a href="goods/group-purchase?GroupType=2">更多>></a>
					</p>
				</div>
				<ul>
					{%#bind(lastlist,@lastlist)%}
					{%&lastlist:
					<li onclick="link({*GoodsId})" style="cursor:pointer">
						<div class="mainimg">
							<img src="{*Pic}" alt="" >
						</div>
						<div class="maintxt">
							<p  class="ellipsis">{*GoodsName}</p>
							<p>仅剩{*shengyu}个名额</p>
							<p>
								<span>团购价￥{*pPrice}</span>
								<span style="text-decoration: line-through; text-decoration-color: #e2231a;">￥{*Price}</span>
							</p>
						</div>
					</li>
					%}

				</ul>
			</div>
			<div class="mainul">
				<div class="maintit">
					<h1 style="margin-right: 60%; ">秒杀</h1>
					<p>
						<!--<img src="./images/indexri1.png" alt="">-->
						<a href="goods/group-purchase1?GroupType=1">更多>></a>
					</p>
					<!--<div class="mainle">
		<h3>距结束</h3>
		<span>00</span>
		<h3>:</h3>
		<span>24</span>
		<h3>:</h3>
		<span>44</span>
	</div>-->
				</div>
				<ul class="seckill">

					{%#bind(miaoshalist,@miaoshalist)%}
					{%&miaoshalist:
					<li onclick="linksto({*GoodsId})" style="cursor:pointer">
						<div class="maintxt">
							<p  class="ellipsis">{*GoodsName}</p>
							<p></p>
							<p>
								<span>秒杀价￥{*pPrice}</span>
								<span>原价<em style="text-decoration: line-through; text-decoration-color: #e2231a;">￥{*Price}</em></span>
							</p>
						</div>
						<div class="mainimg">
							<img src="../../cn/images/error.png" alt="">
						</div>
					</li>
					%}

					<!--<li>
						<div class="maintxt">
							<p>2,4,6-三异丙基苯基溴化镁</p>
							<p></p>
							<p>
								<span>秒杀价￥749.00</span>
								<span>￥949.00</span>
							</p>
						</div>
						<div class="mainimg">
							<img src="../images/jiyin_01.png" alt="">
						</div>
					</li>
					<li>
						<div class="maintxt">
							<p>3,5-双(三氟甲基)苯基溴化镁</p>
							<p></p>
							<p>
								<span>团购价￥749.00</span>
								<span>￥949.00</span>
							</p>
						</div>
						<div class="mainimg">
							<img src="../images/jiyin_01.png" alt="">
						</div>
					</li>-->
				</ul>
			</div>
			<div class="mainul">
				<div class="maintit">
					<h1 style="margin-right: 60%; ">新团</h1>
					<p>
						<!--<img src="./images/indexri1.png" alt="">-->
						<a href="goods/group-purchase">更多>></a>
					</p>
				</div>
				<ul class="new-regiment">
					{%#bind(grouplist,@grouplist)%}
					{%&grouplist:
					<li onclick="linkstst({*GoodsId})" style="cursor:pointer">
						<div class="mainimg">
							<img src="{*Pic}" alt="">
						</div>
						<div class="maintxt">
							<p><span  class="ellipsis" style="width:180px">{*GoodsName}</span></p>
							<p></p>
							<p>
								<span>团购价￥{*pPrice}</span>
								<span><em style="text-decoration: line-through; text-decoration-color: #e2231a;">￥{*Price}</em></span>
							</p>
						</div>
					</li>
					%}
				</ul>
			</div>
			<div class="mainul">
				<div class="maintit">
					<h1 style="margin-right: 52%; ">排行榜</h1>
					<p>
						<!--<img src="./images/indexri1.png" alt="">-->
						<a href="goods/group-purchases">更多>></a>
					</p>
				</div>
				<ul class="ranking">
					{%#bind(goodsIdList,@goodsIdList)%}
					{%&goodsIdList:
					<li  onclick="linktts({*GoodsId})" style="cursor:pointer">
						<div class="maintxt">
							<p style="display: flex;"><span id="{*GoodsId}">1</span> <span class="ellipsis" style="width: 223px;">{*GoodsName}</span> </p>
							<p>{*Quantitys}</p>
						</div>
					</li>
					%}

				</ul>
			</div>
		</div>
	</div>
</div>

<div class="about-us">
	<!-- <img src="./images/indexbj1.jpg" alt=""> -->

	<div class="about-box wrap">
		<p>关于我们</p>
		<p>上海凯米莱铂生物科技有限公司</p>
		<p>我们致力于实验室专业外包服务，您可依赖的精细化学品供应商。</p>
		<div class="about-boxbtn"  onclick="window.location='{~../content/aboutus}'" style="cursor: pointer;">
			<span><a href="content/aboutus" style="color: #ffffff">了解详情</a></span>
			<img src="../cn/images/fixation_05.png" alt="">
		</div>
	</div>

</div>
<div class="customized">
	<!-- <img src="./images/indexbj2.jpg" alt=""> -->
	<div class="customi-box wrap">
		<div class="a1_box">
			<div class="a1_tit">
				<div class="">高端定制</div>
				<div class="">我们致力于实验室专业外包服务，您可依赖的精细化学品供应商</div>
			</div>
		</div>

		<ul>
			<li>
				<img src="./images/gaoduan1.jpg" alt="">
				<p>定制优势</p>
				<p>一流的研发团队，数十位博导组成的技术专家团，注定了凯米莱铂定制业务的高端技术起点！</p>
			</li>
			<li>
				<img src="./images/gaoduan2.jpg" alt="">
				<p>核心技术</p>
				<p>高压科学与技术、低温系统与技术、连续流技术、光电合成技术。</p>
			</li>
			<li>
				<img src="./images/gaoduan3.jpg" alt="">
				<p>核心产品</p>
				<p>催化剂及配体，药物中间体，同位素化合物，标准品定制。</p>
			</li>
		</ul>
		<div class="custobtn">定制询单</div>
	</div>
</div>

<div class="hide_shadow" style="display: none">
	<div class="load_form">
		<div class="head">
			<div>定制询单</div>
			<div class="cloen"><img src="./images/clone_01.png" alt="" /></div>
		</div>
		<div class="sbuimt_form">
			<form class="layui-form" action="">
				<ul class="layui_ul">
					<li>
						<div><span>公司名称</span><i>*</i></div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="text"
									   name="company" id="company"
									   required
									   lay-verify="required"
									   autocomplete="off"
									   class="layui-input" />
							</div>
						</div>
					</li>
					<li>
						<div><span>联系人</span><i>*</i></div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="text"
									   name="fullname" id="fullname"
									   required
									   lay-verify="required"
									   autocomplete="off"
									   class="layui-input" />
							</div>
						</div>
					</li>
					<li>
						<div><span>手机</span><i>*</i></div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="text"
									   name="mobile" id="mobile"
									   required
									   lay-verify="required"
									   autocomplete="off"
									   class="layui-input" />
							</div>
						</div>
					</li>
					<li>
						<div><span>公司地址</span><i>*</i></div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="text"
									   name="Address" id="Address"
									   required
									   lay-verify="required"
									   autocomplete="off"
									   class="layui-input" />
							</div>
						</div>
					</li>
					<li>
						<div><span>E-mail</span><i>*</i></div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="text"
									   name="email" id="email"
									   required
									   lay-verify="required"
									   autocomplete="off"
									   class="layui-input" />
							</div>
						</div>
					</li>
					<li>
						<div><span>定制描述</span><i>*</i></div>
						<!--<div class="layui-form-item" style="width: 87%;">
		<div class="layui-input-block" style="width: 100%;">
			<textarea type="text"
					  name="Description" id="Description"
					  required
					  lay-verify="required"
					  autocomplete="off"
					  class="layui-input" style="width: 100%;"></textarea>
		</div>
	</div>-->
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="text"
									   name="Description" id="Description"
									   required
									   lay-verify="required"
									   autocomplete="off"
									   class="layui-input" />
							</div>
						</div>
					</li>
				</ul>
				<div class="subimt_ff">
					<button class="layui-btn" lay-submit lay-filter="formDemo" id="submit" type="button">
						提交
					</button>
				</div>
			</form>
		</div>
	</div>
</div>


<script>

    $('.nav_menu .nav_wrap ul li').eq(1).addClass('showlia').siblings().removeClass('showlia');
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 4,
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
	});



	


	function link(id) {
        window.location = "{%#root%}cn/goods/group-purchase-details?GoodsId=" + id;
	}
    function linktts(id) {
        window.location = "{%#root%}cn/goods/goods-view?GoodsId=" + id;
    }
	function linkstst(id) {
        window.location = "{%#root%}cn/goods/group-purchase-details2?GoodsId=" + id;
	}
function linksto(id) {
        window.location = "{%#root%}cn/goods/group-purchase-details1?GoodsId=" + id;
	}
	$(".custobtn").click(function () {
		$(".hide_shadow").show();
	})

    $(".cloen").click(function () {
        $(".hide_shadow").hide();
	})
	layui.use(['form'], function (args) {
		var form = layui.form;
		form.on('submit(formDemo)', function (data) {
			xmlsRequest.onOk = function (res) {
				xmlsRequest.alert("提交成功");
                $(".hide_shadow").hide();
			}
            data.field["method"] = "XunDan";
            console.log(data.field);
			xmlsRequest.post(data.field);
			return false
		})
	})

	$(function () {
		let w = window.screen.width;
		if (w > 768) {
			var swiper = new Swiper('.swiper-container-ff', {
				slidesPerView: 4,
				direction: getDirection(),
				slidesPerGroup: 1,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				on: {
					resize: function () {
						swiper.changeDirection(getDirection());
					}
				}
			});
		} else {
			var swiper = new Swiper('.swiper-container-ff', {
				slidesPerView: 2,
				direction: getDirection(),
				slidesPerGroup: 1,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				on: {
					resize: function () {
						swiper.changeDirection(getDirection());
					}
				}
			});
		}
		var data = "{%@goodsIdList%}"
		var data = $(".ranking").find("li .maintxt p > span:nth-child(1)");
		data.each(function (index, item) {
			var id = $(".ranking").find("li .maintxt p > span:nth-child(1)").eq(index).attr("id");
            $("#"+id).html(index+1)
		})
		function getDirection() {
			var windowWidth = window.innerWidth;
			var direction = window.innerWidth <= 65 ? 'vertical' : 'horizontal';

			return direction;
		}


		$('.nav_menu ul li').click(function () {
			$(this).addClass('current').siblings().removeClass('current')
		})


		//$('.bot-navigation>ul>li:nth-child(2)').stop().mouseover(function () {
		//	$('.phone_box').children().eq(1).stop().animate({
		//		"left": "-200px"
		//	})
		//})

		//$('.bot-navigation>ul>li:nth-child(2)').stop().mouseout(function () {
		//	$('.phone_box').children().eq(1).stop().animate({
		//		"left": "65px"
		//	})
		//})

	})
</script>