WebRoot/resource/uc/home.css

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

.gray-box { background-color: #f5f5f5; }

.white-box { background-color: #fff; }

.section-hd { position: relative; margin: 35px 0 15px; height: 44px; line-height: 44px; }
.section-hd .title { padding-left: 4px; font-size: 24px; }
.section-hd .bar { position: absolute; top: 0; right: 0; }
.section-hd .more { line-height: 24px; }
.section-hd .more a { float: left; margin: 10px 0 10px 10px; color: #787878; }
.section-hd .more a:hover { border-bottom: 1px solid #000; }

.home-full-banner { position: relative; height: 480px; }
.home-full-banner .item { position: relative; display: block; height: 480px; -webkit-transform: translateZ(0); transform: translateZ(0); }
.home-full-banner .item img { position: absolute; top: 0; left: 50%; margin-left: -960px; width: 1920px; height: 480px; }
.home-full-banner .slick-dots { position: absolute; bottom: 20px; left: 0; width: 100%; height: 16px; line-height: 16px; text-align: center; font-size: 0; }
.home-full-banner .slick-dots > li { display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 6px; width: 14px; height: 14px; border: 2px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; }
.home-full-banner .slick-dots > li > button { display: none; }
.home-full-banner .slick-dots > li.slick-active { background: #f52f3e; border-color: #f52f3e; }

.promo-list { margin: 50px 0 30px; }
.promo-list .col { float: left; padding-left: 13px; }
.promo-list .col:first-child { padding-left: 0; }
.promo-list .item { display: block; }
.promo-list .item img { display: block; width: 290px; height: 184px; }

.flash-sale { margin: 0 0 -16px -16px; }
.flash-sale-section { padding-bottom: 50px; }
.flash-sale .grid { position: relative; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 0 16px 16px; overflow: hidden; line-height: 22px; background-color: #fff; }
.flash-sale .grid-b { width: 592px; height: 396px; background: transparent; }
.flash-sale .grid-b img { display: block; -webkit-transition: transform 0.5s; transition: transform 0.5s; -webkit-perspective: 1000; perspective: 1000; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flash-sale .grid-b:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); }
.flash-sale .grid-m { width: 288px; height: 396px; padding: 40px 25px; }
.flash-sale .grid-m img { width: 240px; height: 240px; bottom: 20px; right: 10px; }
.flash-sale .grid-s { padding: 40px 120px 0 24px; width: 288px; height: 190px; }
.flash-sale .grid-s img { width: 110px; height: 110px; bottom: 10px; right: 10px; }
.flash-sale .grid-m img, .flash-sale .grid-s img { position: absolute; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.flash-sale .grid-m:hover img, .flash-sale .grid-s:hover img { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
.flash-sale .inner-text { position: relative; z-index: 1; }
.flash-sale .tit { font-size: 16px; color: #333; }
.flash-sale .stit { color: #666; }
.flash-sale .info { color: #ff4d4d; }

.brand-feast-section { padding: 20px 0 65px; }
.brand-feast .ad-box { float: left; width: 380px; height: 380px; border: 1px solid #eee; }
.brand-feast .ad-box img { width: 380px; height: 380px; }
.brand-feast-list { float: right; width: 798px; }
.brand-feast-list .item { position: relative; float: left; margin: 0 0 -1px -1px; width: 132px; height: 126px; text-align: center; border: 1px solid #eee; }
.brand-feast-list .item .logo { width: 132px; height: 126px; display: table-cell; vertical-align: middle; }
.brand-feast-list .item .logo img { max-width: 120px; max-height: 70px; }
.brand-feast-list .item .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; background-color: rgba(0, 0, 0, 0.8); font-size: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }
.brand-feast-list .item .mask:after { content: ''; height: 100%; display: inline-block; vertical-align: middle; }
.brand-feast-list .item .mask .text { display: inline-block; vertical-align: middle; font-size: 13px; color: #fff; }
.brand-feast-list .item .mask:hover { opacity: 1; filter: alpha(opacity=100); }

.floor-wrap { padding: 20px 0 65px; }
.floor-section .section-bd { border-top: 1px solid #f5f5f5; }
.floor-section .section-side { position: relative; float: left; overflow: hidden; width: 268px; height: 597px; }
.floor-section .section-side .banner a { display: block; height: 597px; }
.floor-section .section-side .brands { position: absolute; left: 0; bottom: 0; width: 100%; height: 200px; overflow: hidden; background-color: #fff; }
.floor-section .section-side .brands .item { float: left; margin: 0 -1px -1px; border-left: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; }