diff --git a/src/main/webapp/WEB-INF/view/index.html b/src/main/webapp/WEB-INF/view/index.html index 0afadad..a4bf290 100644 --- a/src/main/webapp/WEB-INF/view/index.html +++ b/src/main/webapp/WEB-INF/view/index.html @@ -6,26 +6,244 @@ - +
+ + +
+
+ +
+ 购物车 + 1 + + +
+ 最近加入的宝贝： +
+
+
+
电水壶家用大容量自动断电保温一体电热水壶茶壶不锈钢电壶烧水壶
+
+
￥220.0
+
删除
+
+
+
+
+ 购物车里还有21件宝贝 +
+ +
+
+
+ + 收藏夹 + +
+
+
+ 免费开店 +
+
+
+ 我的店铺 +
+ +
+
+ 联系客服
+
+
+
+
+
+
+
+
+ +
搜索
+
+
+
+
+
+
+
+ +
+
+
+
-
+ - + \ No newline at end of file diff --git a/src/main/webapp/static/css/index.css b/src/main/webapp/static/css/index.css index 5ee98b1..9f89f9e 100644 --- a/src/main/webapp/static/css/index.css +++ b/src/main/webapp/static/css/index.css @@ -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; +} diff --git a/src/main/webapp/static/css/login.css b/src/main/webapp/static/css/login.css index 0d3237b..b86e756 100644 --- a/src/main/webapp/static/css/login.css +++ b/src/main/webapp/static/css/login.css @@ -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; diff --git a/src/main/webapp/static/img/E-BUY04.png b/src/main/webapp/static/img/E-BUY04.png new file mode 100644 index 0000000..4175897 Binary files /dev/null and b/src/main/webapp/static/img/E-BUY04.png differ diff --git a/src/main/webapp/static/img/E-BUY3.png b/src/main/webapp/static/img/E-BUY3.png new file mode 100644 index 0000000..b98feff Binary files /dev/null and b/src/main/webapp/static/img/E-BUY3.png differ diff --git a/src/main/webapp/static/img/E-Buy2.png b/src/main/webapp/static/img/E-Buy1.png similarity index 100% rename from src/main/webapp/static/img/E-Buy2.png rename to src/main/webapp/static/img/E-Buy1.png diff --git a/src/main/webapp/static/img/E.png b/src/main/webapp/static/img/E.png new file mode 100644 index 0000000..5caf486 Binary files /dev/null and b/src/main/webapp/static/img/E.png differ diff --git a/src/main/webapp/static/img/cart.png b/src/main/webapp/static/img/cart.png new file mode 100644 index 0000000..1cb4146 Binary files /dev/null and b/src/main/webapp/static/img/cart.png differ diff --git a/src/main/webapp/static/img/chufang01.jpg b/src/main/webapp/static/img/chufang01.jpg new file mode 100644 index 0000000..96504d0 Binary files /dev/null and b/src/main/webapp/static/img/chufang01.jpg differ diff --git a/src/main/webapp/static/img/favorites.png b/src/main/webapp/static/img/favorites.png new file mode 100644 index 0000000..2e85bc5 Binary files /dev/null and b/src/main/webapp/static/img/favorites.png differ diff --git a/src/main/webapp/static/img/logo1.png b/src/main/webapp/static/img/logo1.png new file mode 100644 index 0000000..c4a6d73 Binary files /dev/null and b/src/main/webapp/static/img/logo1.png differ diff --git a/src/main/webapp/static/img/logo3.png b/src/main/webapp/static/img/logo3.png new file mode 100644 index 0000000..fd1ce2f Binary files /dev/null and b/src/main/webapp/static/img/logo3.png differ diff --git a/src/main/webapp/static/img/logo4.png b/src/main/webapp/static/img/logo4.png new file mode 100644 index 0000000..d00ebfe Binary files /dev/null and b/src/main/webapp/static/img/logo4.png differ diff --git a/src/main/webapp/static/img/news.png b/src/main/webapp/static/img/news.png new file mode 100644 index 0000000..9a168fa Binary files /dev/null and b/src/main/webapp/static/img/news.png differ diff --git a/src/main/webapp/static/img/service.png b/src/main/webapp/static/img/service.png new file mode 100644 index 0000000..cb30433 Binary files /dev/null and b/src/main/webapp/static/img/service.png differ diff --git a/src/main/webapp/static/img/shop.png b/src/main/webapp/static/img/shop.png new file mode 100644 index 0000000..4e6b2db Binary files /dev/null and b/src/main/webapp/static/img/shop.png differ diff --git a/src/main/webapp/static/js/index.js b/src/main/webapp/static/js/index.js index e69de29..06e9b27 100644 --- a/src/main/webapp/static/js/index.js +++ b/src/main/webapp/static/js/index.js @@ -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()) + }) +}) \ No newline at end of file diff --git a/src/main/webapp/static/js/login.js b/src/main/webapp/static/js/login.js index 9616069..cf56549 100644 --- a/src/main/webapp/static/js/login.js +++ b/src/main/webapp/static/js/login.js @@ -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"; })