master

分支 (1)

管理

管理

master

wepApp
/
product_ext.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/hui.css" />
<style type="text/css">
	.gai{background: #333333;opacity: 0.1;height: 2000px;width: 100%;}
	.attr>div{border-top: 1px solid #999999;}
	.attribute{width: 30%;display: inline-block;padding: 0.2rem;}
	div.attr1 span{display: inline-block;line-height: 2.5rem;height: 2.5rem;padding-left: 1rem;padding-right: 1rem;border: 1px solid #999999;border-radius: 1.5rem;font-size: 1.2rem;margin-right: 2rem;margin-left: 1rem;}
	.active{border-color: #DC143C!important;color: #DC143C!important;}
</style>
</head>
<body style="background: none;">
<div class="gai"></div>
<div id="info" style="position: fixed;bottom: -400px;background: #FFFFFF;width: 100%;z-index: 100000000000000;padding: 1rem;">
	<span class="HUI_Icons HUI_Icons_close" style="display: block;width: 15px;height: 15px;border: 1px solid #9E9E9E;border-radius: 8px;position: absolute;top: 30px;right: 40px;"></span>
	<div class="head">
		<div style="display: inline-block;vertical-align: top;">
			<img src="img/147186543099.png" style="width:150px"/>
		</div>
		<div style="display: inline-block;vertical-align: top;font-weight: bold;margin-left: 0.5rem;">
			<p class="price" style="margin-top: 2.5rem;font-size: 1.6rem;color: #ED2D22;">￥1299</p>
			<p class="attr1" style="margin-top: 0.5rem;font-size: 1.4rem;color: #000000;">星空灰</p>
			<p class="attr2" style="margin-top: 0.5rem;font-size: 1.4rem;color: #000000;">64G</p>
		</div>
	</div>
	<div class="attr">
		<div class="attr1">
			<div class="title" style="margin-bottom: 0.5rem;">
				颜色
			</div>
			<div class="value">
				<div class="attribute">
					<span class="active">星空灰</span>
				</div>
				<div class="attribute">
					<span>星空灰</span>
				</div>
				<div class="attribute">
					<span>星空灰</span>
				</div>
				<div class="attribute">
					<span>星空灰</span>
				</div>
				<div class="attribute">
					<span>星空灰</span>
				</div>
			</div>
		</div>
		<div class="attr1">
			<div class="title" style="margin-bottom: 0.5rem;">
				规格
			</div>
			<div class="value">
				<div class="attribute">
					<span class="active">32G</span>
				</div>
				<div class="attribute">
					<span>64G</span>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/hui.js"></script>
<script src="js/huiSlide.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function productAnimate() {
	hui('#info').animate({bottom:'0px',overflow:'hidden'},500,function(){});
}
</script>
</body>
</html>