<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>首页 | 小毛虫生鲜</title>
<link rel="stylesheet" type="text/css" href="./css/basic.css">
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<!-- <link rel="stylesheet" type="text/css" href="./css/main.css"> -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="./js/slide.js"></script> -->
</head>
<body>
<div class="outside header_con">
<div class="header">
<div class="welcome fl">欢迎来到小毛虫生鲜!
<a href="http://127.0.0.1:3001/adminlogin.html">[管理员登录]</a>
</div>
<div class="fr">
<div class="login_btn fl">
<a href="/login.html">登录</a>
<span>|</span>
<a href="/register.html">注册</a>
</div>
<div class="user_link fl">
<span>|</span>
<a href="index.html">首页</a>
<span>|</span>
<a href="user_info.html">用户中心</a>
<span>|</span>
<a href="mycart.html">我的购物车</a>
</div>
</div>
</div>
</div>
<div class="outside">
<div class="search_bar clearfix">
<a href="/" class="logo fl"><img src="./images/base-img/logo.jpg"></a>
<div class="search_con fl">
<input type="text" class="input_text fl" value="" name="q" placeholder="搜索商品">
<input type="button" class="input_btn fr" name="" value="搜索">
</div>
<div class="guest_cart fr">
<a href="mycart.html" class="cart_name fl">我的购物车</a>
<div class="goods_count fl" id="show_count">0</div>
</div>
</div>
</div>
<!-- 中间样式 -->
<div class="outside navbar_con">
<div class="navbar">
<h1 class="fl" style="width: 20%;text-align: center;">全部商品分类</h1>
<!-- <ul class="navlist fl"> -->
</ul>
</div>
</div>
<div class="outside">
<div class="center_con clearfix">
<ul class="subnav ">
<li><a href="#model01" class="fruit">新鲜水果</a></li>
<li><a href="#model02" class="seafood">海鲜水产</a></li>
<li><a href="#model03" class="meet">猪牛羊肉</a></li>
<li><a href="#model04" class="egg">禽类蛋品</a></li>
<li><a href="#model05" class="vegetables">新鲜蔬菜</a></li>
<li><a href="#model06" class="ice">速冻食品</a></li>
</ul>
<div class="slide ">
<ul class="slide_pics">
<li style="left: 0px;"><img src="./images/index-img/slide.jpg" alt="幻灯片"></li>
<li style="left: -80%;"><img src="./images/index-img/slide02.jpg" alt="幻灯片"></li>
<li style="left: -551.247px;"><img src="./images/index-img/slide03.jpg" alt="幻灯片"></li>
<li style="left: -208.753px;"><img src="./images/index-img/slide04.jpg" alt="幻灯片"></li>
</ul>
<div class="prev"></div>
<div class="next"></div>
<ul class="points">
</ul>
</div>
</div>
</div>
<div class="outside">
<!-- 水果产品 -->
<div class="list_model">
<div class="list_title clearfix">
<h3 class="fl" id="model01">新鲜水果</h3>
<div class="subtitle fl">
<span>|</span>
<a href="#">进口水果</a>
</div>
<a href="/goods_list.html?lid=1" class="goods_more fr" id="fruit_more">查看更多 ></a>
</div>
<div class="goods_con clearfix">
<div class="goods_banner fl"><img src="./images/index-img/friut.jpg"></div>
<ul class="goods_list fl" id="fruit">
<!-- 动态数据存放处 -->
</ul>
</div>
</div>
<!-- 海鲜产品 -->
<div class="list_model">
<div class="list_title clearfix">
<h3 class="fl" id="model02">海鲜水产</h3>
<div class="subtitle fl">
<span>|</span>
<a href="#">海鲜盛宴</a>
</div>
<a href="/goods_list.html?lid=2" class="goods_more fr">查看更多 ></a>
</div>
<div class="goods_con clearfix">
<div class="goods_banner fl"><img src="./images/index-img/fish.jpg"></div>
<ul class="goods_list fl" id="fish">
<!-- 动态数据存放处 -->
</ul>
</div>
</div>
<!-- 肉类食品 -->
<div class="list_model">
<div class="list_title clearfix">
<h3 class="fl" id="model03">猪牛羊肉</h3>
<div class="subtitle fl">
<span>|</span>
<a href="#">新鲜的肉类</a>
</div>
<a href="/goods_list.html?lid=3" class="goods_more fr">查看更多 ></a>
</div>
<div class="goods_con clearfix">
<div class="goods_banner fl"><img src="./images/index-img/meat.jpg"></div>
<ul class="goods_list fl" id="meat">
<!-- 动态数据存放处 -->
</ul>
</div>
</div>
<!-- 禽类蛋品 -->
<div class="list_model">
<div class="list_title clearfix">
<h3 class="fl" id="model04">禽类蛋品</h3>
<div class="subtitle fl">
<span>|</span>
<a href="#">营养蛋类</a>
</div>
<a href="/goods_list.html?lid=4" class="goods_more fr">查看更多 ></a>
</div>
<div class="goods_con clearfix">
<div class="goods_banner fl"><img src="./images/index-img/egg.jpg"></div>
<ul class="goods_list fl" id="egg">
<!-- 动态数据存放处 -->
</ul>
</div>
</div>
<!-- 蔬菜模块 -->
<div class="list_model">
<div class="list_title clearfix">
<h3 class="fl" id="model05">新鲜蔬菜</h3>
<div class="subtitle fl">
<span>|</span>
<a href="#">新鲜蔬菜</a>
</div>
<a href="/goods_list.html?lid=5" class="goods_more fr">查看更多 ></a>
</div>
<div class="goods_con clearfix">
<div class="goods_banner fl"><img src="./images/index-img/vegetable.jpg"></div>
<ul class="goods_list fl" id="vegetable">
<!-- 动态数据存放处 -->
</ul>
</div>
</div>
<!-- 冷冻食品 -->
<div class="list_model">
<div class="list_title clearfix">
<h3 class="fl" id="model06">速冻食品</h3>
<div class="subtitle fl">
<span>|</span>
<a href="#">速冻食品</a>
</div>
<a href="/goods_list.html?lid=6" class="goods_more fr">查看更多 ></a>
</div>
<div class="goods_con clearfix">
<div class="goods_banner fl"><img src="./images/index-img/icecream.jpg"></div>
<ul class="goods_list fl" id="icecream">
<!-- 动态数据存放处 -->
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="./js/slide.js"></script>
<!-- 底部 -->
<div class="footer no-mp">
<div class="foot_link">
<a href="https://github.com/weilanhanf/daily_fresh_demo">关于我们</a>
<span>|</span>
<a href="https://www.cnblogs.com/welan/">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2020 大佬说的都队 All Rights Reserved</p>
<p>电话：17329410120 京ICP备123456789号</p>
</div>
<script type="text/javascript" src="./js/index.js"></script>
<script src="./js/out_login.js"></script>
<script src="./js/searchbar.js"></script>
</body>
JS代码介绍：
index.js是首页品种分类的数据请求（刚学前端时写的，还是用的模板字符串，学弟学妹要是拿的话最好优化一下，这种效率很低）
(function(){
// 发送ajax请求
$.ajax({
url:"http://127.0.0.1:3000/index",
type:"get",
// data，
dataType:"json"
})//return Promise
// open(result)
.then(function(result){
// 水果类
var html_fruit=``;
for(var i=0;i<=3;i++){
var p=result[i];
html_fruit+=` <li>
<h4><a href="${p.herf}">${p.title}</a></h4>
<a href="${p.herf}"><img src="${p.img_url}"></a>
<div class="prize"> ￥ ${p.price.toFixed(2)} </div>
</li>`
}
var li=document.querySelector("#fruit");
li.innerHTML=html_fruit;
// 海鲜类
var html_fish=``;
for(var i=4;i<=7;i++){
var p1=result[i];
html_fish+=` <li>
<h4><a href="${p1.herf}">${p1.title}</a></h4>
<a href="${p1.herf}"><img src="${p1.img_url}"></a>
<div class="prize"> ￥ ${p1.price.toFixed(2)} </div>
</li>`
}
var li1=document.querySelector("#fish");
li1.innerHTML=html_fish;
// 肉类
var html_meat=``;
for(var i=8;i<=11;i++){
var p2=result[i];
html_meat+=` <li>
<h4><a href="${p2.herf}">${p2.title}</a></h4>
<a href="${p2.herf}"><img src="${p2.img_url}"></a>
<div class="prize"> ￥ ${p2.price.toFixed(2)} </div>
</li>`
}
var li2=document.querySelector("#meat");
li2.innerHTML=html_meat;
// 禽蛋类
var html_egg=``;
for(var i=12;i<=15;i++){
var p3=result[i];
html_egg+=` <li>
<h4><a href="${p3.herf}">${p3.title}</a></h4>
<a href="${p3.herf}"><img src="${p3.img_url}"></a>
<div class="prize"> ￥ ${p3.price.toFixed(2)} </div>
</li>`
}
var li3=document.querySelector("#egg");
li3.innerHTML=html_egg;
// 蔬菜类
var html_vegetable=``;
for(var i=16;i<=19;i++){
var p4=result[i];
html_vegetable+=` <li>
<h4><a href="${p4.herf}">${p4.title}</a></h4>
<a href="${p4.herf}"><img src="${p4.img_url}"></a>
<div class="prize"> ￥ ${p4.price.toFixed(2)} </div>
</li>`
}
var li4=document.querySelector("#vegetable");
li4.innerHTML=html_vegetable;
// 冷冻类
var html_icecream=``;
for(var i=20;i<=23;i++){
var p5=result[i];
html_icecream+=` <li>
<h4><a href="${p5.herf}">${p5.title}</a></h4>
<a href="${p5.herf}"><img src="${p5.img_url}"></a>
<div class="prize"> ￥ ${p5.price.toFixed(2)} </div>
</li>`
}
var li5=document.querySelector("#icecream");
li5.innerHTML=html_icecream;
})
})()
out_login.js(这个是用来判断是否是登录状态)
// 如果本地缓存中有用户登录名
if(sessionStorage.getItem("myname")){
var name= sessionStorage.getItem("myname");
$('.login_btn').html(`欢迎${name}来到小毛虫生鲜
<span>|</span>
<a href="javascript:out();">退出</a>`);
}
function out(){
// http://127.0.0.1:3000/index.html
// 取得地址栏中的页面名称
var href=location.href.split("/").slice(length-1, length).toString(String);
// console.log(a);
// var b=a.split("/");
// console.log(b);
// console.log(b.slice(b.length-1, b.length).toString(String));
sessionStorage.removeItem("myname");
sessionStorage.removeItem("uname");
sessionStorage.removeItem("uphone");
sessionStorage.removeItem("uaddress");
window.location.href=href;
}
searchbar.js（搜索框功能）
$(function(){
$('.input_btn').click(function () {
val= $('.input_text').val();
if(val==""){
alert("请输入搜索内容");
}
else{
// val=JSON.stringify(val);
window.location.href=encodeURI("search_list.html?value="+val);
}
})
})
css代码分为两个css文件：
basic.css文件(基本的通用的样式)
@charset "utf-8";
body{
font-family:'Microsoft Yahei';
font-size:10px;
color:#666;
}
html,body{
overflow-x: hidden;
/* overflow-y: hidden; */
height:100%
}
/* 内外边框初始化*/
body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{
margin:0;
padding:0
}
h1,h2,h3,h4,h5,h6{
font-size:12px;
font-weight:normal;
}
/* 去掉前面标点 */
ul,ol{
list-style:none;
}
em{
font-style: normal;
}
/* 去掉下划线*/
a{
text-decoration:none;
}
/* 边框为0 */
img{
border:0;
}
/*防止高度坍塌 */
.clearfix:before,.clearfix:after{
content:"";
display:table
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1
}
/* 左浮动，右浮动*/
.fl{
float:left
}
.fr{
float:right
}
/* ifram样式 */
.my_header,.my_footer{
width: 100%;
overflow-y: hidden;
}
/* 顶部样式 */
.header_con{
background-color:#f7f7f7;
height:29px;
border-bottom:1px solid #dddddd
}
.header{
width:80%;
height:29px;
margin:0 auto;
}
.welcome,.login_info,.login_btn,.user_link{
line-height:29px;
}
.login_info{
display:none;
}
.login_info em{color:#ff8800}
.login_btn a,.user_link a{
color:#666;
}
.login_btn a:hover,.user_link a:hover{
color:#ff8800;
}
.login_btn span,.user_link span{
color:#cecece;
margin:0 10px;
}
/* logo、搜索框、购物车样式 */
.search_bar{
width:80%;
height:115px;
margin:0 auto;
}
.logo{
/* margin-top:4%; */
}
.logo img{
width:100px;
}
.search_con{
width: 38%;
height: 29%;
border:1px solid #37ab40;
margin: 30px 0 0 86px;
background:url(../images/base-img/icons.png) 10px -338px no-repeat;
}
.search_con .input_text{
width: 70%;
height: 92%;
border:0px;
margin:1px 0 0 36px;
outline:none;
font-size:12px;
color:#737272;
font-family:'Microsoft Yahei'
}
.search_con .input_btn{
width: 18%;
height: 100%;
background-color:#37ab40;
border:0px;
font-size:14px;
color:#fff;
font-family:'Microsoft Yahei';
outline:none;
cursor:pointer;
}
.guest_cart{
width: 25%;
height: 37%;
margin-top:30px;
}
.guest_cart .cart_name{
width: 68%;
height: 80%;
line-height: 34px;
border: 1px solid #dddddd;
display: block;
background: url(../images/base-img/icons.png) 10px -302px no-repeat;
font-size: 12px;
color: #37ab40;
text-indent: 56px;/* 首行缩进 */
margin-left: 10%;
}
.guest_cart .goods_count{
width: 17%;
height: 85%;
text-align:center;
line-height:230%;
font-size:14px;
font-weight:bold;
color:#fff;
background-color:#ff8800;
}
/* 菜单、幻灯片样式 */
.navbar_con{
height:8%;
border-bottom:2px solid #39a93e
}
.navbar{
width:80%;
margin:0 auto;
}
.navbar h1{
height: 100%;
line-height:42px;
font-size:12px;
color:#fff;
background-color:#39a93e;
}
/* 商品详情页的下拉菜单导航 */
.navbar .subnav_con{
width:160px;
height:41px;
background-color:#39a93e;
position:relative;
cursor:pointer;
}
.navbar .subnav_con h1{
/* position:absolute;
left:0;
top:0; */
text-align:left;
/* text-indent:40px */
text-align: center;
}
.navbar .subnav_con span{
display:block;
width:16px;
height:9px;
/* background:url(../images/leftarrow.png) no-repeat; */
/* transform:rotateZ(90deg); */
position:absolute;
right:27px;
top:16px;
transition:all 300ms ease-in;
}
.navbar .subnav_con:hover span{
transform:rotateZ(180deg);
}
.navbar .subnav_con .subnav{
position:absolute;
left:0;
top:40px;
display:none;
border-top:2px solid #39a93e;
}
.navbar .subnav_con:hover .subnav{
display:block;
}
/* 顶部导航样式 首页 手机生鲜 抽奖*/
.navlist{
margin-left:30px;
}
.navlist li{
height:40px;
float:left;
line-height:40px;
}
.navlist li a{
color:#666;
font-size:125%
}
.navlist li a:hover{
color:#ff8800
}
.navlist .interval{
margin:0 10px;
}
/* 左侧图片导航内容样式 */
.center_con{
width:80%;
height:290px;
margin:0 auto;
display: flex;
}
.subnav{
width:160px;
height:260px;
}
.subnav li{
height:18%;
border-left: 1px solid #eee;
border-bottom:1px solid #eee;
background:url(../images/base-img/icons.png) 140px -257px no-repeat #fff;
}
.subnav li a{
display:block;
height:70%;
line-height:42px;
text-indent:60px;
font-size:115%;
color:#333;
}
.subnav li a:hover{
color:#ff8800
}
.subnav li .fruit{
background:url(../images/base-img/icons.png) 15px 0px no-repeat;
}
.subnav li .seafood{
background:url(../images/base-img/icons.png) 15px -43px no-repeat;
}
.subnav li .meet{
background:url(../images/base-img/icons.png) 15px -86px no-repeat;
}
.subnav li .egg{
background:url(../images/base-img/icons.png) 15px -132px no-repeat;
}
.subnav li .vegetables{
background:url(../images/base-img/icons.png) 15px -174px no-repeat;
}
.subnav li .ice{
background:url(../images/base-img/icons.png) 15px -220px no-repeat;
}
/* 商品推荐样式 */
.new_goods{
border:1px solid #ededed;
border-top:2px solid #37ab40;
padding-bottom:10px;
}
.new_goods h3{
height:33px;
line-height:33px;
background-color:#fcfcfc;
border-bottom:1px solid #ededed;
font-size:12px;
font-weight:normal;
/* text-indent:10px; */
text-align: center;
}
.new_goods ul{
width:160px;
margin:0 auto;
overflow:hidden;
}
.new_goods li{
border-bottom:1px solid #ededed;
margin-bottom:-1px;
}
.new_goods li img{
display:block;
width:135px;
height:135px;
margin:10px auto;
}
.new_goods li h4{
width:160px;
margin:0 auto;
}
.new_goods li h4 a{
font-weight:normal;
color:#666;
display:block;
width:160px;
/* font-size: 10px; */
margin-left: 10px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.new_goods li .prize{
/* font-size:10px; */
color:#da260e;
margin:10px;
}
.main_wrap{
width:100%;
}
.l_wrap{
width:160px;
}
.r_wrap{width:90%;}
/* 二级页面面包屑导航 */
.breadcrumb{
width:80%;
height:25px;
margin:0 auto;
font-size:11px;
}
.breadcrumb a{
line-height:40px;
color:#37ab40
}
.breadcrumb a:hover{
color:#ff8800;
}
.breadcrumb span{
line-height:40px;
color:#666;
padding:0 5px;
}
/* 底部样式 */
.footer{
border-top:2px solid #42ad46;
margin:30px 0;
}
.foot_link{
text-align:center;
margin-top:30px;
}
.foot_link a,.foot_link span{
color:#4e4e4e;
}
.foot_link a:hover{
color:#ff8800
}
.foot_link span{
padding:0 10px
}
.footer p{
text-align:center;
margin-top:10px;
}
index.css（包含了所有的样式，但是详情页那个样式单独抽取出来了，css代码放到了博客的详情页中生鲜销售详情页）
/* 幻灯片样式 */
.slide{
width:80%;
height:290px;
position:relative;
overflow:hidden;
}
.slide .slide_pics{
position:relative;
left:0;
top:0;
width:80%;
height:86%;
}
.slide .slide_pics img{
width:640px;
height:286px;
}
.slide .slide_pics li{
width:80%;
height:100%;
position:absolute;
left:0;top:0
}
.slide .prev,.slide .next{
width:25px;
height:33px;
background:url(../images/base-img/icons.png) left -388px no-repeat;
position:absolute;
left:11px;
top:122px;
cursor:pointer;
}
.slide .next{
background-position:left -424px;
left:602px;
}
.points{
width:100%;
height:11px;
position:absolute;
left:0;
top:90%;
text-align:center;
}
.points li{
display:inline-block;
width:11px;
height:11px;
margin:0 5px;
background-color:#9f9f9f;
border-radius:50%;
cursor:pointer;
}
.points li.active{
background-color:#cecece
}
/* 首页商品分类的样式*/
.list_model{
width:80%;
/* height:75%; */
margin:6px auto 0;
}
.list_title{
height:10%;
border-bottom:2px solid #42ad46
}
.list_title h3{
height:40px;
line-height:52px;
font-size:12px;
color:#37ab40;
font-weight:bold;
}
.list_title .subtitle{height:20px;line-height:20px;margin-top:15px;}
.list_title .subtitle span{color:#666;margin:0 10px 0 20px;}
.list_title .subtitle a{color:#666;margin:0 5px;}
.list_title .subtitle a:hover,.goods_more:hover{color:#ff8800}
.goods_more{
height:20px;
margin-top:23px;
color:#666
}
.goods_con{
height:230px;
}
.goods_banner{
width:130px;
height:200px;
}
.goods_banner img{
width:100%;
height:220px;
}
.goods_list{
width:83%;
height:96%;
}
.goods_list li{
height: 219px;
width: 167px;
border-right:1px solid #ededed;
border-bottom:1px solid #ededed;
float:left
}
.goods_list li:hover{
width:166px;
height:219px;
border:1px solid gold;
}
.goods_list li:hover img{
opacity:0.8
}
.goods_list li h4{
/* width:200px; */
height:30px;
margin:20px auto 0;
text-align:center;
}
.goods_list li h4 a{
font-size:12px;
color:#666;
font-weight:normal;
line-height:24px;
}
.goods_list li h4 a:hover{
color:#ff8800
}
.goods_list li img{
display:block;
width:105px;
height:100px;
margin:20 auto;
}
.goods_list li .prize{
text-align:center;
font-size:13px;
color:#c40000;
/* margin-top:5px; */
}
/* 商品列表样式 */
.sort_bar{
height:30px;
background-color:#f0fdec;
}
.sort_bar a{
display:block;
height:30px;
line-height:30px;
padding:0 20px;
float:left;
color:#000
}
.sort_bar .active{
background-color:#37ab40;
color:#fff;
}
.goods_type_list{
margin:10px auto 0;
}
.goods_type_list li{
width:160px;
float:left;
border: 1px solid #ededed;
margin-bottom:10px;
margin-right:15px;
}
.goods_type_list li img{
width:140px;
height:140px;
display:block;
margin:10px auto;
}
.goods_type_list li h4{
width:160px;
margin:0 auto;
}
.goods_type_list li h4 a{
font-weight:normal;
color:#666;
display:block;
width:160px;
margin-left: 11px;
font-size: 10px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.operate{
width:160px;
margin:10px;
position:relative;
}
.goods_type_list .operate .prize{
color:#da260e;
font-size:11px;
}
.goods_type_list .operate .unit{
color:#999;
padding-left:5px;
}
.goods_type_list .operate .add_goods{
display:inline-block;
width:15px;height:15px;
background:url(../images/shop_cart.png);
position:absolute;
top:3px;
left:120px;
}
/*分页样式 */
.pagenation{
height:32px;
text-align:center;
font-size:0;
margin:30px auto;
}
.pagenation a{
display:inline-block;
border:1px solid #d2d2d2;
background-color:#f8f6f7;
font-size:12px;
padding:7px 10px;
color:#666;
margin:5px
}
.pagenation .active{
background-color:#fff;
color:#43a200
}
/* 登录页 */
.login_top{
width:960px;
height:130px;
margin:0 auto;
}
.login_logo{
display:block;
width:193px;
height:76px;
margin-top:30px;
}
.login_form_bg{
height:480px;
background-color:#518e17
}
.no-mp{
margin-top:0px;
}
.login_form_wrap{
width:960px;
height:480px;
margin:0 auto;
}
.login_banner{
width:381px;
height:322px;
background:url(../images/login_banner.png) no-repeat;
margin-top:90px;
}
.slogan{
width:40px;
height:300px;
font-size:30px;
color:#f0f9e8;
text-align:center;
line-height:36px;
margin:80px 0 0 120px;
}
.login_form{
width:368px;
height:378px;
border:1px solid #c6c6c5;
background-color:#fff;
margin-top:50px;
}
.login_title{
height:60px;
width:308px;
margin:10px auto;
border-bottom:1px solid #e0e0e0;
}
.login_title h1{
font-size:24px;
height:60px;
line-height:60px;
color:#a8a8a8;
float:left;
font-weight:bold;
margin-left:44px;
}
.login_title a{
width:100px;
height:20px;
display:block;
font-size:16px;
color:#5fb42a;
text-indent:26px;
background:url(../images/left5.png) left -3px no-repeat;
float:left;
margin:20px 0 0 36px
}
.form_input{
width:308px;
height:250px;
margin:20px auto;
position:relative;
}
.name_input,.pass_input{
width:306px;
height:36px;
border:1px solid #e0e0e0;
background:url(../images/listarrow.png) 280px -41px no-repeat #f8f8f8;
outline:none;
font-size:14px;
text-indent:10px;
position: absolute;
left:0;top:0
}
.pass_input{
top:65px;
background-position:280px -95px;
}
.user_error,.pwd_error{
color:#f00;
position:absolute;
left:0;top:43px;
display:none
}
.pwd_error{
top:110px;
}
.more_input{
position:absolute;
left:0;
top:130px;
width:100%
}
.more_input input{
float:left;
margin-top:2px;
}
.more_input label{
float:left;
margin-left:10px;
}
.more_input a{
float:right;
color:#666
}
.more_input a:hover{
color:#ff8800
}
.input_submit{
width:100%;
height:40px;
position:absolute;
left:0;top:180px;
background-color:#47aa34;
color:#fff;
font-size:22px;
border:0px;
font-family:'Microsoft Yahei';
cursor:pointer;
}
/* 注册页面 */
.register_con{
width:700px;
height:560px;
margin:50px auto 0;
/* background:url(../images/interval_line.png) 300px top no-repeat; */
}
.l_con{
width:300px;
}
.reg_logo{
width:200px;
height:76px;
float:right;
margin-right:30px;
}
.reg_logo img{
width: 70%;
}
.reg_slogan{
width:300px;
height:30px;
float:right;
text-align:right;
font-size:24px;
color:#69a81e;
margin:20px 30px 0 0;
}
.reg_banner{
width:251px;
height:329px;
/* background:url(../images/register_banner.png) no-repeat; */
float:right;
margin:20px 10px 0 0;
opacity:0.5
}
.r_con{width:400px;}
.reg_title{width:360px;height:50px;float:left;margin-left:30px;border-bottom:1px solid #e0e0e0}
.reg_title h1{height:50px;line-height:50px;float:left;font-size:24px;color:#a8a8a8;font-weight:bold;}
.reg_title a{
float:right;
height:20px;
line-height:20px;
font-size:16px;
color:#5fb42a;
padding-right:35px;
background:url(../images/left5.png) 40px -2px no-repeat;
margin-top:15px
}
.reg_form{
width:360px;
margin:30px 0 0 30px;
float:left;
position:relative;}
.reg_form li{height:70px;}
.reg_form li label{
width:70px;
height:40px;
line-height:40px;
float:left;
font-size:14px;
color:#a8a8a8
}
.reg_form li input{width:288px;height:38px;border:1px solid #e0e0e0;float:left;outline:none;text-indent:10px;background-color:#f8f8f8}
.reg_form li.agreement input{width:15px;height:15px;float:left;margin-top:13px}
.reg_form li.agreement label{width:300px;float:left;margin-left:10px;}
.reg_form li.reg_sub input{width:360px;height:40px;background-color:#47aa34;font-size:18px;color:#fff;font-family:'Microsoft Yahei';cursor:pointer;}
.reg_form li .error_tip{float:left;height:30px;line-height:30px;margin-left:70px;color:#e62e2e;display:none;}
.reg_form li .error_tip2{float:left;height:20px;line-height:20px;color:#e62e2e;display:none;}
/* 用户信息 */
.sub_page_name{
font-size: 13px;
color: #666;
margin: 50px 0 0 -13px;
}
.total_count{
width:80%;margin:0 auto;height:40px;line-height:40px;font-size:14px;
}
.total_count em{
font-size:16px;color:#ff4200;margin:0 5px;
}
.cart_list_th{width:80%;border:1px solid #ddd;background-color:#f7f7f7;margin:0 auto;}
.cart_list_th li{height:30px;line-height:30px;float:left;text-align:center;}
.cart_list_th .col01{width:26%;}
.cart_list_th .col02{width:16%;}
.cart_list_th .col03{width:13%;}
.cart_list_th .col04{width:12%;}
.cart_list_th .col05{width:15%;}
.cart_list_th .col06{width:18%;}
.cart_list_td{width:80%;border:1px solid #ddd;background-color:#edfff9;margin:0 auto;margin-top:-1px;}
.cart_list_td li{height:120px;line-height:120px;float:left;text-align:center;}
.cart_list_td .col01{width:4%;}
.cart_list_td .col02{width:12%;}
.cart_list_td .col03{width:10%;}
.cart_list_td .col04{width:16%;}
.cart_list_td .col05{width:13%;}
.cart_list_td .col06{width:12%;}
.cart_list_td .col07{width:15%;}
.cart_list_td .col08{width:18%;}
.cart_list_td .col02 img{width:100px;height:100px;border:1px solid #ddd;display:block;margin:10px auto 0;}
.cart_list_td .col03{height:48px;line-height:24px;margin-top:25px;}
.cart_list_td .col03 em{color:#999}
.cart_list_td .col08 a{color:#666}
.cart_list_td .col08 span{display: none;}
.cart_list_td .col06 .num_add{width:98px;height:28px;border:1px solid #ddd;margin:40px auto 0;}
.cart_list_td .col06 .num_add a{width:29px;height:28px;line-height:28px;background-color:#f3f3f3;font-size:14px;color:#666}
.cart_list_td .col06 .num_add input{width:38px;height:28px;text-align:center;line-height:30px;border:0px;display:block;float:left;outline:none;border-left:1px solid #ddd;border-right:1px solid #ddd;}
.settlements{width:80%;height:50px;border:1px solid #ddd;background-color:#fff4e8;margin:-1px auto 0;}
.settlements li{line-height:50px;float:left;}
.settlements .col01{width:4%;text-align:center}
.settlements .col02{width:12%;}
.settlements .col03{width:69%; height:48px; line-height:20px;text-align:right;margin-top:10px;}
.settlements .col03 span{color:#ff0000;padding-right:5px}
.settlements .col03 em{color:#ff3d3d;font-size:12px;font-weight:bold;}
.settlements .col03 span{color:#ff0000;}
.settlements .col03 b{color:#ff0000;font-size:12px;padding:0 5px;}
.settlements .col04{width:14%;text-align:center;float:right;}
.settlements .col04 a{display:block;height:50px;background-color:#ff3d3d;text-align:center;line-height:50px;color:#fff;font-size:12px}
.common_title{width:80%;margin:20px auto 0;font-size:14px;}
.common_list_con{width:80%;border:1px solid #dddddd;border-top:2px solid #00bc6f;margin:10px auto 0;background-color:#f7f7f7;position:relative;}
.common_list_con dl{margin:20px;}
.common_list_con dt{font-size:14px;font-weight:bold;margin-bottom:10px}
.common_list_con dd input{vertical-align:bottom;margin-right:10px}
.edit_site{position:absolute; right:20px;top:30px;width:100px;height:30px;background-color:#37ab40;text-align:center;line-height:30px;color:#fff}
.pay_style_con{margin:20px;}
.pay_style_con input{float:left;margin:14px 7px 0 0;}
.pay_style_con label{float:left;border:1px solid #ccc;background-color:#fff;padding:10px 10px 10px 40px;margin-right:25px}
.pay_style_con .cash{background:url(../images/pay_icons.png) 8px top no-repeat #fff;}
.pay_style_con .weixin{background:url(../images/pay_icons.png) 6px -36px no-repeat #fff;}
.pay_style_con .zhifubao{background:url(../images/pay_icons.png) 12px -72px no-repeat #fff;width:50px;height:16px}
.pay_style_con .bank{background:url(../images/pay_icons.png) 6px -108px no-repeat #fff;}
.goods_list_th{height:40px;border-bottom:1px solid #ccc}
.goods_list_th li{float:left;line-height:40px;text-align:center;}
.goods_list_th .col01{width:25%}
.goods_list_th .col02{width:20%}
.goods_list_th .col03{width:25%}
.goods_list_th .col04{width:15%}
.goods_list_th .col05{width:15%}
.goods_list_td{height:80px;border-bottom:1px solid #eeeded}
.goods_list_td li{float:left;line-height:80px;text-align:center;}
.goods_list_td .col01{width:4%}
.goods_list_td .col02{width:9%}
.goods_list_td .col03{width:15%}
.goods_list_td .col04{width:20%}
.goods_list_td .col05{width:25%}
.goods_list_td .col06{width:15%}
.goods_list_td .col07{width:15%}
.goods_list_td .col02{text-align:right}
.goods_list_td .col02 img{width:63px;height:63px;border:1px solid #ddd;display:block;margin:7px 0;float:right;}
.goods_list_td .col03{text-align:left;text-indent:20px}
.settle_con{margin:10px}
.total_goods_count,.transit,.total_pay{line-height:24px;text-align:right}
.total_goods_count em,.total_goods_count b,.transit b,.total_pay b{font-size:14px;color:#ff4200;padding:0 5px;}
.order_submit{
width:80%;margin:20px auto;
}
.order_submit a{
width:160px;
height:40px;
line-height:40px;
text-align:center;
background-color:#47aa34;
color:#fff;font-size:16px;
display:block;float:right;
}
.order_list_th{
width:79%px;
border:1px solid #ddd;
background-color:#f7f7f7;
margin:20px auto 0;
}
.order_list_th li{
float:left;
height:30px;
line-height:30px;
}
.order_list_th .col01{
width:20%;
margin-left:20px;
}
.order_list_th .col02{
width:30%;
}
.order_list_table{
font-size: 10px;
width:80%;
border-collapse:collapse;
border-spacing:0px;
border:1px solid #ddd;
margin:-1px auto 0;
}
.order_list_table td{
border:1px solid #ddd;
text-align:center;
}
.order_goods_list{
border-bottom:1px solid #ddd;
margin-bottom:-2px;
}
.order_goods_list li{
float:left;
height:80px;
line-height:80px;
}
.order_goods_list .col01{
width:20%;
}
.order_goods_list .col01 img{
width:60px;
height:60px;
border:1px solid #ddd;
margin:10px auto;
}
.order_goods_list .col02{
width:50%;
text-align:left;
}
.order_goods_list .col02 em{
color:#999;
margin-left:10px}
.order_goods_list .col03{
width:10%;
}
.order_goods_list .col04{
width:20%;
}
.oper_btn{
display:inline-block;
border:1px solid #ddd;
color:#666;
padding:5px 10px
}
.popup_con{
display:none;
}
.popup{
width:300px;
height:150px;
border:1px solid #dddddd;
border-top:2px solid #00bc6f;
background-color:#f7f7f7;
position:fixed;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-75px;
z-index:1000;
}
.popup p{
height:150px;
line-height:150px;
text-align:center;
font-size:18px;
}
.mask{
width:100%;
height:100%;
position:fixed;
left:0;top:0;
background-color:#000;
opacity:0.3;
z-index:999;
}
/* 用户中心——个人信息 */
.main_con{
width: 80%;
margin:0 auto;
background:url(../images/left_bg.jpg) repeat-y;
}
.left_menu_con{
width:18%;
float:left;
height: 150px;
background-color: #f9f9f9;
}
.left_menu_con h3{
/* font-size:16px; */
line-height:40px;
border-bottom:1px solid #ddd;
text-align:center;
/* margin-bottom:10px; */
}
.left_menu_con ul li{
line-height:37px;
text-align:center;
/* font-size:14px; */
}
.left_menu_con ul li a{
color:#666;
}
.left_menu_con ul li .active{
color:#ff8800;
font-weight:bold;
}
/* 用户中心——全部订单 */
.right_content{
width:80%;
float:right;
min-height:500px;
}
.w980,.w978{
width:100%;
}
/* .w978{
width:978px;
} */
/* 最近浏览 */
.common_title2{
height:20px;
line-height:20px;
/* font-size:16px; */
margin:10px 0;
}
/* */
.resend_browse li img{
width: 80px;
height: 80px;
}
.resend_browse li{
width: 160px;
float: left;
border: 1px solid #ededed;
margin-bottom: 10px;
}
.user_info_list{
background-color:#f9f9f9;
margin:10px 0 15px;
padding:10px 0;
height:90px;
}
.user_info_list li{
line-height:30px;
text-indent:30px;
font-size:10px;
}
.user_info_list li span{
width:80px;
float:left;
text-align:right;
}
.info_con{
width:100%;
}
.info_l{
width:600px;
float:left;
}
.info_r{
width:360px;
float:right;
}
/* 收货地址 */
.site_con{
background-color:#f9f9f9;
padding:10px 0;
margin-bottom:20px;
}
.site_con dt{
font-size:12px;
line-height:30px;
text-indent:30px;
font-weight:bold;
}
.site_con dd{
font-size:14px;
line-height:30px;
text-indent:30px;
}
.site_con .form_group{
height:40px;
line-height:40px;
margin-top:10px;
}
.site_con .form_group label{
width:100px;
float:left;
text-align:right;
font-size:14px;
height:40px;
line-height:40px;
}
.site_con .form_group input{
width:300px;
height:25px;
border:1px solid #ddd;
float:left;
outline:none;
margin-top:7px;
text-indent:10px;
}
.site_con .form_group2{
height:90px;
}
.site_area{
width:280px;
height:60px;
border:1px solid #ddd;
outline:none;
padding:10px;
}
/* 修改地址 */
.info_submit{
width:100px;
height:30px;
background-color:#37ab40;
border:0px;
color:#fff;
margin:10px 0 10px 100px;
cursor:pointer;
font-family:'Microsoft Yahei'
}
.stress{
color:#ff8800;
}