This commit is contained in:
裴浩宇 2020-01-09 18:38:11 +08:00
parent ef684c0e9f
commit b48a666226
18 changed files with 773 additions and 6 deletions

View File

@ -6,26 +6,244 @@
<link rel="shortcut icon" type="image/x-icon" href="../../static/img/favicon.ico" rel="external nofollow" />
<link rel="stylesheet" href="../../static/css/index.css">
<link rel="stylesheet" href="../../static/layui/css/layui.css">
<script src="../../static/layui/layui.all.js"></script>
</head>
<body>
<div class="head">
<div class="content">
<div class="not-login-information">
<div class="login-text"><a href="/ebuy/login">亲,请登录</a></div>
<div class="register-text"><a href="/ebuy/register">免费注册</a></div>
</div>
<div class="login-information">
<div class="login-text">
<span class="login-text-username"></span>
<i id="icon1" class="layui-icon layui-icon-triangle-d"></i>
<div class="personInfo">
<div class="function">
<div class="account-management">账户管理</div>
<div class="sign-out">退出</div>
</div>
<div class="info">
<div class="head-portrait"></div>
<div class="grade">
<div class="ebuy-grade">BUY能量:222</div>
<div class="membership-level">普通会员</div>
</div>
<div class="more-equity">查看你的专属权益</div>
</div>
</div>
</div>
<div class="news">
<div class="news-photo"></div>
<span>消息</span>
<span class="news-number">3</span>
<i id="icon2" class="layui-icon layui-icon-triangle-d"></i>
<div class="news-content">
<div class="one-news">
双12活动来临!
</div>
<div class="one-news">
速备年货!
</div>
<div class="one-news">
除夕全家福!
</div>
</div>
</div>
</div>
<div class="function">
<div class="cart">
<a href="">
<div class="cart-photo"></div>
购物车
<span class="cart-number">1</span>
</a>
<i id="icon3" class="layui-icon layui-icon-triangle-d"></i>
<div class="cart-content">
<span>最近加入的宝贝:</span>
<div class="commodity">
<div class="one-commodity">
<div class="commodity-photo"></div>
<div class="commodity-name">电水壶家用大容量自动断电保温一体电热水壶茶壶不锈钢电壶烧水壶</div>
<div class="price-delete">
<div class="commodity-price">¥220.0</div>
<div class="commodity-delete">删除</div>
</div>
</div>
</div>
<hr>
<span class="cart-bottom-text">购物车里还有21件宝贝</span>
<br>
<button class="cart-but">查看我的购物车</button>
</div>
</div>
<div class="collection">
<i id="icon6" class="layui-icon layui-icon-rate"></i>
<a href="">收藏夹 </a>
<!--<i id="icon4" class="layui-icon layui-icon-triangle-d"></i>-->
</div>
<div class="set-up-shop">
<div class="shop-photo"></div>
<a href="">免费开店 </a>
</div>
<div class="business">
<div class="shop-photo"></div>
<a href="">我的店铺 </a>
</div>
<div class="service">
<div class="service-photo"></div>
<a href="">联系客服 </a></div>
</div>
</div>
</div>
<div class="middle">
<div class="box">
<div class="search">
<div class="search-log">
<div class="log"></div>
</div>
<div class="search-box">
<div class="search-box-box">
<input type="text" class="search-box-input" placeholder="请输入搜索的宝贝">
<div class="search-text">搜索</div>
</div>
</div>
<div class="search-blank"></div>
</div>
<div class="strip"></div>
<div class="navigation-carousel-person">
<div class="navigation">
<ul>
<li>
<a href="">女装</a> / <a href="">男装</a> / <a href="">内衣</a><i class="layui-icon layui-icon-right"></i>
<div id="li-1" class="li-content" style="display: inline;">
<div class="three-type">
<div class="type-1">
<div class="title">
<span>女装</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
<span>羽绒服</span>
<span>棉衣棉服</span>
<span>毛呢大衣</span>
<span>毛衣针织</span>
<span>卫衣绒衫</span>
<span>皮衣皮草</span>
<span>裤裙</span>
<span>衬衫</span>
<span>半身裙</span>
<span>汉服</span>
</div>
</div>
<div class="type-1">
<div class="title">
<span>女装</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
<span>羽绒服</span>
<span>棉衣棉服</span>
<span>毛呢大衣</span>
<span>毛衣针织</span>
<span>卫衣绒衫</span>
<span>皮衣皮草</span>
<span>裤裙</span>
<span>衬衫</span>
<span>半身裙</span>
<span>汉服</span>
</div>
</div>
<div class="type-1">
<div class="title">
<span>女装</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
<span>羽绒服</span>
<span>棉衣棉服</span>
<span>毛呢大衣</span>
<span>毛衣针织</span>
<span>卫衣绒衫</span>
<span>皮衣皮草</span>
<span>裤裙</span>
<span>衬衫</span>
<span>半身裙</span>
<span>汉服</span>
</div>
</div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
<div class="photo">
</div>
</div>
</div>
</li>
<li>
<a href="">鞋靴</a> / <a href="">箱包</a> / <a href="">配件</a><i class="layui-icon layui-icon-right"></i>
<div id="li-2" class="li-content"></div>
</li>
<li>
<a href="">童装玩具</a> / <a href="">孕产</a> / <a href="">用品</a><i class="layui-icon layui-icon-right"></i>
<div id="li-3" class="li-content"></div>
</li>
<li>
<a href="">家电</a> / <a href="">数码</a> / <a href="">手机</a><i class="layui-icon layui-icon-right"></i>
<div id="li-4" class="li-content"></div>
</li>
<li>
<a href="">美妆</a> / <a href="">洗护</a> / <a href="">保健品</a><i class="layui-icon layui-icon-right"></i>
<div id="li-5" class="li-content"></div>
</li>
<li>
<a href="">运动</a> / <a href="">户外</a> / <a href="">乐器</a><i class="layui-icon layui-icon-right"></i>
<div id="li-6" class="li-content"></div>
</li>
<li>
<a href="">游戏</a> / <a href="">动漫</a> / <a href="">影视</a><i class="layui-icon layui-icon-right"></i>
<div id="li-7" class="li-content"></div>
</li>
<li>
<a href="">美食</a> / <a href="">生鲜</a> / <a href="">零食</a><i class="layui-icon layui-icon-right"></i>
<div id="li-8" class="li-content"></div>
</li>
<li>
<a href="">家具</a> / <a href="">家饰</a> / <a href="">家纺</a><i class="layui-icon layui-icon-right"></i>
<div id="li-9" class="li-content"></div>
</li>
<li>
<a href="">百货</a> / <a href="">餐厨</a> / <a href="">家庭保健</a><i class="layui-icon layui-icon-right"></i>
<div id="li-10" class="li-content"></div>
</li>
</ul>
</div>
<div class="carousel"></div>
<div class="person"></div>
</div>
</div>
</div>
<div class="bottom">
</div>
</body>
<script src="../../static/js/jquery-1.12.2.js"></script>
<script src="../../static/js/index.js"></script>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/layui/layui.all.js"></script>
</html>

View File

@ -16,16 +16,327 @@ body{
background: rgb(245,245,245);
flex: 1;
width: 100%;
}
.head .content{
width: 80%;
height: 100%;
margin: 0 auto;
}
.head .content .not-login-information{
line-height: 3em;
}
.head .content .not-login-information .login-text{
float: left;
}
.head .content .not-login-information .login-text a{
color: rgb(23,181,254);
cursor: pointer;
}
.head .content .not-login-information .register-text{
margin-left: 2em;
float: left;
cursor: pointer;
}
.head .content .not-login-information .register-text :hover{
color: rgb(23,181,254);
}
.head .content .login-information{
display: none;
line-height: 3em;
}
.head .content .login-information :hover{
background: white;
}
.head .content .login-information .login-text :hover{
color: rgb(23,181,254);
}
.head .content .login-information .login-text{
float: left;
}
.head .content .login-information .login-text .login-text-username{
cursor: pointer;
}
.head .content .login-information .login-text #icon1{
cursor: pointer;
color: rgb(23,181,254);
}
.head .content .login-information .login-text .personInfo{
display: none;
background: #fff;
width: 240px;
height: 160px;
position: absolute;
padding: 1em;
top: 3em;
left: 10%;
border: 1px solid rgb(238,238,238);
}
.head .content .login-information .login-text .personInfo .function{
color: black;
}
.head .content .login-information .login-text .personInfo .function :hover{
color: rgb(23,181,254);
}
.head .content .login-information .login-text .personInfo .function .account-management{
margin-right: 2em;
cursor: pointer;
}
.head .content .login-information .login-text .personInfo .function .sign-out{
cursor: pointer;
}
.head .content .login-information .login-text .personInfo .info{
margin-top: -0.6em;
}
.head .content .login-information .login-text .personInfo .info :hover{
color: black;
}
.head .content .login-information .login-text .personInfo .info .head-portrait{
height: 3em;
width: 3em;
background: url("../img/E.png");
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 80% 80%;
background-position: center;
margin-top: 5em;
margin-left: 2em;
cursor: pointer;
}
.head .content .login-information .login-text .personInfo .info .grade{
color: black;
float: right;
margin-top: -3.4em;
margin-right: 3em;
}
.head .content .login-information .login-text .personInfo .info .grade .ebuy-grade{
height: 2em;
line-height: 2em;
}
.head .content .login-information .login-text .personInfo .info .grade .membership-level{
height: 2em;
line-height: 2em;
}
.head .content .login-information .login-text .personInfo .info .more-equity{
text-align: center;
border: 1px solid rgb(129,190,255);
background: rgb(220,238,252);
padding: 4px 0;
height: 1em;
line-height: 1em;
margin-top: 1.6em;
color: black;
cursor: pointer;
}
.head .content .login-information .news{
float: left;
}
.head .content .login-information .news span{
cursor: pointer;
}
.head .content .login-information .news #icon2{
color: rgb(23,181,254);
}
.head .content .login-information .news :hover{
color: rgb(23,181,254);
}
.head .content .login-information .news .news-number{
color: rgb(23,181,254);
}
.head .content .login-information .news .news-photo{
background: url("../img/news.png");
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 80% 80%;
background-position: center;
width: 1.5em;
height: 1.5em;
float: left;
margin-top: 0.76em;
margin-left: 2em;
}
.head .content .login-information .news .news-content{
display: none;
background: #fff;
width: 240px;
height: 160px;
position: absolute;
padding: 1em;
top: 3em;
margin-left: -110px;
border: 1px solid rgb(238,238,238);
overflow: auto;
color: black;
}
.head .content .login-information .news .news-content :hover{
color: rgb(23,181,254);
}
.head .content .login-information .news .news-content .one-news{
cursor: pointer;
}
.head .content .function{
display: flex;
float: right;
line-height: 3em;
}
.head .content .function :hover{
color: rgb(23,181,254);
background: white;
}
.head .content .function .cart{
margin-right: 2em;
cursor: pointer;
}
.head .content .function .cart .cart-photo{
float: left;
height: 2em;
width: 2em;
background: url("../img/cart.png");
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 80% 80%;
background-position: center;
margin-top: 0.32em;
}
.head .content .function .cart .cart-number{
color: rgb(23,181,254);
}
.head .content .function .cart .cart-content{
display: none;
background: #fff;
width: 240px;
height: 340px;
position: absolute;
padding: 1em;
top: 3em;
cursor: auto;
border: 1px solid rgb(238,238,238);
color: black;
font-weight: bold;
overflow: auto;
margin-left: -102px;
}
.head .content .function .cart .cart-content span{
color: black;
}
.head .content .function .cart .cart-content .commodity .one-commodity{
height: 3em;
font-weight: normal;
display: flex;
color: black;
margin-top: 1em
}
.head .content .function .cart .cart-content .commodity .one-commodity .commodity-photo{
flex:1;
background:url("../img/chufang01.jpg") no-repeat;
background-size: 100% 100%;
background-position: center;
height: 100%;
width: 3em;
cursor: pointer;
}
.head .content .function .cart .cart-content .commodity .one-commodity .commodity-name{
flex: 6;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: -0.8em;
margin-left: 0.5em;
cursor: pointer;
}
.head .content .function .cart .cart-content .commodity .one-commodity .price-delete{
flex:1;
}
.head .content .function .cart .cart-content .commodity .one-commodity .price-delete .commodity-price{
color: rgb(23,181,254);
font-weight: bold;
height: 1em;
margin-top: -0.8em;
}
.head .content .function .cart .cart-content .commodity .one-commodity .price-delete .commodity-delete{
margin-top: 0.5em;
float: right;
cursor: pointer;
}
.head .content .function .cart .cart-content .cart-bottom-text{
float: right;
}
.head .content .function .cart .cart-content .cart-but{
color: white;
background: rgb(80,206,194);
border: 0;
display: block;
overflow: hidden;
vertical-align: middle;
font-weight: normal;
border-radius: 2px;
cursor: pointer;
zoom: 1;
height: 1.8em;
line-height: 1.8em;
float: right;
}
.head .content .function .collection{
margin-right: 2em;
cursor: pointer;
}
.head .content .function .set-up-shop{
margin-right: 2em;
cursor: pointer;
}
.head .content .function .business{
display: none;
margin-right: 2em;
cursor: pointer;
}
.head .content .function .shop-photo{
float: left;
height: 2em;
width: 2em;
background: url("../img/shop.png");
background-repeat: no-repeat;
background-size: 50% 50%;
-moz-background-size: 50% 50%;
background-position: center;
margin-top: 0.4em;
color: rgb(23,181,254);
}
.head .content .function .service{
margin-right: 2em;
cursor: pointer;
}
.head .content .function .service .service-photo{
float: left;
height: 2em;
width: 2em;
background: url("../img/service.png");
background-repeat: no-repeat;
background-size: 60% 60%;
-moz-background-size: 60% 60%;
background-position: center;
margin-top: 0.5em;
color: rgb(23,181,254);
}
#icon3{
color: rgb(23,181,254);
}
#icon4{
color: rgb(23,181,254);
}
#icon5{
color: rgb(23,181,254);
}
#icon6{
color: rgb(23,181,254);
}
.middle{
background: url("../img/background2.jpg") no-repeat;
background-size:100% 100%;
flex: 15;
flex: 18;
display: flex;
overflow: auto;
}
@ -34,5 +345,164 @@ body{
background: white;
margin: 0 auto;
}
.middle .box .search{
display: flex;
height: 20%;
width: 100%;
}
.middle .box .search .search-log{
flex: 1;
height: 100%;
}
.middle .box .search .search-log .log{
background: url(../img/E-Buy04.png);
background-repeat: no-repeat;
background-size: 110% 85%;
-moz-background-size: 80% 80%;
background-position: -5px 1px;
height: 100%;
width: 100%;
cursor: pointer;
}
.middle .box .search .search-box{
flex: 4;
height: 100%;
}
.middle .box .search .search-box .search-box-box{
width: 95%;
margin: auto;
margin-top: 3em;
height: 3.26em;
border: 2px solid rgb(23,181,254);
border-radius: 20px;
background: rgb(23,181,254);
}
.middle .box .search .search-box .search-box-box .search-box-input{
width: 85%;
float: left;
height: 2.5em;
border: 0;
margin-left: 1em;
margin-top: 0.4em;
text-indent: 10px;
}
.middle .box .search .search-box .search-box-box .search-text{
width: 10%;
float: left;
height: 3em;
line-height: 2.8em;
color: white;
font-weight: bold;
margin-left: 1em;
font-size: 1.2em;
cursor: pointer;
letter-spacing: 10px;
}
.middle .box .search .search-blank{
flex: 1;
height: 100%;
}
.middle .box .strip{
height: 40px;
width: 100%;
background: rgb(23,181,254);
}
.middle .box .navigation-carousel-person{
width: 100%;
height: 500px;
display: flex;
}
.middle .box .navigation-carousel-person .navigation{
flex: 1;
border: 1px solid rgb(130,200,250);
}
.middle .box .navigation-carousel-person .navigation ul{
height: 100%;
}
.middle .box .navigation-carousel-person .navigation ul :hover{
color: rgb(23,181,254);
background: rgb(222,238,253);
}
.middle .box .navigation-carousel-person .navigation ul :hover a{
color: rgb(23,181,254);
background: rgb(222,238,253);
}
.middle .box .navigation-carousel-person .navigation ul li{
list-style: none;
height: 10%;
line-height: 50px;
padding: 0 2em;
}
.middle .box .navigation-carousel-person .navigation ul li :hover{
text-decoration: underline;
}
.middle .box .navigation-carousel-person .navigation ul li .layui-icon{
float: right;
text-decoration: none;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content{
display: none;
height: 65%;
width: 43.5%;
border: 2px solid rgb(130,200,250);
position: absolute;
top: 30.1%;
left: 24.6%;
color: black;
text-decoration: none;
background: white;
padding: 1em;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content :hover{
color: black;
text-decoration: none;
background: white;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content .three-type{
height: 100%;
width: 60%;
border-right: 1px solid rgb(224,224,224) ;
display: flex;
flex-direction: column;
padding-right: 1em;
float: left;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content .three-type .type-1{
flex: 1;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content .three-type .type-1 .title{
font-weight: bold;
height: 2em;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content .three-type .type-1 .title :hover{
color: rgb(23,181,254);
cursor: pointer;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content .three-type .type-1 .title .more{
font-size: 0.9em;
font-weight: normal;
float: right;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content .three-type .type-1 .type-content{
font-size: 0.9em;
}.middle .box .navigation-carousel-person .navigation ul li .li-content .three-type .type-1 .type-content :hover{
cursor: pointer;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content .three-type .type-1 .type-content span{
margin-right: 1em;
white-space:nowrap;
}
.middle .box .navigation-carousel-person .navigation ul li .li-content .you-like{
height: 100%;
width: 37%;
float: right;
text-align: center;
}
.middle .box .navigation-carousel-person .carousel{
flex: 3;
}
.middle .box .navigation-carousel-person .person{
flex: 1.5;
}

View File

@ -17,14 +17,15 @@ body{
display: flex;
}
.head .log{
background: url("../img/E-Buy2.png");
background: url("../img/E-Buy04.png");
background-repeat: no-repeat;
background-size: 80% 50%;
background-size: 100%;
-moz-background-size: 80% 80%;
background-position: center;
height: 100%;
width: 10%;
margin-left: 8%;
cursor: pointer;
}
.head .login-msg{
text-align: center;

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -0,0 +1,75 @@
//打开个人信息
function openPersonInfo() {
$(".personInfo").css("display","inline");
};
//关闭个人信息
function closePersonInfo() {
$(".personInfo").css("display","none");
};
//打开消息
function openPersonInfo1() {
$(".news-content").css("display","inline");
};
//关闭消息
function closePersonInfo1() {
$(".news-content").css("display","none");
};
//打开购物车
function openPersonInfo2() {
$(".cart-content").css("display","inline");
};
//关闭购物车
function closePersonInfo2() {
$(".cart-content").css("display","none");
};
layui.use(['layer',"jquery","element"], function() {
const layer = layui.layer
,$ = layui.jquery
,element = layui.element;
//判断登录
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
console.log(userInfo);
if (userInfo.user_name != "" || userInfo.user_name != null){
$(".login-information").css("display","inline");
$(".not-login-information").css("display","none");
$(".login-text-username").html(userInfo.nick_name);
//个人信息
$(".login-text").attr("onmouseover","openPersonInfo()");
$(".login-text").attr("onmouseout","closePersonInfo()");
//消息
$(".news").attr("onmouseover","openPersonInfo1()");
$(".news").attr("onmouseout","closePersonInfo1()");
//购物车
$(".cart").attr("onmouseover","openPersonInfo2()");
$(".cart").attr("onmouseout","closePersonInfo2()");
//判断是否商家
if (userInfo.user_type == "01") {
$(".set-up-shop").css("display","none");
$(".business").css("display","inline");
}
}
//联系客服
$(".service").on("click",function () {
layer.msg("功能正在完善,联系客服:15006732580!")
});
//搜索回车触发
$("body").keydown(function () {
if (window.event.keyCode==13) {
//如果发生了按下回车键事件回车键对应的编号是13
$(".search-text").trigger("click"); //则激活登录按钮的click事件
}
});
//搜索
$(".search-text").on("click",function () {
layer.msg($(".search-box-input").val())
})
})

View File

@ -19,8 +19,10 @@ layui.use(['layer',"jquery"], function() {
success: function (data) {
let msg = data.msg;
if (msg == "登录成功!") {
localStorage.setItem("userInfo",JSON.stringify(data));
//登录成功
console.log(msg);
console.log(localStorage.setItem("userInfo",JSON.stringify(data)));
window.location.href = "/ebuy/index";
} else {
//登录失败
@ -56,6 +58,7 @@ layui.use(['layer',"jquery"], function() {
}
});
//log去首页
$(".log").on("click",function () {
window.location.href="/ebuy/index";
})