#secondaryScroll { /*底部导航栏*/ } #secondaryScroll .secondary-content { /*.secondary-type{ margin-top: 1rem; width: 100%; height: 100%; div { float: left; padding-top: 5%; padding-bottom: 5%; text-align: center; background: #ffffff; &:nth-child(1),&:nth-child(3),&:nth-child(5),&:nth-child(7){ border-bottom: 1px solid; border-right:1px solid; } img { width: 50px; height: 50px; } .mine-text { display: block; width: 100%; border: 0; padding: 0; } } }*/ } #secondaryScroll .secondary-content .secondary-head { position: relative; text-align: center; } #secondaryScroll .secondary-content .secondary-head img { width: 100%; } #secondaryScroll .secondary-content .secondary-head img:nth-child(2) { width: 5rem; position: absolute; left: 50%; margin-left: -2.5rem; bottom: -2.3rem; } #secondaryScroll .secondary-content .secondary-list .products-list { margin: 0; list-style: none; padding-left: 0; } #secondaryScroll .secondary-content .secondary-list .products-list li { padding-top: 0.4rem; text-align: center; width: 50%; float: left; } #secondaryScroll .secondary-content .secondary-list .products-list li img { width: 50px; height: 50px; } #secondaryScroll .secondary-content .secondary-list .products-list li div { border-bottom: 3px solid #a8a8a8; width: 5rem; margin: 0 auto; padding-bottom: 0.3rem; } #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(1), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(3), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(5), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(7) { border-bottom: 1px solid #b7b7b7; border-right: 1px solid #b7b7b7; } #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) { border-bottom: 1px solid #b7b7b7; } #secondaryScroll .prevent-scroll { width: 100%; position: fixed; bottom: 0; background-color: #2a2400; } #secondaryScroll .prevent-scroll .width-percent-33 .title-container-square { padding: 20%; position: relative; text-align: center; } #secondaryScroll .prevent-scroll .width-percent-33 .title-container-square a { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #secondaryScroll .prevent-scroll .width-percent-33 .title-container-square a .logo { background-size: 65% 65%; background-position: center center; padding: 10%; margin-top: 5px; display: inline-block; border-radius: 50%; } #secondaryScroll .prevent-scroll .width-percent-33 .title-container-square a .name { display: block; margin-top: -5px; font-size: 12px; } #secondaryScroll .prevent-scroll .width-percent-33:nth-child(1) a:active .logo { border-radius: inherit; background: url("http://odulvej8l.bkt.clouddn.com/tab_home.png") no-repeat; background-size: 100%; background-position: center center; } #secondaryScroll .prevent-scroll .width-percent-33:nth-child(1) a:active .name { color: #fff; } #secondaryScroll .prevent-scroll .width-percent-33:nth-child(1) a .logo { border-radius: inherit; background: url("http://odulvej8l.bkt.clouddn.com/tab_home_pre.png") no-repeat; background-size: 90%; background-position: center center; } #secondaryScroll .prevent-scroll .width-percent-33:nth-child(1) a .name { color: #b89400; } #secondaryScroll .prevent-scroll .width-percent-33:nth-child(2) a .logo { border-radius: 50%; display: inline-block; padding: 25%; background-size: 100%; margin-top: -15px; background: url("http://odulvej8l.bkt.clouddn.com/tab_butler.png") 0 0 no-repeat #2a2400; background-size: 65% 65%; background-position: center; } #secondaryScroll .prevent-scroll .width-percent-33:nth-child(3) a .logo { border-radius: inherit; background: url("http://odulvej8l.bkt.clouddn.com/tab_me_pre.png"); background-repeat: no-repeat; background-size: 90%; background-position: center center; } #secondaryScroll .prevent-scroll .width-percent-33:nth-child(3) a .name { color: #b89400; } #secondaryScroll .prevent-scroll .width-percent-33:nth-child(3) a:active .logo { border-radius: inherit; background: url("http://odulvej8l.bkt.clouddn.com/tab_me.png"); background-repeat: no-repeat; background-size: 100%; background-position: center center; } #secondaryScroll .prevent-scroll .width-percent-33:nth-child(3) a:active .name { color: #fff; } @media (min-width: 768px) { #secondaryScroll .prevent-scroll .width-percent-33 .title-container-square a .name { display: block; margin-top: 5px; font-size: 1.6rem; } } /*媒体查询*/ @media (min-width: 414px) { #secondaryScroll .secondary-content .secondary-head { position: relative; text-align: center; } #secondaryScroll .secondary-content .secondary-head img { width: 100%; } #secondaryScroll .secondary-content .secondary-head img:nth-child(2) { width: 7rem; position: absolute; left: 50%; margin-left: -3.5rem; bottom: -3.4rem; } #secondaryScroll .secondary-content .secondary-list .products-list { /*margin: 0; list-style: none; padding-left: 0;*/ } #secondaryScroll .secondary-content .secondary-list .products-list li { /*padding-top:0.4rem; text-align: center; width: 50%; float: left;*/ } #secondaryScroll .secondary-content .secondary-list .products-list li img { width: 2.7rem; height: 2.7rem; } #secondaryScroll .secondary-content .secondary-list .products-list li div { border-bottom: 3px solid #a8a8a8; width: 6rem; margin: 0 auto; padding-bottom: 0.3rem; } #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(1), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(3), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(5), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(7) { border-bottom: 1px solid #b7b7b7; border-right: 1px solid #b7b7b7; } #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) { border-bottom: 1px solid #b7b7b7; } } @media (min-width: 768px) { #secondaryScroll .secondary-content .secondary-head { position: relative; text-align: center; } #secondaryScroll .secondary-content .secondary-head img { width: 100%; } #secondaryScroll .secondary-content .secondary-head img:nth-child(2) { width: 8rem; position: absolute; left: 50%; margin-left: -4rem; bottom: -3.9rem; } #secondaryScroll .secondary-content .secondary-list .products-list { /*margin: 0; list-style: none; padding-left: 0;*/ } #secondaryScroll .secondary-content .secondary-list .products-list li { /*padding-top:0.4rem; text-align: center; width: 50%; float: left;*/ } #secondaryScroll .secondary-content .secondary-list .products-list li img { width: 5rem; height: 5rem; } #secondaryScroll .secondary-content .secondary-list .products-list li div { border-bottom: 3px solid #a8a8a8; width: 6rem; margin: 0 auto; padding-bottom: 0.3rem; } #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(1), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(3), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(5), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(7) { border-bottom: 1px solid #b7b7b7; border-right: 1px solid #b7b7b7; } #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) { border-bottom: 1px solid #b7b7b7; } } @media (max-height: 480px) { #secondaryScroll .secondary-content .secondary-list .products-list { height: 420px ; } } @media (min-height: 568px) { #secondaryScroll .secondary-content .secondary-list .products-list li img { width: 1.5rem; height: 1.5rem; } #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) { border-bottom: 1px solid #b7b7b7; } } @media (min-height: 667px) { #secondaryScroll .secondary-content .secondary-list .products-list li img { width: 2.3rem; height: 2.3rem; } #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) { border-bottom: 1px solid #b7b7b7; } } @media (min-height: 700px) { #secondaryScroll .secondary-content .secondary-list .products-list li img { width: 2.8rem; height: 2.8rem; } #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6), #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) { border-bottom: 1px solid #b7b7b7; } }