Skip to content

Commit

Permalink
JD
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhaitianye
zhaitianye committed Dec 8, 2017
1 parent b1f2866 commit 92346eb
Show file tree
Hide file tree
Showing 8 changed files with 237 additions and 10 deletions.
70 changes: 61 additions & 9 deletions html/css/JD/JD.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
.searchinputbox{width: 350px;}
.mr-10-7{margin-right: 7px;}
.mr-10-8{margin-right: 8px;}
.w-190-150{width: 150px;}
.w-190-158{width: 158px;}
.w-240-200{width: 200px;}
.w-790-590{width: 590px;}
.w-550-400{width: 400px;}
.w-500-350{width: 350px;}
.w-190-150{width: 150px;}
.w-390-190{width: 190px;}
.w-500-350{width: 350px;}
.w-550-400{width: 400px;}
.w-790-590{width: 590px;}
.w-800-600{width: 600px;}
.w-1000-800{width: 800px;}
.w-1000-830{width: 830px;}
Expand All @@ -33,13 +33,13 @@
.container-tipsv2tips{width:33.33333%;}
.mr-10-7{margin-right: 10px;}
.mr-10-8{margin-right: 10px;}
.w-190-150{width: 190px;}
.w-190-158{width: 190px;}
.w-240-200{width: 240px;}
.w-790-590{width: 790px;}
.w-550-400{width: 550px;}
.w-500-350{width: 500px;}
.w-190-150{width: 190px;}
.w-390-190{width: 390px;}
.w-500-350{width: 500px;}
.w-550-400{width: 550px;}
.w-790-590{width: 790px;}
.w-800-600{width: 800px;}
.w-1000-800{width: 1000px;}
.w-1000-830{width: 1000px;}
Expand Down Expand Up @@ -67,6 +67,7 @@ a:hover{text-decoration: none}
.col-cc0000i{color: #c00000 !important;}
.col-e01121{color: #e01121;}
.col-e01222{color: #e01222;}
.col-e93524{color: #e93524;}
.col-c2c2c2{color: #c2c2c2;}
.col-005ea7{color: #005ea7;}
.col-4998a1{color: #4998a1}
Expand All @@ -84,6 +85,8 @@ a:hover{text-decoration: none}
.bg-999395{background-color: #999395}
.bg-db192b{background-color: #db192b}
.bg-e01222{background-color: #e01222;}
.bg-e93524{background-color: #e93524;}
.bg-e7e7e7{background-color: #e7e7e7;}
.bg-440106{background-color: #440106;}
.bg-eee{background-color: #eee;}
.bg-c81623i{background-color: #c81623 !important;}
Expand All @@ -104,6 +107,7 @@ a:hover{text-decoration: none}
.bor-col-e6e6e6{border-color: #e6e6e6 !important}
.bor-col-e01222{border-color: #e01222 !important}
.bor-col-db192b{border-color: #db192b !important}
.bor-col-e93524{border-color: #e93524 !important}
.bor-col-c7d8e3{border-color: #c7d8e3 !important}
.bor-col-d2d1d1{border-color: #d2d1d1 !important}
.hov-bor-col-338fff:hover{border-color: #338fff !important;}
Expand All @@ -124,17 +128,20 @@ a:hover{text-decoration: none}
.img-70{width: 70px;height: 70px;}
.img-80{width: 80px;height: 80px;}
.img-130{width: 130px;height: 130px;}
.img-140{width: 140px;height: 140px;}
.t-9{top: 9px;}
.t-10{top: 10px;}
.t-12{top: 12px;}
.t--12{top:-12px;}
.t-15{top: 15px;}
.t-17{top: 17px;}
.t-18{top: 18px;}
.t-25{top: 25px;}
.t-26{top: 26px;}
.t-29{top: 29px;}
.t-30{top: 30px;}
.t--30{top: -30px;}
.t-33{top: 33px;}
.t-34{top: 34px;}
.t-35{top: 35px;}
.t-36{top: 36px;}
Expand All @@ -155,6 +162,7 @@ a:hover{text-decoration: none}
.r--70{right:-70px;}
.r-100{right:100px;}
.l-11{left: 11px;}
.l-15{left: 15px;}
.l-20{left: 20px;}
.l-27{left: 27px;}
.l-29{left: 29px;}
Expand All @@ -164,6 +172,7 @@ a:hover{text-decoration: none}
.l-37{left: 37px;}
.l-40{left: 40px;}
.l--95{left: -95px;}
.l-100{left: 100px;}
.l-154{left: 154px;}
.l-190{left: 190px;}
.l-200{left: 200px;}
Expand Down Expand Up @@ -218,6 +227,7 @@ a:hover{text-decoration: none}
.w-190{width: 190px;}
.w-195{width: 195px;}
.w-198{width: 198px;}
.w-200{width: 200px;}
.w-280{width: 280px;}
.w-310{width: 310px;}
.w-320{width: 320px;}
Expand All @@ -234,6 +244,7 @@ a:hover{text-decoration: none}
.w-550{width: 550px;}
.w-696{width: 696px;}
.w-790{width: 790px;}
.w-800{width: 800px;}
.h-1{height: 1px;}
.h-2{height: 2px;}
.h-5{height: 5px;}
Expand All @@ -256,9 +267,11 @@ a:hover{text-decoration: none}
.h-40{height: 40px;}
.h-56{height: 56px;}
.h-57{height: 57px;}
.h-66{height: 66px;}
.h-70{height: 70px;}
.h-96{height: 96px}
.h-116{height: 116px;}
.h-117{height: 117px;}
.h-119{height: 119px;}
.h-120{height: 120px;}
.h-124{height: 124px;}
Expand All @@ -273,10 +286,13 @@ a:hover{text-decoration: none}
.h-159{height: 159px;}
.h-167{height: 167px;}
.h-185{height: 185px;}
.h-195{height: 195px;}
.h-196{height: 196px;}
.h-210{height: 210px;}
.h-215{height: 215px;}
.h-225{height: 225px;}
.h-250{height: 250px;}
.h-270{height: 270px;}
.h-340{height: 340px;}
.h-355{height: 355px;}
.h-363{height: 363px;}
Expand Down Expand Up @@ -314,6 +330,7 @@ a:hover{text-decoration: none}
.mb-17{margin-bottom: 17px;}
.mb-18{margin-bottom: 18px;}
.opa-0{opacity: 0;}
.f-34{font-size: 34px;}
.f-w-300{font-weight: 300;}
.f-w-400{font-weight: 400;}
.f-w-700{font-weight: 700;}
Expand All @@ -328,6 +345,7 @@ a:hover{text-decoration: none}
.line-h-26{line-height: 26px;}
.line-h-28{line-height: 28px;}
.line-h-33{line-height: 33px;}
.line-h-36{line-height: 36px;}
.line-h-37{line-height: 37px;}
.text-ind-6{text-indent: 6px;}
.text-ind-10{text-indent: 10px;}
Expand Down Expand Up @@ -450,6 +468,12 @@ a:hover{text-decoration: none}
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease, -moz-transform .4s ease;
}
.transition_05p{-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
-moz-transition: transform .5s, -moz-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s, -moz-transform .5s
}
.transform_y0{
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
Expand Down Expand Up @@ -633,4 +657,32 @@ a:hover{text-decoration: none}
.bg_recommend_v1_side3_v4{
background: url(../../img/JD/comm/angle_v1.png) -100px -100px no-repeat;background-size:218px 188px;
}
.recommend_v1_side3_a:hover > p {color: #c81623;}
.recommend_v1_side3_a:hover > p {color: #c81623;}
.bg_recommend_v2_side1{
background: #f03118;
background: -webkit-linear-gradient(left, #f03118, #e62910);
background: -moz-linear-gradient(left, #f03118, #e62910);
background: linear-gradient(90deg, #f03118, #e62910)
}
.bg_recommend_v2_side1_lt_angle{
background: url(../../img/JD/comm/angle_v2.png) 0px 0px no-repeat;background-size:76px 60px;
}
.bg_recommend_v2_side1_pv1{
background: #e7e7e7 url(data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABBAAD/4QN3aHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjU4MGVkZWUtODkyMy0zNTQyLTlmNGYtMDY0MjZmNjQ0ZTI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY0MTVFMjc0NzEwQzExRTY4OUM1REJENTBFRjc3NTA0IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY0MTVFMjczNzEwQzExRTY4OUM1REJENTBFRjc3NTA0IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVBQkEyNjA3NzhENTExRTZBODUzOUE4RjdBOUQ0NTM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVBQkEyNjA4NzhENTExRTZBODUzOUE4RjdBOUQ0NTM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABQQEBAQEBQQEBQcFBAUHCQcFBQcJCggICQgICg0KCwsLCwoNDAwMDQwMDA8PEREPDxcWFhYXGRkZGRkZGRkZGQEGBgYKCQoUDQ0UFhEOERYZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZ/8AAEQgAAwAIAwERAAIRAQMRAf/EAFMAAQAAAAAAAAAAAAAAAAAAAAgBAQAAAAAAAAAAAAAAAAAAAAAQAAAFBQAAAAAAAAAAAAAAAAARMVECIaEyAxURAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AFzpPmzySTJWzgP/2Q==) 0px 0px repeat-x;
}
.shadow_recommend_v2_side1_v1{-webkit-box-shadow: 0 0 30px #999;-moz-box-shadow: 0 0 30px #999;box-shadow: 0 0 30px #999;}
.recommend_v2_side1_liv1:hover > a > img{
-webkit-transform: translateX(15px);
-moz-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px)
}
.bg_recommend_v2_side2{
background: #4f629f;
background: -webkit-linear-gradient(left, #4f629f, #5b5c95);
background: -moz-linear-gradient(left, #4f629f, #5b5c95);
background: linear-gradient(90deg, #4f629f, #5b5c95)
}
.bg_recommend_v2_side2_lt_angle{
background: url(../../img/JD/comm/angle_v2.png) -48px 0px no-repeat;background-size:76px 60px;
}
160 changes: 160 additions & 0 deletions html/html/JD/JD.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11989,6 +11989,166 @@
</div>
</div>
</div>
<div id="recommend_v2" class="clear full-w mb-30 pos-r">
<div class="container clear pl-0 pr-0 pos-r">
<!-- 左 -->
<div class="clear w-790-590 h-270 pull-left mr-10 bg-white recommend_v2_side1 overflow-h">
<!-- 头部 -->
<div class="clear redv2_side1_header full-w pl-30 pr-20 h-55 pos-r overflow-h bg_recommend_v2_side1">
<div class="clear pull-left">
<div class="clear pos-a t-0 l-0 bg_lt_anglev1 z-9">
</div>
<div class="clear pos-a img-28 bg_recommend_v2_side1_lt_angle t--4 l--4 z-99">
</div>
<div class="clear pull-left col-white f-26 line-h-40 f-w-400 pt-9 family-fzzhengheis">
领券中心
</div>
</div>
<a class="pull-right dis-ib col-white mt-19 line-h-24 f-14 pr-20 pos-r" href="#">
前往领券中心
<i class="pos-a bg_skill_l_sidev2 w-15 h-16 r-0 t-4"></i>
</a>
</div>
<!-- 内容 -->
<div class="clear full-w">
<ul class="clear pt-10 pb-10 w-800 pull-left">
<li class="w-198 h-195 pull-left bor bor-r bor-col-e7e7e7 pos-r overflow-h recommend_v2_side1_liv1">
<a class="dis-b full-wh col-666 " href="">
<div class="clear pos-a z-99 l-15 t-15 w-100 bor bor-3px bor-t bor-col-e93524 bg-white">
<p class="mt-7 overflow-h h-36 line-h-36 f-34 f-w-700 col-f10214">
<i class="mr-3 family-Arial f-w-400 f-12 col-f10214">¥</i>16
</p>
<p class="mg-3 overflow-h h-36 line-h-18 col-e93524">
<span class="col-e93524 dis-ib vert-m">
仅可购买京东自营图书音像商品
</span>
</p>
<p class="pt-15 pb-15 pl-10 pr-10 full-w h-66 col-666 line-h-18 bg_recommend_v2_side1_pv1">
<span class="col-666 dis-ib vert-m">消费满200元可用</span>
</p>
<p class="full-w h-26 bg-e93524 line-h-26 text-center col-white text-overflow">
更多好券
</p>
</div>
<img class="pos-a t-25 r-15 img-140 z-1 transition_05p" src="../../img/JD/recommend/v2_side1_tipsv1.jpg" alt="">
<div class="clear pos-a l-100 t-33 w-15 h-117 shadow_recommend_v2_side1_v1 z-9">
</div>
</a>
</li>
<li class="w-198 h-195 pull-left bor bor-r bor-col-e7e7e7 pos-r overflow-h recommend_v2_side1_liv1">
<a class="dis-b full-wh col-666 " href="">
<div class="clear pos-a z-99 l-15 t-15 w-100 bor bor-3px bor-t bor-col-e93524 bg-white">
<p class="mt-7 overflow-h h-36 line-h-36 f-34 f-w-700 col-f10214">
<i class="mr-3 family-Arial f-w-400 f-12 col-f10214">¥</i>600
</p>
<p class="mg-3 overflow-h h-36 line-h-18 col-e93524">
<span class="col-e93524 dis-ib vert-m">
仅可购买自营阿玛尼钟表商品
</span>
</p>
<p class="pt-15 pb-15 pl-10 pr-10 full-w h-66 col-666 line-h-18 bg_recommend_v2_side1_pv1">
<span class="col-666 dis-ib vert-m">消费满999元可用</span>
</p>
<p class="full-w h-26 bg-e93524 line-h-26 text-center col-white text-overflow">
更多服饰箱包券
</p>
</div>
<img class="pos-a t-25 r-15 img-140 z-1 transition_05p" src="../../img/JD/recommend/v2_side1_tipsv2.jpg" alt="">
<div class="clear pos-a l-100 t-33 w-15 h-117 shadow_recommend_v2_side1_v1 z-9">
</div>
</a>
</li>
<li class="w-198 h-195 pull-left bor bor-r bor-col-e7e7e7 pos-r overflow-h recommend_v2_side1_liv1">
<a class="dis-b full-wh col-666 " href="">
<div class="clear pos-a z-99 l-15 t-15 w-100 bor bor-3px bor-t bor-col-e93524 bg-white">
<p class="mt-7 overflow-h h-36 line-h-36 f-34 f-w-700 col-f10214">
<i class="mr-3 family-Arial f-w-400 f-12 col-f10214">¥</i>1500
</p>
<p class="mg-3 overflow-h h-36 line-h-18 col-e93524">
<span class="col-e93524 dis-ib vert-m">
仅可购买自营冰洗冷全品类部分商品
</span>
</p>
<p class="pt-15 pb-15 pl-10 pr-10 full-w h-66 col-666 line-h-18 bg_recommend_v2_side1_pv1">
<span class="col-666 dis-ib vert-m">消费满10000元可用</span>
</p>
<p class="full-w h-26 bg-e93524 line-h-26 text-center col-white text-overflow">
更多数码家电券
</p>
</div>
<img class="pos-a t-25 r-15 img-140 z-1 transition_05p" src="../../img/JD/recommend/v2_side1_tipsv3.jpg" alt="">
<div class="clear pos-a l-100 t-33 w-15 h-117 shadow_recommend_v2_side1_v1 z-9">
</div>
</a>
</li>
<li class="w-200 h-195 pull-left bor bor-r bor-col-e7e7e7 pos-r overflow-h recommend_v2_side1_liv1">
<a class="dis-b full-wh col-666 " href="">
<div class="clear pos-a z-99 l-15 t-15 w-100 bor bor-3px bor-t bor-col-e93524 bg-white">
<p class="mt-7 overflow-h h-36 line-h-36 f-34 f-w-700 col-f10214">
<i class="mr-3 family-Arial f-w-400 f-12 col-f10214">¥</i>800
</p>
<p class="mg-3 overflow-h h-36 line-h-18 col-e93524">
<span class="col-e93524 dis-ib vert-m">
仅可购买家纺指定商品
</span>
</p>
<p class="pt-15 pb-15 pl-10 pr-10 full-w h-66 col-666 line-h-18 bg_recommend_v2_side1_pv1">
<span class="col-666 dis-ib vert-m">消费满1599元可用</span>
</p>
<p class="full-w h-26 bg-e93524 line-h-26 text-center col-white text-overflow">
更多家居家纺券
</p>
</div>
<img class="pos-a t-25 r-15 img-140 z-1 transition_05p" src="../../img/JD/recommend/v2_side1_tipsv4.jpg" alt="">
<div class="clear pos-a l-100 t-33 w-15 h-117 shadow_recommend_v2_side1_v1 z-9">
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 右 -->
<div class="clear w-390 h-270 pull-left bg-white">
<!-- 头部 -->
<div class="clear redv2_side1_header full-w pl-30 pr-20 h-55 pos-r overflow-h bg_recommend_v2_side2">
<div class="clear pull-left">
<div class="clear pos-a t-0 l-0 bg_lt_anglev1 z-9">
</div>
<div class="clear pos-a img-28 bg_recommend_v2_side2_lt_angle t--4 l--4 z-99">
</div>
<div class="clear pull-left col-white f-26 line-h-40 f-w-400 pt-9 family-fzzhengheis">
觅me
</div>
</div>
<a class="pull-right dis-ib col-white mt-19 line-h-24 f-14 pr-20 pos-r" href="#">
探索生活
<i class="pos-a bg_skill_l_sidev2 w-15 h-16 r-0 t-4"></i>
</a>
</div>
<!-- 内容 -->
<div class="clear full-w h-215">
<div id="recommend_v2_side2_swiper" class="swiper-container full-wh">
<div class="swiper-wrapper h-215">
<div class="swiper-slide bg-white">
<a class="dis-ib pt-25 pb-40 pl-30 pr-30 h-210 pos-r text-center col-333 full-w" href="">
1111
</a>
</div>
<div class="swiper-slide bg-white">slider2</div>
<div class="swiper-slide bg-white">slider3</div>
</div>
<!-- 导航按钮 -->
<!-- <div id="recommend_v2_side2_swiper_button_prev" class="swiper-button-prev">
</div>
<div id="recommend_v2_side2_swiper_button_next" class="swiper-button-next">
</div> -->
<!-- 分页器 -->
<!-- <div id="recommend_v2_side2_swiper_pagination" class="swiper-pagination"></div> -->
</div>
</div>
</div>
</div>
</div>
<footer class="clear" style="height: 1000px; width: 100%">
</footer>
<script src="../../js/comm/jquery.min.js"></script>
Expand Down
Binary file added html/img/JD/comm/angle_v2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added html/img/JD/recommend/v2_side1_tipsv1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added html/img/JD/recommend/v2_side1_tipsv2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added html/img/JD/recommend/v2_side1_tipsv3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added html/img/JD/recommend/v2_side1_tipsv4.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 16 additions & 1 deletion html/js/JD/JD.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1502,7 +1502,22 @@ $(document).ready(function() {
$(".recommend_v1_side3_s").hide();
$(".recommend_v1_side3_s5").show();
});

/*推荐中心二层右部swiper*/
var recommend_v2_side2_swiper = new Swiper('#recommend_v2_side2_swiper', {
/*autoplay: {
delay: 1500,
},*/
loop : true,
/*navigation: {
nextEl: '#recommend_v2_side2_swiper_button_next',
prevEl: '#recommend_v2_side2_swiper_button_prev',
},
effect : 'fade',
speed:500,
pagination: {
el: '#recommend_v2_side2_swiper_pagination',
},*/
});



Expand Down

0 comments on commit 92346eb

Please sign in to comment.