.fui-tabbar { margin-bottom: 2px; background: white; position: relative; overflow: hidden; } .fui-tabbar.style1 { height: 80rpx; white-space: nowrap; } .fui-tabbar .item { display: inline-block; width: 170rpx; text-align: center; line-height: 77rpx; height: 77rpx; font-size: 28rpx; color: #000; border-bottom: 4rpx solid transparent; } .fui-tabbar.style2 .item { width: 25%; } .fui-tabbar-content { background: #fff; padding: 0 24rpx; } .fui-tabbar-content text { width: 100%; font-size: 24rpx; line-height: 36rpx; } .fui-topmenu { position: fixed; top: 0; left: 0; right: 0; z-index: 18; } .tabbar-list { display: flex; height: 32rpx; padding-top: 20rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #ededed; } .diy-fixedsearch.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .diy-fixedsearch { height: 88rpx; overflow: hidden; } .diy-fixedsearch .background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000000; opacity: 0.5; z-index: 1; } .diy-fixedsearch .inner { position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; color: #fff; height: 88rpx; padding: 0 16rpx; } .diy-fixedsearch .inner text { font-size: 40rpx; } .diy-fixedsearch .inner .leftnav,.diy-fixedsearch .inner .rightnav { height: 56rpx; line-height: 56rpx; } .diy-fixedsearch .inner .leftnav image,.diy-fixedsearch .inner .rightnav image { height: 100%; } .diy-fixedsearch .inner .center { height: 56rpx; width: 100%; padding: 0 16rpx; -webkit-box-flex: 1; flex: 1; } .diy-fixedsearch .inner .center.circle view { border-radius: 10rpx; } .diy-fixedsearch .inner .center.round view { border-radius: 30rpx; } .diy-fixedsearch .inner .center view { border-radius: 0; background: #fff; -webkit-appearance: none; height: 56rpx; border: 0; width: 100%; font-size: 28rpx; color: #666; float: left; line-height: 56rpx; padding-top: 2rpx; } .diy-fixedsearch .inner .rightnav { height: 56rpx; line-height: 56rpx; } .fui-searchbar { position: relative; z-index: 10; height: 88rpx; padding-right: 20rpx; padding-left: 20rpx; background-color: #f7f7f8; backface-visibility: hidden; } .fui-searchbar .searchbar.center { background: none; } .searchbar { margin: 0 -0.5rem; padding: 0.4rem 0.6rem; overflow: hidden; height: 2.2rem; -webkit-box-align: center; align-items: center; position: relative; } .weui-search-bar__input { height: 58rpx; line-height: 62rpx; font-size: 28rpx; } .flex-icon-search { position: absolute; width: 60rpx; height: 60rpx; left: 0px; top: 0px; line-height: 60rpx; text-align: center; } .weui-search-bar__input.flex-input { padding: 0 20rpx 0 60rpx; flex: 1; } .flex-head-search .weui-search-bar__form { border-radius: 0; } .flex-head-search .weui-search-bar__form.radius { border-radius: 10rpx; } .flex-head-search .weui-search-bar__form.round { border-radius: 30rpx; } .advimg { width: 100%; height: 100%; position: relative; z-index: 0; } .index-adcs-sqiper { height: auto; text-align: left; } .index-advs-navigator { height: 100%; width: 100%; } .hotdot { height: 30rpx; width: 70rpx; } .index-hot::before { position: absolute; content: ''; left: 0; right: 0; top: auto; bottom: 0px; } .index-hot { height: 60rpx; line-height: 60rpx; position: relative; } .index-adcs-sqiper.index-notification-swiper { min-height: 60rpx; max-height: 60rpx; height: 60rpx; line-height: 60rpx; overflow: hidden; } .icon-notification { width: 15px; height: 15px; vertical-align: middle; margin: 0px 0px 0px 5px; border-left: 1px solid #ccc; padding-left: 10rpx; } .notification-navigoter { font-size: 24rpx; height: 60rpx; line-height: 60rpx; display: inline-block; } .navs-navname { font-size: 24rpx; height: 40rpx; line-height: 40rpx; overflow: hidden; } .index-banner .index-adcs-sqiper.index-banner-sqiper { height: auto; line-height: 20rpx; overflow: hidden; position: relative; } .index-banner-sqiper.square .wx-swiper-dot { width: 20rpx; height: 20rpx; border-radius: 0; } .index-banner-sqiper.round .wx-swiper-dot { width: 20rpx; height: 20rpx; border-radius: 50%; } .index-banner-sqiper.rectangle .wx-swiper-dot { width: 24rpx; height: 20rpx; border-radius: 0; left: 0; margin-left: 10px; } image.circle { border-radius: 50%; } image.radius { border-radius: 20%; } .menu swiper-item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; } .menu swiper-item .fui-icon-col { width: 25%; text-align: center; } .menu swiper-item.col-3 .fui-icon-col { width: 33.3%; text-align: center; } .menu swiper-item.col-5 .fui-icon-col { width: 20%; text-align: center; } .fui-icon-col { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between; height: 140rpx; margin-bottom: 20rpx; } .navigator-hover { background-color: transparent!important; } .fui-icon-col .text { font-size: 24rpx; } .fui-menu-item { padding: 20rpx; text-align: center; position: relative; color: #666; font-size: 30rpx; width: 1%; display: table-cell; -webkit-user-select: none; -moz-user-select: none; transition: background-color 300ms; } .fui-menu-group .fui-menu-item:before { content: ''; position: absolute; left: 0; top: 20rpx; bottom: 20rpx; border-left: 1px solid #eee; } .fui-menu-group .fui-menu-item:first-child:before { border: 0; } .fui-icon-group { width: 100%; position: relative; overflow: hidden; background: #fff; } .fui-icon-group .fui-icon-col { width: 25%; height: auto; position: relative; padding: 0; margin: 10px 0; text-align: center; transition: background-color 300ms; float: left; border: none!important; } .fui-icon-group.col-4 .fui-icon-col { width: 25%; } .fui-icon-group.col-3 .fui-icon-col { width: 33.33%; } .fui-icon-group.col-5 .fui-icon-col { width: 20%; } .fui-picture image { width: 100%; } .fui-pictures { height: auto; display: block; overflow: hidden; } .fui-pictures.row-2 .item { width: 50%; } .fui-pictures.row-3 .item { width: 33.3%; } .fui-pictures.row-4 .item { width: 25%; } .fui-pictures.row-5 .item { width: 20%; } .fui-pictures.single .item { float: left; } .fui-pictures .item { height: auto; width: 100%; display: inline-block; box-sizing: border-box; } .fui-pictures .item .image { position: relative; } .fui-pictures .item image { display: block; width: 100%; height: 100%; } .fui-pictures .item .image .title { position: absolute; bottom: 0; left: 0; right: 0; line-height: 40rpx; color: #fff; padding: 16rpx 6rpx 2rpx; font-size: 28rpx; background: linear-gradient(to top,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fui-pictures .item .text { font-size: 28rpx; height: 40rpx; line-height: 48rpx; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6rpx; } .fui-picturew { overflow: hidden; } .fui-picturew.row-2 .item { width: 50%; } .fui-picturew.row-3 .item { width: 33.33%; } .fui-picturew.row-4 .item { width: 24.9%; } .fui-picturew .item { display: block; float: left; height: auto; } .fui-picturew .item image { display: block; width: auto; max-width: 100%; } .fui-cube.diypage-cube image { display: block; width: auto; max-width: 100%; } .fui-cube.diypage-cube { height: auto; width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding-bottom: 0; } .fui-cube.diypage-cube image { width: 100%; height: 100%; } .fui-cube navigator { width: auto; height: auto; box-sizing: border-box; } .fui-cube .navigator { width: 100%; height: 100%; box-sizing: border-box; } .flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex.column { flex-direction: column; } .flex1 { -webkit-box-flex: 1; flex: 1; } .picturew-swiper .item { width: auto; } .diy-coupon { padding: 0 12rpx; height: auto; overflow: hidden; } .diy-coupon .diy-coupon-item { width: 33.33%; float: left; box-sizing: border-box; } .diy-coupon.col-3 .diy-coupon-item { width: 33.33%; } .diy-coupon.col-2 .diy-coupon-item { width: 50%; } .diy-coupon .diy-coupon-item .name { font-size: 40rpx; line-height: 60rpx; position: relative; } .diy-coupon .diy-coupon-item .inner { height: 100%; border-radius: 0; border: none; background: #fd5454; color: #fff; font-size: 22rpx; line-height: 24rpx; position: relative; margin: 12rpx; text-align: center; } .diy-coupon .diy-coupon-item .receive { width: 3.3rem; border-radius: 1rem; border: 1px solid #fff; height: 1rem; line-height: 1rem; margin: 0 auto 0.4rem; } .diy-coupon .diy-coupon-item .point { position: absolute; height: 28rpx; width: 28rpx; border-radius: 50%; top: 50%; margin-top: -14rpx; background: #fff; } .diy-coupon .diy-coupon-item .pointleft { left: -14rpx; } .diy-coupon .diy-coupon-item .pointright { right: -14rpx; } .fui-goods-group.block.swiper { height: 396rpx; } .fui-goods-group.block.swiper.showtitle { height: 475rpx; } .fui-goods-group.block.swiper.showprice { height: 454rpx; } .fui-goods-group.block.swiper.showprice.showtitle { height: 534rpx; } .fui-goods-group.block.swiper.showprice.showproduct { height: 502rpx; } .fui-goods-group.block.swiper.showprice.showtitle.showproduct { height: 582rpx; } .fui-goods-group.block.one.swiper { height: 765rpx; } .fui-goods-group.block.one.swiper.showtitle { height: 866rpx; } .fui-goods-group.block.one.swiper.showprice { height: 892rpx; } .fui-goods-group.block.one.swiper.showprice.showproduct { height: 892rpx; } .fui-goods-group.block.one.swiper.showprice.showtitle { height: 924rpx; } .fui-goods-group.block.one.swiper.showprice.showtitle.showproduct { height: 972rpx; } .fui-goods-group.block.three.swiper { height: 271rpx; } .fui-goods-group.block.swiper.three.showtitle { height: 351rpx; } .fui-goods-group.block.swiper.three.showprice { height: 327rpx; } .fui-goods-group.block.three.swiper.showprice.showtitle { height: 407rpx; } .fui-goods-group.block.three.swiper.showprice.showproduct { height: 375rpx; } .fui-goods-group.block.three.swiper.showprice.showtitle.showproduct { height: 455rpx; } .fui-goods-group.block .fui-goods-item { width: 50%; float: left; border-bottom: 0; background: none; padding: 5px 3px; display: block; } .fui-goods-group.block .fui-goods-item .detail { padding: 8rpx; overflow: hidden; padding-bottom: 21rpx; } .fui-goods-group.block .fui-goods-item .image { width: 100%; position: relative; } .fui-goods-group.block .fui-goods-item .image image { width: auto; display: block; } .fui-goods-group.block.one .fui-goods-item { width: 100%; float: none; } .fui-goods-group.block.three .fui-goods-item { width: 33.33%; } .fui-goods-item { position: relative; height: auto; padding: 10px; border-bottom: 1px solid #e7e7e7; background: #fff; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fui-goods-group .fui-goods-item .detail { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; justify-content: space-between; } .fui-goods-group .fui-goods-item .detail .productprice { width: 100%; color: #999; font-size: 22rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; height: 48rpx; line-height: 48rpx; } .fui-goods-group.three .fui-goods-item .detail .name { font-size: 26rpx; } .fui-goods-group.three .fui-goods-item .detail .productprice { font-size: 22rpx; } .fui-goods-group.three .fui-goods-item .detail .price { font-size: 26rpx; } .fui-goods-group.three .fui-goods-item .detail .price .buy { padding: 0; font-size: 24rpx; } .fui-goods-group.three .fui-goods-item .detail .price .buybtn-2,.fui-goods-group.three .fui-goods-item .detail .price .buybtn-1 { padding: 0 8rpx; } .productprice text.line { text-decoration: line-through; } .fui-goods-item .detail .price { font-size: 32rpx; } .fui-goods-item .detail .price .buybtnbtn { display: inline-block; height: 40rpx; border: 1px solid #ff5555; width: auto; border-radius: 4rpx; } .fui-goods-item .detail .price .buybtn-1 { color: #ff5555; line-height: 40rpx; background: #fff; padding: 0rpx 14rpx; } .fui-goods-item .detail .price .buybtn-2 { color: #fff; line-height: 40rpx; background: #fc7b03; padding: 0rpx 14rpx; width:100%; border-radius:22rpx; } .fui-goods-item .detail .price .buybtn-3 { font-size: 28rpx; } .fui-goods-item .detail .price .buybtn-3,.fui-goods-item .detail .price .buybtn-6 { color: #fff; line-height: 44rpx; height: 42rpx; background: #ff5555; width: 44rpx; padding: 0; } .fui-goods-item .detail .price .buybtn-4 { background: none; border: none; padding: 0; font-size: 46rpx; height: auto; } .fui-goods-item .detail .price .buybtn-5 { color: #ff5555; line-height: 40rpx; background: #fff; width: 40rpx; padding: 0; border-radius: 50%; } .fui-goods-item .detail .price .buybtn-6 { border-radius: 50%; } .fui-goods-group .image { overflow: hidden; position: relative; } .fui-goods-group .image.triangle:before { content: attr(data-text); position: absolute; width: 135rpx; height: 96rpx; background: #ff5555; z-index: 10; transform-origin: left bottom; transform: rotate(-45deg); color: #fff; line-height: 148rpx; font-size: 24rpx; text-align: center; } .fui-goods-group .image.circle:before { content: attr(data-text); position: absolute; width: 64rpx; height: 64rpx; background: #ffb805; z-index: 10; text-align: center; border-radius: 50%; color: #fff; font-size: 24rpx; line-height: 24rpx; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; } .fui-goods-group .image.square:before { content: attr(data-text); position: absolute; width: 64rpx; height: 64rpx; background: #19dbab; z-index: 10; text-align: center; color: #fff; font-size: 24rpx; line-height: 24rpx; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; } .fui-goods-group .image.rectangle:before { content: attr(data-text); position: absolute; width: 90rpx; height: 40rpx; background: #04a6f8; z-index: 10; text-align: center; color: #fff; font-size: 24rpx; line-height: 1rem; } .fui-goods-group .image.echelon:before { content: attr(data-text); position: absolute; height: 40rpx; width: 136rpx; background: #ff7104; top: 56rpx; color: #fff; font-size: 24rpx; line-height: 40rpx; text-align: center; transform: rotate(-45deg); transform-origin: left bottom; } .fui-goods-item .image .goodsicon { height: auto; display: block; overflow: hidden; top: 0; left: 0; width: 100%; } .fui-goods-item .image .goodsicon image { display: inline-block; max-width: 100%; position: absolute; } .fui-goods-item .image .goodsicon .top { top: 0; } .fui-goods-item .image .goodsicon left { left: 0; } .fui-goods-item .image .goodsicon .right { right: 0; } .fui-goods-item .image .goodsicon .bottom { bottom: 0; } .fui-goods-item .detail .name { height: 68rpx; margin-bottom: 34rpx; } .fui-goods-group .fui-goods-item .detail .name { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 14rpx; } .fui-goods-group .fui-goods-item .salez { z-index: 11; top: 0; left: 0; right: 0; width: auto; height: auto; position: absolute; bottom: 0; } .fui-goods-group.block .fui-goods-item .image { width: 100%; height: 0; overflow: hidden; margin: 0; padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .fui-goods-group .fui-goods-item .image { background-size: cover; height: 231rpx; width: 231rpx; } .fui-goods-group { position: relative; } .fui-goods-group .prev { color: #fff; position: absolute; left: 0; top: 50%; z-index: 999; text-shadow: 2px 3px 3px rgba(0,0,0,0.3); animation: pre 1.5s infinite ease-in-out; } .fui-goods-group .next { color: #fff; position: absolute; right: 0; top: 50%; z-index: 999; text-shadow: 2px 3px 3px rgba(0,0,0,0.3); animation: next 1.5s infinite ease-in-out; } @-webkit-keyframes next { 0%,30% { opacity: 0.8; transform: translate(-8px,0px); } 60% { opacity: 0.8; transform: translate(0px,0); } 100% { opacity: 0.8; transform: translate(-8px,0px); } } @keyframes next { 0%,30% { opacity: 0.8; transform: translate(-8px,0px); } 60% { opacity: 0.8; transform: translate(0px,0); } 100% { opacity: 0.8; transform: translate(-8px,0px); } } @-webkit-keyframes pre { 0%,30% { opacity: 0.8; transform: translate(8px,0px); } 60% { opacity: 0.8; transform: translate(0px,0); } 100% { opacity: 0.8; transform: translate(8px,0px); } } @keyframes pre { 0%,30% { opacity: 0.8; transform: translate(8px,0px); } 60% { opacity: 0.8; transform: translate(0px,0); } 100% { opacity: 0.8; transform: translate(8px,0px); } } .fui-title.diypage-title { margin: 0; } .mc { width: auto; height: auto; position: absolute; bottom: 80rpx; left: 50%; margin-left: -105rpx; } .mc cover-view,.mc view { display: inline-block; color: #ff5555; width: 100rpx; height: 44rpx; border-radius: 20rpx; text-align: center; line-height: 44rpx; float: left; background: rgba(255,255,255,0.6); margin: 0 10rpx; font-size: 22rpx; } .mc cover-view.active,.mc view.active { color: #ffffff; background: #ff5555; } .index-banner.block,.video.block { display: block; } .index-banner.none,.video.none { display: none; } .video_cover { width: 100%; position: relative; } .video_cover .play { position: absolute; top: 50%; left: 50%; width: 130rpx; height: 120rpx; margin-top: -60rpx; margin-left: -65rpx; } .fui-audio { width: 100%; border: 1rpx solid #eeeeee; padding: 0 30rpx 0 20rpx; box-sizing: border-box; position: relative; overflow: hidden; background: #fff; } .fui-audio .img { width: 100rpx; height: 100rpx; background: #000; } .fui-audio .img image { width: 100%; height: 100%; } .fui-audio .name { font-size: 26rpx; color: #333; } .fui-audio .author { font-size: 24rpx; color: #666; } .fui-audio .time { font-size: 22rpx; color: #999; } .fui-audio .start { border: 0; padding: 0; margin: 0; font-size: 28rpx; } .progressBar { height: 2rpx; width: 0; background: #000; } .fui-audio.style1 { height: 86rpx; line-height: 82rpx; } .fui-audio.style1 .img,.fui-audio.style2 .img { display: none; } .fui-audio.style1 .name,.fui-audio.style2 .name { float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300rpx; } .fui-audio.style1 .author,.fui-audio.style2 .author { float: left; margin-left: 12rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200rpx; } .fui-audio.style1 .time,.fui-audio.style4 .time { display: none; } .fui-audio.style1 .start { position: absolute; top: 0rpx; right: 40rpx; width: 40rpx; height: 40rpx; color: #000; } .fui-audio.style1 .progress { position: absolute; bottom: 0; left: 0; right: 0; } .fui-audio.style2 { height: 86rpx; line-height: 82rpx; } .fui-audio.style2 .img { display: none; } .fui-audio.style2 .time { position: absolute; top: 0; right: 30rpx; } .fui-audio.style2 .name { margin-left: 70rpx; } .fui-audio.style2 .start { position: absolute; top: 0rpx; left: 30rpx; width: 30rpx; height: 30rpx; color: #000; } .fui-audio.style2 .progress,.fui-audio.style3 .progress { display: none; } .fui-audio.style3 { padding: 8rpx; } .fui-audio.style3 .start { position: absolute; top: 30rpx; left: 30rpx; width: 56rpx; height: 56rpx; color: #fff; border: 2rpx solid #fff; border-radius: 50%; text-indent: 18rpx; line-height: 56rpx; } .fui-audio.style3 .img,.fui-audio.style4 .img { float: left; margin-right: 20rpx; } .fui-audio.style3 .content { width: 468rpx; } .fui-audio.style3 .content,.fui-audio.style4 .content { float: left; height: 100rpx; display: flex; flex-direction: column; justify-content: center; } .fui-audio.style3 .content .name { height: 40rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-audio.style3 .content .author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-audio.style3 .time { position: absolute; top: 45rpx; right: 30rpx; } .fui-audio.style4 { padding: 10rpx; } .fui-audio.style4 .content { padding-bottom: 18rpx; height: 82rpx; width: 500rpx; } .fui-audio.style4 .start { position: absolute; top: 32rpx; right: 30rpx; width: 30rpx; height: 30rpx; color: #000; } .fui-audio.style4 .name { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-audio.style4 .author { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-audio.style4 .progress { background: #f5f5f5; height: 4rpx; position: absolute; bottom: 24rpx; left: 130rpx; right: 30rpx; border-radius: 2rpx; overflow: hidden; } .fui-audio.style4 .progressBar { height: 4rpx; } .fui-copyright-group { text-align: center; padding: 20rpx 24rpx; color: #cecece; } .fui-copyright-group image { width: 60rpx; height: 60rpx; vertical-align: middle; margin-right: 10rpx; } .fui-copyright2-group { text-align: center; padding: 10rpx 24rpx 0; color: #cecece; } .fui-copyright2-group image { width: 60rpx; height: 60rpx; }